citrascope 0.6.1__py3-none-any.whl → 0.8.0__py3-none-any.whl

citrascope/web/static/config.js

@@ -1,6 +1,7 @@
 // Configuration management for CitraScope
 
 import { getConfig, saveConfig, getConfigStatus, getHardwareAdapters, getAdapterSchema } from './api.js';
+import { getFilterColor } from './filters.js';
 
 // API Host constants - must match backend constants in app.py
 const PROD_API_HOST = 'api.citra.space';
@@ -9,6 +10,7 @@ const DEFAULT_API_PORT = 443;
 
 let currentAdapterSchema = [];
 export let currentConfig = {};
+let savedAdapter = null; // Track the currently saved adapter
 
 export async function initConfig() {
     // Populate hardware adapter dropdown
@@ -17,12 +19,19 @@ export async function initConfig() {
     // Hardware adapter selection change
     const adapterSelect = document.getElementById('hardwareAdapterSelect');
     if (adapterSelect) {
-        adapterSelect.addEventListener('change', async function(e) {
+        adapterSelect.addEventListener('change', async (e) => {
             const adapter = e.target.value;
             if (adapter) {
-                await loadAdapterSchema(adapter);
+                // Extract the NEW adapter's saved settings from the nested structure
+                const allAdapterSettings = currentConfig.adapter_settings || {};
+                const newAdapterSettings = allAdapterSettings[adapter] || {};
+                await loadAdapterSchema(adapter, newAdapterSettings);
+                populateAdapterSettings(newAdapterSettings);
+                await loadFilterConfig();
             } else {
                 document.getElementById('adapter-settings-container').innerHTML = '';
+                const filterSection = document.getElementById('filterConfigSection');
+                if (filterSection) filterSection.style.display = 'none';
             }
         });
     }
@@ -30,7 +39,7 @@ export async function initConfig() {
     // API endpoint selection change
     const apiEndpointSelect = document.getElementById('apiEndpoint');
     if (apiEndpointSelect) {
-        apiEndpointSelect.addEventListener('change', function(e) {
+        apiEndpointSelect.addEventListener('change', (e) => {
             const customContainer = document.getElementById('customHostContainer');
             if (e.target.value === 'custom') {
                 customContainer.style.display = 'block';
@@ -106,6 +115,7 @@ 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');
@@ -158,10 +168,31 @@ async function loadConfiguration() {
         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 time sync settings (monitoring always enabled)
+        const timeOffsetPause = document.getElementById('time_offset_pause_ms');
+
+        if (timeOffsetPause) {
+            timeOffsetPause.value = config.time_offset_pause_ms || 500;
+        }
+
         // Load adapter-specific settings if adapter is selected
         if (config.hardware_adapter) {
-            await loadAdapterSchema(config.hardware_adapter);
-            populateAdapterSettings(config.adapter_settings || {});
+            // adapter_settings is nested: {"nina": {...}, "kstars": {...}, "direct": {...}}
+            // Extract the current adapter's settings
+            const allAdapterSettings = config.adapter_settings || {};
+            const currentAdapterSettings = allAdapterSettings[config.hardware_adapter] || {};
+            await loadAdapterSchema(config.hardware_adapter, currentAdapterSettings);
+            populateAdapterSettings(currentAdapterSettings);
         }
     } catch (error) {
         console.error('Failed to load config:', error);
@@ -171,9 +202,16 @@ async function loadConfiguration() {
 /**
  * Load adapter schema and render settings form
  */
-async function loadAdapterSchema(adapterName) {
+async function loadAdapterSchema(adapterName, currentSettings = {}) {
     try {
-        const data = await getAdapterSchema(adapterName);
+        // Pass current adapter settings for dynamic schema generation
+        const settingsParam = Object.keys(currentSettings).length > 0
+            ? `?current_settings=${encodeURIComponent(JSON.stringify(currentSettings))}`
+            : '';
+
+        const response = await fetch(`/api/hardware-adapters/${adapterName}/schema${settingsParam}`);
+        const data = await response.json();
+
         currentAdapterSchema = data.schema || [];
         renderAdapterSettings(currentAdapterSchema);
     } catch (error) {
@@ -193,52 +231,115 @@ function renderAdapterSettings(schema) {
         return;
     }
 
-    let html = '<h5 class="mb-3">Adapter Settings</h5><div class="row g-3 mb-4">';
+    // Group fields by their 'group' property
+    const grouped = schema.reduce((acc, field) => {
+        if (field.readonly) return acc; // Skip readonly fields
+        const group = field.group || 'General';
+        if (!acc[group]) acc[group] = [];
+        acc[group].push(field);
+        return acc;
+    }, {});
+
+    let html = '<h5 class="mb-3">Adapter Settings</h5>';
+
+    // Render each group as a card
+    Object.entries(grouped).forEach(([groupName, fields]) => {
+        html += `<div class="card bg-dark border-secondary mb-3">`;
+        html += `<div class="card-header">`;
+        html += `<h6 class="mb-0"><i class="bi bi-${getGroupIcon(groupName)} me-2"></i>${groupName}</h6>`;
+        html += `</div>`;
+        html += `<div class="card-body">`;
+        html += `<div class="row g-3">`;
+
+        fields.forEach(field => {
+            const isRequired = field.required ? '<span class="text-danger">*</span>' : '';
+            const placeholder = field.placeholder || '';
+            const description = field.description || '';
+            const displayName = field.friendly_name || field.name;
 
-    schema.forEach(field => {
-        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-4">';
+            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) {
+                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 => {
+                    // Handle both object format {value, label} and plain string options
+                    const optValue = typeof opt === 'object' ? opt.value : opt;
+                    const optLabel = typeof opt === 'object' ? opt.label : opt;
+                    html += `<option value="${optValue}">${optLabel}</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}"` : '';
+                const step = field.type === 'float' ? 'step="any"' : '';
+                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} ${step} ${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' : ''}>`;
+            }
 
-        html += '<div class="col-12 col-md-6">';
-        html += `<label for="adapter_${field.name}" class="form-label">${displayName} ${isRequired}</label>`;
+            if (description && field.type !== 'bool') {
+                html += `<small class="text-muted">${description}</small>`;
+            }
+            html += '</div>';
+        });
 
-        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' : ''}>`;
-        }
+        html += `</div></div></div>`; // Close row, card-body, card
+    });
+
+    container.innerHTML = html;
+
+    // Add change listeners to device type fields to reload schema dynamically
+    const deviceTypeFields = ['camera_type', 'mount_type', 'filter_wheel_type', 'focuser_type'];
+    deviceTypeFields.forEach(fieldName => {
+        const select = document.getElementById(`adapter_${fieldName}`);
+        if (select) {
+            select.addEventListener('change', async () => {
+                // Get current adapter name
+                const adapterSelect = document.getElementById('hardwareAdapterSelect');
+                if (!adapterSelect || !adapterSelect.value) return;
+
+                // Collect current settings
+                const currentSettings = collectAdapterSettings();
+
+                // Reload schema with new device type selection
+                await loadAdapterSchema(adapterSelect.value, currentSettings);
 
-        if (description && field.type !== 'bool') {
-            html += `<small class="text-muted">${description}</small>`;
+                // Repopulate settings (preserves user's selections)
+                populateAdapterSettings(currentSettings);
+            });
         }
-        html += '</div>';
     });
+}
 
-    html += '</div>';
-    container.innerHTML = html;
+/**
+ * Get Bootstrap icon name for a group
+ */
+function getGroupIcon(groupName) {
+    const icons = {
+        'Camera': 'camera',
+        'Mount': 'compass',
+        'Filter Wheel': 'circle',
+        'Focuser': 'eyeglasses',
+        'Connection': 'ethernet',
+        'Devices': 'hdd-network',
+        'Imaging': 'image',
+        'General': 'gear',
+        'Advanced': 'sliders'
+    };
+    return icons[groupName] || 'gear';
 }
 
 /**
@@ -275,16 +376,18 @@ function collectAdapterSettings() {
             value = input.value;
         }
 
+        // Skip empty values for non-checkbox fields (will use backend defaults)
+        if (input.type !== 'checkbox' && (value === '' || value === null || value === undefined)) {
+            return;
+        }
+
         // Type conversion
-        if (value !== '' && value !== null) {
-            if (fieldType === 'int') {
-                value = parseInt(value, 10);
-            } else if (fieldType === 'float') {
-                value = parseFloat(value);
-            } else if (fieldType === 'bool') {
-                // Already handled above
-            }
+        if (fieldType === 'int') {
+            value = parseInt(value, 10);
+        } else if (fieldType === 'float') {
+            value = parseFloat(value);
         }
+        // bool type already handled above
 
         settings[fieldName] = value;
     });
@@ -336,6 +439,11 @@ async function saveConfiguration(event) {
         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),
+        // Time sync settings (monitoring always enabled)
+        time_offset_pause_ms: parseFloat(document.getElementById('time_offset_pause_ms')?.value || 500),
         // API settings from endpoint selector
         host: host,
         port: port,
@@ -345,12 +453,27 @@ async function saveConfiguration(event) {
         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
     };
 
     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;
+            if (enabledCount === 0) {
+                showConfigMessage('At least one filter must be enabled', 'danger');
+                return; // Exit early without saving anything
+            }
+        }
+
         const result = await saveConfig(config);
 
         if (result.ok) {
+            // Update saved adapter to match newly saved config
+            savedAdapter = config.hardware_adapter;
+
             // After config saved successfully, save any modified filter focus positions
             const filterResults = await saveModifiedFilters();
 
@@ -364,6 +487,9 @@ async function saveConfiguration(event) {
             }
 
             showConfigSuccess(message);
+
+            // Reload filters to re-enable editing for the new adapter
+            await loadFilterConfig();
         } else {
             // Check for specific error codes
             const errorMsg = result.data.error || result.data.message || 'Failed to save configuration';
@@ -379,35 +505,82 @@ async function saveConfiguration(event) {
     }
 }
 
+/**
+ * Create and show a Bootstrap toast notification
+ * @param {string} message - The message to display
+ * @param {string} type - 'danger' for errors, 'success' for success messages
+ * @param {boolean} autohide - Whether to auto-hide the toast
+ */
+export function createToast(message, type = 'danger', autohide = false) {
+    const toastContainer = document.getElementById('toastContainer');
+    if (!toastContainer) {
+        console.error('Toast container not found');
+        return;
+    }
+
+    // Create toast element
+    const toastId = `toast-${Date.now()}`;
+    const toastHTML = `
+        <div id="${toastId}" class="toast text-bg-${type}" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="toast-header text-bg-${type}">
+                <strong class="me-auto">CitraScope</strong>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+            <div class="toast-body">
+                ${message}
+            </div>
+        </div>
+    `;
+
+    // Insert toast into container
+    toastContainer.insertAdjacentHTML('beforeend', toastHTML);
+
+    // Get the toast element and initialize Bootstrap toast
+    const toastElement = document.getElementById(toastId);
+    const toast = new bootstrap.Toast(toastElement, {
+        autohide: autohide,
+        delay: 5000
+    });
+
+    // Remove toast element from DOM after it's hidden
+    toastElement.addEventListener('hidden.bs.toast', () => {
+        toastElement.remove();
+    });
+
+    // Show the toast
+    toast.show();
+}
+
 /**
  * Show configuration error message
  */
 function showConfigError(message) {
-    const errorDiv = document.getElementById('configError');
-    errorDiv.textContent = message;
-    errorDiv.style.display = 'block';
+    createToast(message, 'danger', false);
+}
+
+/**
+ * Show configuration message (can be error or success)
+ */
+function showConfigMessage(message, type = 'danger') {
+    if (type === 'danger') {
+        showConfigError(message);
+    } else {
+        showConfigSuccess(message);
+    }
 }
 
 /**
  * Show configuration success message
  */
 function showConfigSuccess(message) {
-    const successDiv = document.getElementById('configSuccess');
-    successDiv.textContent = message;
-    successDiv.style.display = 'block';
-
-    // Auto-hide after 5 seconds
-    setTimeout(() => {
-        successDiv.style.display = 'none';
-    }, 5000);
+    createToast(message, 'success', true);
 }
 
 /**
- * Hide all configuration messages
+ * Hide all configuration messages (no-op for toast compatibility)
  */
 function hideConfigMessages() {
-    document.getElementById('configError').style.display = 'none';
-    document.getElementById('configSuccess').style.display = 'none';
+    // No-op - toasts handle their own hiding
 }
 
 /**
@@ -432,6 +605,24 @@ export function showConfigSection() {
  */
 async function loadFilterConfig() {
     const filterSection = document.getElementById('filterConfigSection');
+    const changeMessage = document.getElementById('filterAdapterChangeMessage');
+    const tableContainer = document.getElementById('filterTableContainer');
+
+    // Check if selected adapter matches saved adapter
+    const adapterSelect = document.getElementById('hardwareAdapterSelect');
+    const selectedAdapter = adapterSelect ? adapterSelect.value : null;
+
+    if (selectedAdapter && savedAdapter && selectedAdapter !== 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';
+        return;
+    }
+
+    // Hide message and show table when adapters match
+    if (changeMessage) changeMessage.style.display = 'none';
+    if (tableContainer) tableContainer.style.display = 'block';
 
     try {
         const response = await fetch('/api/adapter/filters');
@@ -448,6 +639,9 @@ async function loadFilterConfig() {
             // Show the filter section
             if (filterSection) filterSection.style.display = 'block';
 
+            // Update enabled filters display on dashboard
+            updateEnabledFiltersDisplay(data.filters);
+
             // Populate filter table
             const tbody = document.getElementById('filterTableBody');
             const noFiltersMsg = document.getElementById('noFiltersMessage');
@@ -464,10 +658,19 @@ async function loadFilterConfig() {
 
                     filterIds.forEach(filterId => {
                         const filter = filters[filterId];
+                        const isEnabled = filter.enabled !== undefined ? filter.enabled : true;
+                        const filterColor = getFilterColor(filter.name);
                         const row = document.createElement('tr');
                         row.innerHTML = `
-                            <td>${filterId}</td>
-                            <td>${filter.name}</td>
+                            <td>
+                                <input type="checkbox"
+                                       class="form-check-input filter-enabled-checkbox"
+                                       data-filter-id="${filterId}"
+                                       ${isEnabled ? 'checked' : ''}>
+                            </td>
+                            <td>
+                                <span class="badge" style="background-color: ${filterColor}; color: white;">${filter.name}</span>
+                            </td>
                             <td>
                                 <input type="number"
                                        class="form-control form-control-sm filter-focus-input"
@@ -491,52 +694,93 @@ async function loadFilterConfig() {
 }
 
 /**
- * Save all filter focus positions (called during main config save)
+ * Save all filter focus positions and enabled states (called during main config save)
  * 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
 
-    let successCount = 0;
-    let failedCount = 0;
+    // 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 (enabledCount === 0) {
+        showConfigMessage('At least one filter must be enabled', 'danger');
+        return { success: 0, failed: inputs.length };
+    }
 
-    // Save all filter values
+    // Collect all filter updates into array
+    const filterUpdates = [];
     for (const input of inputs) {
         const filterId = input.dataset.filterId;
         const focusPosition = parseInt(input.value);
 
-        if (isNaN(focusPosition) || focusPosition < 0) {
-            failedCount++;
-            continue;
+        if (Number.isNaN(focusPosition) || focusPosition < 0) {
+            continue; // Skip invalid entries
         }
 
-        try {
-            const response = await fetch(`/api/adapter/filters/${filterId}`, {
-                method: 'PATCH',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ focus_position: focusPosition })
-            });
+        // Get enabled state from corresponding checkbox
+        const checkbox = document.querySelector(`.filter-enabled-checkbox[data-filter-id="${filterId}"]`);
+        const enabled = checkbox ? checkbox.checked : true;
 
-            if (response.ok) {
-                successCount++;
-            } else {
-                failedCount++;
-                console.error(`Failed to save filter ${filterId}: HTTP ${response.status}`);
+        filterUpdates.push({
+            filter_id: filterId,
+            focus_position: focusPosition,
+            enabled: enabled
+        });
+    }
+
+    if (filterUpdates.length === 0) {
+        return { success: 0, failed: 0 };
+    }
+
+    // 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) {
+            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 autofocus routine
+ * Trigger or cancel autofocus routine
  */
 async function triggerAutofocus() {
     const button = document.getElementById('runAutofocusButton');
@@ -545,12 +789,32 @@ async function triggerAutofocus() {
 
     if (!button || !buttonText || !buttonSpinner) return;
 
-    // Clear any previous messages
-    hideConfigMessages();
+    // Check if this is a cancel action
+    const isCancel = button.dataset.action === 'cancel';
 
-    // Disable button and show spinner
+    if (isCancel) {
+        // Cancel autofocus
+        try {
+            const response = await fetch('/api/adapter/autofocus/cancel', {
+                method: 'POST'
+            });
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                showToast('Autofocus cancelled', 'info');
+                updateAutofocusButton(false);
+            } else {
+                showToast('Nothing to cancel', 'warning');
+            }
+        } catch (error) {
+            console.error('Error cancelling autofocus:', error);
+            showToast('Failed to cancel autofocus', 'error');
+        }
+        return;
+    }
+
+    // Request autofocus
     button.disabled = true;
-    buttonText.textContent = 'Running Autofocus...';
     buttonSpinner.style.display = 'inline-block';
 
     try {
@@ -561,24 +825,78 @@ async function triggerAutofocus() {
         const data = await response.json();
 
         if (response.ok) {
-            showConfigSuccess('Autofocus completed successfully');
-            // Reload filter config to show updated focus positions
-            await loadFilterConfig();
+            showToast('Autofocus queued', 'success');
+            updateAutofocusButton(true);
         } else {
-            // Show clear error message (e.g., if autofocus already running or other conflict)
-            showConfigError(data.error || 'Autofocus failed');
+            showToast(data.error || 'Autofocus request failed', 'error');
         }
     } catch (error) {
         console.error('Error triggering autofocus:', error);
-        showConfigError('Failed to trigger autofocus');
+        showToast('Failed to trigger autofocus', 'error');
     } finally {
-        // Re-enable button
         button.disabled = false;
-        buttonText.textContent = 'Run Autofocus';
         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');
+    }
+}
+
+/**
+ * Show toast notification
+ */
+function showToast(message, type = 'info') {
+    // Use Bootstrap toast if available, otherwise fallback to alert
+    const toastContainer = document.getElementById('toastContainer');
+    if (!toastContainer) {
+        console.log(`Toast (${type}): ${message}`);
+        return;
+    }
+
+    const toastId = `toast-${Date.now()}`;
+    const bgClass = type === 'success' ? 'bg-success' :
+                    type === 'error' ? 'bg-danger' :
+                    type === 'warning' ? 'bg-warning' : 'bg-info';
+
+    const toastHtml = `
+        <div id="${toastId}" class="toast align-items-center text-white ${bgClass} border-0" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="d-flex">
+                <div class="toast-body">${message}</div>
+                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+        </div>
+    `;
+
+    toastContainer.insertAdjacentHTML('beforeend', toastHtml);
+    const toastElement = document.getElementById(toastId);
+    const toast = new bootstrap.Toast(toastElement, { delay: 3000 });
+    toast.show();
+
+    // Remove from DOM after hidden
+    toastElement.addEventListener('hidden.bs.toast', () => {
+        toastElement.remove();
+    });
+}
+
 /**
  * Initialize filter configuration on page load
  */
@@ -587,6 +905,28 @@ export async function initFilterConfig() {
     await loadFilterConfig();
 }
 
+/**
+ * Update the enabled filters display on the dashboard.
+ * @param {Object} filters - Filter configuration object
+ */
+function updateEnabledFiltersDisplay(filters) {
+    const filtersEl = document.getElementById('enabledFilters');
+    if (!filtersEl) return;
+
+    const enabledFilters = Object.values(filters)
+        .filter(filter => filter.enabled !== false)
+        .map(filter => filter.name);
+
+    if (enabledFilters.length > 0) {
+        filtersEl.innerHTML = enabledFilters.map(filterName => {
+            const color = getFilterColor(filterName);
+            return `<span class="badge me-1" style="background-color: ${color}; color: white;">${filterName}</span>`;
+        }).join('');
+    } else {
+        filtersEl.textContent = '-';
+    }
+}
+
 /**
  * Setup autofocus button event listener (call once during init)
  */