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

package/src/homebridge-ui/public/css/styles.css

@@ -75,12 +75,13 @@ body {
     system-ui,
     -apple-system,
     Arial;
-  padding: 16px;
+  padding: 10px;
 }
 
 h1 {
-  font-size: 24px;
+  font-size: 18px;
   margin-top: 0;
+  margin-bottom: 10px;
 }
 
 h2 {
@@ -152,25 +153,25 @@ code {
 }
 
 .form-group {
-  margin-bottom: 16px;
+  margin-bottom: 10px;
 }
 
 label {
   display: block;
-  margin-bottom: 6px;
+  margin-bottom: 4px;
   font-weight: 500;
-  font-size: 12px;
+  font-size: 11px;
   color: #6b7280;
 }
 
 input {
   width: 100%;
   max-width: 400px;
-  padding: 8px 10px;
+  padding: 6px 8px;
   border: 1px solid #d1d5db;
   border-radius: 6px;
   font-family: system-ui, -apple-system, monospace;
-  font-size: 14px;
+  font-size: 12px;
   transition: all 0.2s ease;
 }
 
@@ -203,8 +204,8 @@ select:focus {
 }
 
 .status {
-  font-size: 14px;
-  margin-top: 4px;
+  font-size: 11px;
+  margin-top: 3px;
 }
 
 .status.ok {
@@ -221,27 +222,121 @@ select:focus {
 }
 
 .card {
-  padding: 16px;
+  padding: 12px;
   border-radius: 8px;
-  margin-bottom: 16px;
+  margin-bottom: 10px;
 }
 
-.device-item {
-  padding: 10px 12px;
-  border-radius: 6px;
+.card.compact {
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.card.compact h2 {
+  margin-top: 0;
+  margin-bottom: 6px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.card.compact .form-group {
   margin-bottom: 6px;
+}
+
+.card.compact label {
+  font-size: 11px;
+  margin-bottom: 2px;
+  display: block;
+}
+
+.card.compact input {
+  padding: 5px 8px;
+  font-size: 12px;
+}
+
+.card.compact button {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
+.card.compact .status {
+  font-size: 11px;
+  margin-top: 4px;
+}
+
+.credentials-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.credentials-row .form-group {
+  flex: 1 1 100%;
+  min-width: 0;
+}
+
+@media (min-width: 700px) {
+  .credentials-row {
+    gap: 10px;
+    align-items: start;
+  }
+
+  .credentials-row .form-group {
+    flex: 1 1 calc(50% - 5px);
+  }
+}
+
+.device-item {
+  padding: 5px 8px;
+  border-radius: 5px;
+  margin-bottom: 0;
   display: flex;
-  gap: 10px;
+  gap: 8px;
   align-items: center;
   justify-content: space-between;
   transition: all 0.2s ease;
+  height: 100%;
+  min-width: 0;
 }
 
 .device-item:hover {
-  transform: translateY(-1px);
+  transform: translateY(-0.5px);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
+.device-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+#devices.device-grid,
+#discoveredDevices.device-grid,
+ul.device-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  gap: 6px;
+  padding-left: 0;
+  list-style: none;
+  margin: 0;
+}
+
+.device-item code {
+  display: inline-block;
+  max-width: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+@media (max-width: 900px) {
+  .device-actions {
+    width: 100%;
+    justify-content: flex-start !important;
+    margin-left: 0 !important;
+  }
+}
+
 .card {
   padding: 16px;
   border-radius: 8px;

package/src/homebridge-ui/public/index.html

@@ -9,65 +9,45 @@
   <body>
     <h1>🤖 SwitchBot Configuration</h1>
 
-    <div class="card">
+    <div class="card compact">
       <h2>API Credentials</h2>
-      <p>
-        Configure your SwitchBot API token and secret to enable device discovery
-        and control.
-      </p>
-
-      <div class="form-group">
-        <label for="token">API Token:</label>
-        <input
-          type="password"
-          id="token"
-          placeholder="Enter your SwitchBot API token"
-        />
-        <div class="status" id="tokenStatus"></div>
-      </div>
-
-      <div class="form-group">
-        <label for="secret">API Secret:</label>
-        <input
-          type="password"
-          id="secret"
-          placeholder="Enter your SwitchBot API secret"
-        />
-        <div class="status" id="secretStatus"></div>
+      <div class="credentials-row">
+        <div class="form-group">
+          <label for="token">Token:</label>
+          <input type="password" id="token" placeholder="Enter token" />
+          <div class="status" id="tokenStatus"></div>
+        </div>
+        <div class="form-group">
+          <label for="secret">Secret:</label>
+          <input type="password" id="secret" placeholder="Enter secret" />
+          <div class="status" id="secretStatus"></div>
+        </div>
       </div>
-
-      <button id="saveBtn" onclick="saveCredentials()">Save Credentials</button>
+      <button id="saveBtn" onclick="saveCredentials()">Save</button>
       <div id="saveStatus"></div>
     </div>
 
-    <div class="card">
+    <div class="card compact">
       <h2>Discover Devices</h2>
-      <p>
-        Click "Discover" to find all devices available in your SwitchBot account
-        and add them to your configuration.
-      </p>
-      <div style="margin-bottom: 16px">
-        <label
-          style="display: flex; align-items: center; gap: 8px; cursor: pointer"
-        >
-          <input
-            type="checkbox"
-            id="autoAddAllCheckbox"
-            style="width: auto; margin: 0"
-          />
-          <span>Auto-add all discovered devices</span>
+      <div style="margin-bottom: 6px">
+        <label style="display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 11px">
+          <input type="checkbox" id="autoAddAllCheckbox" style="width: auto; margin: 0" />
+          <span>Auto-add all</span>
+          <span
+            title="When enabled, Discover immediately adds all found devices to your config. Existing devices are skipped automatically."
+            style="font-size: 11px; opacity: 0.7"
+          >ⓘ</span>
         </label>
+        <div style="margin-top: 2px; margin-left: 22px; font-size: 10px; opacity: 0.75; line-height: 1.25">
+          Adds all discovered devices automatically; already configured devices are skipped.
+        </div>
       </div>
-      <button
-        id="discoverBtn"
-        onclick="discoverDevices()"
-        style="margin-bottom: 16px"
-      >
-        🔍 Discover Devices
+      <button id="discoverBtn" onclick="discoverDevices()" style="margin-bottom: 8px">
+        🔍 Discover
       </button>
-      <div id="discoverStatus" style="margin-bottom: 16px"></div>
+      <div id="discoverStatus" style="margin-bottom: 6px; font-size: 11px"></div>
       <div id="discoveredList" style="display: none">
-        <h3 style="margin-top: 0">Available Devices</h3>
+        <h3 style="margin-top: 0; font-size: 12px; margin-bottom: 6px; font-weight: 600">Available Devices</h3>
         <ul
           id="discoveredDevices"
           style="max-height: 300px; overflow-y: auto"
@@ -75,22 +55,16 @@
       </div>
     </div>
 
-    <div class="card">
+    <div class="card compact">
       <h2>Configured Devices</h2>
-      <p>
-        This page lists devices found in your Homebridge config for the
-        SwitchBot platform. Use the copy button to insert device IDs into the
-        plugin configuration. Connection preference (BLE/OpenAPI) is shown when
-        available.
-      </p>
       <div id="status">Loading…</div>
       <ul id="devices"></ul>
       <div
         id="removeAllContainer"
         style="
           display: none;
-          margin-top: 16px;
-          padding-top: 16px;
+          margin-top: 12px;
+          padding-top: 10px;
           border-top: 1px solid rgba(0, 0, 0, 0.1);
         "
       >
@@ -99,8 +73,8 @@
           style="
             background: #dc2626;
             width: 100%;
-            padding: 10px 16px;
-            font-size: 14px;
+            padding: 7px 12px;
+            font-size: 12px;
             font-weight: 500;
           "
         >

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

@@ -229,6 +229,19 @@ export async function discoverDevices(): Promise<void> {
     list.innerHTML = ''
     list.appendChild(controlsDiv)
 
+    // Create or get the device list container
+    let deviceListContainer = document.getElementById('discoveredDevices')
+    if (!deviceListContainer) {
+      deviceListContainer = document.createElement('ul')
+      deviceListContainer.id = 'discoveredDevices'
+      deviceListContainer.style.maxHeight = '400px'
+      deviceListContainer.style.overflowY = 'auto'
+      deviceListContainer.style.marginTop = '12px'
+      deviceListContainer.style.padding = '0'
+      deviceListContainer.style.listStyle = 'none'
+      list.appendChild(deviceListContainer)
+    }
+
     // Display discovery list
     list.style.display = 'block'
 
@@ -270,7 +283,18 @@ async function updateDiscoveryView(
   const ul = await renderDiscoveredDevices(sorted, {
     configuredIds,
   })
-  document.getElementById('discoveredDevices')?.replaceWith(ul)
+  
+  // Replace or append the rendered list
+  const existingList = document.getElementById('discoveredDevices')
+  if (existingList && existingList.parentNode) {
+    existingList.replaceWith(ul)
+  } else {
+    // Fallback: append to discovery list container
+    const listContainer = document.getElementById('discoveredList')
+    if (listContainer) {
+      listContainer.appendChild(ul)
+    }
+  }
   ul.id = 'discoveredDevices'
 
   // Update status with count

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

@@ -181,6 +181,7 @@ export async function renderDiscoveredDevices(
   options: { configuredIds?: Set<string> } = {},
 ): Promise<HTMLElement> {
   const ul = document.createElement('ul')
+  ul.className = 'device-grid'
   ul.style.maxHeight = '400px'
   ul.style.overflowY = 'auto'
   ul.style.marginTop = '12px'
@@ -198,26 +199,29 @@ 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
 
     nameContainer.appendChild(name)
@@ -225,8 +229,8 @@ export async function renderDiscoveredDevices(
     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
@@ -247,10 +251,13 @@ export async function renderDiscoveredDevices(
     }
 
     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}` }
@@ -262,9 +269,10 @@ export async function renderDiscoveredDevices(
 
     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,17 +292,24 @@ 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)
       li.appendChild(actions)
@@ -302,8 +317,19 @@ export async function renderDiscoveredDevices(
       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)
+
     li.appendChild(info)
-    li.appendChild(addBtn)
+    li.appendChild(actions)
     ul.appendChild(li)
   }
 
@@ -474,6 +500,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,25 +512,36 @@ 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 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'
+    code.style.marginLeft = '0'
+    code.style.whiteSpace = 'normal'
+    code.style.overflowWrap = 'anywhere'
+    code.style.wordBreak = 'break-word'
+    code.style.maxWidth = '100%'
 
     nameContainer.appendChild(name)
     nameContainer.appendChild(code)
@@ -516,8 +554,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}` : ''
@@ -528,13 +566,19 @@ export function renderDeviceList(list: any[]): void {
     info.appendChild(meta)
 
     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 +586,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 +604,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')

package/src/platform.ts

@@ -132,12 +132,7 @@ const DEVICE_MATTER_CLUSTERS: Record<string, any> = {
       minLevel: 0,
       maxLevel: 254,
     },
-    colorControl: {
-      currentHue: 0,
-      currentSaturation: 0,
-      colorTemperatureMireds: 400,
-      colorMode: 0,
-    },
+    colorControl: {},
   }, // Lightbulb with color → OnOff + LevelControl + ColorControl
   lock: {
     doorLock: {

package/test/e2e/run-e2e.spec.ts

@@ -1,21 +1,21 @@
-import { describe, test } from 'vitest'
-import { promisify } from 'util'
-import { execFile } from 'child_process'
-import path from 'path'
+import { execFile } from 'node:child_process'
+import path from 'node:path'
+import { promisify } from 'node:util'
+import { describe, it } from 'vitest'
 
 const execFileP = promisify(execFile)
 
-describe('E2E scripts (manual-run harness)', () => {
+describe('e2e scripts (manual-run harness)', () => {
   if (!process.env.RUN_E2E) {
-    test.skip('E2E disabled - set RUN_E2E=true to enable', () => {})
+    it.skip('e2e disabled - set RUN_E2E=true to enable', () => {})
     return
   }
 
-  test('run configured E2E scripts sequentially', async () => {
+  it('should run configured e2e scripts sequentially', async () => {
     const repoRoot = path.resolve(__dirname, '../../')
     const scriptsDir = path.join(repoRoot, 'scripts', 'e2e')
 
-    const scriptsToRun: { envVar: string; script: string }[] = [
+    const scriptsToRun: { envVar: string, script: string }[] = [
       { envVar: 'LIGHT_ACCESSORY_ID', script: 'light-e2e.sh' },
       { envVar: 'FAN_ACCESSORY_ID', script: 'fan-e2e.sh' },
       { envVar: 'CURTAIN_ACCESSORY_ID', script: 'curtain-e2e.sh' },
@@ -32,7 +32,7 @@ describe('E2E scripts (manual-run harness)', () => {
 
       const scriptPath = path.join(scriptsDir, s.script)
       // Forward environment so scripts can read HB_URL / HB_TOKEN / <ACCESSORY_ID>
-      const env = Object.assign({}, process.env)
+      const env = { ...process.env }
 
       try {
         // eslint-disable-next-line no-console
@@ -40,7 +40,9 @@ describe('E2E scripts (manual-run harness)', () => {
         const { stdout, stderr } = await execFileP('bash', [scriptPath], { env })
         // eslint-disable-next-line no-console
         console.log(stdout)
-        if (stderr) console.error(stderr)
+        if (stderr) {
+          console.error(stderr)
+        }
       } catch (e: any) {
         // bubble up as test failure
         throw new Error(`Script ${s.script} failed: ${e.message}`)

package/test/helpers/matter-harness.ts

@@ -47,7 +47,7 @@ export function makeFakeApiWithoutMatter() {
     isMatterEnabled: () => false,
     hap: makeFakeHap(),
     platformAccessory: PlatformAccessory,
-    registerPlatformAccessories: (_p: string, _n: string, accs: any[]) => {},
-    on: (_ev: string, cb: Function) => {},
+    registerPlatformAccessories: () => {},
+    on: () => {},
   }
 }