@switchbot/homebridge-switchbot 5.0.0-beta.133 → 5.0.0-beta.135

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

@@ -1,7 +1,15 @@
 import { DEVICE_TYPES } from './constants.js'
 import { uiLog } from './logger.js'
 
-export async function importDiscoveredDevice(device: any): Promise<{ configDeviceName: string, configDeviceType: string, address?: string } | null> {
+export async function importDiscoveredDevice(device: any): Promise<{
+  configDeviceName: string
+  configDeviceType: string
+  address?: string
+  connectionPreference?: string
+  room?: string
+  encryptionKey?: string
+  keyId?: string
+} | null> {
   return new Promise((resolve) => {
     const div = document.createElement('div')
     div.style.position = 'fixed'
@@ -91,6 +99,51 @@ export async function importDiscoveredDevice(device: any): Promise<{ configDevic
       typeSelect.appendChild(optgroup)
     })
 
+    // --- Connection Preference ---
+    const connectionPrefLabel = document.createElement('label')
+    connectionPrefLabel.textContent = 'Connection Preference'
+    connectionPrefLabel.style.display = 'block'
+    connectionPrefLabel.style.marginBottom = '6px'
+    connectionPrefLabel.style.fontWeight = '500'
+    connectionPrefLabel.style.fontSize = '12px'
+    connectionPrefLabel.style.color = '#6b7280'
+
+    const connectionPrefSelect = document.createElement('select')
+    connectionPrefSelect.style.width = '100%'
+    connectionPrefSelect.style.marginBottom = '12px'
+    connectionPrefSelect.style.padding = '8px 10px'
+    connectionPrefSelect.style.borderRadius = '6px'
+    connectionPrefSelect.style.fontSize = '14px'
+    connectionPrefSelect.style.boxSizing = 'border-box';
+    ['auto', 'ble', 'openapi'].forEach((val) => {
+      const opt = document.createElement('option')
+      opt.value = val
+      opt.text = val.charAt(0).toUpperCase() + val.slice(1)
+      opt.selected = (device.connectionPreference || 'auto') === val
+      connectionPrefSelect.appendChild(opt)
+    })
+
+    // --- Room ---
+    const roomLabel = document.createElement('label')
+    roomLabel.textContent = 'Room'
+    roomLabel.style.display = 'block'
+    roomLabel.style.marginBottom = '6px'
+    roomLabel.style.fontWeight = '500'
+    roomLabel.style.fontSize = '12px'
+    roomLabel.style.color = '#6b7280'
+
+    const roomInput = document.createElement('input')
+    roomInput.type = 'text'
+    roomInput.value = device.room || ''
+    roomInput.placeholder = 'Optional room/location metadata'
+    roomInput.style.width = '100%'
+    roomInput.style.marginBottom = '12px'
+    roomInput.style.padding = '8px 10px'
+    roomInput.style.borderRadius = '6px'
+    roomInput.style.fontSize = '14px'
+    roomInput.style.boxSizing = 'border-box'
+
+    // --- BLE MAC Address ---
     const macLabel = document.createElement('label')
     macLabel.textContent = 'BLE MAC Address (optional)'
     macLabel.style.display = 'block'
@@ -110,7 +163,7 @@ export async function importDiscoveredDevice(device: any): Promise<{ configDevic
     macInput.style.fontSize = '14px'
     macInput.style.boxSizing = 'border-box'
 
-    // BLE Encryption Key
+    // --- Encryption Key ---
     const encryptionKeyLabel = document.createElement('label')
     encryptionKeyLabel.textContent = 'BLE Encryption Key (optional)'
     encryptionKeyLabel.style.display = 'block'
@@ -130,7 +183,7 @@ export async function importDiscoveredDevice(device: any): Promise<{ configDevic
     encryptionKeyInput.style.fontSize = '14px'
     encryptionKeyInput.style.boxSizing = 'border-box'
 
-    // BLE Key ID
+    // --- Key ID ---
     const keyIdLabel = document.createElement('label')
     keyIdLabel.textContent = 'BLE Key ID (optional)'
     keyIdLabel.style.display = 'block'
@@ -171,7 +224,15 @@ export async function importDiscoveredDevice(device: any): Promise<{ configDevic
     importBtn.style.padding = '8px 20px'
     importBtn.style.fontSize = '13px'
 
-    const cleanup = (result: { configDeviceName: string, configDeviceType: string, address?: string, encryptionKey?: string, keyId?: string } | null) => {
+    const cleanup = (result: {
+      configDeviceName: string
+      configDeviceType: string
+      address?: string
+      connectionPreference?: string
+      room?: string
+      encryptionKey?: string
+      keyId?: string
+    } | null) => {
       div.remove()
       resolve(result)
     }
@@ -181,6 +242,8 @@ export async function importDiscoveredDevice(device: any): Promise<{ configDevic
       configDeviceName: nameInput.value || device.name || device.id,
       configDeviceType: typeSelect.value || device.type,
       address: macInput.value || undefined,
+      connectionPreference: connectionPrefSelect.value || undefined,
+      room: roomInput.value || undefined,
       encryptionKey: encryptionKeyInput.value || undefined,
       keyId: keyIdInput.value || undefined,
     })
@@ -197,6 +260,10 @@ export async function importDiscoveredDevice(device: any): Promise<{ configDevic
     contentDiv.appendChild(nameInput)
     contentDiv.appendChild(typeLabel)
     contentDiv.appendChild(typeSelect)
+    contentDiv.appendChild(connectionPrefLabel)
+    contentDiv.appendChild(connectionPrefSelect)
+    contentDiv.appendChild(roomLabel)
+    contentDiv.appendChild(roomInput)
     contentDiv.appendChild(macLabel)
     contentDiv.appendChild(macInput)
     contentDiv.appendChild(encryptionKeyLabel)
@@ -250,58 +317,6 @@ export async function editDevice(device: any): Promise<void> {
     typeSelect.appendChild(optgroup)
   })
 
-  // --- Matter Type Advanced Field (only for window covering types) ---
-  const windowCoveringTypes = ['Roller Shade', 'Curtain', 'Curtain3', 'Blind Tilt']
-  const showMatterType = windowCoveringTypes.includes(device.configDeviceType || device.deviceType || device.type || '')
-  const matterTypeLabel = document.createElement('label')
-  matterTypeLabel.textContent = 'Matter Window Covering Type (Advanced)'
-  matterTypeLabel.style.display = showMatterType ? 'block' : 'none'
-  matterTypeLabel.style.marginBottom = '6px'
-  matterTypeLabel.style.fontWeight = '500'
-  matterTypeLabel.style.fontSize = '12px'
-  matterTypeLabel.style.color = '#6b7280'
-  matterTypeLabel.style.marginTop = '2px'
-  const matterTypes = [
-    { value: '', label: 'Auto-detect (recommended)' },
-    { value: 0, label: 'Roller Shade (0)' },
-    { value: 1, label: 'Roman Shade (1)' },
-    { value: 2, label: 'Balloon Shade (2)' },
-    { value: 3, label: 'Woven Wood (3)' },
-    { value: 4, label: 'Drapery (4)' },
-    { value: 5, label: 'Awning (5)' },
-    { value: 6, label: 'Shutter (6)' },
-    { value: 7, label: 'Tilt Blind (7)' },
-    { value: 8, label: 'Blind Tilt (8)' },
-    { value: 9, label: 'Projector Screen (9)' },
-    { value: 15, label: 'Other (15)' },
-  ]
-  const matterTypeSelect = document.createElement('select')
-  matterTypeSelect.style.width = '100%'
-  matterTypeSelect.style.marginBottom = '12px'
-  matterTypeSelect.style.padding = '8px 10px'
-  matterTypeSelect.style.borderRadius = '6px'
-  matterTypeSelect.style.fontSize = '14px'
-  matterTypeSelect.style.boxSizing = 'border-box'
-  matterTypes.forEach((opt) => {
-    const option = document.createElement('option')
-    option.value = String(opt.value)
-    option.textContent = opt.label
-    if (device.matterType != null && String(opt.value) === String(device.matterType)) {
-      option.selected = true
-    }
-    matterTypeSelect.appendChild(option)
-  })
-  function updateMatterTypeVisibility() {
-    if (windowCoveringTypes.includes(typeSelect.value)) {
-      matterTypeLabel.style.display = 'block'
-      matterTypeSelect.style.display = 'block'
-    } else {
-      matterTypeLabel.style.display = 'none'
-      matterTypeSelect.style.display = 'none'
-    }
-  }
-  typeSelect.addEventListener('change', updateMatterTypeVisibility)
-  updateMatterTypeVisibility()
   // Create modal dialog for editing
   const div = document.createElement('div')
   div.style.position = 'fixed'
@@ -402,6 +417,90 @@ export async function editDevice(device: any): Promise<void> {
     typeSelect.appendChild(optgroup)
   })
 
+  // --- Connection Preference ---
+  const connectionPrefLabel = document.createElement('label')
+  connectionPrefLabel.textContent = 'Connection Preference'
+  connectionPrefLabel.style.display = 'block'
+  connectionPrefLabel.style.marginBottom = '6px'
+  connectionPrefLabel.style.fontWeight = '500'
+  connectionPrefLabel.style.fontSize = '12px'
+  connectionPrefLabel.style.color = '#6b7280'
+
+  const connectionPrefSelect = document.createElement('select')
+  connectionPrefSelect.style.width = '100%'
+  connectionPrefSelect.style.marginBottom = '12px'
+  connectionPrefSelect.style.padding = '8px 10px'
+  connectionPrefSelect.style.borderRadius = '6px'
+  connectionPrefSelect.style.fontSize = '14px'
+  connectionPrefSelect.style.boxSizing = 'border-box'
+  ;['auto', 'ble', 'openapi'].forEach((val) => {
+    const opt = document.createElement('option')
+    opt.value = val
+    opt.text = val.charAt(0).toUpperCase() + val.slice(1)
+    opt.selected = (device.connectionPreference || 'auto') === val
+    connectionPrefSelect.appendChild(opt)
+  })
+
+  // --- Room ---
+  const roomLabel = document.createElement('label')
+  roomLabel.textContent = 'Room'
+  roomLabel.style.display = 'block'
+  roomLabel.style.marginBottom = '6px'
+  roomLabel.style.fontWeight = '500'
+  roomLabel.style.fontSize = '12px'
+  roomLabel.style.color = '#6b7280'
+
+  const roomInput = document.createElement('input')
+  roomInput.type = 'text'
+  roomInput.value = device.room || ''
+  roomInput.placeholder = 'Optional room/location metadata'
+  roomInput.style.width = '100%'
+  roomInput.style.marginBottom = '12px'
+  roomInput.style.padding = '8px 10px'
+  roomInput.style.borderRadius = '6px'
+  roomInput.style.fontSize = '14px'
+  roomInput.style.boxSizing = 'border-box'
+
+  // --- Encryption Key ---
+  const encryptionKeyLabel = document.createElement('label')
+  encryptionKeyLabel.textContent = 'BLE Encryption Key (optional)'
+  encryptionKeyLabel.style.display = 'block'
+  encryptionKeyLabel.style.marginBottom = '6px'
+  encryptionKeyLabel.style.fontWeight = '500'
+  encryptionKeyLabel.style.fontSize = '12px'
+  encryptionKeyLabel.style.color = '#6b7280'
+
+  const encryptionKeyInput = document.createElement('input')
+  encryptionKeyInput.type = 'password'
+  encryptionKeyInput.value = device.encryptionKey || ''
+  encryptionKeyInput.placeholder = 'Paste device BLE encryption key'
+  encryptionKeyInput.style.width = '100%'
+  encryptionKeyInput.style.marginBottom = '12px'
+  encryptionKeyInput.style.padding = '8px 10px'
+  encryptionKeyInput.style.borderRadius = '6px'
+  encryptionKeyInput.style.fontSize = '14px'
+  encryptionKeyInput.style.boxSizing = 'border-box'
+
+  // --- Key ID ---
+  const keyIdLabel = document.createElement('label')
+  keyIdLabel.textContent = 'BLE Key ID (optional)'
+  keyIdLabel.style.display = 'block'
+  keyIdLabel.style.marginBottom = '6px'
+  keyIdLabel.style.fontWeight = '500'
+  keyIdLabel.style.fontSize = '12px'
+  keyIdLabel.style.color = '#6b7280'
+
+  const keyIdInput = document.createElement('input')
+  keyIdInput.type = 'text'
+  keyIdInput.value = device.keyId || ''
+  keyIdInput.placeholder = 'e.g. ff'
+  keyIdInput.style.width = '100%'
+  keyIdInput.style.marginBottom = '12px'
+  keyIdInput.style.padding = '8px 10px'
+  keyIdInput.style.borderRadius = '6px'
+  keyIdInput.style.fontSize = '14px'
+  keyIdInput.style.boxSizing = 'border-box'
+
   const errorMessage = document.createElement('div')
   errorMessage.style.color = 'var(--switchbot-red, #ef4444)'
   errorMessage.style.marginBottom = '12px'
@@ -442,10 +541,32 @@ export async function editDevice(device: any): Promise<void> {
         deviceId: device.id,
         configDeviceName: nameInput.value || undefined,
         configDeviceType: typeSelect.value,
-        matterType: windowCoveringTypes.includes(typeSelect.value) && matterTypeSelect.value !== '' ? Number(matterTypeSelect.value) : undefined,
+        connectionPreference: connectionPrefSelect.value,
+        room: roomInput.value || undefined,
+        encryptionKey: encryptionKeyInput.value || undefined,
+        keyId: keyIdInput.value || undefined,
+      }
+
+      // Only include defined properties in the options object
+      const options: any = {}
+      if (params.connectionPreference !== undefined) {
+        options.connectionPreference = params.connectionPreference
+      }
+      if (params.room !== undefined) {
+        options.room = params.room
+      }
+      if (params.encryptionKey !== undefined) {
+        options.encryptionKey = params.encryptionKey
+      }
+      if (params.keyId !== undefined) {
+        options.keyId = params.keyId
       }
 
-      await updateDevice(params.deviceId, params.configDeviceName, params.configDeviceType, { matterType: params.matterType })
+      await updateDevice(
+        params.deviceId,
+        params.configDeviceName,
+        params.configDeviceType,
+      )
       await syncParentPluginConfigFromDisk()
 
       // Refresh device list
@@ -469,8 +590,14 @@ export async function editDevice(device: any): Promise<void> {
   contentDiv.appendChild(apiTypeInput)
   contentDiv.appendChild(typeLabel)
   contentDiv.appendChild(typeSelect)
-  contentDiv.appendChild(matterTypeLabel)
-  contentDiv.appendChild(matterTypeSelect)
+  contentDiv.appendChild(connectionPrefLabel)
+  contentDiv.appendChild(connectionPrefSelect)
+  contentDiv.appendChild(roomLabel)
+  contentDiv.appendChild(roomInput)
+  contentDiv.appendChild(encryptionKeyLabel)
+  contentDiv.appendChild(encryptionKeyInput)
+  contentDiv.appendChild(keyIdLabel)
+  contentDiv.appendChild(keyIdInput)
   contentDiv.appendChild(errorMessage)
   contentDiv.appendChild(buttons)
 

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

@@ -1,4 +1,9 @@
-import type { DEVICE_TYPES } from './constants.js'
+// Move regexes to module scope to avoid re-compilation on every call
+// import type { DEVICE_TYPES } from './constants.js' // Removed unused import
+
+const SPACES_REGEX = /\s/g
+const CAMELCASE_REGEX = /([A-Z])/g
+const FIRST_CHAR_REGEX = /^./
 
 /**
  * Get RSSI signal quality level and color based on dBm value
@@ -129,7 +134,9 @@ export function renderBadge(text: string, style: string): HTMLElement {
 }
 
 export function renderConnectionBadge(connectionType: string): HTMLElement | null {
-  if (!connectionType) { return null }
+  if (!connectionType) {
+    return null
+  }
 
   const badge = renderBadge(connectionType, '')
 
@@ -265,17 +272,27 @@ export function renderDeviceDetailsPanel(device: any): HTMLElement {
   let batteryHistory: Array<{ value: number, ts: number }> = []
   try {
     const raw = localStorage.getItem(batteryHistoryKey)
-    if (raw) batteryHistory = JSON.parse(raw)
-  } catch {}
+    if (raw) {
+      batteryHistory = JSON.parse(raw)
+    }
+  } catch (e) {
+    // Optionally log or handle error
+  }
   const now = Date.now()
   if (typeof device?.battery === 'number') {
     // Only add if different from last or >1h since last
-    const last = batteryHistory[batteryHistory.length - 1]
+    const last = batteryHistory.at(-1)
     if (!last || last.value !== device.battery || now - last.ts > 60 * 60 * 1000) {
       batteryHistory.push({ value: device.battery, ts: now })
       // Keep only last 30 entries (about a month if daily)
-      if (batteryHistory.length > 30) batteryHistory = batteryHistory.slice(-30)
-      try { localStorage.setItem(batteryHistoryKey, JSON.stringify(batteryHistory)) } catch {}
+      if (batteryHistory.length > 30) {
+        batteryHistory = batteryHistory.slice(-30)
+      }
+      try {
+        localStorage.setItem(batteryHistoryKey, JSON.stringify(batteryHistory))
+      } catch (e) {
+        // Optionally log or handle error
+      }
     }
   }
 
@@ -291,8 +308,6 @@ export function renderDeviceDetailsPanel(device: any): HTMLElement {
     { label: 'Last Seen', value: formatLastSeen(device?.lastSeen || device?.lastseen || device?.updatedAt) },
   ]
 
-
-
   for (const row of rows) {
     const line = document.createElement('div')
     line.style.display = 'flex'
@@ -366,7 +381,9 @@ export function renderDeviceDetailsPanel(device: any): HTMLElement {
       chart.style.height = '28px'
       chart.style.display = 'flex'
       // SVG sparkline
-      const w = 120, h = 24, pad = 2
+      const w = 120
+      const h = 24
+      const pad = 2
       const min = Math.min(...batteryHistory.map(b => b.value), 100)
       const max = Math.max(...batteryHistory.map(b => b.value), 0)
       const range = max - min || 1
@@ -424,11 +441,26 @@ export function renderDeviceDetailsPanel(device: any): HTMLElement {
 
   // --- Expose advanced/extra features dynamically ---
   const featureKeys = [
-    'airQuality', 'pm25', 'pm10', 'voc', 'co2', 'humidity', 'temperature',
-    'preset', 'mode', 'presetMode', 'direction', 'calibration', 'multiCommand',
-    'extendedInfo', 'segmentedControl', 'features', 'capabilities', 'state',
+    'airQuality',
+    'pm25',
+    'pm10',
+    'voc',
+    'co2',
+    'humidity',
+    'temperature',
+    'preset',
+    'mode',
+    'presetMode',
+    'direction',
+    'calibration',
+    'multiCommand',
+    'extendedInfo',
+    'segmentedControl',
+    'features',
+    'capabilities',
+    'state',
   ]
-  const shown = new Set(rows.map(r => r.label.toLowerCase().replace(/\s/g, '')))
+  const shown = new Set(rows.map(r => r.label.toLowerCase().replace(SPACES_REGEX, '')))
   for (const key of featureKeys) {
     if (device && device[key] !== undefined && !shown.has(key.toLowerCase())) {
       const line = document.createElement('div')
@@ -441,7 +473,7 @@ export function renderDeviceDetailsPanel(device: any): HTMLElement {
       const label = document.createElement('span')
       label.style.fontWeight = '600'
       label.style.minWidth = '110px'
-      label.textContent = key.replace(/([A-Z])/g, ' $1').replace(/^./, s => s.toUpperCase()) + ':'
+      label.textContent = `${key.replace(CAMELCASE_REGEX, ' $1').replace(FIRST_CHAR_REGEX, s => s.toUpperCase())}:`
 
       const value = document.createElement('span')
       value.style.fontFamily = 'monospace'
@@ -533,37 +565,38 @@ export async function renderDiscoveredDevices(
 
     nameContainer.appendChild(selectCheckbox)
 
-
     nameContainer.appendChild(name)
 
     // Show firmware update available indicator if present
     if (d.firmwareUpdateAvailable) {
-      const fwBadge = document.createElement('span');
-      fwBadge.textContent = 'Update Available';
-      fwBadge.style.cssText = 'background: #fb923c; color: #111; padding: 1px 7px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 6px;';
-      fwBadge.title = 'A firmware update is available for this device.';
-      nameContainer.appendChild(fwBadge);
+      const fwBadge = document.createElement('span')
+      fwBadge.textContent = 'Update Available'
+      fwBadge.style.cssText = 'background: #fb923c; color: #111; padding: 1px 7px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 6px;'
+      fwBadge.title = 'A firmware update is available for this device.'
+      nameContainer.appendChild(fwBadge)
     }
 
     // Show offline/unreachable indicator if device is offline
-    let offline = false;
-    let lastSeen = d.lastSeen || d.lastseen || d.updatedAt;
+    let offline = false
+    const lastSeen = d.lastSeen || d.lastseen || d.updatedAt
     if (typeof d.offline === 'boolean') {
-      offline = d.offline;
+      offline = d.offline
     } else if (lastSeen) {
       try {
-        const last = new Date(lastSeen).getTime();
-        if (!isNaN(last) && Date.now() - last > 1000 * 60 * 60) { // 1 hour
-          offline = true;
+        const last = new Date(lastSeen).getTime()
+        if (!Number.isNaN(last)) {
+          if (Date.now() - last > 1000 * 60 * 60) { // 1 hour
+            offline = true
+          }
         }
       } catch {}
     }
     if (offline) {
-      const offlineBadge = document.createElement('span');
-      offlineBadge.textContent = 'Offline';
-      offlineBadge.style.cssText = 'background: #dc2626; color: white; padding: 1px 7px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 6px;';
-      offlineBadge.title = 'Device is offline or unreachable.';
-      nameContainer.appendChild(offlineBadge);
+      const offlineBadge = document.createElement('span')
+      offlineBadge.textContent = 'Offline'
+      offlineBadge.style.cssText = 'background: #dc2626; color: white; padding: 1px 7px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 6px;'
+      offlineBadge.title = 'Device is offline or unreachable.'
+      nameContainer.appendChild(offlineBadge)
     }
 
     const expandedDetails = document.createElement('div')
@@ -596,7 +629,9 @@ export async function renderDiscoveredDevices(
     // Add connection type badge
     if (d.connectionType) {
       const badge = renderConnectionBadge(d.connectionType)
-      if (badge) { nameContainer.appendChild(badge) }
+      if (badge) {
+        nameContainer.appendChild(badge)
+      }
     }
 
     // Add IR badge if it's an IR device
@@ -612,14 +647,14 @@ export async function renderDiscoveredDevices(
 
     // Add battery warning indicator if battery < 20%
     if (typeof d.battery === 'number' && d.battery < 20) {
-      const batteryWarn = document.createElement('span');
-      batteryWarn.textContent = `⚠️ ${d.battery}%`;
-      batteryWarn.style.cssText =
-        d.battery < 10
+      const batteryWarn = document.createElement('span')
+      batteryWarn.textContent = `⚠️ ${d.battery}%`
+      batteryWarn.style.cssText
+        = d.battery < 10
           ? 'background: #dc2626; color: white; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 6px;'
-          : 'background: #fbbf24; color: #111; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 6px;';
-      batteryWarn.title = d.battery < 10 ? 'Battery critically low' : 'Battery low';
-      nameContainer.appendChild(batteryWarn);
+          : 'background: #fbbf24; color: #111; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 6px;'
+      batteryWarn.title = d.battery < 10 ? 'Battery critically low' : 'Battery low'
+      nameContainer.appendChild(batteryWarn)
     }
 
     const details = document.createElement('div')
@@ -632,8 +667,12 @@ export async function renderDiscoveredDevices(
     details.style.wordBreak = 'break-word'
 
     let detailsText = `ID: ${d.id} | Type: ${d.type} | Model: ${d.model || 'N/A'}`
-    if (d.hubDeviceId) { detailsText += ` | Hub: ${d.hubDeviceId}` }
-    if (d.address) { detailsText += ` | MAC: ${d.address}` }
+    if (d.hubDeviceId) {
+      detailsText += ` | Hub: ${d.hubDeviceId}`
+    }
+    if (d.address) {
+      detailsText += ` | MAC: ${d.address}`
+    }
     details.textContent = detailsText
 
     info.appendChild(nameContainer)
@@ -727,7 +766,7 @@ export function filterDevices(
 
   // Filter by connection type
   if (connectionType !== 'all') {
-    filtered = filtered.filter(d => {
+    filtered = filtered.filter((d) => {
       if (connectionType === 'ir') {
         return d.isIR === true
       }
@@ -747,7 +786,7 @@ export function filterDevices(
   // Filter by search query
   if (searchQuery.trim()) {
     const query = searchQuery.toLowerCase()
-    filtered = filtered.filter(d => {
+    filtered = filtered.filter((d) => {
       const name = (d.name || '').toLowerCase()
       const id = (d.id || '').toLowerCase()
       const type = (d.type || '').toLowerCase()
@@ -792,11 +831,11 @@ export function sortDevices(
     case 'connection': {
       // Sort by connection type: Both > BLE > OpenAPI > Others
       const connectionOrder: Record<string, number> = {
-        'Both': 0,
-        'BLE': 1,
-        'OpenAPI': 2,
-        'API': 2,
-        'Unknown': 3,
+        Both: 0,
+        BLE: 1,
+        OpenAPI: 2,
+        API: 2,
+        Unknown: 3,
       }
       sorted.sort((a, b) => {
         const aOrder = connectionOrder[a.connectionType || 'Unknown'] ?? 3
@@ -844,6 +883,9 @@ export function getDiscoveryPreferences(): {
 /**
  * Save filter/sort preferences to localStorage
  * @param preferences Preferences object to save
+ * @param preferences.connectionType Connection type filter
+ * @param preferences.sortBy Sort criterion
+ * @param preferences.searchQuery Search query string
  */
 export function setDiscoveryPreferences(preferences: {
   connectionType: 'all' | 'ble' | 'api' | 'both' | 'ir'
@@ -862,7 +904,9 @@ export function renderDeviceList(list: any[]): void {
   const status = document.getElementById('status')
   const removeAllContainer = document.getElementById('removeAllContainer')
 
-  if (!ul || !status) { return }
+  if (!ul || !status) {
+    return
+  }
 
   if (!list.length) {
     status.textContent = 'No devices found in config.'
@@ -1000,7 +1044,12 @@ export function renderDeviceList(list: any[]): void {
           copyBtn.classList.remove('success')
         }, 1200)
       } catch (e) {
-        alert('Failed to copy')
+        copyBtn.textContent = 'Failed'
+        copyBtn.classList.add('error')
+        setTimeout(() => {
+          copyBtn.textContent = 'Copy ID'
+          copyBtn.classList.remove('error')
+        }, 1200)
       }
     })
 
@@ -1023,4 +1072,6 @@ export function renderDeviceList(list: any[]): void {
     li.appendChild(buttons)
     ul.appendChild(li)
   }
+
+  // No return value needed for void function
 }

package/src/homebridge-ui/utils/logger.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-const PREFIX = '[SwitchBot UI]'
+const PREFIX = '[SwitchBot UI/Server]'
 
 export const uiLog = {
   info: (message: string, ...parameters: any[]) => {