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

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

@@ -176,11 +176,238 @@ function scrollToConfiguredDevice(deviceId: string): void {
   }, 1800)
 }
 
+function createConnectionTestControls(device: any): HTMLElement {
+  const controls = document.createElement('div')
+  controls.style.display = 'inline-flex'
+  controls.style.alignItems = 'center'
+  controls.style.gap = '6px'
+
+  const button = document.createElement('button')
+  button.textContent = 'Test Connection'
+  button.className = 'secondary'
+  button.style.padding = '4px 9px'
+  button.style.fontSize = '11px'
+
+  const status = document.createElement('span')
+  status.style.fontSize = '10px'
+  status.style.opacity = '0.85'
+  status.style.whiteSpace = 'normal'
+  status.style.overflowWrap = 'anywhere'
+
+  button.onclick = async () => {
+    const startedAt = Date.now()
+    button.disabled = true
+    button.textContent = 'Testing...'
+    status.textContent = 'Checking...'
+    status.style.color = '#6b7280'
+
+    try {
+      const { testDeviceConnection } = await import('./api.js')
+      const result = await testDeviceConnection({
+        deviceId: String(device?.id || device?.deviceId || ''),
+        connectionType: device?.connectionType,
+        address: device?.address,
+      })
+
+      const measuredLatency = Number(result?.latencyMs) > 0
+        ? Number(result.latencyMs)
+        : Date.now() - startedAt
+
+      if (result?.success) {
+        const method = result?.method || 'Auto'
+        status.textContent = `✓ ${method} · ${measuredLatency}ms`
+        status.style.color = '#16a34a'
+      } else {
+        const detail = result?.message ? ` · ${result.message}` : ''
+        status.textContent = `✗ Failed · ${measuredLatency}ms${detail}`
+        status.style.color = '#dc2626'
+      }
+    } catch (e) {
+      status.textContent = `✗ Failed · ${Date.now() - startedAt}ms`
+      status.style.color = '#dc2626'
+    } finally {
+      button.disabled = false
+      button.textContent = 'Test Connection'
+    }
+  }
+
+  controls.appendChild(button)
+  controls.appendChild(status)
+  return controls
+}
+
+function formatLastSeen(value: any): string {
+  if (!value) {
+    return 'N/A'
+  }
+  try {
+    const date = new Date(value)
+    return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleString()
+  } catch (_e) {
+    return String(value)
+  }
+}
+
+export function renderDeviceDetailsPanel(device: any): HTMLElement {
+  const details = document.createElement('div')
+  details.style.cssText = `
+    border-top: 1px solid #ddd;
+    padding: 8px;
+    background: #f9fafb;
+    border-radius: 4px;
+    font-size: 12px;
+    margin-top: 4px;
+  `
+
+  // --- Battery history trending ---
+  // Persist battery readings in localStorage per device
+  const batteryHistoryKey = `batteryHistory:${device?.id || device?.deviceId}`
+  let batteryHistory: Array<{ value: number, ts: number }> = []
+  try {
+    const raw = localStorage.getItem(batteryHistoryKey)
+    if (raw) batteryHistory = JSON.parse(raw)
+  } catch {}
+  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]
+    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 {}
+    }
+  }
+
+  const rows: Array<{ label: string, value: string, copyable?: boolean }> = [
+    { label: 'Device ID', value: String(device?.id || device?.deviceId || 'N/A'), copyable: !!(device?.id || device?.deviceId) },
+    { label: 'MAC Address', value: String(device?.address || 'N/A'), copyable: !!device?.address },
+    { label: 'Device Type', value: String(device?.type || device?.configDeviceType || 'N/A') },
+    { label: 'Model', value: String(device?.model || 'N/A') },
+    { label: 'Hub ID', value: String(device?.hubDeviceId || 'N/A') },
+    { label: 'Battery', value: device?.battery !== undefined && device?.battery !== null ? `${device.battery}%` : 'N/A' },
+    { label: 'Firmware', value: String(device?.version || device?.firmware || 'N/A') },
+    { label: 'Cloud Service', value: device?.enabled === false ? 'Disabled' : 'Enabled' },
+    { 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'
+    line.style.alignItems = 'center'
+    line.style.justifyContent = 'space-between'
+    line.style.gap = '8px'
+    line.style.padding = '2px 0'
+
+    const label = document.createElement('span')
+    label.style.fontWeight = '600'
+    label.style.minWidth = '110px'
+    label.textContent = `${row.label}:`
+
+    const valueWrap = document.createElement('span')
+    valueWrap.style.display = 'inline-flex'
+    valueWrap.style.alignItems = 'center'
+    valueWrap.style.gap = '6px'
+    valueWrap.style.flex = '1'
+    valueWrap.style.justifyContent = 'flex-end'
+    valueWrap.style.minWidth = '0'
+
+    const value = document.createElement('span')
+    value.style.fontFamily = 'monospace'
+    value.style.fontSize = '11px'
+    value.style.opacity = '0.9'
+    value.style.whiteSpace = 'normal'
+    value.style.overflowWrap = 'anywhere'
+    value.style.wordBreak = 'break-word'
+    value.style.textAlign = 'right'
+    value.textContent = row.value
+
+    valueWrap.appendChild(value)
+
+    if (row.copyable && row.value && row.value !== 'N/A') {
+      const copyBtn = document.createElement('button')
+      copyBtn.textContent = '📋'
+      copyBtn.title = `Copy ${row.label}`
+      copyBtn.style.padding = '2px 6px'
+      copyBtn.style.fontSize = '10px'
+      copyBtn.style.lineHeight = '1'
+      copyBtn.style.background = '#e5e7eb'
+      copyBtn.style.color = '#111827'
+
+      copyBtn.onclick = async () => {
+        try {
+          await navigator.clipboard.writeText(row.value)
+          copyBtn.textContent = '✓'
+          setTimeout(() => {
+            copyBtn.textContent = '📋'
+          }, 1200)
+        } catch (_e) {
+          copyBtn.textContent = '!'
+          setTimeout(() => {
+            copyBtn.textContent = '📋'
+          }, 1200)
+        }
+      }
+
+      valueWrap.appendChild(copyBtn)
+    }
+
+    line.appendChild(label)
+    line.appendChild(valueWrap)
+    details.appendChild(line)
+  }
+
+  // --- 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',
+  ]
+  const shown = new Set(rows.map(r => r.label.toLowerCase().replace(/\s/g, '')))
+  for (const key of featureKeys) {
+    if (device && device[key] !== undefined && !shown.has(key.toLowerCase())) {
+      const line = document.createElement('div')
+      line.style.display = 'flex'
+      line.style.alignItems = 'center'
+      line.style.justifyContent = 'space-between'
+      line.style.gap = '8px'
+      line.style.padding = '2px 0'
+
+      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()) + ':'
+
+      const value = document.createElement('span')
+      value.style.fontFamily = 'monospace'
+      value.style.fontSize = '11px'
+      value.style.opacity = '0.9'
+      value.style.whiteSpace = 'normal'
+      value.style.overflowWrap = 'anywhere'
+      value.style.wordBreak = 'break-word'
+      value.style.textAlign = 'right'
+      value.textContent = typeof device[key] === 'object' ? JSON.stringify(device[key]) : String(device[key])
+
+      line.appendChild(label)
+      line.appendChild(value)
+      details.appendChild(line)
+    }
+  }
+
+  return details
+}
+
 export async function renderDiscoveredDevices(
   devices: any[],
-  options: { configuredIds?: Set<string> } = {},
+  options: {
+    configuredIds?: Set<string>
+    selectedIds?: Set<string>
+    onToggleSelect?: (device: any, selected: boolean) => void
+  } = {},
 ): Promise<HTMLElement> {
   const ul = document.createElement('ul')
+  ul.className = 'device-grid'
   ul.style.maxHeight = '400px'
   ul.style.overflowY = 'auto'
   ul.style.marginTop = '12px'
@@ -190,6 +417,8 @@ export async function renderDiscoveredDevices(
   const { addDeviceToConfig } = await import('./discovery.js')
   const { loadConfiguredDevices } = await import('./devices.js')
   const configuredIds = options.configuredIds ?? new Set<string>()
+  const selectedIds = options.selectedIds ?? new Set<string>()
+  const onToggleSelect = options.onToggleSelect
 
   for (const d of devices) {
     const deviceId = normalizeId(d.id)
@@ -198,35 +427,106 @@ export async function renderDiscoveredDevices(
     const li = document.createElement('li')
     li.className = 'device-item'
     li.style.display = 'flex'
-    li.style.alignItems = 'center'
-    li.style.justifyContent = 'space-between'
-    li.style.padding = '10px 12px'
-    li.style.marginBottom = '6px'
-    li.style.borderRadius = '6px'
+    li.style.flexDirection = 'column'
+    li.style.alignItems = 'stretch'
+    li.style.justifyContent = 'flex-start'
+    li.style.padding = '5px 8px'
+    li.style.marginBottom = '0'
+    li.style.borderRadius = '5px'
     li.style.transition = 'all 0.2s ease'
 
     const info = document.createElement('div')
-    info.style.flex = '1'
+    info.style.flex = '1 1 auto'
+    info.style.width = '100%'
+    info.style.minWidth = '0'
 
     const nameContainer = document.createElement('div')
     nameContainer.style.display = 'flex'
     nameContainer.style.alignItems = 'center'
-    nameContainer.style.marginBottom = '4px'
+    nameContainer.style.marginBottom = '0'
     nameContainer.style.flexWrap = 'wrap'
-    nameContainer.style.gap = '6px'
+    nameContainer.style.gap = '4px'
 
     const name = document.createElement('div')
     name.style.fontWeight = '500'
-    name.style.fontSize = '14px'
+    name.style.fontSize = '13px'
     name.textContent = d.name || d.id
 
+    const selectCheckbox = document.createElement('input')
+    selectCheckbox.type = 'checkbox'
+    selectCheckbox.style.width = 'auto'
+    selectCheckbox.style.margin = '0 2px 0 0'
+    selectCheckbox.checked = selectedIds.has(deviceId)
+    if (alreadyAdded) {
+      selectCheckbox.disabled = true
+      selectCheckbox.title = 'Already configured'
+    }
+    selectCheckbox.onchange = () => {
+      onToggleSelect?.(d, selectCheckbox.checked)
+      // Notify listeners (e.g., batch buttons) of selection change
+      window.dispatchEvent(new CustomEvent('discovery-selection-changed'))
+    }
+
+    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);
+    }
+
+    // Show offline/unreachable indicator if device is offline
+    let offline = false;
+    let lastSeen = d.lastSeen || d.lastseen || d.updatedAt;
+    if (typeof d.offline === 'boolean') {
+      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;
+        }
+      } 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 expandedDetails = document.createElement('div')
+    expandedDetails.style.display = 'none'
+    expandedDetails.appendChild(renderDeviceDetailsPanel(d))
+
+    const expandBtn = document.createElement('button')
+    expandBtn.textContent = '▾'
+    expandBtn.title = 'Show details'
+    expandBtn.style.padding = '2px 6px'
+    expandBtn.style.fontSize = '11px'
+    expandBtn.style.marginLeft = '4px'
+    expandBtn.style.background = '#e5e7eb'
+    expandBtn.style.color = '#111827'
+    expandBtn.style.transition = 'transform 0.2s ease'
+    expandBtn.onclick = () => {
+      const isHidden = expandedDetails.style.display === 'none'
+      expandedDetails.style.display = isHidden ? 'block' : 'none'
+      expandBtn.style.transform = isHidden ? 'rotate(180deg)' : 'rotate(0deg)'
+    }
+    nameContainer.appendChild(expandBtn)
+
     const duplicateBadge = document.createElement('span')
     duplicateBadge.textContent = alreadyAdded ? '✓ Already Added' : '➕ New Device'
     duplicateBadge.style.cssText = alreadyAdded
-      ? 'background: #16a34a; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600;'
-      : 'background: #2563eb; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600;'
+      ? 'background: #16a34a; color: white; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 600;'
+      : 'background: #2563eb; color: white; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 600;'
     nameContainer.appendChild(duplicateBadge)
 
     // Add connection type badge
@@ -246,11 +546,26 @@ export async function renderDiscoveredDevices(
       nameContainer.appendChild(renderSignalQualityBadge(d.rssi))
     }
 
+    // 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
+          ? '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);
+    }
+
     const details = document.createElement('div')
-    details.style.fontSize = '11px'
+    details.style.fontSize = '10px'
     details.style.opacity = '0.7'
-    details.style.marginTop = '4px'
+    details.style.marginTop = '0'
     details.style.fontFamily = 'monospace'
+    details.style.whiteSpace = 'normal'
+    details.style.overflowWrap = 'anywhere'
+    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}` }
@@ -259,12 +574,14 @@ export async function renderDiscoveredDevices(
 
     info.appendChild(nameContainer)
     info.appendChild(details)
+    info.appendChild(expandedDetails)
 
     const addBtn = document.createElement('button')
     addBtn.textContent = alreadyAdded ? 'Already Added' : 'Add to Config'
-    addBtn.style.marginLeft = '8px'
-    addBtn.style.padding = '6px 14px'
-    addBtn.style.fontSize = '12px'
+    addBtn.style.marginLeft = '0'
+    addBtn.style.marginTop = '2px'
+    addBtn.style.padding = '4px 9px'
+    addBtn.style.fontSize = '11px'
     addBtn.style.whiteSpace = 'nowrap'
     addBtn.style.flexShrink = '0'
     addBtn.disabled = alreadyAdded
@@ -284,26 +601,46 @@ export async function renderDiscoveredDevices(
       const viewBtn = document.createElement('button')
       viewBtn.textContent = 'View in Config'
       viewBtn.className = 'secondary'
-      viewBtn.style.marginLeft = '8px'
-      viewBtn.style.padding = '6px 12px'
-      viewBtn.style.fontSize = '12px'
+      viewBtn.style.marginLeft = '0'
+      viewBtn.style.padding = '4px 9px'
+      viewBtn.style.fontSize = '11px'
       viewBtn.onclick = async () => {
         await loadConfiguredDevices()
         scrollToConfiguredDevice(d.id)
       }
       li.appendChild(info)
       const actions = document.createElement('div')
+      actions.className = 'device-actions'
       actions.style.display = 'flex'
       actions.style.alignItems = 'center'
+      actions.style.flexWrap = 'wrap'
+      actions.style.justifyContent = 'flex-start'
+      actions.style.marginLeft = '0'
+      actions.style.width = '100%'
+      actions.style.marginTop = '2px'
+      actions.style.gap = '5px'
       actions.appendChild(viewBtn)
       actions.appendChild(addBtn)
+      actions.appendChild(createConnectionTestControls(d))
       li.appendChild(actions)
       ul.appendChild(li)
       continue
     }
 
+    const actions = document.createElement('div')
+    actions.className = 'device-actions'
+    actions.style.display = 'flex'
+    actions.style.flexWrap = 'wrap'
+    actions.style.justifyContent = 'flex-start'
+    actions.style.marginLeft = '0'
+    actions.style.width = '100%'
+    actions.style.marginTop = '2px'
+    actions.style.gap = '5px'
+    actions.appendChild(addBtn)
+    actions.appendChild(createConnectionTestControls(d))
+
     li.appendChild(info)
-    li.appendChild(addBtn)
+    li.appendChild(actions)
     ul.appendChild(li)
   }
 
@@ -474,6 +811,7 @@ export function renderDeviceList(list: any[]): void {
   }
 
   status.textContent = `Found ${list.length} device(s)`
+  ul.classList.add('device-grid')
   ul.innerHTML = ''
 
   // Show remove all button when devices exist
@@ -485,27 +823,64 @@ export function renderDeviceList(list: any[]): void {
     const li = document.createElement('li')
     li.className = 'device-item'
     li.setAttribute('data-device-id', normalizeId(d.id))
+    li.style.display = 'flex'
+    li.style.flexDirection = 'column'
+    li.style.alignItems = 'stretch'
+    li.style.marginBottom = '0'
 
     const info = document.createElement('div')
-    info.style.flex = '1'
+    info.style.flex = '1 1 auto'
+    info.style.width = '100%'
+    info.style.minWidth = '0'
 
     const nameContainer = document.createElement('div')
     nameContainer.style.display = 'flex'
-    nameContainer.style.alignItems = 'center'
-    nameContainer.style.flexWrap = 'wrap'
-    nameContainer.style.gap = '6px'
+    nameContainer.style.flexDirection = 'column'
+    nameContainer.style.alignItems = 'flex-start'
+    nameContainer.style.gap = '0'
 
     const name = document.createElement('div')
     name.style.fontWeight = '500'
+    name.style.fontSize = '13px'
     name.textContent = d.name || d.id
 
+    const expandedDetails = document.createElement('div')
+    expandedDetails.style.display = 'none'
+    expandedDetails.appendChild(renderDeviceDetailsPanel(d))
+
+    const expandBtn = document.createElement('button')
+    expandBtn.textContent = '▾'
+    expandBtn.title = 'Show details'
+    expandBtn.style.padding = '2px 6px'
+    expandBtn.style.fontSize = '11px'
+    expandBtn.style.marginLeft = '4px'
+    expandBtn.style.background = '#e5e7eb'
+    expandBtn.style.color = '#111827'
+    expandBtn.style.transition = 'transform 0.2s ease'
+    expandBtn.onclick = () => {
+      const isHidden = expandedDetails.style.display === 'none'
+      expandedDetails.style.display = isHidden ? 'block' : 'none'
+      expandBtn.style.transform = isHidden ? 'rotate(180deg)' : 'rotate(0deg)'
+    }
+
     const code = document.createElement('code')
     code.textContent = d.id
-    code.style.fontSize = '12px'
+    code.style.fontSize = '10px'
     code.style.opacity = '0.75'
-    code.style.marginLeft = '8px'
-
-    nameContainer.appendChild(name)
+    code.style.marginLeft = '0'
+    code.style.whiteSpace = 'normal'
+    code.style.overflowWrap = 'anywhere'
+    code.style.wordBreak = 'break-word'
+    code.style.maxWidth = '100%'
+
+    const headerRow = document.createElement('div')
+    headerRow.style.display = 'inline-flex'
+    headerRow.style.alignItems = 'center'
+    headerRow.style.gap = '4px'
+    headerRow.appendChild(name)
+    headerRow.appendChild(expandBtn)
+
+    nameContainer.appendChild(headerRow)
     nameContainer.appendChild(code)
 
     // Add signal strength visualization if RSSI is available
@@ -516,8 +891,8 @@ export function renderDeviceList(list: any[]): void {
 
     const meta = document.createElement('div')
     meta.style.opacity = '0.75'
-    meta.style.marginTop = '4px'
-    meta.style.fontSize = '12px'
+    meta.style.marginTop = '0'
+    meta.style.fontSize = '11px'
 
     const typeText = d.type ? `type: ${d.type}` : ''
     const connText = d.connectionPreference ? `conn: ${d.connectionPreference}` : ''
@@ -526,15 +901,22 @@ export function renderDeviceList(list: any[]): void {
 
     info.appendChild(nameContainer)
     info.appendChild(meta)
+    info.appendChild(expandedDetails)
 
     const buttons = document.createElement('div')
+    buttons.className = 'device-actions'
     buttons.style.display = 'flex'
-    buttons.style.gap = '8px'
+    buttons.style.flexWrap = 'wrap'
+    buttons.style.justifyContent = 'flex-start'
+    buttons.style.marginLeft = '0'
+    buttons.style.width = '100%'
+    buttons.style.marginTop = '2px'
+    buttons.style.gap = '5px'
 
     const editBtn = document.createElement('button')
     editBtn.textContent = '✏️ Edit'
-    editBtn.style.padding = '6px 12px'
-    editBtn.style.fontSize = '12px'
+    editBtn.style.padding = '4px 9px'
+    editBtn.style.fontSize = '11px'
     editBtn.onclick = async () => {
       const { editDevice } = await import('./modals.js')
       await editDevice(d)
@@ -542,8 +924,8 @@ export function renderDeviceList(list: any[]): void {
 
     const copyBtn = document.createElement('button')
     copyBtn.textContent = 'Copy ID'
-    copyBtn.style.padding = '6px 12px'
-    copyBtn.style.fontSize = '12px'
+    copyBtn.style.padding = '4px 9px'
+    copyBtn.style.fontSize = '11px'
     copyBtn.addEventListener('click', async () => {
       try {
         await navigator.clipboard.writeText(d.id)
@@ -560,8 +942,8 @@ export function renderDeviceList(list: any[]): void {
 
     const deleteBtn = document.createElement('button')
     deleteBtn.textContent = '🗑️ Delete'
-    deleteBtn.style.padding = '6px 12px'
-    deleteBtn.style.fontSize = '12px'
+    deleteBtn.style.padding = '4px 9px'
+    deleteBtn.style.fontSize = '11px'
     deleteBtn.style.background = '#ef4444'
     deleteBtn.onclick = async () => {
       const { deleteDeviceFromConfig } = await import('./devices-delete.js')
@@ -570,6 +952,7 @@ export function renderDeviceList(list: any[]): void {
 
     buttons.appendChild(editBtn)
     buttons.appendChild(copyBtn)
+    buttons.appendChild(createConnectionTestControls(d))
     buttons.appendChild(deleteBtn)
 
     li.appendChild(info)

package/src/platform.ts

@@ -65,7 +65,7 @@ const DEVICE_MATTER_SUPPORTED: Record<string, boolean> = {
 // Default Matter cluster configurations by device type
 // Maps device types to their Matter cluster states (used when device doesn't provide clusters)
 // Note: wosweeper/curtain/plug variants are normalized before cluster lookup (see loadDevices)
-const DEVICE_MATTER_CLUSTERS: Record<string, any> = {
+export const DEVICE_MATTER_CLUSTERS: Record<string, any> = {
   // Core devices - aligned with HAP service implementations
   bot: { onOff: { onOff: false } }, // Switch → OnOff
   vacuum: {
@@ -133,9 +133,6 @@ const DEVICE_MATTER_CLUSTERS: Record<string, any> = {
       maxLevel: 254,
     },
     colorControl: {
-      currentHue: 0,
-      currentSaturation: 0,
-      colorTemperatureMireds: 400,
       colorMode: 0,
     },
   }, // Lightbulb with color → OnOff + LevelControl + ColorControl
@@ -1099,6 +1096,8 @@ export class SwitchBotHAPPlatform {
         id: raw.deviceId ?? raw.id,
         name: raw.configDeviceName ?? raw.name,
         type: raw.configDeviceType ?? raw.type ?? raw.deviceType ?? 'unknown',
+        encryptionKey: raw.encryptionKey,
+        keyId: raw.keyId,
         _raw: raw,
       }