feat(settings): per-option save, live worker sync, audit log, and rollback

A) Per-option Save Button
- Add per-setting Save button in settings.html (visible only when value changed)
- Button calls POST /api/settings/{key} directly; existing bulk Save retained
- Add Audit Log link in settings page header

B) Immediate Worker Sync
- New app/utils/settings_sync.py with notify_settings_updated() (Redis version key)
  and register_settings_reload_signal() (Celery task_prerun handler)
- Register signal in celery_worker.py at startup
- All API write paths call notify_settings_updated() after successful saves

C) Audit Log
- Add SettingsAuditLog model (key, old_value, new_value, changed_by, changed_at, action)
- save_setting_to_db / delete_setting_from_db accept changed_by and write audit entries
- New get_audit_log() service function (masks sensitive values)
- New GET /api/settings/audit-log endpoint (admin-only)
- New GET /admin/settings/audit-log view + audit_log.html template
- Visible to all admins (per clarified requirement)

D) Config Rollback / History
- New get_setting_history() and rollback_setting() service functions
- New GET /api/settings/{key}/history endpoint
- New POST /api/settings/{key}/rollback/{history_id} endpoint
- Rollback buttons in audit_log.html with confirmation dialog
- Tests: 25 new tests covering audit log, rollback, worker sync helpers, and API endpoints

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>

frontend/templates/settings.html

@@ -13,10 +13,18 @@
 <div class="container mx-auto px-4 py-8" x-data="settingsApp()">
   <!-- Header -->
   <div class="mb-8">
-    <h1 class="text-3xl font-bold mb-2">Application Settings</h1>
-    <p class="text-gray-600">
-      This is a convenience feature to view and edit application settings through the web interface.
-    </p>
+    <div class="flex justify-between items-start">
+      <div>
+        <h1 class="text-3xl font-bold mb-2">Application Settings</h1>
+        <p class="text-gray-600">
+          This is a convenience feature to view and edit application settings through the web interface.
+        </p>
+      </div>
+      <a href="/admin/settings/audit-log"
+         class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+        <i class="fas fa-history mr-2"></i> Audit Log
+      </a>
+    </div>
     <div class="bg-blue-50 border-l-4 border-blue-500 text-blue-700 p-4 my-4" role="alert">
       <p class="font-bold">📋 Settings Precedence Order:</p>
       <ul class="list-disc list-inside ml-4 mt-2">
@@ -150,6 +158,22 @@
               </div>
               {% endif %}
             </div>
+
+            <!-- Per-setting Save button (visible only when value has changed) -->
+            <div class="ml-4 flex-shrink-0 flex flex-col items-end gap-1 pt-1">
+              <button
+                type="button"
+                x-show="formData['{{ setting.key }}'] !== originalData['{{ setting.key }}']"
+                x-transition
+                @click="saveSetting('{{ setting.key }}')"
+                :disabled="savingKey === '{{ setting.key }}'"
+                class="px-3 py-1 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
+                title="Save this setting"
+              >
+                <span x-show="savingKey !== '{{ setting.key }}'"><i class="fas fa-save mr-1"></i>Save</span>
+                <span x-show="savingKey === '{{ setting.key }}'">Saving…</span>
+              </button>
+            </div>
           </div>
         </div>
         {% endfor %}
@@ -185,6 +209,7 @@ function settingsApp() {
     originalData: {},
     showPassword: {},
     saving: false,
+    savingKey: null,
     showAlert: false,
     alertType: 'success',
     alertTitle: '',
@@ -230,6 +255,38 @@ function settingsApp() {
       this.showAlert = false;
     },
 
+    async saveSetting(key) {
+      this.savingKey = key;
+      this.hideAlert();
+
+      try {
+        const value = this.formData[key];
+        const response = await fetch(`/api/settings/${key}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ key, value }),
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result.success) {
+          this.originalData[key] = value;
+          let message = `Setting '${key}' saved successfully.`;
+          if (result.restart_required) {
+            message += ' Please restart the application for this change to take effect.';
+          }
+          this.showSuccessAlert('Setting Saved', message);
+        } else {
+          this.showErrorAlert('Save Failed', result.detail || 'Unknown error');
+        }
+      } catch (error) {
+        console.error('Error saving setting:', error);
+        this.showErrorAlert('Error', 'Failed to save setting. Please try again.');
+      } finally {
+        this.savingKey = null;
+      }
+    },
+
     async saveSettings() {
       this.saving = true;
       this.hideAlert();