citrascope 0.7.0__py3-none-any.whl → 0.9.0__py3-none-any.whl

citrascope/web/static/config.js

@@ -1,54 +1,55 @@
 // Configuration management for CitraScope
 
-import { getConfig, saveConfig, getConfigStatus, getHardwareAdapters, getAdapterSchema } from './api.js';
+import { getConfig, saveConfig, getConfigStatus, getHardwareAdapters } from './api.js';
+import { getFilterColor } from './filters.js';
+
+function updateStoreEnabledFilters(filters) {
+    if (typeof Alpine !== 'undefined' && Alpine.store) {
+        const enabled = Object.values(filters || {})
+            .filter(f => f.enabled !== false)
+            .map(f => ({ name: f.name, color: getFilterColor(f.name) }));
+        Alpine.store('citrascope').enabledFilters = enabled;
+    }
+}
 
 // API Host constants - must match backend constants in app.py
 const PROD_API_HOST = 'api.citra.space';
 const DEV_API_HOST = 'dev.api.citra.space';
 const DEFAULT_API_PORT = 443;
 
-let currentAdapterSchema = [];
-export let currentConfig = {};
-let savedAdapter = null; // Track the currently saved adapter
+/**
+ * Handle adapter selection change (called from Alpine store)
+ */
+async function handleAdapterChange(adapter) {
+    const store = Alpine.store('citrascope');
+    if (adapter) {
+        const allAdapterSettings = store.config.adapter_settings || {};
+        const newAdapterSettings = allAdapterSettings[adapter] || {};
+
+        console.log(`Switching to adapter: ${adapter}`);
+        console.log('All adapter settings:', allAdapterSettings);
+        console.log('Settings for this adapter:', newAdapterSettings);
+
+        await loadAdapterSchema(adapter, newAdapterSettings);
+        await loadFilterConfig();
+    } else {
+        store.adapterFields = [];
+        store.filterConfigVisible = false;
+    }
+}
 
 export async function initConfig() {
+    // Attach config methods to Alpine store
+    const store = Alpine.store('citrascope');
+    store.handleAdapterChange = handleAdapterChange;
+    store.reloadAdapterSchema = reloadAdapterSchema;
+
     // Populate hardware adapter dropdown
     await loadAdapterOptions();
 
-    // Hardware adapter selection change
-    const adapterSelect = document.getElementById('hardwareAdapterSelect');
-    if (adapterSelect) {
-        adapterSelect.addEventListener('change', async function(e) {
-            const adapter = e.target.value;
-            if (adapter) {
-                await loadAdapterSchema(adapter);
-                await loadFilterConfig();
-            } else {
-                document.getElementById('adapter-settings-container').innerHTML = '';
-                const filterSection = document.getElementById('filterConfigSection');
-                if (filterSection) filterSection.style.display = 'none';
-            }
-        });
-    }
-
-    // API endpoint selection change
-    const apiEndpointSelect = document.getElementById('apiEndpoint');
-    if (apiEndpointSelect) {
-        apiEndpointSelect.addEventListener('change', function(e) {
-            const customContainer = document.getElementById('customHostContainer');
-            if (e.target.value === 'custom') {
-                customContainer.style.display = 'block';
-            } else {
-                customContainer.style.display = 'none';
-            }
-        });
-    }
-
-    // Config form submission
-    const configForm = document.getElementById('configForm');
-    if (configForm) {
-        configForm.addEventListener('submit', saveConfiguration);
-    }
+    // Config form submission handled by Alpine @submit.prevent in template
+    // Expose saveConfiguration for template access
+    window.saveConfiguration = saveConfiguration;
 
     // Load initial config
     await loadConfiguration();
@@ -82,21 +83,13 @@ async function checkConfigStatus() {
 async function loadAdapterOptions() {
     try {
         const data = await getHardwareAdapters();
-        const adapterSelect = document.getElementById('hardwareAdapterSelect');
-
-        if (adapterSelect && data.adapters) {
-            // Clear existing options except the first placeholder
-            while (adapterSelect.options.length > 1) {
-                adapterSelect.remove(1);
-            }
 
-            // Add options from API
-            data.adapters.forEach(adapterName => {
-                const option = document.createElement('option');
-                option.value = adapterName;
-                option.textContent = data.descriptions[adapterName] || adapterName;
-                adapterSelect.appendChild(option);
-            });
+        if (data.adapters && typeof Alpine !== 'undefined' && Alpine.store) {
+            const options = data.adapters.map(adapterName => ({
+                value: adapterName,
+                label: data.descriptions[adapterName] || adapterName
+            }));
+            Alpine.store('citrascope').hardwareAdapters = options;
         }
     } catch (error) {
         console.error('Failed to load hardware adapters:', error);
@@ -109,74 +102,34 @@ async function loadAdapterOptions() {
 async function loadConfiguration() {
     try {
         const config = await getConfig();
-        currentConfig = config; // Save for reuse when saving
-        savedAdapter = config.hardware_adapter; // Track saved adapter
 
-        // Display config file path
-        const configPathElement = document.getElementById('configFilePath');
-        if (configPathElement && config.config_file_path) {
-            configPathElement.textContent = config.config_file_path;
-        }
+        // Sync to Alpine store - x-model handles form population
+        if (typeof Alpine !== 'undefined' && Alpine.store) {
+            const store = Alpine.store('citrascope');
 
-        // Display log file path
-        const logPathElement = document.getElementById('logFilePath');
-        if (logPathElement) {
-            if (config.log_file_path) {
-                logPathElement.textContent = config.log_file_path;
-            } else {
-                logPathElement.textContent = 'Disabled';
+            // Normalize boolean fields that may come as null from backend
+            if (config.file_logging_enabled === null || config.file_logging_enabled === undefined) {
+                config.file_logging_enabled = true; // Default to true
+            }
+            if (config.keep_images === null || config.keep_images === undefined) {
+                config.keep_images = false; // Default to false
+            }
+            if (config.scheduled_autofocus_enabled === null || config.scheduled_autofocus_enabled === undefined) {
+                config.scheduled_autofocus_enabled = false; // Default to false
             }
-        }
-
-        // Display images directory path
-        const imagesDirElement = document.getElementById('imagesDirPath');
-        if (imagesDirElement && config.images_dir_path) {
-            imagesDirElement.textContent = config.images_dir_path;
-        }
-
-        // API endpoint selector
-        const apiEndpointSelect = document.getElementById('apiEndpoint');
-        const customHostContainer = document.getElementById('customHostContainer');
-        const customHost = document.getElementById('customHost');
-        const customPort = document.getElementById('customPort');
-        const customUseSsl = document.getElementById('customUseSsl');
-
-        if (config.host === PROD_API_HOST) {
-            apiEndpointSelect.value = 'production';
-            customHostContainer.style.display = 'none';
-        } else if (config.host === DEV_API_HOST) {
-            apiEndpointSelect.value = 'development';
-            customHostContainer.style.display = 'none';
-        } else {
-            apiEndpointSelect.value = 'custom';
-            customHostContainer.style.display = 'block';
-            customHost.value = config.host || '';
-            customPort.value = config.port || DEFAULT_API_PORT;
-            customUseSsl.checked = config.use_ssl !== undefined ? config.use_ssl : true;
-        }
-
-        // Core fields
-        document.getElementById('personal_access_token').value = config.personal_access_token || '';
-        document.getElementById('telescopeId').value = config.telescope_id || '';
-        document.getElementById('hardwareAdapterSelect').value = config.hardware_adapter || '';
-        document.getElementById('logLevel').value = config.log_level || 'INFO';
-        document.getElementById('keep_images').checked = config.keep_images || false;
-        document.getElementById('file_logging_enabled').checked = config.file_logging_enabled !== undefined ? config.file_logging_enabled : true;
-
-        // Load autofocus settings (top-level)
-        const scheduledAutofocusEnabled = document.getElementById('scheduled_autofocus_enabled');
-        const autofocusInterval = document.getElementById('autofocus_interval_minutes');
-        if (scheduledAutofocusEnabled) {
-            scheduledAutofocusEnabled.checked = config.scheduled_autofocus_enabled || false;
-        }
-        if (autofocusInterval) {
-            autofocusInterval.value = config.autofocus_interval_minutes || 60;
-        }
 
-        // Load adapter-specific settings if adapter is selected
-        if (config.hardware_adapter) {
-            await loadAdapterSchema(config.hardware_adapter);
-            populateAdapterSettings(config.adapter_settings || {});
+            store.config = config;
+            store.savedAdapter = config.hardware_adapter; // Sync savedAdapter to store
+            store.apiEndpoint =
+                config.host === PROD_API_HOST ? 'production' :
+                config.host === DEV_API_HOST ? 'development' : 'custom';
+
+            // Load adapter-specific settings if adapter is selected
+            if (config.hardware_adapter) {
+                const allAdapterSettings = config.adapter_settings || {};
+                const currentAdapterSettings = allAdapterSettings[config.hardware_adapter] || {};
+                await loadAdapterSchema(config.hardware_adapter, currentAdapterSettings);
+            }
         }
     } catch (error) {
         console.error('Failed to load config:', error);
@@ -184,134 +137,53 @@ async function loadConfiguration() {
 }
 
 /**
- * Load adapter schema and render settings form
+ * Get default value for a field type
  */
-async function loadAdapterSchema(adapterName) {
-    try {
-        const data = await getAdapterSchema(adapterName);
-        currentAdapterSchema = data.schema || [];
-        renderAdapterSettings(currentAdapterSchema);
-    } catch (error) {
-        console.error('Failed to load adapter schema:', error);
-        showConfigError(`Failed to load settings for ${adapterName}`);
-    }
+function getDefaultForType(type) {
+    if (type === 'bool') return false;
+    if (type === 'int' || type === 'float') return 0;
+    return '';
 }
 
 /**
- * Render adapter-specific settings form
+ * Load adapter schema and merge with current values
  */
-function renderAdapterSettings(schema) {
-    const container = document.getElementById('adapter-settings-container');
-
-    if (!schema || schema.length === 0) {
-        container.innerHTML = '';
-        return;
-    }
-
-    let html = '<h5 class="mb-3">Adapter Settings</h5><div class="row g-3 mb-4">';
-
-    schema.forEach(field => {
-        // Skip readonly fields (handled elsewhere in UI)
-        if (field.readonly) {
-            return;
-        }
-
-        const isRequired = field.required ? '<span class="text-danger">*</span>' : '';
-        const placeholder = field.placeholder || '';
-        const description = field.description || '';
-        const displayName = field.friendly_name || field.name;
-
-        html += '<div class="col-12 col-md-6">';
-        html += `<label for="adapter_${field.name}" class="form-label">${displayName} ${isRequired}</label>`;
-
-        if (field.type === 'bool') {
-            html += `<div class="form-check mt-2">`;
-            html += `<input class="form-check-input adapter-setting" type="checkbox" id="adapter_${field.name}" data-field="${field.name}" data-type="${field.type}">`;
-            html += `<label class="form-check-label" for="adapter_${field.name}">${description}</label>`;
-            html += `</div>`;
-        } else if (field.options && field.options.length > 0) {
-            const displayName = field.friendly_name || field.name;
-            html += `<select id="adapter_${field.name}" class="form-select adapter-setting" data-field="${field.name}" data-type="${field.type}" ${field.required ? 'required' : ''}>`;
-            html += `<option value="">-- Select ${displayName} --</option>`;
-            field.options.forEach(opt => {
-                html += `<option value="${opt}">${opt}</option>`;
-            });
-            html += `</select>`;
-        } else if (field.type === 'int' || field.type === 'float') {
-            const min = field.min !== undefined ? `min="${field.min}"` : '';
-            const max = field.max !== undefined ? `max="${field.max}"` : '';
-            html += `<input type="number" id="adapter_${field.name}" class="form-control adapter-setting" `;
-            html += `data-field="${field.name}" data-type="${field.type}" `;
-            html += `placeholder="${placeholder}" ${min} ${max} ${field.required ? 'required' : ''}>`;
-        } else {
-            // Default to text input
-            const pattern = field.pattern ? `pattern="${field.pattern}"` : '';
-            html += `<input type="text" id="adapter_${field.name}" class="form-control adapter-setting" `;
-            html += `data-field="${field.name}" data-type="${field.type}" `;
-            html += `placeholder="${placeholder}" ${pattern} ${field.required ? 'required' : ''}>`;
-        }
-
-        if (description && field.type !== 'bool') {
-            html += `<small class="text-muted">${description}</small>`;
-        }
-        html += '</div>';
-    });
+async function loadAdapterSchema(adapterName, currentSettings = {}) {
+    try {
+        // Pass current adapter settings for dynamic schema generation
+        const settingsParam = Object.keys(currentSettings).length > 0
+            ? `?current_settings=${encodeURIComponent(JSON.stringify(currentSettings))}`
+            : '';
 
-    html += '</div>';
-    container.innerHTML = html;
-}
+        console.log(`Loading schema for ${adapterName} with settings:`, currentSettings);
 
-/**
- * Populate adapter settings with values
- */
-function populateAdapterSettings(adapterSettings) {
-    Object.entries(adapterSettings).forEach(([key, value]) => {
-        const input = document.getElementById(`adapter_${key}`);
-        if (input) {
-            if (input.type === 'checkbox') {
-                input.checked = value;
-            } else {
-                input.value = value;
-            }
-        }
-    });
-}
+        const response = await fetch(`/api/hardware-adapters/${adapterName}/schema${settingsParam}`);
+        const data = await response.json();
 
-/**
- * Collect adapter settings from form
- */
-function collectAdapterSettings() {
-    const settings = {};
-    const inputs = document.querySelectorAll('.adapter-setting');
+        console.log(`Schema API response:`, data);
 
-    inputs.forEach(input => {
-        const fieldName = input.dataset.field;
-        const fieldType = input.dataset.type;
-        let value;
+        const schema = data.schema || [];
 
-        if (input.type === 'checkbox') {
-            value = input.checked;
-        } else {
-            value = input.value;
-        }
+        // Merge schema with values into enriched field objects
+        // Use Alpine.reactive to ensure nested properties are reactive
+        const enrichedFields = schema
+            .filter(field => !field.readonly) // Skip readonly fields
+            .map(field => Alpine.reactive({
+                ...field,  // All schema properties (name, type, options, etc.)
+                value: currentSettings[field.name] ?? field.default ?? getDefaultForType(field.type)
+            }));
 
-        // Skip empty values for non-checkbox fields (will use backend defaults)
-        if (input.type !== 'checkbox' && (value === '' || value === null || value === undefined)) {
-            return;
-        }
+        console.log('Loaded adapter fields:', enrichedFields.map(f => `${f.name}=${f.value} (${f.type})`));
 
-        // Type conversion
-        if (fieldType === 'int') {
-            value = parseInt(value, 10);
-        } else if (fieldType === 'float') {
-            value = parseFloat(value);
+        // Update Alpine store with unified field objects
+        if (typeof Alpine !== 'undefined' && Alpine.store) {
+            const store = Alpine.store('citrascope');
+            store.adapterFields = enrichedFields;
         }
-        // bool type already handled above
-
-        settings[fieldName] = value;
-    });
-
-    return settings;
+    } catch (error) {
+        console.error('Failed to load adapter schema:', error);
+        showConfigError(`Failed to load settings for ${adapterName}`);
+    }
 }
 
 /**
@@ -320,68 +192,71 @@ function collectAdapterSettings() {
 async function saveConfiguration(event) {
     event.preventDefault();
 
-    const saveButton = document.getElementById('saveConfigButton');
-    const buttonText = document.getElementById('saveButtonText');
-    const spinner = document.getElementById('saveButtonSpinner');
-
-    // Show loading state
-    saveButton.disabled = true;
-    spinner.style.display = 'inline-block';
-    buttonText.textContent = 'Saving...';
-
     // Hide previous messages
     hideConfigMessages();
 
+    // Get config from store (x-model keeps it up to date)
+    const store = Alpine.store('citrascope');
+    store.isSavingConfig = true;
+    const formConfig = store.config;
+
     // Determine API host settings based on endpoint selection
-    const apiEndpoint = document.getElementById('apiEndpoint').value;
     let host, port, use_ssl;
-
-    if (apiEndpoint === 'production') {
+    if (store.apiEndpoint === 'production') {
         host = PROD_API_HOST;
         port = DEFAULT_API_PORT;
         use_ssl = true;
-    } else if (apiEndpoint === 'development') {
+    } else if (store.apiEndpoint === 'development') {
         host = DEV_API_HOST;
         port = DEFAULT_API_PORT;
         use_ssl = true;
-    } else { // custom
-        host = document.getElementById('customHost').value;
-        port = parseInt(document.getElementById('customPort').value, 10);
-        use_ssl = document.getElementById('customUseSsl').checked;
+    } else {
+        host = formConfig.host || '';
+        port = formConfig.port || DEFAULT_API_PORT;
+        use_ssl = formConfig.use_ssl !== undefined ? formConfig.use_ssl : true;
     }
 
+    // Convert adapterFields back to flat settings object (for current adapter only)
+    const adapterSettings = {};
+    (store.adapterFields || []).forEach(field => {
+        // Include all fields with defined values (including 0, false, empty string)
+        if (field.value !== undefined && field.value !== null) {
+            adapterSettings[field.name] = field.value;
+        }
+    });
+
     const config = {
-        personal_access_token: document.getElementById('personal_access_token').value,
-        telescope_id: document.getElementById('telescopeId').value,
-        hardware_adapter: document.getElementById('hardwareAdapterSelect').value,
-        adapter_settings: collectAdapterSettings(),
-        log_level: document.getElementById('logLevel').value,
-        keep_images: document.getElementById('keep_images').checked,
-        file_logging_enabled: document.getElementById('file_logging_enabled').checked,
-        // Autofocus settings (top-level)
-        scheduled_autofocus_enabled: document.getElementById('scheduled_autofocus_enabled')?.checked || false,
-        autofocus_interval_minutes: parseInt(document.getElementById('autofocus_interval_minutes')?.value || 60, 10),
-        // API settings from endpoint selector
-        host: host,
-        port: port,
-        use_ssl: use_ssl,
-        // Preserve other settings from loaded config
-        max_task_retries: currentConfig.max_task_retries || 3,
-        initial_retry_delay_seconds: currentConfig.initial_retry_delay_seconds || 30,
-        max_retry_delay_seconds: currentConfig.max_retry_delay_seconds || 300,
-        log_retention_days: currentConfig.log_retention_days || 30,
-        last_autofocus_timestamp: currentConfig.last_autofocus_timestamp, // Preserve timestamp
+        personal_access_token: formConfig.personal_access_token || '',
+        telescope_id: formConfig.telescope_id || '',
+        hardware_adapter: formConfig.hardware_adapter || '',
+        adapter_settings: adapterSettings, // Send flat settings for current adapter
+        log_level: formConfig.log_level || 'INFO',
+        keep_images: formConfig.keep_images || false,
+        file_logging_enabled: formConfig.file_logging_enabled !== undefined ? formConfig.file_logging_enabled : true,
+        scheduled_autofocus_enabled: formConfig.scheduled_autofocus_enabled || false,
+        autofocus_interval_minutes: parseInt(formConfig.autofocus_interval_minutes || 60, 10),
+        time_check_interval_minutes: parseInt(formConfig.time_check_interval_minutes || 5, 10),
+        time_offset_pause_ms: parseFloat(formConfig.time_offset_pause_ms || 500),
+        host,
+        port,
+        use_ssl,
+        // Preserve other settings from Alpine store (the single source of truth)
+        max_task_retries: store.config.max_task_retries || 3,
+        initial_retry_delay_seconds: store.config.initial_retry_delay_seconds || 30,
+        max_retry_delay_seconds: store.config.max_retry_delay_seconds || 300,
+        log_retention_days: store.config.log_retention_days || 30,
+        last_autofocus_timestamp: store.config.last_autofocus_timestamp,
     };
 
     try {
-        // Validate filters BEFORE saving main config (belt and suspenders)
-        const inputs = document.querySelectorAll('.filter-focus-input');
-        if (inputs.length > 0) {
-            const checkboxes = document.querySelectorAll('.filter-enabled-checkbox');
-            const enabledCount = Array.from(checkboxes).filter(cb => cb.checked).length;
+        // Validate filters BEFORE saving main config
+        const filters = store.filters || {};
+        const filterCount = Object.keys(filters).length;
+        if (filterCount > 0) {
+            const enabledCount = Object.values(filters).filter(f => f.enabled).length;
             if (enabledCount === 0) {
                 showConfigMessage('At least one filter must be enabled', 'danger');
-                return; // Exit early without saving anything
+                return;
             }
         }
 
@@ -389,7 +264,9 @@ async function saveConfiguration(event) {
 
         if (result.ok) {
             // Update saved adapter to match newly saved config
-            savedAdapter = config.hardware_adapter;
+            if (typeof Alpine !== 'undefined' && Alpine.store) {
+                Alpine.store('citrascope').savedAdapter = config.hardware_adapter;
+            }
 
             // After config saved successfully, save any modified filter focus positions
             const filterResults = await saveModifiedFilters();
@@ -416,9 +293,7 @@ async function saveConfiguration(event) {
         showConfigError('Failed to save configuration: ' + error.message);
     } finally {
         // Reset button state
-        saveButton.disabled = false;
-        spinner.style.display = 'none';
-        buttonText.textContent = 'Save Configuration';
+        store.isSavingConfig = false;
     }
 }
 
@@ -428,7 +303,7 @@ async function saveConfiguration(event) {
  * @param {string} type - 'danger' for errors, 'success' for success messages
  * @param {boolean} autohide - Whether to auto-hide the toast
  */
-function createToast(message, type = 'danger', autohide = false) {
+export function createToast(message, type = 'danger', autohide = false) {
     const toastContainer = document.getElementById('toastContainer');
     if (!toastContainer) {
         console.error('Toast container not found');
@@ -521,86 +396,53 @@ export function showConfigSection() {
  * Load and display filter configuration
  */
 async function loadFilterConfig() {
-    const filterSection = document.getElementById('filterConfigSection');
-    const changeMessage = document.getElementById('filterAdapterChangeMessage');
-    const tableContainer = document.getElementById('filterTableContainer');
+    const store = Alpine.store('citrascope');
 
     // Check if selected adapter matches saved adapter
-    const adapterSelect = document.getElementById('hardwareAdapterSelect');
-    const selectedAdapter = adapterSelect ? adapterSelect.value : null;
+    const selectedAdapter = store.config.hardware_adapter;
 
-    if (selectedAdapter && savedAdapter && selectedAdapter !== savedAdapter) {
+    if (selectedAdapter && store.savedAdapter && selectedAdapter !== store.savedAdapter) {
         // Adapter has changed but not saved yet - show message and hide table
-        if (filterSection) filterSection.style.display = 'block';
-        if (changeMessage) changeMessage.style.display = 'block';
-        if (tableContainer) tableContainer.style.display = 'none';
+        store.filterConfigVisible = true;
+        store.filterAdapterChangeMessageVisible = true;
         return;
     }
 
     // Hide message and show table when adapters match
-    if (changeMessage) changeMessage.style.display = 'none';
-    if (tableContainer) tableContainer.style.display = 'block';
+    store.filterAdapterChangeMessageVisible = false;
 
     try {
         const response = await fetch('/api/adapter/filters');
 
         if (response.status === 404 || response.status === 503) {
-            // Adapter doesn't support filters or isn't available
-            if (filterSection) filterSection.style.display = 'none';
+            store.filterConfigVisible = false;
             return;
         }
 
         const data = await response.json();
 
         if (response.ok && data.filters) {
-            // Show the filter section
-            if (filterSection) filterSection.style.display = 'block';
-
-            // Populate filter table
-            const tbody = document.getElementById('filterTableBody');
-            const noFiltersMsg = document.getElementById('noFiltersMessage');
-
-            if (tbody) {
-                tbody.innerHTML = '';
-                const filters = data.filters;
-                const filterIds = Object.keys(filters).sort();
-
-                if (filterIds.length === 0) {
-                    if (noFiltersMsg) noFiltersMsg.style.display = 'block';
-                } else {
-                    if (noFiltersMsg) noFiltersMsg.style.display = 'none';
-
-                    filterIds.forEach(filterId => {
-                        const filter = filters[filterId];
-                        const isEnabled = filter.enabled !== undefined ? filter.enabled : true;
-                        const row = document.createElement('tr');
-                        row.innerHTML = `
-                            <td>
-                                <input type="checkbox"
-                                       class="form-check-input filter-enabled-checkbox"
-                                       data-filter-id="${filterId}"
-                                       ${isEnabled ? 'checked' : ''}>
-                            </td>
-                            <td>${filter.name}</td>
-                            <td>
-                                <input type="number"
-                                       class="form-control form-control-sm filter-focus-input"
-                                       data-filter-id="${filterId}"
-                                       value="${filter.focus_position}"
-                                       min="0"
-                                       step="1">
-                            </td>
-                        `;
-                        tbody.appendChild(row);
-                    });
-                }
-            }
+            store.filterConfigVisible = true;
+
+            // Update enabled filters display on dashboard (Alpine store)
+            updateStoreEnabledFilters(data.filters);
+
+            // Add color to each filter and update store
+            const filtersWithColor = {};
+            Object.entries(data.filters).forEach(([id, filter]) => {
+                filtersWithColor[id] = {
+                    ...filter,
+                    color: getFilterColor(filter.name),
+                    enabled: filter.enabled !== undefined ? filter.enabled : true
+                };
+            });
+            store.filters = filtersWithColor;
         } else {
-            if (filterSection) filterSection.style.display = 'none';
+            store.filterConfigVisible = false;
         }
     } catch (error) {
         console.error('Error loading filter config:', error);
-        if (filterSection) filterSection.style.display = 'none';
+        store.filterConfigVisible = false;
     }
 }
 
@@ -609,75 +451,85 @@ async function loadFilterConfig() {
  * Returns: Object with { success: number, failed: number }
  */
 async function saveModifiedFilters() {
-    const inputs = document.querySelectorAll('.filter-focus-input');
-    if (inputs.length === 0) return { success: 0, failed: 0 }; // No filters to save
+    const store = Alpine.store('citrascope');
+    const filters = store.filters || {};
+    const filterIds = Object.keys(filters);
 
-    // Belt and suspenders: Validate at least one filter is enabled before saving
-    const checkboxes = document.querySelectorAll('.filter-enabled-checkbox');
-    const enabledCount = Array.from(checkboxes).filter(cb => cb.checked).length;
+    if (filterIds.length === 0) return { success: 0, failed: 0 };
+
+    // Validate at least one filter is enabled
+    const enabledCount = Object.values(filters).filter(f => f.enabled).length;
     if (enabledCount === 0) {
         showConfigMessage('At least one filter must be enabled', 'danger');
-        return { success: 0, failed: inputs.length };
+        return { success: 0, failed: filterIds.length };
     }
 
-    let successCount = 0;
-    let failedCount = 0;
-
-    // Save all filter values
-    for (const input of inputs) {
-        const filterId = input.dataset.filterId;
-        const focusPosition = parseInt(input.value);
+    // Collect all filter updates from store
+    const filterUpdates = [];
+    for (const [filterId, filter] of Object.entries(filters)) {
+        const focusPosition = parseInt(filter.focus_position);
+        if (Number.isNaN(focusPosition) || focusPosition < 0) continue;
 
-        if (isNaN(focusPosition) || focusPosition < 0) {
-            failedCount++;
-            continue;
-        }
+        filterUpdates.push({
+            filter_id: filterId,
+            focus_position: focusPosition,
+            enabled: filter.enabled !== undefined ? filter.enabled : true
+        });
+    }
 
-        // Get enabled state from corresponding checkbox
-        const checkbox = document.querySelector(`.filter-enabled-checkbox[data-filter-id="${filterId}"]`);
-        const enabled = checkbox ? checkbox.checked : true;
+    if (filterUpdates.length === 0) return { success: 0, failed: 0 };
 
-        try {
-            const response = await fetch(`/api/adapter/filters/${filterId}`, {
-                method: 'PATCH',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ focus_position: focusPosition, enabled: enabled })
-            });
+    // Send single batch update
+    try {
+        const response = await fetch('/api/adapter/filters/batch', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(filterUpdates)
+        });
 
-            if (response.ok) {
-                successCount++;
-            } else {
-                failedCount++;
-                const data = await response.json();
-                console.error(`Failed to save filter ${filterId}: ${data.error || 'Unknown error'}`);
-                // If it's the "last enabled filter" error, show it to the user
-                if (response.status === 400 && data.error && data.error.includes('last enabled filter')) {
-                    showConfigMessage(data.error, 'danger');
+        if (response.ok) {
+            const data = await response.json();
+            const successCount = data.updated_count || 0;
+
+            // After batch update, sync to backend
+            try {
+                const syncResponse = await fetch('/api/adapter/filters/sync', {
+                    method: 'POST'
+                });
+                if (!syncResponse.ok) {
+                    console.error('Failed to sync filters to backend');
                 }
+            } catch (error) {
+                console.error('Error syncing filters to backend:', error);
             }
-        } catch (error) {
-            failedCount++;
-            console.error(`Error saving filter ${filterId}:`, error);
+
+            return { success: successCount, failed: 0 };
+        } else {
+            const data = await response.json();
+            const errorMsg = data.error || 'Unknown error';
+            console.error(`Failed to save filters: ${errorMsg}`);
+
+            // Show error to user
+            if (response.status === 400 && errorMsg.includes('last enabled filter')) {
+                showConfigMessage(errorMsg, 'danger');
+            }
+
+            return { success: 0, failed: filterUpdates.length };
         }
+    } catch (error) {
+        console.error('Error saving filters:', error);
+        return { success: 0, failed: filterUpdates.length };
     }
-
-    return { success: successCount, failed: failedCount };
 }
 
 /**
  * Trigger or cancel autofocus routine
  */
 async function triggerAutofocus() {
-    const button = document.getElementById('runAutofocusButton');
-    const buttonText = document.getElementById('autofocusButtonText');
-    const buttonSpinner = document.getElementById('autofocusButtonSpinner');
-
-    if (!button || !buttonText || !buttonSpinner) return;
-
-    // Check if this is a cancel action
-    const isCancel = button.dataset.action === 'cancel';
+    const store = Alpine.store('citrascope');
+    const isCancel = store.status?.autofocus_requested;
 
     if (isCancel) {
         // Cancel autofocus
@@ -689,7 +541,6 @@ async function triggerAutofocus() {
 
             if (response.ok && data.success) {
                 showToast('Autofocus cancelled', 'info');
-                updateAutofocusButton(false);
             } else {
                 showToast('Nothing to cancel', 'warning');
             }
@@ -701,8 +552,7 @@ async function triggerAutofocus() {
     }
 
     // Request autofocus
-    button.disabled = true;
-    buttonSpinner.style.display = 'inline-block';
+    store.isAutofocusing = true;
 
     try {
         const response = await fetch('/api/adapter/autofocus', {
@@ -713,7 +563,6 @@ async function triggerAutofocus() {
 
         if (response.ok) {
             showToast('Autofocus queued', 'success');
-            updateAutofocusButton(true);
         } else {
             showToast(data.error || 'Autofocus request failed', 'error');
         }
@@ -721,30 +570,7 @@ async function triggerAutofocus() {
         console.error('Error triggering autofocus:', error);
         showToast('Failed to trigger autofocus', 'error');
     } finally {
-        button.disabled = false;
-        buttonSpinner.style.display = 'none';
-    }
-}
-
-/**
- * Update autofocus button state based on whether autofocus is queued
- */
-function updateAutofocusButton(isQueued) {
-    const button = document.getElementById('runAutofocusButton');
-    const buttonText = document.getElementById('autofocusButtonText');
-
-    if (!button || !buttonText) return;
-
-    if (isQueued) {
-        buttonText.textContent = 'Cancel Autofocus';
-        button.dataset.action = 'cancel';
-        button.classList.remove('btn-outline-primary');
-        button.classList.add('btn-outline-warning');
-    } else {
-        buttonText.textContent = 'Run Autofocus';
-        button.dataset.action = 'request';
-        button.classList.remove('btn-outline-warning');
-        button.classList.add('btn-outline-primary');
+        store.isAutofocusing = false;
     }
 }
 
@@ -795,12 +621,25 @@ export async function initFilterConfig() {
 /**
  * Setup autofocus button event listener (call once during init)
  */
+// Autofocus button now uses Alpine @click directive in template
+// Expose triggerAutofocus for template access
 export function setupAutofocusButton() {
-    const autofocusBtn = document.getElementById('runAutofocusButton');
-    if (autofocusBtn) {
-        autofocusBtn.addEventListener('click', triggerAutofocus);
-    }
+    window.triggerAutofocus = triggerAutofocus;
 }
 
-// Make showConfigSection available globally for onclick handlers in HTML
-window.showConfigSection = showConfigSection;
+/**
+ * Reload adapter schema (called from Alpine components when device type changes)
+ */
+async function reloadAdapterSchema() {
+    const store = Alpine.store('citrascope');
+    const adapter = store.config.hardware_adapter;
+    if (!adapter) return;
+
+    // Convert current adapterFields back to flat settings object
+    const currentSettings = {};
+    (store.adapterFields || []).forEach(field => {
+        currentSettings[field.name] = field.value;
+    });
+
+    await loadAdapterSchema(adapter, currentSettings);
+}