Merge branch 'codex/add-pdf-to-json-and-json-to-pdf-features' of

git@github.com:Stirling-Tools/Stirling-PDF.git into
codex/add-pdf-to-json-and-json-to-pdf-features

.github/workflows/tauri-build.yml

@@ -312,6 +312,8 @@ jobs:
           APPIMAGETOOL_SIGN_PASSPHRASE: ${{ secrets.APPIMAGETOOL_SIGN_PASSPHRASE }}
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
+          VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY }}
+          VITE_SAAS_SERVER_URL: ${{ secrets.VITE_SAAS_SERVER_URL }}
           SIGN: ${{ (env.SM_API_KEY == '' && env.WINDOWS_CERTIFICATE != '') && '1' || '0' }}
           CI: true
         with:

app/common/src/main/java/stirling/software/SPDF/config/EndpointConfiguration.java

@@ -18,11 +18,37 @@ import stirling.software.common.model.ApplicationProperties;
 @Slf4j
 public class EndpointConfiguration {
 
+    public enum DisableReason {
+        CONFIG,
+        DEPENDENCY,
+        UNKNOWN
+    }
+
+    public static class EndpointAvailability {
+        private final boolean enabled;
+        private final DisableReason reason;
+
+        public EndpointAvailability(boolean enabled, DisableReason reason) {
+            this.enabled = enabled;
+            this.reason = reason;
+        }
+
+        public boolean isEnabled() {
+            return enabled;
+        }
+
+        public DisableReason getReason() {
+            return reason;
+        }
+    }
+
     private static final String REMOVE_BLANKS = "remove-blanks";
     private final ApplicationProperties applicationProperties;
     @Getter private Map<String, Boolean> endpointStatuses = new ConcurrentHashMap<>();
     private Map<String, Set<String>> endpointGroups = new ConcurrentHashMap<>();
     private Set<String> disabledGroups = new HashSet<>();
+    private Map<String, DisableReason> endpointDisableReasons = new ConcurrentHashMap<>();
+    private Map<String, DisableReason> groupDisableReasons = new ConcurrentHashMap<>();
     private Map<String, Set<String>> endpointAlternatives = new ConcurrentHashMap<>();
     private final boolean runningProOrHigher;
 
@@ -35,16 +61,31 @@ public class EndpointConfiguration {
         processEnvironmentConfigs();
     }
 
+    private String normalizeEndpoint(String endpoint) {
+        if (endpoint == null) {
+            return null;
+        }
+        return endpoint.startsWith("/") ? endpoint.substring(1) : endpoint;
+    }
+
     public void enableEndpoint(String endpoint) {
-        endpointStatuses.put(endpoint, true);
-        log.debug("Enabled endpoint: {}", endpoint);
+        String normalized = normalizeEndpoint(endpoint);
+        endpointStatuses.put(normalized, true);
+        endpointDisableReasons.remove(normalized);
+        log.debug("Enabled endpoint: {}", normalized);
     }
 
     public void disableEndpoint(String endpoint) {
-        if (!Boolean.FALSE.equals(endpointStatuses.get(endpoint))) {
-            log.debug("Disabling endpoint: {}", endpoint);
+        disableEndpoint(endpoint, DisableReason.CONFIG);
+    }
+
+    public void disableEndpoint(String endpoint, DisableReason reason) {
+        String normalized = normalizeEndpoint(endpoint);
+        if (!Boolean.FALSE.equals(endpointStatuses.get(normalized))) {
+            log.debug("Disabling endpoint: {}", normalized);
         }
-        endpointStatuses.put(endpoint, false);
+        endpointStatuses.put(normalized, false);
+        endpointDisableReasons.put(normalized, reason);
     }
 
     public boolean isEndpointEnabled(String endpoint) {
@@ -150,6 +191,10 @@ public class EndpointConfiguration {
     }
 
     public void disableGroup(String group) {
+        disableGroup(group, DisableReason.CONFIG);
+    }
+
+    public void disableGroup(String group, DisableReason reason) {
         if (disabledGroups.add(group)) {
             if (isToolGroup(group)) {
                 log.debug(
@@ -161,11 +206,12 @@ public class EndpointConfiguration {
                         group);
             }
         }
+        groupDisableReasons.put(group, reason);
         // Only cascade to endpoints for *functional* groups
         if (!isToolGroup(group)) {
             Set<String> endpoints = endpointGroups.get(group);
             if (endpoints != null) {
-                endpoints.forEach(this::disableEndpoint);
+                endpoints.forEach(endpoint -> disableEndpoint(endpoint, reason));
             }
         }
     }
@@ -174,12 +220,39 @@ public class EndpointConfiguration {
         if (disabledGroups.remove(group)) {
             log.debug("Enabling group: {}", group);
         }
+        groupDisableReasons.remove(group);
         Set<String> endpoints = endpointGroups.get(group);
         if (endpoints != null) {
             endpoints.forEach(this::enableEndpoint);
         }
     }
 
+    public EndpointAvailability getEndpointAvailability(String endpoint) {
+        boolean enabled = isEndpointEnabled(endpoint);
+        DisableReason reason = enabled ? null : determineDisableReason(endpoint);
+        return new EndpointAvailability(enabled, reason);
+    }
+
+    private DisableReason determineDisableReason(String endpoint) {
+        String normalized = normalizeEndpoint(endpoint);
+        if (Boolean.FALSE.equals(endpointStatuses.get(normalized))) {
+            return endpointDisableReasons.getOrDefault(normalized, DisableReason.CONFIG);
+        }
+
+        for (Map.Entry<String, Set<String>> entry : endpointGroups.entrySet()) {
+            String group = entry.getKey();
+            Set<String> endpoints = entry.getValue();
+            if (!disabledGroups.contains(group) || endpoints == null) {
+                continue;
+            }
+            if (endpoints.contains(normalized)) {
+                return groupDisableReasons.getOrDefault(group, DisableReason.CONFIG);
+            }
+        }
+
+        return DisableReason.UNKNOWN;
+    }
+
     public Set<String> getDisabledGroups() {
         return new HashSet<>(disabledGroups);
     }
@@ -261,6 +334,8 @@ public class EndpointConfiguration {
         addEndpointToGroup("Convert", "pdf-to-csv");
         addEndpointToGroup("Convert", "pdf-to-markdown");
         addEndpointToGroup("Convert", "eml-to-pdf");
+        addEndpointToGroup("Convert", "cbz-to-pdf");
+        addEndpointToGroup("Convert", "pdf-to-cbz");
         addEndpointToGroup("Convert", "pdf-to-json");
         addEndpointToGroup("Convert", "json-to-pdf");
 
@@ -396,6 +471,8 @@ public class EndpointConfiguration {
         addEndpointToGroup("Java", "pdf-to-markdown");
         addEndpointToGroup("Java", "add-attachments");
         addEndpointToGroup("Java", "compress-pdf");
+        addEndpointToGroup("Java", "cbz-to-pdf");
+        addEndpointToGroup("Java", "pdf-to-cbz");
         addEndpointToGroup("Java", "pdf-to-json");
         addEndpointToGroup("Java", "json-to-pdf");
         addEndpointToGroup("rar", "pdf-to-cbr");

app/core/src/main/java/stirling/software/SPDF/config/ExternalAppDepConfig.java

@@ -12,6 +12,7 @@ import jakarta.annotation.PostConstruct;
 
 import lombok.extern.slf4j.Slf4j;
 
+import stirling.software.SPDF.config.EndpointConfiguration.DisableReason;
 import stirling.software.common.configuration.RuntimePathConfig;
 import stirling.software.common.util.RegexPatternUtils;
 
@@ -97,7 +98,7 @@ public class ExternalAppDepConfig {
             if (affectedGroups != null) {
                 for (String group : affectedGroups) {
                     List<String> affectedFeatures = getAffectedFeatures(group);
-                    endpointConfiguration.disableGroup(group);
+                    endpointConfiguration.disableGroup(group, DisableReason.DEPENDENCY);
                     log.warn(
                             "Missing dependency: {} - Disabling group: {} (Affected features: {})",
                             command,
@@ -127,8 +128,8 @@ public class ExternalAppDepConfig {
         if (!pythonAvailable) {
             List<String> pythonFeatures = getAffectedFeatures("Python");
             List<String> openCVFeatures = getAffectedFeatures("OpenCV");
-            endpointConfiguration.disableGroup("Python");
-            endpointConfiguration.disableGroup("OpenCV");
+            endpointConfiguration.disableGroup("Python", DisableReason.DEPENDENCY);
+            endpointConfiguration.disableGroup("OpenCV", DisableReason.DEPENDENCY);
             log.warn(
                     "Missing dependency: Python - Disabling Python features: {} and OpenCV features: {}",
                     String.join(", ", pythonFeatures),
@@ -146,14 +147,14 @@ public class ExternalAppDepConfig {
                 int exitCode = process.waitFor();
                 if (exitCode != 0) {
                     List<String> openCVFeatures = getAffectedFeatures("OpenCV");
-                    endpointConfiguration.disableGroup("OpenCV");
+                    endpointConfiguration.disableGroup("OpenCV", DisableReason.DEPENDENCY);
                     log.warn(
                             "OpenCV not available in Python - Disabling OpenCV features: {}",
                             String.join(", ", openCVFeatures));
                 }
             } catch (Exception e) {
                 List<String> openCVFeatures = getAffectedFeatures("OpenCV");
-                endpointConfiguration.disableGroup("OpenCV");
+                endpointConfiguration.disableGroup("OpenCV", DisableReason.DEPENDENCY);
                 log.warn(
                         "Error checking OpenCV: {} - Disabling OpenCV features: {}",
                         e.getMessage(),

app/core/src/main/java/stirling/software/SPDF/controller/api/misc/ConfigController.java

@@ -1,6 +1,7 @@
 package stirling.software.SPDF.controller.api.misc;
 
 import java.util.HashMap;
+import java.util.List;
 import java.util.Map;
 
 import org.springframework.context.ApplicationContext;
@@ -10,9 +11,13 @@ import org.springframework.web.bind.annotation.RequestParam;
 
 import io.swagger.v3.oas.annotations.Hidden;
 
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.Size;
+
 import lombok.extern.slf4j.Slf4j;
 
 import stirling.software.SPDF.config.EndpointConfiguration;
+import stirling.software.SPDF.config.EndpointConfiguration.EndpointAvailability;
 import stirling.software.SPDF.config.InitialSetup;
 import stirling.software.common.annotations.api.ConfigApi;
 import stirling.software.common.configuration.AppConfig;
@@ -200,4 +205,19 @@ public class ConfigController {
         }
         return ResponseEntity.ok(result);
     }
+
+    @GetMapping("/endpoints-availability")
+    public ResponseEntity<Map<String, EndpointAvailability>> getEndpointAvailability(
+            @RequestParam(name = "endpoints")
+                    @Size(min = 1, max = 100, message = "Must provide between 1 and 100 endpoints")
+                    List<@NotBlank String> endpoints) {
+        Map<String, EndpointAvailability> result = new HashMap<>();
+        for (String endpoint : endpoints) {
+            String trimmedEndpoint = endpoint.trim();
+            result.put(
+                    trimmedEndpoint,
+                    endpointConfiguration.getEndpointAvailability(trimmedEndpoint));
+        }
+        return ResponseEntity.ok(result);
+    }
 }

app/proprietary/src/main/java/stirling/software/SPDF/controller/api/converters/ConvertPdfJsonController.java

@@ -31,10 +31,12 @@ import stirling.software.common.model.api.PDFFile;
 import stirling.software.common.service.JobOwnershipService;
 import stirling.software.common.util.ExceptionUtils;
 import stirling.software.common.util.WebResponseUtils;
+import stirling.software.proprietary.security.config.PremiumEndpoint;
 
 @Slf4j
 @ConvertApi
 @RequiredArgsConstructor
+@PremiumEndpoint
 public class ConvertPdfJsonController {
 
     private final PdfJsonConversionService pdfJsonConversionService;

app/proprietary/src/main/java/stirling/software/proprietary/security/service/JwtService.java

@@ -39,7 +39,7 @@ import stirling.software.proprietary.security.saml2.CustomSaml2AuthenticatedPrin
 public class JwtService implements JwtServiceInterface {
 
     private static final String ISSUER = "https://stirling.com";
-    private static final long EXPIRATION = 3600000;
+    private static final long EXPIRATION = 43200000;
 
     private final KeyPersistenceServiceInterface keyPersistenceService;
     private final boolean v2Enabled;

frontend/package-lock.json

@@ -14,6 +14,7 @@
         "@embedpdf/core": "^1.4.1",
         "@embedpdf/engines": "^1.4.1",
         "@embedpdf/plugin-annotation": "^1.4.1",
+        "@embedpdf/plugin-bookmark": "^1.4.1",
         "@embedpdf/plugin-export": "^1.4.1",
         "@embedpdf/plugin-history": "^1.4.1",
         "@embedpdf/plugin-interaction-manager": "^1.4.1",
@@ -634,6 +635,22 @@
         "vue": ">=3.2.0"
       }
     },
+    "node_modules/@embedpdf/plugin-bookmark": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-bookmark/-/plugin-bookmark-1.4.1.tgz",
+      "integrity": "sha512-WnfBJdv+Eq5zsMfwDZ5RlXZMGpvKm/ccL6jlTVwtELBhu3wvhjjbBmZdheEOzHMC3VXMNYDMjCeaXkUG4nWoDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@embedpdf/models": "1.4.1"
+      },
+      "peerDependencies": {
+        "@embedpdf/core": "1.4.1",
+        "preact": "^10.26.4",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/@embedpdf/plugin-export": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@embedpdf/plugin-export/-/plugin-export-1.4.1.tgz",

frontend/package.json

@@ -10,6 +10,7 @@
     "@embedpdf/core": "^1.4.1",
     "@embedpdf/engines": "^1.4.1",
     "@embedpdf/plugin-annotation": "^1.4.1",
+    "@embedpdf/plugin-bookmark": "^1.4.1",
     "@embedpdf/plugin-export": "^1.4.1",
     "@embedpdf/plugin-history": "^1.4.1",
     "@embedpdf/plugin-interaction-manager": "^1.4.1",

frontend/public/locales/en-GB/translation.json

@@ -17,6 +17,8 @@
       "comingSoon": "Coming soon:",
       "favorite": "Add to favourites",
       "favorites": "Favourites",
+      "unavailable": "Disabled by server administrator:",
+      "unavailableDependency": "Unavailable - required tool missing on server:",
       "heading": "All tools (fullscreen view)",
       "noResults": "Try adjusting your search or toggle descriptions to find what you need.",
       "recommended": "Recommended",
@@ -3832,6 +3834,7 @@
     "downloadSelected": "Download Selected Files",
     "downloadAll": "Download All",
     "toggleTheme": "Toggle Theme",
+    "toggleBookmarks": "Toggle Bookmarks",
     "language": "Language",
     "search": "Search PDF",
     "panMode": "Pan Mode",
@@ -5627,15 +5630,23 @@
       "description": "Enter credentials"
     },
     "mode": {
-      "offline": {
-        "title": "Use Offline",
-        "description": "Run locally without an internet connection"
+      "saas": {
+        "title": "Stirling Cloud",
+        "description": "Sign in with your Stirling account"
       },
-      "server": {
-        "title": "Connect to Server",
-        "description": "Connect to a remote Stirling PDF server"
+      "selfhosted": {
+        "title": "Self-Hosted Server",
+        "description": "Connect to your own Stirling PDF server"
       }
     },
+    "saas": {
+      "title": "Sign in to Stirling",
+      "subtitle": "Sign in with your Stirling account"
+    },
+    "selfhosted": {
+      "title": "Sign in to Server",
+      "subtitle": "Enter your server credentials"
+    },
     "server": {
       "title": "Connect to Server",
       "subtitle": "Enter your self-hosted server URL",
@@ -5677,16 +5688,12 @@
     "connection": {
       "title": "Connection Mode",
       "mode": {
-        "offline": "Offline",
-        "server": "Server"
+        "saas": "Stirling Cloud",
+        "selfhosted": "Self-Hosted"
       },
       "server": "Server",
       "user": "Logged in as",
-      "switchToServer": "Connect to Server",
-      "switchToOffline": "Switch to Offline",
-      "logout": "Logout",
-      "selectServer": "Select Server",
-      "login": "Login"
+      "logout": "Log Out"
     },
     "general": {
       "title": "General",
@@ -5727,7 +5734,11 @@
         "latestVersion": "Latest Version",
         "checkForUpdates": "Check for Updates",
         "viewDetails": "View Details"
-      }
+      },
+      "hideUnavailableTools": "Hide unavailable tools",
+      "hideUnavailableToolsDescription": "Remove tools that have been disabled by your server instead of showing them greyed out.",
+      "hideUnavailableConversions": "Hide unavailable conversions",
+      "hideUnavailableConversionsDescription": "Remove disabled conversion options in the Convert tool instead of showing them greyed out."
     },
     "hotkeys": {
       "errorConflict": "Shortcut already used by {{tool}}.",

frontend/src-tauri/src/commands/auth.rs

@@ -127,7 +127,7 @@ pub async fn clear_user_info(app_handle: AppHandle) -> Result<(), String> {
     Ok(())
 }
 
-// Response types for Spring Boot login
+// Response types for Spring Boot login (self-hosted)
 #[derive(Debug, Deserialize)]
 struct SpringBootSession {
     access_token: String,
@@ -145,6 +145,24 @@ struct SpringBootLoginResponse {
     user: SpringBootUser,
 }
 
+// Response types for Supabase login (SaaS)
+#[derive(Debug, Deserialize)]
+struct SupabaseUserMetadata {
+    full_name: Option<String>,
+}
+
+#[derive(Debug, Deserialize)]
+struct SupabaseUser {
+    email: Option<String>,
+    user_metadata: Option<SupabaseUserMetadata>,
+}
+
+#[derive(Debug, Deserialize)]
+struct SupabaseLoginResponse {
+    access_token: String,
+    user: SupabaseUser,
+}
+
 #[derive(Debug, Serialize)]
 pub struct LoginResponse {
     pub token: String,
@@ -153,7 +171,7 @@ pub struct LoginResponse {
 }
 
 /// Login command - makes HTTP request from Rust to bypass CORS
-/// Supports Spring Boot authentication (self-hosted)
+/// Supports both Supabase authentication (SaaS) and Spring Boot authentication (self-hosted)
 #[tauri::command]
 pub async fn login(
     server_url: String,
@@ -162,54 +180,124 @@ pub async fn login(
 ) -> Result<LoginResponse, String> {
     log::info!("Login attempt for user: {} to server: {}", username, server_url);
 
-    // Build login URL
-    let login_url = format!("{}/api/v1/auth/login", server_url.trim_end_matches('/'));
-    log::debug!("Login URL: {}", login_url);
+    // Detect if this is Supabase (SaaS) or Spring Boot (self-hosted)
+    // Compare against the configured SaaS server URL from environment
+    let saas_server_url = env!("VITE_SAAS_SERVER_URL");
+    let is_supabase = server_url.trim_end_matches('/') == saas_server_url.trim_end_matches('/');
+    log::info!("Authentication type: {}", if is_supabase { "Supabase (SaaS)" } else { "Spring Boot (Self-hosted)" });
 
     // Create HTTP client
     let client = reqwest::Client::new();
 
-    // Make login request
-    let response = client
-        .post(&login_url)
-        .json(&serde_json::json!({
-            "username": username,
+    if is_supabase {
+        // Supabase authentication flow
+        let login_url = format!("{}/auth/v1/token?grant_type=password", server_url.trim_end_matches('/'));
+
+        // Supabase public API key from environment variable (required at compile time)
+        // Set VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY before building
+        let supabase_key = env!("VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY");
+
+        let request_body = serde_json::json!({
+            "email": username,
             "password": password,
-        }))
-        .send()
-        .await
-        .map_err(|e| format!("Network error: {}", e))?;
-
-    let status = response.status();
-    log::debug!("Login response status: {}", status);
-
-    if !status.is_success() {
-        let error_text = response
-            .text()
-            .await
-            .unwrap_or_else(|_| "Unknown error".to_string());
-        log::error!("Login failed with status {}: {}", status, error_text);
-
-        return Err(if status.as_u16() == 401 {
-            "Invalid username or password".to_string()
-        } else if status.as_u16() == 403 {
-            "Access denied".to_string()
-        } else {
-            format!("Login failed: {}", status)
         });
+
+        let response = client
+            .post(&login_url)
+            .header("Content-Type", "application/json;charset=UTF-8")
+            .header("apikey", supabase_key)
+            .header("Authorization", format!("Bearer {}", supabase_key))
+            .header("X-Client-Info", "supabase-js-web/2.58.0")
+            .header("X-Supabase-Api-Version", "2024-01-01")
+            .json(&request_body)
+            .send()
+            .await
+            .map_err(|e| format!("Network error: {}", e))?;
+
+        let status = response.status();
+
+        if !status.is_success() {
+            let error_text = response
+                .text()
+                .await
+                .unwrap_or_else(|_| "Unknown error".to_string());
+            log::error!("Supabase login failed with status {}: {}", status, error_text);
+
+            return Err(if status.as_u16() == 400 || status.as_u16() == 401 {
+                "Invalid username or password".to_string()
+            } else if status.as_u16() == 403 {
+                "Access denied".to_string()
+            } else {
+                format!("Login failed: {}", status)
+            });
+        }
+
+        // Parse Supabase response format
+        let login_response: SupabaseLoginResponse = response
+            .json()
+            .await
+            .map_err(|e| format!("Failed to parse Supabase response: {}", e))?;
+
+        let email = login_response.user.email.clone();
+        let username = login_response.user.user_metadata
+            .as_ref()
+            .and_then(|m| m.full_name.clone())
+            .or_else(|| email.clone())
+            .unwrap_or_else(|| username);
+
+        log::info!("Supabase login successful for user: {}", username);
+
+        Ok(LoginResponse {
+            token: login_response.access_token,
+            username,
+            email,
+        })
+    } else {
+        // Spring Boot authentication flow
+        let login_url = format!("{}/api/v1/auth/login", server_url.trim_end_matches('/'));
+        log::debug!("Spring Boot login URL: {}", login_url);
+
+        let response = client
+            .post(&login_url)
+            .json(&serde_json::json!({
+                "username": username,
+                "password": password,
+            }))
+            .send()
+            .await
+            .map_err(|e| format!("Network error: {}", e))?;
+
+        let status = response.status();
+        log::debug!("Spring Boot login response status: {}", status);
+
+        if !status.is_success() {
+            let error_text = response
+                .text()
+                .await
+                .unwrap_or_else(|_| "Unknown error".to_string());
+            log::error!("Spring Boot login failed with status {}: {}", status, error_text);
+
+            return Err(if status.as_u16() == 401 {
+                "Invalid username or password".to_string()
+            } else if status.as_u16() == 403 {
+                "Access denied".to_string()
+            } else {
+                format!("Login failed: {}", status)
+            });
+        }
+
+        // Parse Spring Boot response format
+        let login_response: SpringBootLoginResponse = response
+            .json()
+            .await
+            .map_err(|e| format!("Failed to parse Spring Boot response: {}", e))?;
+
+        log::info!("Spring Boot login successful for user: {}", login_response.user.username);
+
+        Ok(LoginResponse {
+            token: login_response.session.access_token,
+            username: login_response.user.username,
+            email: login_response.user.email,
+        })
     }
-
-    // Parse Spring Boot response format
-    let login_response: SpringBootLoginResponse = response
-        .json()
-        .await
-        .map_err(|e| format!("Failed to parse response: {}", e))?;
-
-    log::info!("Login successful for user: {}", login_response.user.username);
-
-    Ok(LoginResponse {
-        token: login_response.session.access_token,
-        username: login_response.user.username,
-        email: login_response.user.email,
-    })
 }

frontend/src-tauri/src/commands/backend.rs

@@ -349,11 +349,11 @@ pub async fn start_backend(
     };
 
     match mode {
-        ConnectionMode::Offline => {
-            add_log("🔌 Running in Offline mode - starting local backend".to_string());
+        ConnectionMode::SaaS => {
+            add_log("☁️ Running in SaaS mode - starting local backend".to_string());
         }
-        ConnectionMode::Server => {
-            add_log("🌐 Running in Server mode - starting local backend (for hybrid execution support)".to_string());
+        ConnectionMode::SelfHosted => {
+            add_log("🌐 Running in Self-Hosted mode - starting local backend (for hybrid execution support)".to_string());
         }
     }
 

frontend/src-tauri/src/commands/connection.rs

@@ -31,7 +31,7 @@ pub async fn get_connection_config(
     let mode = store
         .get(CONNECTION_MODE_KEY)
         .and_then(|v| serde_json::from_value(v.clone()).ok())
-        .unwrap_or(ConnectionMode::Offline);
+        .unwrap_or(ConnectionMode::SaaS);
 
     let server_config: Option<ServerConfig> = store
         .get(SERVER_CONFIG_KEY)
@@ -109,3 +109,22 @@ pub async fn is_first_launch(app_handle: AppHandle) -> Result<bool, String> {
 
     Ok(!setup_completed)
 }
+
+#[tauri::command]
+pub async fn reset_setup_completion(app_handle: AppHandle) -> Result<(), String> {
+    log::info!("Resetting setup completion flag");
+
+    let store = app_handle
+        .store(STORE_FILE)
+        .map_err(|e| format!("Failed to access store: {}", e))?;
+
+    // Reset setup completion flag to force SetupWizard on next launch
+    store.set(FIRST_LAUNCH_KEY, serde_json::json!(false));
+
+    store
+        .save()
+        .map_err(|e| format!("Failed to save store: {}", e))?;
+
+    log::info!("Setup completion flag reset successfully");
+    Ok(())
+}

frontend/src-tauri/src/commands/mod.rs

@@ -10,6 +10,7 @@ pub use files::{add_opened_file, clear_opened_files, get_opened_files};
 pub use connection::{
     get_connection_config,
     is_first_launch,
+    reset_setup_completion,
     set_connection_mode,
 };
 pub use auth::{

frontend/src-tauri/src/lib.rs

@@ -19,6 +19,7 @@ use commands::{
     get_user_info,
     is_first_launch,
     login,
+    reset_setup_completion,
     save_auth_token,
     save_user_info,
     set_connection_mode,
@@ -85,6 +86,7 @@ pub fn run() {
       is_default_pdf_handler,
       set_as_default_pdf_handler,
       is_first_launch,
+      reset_setup_completion,
       check_backend_health,
       login,
       save_auth_token,

frontend/src-tauri/src/state/connection_state.rs

@@ -4,13 +4,6 @@ use std::sync::Mutex;
 #[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
 #[serde(rename_all = "lowercase")]
 pub enum ConnectionMode {
-    Offline,
-    Server,
-}
-
-#[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
-#[serde(rename_all = "lowercase")]
-pub enum ServerType {
     SaaS,
     SelfHosted,
 }
@@ -18,7 +11,6 @@ pub enum ServerType {
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct ServerConfig {
     pub url: String,
-    pub server_type: ServerType,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -30,7 +22,7 @@ pub struct ConnectionState {
 impl Default for ConnectionState {
     fn default() -> Self {
         Self {
-            mode: ConnectionMode::Offline,
+            mode: ConnectionMode::SaaS,
             server_config: None,
         }
     }

frontend/src/core/components/shared/config/configSections/GeneralSection.tsx

@@ -53,11 +53,17 @@ const GeneralSection: React.FC<GeneralSectionProps> = ({ hideTitle = false }) =>
     };
 
     const summary = await updateService.getUpdateSummary(config.appVersion, machineInfo);
-    if (summary) {
+    if (summary && summary.latest_version) {
       const isNewerVersion = updateService.compareVersions(summary.latest_version, config.appVersion) > 0;
       if (isNewerVersion) {
         setUpdateSummary(summary);
+      } else {
+        // Clear any existing update summary if user is on latest version
+        setUpdateSummary(null);
       }
+    } else {
+      // No update available (latest_version is null) - clear any existing update summary
+      setUpdateSummary(null);
     }
     setCheckingUpdate(false);
   };
@@ -128,83 +134,6 @@ const GeneralSection: React.FC<GeneralSectionProps> = ({ hideTitle = false }) =>
         </Paper>
       )}
 
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">
-                {t('settings.general.defaultToolPickerMode', 'Default tool picker mode')}
-              </Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('settings.general.defaultToolPickerModeDescription', 'Choose whether the tool picker opens in fullscreen or sidebar by default')}
-              </Text>
-            </div>
-            <SegmentedControl
-              value={preferences.defaultToolPanelMode}
-              onChange={(val: string) => updatePreference('defaultToolPanelMode', val as ToolPanelMode)}
-              data={[
-                { label: t('settings.general.mode.sidebar', 'Sidebar'), value: 'sidebar' },
-                { label: t('settings.general.mode.fullscreen', 'Fullscreen'), value: 'fullscreen' },
-              ]}
-            />
-          </div>
-          <Tooltip
-            label={t('settings.general.autoUnzipTooltip', 'Automatically extract ZIP files returned from API operations. Disable to keep ZIP files intact. This does not affect automation workflows.')}
-            multiline
-            w={300}
-            withArrow
-          >
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'help' }}>
-              <div>
-                <Text fw={500} size="sm">
-                  {t('settings.general.autoUnzip', 'Auto-unzip API responses')}
-                </Text>
-                <Text size="xs" c="dimmed" mt={4}>
-                  {t('settings.general.autoUnzipDescription', 'Automatically extract files from ZIP responses')}
-                </Text>
-              </div>
-              <Switch
-                checked={preferences.autoUnzip}
-                onChange={(event) => updatePreference('autoUnzip', event.currentTarget.checked)}
-              />
-            </div>
-          </Tooltip>
-
-          <Tooltip
-            label={t('settings.general.autoUnzipFileLimitTooltip', 'Only unzip if the ZIP contains this many files or fewer. Set higher to extract larger ZIPs.')}
-            multiline
-            w={300}
-            withArrow
-          >
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'help' }}>
-              <div>
-                <Text fw={500} size="sm">
-                  {t('settings.general.autoUnzipFileLimit', 'Auto-unzip file limit')}
-                </Text>
-                <Text size="xs" c="dimmed" mt={4}>
-                  {t('settings.general.autoUnzipFileLimitDescription', 'Maximum number of files to extract from ZIP')}
-                </Text>
-              </div>
-              <NumberInput
-                value={fileLimitInput}
-                onChange={setFileLimitInput}
-                onBlur={() => {
-                  const numValue = Number(fileLimitInput);
-                  const finalValue = (!fileLimitInput || isNaN(numValue) || numValue < 1 || numValue > 100) ? DEFAULT_AUTO_UNZIP_FILE_LIMIT : numValue;
-                  setFileLimitInput(finalValue);
-                  updatePreference('autoUnzipFileLimit', finalValue);
-                }}
-                min={1}
-                max={100}
-                step={1}
-                disabled={!preferences.autoUnzip}
-                style={{ width: 90 }}
-              />
-            </div>
-          </Tooltip>
-        </Stack>
-      </Paper>
-
       {/* Update Check Section */}
       {config?.appVersion && (
         <Paper withBorder p="md" radius="md">
@@ -292,6 +221,111 @@ const GeneralSection: React.FC<GeneralSectionProps> = ({ hideTitle = false }) =>
         </Paper>
       )}
 
+      <Paper withBorder p="md" radius="md">
+        <Stack gap="md">
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <div>
+              <Text fw={500} size="sm">
+                {t('settings.general.defaultToolPickerMode', 'Default tool picker mode')}
+              </Text>
+              <Text size="xs" c="dimmed" mt={4}>
+                {t('settings.general.defaultToolPickerModeDescription', 'Choose whether the tool picker opens in fullscreen or sidebar by default')}
+              </Text>
+            </div>
+            <SegmentedControl
+              value={preferences.defaultToolPanelMode}
+              onChange={(val: string) => updatePreference('defaultToolPanelMode', val as ToolPanelMode)}
+              data={[
+                { label: t('settings.general.mode.sidebar', 'Sidebar'), value: 'sidebar' },
+                { label: t('settings.general.mode.fullscreen', 'Fullscreen'), value: 'fullscreen' },
+              ]}
+            />
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <div>
+              <Text fw={500} size="sm">
+                {t('settings.general.hideUnavailableTools', 'Hide unavailable tools')}
+              </Text>
+              <Text size="xs" c="dimmed" mt={4}>
+                {t('settings.general.hideUnavailableToolsDescription', 'Remove tools that have been disabled by your server instead of showing them greyed out.')}
+              </Text>
+            </div>
+            <Switch
+              checked={preferences.hideUnavailableTools}
+              onChange={(event) => updatePreference('hideUnavailableTools', event.currentTarget.checked)}
+            />
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <div>
+              <Text fw={500} size="sm">
+                {t('settings.general.hideUnavailableConversions', 'Hide unavailable conversions')}
+              </Text>
+              <Text size="xs" c="dimmed" mt={4}>
+                {t('settings.general.hideUnavailableConversionsDescription', 'Remove disabled conversion options in the Convert tool instead of showing them greyed out.')}
+              </Text>
+            </div>
+            <Switch
+              checked={preferences.hideUnavailableConversions}
+              onChange={(event) => updatePreference('hideUnavailableConversions', event.currentTarget.checked)}
+            />
+          </div>
+          <Tooltip
+            label={t('settings.general.autoUnzipTooltip', 'Automatically extract ZIP files returned from API operations. Disable to keep ZIP files intact. This does not affect automation workflows.')}
+            multiline
+            w={300}
+            withArrow
+          >
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'help' }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t('settings.general.autoUnzip', 'Auto-unzip API responses')}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t('settings.general.autoUnzipDescription', 'Automatically extract files from ZIP responses')}
+                </Text>
+              </div>
+              <Switch
+                checked={preferences.autoUnzip}
+                onChange={(event) => updatePreference('autoUnzip', event.currentTarget.checked)}
+              />
+            </div>
+          </Tooltip>
+
+          <Tooltip
+            label={t('settings.general.autoUnzipFileLimitTooltip', 'Only unzip if the ZIP contains this many files or fewer. Set higher to extract larger ZIPs.')}
+            multiline
+            w={300}
+            withArrow
+          >
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'help' }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t('settings.general.autoUnzipFileLimit', 'Auto-unzip file limit')}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t('settings.general.autoUnzipFileLimitDescription', 'Maximum number of files to extract from ZIP')}
+                </Text>
+              </div>
+              <NumberInput
+                value={fileLimitInput}
+                onChange={setFileLimitInput}
+                onBlur={() => {
+                  const numValue = Number(fileLimitInput);
+                  const finalValue = (!fileLimitInput || isNaN(numValue) || numValue < 1 || numValue > 100) ? DEFAULT_AUTO_UNZIP_FILE_LIMIT : numValue;
+                  setFileLimitInput(finalValue);
+                  updatePreference('autoUnzipFileLimit', finalValue);
+                }}
+                min={1}
+                max={100}
+                step={1}
+                disabled={!preferences.autoUnzip}
+                style={{ width: 90 }}
+              />
+            </div>
+          </Tooltip>
+        </Stack>
+      </Paper>
+
       {/* Update Modal */}
       {updateSummary && config?.appVersion && config?.machineType && (
         <UpdateModal

frontend/src/core/components/tools/convert/ConvertSettings.tsx

@@ -8,6 +8,7 @@ import { getConversionEndpoints } from "@app/data/toolsTaxonomy";
 import { useFileSelection } from "@app/contexts/FileContext";
 import { useFileState } from "@app/contexts/FileContext";
 import { detectFileExtension } from "@app/utils/fileUtils";
+import { usePreferences } from "@app/contexts/PreferencesContext";
 import GroupedFormatDropdown from "@app/components/tools/convert/GroupedFormatDropdown";
 import ConvertToImageSettings from "@app/components/tools/convert/ConvertToImageSettings";
 import ConvertFromImageSettings from "@app/components/tools/convert/ConvertFromImageSettings";
@@ -47,8 +48,12 @@ const ConvertSettings = ({
   const { setSelectedFiles } = useFileSelection();
   const { state, selectors } = useFileState();
   const activeFiles = state.files.ids;
+  const { preferences } = usePreferences();
 
-  const allEndpoints = useMemo(() => getConversionEndpoints(EXTENSION_TO_ENDPOINT), []);
+  const allEndpoints = useMemo(() => {
+    const endpoints = getConversionEndpoints(EXTENSION_TO_ENDPOINT);
+    return endpoints;
+  }, []);
 
   const { endpointStatus } = useMultipleEndpointsEnabled(allEndpoints);
 
@@ -56,7 +61,8 @@ const ConvertSettings = ({
     const endpointKey = EXTENSION_TO_ENDPOINT[fromExt]?.[toExt];
     if (!endpointKey) return false;
 
-    return endpointStatus[endpointKey] === true;
+    const isAvailable = endpointStatus[endpointKey] === true;
+    return isAvailable;
   };
 
   // Enhanced FROM options with endpoint availability
@@ -74,6 +80,12 @@ const ConvertSettings = ({
       };
     });
 
+    // Filter out unavailable source formats if preference is enabled
+    let filteredOptions = baseOptions;
+    if (preferences.hideUnavailableConversions) {
+      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-', '');
@@ -85,22 +97,32 @@ const ConvertSettings = ({
       };
 
       // Add the dynamic option at the beginning
-      return [dynamicOption, ...baseOptions];
+      return [dynamicOption, ...filteredOptions];
     }
 
-    return baseOptions;
-  }, [parameters.fromExtension, endpointStatus]);
+    return filteredOptions;
+  }, [parameters.fromExtension, endpointStatus, preferences.hideUnavailableConversions]);
 
   // Enhanced TO options with endpoint availability
   const enhancedToOptions = useMemo(() => {
     if (!parameters.fromExtension) return [];
 
     const availableOptions = getAvailableToExtensions(parameters.fromExtension) || [];
-    return availableOptions.map(option => ({
-      ...option,
-      enabled: isConversionAvailable(parameters.fromExtension, option.value)
-    }));
-  }, [parameters.fromExtension, endpointStatus]);
+    const enhanced = availableOptions.map(option => {
+      const enabled = isConversionAvailable(parameters.fromExtension, option.value);
+      return {
+        ...option,
+        enabled
+      };
+    });
+
+    // Filter out unavailable conversions if preference is enabled
+    if (preferences.hideUnavailableConversions) {
+      return enhanced.filter(opt => opt.enabled !== false);
+    }
+
+    return enhanced;
+  }, [parameters.fromExtension, endpointStatus, preferences.hideUnavailableConversions]);
 
   const resetParametersToDefaults = () => {
     onParameterChange('imageOptions', {

frontend/src/core/components/tools/fullscreen/CompactToolItem.tsx

@@ -5,7 +5,7 @@ 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 } from '@app/components/tools/fullscreen/shared';
+import { getIconBackground, getIconStyle, getItemClasses, useToolMeta, getDisabledLabel } from '@app/components/tools/fullscreen/shared';
 
 interface CompactToolItemProps {
   id: string;
@@ -17,14 +17,10 @@ interface CompactToolItemProps {
 
 const CompactToolItem: React.FC<CompactToolItemProps> = ({ id, tool, isSelected, onClick, tooltipPortalTarget }) => {
   const { t } = useTranslation();
-  const { binding, isFav, toggleFavorite, disabled, premiumEnabled } = useToolMeta(id, tool);
+  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';
-  
-  // Determine why tool is disabled for tooltip content
-  const isUnavailable = !tool.component && !tool.link && id !== 'read' && id !== 'multiTool';
-  const requiresPremiumButNotEnabled = tool.requiresPremium === true && premiumEnabled !== true;
 
   let iconNode: React.ReactNode = null;
   if (React.isValidElement<{ style?: React.CSSProperties }>(tool.icon)) {
@@ -88,22 +84,14 @@ const CompactToolItem: React.FC<CompactToolItemProps> = ({ id, tool, isSelected,
     </button>
   );
 
-  // Determine tooltip content based on disabled reason
-  let tooltipContent: React.ReactNode;
-  if (requiresPremiumButNotEnabled) {
-    tooltipContent = (
-      <span>
-        <strong>{t('toolPanel.premiumFeature', 'Premium feature:')}</strong> {tool.description}
-      </span>
-    );
-  } else if (isUnavailable) {
-    tooltipContent = (
-      <span>
-        <strong>{t('toolPanel.fullscreen.comingSoon', 'Coming soon:')}</strong> {tool.description}
-      </span>
-    );
-  } else {
-    tooltipContent = (
+  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 && (
@@ -116,7 +104,6 @@ const CompactToolItem: React.FC<CompactToolItemProps> = ({ id, tool, isSelected,
         )}
       </div>
     );
-  }
 
   return (
     <Tooltip

frontend/src/core/components/tools/fullscreen/DetailedToolItem.tsx

@@ -4,7 +4,7 @@ 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 } from '@app/components/tools/fullscreen/shared';
+import { getIconBackground, getIconStyle, getItemClasses, useToolMeta, getDisabledLabel } from '@app/components/tools/fullscreen/shared';
 
 interface DetailedToolItemProps {
   id: string;
@@ -15,7 +15,7 @@ interface DetailedToolItemProps {
 
 const DetailedToolItem: React.FC<DetailedToolItemProps> = ({ id, tool, isSelected, onClick }) => {
   const { t } = useTranslation();
-  const { binding, isFav, toggleFavorite, disabled } = useToolMeta(id, tool);
+  const { binding, isFav, toggleFavorite, disabled, disabledReason } = useToolMeta(id, tool);
 
   const categoryColor = getSubcategoryColor(tool.subcategoryId);
   const iconBg = getIconBackground(categoryColor, true);
@@ -34,6 +34,9 @@ const DetailedToolItem: React.FC<DetailedToolItemProps> = ({ id, tool, isSelecte
     iconNode = tool.icon;
   }
 
+  const { key: disabledKey, fallback: disabledFallback } = getDisabledLabel(disabledReason);
+  const disabledMessage = t(disabledKey, disabledFallback);
+
   return (
     <button
       type="button"
@@ -72,7 +75,12 @@ const DetailedToolItem: React.FC<DetailedToolItemProps> = ({ id, tool, isSelecte
           )}
         </div>
         <Text size="sm" c="dimmed" className="tool-panel__fullscreen-description">
-          {tool.description}
+          {disabled ? (
+            <>
+              <strong>{disabledMessage} </strong>
+              {tool.description}
+            </>
+          ) : tool.description}
         </Text>
         {binding && (
           <div className="tool-panel__fullscreen-shortcut">

frontend/src/core/components/tools/fullscreen/shared.ts

@@ -2,6 +2,7 @@ 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 => {
@@ -23,32 +24,81 @@ export const getIconStyle = (): Record<string, string> => {
   return {};
 };
 
-export const isToolDisabled = (id: string, tool: ToolRegistryEntry, premiumEnabled?: boolean): boolean => {
-  // Check if tool is unavailable (no component and not a link)
-  const isUnavailable = !tool.component && !tool.link && id !== 'read' && id !== 'multiTool';
-  
+export type ToolDisabledReason = 'comingSoon' | 'disabledByAdmin' | 'missingDependency' | 'unknownUnavailable' | 'requiresPremium' | null;
+
+export const getToolDisabledReason = (
+  id: string,
+  tool: ToolRegistryEntry,
+  toolAvailability?: ToolAvailabilityMap,
+  premiumEnabled?: boolean
+): ToolDisabledReason => {
+  if (!tool.component && !tool.link && id !== 'read' && id !== 'multiTool') {
+    return 'comingSoon';
+  }
+
   // Check if tool requires premium but premium is not enabled
-  const requiresPremiumButNotEnabled = tool.requiresPremium === true && premiumEnabled !== true;
-  
-  return isUnavailable || requiresPremiumButNotEnabled;
+  if (tool.requiresPremium === true && premiumEnabled !== true) {
+    return 'requiresPremium';
+  }
+
+  const availabilityInfo = toolAvailability?.[id as ToolId];
+  if (availabilityInfo && availabilityInfo.available === false) {
+    if (availabilityInfo.reason === 'missingDependency') {
+      return 'missingDependency';
+    }
+    if (availabilityInfo.reason === 'disabledByAdmin') {
+      return 'disabledByAdmin';
+    }
+    return 'unknownUnavailable';
+  }
+
+  return null;
+};
+
+export const getDisabledLabel = (
+  disabledReason: ToolDisabledReason
+): { key: string; fallback: string } => {
+  if (disabledReason === 'requiresPremium') {
+    return {
+      key: 'toolPanel.premiumFeature',
+      fallback: 'Premium feature:'
+    };
+  }
+  if (disabledReason === 'missingDependency') {
+    return {
+      key: 'toolPanel.fullscreen.unavailableDependency',
+      fallback: 'Unavailable - required tool missing on server:'
+    };
+  }
+  if (disabledReason === 'disabledByAdmin' || disabledReason === 'unknownUnavailable') {
+    return {
+      key: 'toolPanel.fullscreen.unavailable',
+      fallback: 'Disabled by server administrator:'
+    };
+  }
+  return {
+    key: 'toolPanel.fullscreen.comingSoon',
+    fallback: 'Coming soon:'
+  };
 };
 
 export function useToolMeta(id: string, tool: ToolRegistryEntry) {
   const { hotkeys } = useHotkeys();
-  const { isFavorite, toggleFavorite } = useToolWorkflow();
+  const { isFavorite, toggleFavorite, toolAvailability } = useToolWorkflow();
   const { config } = useAppConfig();
   const premiumEnabled = config?.premiumEnabled;
 
   const isFav = isFavorite(id as ToolId);
   const binding = hotkeys[id as ToolId];
-  const disabled = isToolDisabled(id, tool, premiumEnabled);
+  const disabledReason = getToolDisabledReason(id, tool, toolAvailability, premiumEnabled);
+  const disabled = disabledReason !== null;
 
   return {
     binding,
     isFav,
     toggleFavorite: () => toggleFavorite(id as ToolId),
     disabled,
-    premiumEnabled,
+    disabledReason,
   };
 }
 

frontend/src/core/components/tools/toolPicker/ToolButton.tsx

@@ -12,6 +12,7 @@ import HotkeyDisplay from "@app/components/hotkeys/HotkeyDisplay";
 import FavoriteStar from "@app/components/tools/toolPicker/FavoriteStar";
 import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
 import { ToolId } from "@app/types/toolId";
+import { getToolDisabledReason, getDisabledLabel } from "@app/components/tools/fullscreen/shared";
 import { useAppConfig } from "@app/contexts/AppConfigContext";
 
 interface ToolButtonProps {
@@ -29,21 +30,16 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
   const { t } = useTranslation();
   const { config } = useAppConfig();
   const premiumEnabled = config?.premiumEnabled;
-  
-  // Check if disabled due to premium requirement
-  const requiresPremiumButNotEnabled = tool.requiresPremium === true && premiumEnabled !== true;
-  // Check if tool is unavailable (no component, no link, except read/multiTool)
-  const isUnavailable = !tool.component && !tool.link && id !== 'read' && id !== 'multiTool';
-  const isDisabled = isUnavailable || requiresPremiumButNotEnabled;
-  
+  const { isFavorite, toggleFavorite, toolAvailability } = useToolWorkflow();
+  const disabledReason = getToolDisabledReason(id, tool, toolAvailability, premiumEnabled);
+  const isUnavailable = disabledReason !== null;
   const { hotkeys } = useHotkeys();
   const binding = hotkeys[id];
   const { getToolNavigation } = useToolNavigation();
-  const { isFavorite, toggleFavorite } = useToolWorkflow();
   const fav = isFavorite(id as ToolId);
 
   const handleClick = (id: ToolId) => {
-    if (isDisabled) return;
+    if (isUnavailable) return;
     if (tool.link) {
       // Open external link in new tab
       window.open(tool.link, '_blank', 'noopener,noreferrer');
@@ -54,24 +50,14 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
   };
 
   // Get navigation props for URL support (only if navigation is not disabled)
-  const navProps = !isDisabled && !tool.link && !disableNavigation ? getToolNavigation(id, tool) : null;
+  const navProps = !isUnavailable && !tool.link && !disableNavigation ? getToolNavigation(id, tool) : null;
 
-  // Determine tooltip content based on disabled reason
-  let tooltipContent: React.ReactNode;
-  if (requiresPremiumButNotEnabled) {
-    tooltipContent = (
-      <span>
-        <strong>{t('toolPanel.premiumFeature', 'Premium feature:')}</strong> {tool.description}
-      </span>
-    );
-  } else if (isDisabled) {
-    tooltipContent = (
-      <span>
-        <strong>{t('toolPanel.comingSoon', 'Coming soon:')}</strong> {tool.description}
-      </span>
-    );
-  } else {
-    tooltipContent = (
+  const { key: disabledKey, fallback: disabledFallback } = getDisabledLabel(disabledReason);
+  const disabledMessage = t(disabledKey, disabledFallback);
+
+  const tooltipContent = isUnavailable
+    ? (<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' }}>
@@ -86,13 +72,12 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
         </div>
       </div>
     );
-  }
 
   const buttonContent = (
     <>
       <ToolIcon
         icon={tool.icon}
-        opacity={isDisabled ? 0.25 : 1}
+        opacity={isUnavailable ? 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%' }}>
@@ -101,14 +86,14 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
             lines={1}
             minimumFontScale={0.8}
             as="span"
-            style={{ display: 'inline-block', maxWidth: '100%', opacity: isDisabled ? 0.25 : 1 }}
+            style={{ display: 'inline-block', maxWidth: '100%', opacity: isUnavailable ? 0.25 : 1 }}
           />
           {tool.versionStatus === 'alpha' && (
             <Badge
               size="xs"
               variant="light"
               color="orange"
-              style={{ flexShrink: 0, opacity: isDisabled ? 0.25 : 1 }}
+              style={{ flexShrink: 0, opacity: isUnavailable ? 0.25 : 1 }}
             >
               {t('toolPanel.alpha', 'Alpha')}
             </Badge>
@@ -118,7 +103,7 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
           <span style={{
             fontSize: '0.75rem',
             color: 'var(--mantine-color-dimmed)',
-            opacity: isDisabled ? 0.25 : 1,
+            opacity: isUnavailable ? 0.25 : 1,
             marginTop: '1px',
             overflow: 'visible',
             whiteSpace: 'nowrap'
@@ -158,7 +143,7 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
     >
       {buttonContent}
     </Button>
-  ) : tool.link && !isDisabled ? (
+  ) : tool.link && !isUnavailable ? (
     // For external links, render Button as an anchor with proper href
     <Button
       component="a"
@@ -185,7 +170,7 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
       {buttonContent}
     </Button>
   ) : (
-    // For unavailable/premium tools, use regular button
+    // For unavailable tools, use regular button
     <Button
       variant={isSelected ? "filled" : "subtle"}
       onClick={() => handleClick(id)}
@@ -194,13 +179,13 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
       fullWidth
       justify="flex-start"
       className="tool-button"
-      aria-disabled={isDisabled}
+      aria-disabled={isUnavailable}
       data-tour={`tool-button-${id}`}
       styles={{
         root: {
           borderRadius: 0,
           color: "var(--tools-text-and-icon-color)",
-          cursor: isDisabled ? 'not-allowed' : undefined,
+          cursor: isUnavailable ? 'not-allowed' : undefined,
           overflow: 'visible'
         },
         label: { overflow: 'visible' }
@@ -210,7 +195,7 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
     </Button>
   );
 
-  const star = hasStars && !isDisabled ? (
+  const star = hasStars && !isUnavailable ? (
     <FavoriteStar
       isFavorite={fav}
       onToggle={() => toggleFavorite(id as ToolId)}

frontend/src/core/components/viewer/BookmarkAPIBridge.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useMemo, useState, useCallback } from 'react';
+import { useBookmarkCapability } from '@embedpdf/plugin-bookmark/react';
+import { BookmarkCapability } from '@embedpdf/plugin-bookmark';
+import { useViewer } from '@app/contexts/ViewerContext';
+import { BookmarkState, BookmarkAPIWrapper } from '@app/contexts/viewer/viewerBridges';
+
+export function BookmarkAPIBridge() {
+  const { provides: bookmarkCapability } = useBookmarkCapability();
+  const { registerBridge } = useViewer();
+  const [state, setState] = useState<BookmarkState>({
+    bookmarks: null,
+    isLoading: false,
+    error: null,
+  });
+
+  const fetchBookmarks = useCallback(
+    async (capability: BookmarkCapability) => {
+      setState(prev => ({ ...prev, isLoading: true, error: null }));
+      try {
+        const task = capability.getBookmarks();
+        const result = await task.toPromise();
+        setState({
+          bookmarks: result.bookmarks ?? [],
+          isLoading: false,
+          error: null,
+        });
+        return result.bookmarks ?? [];
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Failed to load bookmarks';
+        setState({
+          bookmarks: null,
+          isLoading: false,
+          error: message,
+        });
+        throw error;
+      }
+    },
+    []
+  );
+
+  const api = useMemo<BookmarkAPIWrapper | null>(() => {
+    if (!bookmarkCapability) return null;
+
+    return {
+      fetchBookmarks: () => fetchBookmarks(bookmarkCapability),
+      clearBookmarks: () => {
+        setState({
+          bookmarks: null,
+          isLoading: false,
+          error: null,
+        });
+      },
+      setLocalBookmarks: (bookmarks, error = null) => {
+        setState({
+          bookmarks,
+          isLoading: false,
+          error,
+        });
+      },
+    };
+  }, [bookmarkCapability, fetchBookmarks]);
+
+  useEffect(() => {
+    if (!api) return;
+
+    registerBridge('bookmark', {
+      state,
+      api,
+    });
+  }, [api, state, registerBridge]);
+
+  return null;
+}

frontend/src/core/components/viewer/BookmarkSidebar.css

@@ -0,0 +1,196 @@
+/* Bookmark Sidebar - Modern styling to match AllTools section */
+
+.bookmark-sidebar {
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--bg-toolbar) 96%, transparent),
+    color-mix(in srgb, var(--bg-background) 90%, transparent)
+  );
+  border-left: 1px solid color-mix(in srgb, var(--border-subtle) 75%, transparent);
+  box-shadow: -2px 0 16px color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.35)) 20%, transparent);
+  backdrop-filter: blur(12px);
+}
+
+/* Header Section */
+.bookmark-sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 0.875rem;
+  background: var(--bg-toolbar);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.bookmark-sidebar__header-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.bookmark-sidebar__header-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--mantine-color-blue-6);
+  font-size: 1.1rem;
+}
+
+/* Search Section */
+.bookmark-sidebar__search {
+  background: var(--tool-panel-search-bg, var(--bg-toolbar));
+  border-bottom: 1px solid var(--tool-panel-search-border-bottom, var(--border-subtle));
+  padding-top: 0.75rem !important;
+}
+
+/* Content Section */
+.bookmark-sidebar__content {
+  padding-top: 0.5rem !important;
+}
+
+.bookmark-sidebar__empty-state,
+.bookmark-sidebar__error {
+  padding: 2rem 1rem;
+  text-align: center;
+}
+
+.bookmark-sidebar__loading {
+  padding: 2rem 1rem !important;
+}
+
+/* Bookmark List */
+.bookmark-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* Bookmark Items */
+.bookmark-item-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.bookmark-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.65rem;
+  border-radius: 0.65rem;
+  cursor: default;
+  transition: all 0.2s ease;
+  background: transparent;
+  border: 1px solid transparent;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  text-align: left;
+  outline: none;
+}
+
+.bookmark-item--clickable {
+  cursor: pointer;
+  background: color-mix(in srgb, var(--bg-toolbar) 86%, transparent);
+}
+
+.bookmark-item--clickable:hover {
+  background: color-mix(in srgb, var(--text-primary) 8%, var(--bg-toolbar));
+  border-color: color-mix(in srgb, var(--text-primary) 20%, var(--border-subtle));
+  transform: translateX(2px);
+}
+
+.bookmark-item--clickable:active {
+  transform: translateX(3px);
+}
+
+.bookmark-item--clickable:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--text-primary) 30%, var(--border-subtle));
+  outline-offset: 2px;
+}
+
+/* Expand Icon */
+.bookmark-item__expand-icon {
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+  width: 2rem;
+  height: 2rem;
+}
+
+.bookmark-item:hover .bookmark-item__expand-icon {
+  transform: scale(1.05);
+}
+
+/* Dash for items without children */
+.bookmark-item__dash {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  color: var(--text-muted);
+  font-size: 1.25rem;
+  opacity: 0.5;
+  font-weight: 300;
+}
+
+/* Content */
+.bookmark-item__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.bookmark-item__title {
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  color: var(--text-primary);
+}
+
+.bookmark-item--clickable:hover .bookmark-item__title {
+  color: var(--text-primary);
+}
+
+.bookmark-item__page {
+  line-height: 1.3;
+  font-size: 0.75rem;
+}
+
+/* Children Container */
+.bookmark-item__children {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+}
+
+/* Smooth expand/collapse animation */
+@keyframes bookmark-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.bookmark-item__children {
+  animation: bookmark-fade-in 0.2s ease;
+}
+
+/* Accessibility & Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .bookmark-item,
+  .bookmark-item__expand-icon,
+  .bookmark-item__children {
+    transition: none;
+    animation: none;
+  }
+}
+

frontend/src/core/components/viewer/BookmarkSidebar.tsx

@@ -0,0 +1,551 @@
+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/BookmarkSidebar.css';
+
+interface BookmarkSidebarProps {
+  visible: boolean;
+  thumbnailVisible: boolean;
+  documentCacheKey?: string;
+  preloadCacheKeys?: string[];
+}
+
+const SIDEBAR_WIDTH = '15rem';
+
+type BookmarkNode = PdfBookmarkObject & { id: string };
+
+type BookmarkCacheStatus = 'idle' | 'loading' | 'success' | 'error';
+
+interface BookmarkCacheEntry {
+  status: BookmarkCacheStatus;
+  bookmarks: PdfBookmarkObject[] | null;
+  error: string | null;
+  lastFetched: number | null;
+}
+
+const createEntry = (overrides: Partial<BookmarkCacheEntry> = {}): BookmarkCacheEntry => ({
+  status: 'idle',
+  bookmarks: null,
+  error: null,
+  lastFetched: null,
+  ...overrides,
+});
+
+const resolvePageNumber = (bookmark: PdfBookmarkObject): number | null => {
+  const target = bookmark.target;
+  if (!target) return null;
+
+  if (target.type === 'destination') {
+    return target.destination.pageIndex + 1;
+  }
+
+  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;
+    }
+  }
+
+  return null;
+};
+
+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 [bookmarkSupport, setBookmarkSupport] = useState(() => hasBookmarkSupport());
+  const [activeEntry, setActiveEntry] = useState<BookmarkCacheEntry>(() => createEntry());
+  const cacheRef = useRef<Map<string, BookmarkCacheEntry>>(new Map());
+  const [fetchNonce, setFetchNonce] = useState(0);
+  const currentKeyRef = useRef<string | null>(documentCacheKey ?? null);
+
+  useEffect(() => {
+    currentKeyRef.current = documentCacheKey ?? null;
+  }, [documentCacheKey]);
+
+  // Poll once until the bookmark bridge registers
+  useEffect(() => {
+    if (bookmarkSupport) return;
+    let cancelled = false;
+    const id = setInterval(() => {
+      if (!cancelled && hasBookmarkSupport()) {
+        setBookmarkSupport(true);
+        clearInterval(id);
+      }
+    }, 250);
+
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, [bookmarkSupport, hasBookmarkSupport]);
+
+  // Reset UI and load cached entry (if any) when switching documents
+  useEffect(() => {
+    setExpanded({});
+    setSearchTerm('');
+
+    if (!documentCacheKey) {
+      setActiveEntry(createEntry());
+      bookmarkActions.clearBookmarks();
+      return;
+    }
+
+    const cached = cacheRef.current.get(documentCacheKey);
+    if (cached) {
+      setActiveEntry(cached);
+      if (cached.status === 'success') {
+        bookmarkActions.setLocalBookmarks(cached.bookmarks ?? [], null);
+      } else if (cached.status === 'error') {
+        bookmarkActions.setLocalBookmarks(cached.bookmarks ?? null, cached.error);
+      } else {
+        bookmarkActions.clearBookmarks();
+      }
+    } else {
+      setActiveEntry(createEntry());
+      bookmarkActions.clearBookmarks();
+    }
+  }, [documentCacheKey, bookmarkActions]);
+
+  // Keep cache bounded to the currently relevant keys
+  useEffect(() => {
+    const allowed = new Set<string>();
+    if (documentCacheKey) {
+      allowed.add(documentCacheKey);
+    }
+    preloadCacheKeys.forEach(key => {
+      if (key) {
+        allowed.add(key);
+      }
+    });
+
+    cacheRef.current.forEach((_entry, key) => {
+      if (!allowed.has(key)) {
+        cacheRef.current.delete(key);
+      }
+    });
+  }, [documentCacheKey, preloadCacheKeys]);
+
+  // Fetch bookmarks for the active document when needed
+  useEffect(() => {
+    if (!bookmarkSupport || !documentCacheKey) return;
+
+    const key = documentCacheKey;
+    const cached = cacheRef.current.get(key);
+    if (cached && (cached.status === 'loading' || cached.status === 'success')) {
+      return;
+    }
+
+    let cancelled = false;
+    const updateEntry = (entry: BookmarkCacheEntry) => {
+      cacheRef.current.set(key, entry);
+      if (!cancelled && currentKeyRef.current === key) {
+        setActiveEntry(entry);
+      }
+    };
+
+    updateEntry(createEntry({
+      status: 'loading',
+      bookmarks: cached?.bookmarks ?? null,
+      lastFetched: cached?.lastFetched ?? null,
+    }));
+
+    const fetchWithRetry = async () => {
+      const maxAttempts = 10;
+      for (let attempt = 0; attempt < maxAttempts; attempt++) {
+        try {
+          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');
+
+          if (!notReady || attempt === maxAttempts - 1) {
+            throw error;
+          }
+
+          await new Promise(resolve => setTimeout(resolve, 50));
+        }
+      }
+      return [];
+    };
+
+    fetchWithRetry()
+      .then(bookmarks => {
+        if (cancelled) return;
+        const entry = createEntry({
+          status: 'success',
+          bookmarks,
+          lastFetched: Date.now(),
+        });
+        updateEntry(entry);
+        if (currentKeyRef.current === key) {
+          bookmarkActions.setLocalBookmarks(bookmarks, null);
+        }
+      })
+      .catch(error => {
+        if (cancelled) return;
+        const message = error instanceof Error ? error.message : 'Failed to load bookmarks';
+        const fallback = cacheRef.current.get(key);
+        const entry = createEntry({
+          status: 'error',
+          bookmarks: fallback?.bookmarks ?? null,
+          error: message,
+          lastFetched: fallback?.lastFetched ?? null,
+        });
+        updateEntry(entry);
+        if (currentKeyRef.current === key) {
+          bookmarkActions.setLocalBookmarks(null, message);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [bookmarkSupport, documentCacheKey, fetchNonce, bookmarkActions]);
+
+  const requestReload = useCallback(() => {
+    if (!documentCacheKey) return;
+    cacheRef.current.delete(documentCacheKey);
+    setActiveEntry(createEntry());
+    bookmarkActions.clearBookmarks();
+    setFetchNonce(value => value + 1);
+  }, [documentCacheKey, bookmarkActions]);
+
+  const bookmarksWithIds = useMemo(() => {
+    const assignIds = (nodes: PdfBookmarkObject[], prefix = 'root'): BookmarkNode[] => {
+      if (!Array.isArray(nodes)) {
+        return [];
+      }
+
+      return nodes.map((node, index) => {
+        const id = `${prefix}-${index}`;
+        return {
+          ...node,
+          id,
+          children: node.children ? assignIds(node.children, id) : undefined,
+        };
+      });
+    };
+
+    const bookmarks = Array.isArray(activeEntry.bookmarks) ? activeEntry.bookmarks : [];
+    return assignIds(bookmarks);
+  }, [activeEntry.bookmarks]);
+
+  const currentStatus = activeEntry.status;
+  const isLocalLoading = bookmarkSupport && currentStatus === 'loading';
+  const currentError = bookmarkSupport && currentStatus === 'error' ? activeEntry.error : null;
+
+  const toggleNode = (nodeId: string) => {
+    setExpanded(prev => ({
+      ...prev,
+      [nodeId]: !(prev[nodeId] ?? true),
+    }));
+  };
+
+  const expandAll = useCallback(() => {
+    const allExpanded: Record<string, boolean> = {};
+    const expandRecursive = (nodes: BookmarkNode[]) => {
+      nodes.forEach(node => {
+        if (node.children && node.children.length > 0) {
+          allExpanded[node.id] = true;
+          expandRecursive(node.children as BookmarkNode[]);
+        }
+      });
+    };
+    expandRecursive(bookmarksWithIds);
+    setExpanded(allExpanded);
+  }, [bookmarksWithIds]);
+
+  const collapseAll = useCallback(() => {
+    const allCollapsed: Record<string, boolean> = {};
+    const collapseRecursive = (nodes: BookmarkNode[]) => {
+      nodes.forEach(node => {
+        if (node.children && node.children.length > 0) {
+          allCollapsed[node.id] = false;
+          collapseRecursive(node.children as BookmarkNode[]);
+        }
+      });
+    };
+    collapseRecursive(bookmarksWithIds);
+    setExpanded(allCollapsed);
+  }, [bookmarksWithIds]);
+
+  const handleBookmarkClick = (bookmark: PdfBookmarkObject, event: React.MouseEvent) => {
+    const target = bookmark.target;
+    if (target?.type === 'action') {
+      const action = target.action;
+      if (action.type === PdfActionType.URI && action.uri) {
+        event.preventDefault();
+        window.open(action.uri, '_blank', 'noopener');
+        return;
+      }
+      if (action.type === PdfActionType.LaunchAppOrOpenFile && action.path) {
+        event.preventDefault();
+        window.open(action.path, '_blank', 'noopener');
+        return;
+      }
+    }
+
+    const pageNumber = resolvePageNumber(bookmark);
+    if (pageNumber) {
+      scrollActions.scrollToPage(pageNumber);
+    }
+  };
+
+  const filteredBookmarks = useMemo(() => {
+    if (!searchTerm.trim()) return bookmarksWithIds;
+    const term = searchTerm.trim().toLowerCase();
+
+    const applyFilter = (nodeList: BookmarkNode[]): BookmarkNode[] => {
+      const results: BookmarkNode[] = [];
+
+      for (const node of nodeList) {
+        const childMatches = node.children ? applyFilter(node.children as BookmarkNode[]) : [];
+        const matchesSelf = node.title?.toLowerCase().includes(term) ?? false;
+
+        if (matchesSelf || childMatches.length > 0) {
+          results.push({ ...node, children: childMatches.length > 0 ? childMatches : node.children });
+        }
+      }
+
+      return results;
+    };
+
+    return applyFilter(bookmarksWithIds);
+  }, [bookmarksWithIds, searchTerm]);
+
+  const renderBookmarks = (nodes: BookmarkNode[], depth = 0) => {
+    if (!nodes || !Array.isArray(nodes)) {
+      return null;
+    }
+
+    return nodes.map((node, _index) => {
+      if (!node || !node.id) {
+        return null;
+      }
+
+      const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+      const isNodeExpanded = expanded[node.id] ?? true;
+
+      const pageNumber = resolvePageNumber(node);
+
+      return (
+        <div
+          key={node.id}
+          className="bookmark-item-wrapper"
+          style={{
+            marginLeft: depth > 0 ? `${depth * 0.75}rem` : '0',
+          }}
+        >
+          <div
+            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}
+          >
+            {hasChildren ? (
+              <ActionIcon
+                variant="subtle"
+                size="sm"
+                className="bookmark-item__expand-icon"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  toggleNode(node.id);
+                }}
+              >
+                <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>
+              {pageNumber && (
+                <Text size="xs" c="dimmed" className="bookmark-item__page">
+                  Page {pageNumber}
+                </Text>
+              )}
+            </div>
+          </div>
+          {hasChildren && isNodeExpanded && (
+            <div className="bookmark-item__children">
+              {renderBookmarks(node.children as BookmarkNode[], depth + 1)}
+            </div>
+          )}
+        </div>
+      );
+    });
+  };
+
+  const isSearchActive = searchTerm.trim().length > 0;
+  const hasBookmarks = bookmarksWithIds.length > 0;
+  const showBookmarkList = bookmarkSupport && documentCacheKey && filteredBookmarks.length > 0;
+  const showEmptyState =
+    bookmarkSupport &&
+    documentCacheKey &&
+    !isLocalLoading &&
+    !currentError &&
+    currentStatus === 'success' &&
+    !hasBookmarks;
+  const showSearchEmpty =
+    bookmarkSupport &&
+    documentCacheKey &&
+    isSearchActive &&
+    hasBookmarks &&
+    filteredBookmarks.length === 0;
+  const showNoDocument = bookmarkSupport && !documentCacheKey;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Box
+      className="bookmark-sidebar"
+      style={{
+        position: 'fixed',
+        right: thumbnailVisible ? SIDEBAR_WIDTH : 0,
+        top: 0,
+        bottom: 0,
+        width: SIDEBAR_WIDTH,
+        zIndex: 998,
+      }}
+    >
+      <div className="bookmark-sidebar__header">
+        <div className="bookmark-sidebar__header-title">
+          <span className="bookmark-sidebar__header-icon">
+            <BookmarksIcon />
+          </span>
+          <Text fw={600} size="sm" tt="uppercase" lts={0.5}>
+            Bookmarks
+          </Text>
+        </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"
+              >
+                <LocalIcon icon="unfold-more" width="1.1rem" height="1.1rem" />
+              </ActionIcon>
+            ) : (
+              <ActionIcon
+                variant="subtle"
+                size="sm"
+                onClick={collapseAll}
+                aria-label="Collapse all bookmarks"
+                title="Collapse all"
+              >
+                <LocalIcon icon="unfold-less" width="1.1rem" height="1.1rem" />
+              </ActionIcon>
+            )}
+          </>
+        )}
+      </div>
+
+      <Box px="sm" pb="sm" className="bookmark-sidebar__search">
+        <TextInput
+          value={searchTerm}
+          placeholder="Search bookmarks"
+          onChange={(event) => setSearchTerm(event.currentTarget.value)}
+          leftSection={<LocalIcon icon="search" width="1.1rem" height="1.1rem" />}
+          size="xs"
+        />
+      </Box>
+
+      <ScrollArea style={{ flex: 1 }}>
+        <Box p="sm" className="bookmark-sidebar__content">
+          {!bookmarkSupport && (
+            <div className="bookmark-sidebar__empty-state">
+              <Text size="sm" c="dimmed" ta="center">
+                Bookmark support is unavailable for this viewer.
+              </Text>
+            </div>
+          )}
+
+          {bookmarkSupport && showNoDocument && (
+            <div className="bookmark-sidebar__empty-state">
+              <Text size="sm" c="dimmed" ta="center">
+                Open a PDF to view its bookmarks.
+              </Text>
+            </div>
+          )}
+
+          {bookmarkSupport && documentCacheKey && currentError && (
+            <Stack gap="xs" align="center" className="bookmark-sidebar__error">
+              <Text size="sm" c="red" ta="center">
+                {currentError}
+              </Text>
+              <Button size="xs" variant="light" onClick={requestReload}>
+                Retry
+              </Button>
+            </Stack>
+          )}
+
+          {bookmarkSupport && documentCacheKey && isLocalLoading && (
+            <Stack gap="md" align="center" c="dimmed" py="xl" className="bookmark-sidebar__loading">
+              <Loader size="md" type="dots" />
+              <Text size="sm" ta="center">
+                Loading bookmarks...
+              </Text>
+            </Stack>
+          )}
+
+          {showEmptyState && (
+            <div className="bookmark-sidebar__empty-state">
+              <Text size="sm" c="dimmed" ta="center">
+                No bookmarks in this document
+              </Text>
+            </div>
+          )}
+
+          {showBookmarkList && (
+            <div className="bookmark-list">
+              {renderBookmarks(filteredBookmarks)}
+            </div>
+          )}
+
+          {showSearchEmpty && (
+            <div className="bookmark-sidebar__empty-state">
+              <Text size="sm" c="dimmed" ta="center">
+                No bookmarks match your search
+              </Text>
+            </div>
+          )}
+        </Box>
+      </ScrollArea>
+    </Box>
+  );
+};

frontend/src/core/components/viewer/EmbedPdfViewer.tsx

@@ -8,6 +8,7 @@ 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 { useNavigationGuard, useNavigationState } from '@app/contexts/NavigationContext';
 import { useSignature } from '@app/contexts/SignatureContext';
 import { createStirlingFilesAndStubs } from '@app/services/fileStubHelpers';
@@ -38,7 +39,19 @@ const EmbedPdfViewerContent = ({
   const pdfContainerRef = useRef<HTMLDivElement>(null);
   const [isViewerHovered, setIsViewerHovered] = React.useState(false);
 
-  const { isThumbnailSidebarVisible, toggleThumbnailSidebar, zoomActions, panActions: _panActions, rotationActions: _rotationActions, getScrollState, getRotationState, isAnnotationMode, isAnnotationsVisible, exportActions } = useViewer();
+  const {
+    isThumbnailSidebarVisible,
+    toggleThumbnailSidebar,
+    isBookmarkSidebarVisible,
+    zoomActions,
+    panActions: _panActions,
+    rotationActions: _rotationActions,
+    getScrollState,
+    getRotationState,
+    isAnnotationMode,
+    isAnnotationsVisible,
+    exportActions,
+  } = useViewer();
 
   // Register viewer right-rail buttons
   useViewerRightRailButtons();
@@ -128,6 +141,42 @@ const EmbedPdfViewerContent = ({
     }
   }, [previewFile, fileWithUrl]);
 
+  const bookmarkCacheKey = React.useMemo(() => {
+    if (currentFile && isStirlingFile(currentFile)) {
+      return currentFile.fileId;
+    }
+
+    if (previewFile) {
+      const uniquePreviewId = `${previewFile.name}-${previewFile.size}-${previewFile.lastModified ?? 'na'}`;
+      return `preview-${uniquePreviewId}`;
+    }
+
+    if (effectiveFile?.url) {
+      return effectiveFile.url;
+    }
+
+    if (effectiveFile?.file instanceof File) {
+      const fileObj = effectiveFile.file;
+      return `file-${fileObj.name}-${fileObj.size}-${fileObj.lastModified ?? 'na'}`;
+    }
+
+    return undefined;
+  }, [currentFile, effectiveFile, previewFile]);
+
+  // Generate cache keys for all active files to enable preloading
+  const allBookmarkCacheKeys = React.useMemo(() => {
+    if (previewFile) {
+      return [bookmarkCacheKey].filter(Boolean) as string[];
+    }
+
+    return activeFiles.map(file => {
+      if (isStirlingFile(file)) {
+        return file.fileId;
+      }
+      return undefined;
+    }).filter(Boolean) as string[];
+  }, [activeFiles, previewFile, bookmarkCacheKey]);
+
   useWheelZoom({
     ref: viewerRef,
     onZoomIn: zoomActions.zoomIn,
@@ -219,6 +268,10 @@ const EmbedPdfViewerContent = ({
     }
   }, [currentFile, activeFileIds, exportActions, actions, selectors, setHasUnsavedChanges]);
 
+  const sidebarWidthRem = 15;
+  const totalRightMargin =
+    (isThumbnailSidebarVisible ? sidebarWidthRem : 0) + (isBookmarkSidebarVisible ? sidebarWidthRem : 0);
+
   return (
     <Box
       ref={viewerRef}
@@ -260,7 +313,7 @@ const EmbedPdfViewerContent = ({
               overflow: 'hidden',
               minHeight: 0,
               minWidth: 0,
-              marginRight: isThumbnailSidebarVisible ? '15rem' : '0',
+              marginRight: `${totalRightMargin}rem`,
               transition: 'margin-right 0.3s ease'
             }}>
             <LocalEmbedPDF
@@ -315,6 +368,12 @@ const EmbedPdfViewerContent = ({
         onToggle={toggleThumbnailSidebar}
         activeFileIndex={activeFileIndex}
       />
+      <BookmarkSidebar
+        visible={isBookmarkSidebarVisible}
+        thumbnailVisible={isThumbnailSidebarVisible}
+        documentCacheKey={bookmarkCacheKey}
+        preloadCacheKeys={allBookmarkCacheKeys}
+      />
 
       {/* Navigation Warning Modal */}
       {!previewFile && (

frontend/src/core/components/viewer/LocalEmbedPDF.tsx

@@ -19,6 +19,7 @@ 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';
 
 // Import annotation plugins
 import { HistoryPluginPackage } from '@embedpdf/plugin-history/react';
@@ -39,6 +40,7 @@ import { SignatureAPIBridge } from '@app/components/viewer/SignatureAPIBridge';
 import { HistoryAPIBridge } from '@app/components/viewer/HistoryAPIBridge';
 import type { SignatureAPI, HistoryAPI } from '@app/components/viewer/viewerTypes';
 import { ExportAPIBridge } from '@app/components/viewer/ExportAPIBridge';
+import { BookmarkAPIBridge } from '@app/components/viewer/BookmarkAPIBridge';
 
 interface LocalEmbedPDFProps {
   file?: File | Blob;
@@ -138,6 +140,9 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, onSignatur
       // Register thumbnail plugin for page thumbnails
       createPluginRegistration(ThumbnailPluginPackage),
 
+      // Register bookmark plugin for PDF outline support
+      createPluginRegistration(BookmarkPluginPackage),
+
       // Register rotate plugin
       createPluginRegistration(RotatePluginPackage),
 
@@ -272,6 +277,7 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, onSignatur
         {enableAnnotations && <SignatureAPIBridge ref={signatureApiRef} />}
         {enableAnnotations && <HistoryAPIBridge ref={historyApiRef} />}
         <ExportAPIBridge />
+        <BookmarkAPIBridge />
         <GlobalPointerProvider>
           <Viewport
             style={{

frontend/src/core/components/viewer/useViewerRightRailButtons.tsx

@@ -19,6 +19,7 @@ export function useViewerRightRailButtons() {
   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 viewerButtons = useMemo<RightRailButtonWithAction[]>(() => {
     return [
@@ -111,6 +112,17 @@ export function useViewerRightRailButtons() {
           viewer.toggleThumbnailSidebar();
         }
       },
+      {
+        id: 'viewer-toggle-bookmarks',
+        icon: <LocalIcon icon="bookmark-add-rounded" width="1.5rem" height="1.5rem" />,
+        tooltip: bookmarkLabel,
+        ariaLabel: bookmarkLabel,
+        section: 'top' as const,
+        order: 55,
+        onClick: () => {
+          viewer.toggleBookmarkSidebar();
+        }
+      },
       {
         id: 'viewer-annotation-controls',
         section: 'top' as const,
@@ -120,7 +132,7 @@ export function useViewerRightRailButtons() {
         )
       }
     ];
-  }, [t, viewer, isPanning, searchLabel, panLabel, rotateLeftLabel, rotateRightLabel, sidebarLabel]);
+  }, [t, viewer, isPanning, searchLabel, panLabel, rotateLeftLabel, rotateRightLabel, sidebarLabel, bookmarkLabel]);
 
   useRightRailButtons(viewerButtons);
 }

frontend/src/core/contexts/AppConfigContext.test.tsx

@@ -0,0 +1,288 @@
+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');
+
+describe('AppConfigContext', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Mock window.location.pathname
+    Object.defineProperty(window, 'location', {
+      value: { pathname: '/' },
+      writable: true,
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <AppConfigProvider>{children}</AppConfigProvider>
+  );
+
+  it('should fetch and provide app config on non-auth pages', async () => {
+    const mockConfig = {
+      enableLogin: false,
+      appNameNavbar: 'Stirling PDF',
+      languages: ['en-US', 'en-GB'],
+    };
+
+    vi.mocked(apiClient.get).mockResolvedValueOnce({
+      status: 200,
+      data: mockConfig,
+    } as any);
+
+    const { result } = renderHook(() => useAppConfig(), { wrapper });
+
+    // Initially loading
+    expect(result.current.loading).toBe(true);
+    expect(result.current.config).toBeNull();
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+      expect(result.current.config).toEqual(mockConfig);
+      expect(result.current.error).toBeNull();
+    });
+
+    expect(apiClient.get).toHaveBeenCalledWith('/api/v1/config/app-config', {
+      suppressErrorToast: true,
+    });
+  });
+
+  it('should skip fetch on auth pages and use default config', async () => {
+    // Mock being on login page
+    Object.defineProperty(window, 'location', {
+      value: { pathname: '/login' },
+      writable: true,
+    });
+
+    const { result } = renderHook(() => useAppConfig(), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+      expect(result.current.config).toEqual({ enableLogin: true });
+    });
+
+    // Should NOT call API on auth pages
+    expect(apiClient.get).not.toHaveBeenCalled();
+  });
+
+  it('should handle 401 error gracefully', async () => {
+    const mockError = Object.assign(new Error('Unauthorized'), {
+      response: { status: 401, data: {} },
+    });
+    vi.mocked(apiClient.get).mockRejectedValueOnce(mockError);
+
+    const { result } = renderHook(() => useAppConfig(), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+      expect(result.current.config).toEqual({ enableLogin: true });
+      // 401 should be handled gracefully, error may be null or set
+    });
+  });
+
+  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)
+    vi.mocked(apiClient.get)
+      .mockRejectedValueOnce(mockError)
+      .mockRejectedValueOnce(mockError)
+      .mockRejectedValueOnce(mockError);
+
+    const { result } = renderHook(() => useAppConfig(), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+      expect(result.current.config).toEqual({ enableLogin: true });
+      expect(result.current.error).toBe(errorMessage);
+    });
+  });
+
+  it('should skip fetch on signup page', async () => {
+    Object.defineProperty(window, 'location', {
+      value: { pathname: '/signup' },
+      writable: true,
+    });
+
+    const { result } = renderHook(() => useAppConfig(), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+      expect(result.current.config).toEqual({ enableLogin: true });
+    });
+
+    expect(apiClient.get).not.toHaveBeenCalled();
+  });
+
+  it('should skip fetch on auth callback page', async () => {
+    Object.defineProperty(window, 'location', {
+      value: { pathname: '/auth/callback' },
+      writable: true,
+    });
+
+    const { result } = renderHook(() => useAppConfig(), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+      expect(result.current.config).toEqual({ enableLogin: true });
+    });
+
+    expect(apiClient.get).not.toHaveBeenCalled();
+  });
+
+  it('should skip fetch on invite accept page', async () => {
+    Object.defineProperty(window, 'location', {
+      value: { pathname: '/invite/abc123' },
+      writable: true,
+    });
+
+    const { result } = renderHook(() => useAppConfig(), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+      expect(result.current.config).toEqual({ enableLogin: true });
+    });
+
+    expect(apiClient.get).not.toHaveBeenCalled();
+  });
+
+  it('should refetch config when jwt-available event is triggered', async () => {
+    const initialConfig = {
+      enableLogin: true,
+      appNameNavbar: 'Stirling PDF',
+    };
+
+    const updatedConfig = {
+      enableLogin: true,
+      appNameNavbar: 'Stirling PDF',
+      isAdmin: true,
+      enableAnalytics: true,
+    };
+
+    // First call returns initial config
+    vi.mocked(apiClient.get).mockResolvedValueOnce({
+      status: 200,
+      data: initialConfig,
+    } as any);
+
+    const { result } = renderHook(() => useAppConfig(), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.config).toEqual(initialConfig);
+    });
+
+    // Setup second call for refetch
+    vi.mocked(apiClient.get).mockResolvedValueOnce({
+      status: 200,
+      data: updatedConfig,
+    } as any);
+
+    // Trigger jwt-available event wrapped in act
+    await act(async () => {
+      window.dispatchEvent(new CustomEvent('jwt-available'));
+      // Wait a tick for event handler to run
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    await waitFor(() => {
+      expect(result.current.config).toEqual(updatedConfig);
+    });
+
+    expect(apiClient.get).toHaveBeenCalledTimes(2);
+  });
+
+  it('should provide refetch function', async () => {
+    const mockConfig = {
+      enableLogin: false,
+      appNameNavbar: 'Test App',
+    };
+
+    vi.mocked(apiClient.get).mockResolvedValue({
+      status: 200,
+      data: mockConfig,
+    } as any);
+
+    const { result } = renderHook(() => useAppConfig(), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.config).toEqual(mockConfig);
+    });
+
+    // Call refetch wrapped in act
+    await act(async () => {
+      await result.current.refetch();
+    });
+
+    expect(apiClient.get).toHaveBeenCalledTimes(2);
+  });
+
+  it('should not fetch twice without force flag', async () => {
+    const mockConfig = {
+      enableLogin: false,
+    };
+
+    vi.mocked(apiClient.get).mockResolvedValue({
+      status: 200,
+      data: mockConfig,
+    } as any);
+
+    const { result } = renderHook(() => useAppConfig(), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.config).toEqual(mockConfig);
+    });
+
+    // Should only be called once (no duplicate fetches)
+    expect(apiClient.get).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle initial config prop', async () => {
+    const initialConfig = {
+      enableLogin: false,
+      appNameNavbar: 'Initial App',
+    };
+
+    const customWrapper = ({ children }: { children: ReactNode }) => (
+      <AppConfigProvider initialConfig={initialConfig}>
+        {children}
+      </AppConfigProvider>
+    );
+
+    const { result } = renderHook(() => useAppConfig(), {
+      wrapper: customWrapper,
+    });
+
+    // With blocking mode (default), should still fetch even with initial config
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+    });
+
+    // Should still make API call
+    expect(apiClient.get).toHaveBeenCalled();
+  });
+
+  it('should use suppressErrorToast for all config requests', async () => {
+    const mockConfig = { enableLogin: true };
+
+    vi.mocked(apiClient.get).mockResolvedValueOnce({
+      status: 200,
+      data: mockConfig,
+    } as any);
+
+    renderHook(() => useAppConfig(), { wrapper });
+
+    await waitFor(() => {
+      expect(apiClient.get).toHaveBeenCalledWith('/api/v1/config/app-config', {
+        suppressErrorToast: true,
+      });
+    });
+  });
+});

frontend/src/core/contexts/AppConfigContext.tsx

@@ -114,7 +114,8 @@ export const AppConfigProvider: React.FC<AppConfigProviderProps> = ({
         }
 
         // apiClient automatically adds JWT header if available via interceptors
-        const response = await apiClient.get<AppConfig>('/api/v1/config/app-config', !isBlockingMode ? { suppressErrorToast: true } : undefined);
+        // Always suppress error toast - we handle 401 errors locally
+        const response = await apiClient.get<AppConfig>('/api/v1/config/app-config', { suppressErrorToast: true });
         const data = response.data;
 
         console.debug('[AppConfig] Config fetched successfully:', data);
@@ -159,8 +160,25 @@ export const AppConfigProvider: React.FC<AppConfigProviderProps> = ({
   }, [fetchCount, hasResolvedConfig, isBlockingMode, maxRetries, initialDelay]);
 
   useEffect(() => {
-    // Always try to fetch config to check if login is disabled
-    // The endpoint should be public and return proper JSON
+    // Skip config fetch on auth pages (/login, /signup, /auth/callback, /invite/*)
+    // Config will be fetched after successful authentication via jwt-available event
+    const currentPath = window.location.pathname;
+    const isAuthPage = currentPath.includes('/login') ||
+                       currentPath.includes('/signup') ||
+                       currentPath.includes('/auth/callback') ||
+                       currentPath.includes('/invite/');
+
+    // On auth pages, always skip the config fetch
+    // The config will be fetched after authentication via jwt-available event
+    if (isAuthPage) {
+      console.debug('[AppConfig] On auth page - using default config, skipping fetch');
+      setConfig({ enableLogin: true });
+      setHasResolvedConfig(true);
+      setLoading(false);
+      return;
+    }
+
+    // On non-auth pages, fetch config (will validate JWT if present)
     if (autoFetch) {
       fetchConfig();
     }

frontend/src/core/contexts/ToolWorkflowContext.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { createContext, useContext, useReducer, useCallback, useMemo, useEffect } from 'react';
-import { useToolManagement } from '@app/hooks/useToolManagement';
+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';
@@ -21,7 +21,6 @@ import {
 import type { ToolPanelMode } from '@app/constants/toolPanel';
 import { usePreferences } from '@app/contexts/PreferencesContext';
 import { useToolRegistry } from '@app/contexts/ToolRegistryContext';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
 
 // State interface
 // Types and reducer/state moved to './toolWorkflow/state'
@@ -45,6 +44,7 @@ interface ToolWorkflowContextValue extends ToolWorkflowState {
   selectedTool: ToolRegistryEntry | null;
   toolRegistry: Partial<ToolRegistry>;
   getSelectedTool: (toolId: ToolId | null) => ToolRegistryEntry | null;
+  toolAvailability: ToolAvailabilityMap;
 
   // UI Actions
   setSidebarsVisible: (visible: boolean) => void;
@@ -113,10 +113,8 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
   const navigationState = useNavigationState();
 
   // Tool management hook
-  const { toolRegistry, getSelectedTool } = useToolManagement();
+  const { toolRegistry, getSelectedTool, toolAvailability } = useToolManagement();
   const { allTools } = useToolRegistry();
-  const { config } = useAppConfig();
-  const premiumEnabled = config?.premiumEnabled;
 
   // Tool history hook
   const {
@@ -221,25 +219,15 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
   }, [customViewRegistry, customViewData]);
 
   useEffect(() => {
-    const { workbench } = navigationState;
-    if (isBaseWorkbench(workbench)) {
+    if (isBaseWorkbench(navigationState.workbench)) {
       return;
     }
 
-    const currentCustomView = customWorkbenchViews.find(view => view.workbenchId === workbench);
-    const expectedWorkbench = selectedTool?.workbench;
-    const workbenchOwnedBySelectedTool = expectedWorkbench === workbench;
-
+    const currentCustomView = customWorkbenchViews.find(view => view.workbenchId === navigationState.workbench);
     if (!currentCustomView || currentCustomView.data == null) {
-      // If the currently selected tool expects this custom workbench, allow it
-      // some time to register/populate the view instead of immediately bouncing
-      // the user back to Active Files.
-      if (workbenchOwnedBySelectedTool) {
-        return;
-      }
       actions.setWorkbench(getDefaultWorkbench());
     }
-  }, [actions, customWorkbenchViews, navigationState.workbench, selectedTool]);
+  }, [actions, customWorkbenchViews, navigationState.workbench]);
 
   // Persisted via PreferencesContext; no direct localStorage writes needed here
 
@@ -271,13 +259,11 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
 
   // Workflow actions (compound actions that coordinate multiple state changes)
   const handleToolSelect = useCallback((toolId: ToolId) => {
-    // Check if tool requires premium and premium is not enabled
-    const selectedTool = allTools[toolId];
-    if (selectedTool?.requiresPremium === true && premiumEnabled !== true) {
-      // Premium tool selected without premium - do nothing (should be disabled in UI)
+    const availabilityInfo = toolAvailability[toolId];
+    const isExplicitlyDisabled = availabilityInfo ? availabilityInfo.available === false : false;
+    if (toolId !== 'read' && toolId !== 'multiTool' && isExplicitlyDisabled) {
       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);
@@ -319,7 +305,7 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     setSearchQuery('');
     setLeftPanelView('toolContent');
     setReaderMode(false); // Disable read mode when selecting tools
-  }, [actions, getSelectedTool, navigationState.workbench, setLeftPanelView, setReaderMode, setSearchQuery, allTools, premiumEnabled]);
+  }, [actions, getSelectedTool, navigationState.workbench, setLeftPanelView, setReaderMode, setSearchQuery, toolAvailability]);
 
   const handleBackToTools = useCallback(() => {
     setLeftPanelView('toolPicker');
@@ -374,6 +360,7 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     toolResetFunctions,
     registerToolReset,
     resetTool,
+    toolAvailability,
 
     // Workflow Actions
     handleToolSelect,
@@ -401,6 +388,7 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     selectedTool,
     toolRegistry,
     getSelectedTool,
+    toolAvailability,
     setSidebarsVisible,
     setLeftPanelView,
     setReaderMode,
@@ -441,4 +429,4 @@ export function useToolWorkflow(): ToolWorkflowContextValue {
     throw new Error('useToolWorkflow must be used within a ToolWorkflowProvider');
   }
   return context;
-}
+}

frontend/src/core/contexts/ViewerContext.tsx

@@ -17,6 +17,7 @@ import {
   RotationActions,
   SearchActions,
   ExportActions,
+  BookmarkActions,
 } from '@app/contexts/viewer/viewerActions';
 import {
   BridgeRef,
@@ -35,6 +36,7 @@ import {
   SearchState,
   ExportState,
   ThumbnailAPIWrapper,
+  BookmarkState,
 } from '@app/contexts/viewer/viewerBridges';
 import { SpreadMode } from '@embedpdf/plugin-spread/react';
 
@@ -74,6 +76,8 @@ interface ViewerContextType {
   // UI state managed by this context
   isThumbnailSidebarVisible: boolean;
   toggleThumbnailSidebar: () => void;
+  isBookmarkSidebarVisible: boolean;
+  toggleBookmarkSidebar: () => void;
 
   // Annotation visibility toggle
   isAnnotationsVisible: boolean;
@@ -98,6 +102,8 @@ interface ViewerContextType {
   getSearchState: () => SearchState;
   getThumbnailAPI: () => ThumbnailAPIWrapper | null;
   getExportState: () => ExportState;
+  getBookmarkState: () => BookmarkState;
+  hasBookmarkSupport: () => boolean;
 
   // Immediate update callbacks
   registerImmediateZoomUpdate: (callback: (percent: number) => void) => () => void;
@@ -118,6 +124,7 @@ interface ViewerContextType {
   rotationActions: RotationActions;
   searchActions: SearchActions;
   exportActions: ExportActions;
+  bookmarkActions: BookmarkActions;
 
   // Bridge registration - internal use by bridges  
   registerBridge: <K extends BridgeKey>(
@@ -135,6 +142,7 @@ interface ViewerProviderProps {
 export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
   // UI state - only state directly managed by this context
   const [isThumbnailSidebarVisible, setIsThumbnailSidebarVisible] = useState(false);
+  const [isBookmarkSidebarVisible, setIsBookmarkSidebarVisible] = useState(false);
   const [isAnnotationsVisible, setIsAnnotationsVisible] = useState(true);
   const [isAnnotationMode, setIsAnnotationModeState] = useState(false);
   const [activeFileIndex, setActiveFileIndex] = useState(0);
@@ -193,6 +201,10 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     setIsThumbnailSidebarVisible(prev => !prev);
   };
 
+  const toggleBookmarkSidebar = () => {
+    setIsBookmarkSidebarVisible(prev => !prev);
+  };
+
   const toggleAnnotationsVisibility = () => {
     setIsAnnotationsVisible(prev => !prev);
   };
@@ -242,6 +254,18 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     return bridgeRefs.current.export?.state || { canExport: false };
   };
 
+  const getBookmarkState = (): BookmarkState => {
+    return (
+      bridgeRefs.current.bookmark?.state || {
+        bookmarks: null,
+        isLoading: false,
+        error: null,
+      }
+    );
+  };
+
+  const hasBookmarkSupport = () => Boolean(bridgeRefs.current.bookmark);
+
   // Action handlers - call APIs directly
   const {
     scrollActions,
@@ -252,6 +276,7 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     rotationActions,
     searchActions,
     exportActions,
+    bookmarkActions,
   } = createViewerActions({
     registry: bridgeRefs,
     getScrollState,
@@ -263,6 +288,8 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     // UI state
     isThumbnailSidebarVisible,
     toggleThumbnailSidebar,
+    isBookmarkSidebarVisible,
+    toggleBookmarkSidebar,
 
     // Annotation controls
     isAnnotationsVisible,
@@ -285,6 +312,8 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     getSearchState,
     getThumbnailAPI,
     getExportState,
+    getBookmarkState,
+    hasBookmarkSupport,
 
     // Immediate updates
     registerImmediateZoomUpdate,
@@ -303,6 +332,7 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     rotationActions,
     searchActions,
     exportActions,
+    bookmarkActions,
 
     // Bridge registration
     registerBridge,

frontend/src/core/contexts/viewer/viewerActions.ts

@@ -5,6 +5,7 @@ import {
   ScrollState,
   ZoomState,
 } from '@app/contexts/viewer/viewerBridges';
+import { PdfBookmarkObject } from '@embedpdf/models';
 
 export interface ScrollActions {
   scrollToPage: (page: number) => void;
@@ -58,6 +59,12 @@ export interface ExportActions {
   saveAsCopy: () => Promise<ArrayBuffer | null>;
 }
 
+export interface BookmarkActions {
+  fetchBookmarks: () => Promise<PdfBookmarkObject[] | null>;
+  clearBookmarks: () => void;
+  setLocalBookmarks: (bookmarks: PdfBookmarkObject[] | null, error?: string | null) => void;
+}
+
 export interface ViewerActionsBundle {
   scrollActions: ScrollActions;
   zoomActions: ZoomActions;
@@ -67,6 +74,7 @@ export interface ViewerActionsBundle {
   rotationActions: RotationActions;
   searchActions: SearchActions;
   exportActions: ExportActions;
+  bookmarkActions: BookmarkActions;
 }
 
 interface ViewerActionDependencies {
@@ -307,5 +315,22 @@ export function createViewerActions({
     rotationActions,
     searchActions,
     exportActions,
+    bookmarkActions: {
+      fetchBookmarks: async () => {
+        const api = registry.current.bookmark?.api;
+        if (!api?.fetchBookmarks) {
+          return null;
+        }
+        return api.fetchBookmarks();
+      },
+      clearBookmarks: () => {
+        const api = registry.current.bookmark?.api;
+        api?.clearBookmarks?.();
+      },
+      setLocalBookmarks: (bookmarks, error = null) => {
+        const api = registry.current.bookmark?.api;
+        api?.setLocalBookmarks?.(bookmarks ?? null, error);
+      },
+    },
   };
 }

frontend/src/core/contexts/viewer/viewerBridges.ts

@@ -1,4 +1,5 @@
 import { SpreadMode } from '@embedpdf/plugin-spread/react';
+import { PdfBookmarkObject } from '@embedpdf/models';
 
 export interface ScrollAPIWrapper {
   scrollToPage: (params: { pageNumber: number }) => void;
@@ -59,6 +60,12 @@ export interface ExportAPIWrapper {
   saveAsCopy: () => { toPromise: () => Promise<ArrayBuffer> };
 }
 
+export interface BookmarkAPIWrapper {
+  fetchBookmarks: () => Promise<PdfBookmarkObject[]>;
+  clearBookmarks: () => void;
+  setLocalBookmarks: (bookmarks: PdfBookmarkObject[] | null, error?: string | null) => void;
+}
+
 export interface ScrollState {
   currentPage: number;
   totalPages: number;
@@ -103,6 +110,12 @@ export interface ExportState {
   canExport: boolean;
 }
 
+export interface BookmarkState {
+  bookmarks: PdfBookmarkObject[] | null;
+  isLoading: boolean;
+  error: string | null;
+}
+
 export interface BridgeRef<TState = unknown, TApi = unknown> {
   state: TState;
   api: TApi;
@@ -118,6 +131,7 @@ export interface BridgeStateMap {
   search: SearchState;
   thumbnail: unknown;
   export: ExportState;
+  bookmark: BookmarkState;
 }
 
 export interface BridgeApiMap {
@@ -130,6 +144,7 @@ export interface BridgeApiMap {
   search: SearchAPIWrapper;
   thumbnail: ThumbnailAPIWrapper;
   export: ExportAPIWrapper;
+  bookmark: BookmarkAPIWrapper;
 }
 
 export type BridgeKey = keyof BridgeStateMap;
@@ -148,6 +163,7 @@ export const createBridgeRegistry = (): ViewerBridgeRegistry => ({
   search: null,
   thumbnail: null,
   export: null,
+  bookmark: null,
 });
 
 export function registerBridge<K extends BridgeKey>(

frontend/src/core/data/useTranslatedToolRegistry.tsx

@@ -82,6 +82,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 CompressSettings from "@app/components/tools/compress/CompressSettings";
 import AddPasswordSettings from "@app/components/tools/addPassword/AddPasswordSettings";
 import RemovePasswordSettings from "@app/components/tools/removePassword/RemovePasswordSettings";
@@ -300,6 +301,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         description: t("home.getPdfInfo.desc", "Grabs any and all information possible on PDFs"),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.VERIFICATION,
+        endpoints: ["get-info-on-pdf"],
         synonyms: getSynonyms(t, "getPdfInfo"),
         supportsAutomate: false,
         automationSettings: null
@@ -398,6 +400,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         description: t("home.split.desc", "Split PDFs into multiple documents"),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.PAGE_FORMATTING,
+        endpoints: Array.from(new Set(Object.values(SPLIT_ENDPOINT_NAMES))),
         operationConfig: splitOperationConfig,
         automationSettings: SplitAutomationSettings,
         synonyms: getSynonyms(t, "split")
@@ -465,6 +468,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         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: {
 
@@ -559,6 +563,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.REMOVAL,
         maxFiles: -1,
+        endpoints: ["remove-annotations"],
         operationConfig: removeAnnotationsOperationConfig,
         automationSettings: null,
         synonyms: getSynonyms(t, "removeAnnotations")
@@ -597,7 +602,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.REMOVAL,
         maxFiles: -1,
-        endpoints: ["remove-certificate-sign"],
+        endpoints: ["remove-cert-sign"],
         operationConfig: removeCertificateSignOperationConfig,
         synonyms: getSynonyms(t, "removeCertSign"),
         automationSettings: null,
@@ -626,7 +631,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         name: t("home.autoRename.title", "Auto Rename PDF File"),
         component: AutoRename,
         maxFiles: -1,
-        endpoints: ["remove-certificate-sign"],
+        endpoints: ["auto-rename"],
         operationConfig: autoRenameOperationConfig,
         description: t("home.autoRename.desc", "Automatically rename PDF files based on their content"),
         categoryId: ToolCategoryId.ADVANCED_TOOLS,
@@ -681,6 +686,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         description: t("home.overlay-pdfs.desc", "Overlay one PDF on top of another"),
         categoryId: ToolCategoryId.ADVANCED_TOOLS,
         subcategoryId: SubcategoryId.ADVANCED_FORMATTING,
+        endpoints: ["overlay-pdf"],
         operationConfig: overlayPdfsOperationConfig,
         synonyms: getSynonyms(t, "overlay-pdfs"),
         automationSettings: OverlayPdfsSettings
@@ -705,6 +711,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         description: t("home.addImage.desc", "Add images to PDF documents"),
         categoryId: ToolCategoryId.ADVANCED_TOOLS,
         subcategoryId: SubcategoryId.ADVANCED_FORMATTING,
+        endpoints: ["add-image"],
         synonyms: getSynonyms(t, "addImage"),
         automationSettings: null
       },
@@ -715,6 +722,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         description: t("home.scannerEffect.desc", "Create a PDF that looks like it was scanned"),
         categoryId: ToolCategoryId.ADVANCED_TOOLS,
         subcategoryId: SubcategoryId.ADVANCED_FORMATTING,
+        endpoints: ["scanner-effect"],
         synonyms: getSynonyms(t, "scannerEffect"),
         automationSettings: null
       },
@@ -805,6 +813,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
         subcategoryId: SubcategoryId.GENERAL,
         maxFiles: -1,
+        endpoints: ["compress-pdf"],
         operationConfig: compressOperationConfig,
         automationSettings: CompressSettings,
         synonyms: getSynonyms(t, "compress")
@@ -848,6 +857,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
         subcategoryId: SubcategoryId.GENERAL,
         maxFiles: -1,
+        endpoints: ["ocr-pdf"],
         operationConfig: ocrOperationConfig,
         automationSettings: OCRSettings,
         synonyms: getSynonyms(t, "ocr")

frontend/src/core/hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters.ts

@@ -14,6 +14,6 @@ export type RemoveCertificateSignParametersHook = BaseParametersHook<RemoveCerti
 export const useRemoveCertificateSignParameters = (): RemoveCertificateSignParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'remove-certificate-sign',
+    endpointName: 'remove-cert-sign',
   });
 };

frontend/src/core/hooks/useEndpointConfig.ts

@@ -1,9 +1,10 @@
 import { useState, useEffect } from 'react';
 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>();
-const globalEndpointCache: Record<string, boolean> = {};
+const globalEndpointCache: Record<string, EndpointAvailabilityDetails> = {};
 
 /**
  * Hook to check if a specific endpoint is enabled
@@ -59,11 +60,13 @@ export function useEndpointEnabled(endpoint: string): {
  */
 export function useMultipleEndpointsEnabled(endpoints: string[]): {
   endpointStatus: Record<string, boolean>;
+  endpointDetails: Record<string, EndpointAvailabilityDetails>;
   loading: boolean;
   error: string | null;
   refetch: () => Promise<void>;
 } {
   const [endpointStatus, setEndpointStatus] = useState<Record<string, boolean>>({});
+  const [endpointDetails, setEndpointDetails] = useState<Record<string, EndpointAvailabilityDetails>>({});
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -73,31 +76,25 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
     // Skip if we already fetched these exact endpoints globally
     if (!force && globalFetchedSets.has(endpointsKey)) {
       console.debug('[useEndpointConfig] Already fetched these endpoints globally, using cache');
-      const cachedStatus = endpoints.reduce((acc, endpoint) => {
-        if (endpoint in globalEndpointCache) {
-          acc[endpoint] = globalEndpointCache[endpoint];
-        }
-        return acc;
-      }, {} as Record<string, boolean>);
-      setEndpointStatus(cachedStatus);
+      const cached = endpoints.reduce(
+        (acc, endpoint) => {
+          const cachedDetails = globalEndpointCache[endpoint];
+          if (cachedDetails) {
+            acc.status[endpoint] = cachedDetails.enabled;
+            acc.details[endpoint] = cachedDetails;
+          }
+          return acc;
+        },
+        { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
+      );
+      setEndpointStatus(cached.status);
+      setEndpointDetails(prev => ({ ...prev, ...cached.details }));
       setLoading(false);
       return;
     }
     if (!endpoints || endpoints.length === 0) {
       setEndpointStatus({});
-      setLoading(false);
-      return;
-    }
-
-    // Check if JWT exists - if not, optimistically enable all endpoints
-    const hasJwt = !!localStorage.getItem('stirling_jwt');
-    if (!hasJwt) {
-      console.debug('[useEndpointConfig] No JWT found - optimistically enabling all endpoints');
-      const optimisticStatus = endpoints.reduce((acc, endpoint) => {
-        acc[endpoint] = true;
-        return acc;
-      }, {} as Record<string, boolean>);
-      setEndpointStatus(optimisticStatus);
+      setEndpointDetails({});
       setLoading(false);
       return;
     }
@@ -110,11 +107,19 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
       const newEndpoints = endpoints.filter(ep => !(ep in globalEndpointCache));
       if (newEndpoints.length === 0) {
         console.debug('[useEndpointConfig] All endpoints already in global cache');
-        const cachedStatus = endpoints.reduce((acc, endpoint) => {
-          acc[endpoint] = globalEndpointCache[endpoint];
-          return acc;
-        }, {} as Record<string, boolean>);
-        setEndpointStatus(cachedStatus);
+        const cached = endpoints.reduce(
+          (acc, endpoint) => {
+            const cachedDetails = globalEndpointCache[endpoint];
+            if (cachedDetails) {
+              acc.status[endpoint] = cachedDetails.enabled;
+              acc.details[endpoint] = cachedDetails;
+            }
+            return acc;
+          },
+          { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
+        );
+        setEndpointStatus(cached.status);
+        setEndpointDetails(prev => ({ ...prev, ...cached.details }));
         globalFetchedSets.add(endpointsKey);
         setLoading(false);
         return;
@@ -123,30 +128,51 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
       // Use batch API for efficiency - only fetch new endpoints
       const endpointsParam = newEndpoints.join(',');
 
-      const response = await apiClient.get<Record<string, boolean>>(`/api/v1/config/endpoints-enabled?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
-      Object.assign(globalEndpointCache, statusMap);
+      Object.entries(statusMap).forEach(([endpoint, details]) => {
+        globalEndpointCache[endpoint] = {
+          enabled: details?.enabled ?? true,
+          reason: details?.reason ?? null,
+        };
+      });
 
       // Get all requested endpoints from cache (including previously cached ones)
-      const fullStatus = endpoints.reduce((acc, endpoint) => {
-        acc[endpoint] = globalEndpointCache[endpoint] ?? true; // Default to true if not in cache
-        return acc;
-      }, {} as Record<string, boolean>);
+      const fullStatus = endpoints.reduce(
+        (acc, endpoint) => {
+          const cachedDetails = globalEndpointCache[endpoint];
+          if (cachedDetails) {
+            acc.status[endpoint] = cachedDetails.enabled;
+            acc.details[endpoint] = cachedDetails;
+          } else {
+            acc.status[endpoint] = true;
+          }
+          return acc;
+        },
+        { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
+      );
 
-      setEndpointStatus(fullStatus);
+      setEndpointStatus(fullStatus.status);
+      setEndpointDetails(prev => ({ ...prev, ...fullStatus.details }));
       globalFetchedSets.add(endpointsKey);
     } 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');
-        const optimisticStatus = endpoints.reduce((acc, endpoint) => {
-          acc[endpoint] = true;
-          globalEndpointCache[endpoint] = true; // Cache the optimistic value
-          return acc;
-        }, {} as Record<string, boolean>);
-        setEndpointStatus(optimisticStatus);
+        const optimisticStatus = endpoints.reduce(
+          (acc, endpoint) => {
+            const optimisticDetails: EndpointAvailabilityDetails = { enabled: true, reason: null };
+            acc.status[endpoint] = true;
+            acc.details[endpoint] = optimisticDetails;
+            globalEndpointCache[endpoint] = optimisticDetails;
+            return acc;
+          },
+          { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
+        );
+        setEndpointStatus(optimisticStatus.status);
+        setEndpointDetails(prev => ({ ...prev, ...optimisticStatus.details }));
         setLoading(false);
         return;
       }
@@ -156,11 +182,17 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
       console.error('[EndpointConfig] Failed to check multiple endpoints:', err);
 
       // Fallback: assume all endpoints are enabled on error (optimistic)
-      const optimisticStatus = endpoints.reduce((acc, endpoint) => {
-        acc[endpoint] = true;
-        return acc;
-      }, {} as Record<string, boolean>);
-      setEndpointStatus(optimisticStatus);
+      const optimisticStatus = endpoints.reduce(
+        (acc, endpoint) => {
+          const optimisticDetails: EndpointAvailabilityDetails = { enabled: true, reason: null };
+          acc.status[endpoint] = true;
+          acc.details[endpoint] = optimisticDetails;
+          return acc;
+        },
+        { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
+      );
+      setEndpointStatus(optimisticStatus.status);
+      setEndpointDetails(prev => ({ ...prev, ...optimisticStatus.details }));
     } finally {
       setLoading(false);
     }
@@ -186,6 +218,7 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
 
   return {
     endpointStatus,
+    endpointDetails,
     loading,
     error,
     refetch: () => fetchAllEndpointStatuses(true),

frontend/src/core/hooks/useToolManagement.tsx

@@ -1,9 +1,20 @@
 import { useState, useCallback, useMemo } from 'react';
 import { useToolRegistry } from "@app/contexts/ToolRegistryContext";
+import { usePreferences } from '@app/contexts/PreferencesContext';
 import { getAllEndpoints, type ToolRegistryEntry, type ToolRegistry } from "@app/data/toolsTaxonomy";
 import { useMultipleEndpointsEnabled } from "@app/hooks/useEndpointConfig";
 import { FileId } from '@app/types/file';
 import { ToolId } from "@app/types/toolId";
+import type { EndpointDisableReason } from '@app/types/endpointAvailability';
+
+export type ToolDisableCause = 'disabledByAdmin' | 'missingDependency' | 'unknown';
+
+export interface ToolAvailabilityInfo {
+  available: boolean;
+  reason?: ToolDisableCause;
+}
+
+export type ToolAvailabilityMap = Partial<Record<ToolId, ToolAvailabilityInfo>>;
 
 interface ToolManagementResult {
   selectedTool: ToolRegistryEntry | null;
@@ -11,6 +22,7 @@ interface ToolManagementResult {
   toolRegistry: Partial<ToolRegistry>;
   setToolSelectedFileIds: (fileIds: FileId[]) => void;
   getSelectedTool: (toolKey: ToolId | null) => ToolRegistryEntry | null;
+  toolAvailability: ToolAvailabilityMap;
 }
 
 export const useToolManagement = (): ToolManagementResult => {
@@ -19,9 +31,10 @@ export const useToolManagement = (): ToolManagementResult => {
   // Build endpoints list from registry entries with fallback to legacy mapping
   const { allTools } = useToolRegistry();
   const baseRegistry = allTools;
+  const { preferences } = usePreferences();
 
   const allEndpoints = useMemo(() => getAllEndpoints(baseRegistry), [baseRegistry]);
-  const { endpointStatus, loading: endpointsLoading } = useMultipleEndpointsEnabled(allEndpoints);
+  const { endpointStatus, endpointDetails, loading: endpointsLoading } = useMultipleEndpointsEnabled(allEndpoints);
 
   const isToolAvailable = useCallback((toolKey: string): boolean => {
     // Keep tools enabled during loading (optimistic UX)
@@ -38,29 +51,64 @@ export const useToolManagement = (): ToolManagementResult => {
     return endpoints.some((endpoint: string) => endpointStatus[endpoint] !== false);
   }, [endpointsLoading, endpointStatus, baseRegistry]);
 
+  const deriveToolDisableReason = useCallback((toolKey: ToolId): ToolDisableCause => {
+    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]);
+
+  const toolAvailability = useMemo(() => {
+    if (endpointsLoading) {
+      return {};
+    }
+    const availability: ToolAvailabilityMap = {};
+    (Object.keys(baseRegistry) as ToolId[]).forEach(toolKey => {
+      const available = isToolAvailable(toolKey);
+      availability[toolKey] = available
+        ? { available: true }
+        : { available: false, reason: deriveToolDisableReason(toolKey) };
+    });
+    return availability;
+  }, [baseRegistry, deriveToolDisableReason, endpointsLoading, isToolAvailable]);
+
   const toolRegistry: Partial<ToolRegistry> = useMemo(() => {
-    // Include tools that either:
-    // 1. Have enabled endpoints (normal filtering), OR
-    // 2. Are premium tools (so they show up even if premium is not enabled, but will be disabled)
     const availableToolRegistry: Partial<ToolRegistry> = {};
     (Object.keys(baseRegistry) as ToolId[]).forEach(toolKey => {
       const baseTool = baseRegistry[toolKey];
-      if (baseTool) {
-        const hasEnabledEndpoints = isToolAvailable(toolKey);
-        const isPremiumTool = baseTool.requiresPremium === true;
-        
-        // Include if endpoints are enabled OR if it's a premium tool (to show it disabled)
-        if (hasEnabledEndpoints || isPremiumTool) {
-          availableToolRegistry[toolKey] = {
-            ...baseTool,
-            name: baseTool.name,
-            description: baseTool.description,
-          };
-        }
+      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';
+
+      if (preferences.hideUnavailableTools && (!isAvailable || isComingSoon)) {
+        return;
       }
+      availableToolRegistry[toolKey] = {
+        ...baseTool,
+        name: baseTool.name,
+        description: baseTool.description,
+      };
     });
     return availableToolRegistry;
-  }, [isToolAvailable, baseRegistry]);
+  }, [baseRegistry, preferences.hideUnavailableTools, toolAvailability]);
 
   const getSelectedTool = useCallback((toolKey: ToolId | null): ToolRegistryEntry | null => {
     return toolKey ? toolRegistry[toolKey] || null : null;
@@ -72,5 +120,6 @@ export const useToolManagement = (): ToolManagementResult => {
     toolRegistry,
     setToolSelectedFileIds,
     getSelectedTool,
+    toolAvailability,
   };
 };

frontend/src/core/services/preferencesService.ts

@@ -9,6 +9,8 @@ export interface UserPreferences {
   toolPanelModePromptSeen: boolean;
   showLegacyToolDescriptions: boolean;
   hasCompletedOnboarding: boolean;
+  hideUnavailableTools: boolean;
+  hideUnavailableConversions: boolean;
 }
 
 export const DEFAULT_PREFERENCES: UserPreferences = {
@@ -19,6 +21,8 @@ export const DEFAULT_PREFERENCES: UserPreferences = {
   toolPanelModePromptSeen: false,
   showLegacyToolDescriptions: false,
   hasCompletedOnboarding: false,
+  hideUnavailableTools: false,
+  hideUnavailableConversions: false,
 };
 
 const STORAGE_KEY = 'stirlingpdf_preferences';

frontend/src/core/services/updateService.ts

@@ -1,6 +1,6 @@
 export interface UpdateSummary {
-  latest_version: string;
-  latest_stable_version?: string;
+  latest_version: string | null;
+  latest_stable_version?: string | null;
   max_priority: 'urgent' | 'normal' | 'minor' | 'low';
   recommended_action?: string;
   any_breaking: boolean;

frontend/src/core/types/endpointAvailability.ts

@@ -0,0 +1,6 @@
+export type EndpointDisableReason = 'CONFIG' | 'DEPENDENCY' | 'UNKNOWN' | null;
+
+export interface EndpointAvailabilityDetails {
+  enabled: boolean;
+  reason?: EndpointDisableReason;
+}

frontend/src/desktop/components/AppProviders.tsx

@@ -17,23 +17,23 @@ import { tauriBackendService } from '@app/services/tauriBackendService';
  */
 export function AppProviders({ children }: { children: ReactNode }) {
   const { isFirstLaunch, setupComplete } = useFirstLaunchCheck();
-  const [connectionMode, setConnectionMode] = useState<'offline' | 'server' | null>(null);
+  const [connectionMode, setConnectionMode] = useState<'saas' | 'selfhosted' | null>(null);
 
   // Load connection mode on mount
   useEffect(() => {
     void connectionModeService.getCurrentMode().then(setConnectionMode);
   }, []);
 
-  // Initialize backend health monitoring for server mode
+  // Initialize backend health monitoring for self-hosted mode
   useEffect(() => {
-    if (setupComplete && !isFirstLaunch && connectionMode === 'server') {
-      console.log('[AppProviders] Initializing external backend monitoring for server mode');
+    if (setupComplete && !isFirstLaunch && connectionMode === 'selfhosted') {
       void tauriBackendService.initializeExternalBackend();
     }
   }, [setupComplete, isFirstLaunch, connectionMode]);
 
-  // Only start bundled backend if in offline mode and setup is complete
-  const shouldStartBackend = setupComplete && !isFirstLaunch && connectionMode === 'offline';
+  // Only start bundled backend if in SaaS mode (local backend) and setup is complete
+  // Self-hosted mode connects to remote server so doesn't need local backend
+  const shouldStartBackend = setupComplete && !isFirstLaunch && connectionMode === 'saas';
   useBackendInitializer(shouldStartBackend);
 
   // Show setup wizard on first launch
@@ -51,8 +51,23 @@ export function AppProviders({ children }: { children: ReactNode }) {
         }}
       >
         <SetupWizard
-          onComplete={() => {
-            // Reload the page to reinitialize with new connection config
+          onComplete={async () => {
+            // Wait for backend to become healthy before reloading
+            // This prevents reloading mid-startup which would interrupt the backend
+            const maxWaitTime = 60000; // 60 seconds max
+            const checkInterval = 1000; // Check every second
+            const startTime = Date.now();
+
+            while (Date.now() - startTime < maxWaitTime) {
+              if (tauriBackendService.isBackendHealthy()) {
+                window.location.reload();
+                return;
+              }
+              await new Promise(resolve => setTimeout(resolve, checkInterval));
+            }
+
+            // If we timeout, reload anyway
+            console.warn('[AppProviders] Backend health check timeout, reloading anyway...');
             window.location.reload();
           }}
         />

frontend/src/desktop/components/ConnectionSettings.tsx

@@ -1,24 +1,15 @@
 import React, { useState, useEffect } from 'react';
-import { Stack, Card, Badge, Button, Text, Group, Modal, TextInput, Radio } from '@mantine/core';
+import { Stack, Card, Badge, Button, Text, Group } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import {
-  connectionModeService,
-  ConnectionConfig,
-  ServerConfig,
-} from '@app/services/connectionModeService';
+import { connectionModeService, ConnectionConfig } from '@app/services/connectionModeService';
 import { authService, UserInfo } from '@app/services/authService';
-import { LoginForm } from '@app/components/SetupWizard/LoginForm';
 import { STIRLING_SAAS_URL } from '@app/constants/connection';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
 
 export const ConnectionSettings: React.FC = () => {
   const { t } = useTranslation();
   const [config, setConfig] = useState<ConnectionConfig | null>(null);
   const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
   const [loading, setLoading] = useState(false);
-  const [showServerModal, setShowServerModal] = useState(false);
-  const [showLoginModal, setShowLoginModal] = useState(false);
-  const [newServerConfig, setNewServerConfig] = useState<ServerConfig | null>(null);
 
   // Load current config on mount
   useEffect(() => {
@@ -26,7 +17,7 @@ export const ConnectionSettings: React.FC = () => {
       const currentConfig = await connectionModeService.getCurrentConfig();
       setConfig(currentConfig);
 
-      if (currentConfig.mode === 'server') {
+      if (currentConfig.mode === 'saas' || currentConfig.mode === 'selfhosted') {
         const user = await authService.getUserInfo();
         setUserInfo(user);
       }
@@ -35,80 +26,26 @@ export const ConnectionSettings: React.FC = () => {
     loadConfig();
   }, []);
 
-  const handleSwitchToOffline = async () => {
-    try {
-      setLoading(true);
-      await connectionModeService.switchToOffline();
-
-      // Reload config
-      const newConfig = await connectionModeService.getCurrentConfig();
-      setConfig(newConfig);
-      setUserInfo(null);
-
-      // Reload the page to start the local backend
-      window.location.reload();
-    } catch (error) {
-      console.error('Failed to switch to offline:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleSwitchToServer = () => {
-    setShowServerModal(true);
-  };
-
-  const handleServerConfigSubmit = (serverConfig: ServerConfig) => {
-    setNewServerConfig(serverConfig);
-    setShowServerModal(false);
-    setShowLoginModal(true);
-  };
-
-  const handleLogin = async (username: string, password: string) => {
-    if (!newServerConfig) return;
-
-    try {
-      setLoading(true);
-
-      // Login
-      await authService.login(newServerConfig.url, username, password);
-
-      // Switch to server mode
-      await connectionModeService.switchToServer(newServerConfig);
-
-      // Reload config and user info
-      const newConfig = await connectionModeService.getCurrentConfig();
-      setConfig(newConfig);
-      const user = await authService.getUserInfo();
-      setUserInfo(user);
-
-      setShowLoginModal(false);
-      setNewServerConfig(null);
-
-      // Reload the page to stop local backend and initialize external backend monitoring
-      window.location.reload();
-    } catch (error) {
-      console.error('Login failed:', error);
-      throw error; // Let LoginForm handle the error
-    } finally {
-      setLoading(false);
-    }
-  };
-
   const handleLogout = async () => {
     try {
       setLoading(true);
       await authService.logout();
 
-      // Switch to offline mode
-      await connectionModeService.switchToOffline();
+      // Switch to SaaS mode
+      await connectionModeService.switchToSaaS(STIRLING_SAAS_URL);
+
+      // Reset setup completion to force login screen on reload
+      await connectionModeService.resetSetupCompletion();
 
       // Reload config
       const newConfig = await connectionModeService.getCurrentConfig();
       setConfig(newConfig);
       setUserInfo(null);
 
-      // Reload the page to clear all state and reconnect to local backend
+      // Clear URL to home page before reload so we don't return to settings after re-login
+      window.history.replaceState({}, '', '/');
+
+      // Reload the page to clear all state and show login screen
       window.location.reload();
     } catch (error) {
       console.error('Logout failed:', error);
@@ -127,21 +64,21 @@ export const ConnectionSettings: React.FC = () => {
         <Stack gap="md">
           <Group justify="space-between">
             <Text fw={600}>{t('settings.connection.title', 'Connection Mode')}</Text>
-            <Badge color={config.mode === 'offline' ? 'blue' : 'green'} variant="light">
-              {config.mode === 'offline'
-                ? t('settings.connection.mode.offline', 'Offline')
-                : t('settings.connection.mode.server', 'Server')}
+            <Badge color={config.mode === 'saas' ? 'blue' : 'green'} variant="light">
+              {config.mode === 'saas'
+                ? t('settings.connection.mode.saas', 'Stirling Cloud')
+                : t('settings.connection.mode.selfhosted', 'Self-Hosted')}
             </Badge>
           </Group>
 
-          {config.mode === 'server' && config.server_config && (
+          {(config.mode === 'saas' || config.mode === 'selfhosted') && config.server_config && (
             <>
               <div>
                 <Text size="sm" fw={500}>
                   {t('settings.connection.server', 'Server')}
                 </Text>
                 <Text size="sm" c="dimmed">
-                  {config.server_config.url}
+                  {config.mode === 'saas' ? 'stirling.com' : config.server_config.url}
                 </Text>
               </div>
 
@@ -160,128 +97,12 @@ export const ConnectionSettings: React.FC = () => {
           )}
 
           <Group mt="md">
-            {config.mode === 'offline' ? (
-              <Button onClick={handleSwitchToServer} disabled={loading}>
-                {t('settings.connection.switchToServer', 'Connect to Server')}
-              </Button>
-            ) : (
-              <>
-                <Button onClick={handleSwitchToOffline} variant="default" disabled={loading}>
-                  {t('settings.connection.switchToOffline', 'Switch to Offline')}
-                </Button>
-                <Button onClick={handleLogout} color="red" variant="light" disabled={loading}>
-                  {t('settings.connection.logout', 'Logout')}
-                </Button>
-              </>
-            )}
+            <Button onClick={handleLogout} color="red" variant="light" disabled={loading}>
+              {t('settings.connection.logout', 'Log Out')}
+            </Button>
           </Group>
         </Stack>
       </Card>
-
-      {/* Server selection modal */}
-      <Modal
-        opened={showServerModal}
-        onClose={() => setShowServerModal(false)}
-        title={t('settings.connection.selectServer', 'Select Server')}
-        zIndex={Z_INDEX_OVER_CONFIG_MODAL}
-      >
-        <ServerSelectionInSettings onSubmit={handleServerConfigSubmit} />
-      </Modal>
-
-      {/* Login modal */}
-      <Modal
-        opened={showLoginModal}
-        onClose={() => {
-          setShowLoginModal(false);
-          setNewServerConfig(null);
-        }}
-        title={t('settings.connection.login', 'Login')}
-        zIndex={Z_INDEX_OVER_CONFIG_MODAL}
-      >
-        {newServerConfig && (
-          <LoginForm
-            serverUrl={newServerConfig.url}
-            onLogin={handleLogin}
-            loading={loading}
-          />
-        )}
-      </Modal>
     </>
   );
 };
-
-// Mini server selection component for settings
-const ServerSelectionInSettings: React.FC<{ onSubmit: (config: ServerConfig) => void }> = ({
-  onSubmit,
-}) => {
-  const { t } = useTranslation();
-  const [serverType, setServerType] = useState<'saas' | 'selfhosted'>('saas');
-  const [customUrl, setCustomUrl] = useState('');
-  const [testing, setTesting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleSubmit = async () => {
-    const url = serverType === 'saas' ? STIRLING_SAAS_URL : customUrl.trim();
-
-    if (!url) {
-      setError(t('setup.server.error.emptyUrl', 'Please enter a server URL'));
-      return;
-    }
-
-    setTesting(true);
-    setError(null);
-
-    try {
-      const isReachable = await connectionModeService.testConnection(url);
-
-      if (!isReachable) {
-        setError(t('setup.server.error.unreachable', 'Could not connect to server'));
-        setTesting(false);
-        return;
-      }
-
-      onSubmit({
-        url,
-        server_type: serverType,
-      });
-    } catch (err) {
-      setError(err instanceof Error ? err.message : t('setup.server.error.testFailed', 'Connection test failed'));
-      setTesting(false);
-    }
-  };
-
-  return (
-    <Stack gap="md">
-      <Radio.Group value={serverType} onChange={(value) => setServerType(value as 'saas' | 'selfhosted')}>
-        <Stack gap="xs">
-          <Radio value="saas" label={t('setup.server.type.saas', 'Stirling PDF SaaS')} />
-          <Radio value="selfhosted" label={t('setup.server.type.selfhosted', 'Self-hosted server')} />
-        </Stack>
-      </Radio.Group>
-
-      {serverType === 'selfhosted' && (
-        <TextInput
-          label={t('setup.server.url.label', 'Server URL')}
-          placeholder="https://your-server.com"
-          value={customUrl}
-          onChange={(e) => {
-            setCustomUrl(e.target.value);
-            setError(null);
-          }}
-          disabled={testing}
-          error={error}
-        />
-      )}
-
-      {error && !customUrl && (
-        <Text c="red" size="sm">
-          {error}
-        </Text>
-      )}
-
-      <Button onClick={handleSubmit} loading={testing} fullWidth>
-        {testing ? t('setup.server.testing', 'Testing...') : t('common.continue', 'Continue')}
-      </Button>
-    </Stack>
-  );
-};

frontend/src/desktop/components/SetupWizard/LoginForm.tsx

@@ -4,11 +4,12 @@ import { useTranslation } from 'react-i18next';
 
 interface LoginFormProps {
   serverUrl: string;
+  isSaaS?: boolean;
   onLogin: (username: string, password: string) => Promise<void>;
   loading: boolean;
 }
 
-export const LoginForm: React.FC<LoginFormProps> = ({ serverUrl, onLogin, loading }) => {
+export const LoginForm: React.FC<LoginFormProps> = ({ serverUrl, isSaaS = false, onLogin, loading }) => {
   const { t } = useTranslation();
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
@@ -36,7 +37,7 @@ export const LoginForm: React.FC<LoginFormProps> = ({ serverUrl, onLogin, loadin
     <form onSubmit={handleSubmit}>
       <Stack gap="md">
         <Text size="sm" c="dimmed">
-          {t('setup.login.connectingTo', 'Connecting to:')} <strong>{serverUrl}</strong>
+          {t('setup.login.connectingTo', 'Connecting to:')} <strong>{isSaaS ? 'stirling.com' : serverUrl}</strong>
         </Text>
 
         <TextInput

frontend/src/desktop/components/SetupWizard/ModeSelection.tsx

@@ -5,7 +5,7 @@ import CloudIcon from '@mui/icons-material/Cloud';
 import ComputerIcon from '@mui/icons-material/Computer';
 
 interface ModeSelectionProps {
-  onSelect: (mode: 'offline' | 'server') => void;
+  onSelect: (mode: 'saas' | 'selfhosted') => void;
   loading: boolean;
 }
 
@@ -17,31 +17,7 @@ export const ModeSelection: React.FC<ModeSelectionProps> = ({ onSelect, loading
       <Button
         size="xl"
         variant="default"
-        onClick={() => onSelect('offline')}
-        disabled={loading}
-        leftSection={<ComputerIcon />}
-        styles={{
-          root: {
-            height: 'auto',
-            padding: '1.25rem',
-          },
-          inner: {
-            justifyContent: 'flex-start',
-          },
-        }}
-      >
-        <div style={{ textAlign: 'left', flex: 1 }}>
-          <Text fw={600} size="md">{t('setup.mode.offline.title', 'Use Offline')}</Text>
-          <Text size="sm" c="dimmed" fw={400}>
-            {t('setup.mode.offline.description', 'Run locally without an internet connection')}
-          </Text>
-        </div>
-      </Button>
-
-      <Button
-        size="xl"
-        variant="default"
-        onClick={() => onSelect('server')}
+        onClick={() => onSelect('saas')}
         disabled={loading}
         leftSection={<CloudIcon />}
         styles={{
@@ -52,12 +28,42 @@ export const ModeSelection: React.FC<ModeSelectionProps> = ({ onSelect, loading
           inner: {
             justifyContent: 'flex-start',
           },
+          section: {
+            marginRight: '1rem',
+          },
         }}
       >
         <div style={{ textAlign: 'left', flex: 1 }}>
-          <Text fw={600} size="md">{t('setup.mode.server.title', 'Connect to Server')}</Text>
+          <Text fw={600} size="md">{t('setup.mode.saas.title', 'Use SaaS')}</Text>
           <Text size="sm" c="dimmed" fw={400}>
-            {t('setup.mode.server.description', 'Connect to a remote Stirling PDF server')}
+            {t('setup.mode.saas.description', 'Sign in to Stirling PDF cloud service')}
+          </Text>
+        </div>
+      </Button>
+
+      <Button
+        size="xl"
+        variant="default"
+        onClick={() => onSelect('selfhosted')}
+        disabled={loading}
+        leftSection={<ComputerIcon />}
+        styles={{
+          root: {
+            height: 'auto',
+            padding: '1.25rem',
+          },
+          inner: {
+            justifyContent: 'flex-start',
+          },
+          section: {
+            marginRight: '1rem',
+          },
+        }}
+      >
+        <div style={{ textAlign: 'left', flex: 1 }}>
+          <Text fw={600} size="md">{t('setup.mode.selfhosted.title', 'Self-Hosted Server')}</Text>
+          <Text size="sm" c="dimmed" fw={400}>
+            {t('setup.mode.selfhosted.description', 'Connect to your own Stirling PDF server')}
           </Text>
         </div>
       </Button>

frontend/src/desktop/components/SetupWizard/ServerSelection.tsx

@@ -41,7 +41,6 @@ export const ServerSelection: React.FC<ServerSelectionProps> = ({ onSelect, load
       // Connection successful
       onSelect({
         url,
-        server_type: 'selfhosted',
       });
     } catch (error) {
       console.error('Connection test failed:', error);

frontend/src/desktop/components/SetupWizard/index.tsx

@@ -7,13 +7,15 @@ import { LoginForm } from '@app/components/SetupWizard/LoginForm';
 import { connectionModeService, ServerConfig } from '@app/services/connectionModeService';
 import { authService } from '@app/services/authService';
 import { tauriBackendService } from '@app/services/tauriBackendService';
-import { BASE_PATH } from '@app/constants/app';
+import { useLogoPath } from '@app/hooks/useLogoPath';
+import { STIRLING_SAAS_URL } from '@desktop/constants/connection';
 import '@app/components/SetupWizard/SetupWizard.css';
 
 enum SetupStep {
   ModeSelection,
+  SaaSLogin,
   ServerSelection,
-  Login,
+  SelfHostedLogin,
 }
 
 interface SetupWizardProps {
@@ -22,34 +24,42 @@ interface SetupWizardProps {
 
 export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete }) => {
   const { t } = useTranslation();
+  const logoPath = useLogoPath();
   const [activeStep, setActiveStep] = useState<SetupStep>(SetupStep.ModeSelection);
-  const [_selectedMode, setSelectedMode] = useState<'offline' | 'server' | null>(null);
   const [serverConfig, setServerConfig] = useState<ServerConfig | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const handleModeSelection = (mode: 'offline' | 'server') => {
-    setSelectedMode(mode);
+  const handleModeSelection = (mode: 'saas' | 'selfhosted') => {
     setError(null);
 
-    if (mode === 'offline') {
-      handleOfflineSetup();
+    if (mode === 'saas') {
+      // For SaaS, go directly to login screen with SaaS URL
+      setServerConfig({ url: STIRLING_SAAS_URL });
+      setActiveStep(SetupStep.SaaSLogin);
     } else {
+      // For self-hosted, show server selection first
       setActiveStep(SetupStep.ServerSelection);
     }
   };
 
-  const handleOfflineSetup = async () => {
+  const handleSaaSLogin = async (username: string, password: string) => {
+    if (!serverConfig) {
+      setError('No SaaS server configured');
+      return;
+    }
+
     try {
       setLoading(true);
       setError(null);
 
-      await connectionModeService.switchToOffline();
+      await authService.login(serverConfig.url, username, password);
+      await connectionModeService.switchToSaaS(serverConfig.url);
       await tauriBackendService.startBackend();
       onComplete();
     } catch (err) {
-      console.error('Failed to set up offline mode:', err);
-      setError(err instanceof Error ? err.message : 'Failed to set up offline mode');
+      console.error('SaaS login failed:', err);
+      setError(err instanceof Error ? err.message : 'SaaS login failed');
       setLoading(false);
     }
   };
@@ -57,10 +67,10 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete }) => {
   const handleServerSelection = (config: ServerConfig) => {
     setServerConfig(config);
     setError(null);
-    setActiveStep(SetupStep.Login);
+    setActiveStep(SetupStep.SelfHostedLogin);
   };
 
-  const handleLogin = async (username: string, password: string) => {
+  const handleSelfHostedLogin = async (username: string, password: string) => {
     if (!serverConfig) {
       setError('No server configured');
       return;
@@ -71,23 +81,25 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete }) => {
       setError(null);
 
       await authService.login(serverConfig.url, username, password);
-      await connectionModeService.switchToServer(serverConfig);
+      await connectionModeService.switchToSelfHosted(serverConfig);
       await tauriBackendService.initializeExternalBackend();
       onComplete();
     } catch (err) {
-      console.error('Login failed:', err);
-      setError(err instanceof Error ? err.message : 'Login failed');
+      console.error('Self-hosted login failed:', err);
+      setError(err instanceof Error ? err.message : 'Self-hosted login failed');
       setLoading(false);
     }
   };
 
   const handleBack = () => {
     setError(null);
-    if (activeStep === SetupStep.Login) {
+    if (activeStep === SetupStep.SaaSLogin) {
+      setActiveStep(SetupStep.ModeSelection);
+      setServerConfig(null);
+    } else if (activeStep === SetupStep.SelfHostedLogin) {
       setActiveStep(SetupStep.ServerSelection);
     } else if (activeStep === SetupStep.ServerSelection) {
       setActiveStep(SetupStep.ModeSelection);
-      setSelectedMode(null);
       setServerConfig(null);
     }
   };
@@ -96,10 +108,12 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete }) => {
     switch (activeStep) {
       case SetupStep.ModeSelection:
         return t('setup.welcome', 'Welcome to Stirling PDF');
+      case SetupStep.SaaSLogin:
+        return t('setup.saas.title', 'Sign in to Stirling Cloud');
       case SetupStep.ServerSelection:
         return t('setup.server.title', 'Connect to Server');
-      case SetupStep.Login:
-        return t('setup.login.title', 'Sign In');
+      case SetupStep.SelfHostedLogin:
+        return t('setup.selfhosted.title', 'Sign in to Server');
       default:
         return '';
     }
@@ -109,10 +123,12 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete }) => {
     switch (activeStep) {
       case SetupStep.ModeSelection:
         return t('setup.description', 'Get started by choosing how you want to use Stirling PDF');
+      case SetupStep.SaaSLogin:
+        return t('setup.saas.subtitle', 'Sign in with your Stirling account');
       case SetupStep.ServerSelection:
         return t('setup.server.subtitle', 'Enter your self-hosted server URL');
-      case SetupStep.Login:
-        return t('setup.login.subtitle', 'Enter your credentials to continue');
+      case SetupStep.SelfHostedLogin:
+        return t('setup.selfhosted.subtitle', 'Enter your server credentials');
       default:
         return '';
     }
@@ -126,9 +142,9 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete }) => {
             {/* Logo Header */}
             <Stack gap="xs" align="center">
               <Image
-                src={`${BASE_PATH}/branding/StirlingPDFLogoBlackText.svg`}
+                src={logoPath}
                 alt="Stirling PDF"
-                h={32}
+                h={64}
                 fit="contain"
               />
               <Title order={1} ta="center" style={{ fontSize: '2rem', fontWeight: 800 }}>
@@ -153,14 +169,24 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete }) => {
               <ModeSelection onSelect={handleModeSelection} loading={loading} />
             )}
 
+            {activeStep === SetupStep.SaaSLogin && (
+              <LoginForm
+                serverUrl={serverConfig?.url || ''}
+                isSaaS={true}
+                onLogin={handleSaaSLogin}
+                loading={loading}
+              />
+            )}
+
             {activeStep === SetupStep.ServerSelection && (
               <ServerSelection onSelect={handleServerSelection} loading={loading} />
             )}
 
-            {activeStep === SetupStep.Login && (
+            {activeStep === SetupStep.SelfHostedLogin && (
               <LoginForm
                 serverUrl={serverConfig?.url || ''}
-                onLogin={handleLogin}
+                isSaaS={false}
+                onLogin={handleSelfHostedLogin}
                 loading={loading}
               />
             )}

frontend/src/desktop/constants/connection.ts

@@ -2,4 +2,11 @@
  * Connection-related constants for desktop app
  */
 
-export const STIRLING_SAAS_URL = 'https://stirling.com/app';
+// SaaS server URL from environment variable (required)
+// The SaaS authentication server
+// Will throw error if VITE_SAAS_SERVER_URL is not set
+if (!import.meta.env.VITE_SAAS_SERVER_URL) {
+  throw new Error('VITE_SAAS_SERVER_URL environment variable is required');
+}
+
+export const STIRLING_SAAS_URL = import.meta.env.VITE_SAAS_SERVER_URL;

frontend/src/desktop/hooks/useBackendInitializer.ts

@@ -25,9 +25,7 @@ export function useBackendInitializer(enabled = true) {
 
     const initializeBackend = async () => {
       try {
-        console.log('[BackendInitializer] Starting backend...');
         await tauriBackendService.startBackend(backendUrl);
-        console.log('[BackendInitializer] Backend started successfully');
 
         // Begin health checks after a short delay
         setTimeout(() => {

frontend/src/desktop/hooks/useEndpointConfig.ts

@@ -4,8 +4,10 @@ import { useTranslation } from 'react-i18next';
 import apiClient from '@app/services/apiClient';
 import { tauriBackendService } from '@app/services/tauriBackendService';
 import { isBackendNotReadyError } from '@app/constants/backendErrors';
+import type { EndpointAvailabilityDetails } from '@app/types/endpointAvailability';
 import { connectionModeService } from '@desktop/services/connectionModeService';
 
+
 interface EndpointConfig {
   backendUrl: string;
 }
@@ -128,6 +130,7 @@ export function useEndpointEnabled(endpoint: string): {
 
 export function useMultipleEndpointsEnabled(endpoints: string[]): {
   endpointStatus: Record<string, boolean>;
+  endpointDetails: Record<string, EndpointAvailabilityDetails>;
   loading: boolean;
   error: string | null;
   refetch: () => Promise<void>;
@@ -140,6 +143,7 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
       return acc;
     }, {} as Record<string, boolean>);
   });
+  const [endpointDetails, setEndpointDetails] = useState<Record<string, EndpointAvailabilityDetails>>({});
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const isMountedRef = useRef(true);
@@ -174,13 +178,27 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
 
       const endpointsParam = endpoints.join(',');
 
-      const response = await apiClient.get<Record<string, boolean>>('/api/v1/config/endpoints-enabled', {
+      const response = await apiClient.get<Record<string, EndpointAvailabilityDetails>>('/api/v1/config/endpoints-availability', {
         params: { endpoints: endpointsParam },
         suppressErrorToast: true,
       });
 
       if (!isMountedRef.current) return;
-      setEndpointStatus(response.data);
+      const details = Object.entries(response.data).reduce((acc, [endpointName, detail]) => {
+        acc[endpointName] = {
+          enabled: detail?.enabled ?? true,
+          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>);
+
+      setEndpointDetails(prev => ({ ...prev, ...details }));
+      setEndpointStatus(statusMap);
     } catch (err: unknown) {
       const isBackendStarting = isBackendNotReadyError(err);
       const message = getErrorMessage(err);
@@ -188,10 +206,13 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
       setError(isBackendStarting ? t('backendHealth.starting', 'Backend starting up...') : message);
 
       const fallbackStatus = endpoints.reduce((acc, endpointName) => {
-        acc[endpointName] = true;
+        const fallbackDetail: EndpointAvailabilityDetails = { enabled: true, reason: null };
+        acc.status[endpointName] = true;
+        acc.details[endpointName] = fallbackDetail;
         return acc;
-      }, {} as Record<string, boolean>);
-      setEndpointStatus(fallbackStatus);
+      }, { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> });
+      setEndpointStatus(fallbackStatus.status);
+      setEndpointDetails(prev => ({ ...prev, ...fallbackStatus.details }));
 
       if (!retryTimeoutRef.current) {
         retryTimeoutRef.current = setTimeout(() => {
@@ -209,6 +230,7 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
   useEffect(() => {
     if (!endpoints || endpoints.length === 0) {
       setEndpointStatus({});
+      setEndpointDetails({});
       setLoading(false);
       return;
     }
@@ -230,6 +252,7 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
 
   return {
     endpointStatus,
+    endpointDetails,
     loading,
     error,
     refetch: fetchAllEndpointStatuses,
@@ -244,8 +267,8 @@ const DEFAULT_BACKEND_URL =
 
 /**
  * Desktop override exposing the backend URL based on connection mode.
- * - Offline mode: Uses local bundled backend (from env vars)
- * - Server mode: Uses configured server URL from connection config
+ * - SaaS mode: Uses local bundled backend (from env vars)
+ * - Self-hosted mode: Uses configured server URL from connection config
  */
 export function useEndpointConfig(): EndpointConfig {
   const [backendUrl, setBackendUrl] = useState<string>(DEFAULT_BACKEND_URL);
@@ -253,10 +276,10 @@ export function useEndpointConfig(): EndpointConfig {
   useEffect(() => {
     connectionModeService.getCurrentConfig()
       .then((config) => {
-        if (config.mode === 'server' && config.server_config?.url) {
+        if (config.mode === 'selfhosted' && config.server_config?.url) {
           setBackendUrl(config.server_config.url);
         } else {
-          // Offline mode - use default from env vars
+          // SaaS mode - use default from env vars (local backend)
           setBackendUrl(DEFAULT_BACKEND_URL);
         }
       })

frontend/src/desktop/services/apiClientSetup.ts

@@ -49,7 +49,7 @@ export function setupApiInterceptors(client: AxiosInstance): void {
       console.debug(`[apiClientSetup] Request to: ${extendedConfig.url}`);
 
       // Add auth token for remote requests
-      const isRemote = await operationRouter.isRemoteMode();
+      const isRemote = await operationRouter.isSelfHostedMode();
       if (isRemote) {
         const token = await authService.getAuthToken();
         if (token) {
@@ -59,9 +59,9 @@ export function setupApiInterceptors(client: AxiosInstance): void {
 
       // Backend readiness check (for local backend)
       const skipCheck = extendedConfig.skipBackendReadyCheck === true;
-      const isOffline = await operationRouter.isOfflineMode();
+      const isSaaS = await operationRouter.isSaaSMode();
 
-      if (isOffline && !skipCheck && !tauriBackendService.isBackendHealthy()) {
+      if (isSaaS && !skipCheck && !tauriBackendService.isBackendHealthy()) {
         const method = (extendedConfig.method || 'get').toLowerCase();
         if (method !== 'get') {
           const now = Date.now();
@@ -93,7 +93,7 @@ export function setupApiInterceptors(client: AxiosInstance): void {
       if (error.response?.status === 401 && !originalRequest._retry) {
         originalRequest._retry = true;
 
-        const isRemote = await operationRouter.isRemoteMode();
+        const isRemote = await operationRouter.isSelfHostedMode();
         if (isRemote) {
           const serverConfig = await connectionModeService.getServerConfig();
           if (serverConfig) {

frontend/src/desktop/services/connectionModeService.ts

@@ -1,12 +1,10 @@
 import { invoke } from '@tauri-apps/api/core';
 import { fetch } from '@tauri-apps/plugin-http';
 
-export type ConnectionMode = 'offline' | 'server';
-export type ServerType = 'saas' | 'selfhosted';
+export type ConnectionMode = 'saas' | 'selfhosted';
 
 export interface ServerConfig {
   url: string;
-  server_type: ServerType;
 }
 
 export interface ConnectionConfig {
@@ -31,7 +29,7 @@ export class ConnectionModeService {
     if (!this.configLoadedOnce) {
       await this.loadConfig();
     }
-    return this.currentConfig || { mode: 'offline', server_config: null };
+    return this.currentConfig || { mode: 'saas', server_config: null };
   }
 
   async getCurrentMode(): Promise<ConnectionMode> {
@@ -64,38 +62,40 @@ export class ConnectionModeService {
       this.configLoadedOnce = true;
     } catch (error) {
       console.error('Failed to load connection config:', error);
-      // Default to offline mode on error
-      this.currentConfig = { mode: 'offline', server_config: null };
+      // Default to SaaS mode on error
+      this.currentConfig = { mode: 'saas', server_config: null };
       this.configLoadedOnce = true;
     }
   }
 
-  async switchToOffline(): Promise<void> {
-    console.log('Switching to offline mode');
+  async switchToSaaS(saasServerUrl: string): Promise<void> {
+    console.log('Switching to SaaS mode');
+
+    const serverConfig: ServerConfig = { url: saasServerUrl };
 
     await invoke('set_connection_mode', {
-      mode: 'offline',
-      serverConfig: null,
-    });
-
-    this.currentConfig = { mode: 'offline', server_config: null };
-    this.notifyListeners();
-
-    console.log('Switched to offline mode successfully');
-  }
-
-  async switchToServer(serverConfig: ServerConfig): Promise<void> {
-    console.log('Switching to server mode:', serverConfig);
-
-    await invoke('set_connection_mode', {
-      mode: 'server',
+      mode: 'saas',
       serverConfig,
     });
 
-    this.currentConfig = { mode: 'server', server_config: serverConfig };
+    this.currentConfig = { mode: 'saas', server_config: serverConfig };
     this.notifyListeners();
 
-    console.log('Switched to server mode successfully');
+    console.log('Switched to SaaS mode successfully');
+  }
+
+  async switchToSelfHosted(serverConfig: ServerConfig): Promise<void> {
+    console.log('Switching to self-hosted mode:', serverConfig);
+
+    await invoke('set_connection_mode', {
+      mode: 'selfhosted',
+      serverConfig,
+    });
+
+    this.currentConfig = { mode: 'selfhosted', server_config: serverConfig };
+    this.notifyListeners();
+
+    console.log('Switched to self-hosted mode successfully');
   }
 
   async testConnection(url: string): Promise<boolean> {
@@ -126,6 +126,16 @@ export class ConnectionModeService {
       return false;
     }
   }
+
+  async resetSetupCompletion(): Promise<void> {
+    try {
+      await invoke('reset_setup_completion');
+      console.log('Setup completion flag reset successfully');
+    } catch (error) {
+      console.error('Failed to reset setup completion:', error);
+      throw error;
+    }
+  }
 }
 
 export const connectionModeService = ConnectionModeService.getInstance();

frontend/src/desktop/services/operationRouter.ts

@@ -22,14 +22,16 @@ export class OperationRouter {
     const mode = await connectionModeService.getCurrentMode();
 
     // Current implementation: simple mode-based routing
-    if (mode === 'offline') {
+    if (mode === 'saas') {
+      // SaaS mode: For now, all operations run locally
+      // Future enhancement: complex operations will be sent to SaaS server
       return 'local';
     }
 
-    // In server mode, currently all operations go to remote
+    // In self-hosted mode, currently all operations go to remote
     // Future enhancement: check if operation is "simple" and route to local if so
     // Example future logic:
-    // if (mode === 'server' && operation && this.isSimpleOperation(operation)) {
+    // if (mode === 'selfhosted' && operation && this.isSimpleOperation(operation)) {
     //   return 'local';
     // }
 
@@ -66,19 +68,19 @@ export class OperationRouter {
   }
 
   /**
-   * Checks if we're currently in remote mode
+   * Checks if we're currently in self-hosted mode
    */
-  async isRemoteMode(): Promise<boolean> {
+  async isSelfHostedMode(): Promise<boolean> {
     const mode = await connectionModeService.getCurrentMode();
-    return mode === 'server';
+    return mode === 'selfhosted';
   }
 
   /**
-   * Checks if we're currently in offline mode
+   * Checks if we're currently in SaaS mode
    */
-  async isOfflineMode(): Promise<boolean> {
+  async isSaaSMode(): Promise<boolean> {
     const mode = await connectionModeService.getCurrentMode();
-    return mode === 'offline';
+    return mode === 'saas';
   }
 
   // Future enhancement: operation classification

frontend/src/desktop/services/tauriBackendService.ts

@@ -64,7 +64,6 @@ export class TauriBackendService {
       return;
     }
 
-    console.log('[TauriBackendService] Initializing external backend monitoring');
     this.backendStarted = true; // Mark as active for health checks
     this.setStatus('starting');
     this.beginHealthMonitoring();
@@ -82,19 +81,17 @@ export class TauriBackendService {
     this.setStatus('starting');
 
     this.startPromise = invoke('start_backend', { backendUrl })
-      .then(async (result) => {
-        console.log('Backend started:', result);
+      .then(async () => {
         this.backendStarted = true;
         this.setStatus('starting');
 
         // Poll for the dynamically assigned port
         await this.waitForPort();
-
         this.beginHealthMonitoring();
       })
       .catch((error) => {
         this.setStatus('unhealthy');
-        console.error('Failed to start backend:', error);
+        console.error('[TauriBackendService] Failed to start backend:', error);
         throw error;
       })
       .finally(() => {
@@ -105,13 +102,11 @@ export class TauriBackendService {
   }
 
   private async waitForPort(maxAttempts = 30): Promise<void> {
-    console.log('[TauriBackendService] Waiting for backend port assignment...');
     for (let i = 0; i < maxAttempts; i++) {
       try {
         const port = await invoke<number | null>('get_backend_port');
         if (port) {
           this.backendPort = port;
-          console.log(`[TauriBackendService] Backend port detected: ${port}`);
           return;
         }
       } catch (error) {
@@ -138,11 +133,11 @@ export class TauriBackendService {
   async checkBackendHealth(): Promise<boolean> {
     const mode = await connectionModeService.getCurrentMode();
 
-    // For remote server mode, check the configured server
-    if (mode !== 'offline') {
+    // For self-hosted mode, check the configured remote server
+    if (mode === 'selfhosted') {
       const serverConfig = await connectionModeService.getServerConfig();
       if (!serverConfig) {
-        console.error('[TauriBackendService] Server mode but no server URL configured');
+        console.error('[TauriBackendService] Self-hosted mode but no server URL configured');
         this.setStatus('unhealthy');
         return false;
       }
@@ -161,21 +156,20 @@ export class TauriBackendService {
       } catch (error) {
         const errorStr = String(error);
         if (!errorStr.includes('connection refused') && !errorStr.includes('No connection could be made')) {
-          console.error('[TauriBackendService] Server health check failed:', error);
+          console.error('[TauriBackendService] Self-hosted server health check failed:', error);
         }
         this.setStatus('unhealthy');
         return false;
       }
     }
 
-    // For offline mode, check the bundled backend via Rust
+    // For SaaS mode, check the bundled local backend via Rust
     if (!this.backendStarted) {
       this.setStatus('stopped');
       return false;
     }
 
     if (!this.backendPort) {
-      console.debug('[TauriBackendService] Backend port not available yet');
       return false;
     }
 
@@ -197,7 +191,6 @@ export class TauriBackendService {
     for (let i = 0; i < maxAttempts; i++) {
       const isHealthy = await this.checkBackendHealth();
       if (isHealthy) {
-        console.log('Backend is healthy');
         return;
       }
       await new Promise(resolve => setTimeout(resolve, 1000));
@@ -210,7 +203,6 @@ export class TauriBackendService {
    * Reset backend state (used when switching from external to local backend)
    */
   reset(): void {
-    console.log('[TauriBackendService] Resetting backend state');
     this.backendStarted = false;
     this.backendPort = null;
     this.setStatus('stopped');

frontend/src/proprietary/auth/springAuthClient.test.ts

@@ -0,0 +1,354 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+import { springAuth } from '@app/auth/springAuthClient';
+import apiClient from '@app/services/apiClient';
+import { AxiosError } from 'axios';
+
+// Mock apiClient
+vi.mock('@app/services/apiClient');
+
+describe('SpringAuthClient', () => {
+  beforeEach(() => {
+    // Clear localStorage before each test
+    localStorage.clear();
+    // Clear all mocks
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('getSession', () => {
+    it('should return null session when no JWT in localStorage', async () => {
+      const result = await springAuth.getSession();
+
+      expect(result.data.session).toBeNull();
+      expect(result.error).toBeNull();
+      expect(apiClient.get).not.toHaveBeenCalled();
+    });
+
+    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',
+      };
+
+      localStorage.setItem('stirling_jwt', mockToken);
+
+      vi.mocked(apiClient.get).mockResolvedValueOnce({
+        status: 200,
+        data: { user: mockUser },
+      } as any);
+
+      const result = await springAuth.getSession();
+
+      expect(apiClient.get).toHaveBeenCalledWith('/api/v1/auth/me', {
+        headers: { Authorization: `Bearer ${mockToken}` },
+        suppressErrorToast: true,
+      });
+      expect(result.data.session).toBeTruthy();
+      expect(result.data.session?.user).toEqual(mockUser);
+      expect(result.data.session?.access_token).toBe(mockToken);
+      expect(result.error).toBeNull();
+    });
+
+    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 any,
+        }
+      );
+
+      vi.mocked(apiClient.get).mockRejectedValueOnce(mockError);
+
+      const result = await springAuth.getSession();
+
+      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);
+
+      const mockError = new AxiosError(
+        'Forbidden',
+        'ERR_BAD_REQUEST',
+        undefined,
+        undefined,
+        {
+          status: 403,
+          statusText: 'Forbidden',
+          data: {},
+          headers: {},
+          config: {} as any,
+        }
+      );
+
+      vi.mocked(apiClient.get).mockRejectedValueOnce(mockError);
+
+      const result = await springAuth.getSession();
+
+      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 () => {
+      const credentials = {
+        email: 'test@example.com',
+        password: 'password123',
+      };
+
+      const mockToken = 'new-jwt-token';
+      const mockUser = {
+        id: '123',
+        email: credentials.email,
+        username: credentials.email,
+        role: 'USER',
+      };
+
+      vi.mocked(apiClient.post).mockResolvedValueOnce({
+        status: 200,
+        data: {
+          user: mockUser,
+          session: {
+            access_token: mockToken,
+            expires_in: 3600,
+          },
+        },
+      } as any);
+
+      // Spy on window.dispatchEvent
+      const dispatchEventSpy = vi.spyOn(window, 'dispatchEvent');
+
+      const result = await springAuth.signInWithPassword(credentials);
+
+      expect(apiClient.post).toHaveBeenCalledWith(
+        '/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' })
+      );
+      expect(result.user).toEqual(mockUser);
+      expect(result.session?.access_token).toBe(mockToken);
+      expect(result.error).toBeNull();
+    });
+
+    it('should return error on failed login', async () => {
+      const credentials = {
+        email: 'wrong@example.com',
+        password: 'wrongpassword',
+      };
+
+      const errorMessage = 'Invalid credentials';
+      const mockError = Object.assign(new Error(errorMessage), {
+        isAxiosError: true,
+        response: {
+          status: 401,
+          data: { message: errorMessage },
+        },
+      });
+
+      vi.mocked(apiClient.post).mockRejectedValueOnce(mockError);
+
+      const result = await springAuth.signInWithPassword(credentials);
+
+      expect(result.user).toBeNull();
+      expect(result.session).toBeNull();
+      expect(result.error).toBeTruthy();
+      expect(result.error?.message).toBe(errorMessage);
+    });
+  });
+
+  describe('signUp', () => {
+    it('should successfully register new user', async () => {
+      const credentials = {
+        email: 'newuser@example.com',
+        password: 'newpassword123',
+      };
+
+      const mockUser = {
+        id: '456',
+        email: credentials.email,
+        username: credentials.email,
+        role: 'USER',
+      };
+
+      vi.mocked(apiClient.post).mockResolvedValueOnce({
+        status: 200,
+        data: { user: mockUser },
+      } as any);
+
+      const result = await springAuth.signUp(credentials);
+
+      expect(apiClient.post).toHaveBeenCalledWith(
+        '/api/v1/user/register',
+        {
+          username: credentials.email,
+          password: credentials.password,
+        },
+        { 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 () => {
+      const credentials = {
+        email: 'existing@example.com',
+        password: 'password123',
+      };
+
+      const errorMessage = 'User already exists';
+      const mockError = Object.assign(new Error(errorMessage), {
+        isAxiosError: true,
+        response: {
+          status: 409,
+          data: { message: errorMessage },
+        },
+      });
+
+      vi.mocked(apiClient.post).mockRejectedValueOnce(mockError);
+
+      const result = await springAuth.signUp(credentials);
+
+      expect(result.user).toBeNull();
+      expect(result.session).toBeNull();
+      expect(result.error).toBeTruthy();
+      expect(result.error?.message).toBe(errorMessage);
+    });
+  });
+
+  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,
+        data: {},
+      } as any);
+
+      const result = await springAuth.signOut();
+
+      expect(apiClient.post).toHaveBeenCalledWith(
+        '/api/v1/auth/logout',
+        null,
+        expect.objectContaining({ withCredentials: true })
+      );
+      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);
+
+      vi.mocked(apiClient.post).mockRejectedValueOnce({
+        isAxiosError: true,
+        response: { status: 500 },
+        message: 'Server error',
+      });
+
+      const result = await springAuth.signOut();
+
+      expect(localStorage.getItem('stirling_jwt')).toBeNull();
+      expect(result.error).toBeTruthy();
+    });
+  });
+
+  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',
+      };
+
+      vi.mocked(apiClient.post).mockResolvedValueOnce({
+        status: 200,
+        data: {
+          user: mockUser,
+          session: {
+            access_token: newToken,
+            expires_in: 3600,
+          },
+        },
+      } as any);
+
+      const dispatchEventSpy = vi.spyOn(window, 'dispatchEvent');
+
+      const result = await springAuth.refreshSession();
+
+      expect(localStorage.getItem('stirling_jwt')).toBe(newToken);
+      expect(dispatchEventSpy).toHaveBeenCalledWith(
+        expect.objectContaining({ type: 'jwt-available' })
+      );
+      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');
+
+      vi.mocked(apiClient.post).mockRejectedValueOnce({
+        isAxiosError: true,
+        response: { status: 401 },
+        message: 'Token expired',
+      });
+
+      const result = await springAuth.refreshSession();
+
+      expect(localStorage.getItem('stirling_jwt')).toBeNull();
+      expect(result.data.session).toBeNull();
+      expect(result.error).toBeTruthy();
+    });
+  });
+
+  describe('signInWithOAuth', () => {
+    it('should redirect to OAuth provider', async () => {
+      const mockAssign = vi.fn();
+      Object.defineProperty(window, 'location', {
+        value: { assign: mockAssign },
+        writable: true,
+      });
+
+      const result = await springAuth.signInWithOAuth({
+        provider: 'github',
+        options: { redirectTo: '/auth/callback' },
+      });
+
+      expect(mockAssign).toHaveBeenCalledWith('/oauth2/authorization/github');
+      expect(result.error).toBeNull();
+    });
+  });
+});

frontend/src/proprietary/auth/springAuthClient.ts

@@ -134,6 +134,7 @@ class SpringAuthClient {
         headers: {
           'Authorization': `Bearer ${token}`,
         },
+        suppressErrorToast: true, // Suppress global error handler (we handle errors locally)
       });
 
       // console.debug('[SpringAuth] /me response status:', response.status);
@@ -314,6 +315,7 @@ class SpringAuthClient {
           'X-XSRF-TOKEN': this.getCsrfToken() || '',
         },
         withCredentials: true,
+        suppressErrorToast: true, // Suppress global error handler (we handle errors locally)
       });
 
       const data = response.data;

frontend/src/proprietary/data/useProprietaryToolRegistry.tsx

@@ -29,7 +29,7 @@ export function useProprietaryToolRegistry(): ProprietaryToolRegistry {
       ),
       categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
       subcategoryId: SubcategoryId.GENERAL,
-      workbench: "custom:pdfTextEditor",
+      maxFiles: 1,
       endpoints: ["text-editor-pdf"],
       synonyms: getSynonyms(t, "pdfTextEditor"),
       supportsAutomate: false,

frontend/src/proprietary/routes/AuthCallback.test.tsx

@@ -0,0 +1,177 @@
+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', () => ({
+  springAuth: {
+    getSession: vi.fn(),
+  },
+}));
+
+// Mock useNavigate
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+describe('AuthCallback', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.clearAllMocks();
+    // Reset window.location.hash
+    window.location.hash = '';
+  });
+
+  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',
+    };
+
+    // Set URL hash with access token
+    window.location.hash = `#access_token=${mockToken}`;
+
+    // Mock successful session validation
+    vi.mocked(springAuth.getSession).mockResolvedValueOnce({
+      data: {
+        session: {
+          user: mockUser,
+          access_token: mockToken,
+          expires_in: 3600,
+          expires_at: Date.now() + 3600000,
+        },
+      },
+      error: null,
+    });
+
+    const dispatchEventSpy = vi.spyOn(window, 'dispatchEvent');
+
+    render(
+      <BrowserRouter>
+        <AuthCallback />
+      </BrowserRouter>
+    );
+
+    await waitFor(() => {
+      // Verify JWT was stored
+      expect(localStorage.getItem('stirling_jwt')).toBe(mockToken);
+
+      // Verify jwt-available event was dispatched
+      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 });
+    });
+  });
+
+  it('should redirect to login when no access token in hash', async () => {
+    // No hash or empty hash
+    window.location.hash = '';
+
+    render(
+      <BrowserRouter>
+        <AuthCallback />
+      </BrowserRouter>
+    );
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/login', {
+        replace: true,
+        state: { error: 'OAuth login failed - no token received.' },
+      });
+      expect(localStorage.getItem('stirling_jwt')).toBeNull();
+    });
+  });
+
+  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' },
+    });
+
+    render(
+      <BrowserRouter>
+        <AuthCallback />
+      </BrowserRouter>
+    );
+
+    await waitFor(() => {
+      // JWT should be stored initially
+      expect(localStorage.getItem('stirling_jwt')).toBeNull(); // Cleared after validation failure
+
+      // Verify redirect to login
+      expect(mockNavigate).toHaveBeenCalledWith('/login', {
+        replace: true,
+        state: { error: 'OAuth login failed - invalid 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')
+    );
+
+    render(
+      <BrowserRouter>
+        <AuthCallback />
+      </BrowserRouter>
+    );
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/login', {
+        replace: true,
+        state: { error: 'OAuth login failed. Please try again.' },
+      });
+    });
+  });
+
+  it('should display loading state while processing', () => {
+    window.location.hash = '#access_token=processing-token';
+
+    vi.mocked(springAuth.getSession).mockImplementationOnce(
+      () =>
+        new Promise((resolve) =>
+          setTimeout(
+            () =>
+              resolve({
+                data: { session: null },
+                error: { message: 'Token expired' },
+              }),
+            100
+          )
+        )
+    );
+
+    const { getByText } = render(
+      <BrowserRouter>
+        <AuthCallback />
+      </BrowserRouter>
+    );
+
+    expect(getByText('Completing authentication...')).toBeInTheDocument();
+  });
+});

frontend/src/proprietary/routes/AuthCallback.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useAuth } from '@app/auth/UseSession';
+import { springAuth } from '@app/auth/springAuthClient';
 
 /**
  * OAuth Callback Handler
@@ -11,7 +11,6 @@ import { useAuth } from '@app/auth/UseSession';
  */
 export default function AuthCallback() {
   const navigate = useNavigate();
-  const { refreshSession } = useAuth();
 
   useEffect(() => {
     const handleCallback = async () => {
@@ -37,12 +36,23 @@ export default function AuthCallback() {
         console.log('[AuthCallback] JWT stored in localStorage');
 
         // Dispatch custom event for other components to react to JWT availability
-        window.dispatchEvent(new CustomEvent('jwt-available'))
+        window.dispatchEvent(new CustomEvent('jwt-available'));
 
-        // Refresh session to load user info into state
-        await refreshSession();
+        // Validate the token and load user info
+        // This calls /api/v1/auth/me with the JWT to get user details
+        const { data, error } = await springAuth.getSession();
 
-        console.log('[AuthCallback] Session refreshed, redirecting to home');
+        if (error || !data.session) {
+          console.error('[AuthCallback] Failed to validate token:', error);
+          localStorage.removeItem('stirling_jwt');
+          navigate('/login', {
+            replace: true,
+            state: { error: 'OAuth login failed - invalid token.' }
+          });
+          return;
+        }
+
+        console.log('[AuthCallback] Token validated, redirecting to home');
 
         // Clear the hash from URL and redirect to home page
         navigate('/', { replace: true });
@@ -56,7 +66,7 @@ export default function AuthCallback() {
     };
 
     handleCallback();
-  }, [navigate, refreshSession]);
+  }, [navigate]);
 
   return (
     <div style={{

frontend/src/proprietary/routes/Login.test.tsx

@@ -0,0 +1,473 @@
+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';
+
+// Mock i18n to return fallback text
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string | Record<string, unknown>) => {
+      if (typeof fallback === 'string') return fallback;
+      return key;
+    },
+  }),
+}));
+
+// Mock useAuth hook
+vi.mock('@app/auth/UseSession', () => ({
+  useAuth: vi.fn(),
+}));
+
+// Mock springAuth
+vi.mock('@app/auth/springAuthClient', () => ({
+  springAuth: {
+    signInWithPassword: vi.fn(),
+    signInWithOAuth: vi.fn(),
+  },
+}));
+
+// Mock useDocumentMeta
+vi.mock('@app/hooks/useDocumentMeta', () => ({
+  useDocumentMeta: vi.fn(),
+}));
+
+// Mock fetch for provider list
+global.fetch = vi.fn();
+
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+// Test wrapper with MantineProvider
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <MantineProvider>{children}</MantineProvider>
+);
+
+describe('Login', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Default auth state - not logged in
+    vi.mocked(useAuth).mockReturnValue({
+      session: null,
+      user: null,
+      loading: false,
+      error: null,
+      signOut: vi.fn(),
+      refreshSession: vi.fn(),
+    });
+
+    // Mock fetch for login UI data
+    vi.mocked(fetch).mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        enableLogin: true,
+        providerList: {},
+      }),
+    } as Response);
+  });
+
+  it('should render login form', async () => {
+    render(
+      <TestWrapper>
+        <BrowserRouter>
+          <Login />
+        </BrowserRouter>
+      </TestWrapper>
+    );
+
+    await waitFor(() => {
+      // Check for login form elements - use id since it's more reliable
+      const emailInput = document.getElementById('email');
+      expect(emailInput).toBeTruthy();
+    });
+  });
+
+  it('should redirect authenticated user to home', async () => {
+    const mockSession = {
+      user: {
+        id: '123',
+        email: 'test@example.com',
+        username: 'testuser',
+        role: 'USER',
+      },
+      access_token: 'mock-token',
+      expires_in: 3600,
+    };
+
+    vi.mocked(useAuth).mockReturnValue({
+      session: mockSession,
+      user: mockSession.user,
+      loading: false,
+      error: null,
+      signOut: vi.fn(),
+      refreshSession: vi.fn(),
+    });
+
+    render(
+      <TestWrapper>
+        <BrowserRouter>
+          <Login />
+        </BrowserRouter>
+      </TestWrapper>
+    );
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/', { replace: true });
+    });
+  });
+
+  it('should show loading state while auth is loading', () => {
+    vi.mocked(useAuth).mockReturnValue({
+      session: null,
+      user: null,
+      loading: true,
+      error: null,
+      signOut: vi.fn(),
+      refreshSession: vi.fn(),
+    });
+
+    render(
+      <TestWrapper>
+        <BrowserRouter>
+          <Login />
+        </BrowserRouter>
+      </TestWrapper>
+    );
+
+    // Component shouldn't redirect or show form while loading
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  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',
+    };
+
+    const mockSession = {
+      user: mockUser,
+      access_token: 'new-token',
+      expires_in: 3600,
+    };
+
+    vi.mocked(springAuth.signInWithPassword).mockResolvedValueOnce({
+      user: mockUser,
+      session: mockSession,
+      error: null,
+    });
+
+    render(
+      <TestWrapper>
+        <BrowserRouter>
+          <Login />
+        </BrowserRouter>
+      </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 });
+
+    // Fill in form using getElementById
+    const emailInput = document.getElementById('email') as HTMLInputElement;
+    const passwordInput = document.getElementById('password') as HTMLInputElement;
+
+    if (!emailInput || !passwordInput) {
+      throw new Error('Form inputs not found');
+    }
+
+    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 });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(springAuth.signInWithPassword).toHaveBeenCalledWith({
+        email: 'test@example.com',
+        password: 'password123',
+      });
+    });
+  });
+
+  it('should show error on failed login', async () => {
+    const user = userEvent.setup();
+    const errorMessage = 'Invalid credentials';
+
+    vi.mocked(springAuth.signInWithPassword).mockResolvedValueOnce({
+      user: null,
+      session: null,
+      error: { message: errorMessage },
+    });
+
+    render(
+      <TestWrapper>
+        <BrowserRouter>
+          <Login />
+        </BrowserRouter>
+      </TestWrapper>
+    );
+
+    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;
+
+    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 });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    });
+  });
+
+  it('should validate empty email and password', async () => {
+    render(
+      <TestWrapper>
+        <BrowserRouter>
+          <Login />
+        </BrowserRouter>
+      </TestWrapper>
+    );
+
+    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 });
+
+    // Button should be disabled when email/password are empty
+    expect(submitButton).toBeDisabled();
+
+    // Verify sign in was not called
+    expect(springAuth.signInWithPassword).not.toHaveBeenCalled();
+  });
+
+  it('should display session expired message from URL param', () => {
+    render(
+      <TestWrapper>
+        <MemoryRouter initialEntries={['/login?expired=true']}>
+          <Login />
+        </MemoryRouter>
+      </TestWrapper>
+    );
+
+    expect(screen.getByText(/session.*expired/i)).toBeInTheDocument();
+  });
+
+  it('should display account created success message', () => {
+    render(
+      <TestWrapper>
+        <MemoryRouter initialEntries={['/login?messageType=accountCreated']}>
+          <Login />
+        </MemoryRouter>
+      </TestWrapper>
+    );
+
+    expect(screen.getByText(/account created/i)).toBeInTheDocument();
+  });
+
+  it('should prefill email from query param', () => {
+    const email = 'prefilled@example.com';
+
+    render(
+      <TestWrapper>
+        <MemoryRouter initialEntries={[`/login?email=${email}`]}>
+          <Login />
+        </MemoryRouter>
+      </TestWrapper>
+    );
+
+    waitFor(() => {
+      const emailInput = document.getElementById('email') as HTMLInputElement;
+      expect(emailInput.value).toBe(email);
+    });
+  });
+
+  it('should redirect to home when login disabled', async () => {
+    vi.mocked(fetch).mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        enableLogin: false,
+        providerList: {},
+      }),
+    } as Response);
+
+    render(
+      <TestWrapper>
+        <BrowserRouter>
+          <Login />
+        </BrowserRouter>
+      </TestWrapper>
+    );
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/');
+    });
+  });
+
+  it('should handle OAuth provider click', async () => {
+    vi.mocked(fetch).mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        enableLogin: true,
+        providerList: {
+          '/oauth2/authorization/github': 'GitHub',
+        },
+      }),
+    } as Response);
+
+    vi.mocked(springAuth.signInWithOAuth).mockResolvedValueOnce({
+      error: null,
+    });
+
+    render(
+      <TestWrapper>
+        <BrowserRouter>
+          <Login />
+        </BrowserRouter>
+      </TestWrapper>
+    );
+
+    await waitFor(() => {
+      const githubButton = screen.queryByText(/github/i);
+      if (githubButton) {
+        expect(githubButton).toBeInTheDocument();
+      }
+    });
+
+    // Since OAuth buttons might be dynamically rendered based on config,
+    // we just verify the mock is set up correctly
+    expect(springAuth.signInWithOAuth).toBeDefined();
+  });
+
+  it('should show email form by default when no SSO providers', async () => {
+    vi.mocked(fetch).mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        enableLogin: true,
+        providerList: {}, // No providers
+      }),
+    } as Response);
+
+    render(
+      <TestWrapper>
+        <BrowserRouter>
+          <Login />
+        </BrowserRouter>
+      </TestWrapper>
+    );
+
+    await waitFor(() => {
+      expect(document.getElementById('email')).toBeInTheDocument();
+      expect(document.getElementById('password')).toBeInTheDocument();
+    });
+  });
+
+  it('should disable submit button while signing in', async () => {
+    const user = userEvent.setup();
+
+    vi.mocked(springAuth.signInWithPassword).mockImplementationOnce(
+      () =>
+        new Promise((resolve) =>
+          setTimeout(
+            () =>
+              resolve({
+                user: null,
+                session: null,
+                error: { message: 'Error' },
+              }),
+            100
+          )
+        )
+    );
+
+    render(
+      <TestWrapper>
+        <BrowserRouter>
+          <Login />
+        </BrowserRouter>
+      </TestWrapper>
+    );
+
+    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;
+
+    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 });
+    await user.click(submitButton);
+
+    // Button should be disabled while signing in
+    expect(submitButton).toBeDisabled();
+
+    // Wait for completion
+    await waitFor(() => {
+      expect(submitButton).not.toBeDisabled();
+    });
+  });
+});

frontend/src/proprietary/routes/Login.tsx

@@ -30,6 +30,14 @@ export default function Login() {
   const [hasSSOProviders, setHasSSOProviders] = useState(false);
   const [_enableLogin, setEnableLogin] = useState<boolean | null>(null);
 
+  // Redirect immediately if user has valid session (JWT already validated by AuthProvider)
+  useEffect(() => {
+    if (!loading && session) {
+      console.debug('[Login] User already authenticated, redirecting to home');
+      navigate('/', { replace: true });
+    }
+  }, [session, loading, navigate]);
+
   // Fetch enabled SSO providers and login config from backend
   useEffect(() => {
     const fetchProviders = async () => {

frontend/src/proprietary/routes/Signup.tsx

@@ -1,7 +1,8 @@
-import { useState } from 'react';
+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';
@@ -17,6 +18,7 @@ import { useAuthService } from '@app/routes/signup/AuthService';
 export default function Signup() {
   const navigate = useNavigate();
   const { t } = useTranslation();
+  const { session, loading } = useAuth();
   const [isSigningUp, setIsSigningUp] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [email, setEmail] = useState('');
@@ -24,6 +26,14 @@ export default function Signup() {
   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 });
+    }
+  }, [session, loading, navigate]);
+
   const baseUrl = window.location.origin + BASE_PATH;
 
   // Set document meta

frontend/src/proprietary/tools/pdfTextEditor/PdfTextEditor.tsx

@@ -34,7 +34,7 @@ import {
 import PdfTextEditorView from '@app/components/tools/pdfTextEditor/PdfTextEditorView';
 import type { PDFDocumentProxy } from 'pdfjs-dist';
 
-const VIEW_ID = 'pdfTextEditorView';
+const WORKBENCH_VIEW_ID = 'pdfTextEditorWorkbench';
 const WORKBENCH_ID = 'custom:pdfTextEditor' as const;
 
 const sanitizeBaseName = (name?: string | null): string => {
@@ -1347,22 +1347,41 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
     void handleLoadFile(file);
   }, [selectedFiles, navigationState.selectedTool, handleLoadFile]);
 
+  // Auto-navigate to workbench when tool is selected
+  const hasAutoOpenedWorkbenchRef = useRef(false);
+  useEffect(() => {
+    if (navigationState.selectedTool !== 'pdfTextEditor') {
+      hasAutoOpenedWorkbenchRef.current = false;
+      return;
+    }
+
+    if (hasAutoOpenedWorkbenchRef.current) {
+      return;
+    }
+
+    hasAutoOpenedWorkbenchRef.current = true;
+    // Use timeout to ensure registration effect has run first
+    setTimeout(() => {
+      navigationActions.setWorkbench(WORKBENCH_ID);
+    }, 0);
+  }, [navigationActions, navigationState.selectedTool]);
+
   useEffect(() => {
     registerCustomWorkbenchView({
-      id: VIEW_ID,
+      id: WORKBENCH_VIEW_ID,
       workbenchId: WORKBENCH_ID,
       label: viewLabel,
       icon: <DescriptionIcon fontSize="small" />,
       component: PdfTextEditorView,
     });
     setLeftPanelView('hidden');
-    setCustomWorkbenchViewData(VIEW_ID, latestViewDataRef.current);
+    setCustomWorkbenchViewData(WORKBENCH_VIEW_ID, latestViewDataRef.current);
 
     return () => {
       // Clear backend cache if we were using lazy loading
       clearCachedJob(cachedJobIdRef.current);
-      clearCustomWorkbenchViewData(VIEW_ID);
-      unregisterCustomWorkbenchView(VIEW_ID);
+      clearCustomWorkbenchViewData(WORKBENCH_VIEW_ID);
+      unregisterCustomWorkbenchView(WORKBENCH_VIEW_ID);
       setLeftPanelView('toolPicker');
     };
   }, [
@@ -1407,7 +1426,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
       return;
     }
     lastSentViewDataRef.current = viewData;
-    setCustomWorkbenchViewData(VIEW_ID, viewData);
+    setCustomWorkbenchViewData(WORKBENCH_VIEW_ID, viewData);
   }, [setCustomWorkbenchViewData, viewData]);
 
   // All editing happens in the custom workbench view.