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

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

@@ -0,0 +1,290 @@
+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'
+
+function normalizeId(value: any): string {
+  return String(value ?? '').trim().toLowerCase()
+}
+
+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.style.color = preferences.connectionType === option.value ? '#1d4ed8' : '#374151'
+
+      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'
+          ;(b as HTMLButtonElement).style.color = '#374151'
+        }
+        btn.style.border = '2px solid #007AFF'
+        btn.style.backgroundColor = '#f0f7ff'
+        btn.style.color = '#1d4ed8'
+      }
+
+      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)
+
+  // Build configured device lookup for duplicate detection
+  const configured = await fetchDevices()
+  const configuredIds = new Set((configured || []).map(d => normalizeId(d?.id || d?.deviceId)))
+
+  // Render updated list
+  const ul = await renderDiscoveredDevices(sorted, {
+    configuredIds,
+  })
+  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)
+}

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

@@ -0,0 +1,11 @@
+export const uiLog = {
+  info: (message: string, ...parameters: any[]): void => {
+    console.warn('[SwitchBot UI]', message, ...parameters)
+  },
+  warn: (message: string, ...parameters: any[]): void => {
+    console.warn('[SwitchBot UI]', message, ...parameters)
+  },
+  error: (message: string, ...parameters: any[]): void => {
+    console.error('[SwitchBot UI]', message, ...parameters)
+  },
+}

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

@@ -0,0 +1,28 @@
+import './types.js'
+import { uiLog } from './logger.js'
+
+function callUiMethod(name: keyof HomebridgePluginUiAPI): void {
+  try {
+    const value = homebridge?.[name]
+    if (typeof value === 'function') {
+      const fn = value as () => void
+      fn()
+    }
+  } catch (e) {
+    uiLog.warn(`Homebridge UI method ${String(name)} failed:`, e)
+  }
+}
+
+export function showBusyUi(): void {
+  callUiMethod('disableSaveButton')
+  callUiMethod('showSpinner')
+}
+
+export function hideBusyUi(): void {
+  callUiMethod('hideSpinner')
+  callUiMethod('enableSaveButton')
+}
+
+export function closeSettingsModal(): void {
+  callUiMethod('closeSettings')
+}

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

@@ -0,0 +1,367 @@
+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> {
+  return new Promise((resolve) => {
+    const div = document.createElement('div')
+    div.style.position = 'fixed'
+    div.style.top = '0'
+    div.style.left = '0'
+    div.style.width = '100%'
+    div.style.height = '100%'
+    div.style.background = 'rgba(0,0,0,0.7)'
+    div.style.display = 'flex'
+    div.style.alignItems = 'center'
+    div.style.justifyContent = 'center'
+    div.style.zIndex = '9999'
+
+    const modal = document.createElement('div')
+    modal.style.background = getComputedStyle(document.body).backgroundColor
+    modal.style.color = getComputedStyle(document.body).color
+    modal.style.padding = '0'
+    modal.style.borderRadius = '10px'
+    modal.style.minWidth = '440px'
+    modal.style.maxWidth = '90vw'
+    modal.style.boxShadow = '0 8px 32px rgba(0,0,0,0.35)'
+    modal.style.overflow = 'hidden'
+    modal.style.borderTop = '3px solid var(--switchbot-red, #ef4444)'
+
+    const title = document.createElement('h3')
+    title.textContent = 'Import Discovered Device'
+    title.style.marginTop = '0'
+    title.style.marginBottom = '16px'
+    title.style.padding = '20px 20px 0'
+    title.style.fontSize = '18px'
+    title.style.fontWeight = '600'
+    title.style.color = 'var(--switchbot-red, #ef4444)'
+    title.style.letterSpacing = '-0.02em'
+
+    const contentDiv = document.createElement('div')
+    contentDiv.style.padding = '0 20px 20px'
+
+    const nameLabel = document.createElement('label')
+    nameLabel.textContent = 'Device Name'
+    nameLabel.style.display = 'block'
+    nameLabel.style.marginBottom = '6px'
+    nameLabel.style.fontWeight = '500'
+    nameLabel.style.fontSize = '12px'
+    nameLabel.style.color = '#6b7280'
+
+    const nameInput = document.createElement('input')
+    nameInput.type = 'text'
+    nameInput.value = device.name || device.id || ''
+    nameInput.style.width = '100%'
+    nameInput.style.marginBottom = '12px'
+    nameInput.style.padding = '8px 10px'
+    nameInput.style.borderRadius = '6px'
+    nameInput.style.fontSize = '14px'
+    nameInput.style.boxSizing = 'border-box'
+
+    const typeLabel = document.createElement('label')
+    typeLabel.textContent = 'Config Device Type'
+    typeLabel.style.display = 'block'
+    typeLabel.style.marginBottom = '6px'
+    typeLabel.style.fontWeight = '500'
+    typeLabel.style.fontSize = '12px'
+    typeLabel.style.color = '#6b7280'
+
+    const typeSelect = document.createElement('select')
+    typeSelect.style.width = '100%'
+    typeSelect.style.padding = '8px 10px'
+    typeSelect.style.marginBottom = '12px'
+    typeSelect.style.borderRadius = '6px'
+    typeSelect.style.fontSize = '14px'
+    typeSelect.style.background = getComputedStyle(nameInput).background
+    typeSelect.style.color = getComputedStyle(nameInput).color
+    typeSelect.style.border = getComputedStyle(nameInput).border
+    typeSelect.style.boxSizing = 'border-box'
+
+    Object.keys(DEVICE_TYPES).forEach((categoryName) => {
+      const optgroup = document.createElement('optgroup')
+      optgroup.label = categoryName
+
+      DEVICE_TYPES[categoryName as keyof typeof DEVICE_TYPES].forEach((deviceType) => {
+        const opt = document.createElement('option')
+        opt.value = deviceType
+        opt.text = deviceType
+        const detectedType = (device.type || '').toLowerCase()
+        opt.selected = deviceType.toLowerCase() === detectedType
+        optgroup.appendChild(opt)
+      })
+
+      typeSelect.appendChild(optgroup)
+    })
+
+    const macLabel = document.createElement('label')
+    macLabel.textContent = 'BLE MAC Address (optional)'
+    macLabel.style.display = 'block'
+    macLabel.style.marginBottom = '6px'
+    macLabel.style.fontWeight = '500'
+    macLabel.style.fontSize = '12px'
+    macLabel.style.color = '#6b7280'
+
+    const macInput = document.createElement('input')
+    macInput.type = 'text'
+    macInput.value = device.address || ''
+    macInput.placeholder = 'AA:BB:CC:DD:EE:FF'
+    macInput.style.width = '100%'
+    macInput.style.marginBottom = '12px'
+    macInput.style.padding = '8px 10px'
+    macInput.style.borderRadius = '6px'
+    macInput.style.fontSize = '14px'
+    macInput.style.boxSizing = 'border-box'
+
+    const buttons = document.createElement('div')
+    buttons.style.display = 'flex'
+    buttons.style.gap = '10px'
+    buttons.style.justifyContent = 'flex-end'
+    buttons.style.marginTop = '18px'
+    buttons.style.paddingTop = '18px'
+    buttons.style.borderTop = '1px solid rgba(0, 0, 0, 0.08)'
+
+    const cancelBtn = document.createElement('button')
+    cancelBtn.textContent = 'Cancel'
+    cancelBtn.className = 'secondary'
+    cancelBtn.style.background = '#6b7280'
+    cancelBtn.style.padding = '8px 16px'
+    cancelBtn.style.fontSize = '13px'
+
+    const importBtn = document.createElement('button')
+    importBtn.textContent = 'Add to Config'
+    importBtn.style.background = 'var(--switchbot-red, #ef4444)'
+    importBtn.style.padding = '8px 20px'
+    importBtn.style.fontSize = '13px'
+
+    const cleanup = (result: { configDeviceName: string, configDeviceType: string, address?: string } | null) => {
+      div.remove()
+      resolve(result)
+    }
+
+    cancelBtn.onclick = () => cleanup(null)
+    importBtn.onclick = () => cleanup({
+      configDeviceName: nameInput.value || device.name || device.id,
+      configDeviceType: typeSelect.value || device.type,
+      address: macInput.value || undefined,
+    })
+
+    div.addEventListener('click', (event) => {
+      if (event.target === div) {
+        cleanup(null)
+      }
+    })
+
+    buttons.appendChild(cancelBtn)
+    buttons.appendChild(importBtn)
+    contentDiv.appendChild(nameLabel)
+    contentDiv.appendChild(nameInput)
+    contentDiv.appendChild(typeLabel)
+    contentDiv.appendChild(typeSelect)
+    contentDiv.appendChild(macLabel)
+    contentDiv.appendChild(macInput)
+    contentDiv.appendChild(buttons)
+
+    modal.appendChild(title)
+    modal.appendChild(contentDiv)
+    div.appendChild(modal)
+    document.body.appendChild(div)
+    nameInput.focus()
+  })
+}
+
+export async function editDevice(device: any): Promise<void> {
+  // Create modal dialog for editing
+  const div = document.createElement('div')
+  div.style.position = 'fixed'
+  div.style.top = '0'
+  div.style.left = '0'
+  div.style.width = '100%'
+  div.style.height = '100%'
+  div.style.background = 'rgba(0,0,0,0.7)'
+  div.style.display = 'flex'
+  div.style.alignItems = 'center'
+  div.style.justifyContent = 'center'
+  div.style.zIndex = '9999'
+
+  const modal = document.createElement('div')
+  modal.style.background = getComputedStyle(document.body).backgroundColor
+  modal.style.color = getComputedStyle(document.body).color
+  modal.style.padding = '0'
+  modal.style.borderRadius = '10px'
+  modal.style.minWidth = '440px'
+  modal.style.maxWidth = '90vw'
+  modal.style.boxShadow = '0 8px 32px rgba(0,0,0,0.35)'
+  modal.style.overflow = 'hidden'
+  modal.style.borderTop = '3px solid var(--switchbot-red, #ef4444)'
+
+  const title = document.createElement('h3')
+  title.textContent = 'Edit Device'
+  title.style.marginTop = '0'
+  title.style.marginBottom = '16px'
+  title.style.padding = '20px 20px 0'
+  title.style.fontSize = '18px'
+  title.style.fontWeight = '600'
+  title.style.color = 'var(--switchbot-red, #ef4444)'
+  title.style.letterSpacing = '-0.02em'
+
+  const contentDiv = document.createElement('div')
+  contentDiv.style.padding = '0 20px 20px'
+
+  const nameLabel = document.createElement('label')
+  nameLabel.textContent = 'Device Name'
+  nameLabel.style.display = 'block'
+  nameLabel.style.marginBottom = '6px'
+  nameLabel.style.fontWeight = '500'
+  nameLabel.style.fontSize = '12px'
+  nameLabel.style.color = '#6b7280'
+
+  const nameInput = document.createElement('input')
+  nameInput.type = 'text'
+  nameInput.value = device.name || device.id
+  nameInput.style.width = '100%'
+  nameInput.style.marginBottom = '12px'
+  nameInput.style.padding = '8px 10px'
+  nameInput.style.borderRadius = '6px'
+  nameInput.style.fontSize = '14px'
+  nameInput.style.boxSizing = 'border-box'
+  nameInput.style.transition = 'border-color 0.2s ease'
+
+  // Read-only API device type field
+  const apiTypeLabel = document.createElement('label')
+  apiTypeLabel.textContent = 'Device Type (API - Read Only)'
+  apiTypeLabel.style.display = 'block'
+  apiTypeLabel.style.marginBottom = '6px'
+  apiTypeLabel.style.fontWeight = '500'
+  apiTypeLabel.style.fontSize = '12px'
+  apiTypeLabel.style.color = '#6b7280'
+
+  const apiTypeInput = document.createElement('input')
+  apiTypeInput.type = 'text'
+  apiTypeInput.value = device.deviceType || device.type || 'Unknown'
+  apiTypeInput.readOnly = true
+  apiTypeInput.style.width = '100%'
+  apiTypeInput.style.marginBottom = '12px'
+  apiTypeInput.style.padding = '8px 10px'
+  apiTypeInput.style.borderRadius = '6px'
+  apiTypeInput.style.fontSize = '13px'
+  apiTypeInput.style.opacity = '0.6'
+  apiTypeInput.style.cursor = 'not-allowed'
+  apiTypeInput.style.boxSizing = 'border-box'
+  apiTypeInput.style.backgroundColor = '#f9fafb'
+
+  // Editable config device type dropdown
+  const typeLabel = document.createElement('label')
+  typeLabel.textContent = 'Config Device Type (Override)'
+  typeLabel.style.display = 'block'
+  typeLabel.style.marginBottom = '6px'
+  typeLabel.style.fontWeight = '500'
+  typeLabel.style.fontSize = '12px'
+  typeLabel.style.color = '#6b7280'
+
+  const typeSelect = document.createElement('select')
+  typeSelect.style.width = '100%'
+  typeSelect.style.padding = '8px 10px'
+  typeSelect.style.marginBottom = '12px'
+  typeSelect.style.borderRadius = '6px'
+  typeSelect.style.fontSize = '14px'
+  typeSelect.style.background = getComputedStyle(nameInput).background
+  typeSelect.style.color = getComputedStyle(nameInput).color
+  typeSelect.style.border = getComputedStyle(nameInput).border
+  typeSelect.style.boxSizing = 'border-box'
+  typeSelect.style.cursor = 'pointer'
+  typeSelect.style.transition = 'border-color 0.2s ease'
+
+  // Add option groups with all API device types
+  Object.keys(DEVICE_TYPES).forEach((categoryName) => {
+    const optgroup = document.createElement('optgroup')
+    optgroup.label = categoryName
+
+    DEVICE_TYPES[categoryName as keyof typeof DEVICE_TYPES].forEach((deviceType) => {
+      const opt = document.createElement('option')
+      opt.value = deviceType
+      opt.text = deviceType
+
+      // Select current configDeviceType if set, otherwise match API deviceType
+      const currentType = device.configDeviceType || device.deviceType || device.type || ''
+      opt.selected = currentType === deviceType
+      optgroup.appendChild(opt)
+    })
+
+    typeSelect.appendChild(optgroup)
+  })
+
+  const errorMessage = document.createElement('div')
+  errorMessage.style.color = 'var(--switchbot-red, #ef4444)'
+  errorMessage.style.marginBottom = '12px'
+  errorMessage.style.fontSize = '12px'
+  errorMessage.style.display = 'none'
+  errorMessage.style.padding = '8px 10px'
+  errorMessage.style.background = 'var(--switchbot-red-light, #fee2e2)'
+  errorMessage.style.borderRadius = '6px'
+  errorMessage.style.fontWeight = '500'
+
+  const buttons = document.createElement('div')
+  buttons.style.display = 'flex'
+  buttons.style.gap = '10px'
+  buttons.style.justifyContent = 'flex-end'
+  buttons.style.marginTop = '18px'
+  buttons.style.paddingTop = '18px'
+  buttons.style.borderTop = '1px solid rgba(0, 0, 0, 0.08)'
+
+  const cancelBtn = document.createElement('button')
+  cancelBtn.textContent = 'Cancel'
+  cancelBtn.className = 'secondary'
+  cancelBtn.style.background = '#6b7280'
+  cancelBtn.style.padding = '8px 16px'
+  cancelBtn.style.fontSize = '13px'
+  cancelBtn.onclick = () => div.remove()
+
+  const saveBtn = document.createElement('button')
+  saveBtn.textContent = 'Save'
+  saveBtn.style.background = 'var(--switchbot-red, #ef4444)'
+  saveBtn.style.padding = '8px 20px'
+  saveBtn.style.fontSize = '13px'
+  saveBtn.onclick = async () => {
+    try {
+      const { updateDevice, syncParentPluginConfigFromDisk, fetchDevices } = await import('./api.js')
+      const { renderDeviceList } = await import('./render.js')
+
+      const params = {
+        deviceId: device.id,
+        configDeviceName: nameInput.value || undefined,
+        configDeviceType: typeSelect.value,
+      }
+
+      await updateDevice(params.deviceId, params.configDeviceName, params.configDeviceType)
+      await syncParentPluginConfigFromDisk()
+
+      // Refresh device list
+      uiLog.info('[Edit Device] Refreshing device list after update')
+      const list = await fetchDevices()
+      renderDeviceList(list)
+      div.remove()
+    } catch (e) {
+      uiLog.error('Update error:', e)
+      errorMessage.textContent = `Error: ${e instanceof Error ? e.message : 'Failed to update device'}`
+      errorMessage.style.display = 'block'
+    }
+  }
+
+  buttons.appendChild(cancelBtn)
+  buttons.appendChild(saveBtn)
+
+  contentDiv.appendChild(nameLabel)
+  contentDiv.appendChild(nameInput)
+  contentDiv.appendChild(apiTypeLabel)
+  contentDiv.appendChild(apiTypeInput)
+  contentDiv.appendChild(typeLabel)
+  contentDiv.appendChild(typeSelect)
+  contentDiv.appendChild(errorMessage)
+  contentDiv.appendChild(buttons)
+
+  modal.appendChild(title)
+  modal.appendChild(contentDiv)
+
+  div.appendChild(modal)
+  document.body.appendChild(div)
+  nameInput.focus()
+}