@switchbot/homebridge-switchbot 5.0.0-beta.11 → 5.0.0-beta.110

package/src/homebridge-ui/public/js/credentials.ts

@@ -0,0 +1,100 @@
+import { fetchCredentialStatus as apiFetchCredentialStatus, saveCredentials as apiSaveCredentials, syncParentPluginConfigFromDisk } from './api.js'
+import { uiLog } from './logger.js'
+import { hideBusyUi, showBusyUi } from './modal.js'
+import { toastError, toastSuccess, toastWarning } from './toast.js'
+
+export async function loadCredentialStatus(): Promise<void> {
+  try {
+    const creds = await apiFetchCredentialStatus()
+
+    if (!creds) {
+      uiLog.error('Failed to load credentials')
+      return
+    }
+
+    const tokenStatus = document.getElementById('tokenStatus')
+    const secretStatus = document.getElementById('secretStatus')
+
+    if (!tokenStatus || !secretStatus) { return }
+
+    if (creds.hasToken) {
+      tokenStatus.textContent = `✓ Configured (${creds.tokenLength} characters)`
+      tokenStatus.classList.add('ok')
+    } else {
+      tokenStatus.textContent = 'Not configured'
+      tokenStatus.classList.remove('ok')
+    }
+
+    if (creds.hasSecret) {
+      secretStatus.textContent = `✓ Configured (${creds.secretLength} characters)`
+      secretStatus.classList.add('ok')
+    } else {
+      secretStatus.textContent = 'Not configured'
+      secretStatus.classList.remove('ok')
+    }
+  } catch (e) {
+    uiLog.error('Error loading credentials:', e)
+  }
+}
+
+export async function saveCredentials(): Promise<void> {
+  const token = (document.getElementById('token') as HTMLInputElement)?.value
+  const secret = (document.getElementById('secret') as HTMLInputElement)?.value
+  const saveStatus = document.getElementById('saveStatus')
+  const saveBtn = document.getElementById('saveBtn') as HTMLButtonElement
+
+  if (!saveStatus || !saveBtn) { return }
+
+  if (!token || !secret) {
+    saveStatus.textContent = 'Please enter both token and secret'
+    saveStatus.classList.add('error')
+    toastWarning('Please enter both token and secret')
+    return
+  }
+
+  try {
+    showBusyUi()
+    saveBtn.disabled = true
+    saveBtn.textContent = 'Saving...'
+    uiLog.info('Saving credentials...')
+
+    const result = await apiSaveCredentials(token, secret)
+    uiLog.info('Save response:', result)
+
+    const message = result?.message || 'Credentials saved successfully'
+    saveStatus.textContent = `✓ ${message}`
+    saveStatus.classList.remove('error')
+    saveStatus.classList.add('success-msg')
+    toastSuccess(message)
+
+    const synced = await syncParentPluginConfigFromDisk(true)
+    if (synced) {
+      saveStatus.textContent += ' - Config saved automatically.'
+      toastSuccess('Configuration synced and saved automatically')
+    } else {
+      toastWarning('Credentials saved, but configuration sync failed')
+    }
+
+    // Clear inputs after successful save
+    ;(document.getElementById('token') as HTMLInputElement).value = ''
+    ;(document.getElementById('secret') as HTMLInputElement).value = ''
+
+    // Reload status to verify save
+    setTimeout(() => loadCredentialStatus(), 500)
+
+    // Clear status message
+    setTimeout(() => {
+      saveStatus.textContent = ''
+      saveStatus.classList.remove('success-msg')
+    }, 3000)
+  } catch (e) {
+    uiLog.error('Save error:', e)
+    saveStatus.textContent = `Error: ${e instanceof Error ? e.message : 'Failed to save'}`
+    saveStatus.classList.add('error')
+    toastError(e instanceof Error ? e.message : 'Failed to save credentials')
+  } finally {
+    hideBusyUi()
+    saveBtn.disabled = false
+    saveBtn.textContent = 'Save Credentials'
+  }
+}

package/src/homebridge-ui/public/js/devices-delete.ts

@@ -0,0 +1,236 @@
+import { deleteDevice as apiDeleteDevice, deleteAllDevices as apiDeleteAllDevices, syncParentPluginConfigFromDisk, fetchDevices } from './api.js'
+import { uiLog } from './logger.js'
+import { hideBusyUi, showBusyUi } from './modal.js'
+import { renderDeviceList } from './render.js'
+import { toastError, toastSuccess, toastWarning } from './toast.js'
+
+async function confirmDeleteDialog(deviceNameOrId: string): Promise<boolean> {
+  return new Promise((resolve) => {
+    const overlay = document.createElement('div')
+    overlay.style.position = 'fixed'
+    overlay.style.top = '0'
+    overlay.style.left = '0'
+    overlay.style.width = '100%'
+    overlay.style.height = '100%'
+    overlay.style.background = 'rgba(0,0,0,0.6)'
+    overlay.style.display = 'flex'
+    overlay.style.alignItems = 'center'
+    overlay.style.justifyContent = 'center'
+    overlay.style.zIndex = '10000'
+
+    const modal = document.createElement('div')
+    modal.style.background = getComputedStyle(document.body).backgroundColor
+    modal.style.color = getComputedStyle(document.body).color
+    modal.style.padding = '20px'
+    modal.style.borderRadius = '10px'
+    modal.style.minWidth = '340px'
+    modal.style.maxWidth = '90vw'
+    modal.style.boxShadow = '0 12px 40px rgba(0,0,0,0.35)'
+
+    const title = document.createElement('h3')
+    title.textContent = 'Delete Device'
+    title.style.margin = '0 0 10px 0'
+
+    const message = document.createElement('p')
+    message.textContent = `Remove "${deviceNameOrId}" from configuration?`
+    message.style.margin = '0 0 16px 0'
+
+    const actions = document.createElement('div')
+    actions.style.display = 'flex'
+    actions.style.justifyContent = 'flex-end'
+    actions.style.gap = '8px'
+
+    const cancelBtn = document.createElement('button')
+    cancelBtn.textContent = 'Cancel'
+    cancelBtn.style.background = '#6b7280'
+
+    const deleteBtn = document.createElement('button')
+    deleteBtn.textContent = 'Delete'
+    deleteBtn.style.background = '#ef4444'
+
+    const cleanup = (result: boolean) => {
+      overlay.remove()
+      resolve(result)
+    }
+
+    cancelBtn.onclick = () => cleanup(false)
+    deleteBtn.onclick = () => cleanup(true)
+    overlay.addEventListener('click', (event) => {
+      if (event.target === overlay) {
+        cleanup(false)
+      }
+    })
+
+    actions.appendChild(cancelBtn)
+    actions.appendChild(deleteBtn)
+    modal.appendChild(title)
+    modal.appendChild(message)
+    modal.appendChild(actions)
+    overlay.appendChild(modal)
+    document.body.appendChild(overlay)
+  })
+}
+
+export async function deleteDeviceFromConfig(deviceId: string, deviceName: string): Promise<void> {
+  uiLog.info('Delete button clicked for device:', deviceId, deviceName)
+
+  const confirmed = await confirmDeleteDialog(deviceName || deviceId)
+  if (!confirmed) {
+    uiLog.info('Delete cancelled by user')
+    return
+  }
+
+  try {
+    showBusyUi()
+    uiLog.info('Sending delete request for deviceId:', deviceId)
+    const resp = await apiDeleteDevice(deviceId)
+    uiLog.info('Delete response:', resp)
+
+    if (!resp || resp.success === false) {
+      throw new Error(resp?.data?.message || 'Failed to delete device')
+    }
+
+    uiLog.info('Syncing parent config from disk...')
+    const synced = await syncParentPluginConfigFromDisk(true)
+    if (!synced) {
+      toastWarning('Device deleted, but configuration sync failed')
+    }
+
+    uiLog.info('Refreshing device list...')
+    // Refresh device list
+    const list = await fetchDevices()
+    uiLog.info('Rendering devices:', list.length)
+    renderDeviceList(list)
+
+    uiLog.info('✓ Device deleted successfully')
+    toastSuccess(`Device "${deviceName || deviceId}" deleted successfully`)
+  } catch (e) {
+    uiLog.error('Delete error:', e)
+    toastError(e instanceof Error ? e.message : 'Failed to delete device')
+  } finally {
+    hideBusyUi()
+  }
+}
+
+async function confirmDeleteAllDialog(deviceCount: number): Promise<boolean> {
+  return new Promise((resolve) => {
+    const overlay = document.createElement('div')
+    overlay.style.position = 'fixed'
+    overlay.style.top = '0'
+    overlay.style.left = '0'
+    overlay.style.width = '100%'
+    overlay.style.height = '100%'
+    overlay.style.background = 'rgba(0,0,0,0.7)'
+    overlay.style.display = 'flex'
+    overlay.style.alignItems = 'center'
+    overlay.style.justifyContent = 'center'
+    overlay.style.zIndex = '10000'
+
+    const modal = document.createElement('div')
+    modal.style.background = getComputedStyle(document.body).backgroundColor
+    modal.style.color = getComputedStyle(document.body).color
+    modal.style.padding = '20px'
+    modal.style.borderRadius = '10px'
+    modal.style.minWidth = '380px'
+    modal.style.maxWidth = '90vw'
+    modal.style.boxShadow = '0 12px 40px rgba(0,0,0,0.35)'
+    modal.style.borderTop = '3px solid #ef4444'
+
+    const title = document.createElement('h3')
+    title.textContent = '⚠️ Remove All Devices'
+    title.style.margin = '0 0 12px 0'
+    title.style.color = '#ef4444'
+
+    const message = document.createElement('p')
+    message.innerHTML = `Are you sure you want to remove <strong>all ${deviceCount} device(s)</strong> from your configuration?<br><br>This action cannot be undone.`
+    message.style.margin = '0 0 18px 0'
+    message.style.lineHeight = '1.5'
+
+    const actions = document.createElement('div')
+    actions.style.display = 'flex'
+    actions.style.justifyContent = 'flex-end'
+    actions.style.gap = '10px'
+
+    const cancelBtn = document.createElement('button')
+    cancelBtn.textContent = 'Cancel'
+    cancelBtn.style.background = '#6b7280'
+    cancelBtn.style.padding = '8px 16px'
+    cancelBtn.style.fontSize = '13px'
+    cancelBtn.className = 'secondary'
+
+    const deleteBtn = document.createElement('button')
+    deleteBtn.textContent = 'Remove All'
+    deleteBtn.style.background = '#ef4444'
+    deleteBtn.style.padding = '8px 20px'
+    deleteBtn.style.fontSize = '13px'
+
+    const cleanup = (result: boolean) => {
+      overlay.remove()
+      resolve(result)
+    }
+
+    cancelBtn.onclick = () => cleanup(false)
+    deleteBtn.onclick = () => cleanup(true)
+    overlay.addEventListener('click', (event) => {
+      if (event.target === overlay) {
+        cleanup(false)
+      }
+    })
+
+    actions.appendChild(cancelBtn)
+    actions.appendChild(deleteBtn)
+    modal.appendChild(title)
+    modal.appendChild(message)
+    modal.appendChild(actions)
+    overlay.appendChild(modal)
+    document.body.appendChild(overlay)
+  })
+}
+
+export async function deleteAllDevicesFromConfig(): Promise<void> {
+  uiLog.info('Remove All Devices button clicked')
+
+  try {
+    // Get current device count
+    const list = await fetchDevices()
+    if (!list || list.length === 0) {
+      toastWarning('No devices to remove')
+      return
+    }
+
+    const confirmed = await confirmDeleteAllDialog(list.length)
+    if (!confirmed) {
+      uiLog.info('Remove all cancelled by user')
+      return
+    }
+
+    showBusyUi()
+    uiLog.info('Sending delete all devices request')
+    const resp = await apiDeleteAllDevices()
+    uiLog.info('Delete all response:', resp)
+
+    if (!resp || resp.success === false) {
+      throw new Error(resp?.data?.message || 'Failed to delete all devices')
+    }
+
+    uiLog.info('Syncing parent config from disk...')
+    const synced = await syncParentPluginConfigFromDisk(true)
+    if (!synced) {
+      toastWarning('Devices deleted, but configuration sync failed')
+    }
+
+    uiLog.info('Refreshing device list...')
+    const updatedList = await fetchDevices()
+    uiLog.info('Rendering devices:', updatedList.length)
+    renderDeviceList(updatedList)
+
+    const deletedCount = resp?.deletedCount || list.length
+    uiLog.info(`✓ Removed ${deletedCount} device(s) successfully`)
+    toastSuccess(`Removed ${deletedCount} device(s) successfully`)
+  } catch (e) {
+    uiLog.error('Delete all error:', e)
+    toastError(e instanceof Error ? e.message : 'Failed to delete all devices')
+  } finally {
+    hideBusyUi()
+  }
+}

package/src/homebridge-ui/public/js/devices.ts

@@ -0,0 +1,88 @@
+import { addDevice, fetchDevices, syncParentPluginConfigFromDisk } from './api.js'
+import { uiLog } from './logger.js'
+import { hideBusyUi, showBusyUi } from './modal.js'
+import { renderDeviceList } from './render.js'
+import { toastError, toastInfo, toastSuccess, toastWarning } from './toast.js'
+
+export async function addDeviceToConfig(device: any, options: { refresh?: boolean, showStatus?: boolean } = {}): Promise<{ added: boolean }> {
+  const { refresh = true, showStatus = true } = options
+
+  try {
+    showBusyUi()
+    uiLog.info('Adding device to config:', device)
+    const resp = await addDevice(device.id, device.name, device.type)
+    uiLog.info('Add device response:', resp)
+
+    if (!resp || resp.success === false) {
+      throw new Error(resp?.data?.message || 'Failed to add device')
+    }
+
+    const alreadyExists = !!resp?.alreadyExists
+    const message
+      = resp?.message
+        || (alreadyExists
+          ? `Device "${device.name}" already in config`
+          : `Device "${device.name}" added successfully!`)
+
+    if (alreadyExists) {
+      toastInfo(message)
+    } else {
+      toastSuccess(message)
+    }
+
+    if (showStatus) {
+      const status = document.getElementById('discoverStatus')
+      if (status) {
+        status.textContent = (alreadyExists ? '• ' : '✓ ') + message
+        status.classList.remove('error')
+        status.classList.add('success-msg')
+
+        // Sync parent Homebridge form cache and auto-save to prevent cache overwrite
+        if (!alreadyExists) {
+          const synced = await syncParentPluginConfigFromDisk(true)
+          status.textContent += synced
+            ? ' - Config saved automatically.'
+            : ' - Warning: config may not persist until you close/reopen settings.'
+
+          if (synced) {
+            toastSuccess('Configuration synced and saved automatically')
+          } else {
+            toastWarning('Configuration sync failed; close and reopen settings before Save')
+          }
+        }
+      }
+    }
+
+    if (refresh) {
+      await loadConfiguredDevices()
+    }
+
+    return { added: !alreadyExists }
+  } catch (e) {
+    uiLog.error('Add device error:', e)
+    const status = document.getElementById('discoverStatus')
+    if (status) {
+      status.textContent = `✗ Error: ${e instanceof Error ? e.message : 'Failed to add device'}`
+      status.classList.add('error')
+    }
+    toastError(e instanceof Error ? e.message : 'Failed to add device')
+    return { added: false }
+  } finally {
+    hideBusyUi()
+  }
+}
+
+export async function initRemoveAllButton(): Promise<void> {
+  const removeAllBtn = document.getElementById('removeAllBtn')
+  if (!removeAllBtn) { return }
+
+  removeAllBtn.addEventListener('click', async () => {
+    const { deleteAllDevicesFromConfig } = await import('./devices-delete.js')
+    await deleteAllDevicesFromConfig()
+  })
+}
+
+export async function loadConfiguredDevices(): Promise<void> {
+  const list = await fetchDevices()
+  renderDeviceList(list)
+}

package/src/homebridge-ui/public/js/discovery.ts

@@ -0,0 +1,277 @@
+import {
+  addDevicesInBulk,
+  discoverDevices as apiDiscoverDevices,
+  fetchDevices,
+  syncParentPluginConfigFromDisk,
+} from './api.js'
+import { loadConfiguredDevices } from './devices.js'
+import { uiLog } from './logger.js'
+import { hideBusyUi, showBusyUi } from './modal.js'
+import { renderDiscoveredDevices, filterDevices, sortDevices, getDiscoveryPreferences, setDiscoveryPreferences } from './render.js'
+import { toastError, toastInfo, toastSuccess, toastWarning } from './toast.js'
+
+export async function discoverDevices(): Promise<void> {
+  const btn = document.getElementById('discoverBtn') as HTMLButtonElement
+  const status = document.getElementById('discoverStatus')
+  const list = document.getElementById('discoveredList')
+  const autoAddAll = (document.getElementById('autoAddAllCheckbox') as HTMLInputElement)?.checked
+
+  if (!btn || !status || !list) { return }
+
+  try {
+    showBusyUi()
+    btn.disabled = true
+    btn.textContent = '🔍 Discovering...'
+    status.textContent = 'Searching SwitchBot account...'
+    status.classList.remove('error')
+
+    const devicesRaw = await apiDiscoverDevices()
+    uiLog.info('Discover response:', devicesRaw)
+
+    // Deduplicate by device ID
+    const devices = devicesRaw.filter((d, index, arr) => !!d?.id && arr.findIndex(x => x?.id === d.id) === index)
+
+    if (!devices.length) {
+      status.textContent = 'No devices found in your SwitchBot account'
+      toastInfo('No devices found in your SwitchBot account')
+      list.style.display = 'none'
+      return
+    }
+
+    // If auto-add is enabled, add all devices immediately using bulk endpoint
+    if (autoAddAll) {
+      status.textContent = `Auto-adding ${devices.length} device(s)...`
+
+      try {
+        const bulkResult = await addDevicesInBulk(
+          devices.map(d => ({
+            deviceId: d.id,
+            name: d.name,
+            type: d.type,
+            rssi: d.rssi,
+            address: d.address,
+            model: d.model,
+          })),
+        )
+        uiLog.info('Bulk add response:', bulkResult)
+
+        if (!bulkResult || bulkResult.success === false) {
+          throw new Error(bulkResult?.data?.message || 'Bulk add failed')
+        }
+
+        const addedCount
+          = bulkResult?.addedCount
+            ?? bulkResult?.data?.addedCount
+            ?? 0
+        const skippedCount
+          = bulkResult?.skippedCount
+            ?? bulkResult?.data?.skippedCount
+            ?? 0
+        status.textContent = `✓ Added ${addedCount} device(s)${skippedCount > 0 ? ` (${skippedCount} skipped)` : ''}`
+        if (addedCount > 0) {
+          toastSuccess(`Added ${addedCount} device(s)${skippedCount > 0 ? ` (${skippedCount} skipped)` : ''}`)
+        } else if (skippedCount > 0) {
+          toastWarning(`No new devices were added (${skippedCount} skipped)`)
+        }
+        status.classList.remove('error')
+        list.style.display = 'none'
+
+        // Sync parent Homebridge form cache and auto-save to prevent cache overwrite
+        // Run sync when discovery returned devices (even if backend response shape changes)
+        if (devices.length > 0) {
+          const synced = await syncParentPluginConfigFromDisk(true)
+          status.textContent += synced
+            ? ' - Config saved automatically.'
+            : ' - Warning: config may not persist until you close/reopen settings.'
+
+          if (synced) {
+            toastSuccess('Configuration synced and saved automatically')
+          } else {
+            toastWarning('Configuration sync failed; close and reopen settings before Save')
+          }
+        }
+      } catch (e) {
+        uiLog.error('Bulk add error:', e)
+        status.textContent = `✗ Error: ${e instanceof Error ? e.message : 'Failed to add devices'}`
+        status.classList.add('error')
+        toastError(e instanceof Error ? e.message : 'Failed to add devices')
+      }
+
+      // Refresh the configured devices list
+      await loadConfiguredDevices()
+      return
+    }
+
+    status.textContent = `Found ${devices.length} device(s)`
+
+    // Create filter/sort controls
+    const controlsDiv = document.createElement('div')
+    controlsDiv.style.cssText = 'margin-bottom: 12px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center;'
+
+    // Load saved preferences
+    const preferences = getDiscoveryPreferences()
+
+    // Filter buttons
+    const filterLabel = document.createElement('label')
+    filterLabel.style.fontSize = '12px'
+    filterLabel.style.fontWeight = '500'
+    filterLabel.textContent = 'Filter:'
+
+    const filterGroup = document.createElement('div')
+    filterGroup.style.display = 'flex'
+    filterGroup.style.gap = '4px'
+
+    const filterOptions: Array<{ label: string, value: 'all' | 'ble' | 'api' | 'both' | 'ir' }> = [
+      { label: 'All', value: 'all' },
+      { label: 'BLE', value: 'ble' },
+      { label: 'API', value: 'api' },
+      { label: 'Both', value: 'both' },
+      { label: 'IR', value: 'ir' },
+    ]
+
+    for (const option of filterOptions) {
+      const btn = document.createElement('button')
+      btn.textContent = option.label
+      btn.style.padding = '4px 8px'
+      btn.style.fontSize = '11px'
+      btn.style.borderRadius = '3px'
+      btn.style.cursor = 'pointer'
+      btn.style.border = preferences.connectionType === option.value ? '2px solid #007AFF' : '1px solid #ccc'
+      btn.style.backgroundColor = preferences.connectionType === option.value ? '#f0f7ff' : '#fff'
+
+      btn.onclick = () => {
+        preferences.connectionType = option.value
+        setDiscoveryPreferences(preferences)
+        updateDiscoveryView(devices, preferences)
+        // Update button styles
+        for (const b of Array.from(filterGroup.querySelectorAll('button'))) {
+          ;(b as HTMLButtonElement).style.border = '1px solid #ccc'
+          ;(b as HTMLButtonElement).style.backgroundColor = '#fff'
+        }
+        btn.style.border = '2px solid #007AFF'
+        btn.style.backgroundColor = '#f0f7ff'
+      }
+
+      filterGroup.appendChild(btn)
+    }
+
+    // Sort dropdown
+    const sortLabel = document.createElement('label')
+    sortLabel.style.fontSize = '12px'
+    sortLabel.style.fontWeight = '500'
+    sortLabel.style.marginLeft = '8px'
+    sortLabel.textContent = 'Sort:'
+
+    const sortSelect = document.createElement('select')
+    sortSelect.style.fontSize = '11px'
+    sortSelect.style.padding = '4px 8px'
+    sortSelect.style.borderRadius = '3px'
+    sortSelect.value = preferences.sortBy
+
+    const sortOptions = [
+      { label: 'Name', value: 'name' },
+      { label: 'Signal Strength', value: 'signal' },
+      { label: 'Type', value: 'type' },
+      { label: 'Connection', value: 'connection' },
+    ]
+
+    for (const opt of sortOptions) {
+      const option = document.createElement('option')
+      option.value = opt.value
+      option.textContent = opt.label
+      sortSelect.appendChild(option)
+    }
+
+    sortSelect.onchange = () => {
+      preferences.sortBy = sortSelect.value as any
+      setDiscoveryPreferences(preferences)
+      updateDiscoveryView(devices, preferences)
+    }
+
+    // Search box
+    const searchInput = document.createElement('input')
+    searchInput.type = 'text'
+    searchInput.placeholder = 'Search by name, ID, or type...'
+    searchInput.style.fontSize = '11px'
+    searchInput.style.padding = '4px 8px'
+    searchInput.style.borderRadius = '3px'
+    searchInput.style.border = '1px solid #ccc'
+    searchInput.style.flex = '1'
+    searchInput.style.minWidth = '200px'
+    searchInput.style.maxWidth = '300px'
+    searchInput.value = preferences.searchQuery
+
+    let searchTimeout: NodeJS.Timeout
+    searchInput.oninput = () => {
+      clearTimeout(searchTimeout)
+      searchTimeout = setTimeout(() => {
+        preferences.searchQuery = searchInput.value
+        setDiscoveryPreferences(preferences)
+        updateDiscoveryView(devices, preferences)
+      }, 300) // Debounce search
+    }
+
+    // Assemble controls
+    controlsDiv.appendChild(filterLabel)
+    controlsDiv.appendChild(filterGroup)
+    controlsDiv.appendChild(sortLabel)
+    controlsDiv.appendChild(sortSelect)
+    controlsDiv.appendChild(searchInput)
+
+    // Clear list and add controls
+    list.innerHTML = ''
+    list.appendChild(controlsDiv)
+
+    // Display discovery list
+    list.style.display = 'block'
+
+    // Initial render with saved preferences
+    await updateDiscoveryView(devices, preferences)
+  } catch (e) {
+    uiLog.error('Discovery error:', e)
+    status.textContent = `Error: ${e instanceof Error ? e.message : 'Discovery failed'}`
+    status.classList.add('error')
+    toastError(e instanceof Error ? e.message : 'Discovery failed')
+    list.style.display = 'none'
+  } finally {
+    hideBusyUi()
+    btn.disabled = false
+    btn.textContent = '🔍 Discover Devices'
+  }
+}
+
+/**
+ * Update discovery list with filtered and sorted devices
+ */
+async function updateDiscoveryView(
+  allDevices: any[],
+  preferences: {
+    connectionType: 'all' | 'ble' | 'api' | 'both' | 'ir'
+    sortBy: 'name' | 'signal' | 'type' | 'connection'
+    searchQuery: string
+  },
+): Promise<void> {
+  // Apply filters and sort
+  const filtered = filterDevices(allDevices, preferences.connectionType, preferences.searchQuery)
+  const sorted = sortDevices(filtered, preferences.sortBy)
+
+  // Render updated list
+  const ul = await renderDiscoveredDevices(sorted)
+  document.getElementById('discoveredDevices')?.replaceWith(ul)
+  ul.id = 'discoveredDevices'
+
+  // Update status with count
+  const status = document.getElementById('discoverStatus')
+  if (status) {
+    const totalCount = allDevices.length
+    const filteredCount = sorted.length
+    status.textContent = filteredCount === totalCount
+      ? `Found ${totalCount} device(s)`
+      : `Showing ${filteredCount} of ${totalCount} device(s)`
+  }
+}
+
+export async function addDeviceToConfig(device: any): Promise<void> {
+  const { addDeviceToConfig: addDevice } = await import('./devices.js')
+  await addDevice(device)
+}