feat: Add auto-save, session persistence, and UI improvements

- Add auto-save for settings with 1-second debounce on all form changes
- Persist file queue to localStorage and restore on page reload with server verification
- Restore active translation state when page reconnects to running job
- Move Settings and Activity Log into collapsible panels to declutter UI
- Auto-open Settings panel when LLM connection fails
- Disable translate button until LLM is connected
- Remove manual "Save Settings" button (replaced by auto-save)
- Clean up verbose console.log statements across codebase

Author: hydropix

src/api/blueprints/security_routes.py

@@ -193,6 +193,37 @@ def get_security_info():
             "upload_directory": str(secure_file_handler.upload_dir)
         })
 
+    @bp.route('/api/uploads/verify', methods=['POST'])
+    def verify_uploaded_files():
+        """Verify which uploaded files still exist on the server"""
+        try:
+            data = request.json
+            if not data or 'file_paths' not in data:
+                return jsonify({"error": "No file paths provided"}), 400
+
+            file_paths = data['file_paths']
+            if not isinstance(file_paths, list):
+                return jsonify({"error": "Invalid file paths list"}), 400
+
+            existing_files = []
+            missing_files = []
+
+            for file_path_str in file_paths:
+                file_path = Path(file_path_str)
+                if file_path.exists():
+                    existing_files.append(file_path_str)
+                else:
+                    missing_files.append(file_path_str)
+
+            return jsonify({
+                "existing": existing_files,
+                "missing": missing_files
+            })
+
+        except Exception as e:
+            current_app.logger.error(f"Error verifying uploaded files: {str(e)}")
+            return jsonify({"error": "Verification failed", "details": str(e)}), 500
+
     @bp.route('/api/thumbnails/<path:filename>', methods=['GET'])
     def serve_thumbnail(filename):
         """Serve EPUB cover thumbnail with security validation"""

src/web/static/js/core/api-client.js

@@ -237,6 +237,18 @@ export const ApiClient = {
         });
     },
 
+    /**
+     * Verify which uploaded files still exist on the server
+     * @param {string[]} filePaths - Array of file paths to verify
+     * @returns {Promise<Object>} Object with existing and missing file paths
+     */
+    async verifyUploadedFiles(filePaths) {
+        return await apiRequest('/api/uploads/verify', {
+            method: 'POST',
+            body: JSON.stringify({ file_paths: filePaths })
+        });
+    },
+
     // ========================================
     // Model Management
     // ========================================
@@ -436,7 +448,3 @@ export const ApiClient = {
     }
 };
 
-// Make API client available globally for debugging
-if (typeof window !== 'undefined') {
-    window.__API_CLIENT__ = ApiClient;
-}

src/web/static/js/core/settings-manager.js

@@ -18,6 +18,17 @@ const STORAGE_KEY = 'tbl_user_preferences';
  */
 let envModelApplied = false;
 
+/**
+ * Debounce timer for auto-save
+ */
+let autoSaveTimer = null;
+const AUTO_SAVE_DELAY = 1000; // 1 second debounce
+
+/**
+ * Flag to prevent auto-save during initial load
+ */
+let isInitializing = true;
+
 /**
  * Settings that are saved to localStorage (non-sensitive)
  */
@@ -44,10 +55,82 @@ const ENV_SETTINGS_MAP = {
 
 export const SettingsManager = {
     /**
-     * Initialize settings manager - load saved preferences
+     * Initialize settings manager - load saved preferences and setup auto-save
      */
     initialize() {
         this.loadLocalPreferences();
+        // Setup auto-save listeners after a short delay to avoid triggering during initial load
+        setTimeout(() => {
+            this._setupAutoSaveListeners();
+            isInitializing = false;
+        }, 500);
+    },
+
+    /**
+     * Setup event listeners for auto-save on all settings elements
+     * @private
+     */
+    _setupAutoSaveListeners() {
+        // Elements that trigger auto-save
+        const autoSaveElements = [
+            // Provider and model
+            { id: 'llmProvider', event: 'change' },
+            { id: 'model', event: 'change' },
+            // API endpoints
+            { id: 'apiEndpoint', event: 'change' },
+            { id: 'openaiEndpoint', event: 'change' },
+            // API keys (save to .env)
+            { id: 'geminiApiKey', event: 'change' },
+            { id: 'openaiApiKey', event: 'change' },
+            { id: 'openrouterApiKey', event: 'change' },
+            // Languages
+            { id: 'sourceLang', event: 'change' },
+            { id: 'targetLang', event: 'change' },
+            { id: 'customSourceLang', event: 'change' },
+            { id: 'customTargetLang', event: 'change' },
+            // Checkboxes
+            { id: 'ttsEnabled', event: 'change' },
+            { id: 'textCleanup', event: 'change' },
+            { id: 'refineTranslation', event: 'change' }
+        ];
+
+        autoSaveElements.forEach(({ id, event }) => {
+            const element = DomHelpers.getElement(id);
+            if (element) {
+                element.addEventListener(event, () => this._triggerAutoSave());
+            }
+        });
+
+    },
+
+    /**
+     * Trigger auto-save with debounce
+     * @private
+     */
+    _triggerAutoSave() {
+        if (isInitializing) return;
+
+        // Clear existing timer
+        if (autoSaveTimer) {
+            clearTimeout(autoSaveTimer);
+        }
+
+        // Set new timer
+        autoSaveTimer = setTimeout(async () => {
+            await this._performAutoSave();
+        }, AUTO_SAVE_DELAY);
+    },
+
+    /**
+     * Perform the actual auto-save
+     * @private
+     */
+    async _performAutoSave() {
+        try {
+            await this.saveAllSettings(true);
+        } catch {
+            // Auto-save failed silently
+        }
     },
 
     /**
@@ -58,8 +141,7 @@ export const SettingsManager = {
         try {
             const stored = localStorage.getItem(STORAGE_KEY);
             return stored ? JSON.parse(stored) : {};
-        } catch (e) {
-            console.error('Error reading preferences:', e);
+        } catch {
             return {};
         }
     },
@@ -73,8 +155,8 @@ export const SettingsManager = {
             const current = this.getLocalPreferences();
             const updated = { ...current, ...prefs };
             localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
-        } catch (e) {
-            console.error('Error saving preferences:', e);
+        } catch {
+            // Preference save failed silently
         }
     },
 
@@ -253,9 +335,7 @@ export const SettingsManager = {
                 return true;
             }
             return false;
-        } catch (e) {
-            console.error('Error saving API key:', e);
-            MessageLogger.addLog(`Failed to save API key: ${e.message}`, 'error');
+        } catch {
             return false;
         }
     },
@@ -311,7 +391,6 @@ export const SettingsManager = {
                     this.resetEnvModelApplied();
                     return { success: true, savedToEnv: result.saved_keys };
                 } catch (e) {
-                    console.error('Error saving to .env:', e);
                     return { success: false, error: e.message };
                 }
             }
@@ -327,7 +406,6 @@ export const SettingsManager = {
     applyPendingModelSelection() {
         // Don't apply localStorage preference if .env model was already applied
         if (envModelApplied) {
-            console.log('⏭️ Skipping localStorage model - .env model already applied');
             delete window.__pendingModelSelection;
             return;
         }
@@ -341,7 +419,6 @@ export const SettingsManager = {
                     if (option.value === window.__pendingModelSelection) {
                         modelSelect.value = window.__pendingModelSelection;
                         found = true;
-                        console.log(`✅ Applied saved model preference: ${window.__pendingModelSelection}`);
                         break;
                     }
                 }
@@ -358,7 +435,6 @@ export const SettingsManager = {
      */
     markEnvModelApplied() {
         envModelApplied = true;
-        console.log('🔒 .env default model locked in');
     },
 
     /**
@@ -367,7 +443,6 @@ export const SettingsManager = {
      */
     resetEnvModelApplied() {
         envModelApplied = false;
-        console.log('🔓 .env model lock reset - user saved new settings');
     },
 
     /**

src/web/static/js/files/file-upload.js

@@ -9,6 +9,9 @@ import { StateManager } from '../core/state-manager.js';
 import { ApiClient } from '../core/api-client.js';
 import { MessageLogger } from '../ui/message-logger.js';
 import { DomHelpers } from '../ui/dom-helpers.js';
+import { StatusManager } from '../utils/status-manager.js';
+
+const FILE_QUEUE_STORAGE_KEY = 'tbl_file_queue';
 
 /**
  * Generate output filename based on pattern
@@ -58,7 +61,6 @@ function detectFileType(filename) {
 function setLanguageInSelect(selectId, languageValue) {
     const select = DomHelpers.getElement(selectId);
     if (!select) {
-        console.error(`Select element '${selectId}' not found`);
         return false;
     }
 
@@ -84,7 +86,6 @@ function setLanguageInSelect(selectId, languageValue) {
         return true;
     }
 
-    console.warn(`Language "${languageValue}" not found in select options`);
     return false;
 }
 
@@ -95,6 +96,78 @@ export const FileUpload = {
     initialize() {
         this.setupDragDrop();
         this.setupFileInput();
+        // Restore file queue from localStorage after a short delay
+        // to ensure WebSocket is connected and can verify files
+        setTimeout(() => this.restoreFileQueue(), 1000);
+    },
+
+    /**
+     * Save file queue to localStorage
+     * @private
+     */
+    _saveFileQueue() {
+        try {
+            const filesToProcess = StateManager.getState('files.toProcess') || [];
+            // Save only serializable data (exclude File objects)
+            const serializableFiles = filesToProcess.map(f => ({
+                name: f.name,
+                filePath: f.filePath,
+                fileType: f.fileType,
+                originalExtension: f.originalExtension,
+                status: f.status,
+                outputFilename: f.outputFilename,
+                size: f.size,
+                sourceLanguage: f.sourceLanguage,
+                targetLanguage: f.targetLanguage,
+                translationId: f.translationId,
+                detectedLanguage: f.detectedLanguage,
+                languageConfidence: f.languageConfidence,
+                thumbnail: f.thumbnail
+            }));
+            localStorage.setItem(FILE_QUEUE_STORAGE_KEY, JSON.stringify(serializableFiles));
+        } catch {
+            // Failed to save file queue
+        }
+    },
+
+    /**
+     * Restore file queue from localStorage and verify files exist
+     */
+    async restoreFileQueue() {
+        try {
+            const stored = localStorage.getItem(FILE_QUEUE_STORAGE_KEY);
+            if (!stored) return;
+
+            const savedFiles = JSON.parse(stored);
+            if (!Array.isArray(savedFiles) || savedFiles.length === 0) return;
+
+            // Get file paths to verify
+            const filePaths = savedFiles.map(f => f.filePath);
+
+            // Verify which files still exist on the server
+            const verification = await ApiClient.verifyUploadedFiles(filePaths);
+
+            // Filter to only existing files
+            const existingFilePaths = new Set(verification.existing || []);
+            const restoredFiles = savedFiles.filter(f => existingFilePaths.has(f.filePath));
+
+            if (restoredFiles.length > 0) {
+                // Restore files to state (reset status to Queued for non-completed files)
+                const filesToRestore = restoredFiles.map(f => ({
+                    ...f,
+                    status: f.status === 'Completed' ? 'Completed' : 'Queued'
+                }));
+
+                StateManager.setState('files.toProcess', filesToRestore);
+                this.notifyFileListChanged();
+            }
+
+            // Update localStorage with only existing files
+            this._saveFileQueue();
+
+        } catch {
+            // Failed to restore file queue
+        }
     },
 
     /**
@@ -127,7 +200,6 @@ export const FileUpload = {
     setupDragDrop() {
         const uploadArea = DomHelpers.getElement('fileUpload');
         if (!uploadArea) {
-            console.warn('File upload area not found');
             return;
         }
 
@@ -359,10 +431,10 @@ export const FileUpload = {
             // Show file info section
             DomHelpers.show(fileInfo);
 
-            // Enable translate button if not batch active
+            // Enable translate button if not batch active and LLM is connected
             const isBatchActive = StateManager.getState('translation.isBatchActive') || false;
             if (translateBtn) {
-                translateBtn.disabled = isBatchActive;
+                translateBtn.disabled = isBatchActive || !StatusManager.isConnected();
             }
         } else {
             // Hide file info section
@@ -382,6 +454,9 @@ export const FileUpload = {
         // Update display immediately
         this.updateFileDisplay();
 
+        // Persist to localStorage
+        this._saveFileQueue();
+
         // Emit event so other modules can react
         const event = new CustomEvent('fileListChanged');
         window.dispatchEvent(event);