@switchbot/homebridge-switchbot 5.0.0-beta.56 → 5.0.0-beta.58

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

@@ -28,7 +28,8 @@
 <div id="menuWrapper" class="btn-group w-100 mb-0" role="group" aria-label="UI Menu" style="display: none">
   <button type="button" class="btn btn-primary" id="menuSettings">Settings</button>
   <button type="button" class="btn btn-primary" id="menuDevices">Devices</button>
-  <button type="button" class="btn btn-primary mr-0" id="menuHome">Support</button>
+  <button type="button" class="btn btn-primary" id="menuHome">Support</button>
+  <button type="button" class="btn btn-primary mr-0" id="dynamic-config-tab">Dynamic Config</button>
 </div>
 <div id="disabledBanner" class="alert alert-secondary mb-0 mt-3" role="alert" style="display: none">
   Plugin is currently disabled
@@ -121,7 +122,7 @@
   <h5>Help/About</h5>
   <ul>
     <li>
-      <a href="https://github.com/OpenWonderLabs/homebridge-switchbot/issues/new/choose" target="_blank">Support
+      <a href="https://
         Request</a>
     </li>
     <li>
@@ -130,6 +131,11 @@
     </li>
   </ul>
 </div>
+<div id="dynamic-config-content" class="tab-content" style="display: none;">
+  <h2>Dynamic Config</h2>
+  <p>Discover and configure devices dynamically.</p>
+  <!-- Placeholder for dynamic content -->
+</div>
 <script>
   (async () => {
     try {
@@ -223,6 +229,23 @@
           option.value = a.UUID;
           deviceSelect.add(option);
         });
+        const validateConfig = (config) => {
+          const deviceIds = new Set();
+          const isValid = config[0].options.devices.every((device) => {
+            if (!device.deviceId || typeof device.deviceId !== 'string') {
+              homebridge.toast.error(`Invalid device ID: ${device.deviceId}`, 'Error');
+              return false;
+            }
+            if (deviceIds.has(device.deviceId)) {
+              homebridge.toast.error(`Duplicate device ID found: ${device.deviceId}`, 'Error');
+              return false;
+            }
+            deviceIds.add(device.deviceId);
+            return true;
+          });
+          return isValid;
+        };
+
         const addDeviceToConfig = async (deviceId) => {
           try {
             homebridge.showSpinner();
@@ -237,6 +260,10 @@
               allowPush: false,
               disableCaching: false,
             });
+            if (!validateConfig(currentConfig)) {
+              homebridge.hideSpinner();
+              return;
+            }
             await homebridge.updatePluginConfig(currentConfig);
             await homebridge.savePluginConfig();
             homebridge.toast.success('Device added to config successfully!', 'Success');
@@ -250,7 +277,7 @@
         const addDeviceButton = document.createElement('button');
         addDeviceButton.textContent = 'Add Device to Config';
         addDeviceButton.className = 'btn btn-success';
-        addDeviceButton.style.marginLeft = '10px';
+        addDeviceButton.style.marginTop = '10px';
         addDeviceButton.addEventListener('click', () => {
           const deviceId = document.getElementById('deviceId').textContent;
           if (deviceId) {
@@ -259,63 +286,60 @@
             homebridge.toast.error('No device ID found!', 'Error');
           }
         });
-        document.getElementById('displayName').appendChild(addDeviceButton);
+        document.getElementById('deviceInfo').appendChild(addDeviceButton);
 
         const protocolInfo = document.createElement('p');
         protocolInfo.id = 'protocolInfo';
         protocolInfo.style.marginTop = '10px';
         document.getElementById('deviceInfo').appendChild(protocolInfo);
 
-        const showDeviceDetailsDropdown = (deviceContext) => {
-          const dropdown = document.createElement('select');
-          dropdown.className = 'form-control';
-          dropdown.style.marginTop = '10px';
+        const updateTableWithDetails = (deviceContext) => {
+          const tableBody = document.querySelector('#deviceTable tbody');
+          tableBody.innerHTML = '';
 
           Object.entries(deviceContext).forEach(([key, value]) => {
-            const option = document.createElement('option');
-            option.textContent = `${key}: ${value}`;
-            dropdown.appendChild(option);
+            if (value !== undefined && value !== null && String(value).trim() !== '') {
+              const row = document.createElement('tr');
+              const keyCell = document.createElement('th');
+              keyCell.scope = 'row';
+              keyCell.textContent = key;
+              const valueCell = document.createElement('td');
+              valueCell.textContent = value;
+              row.appendChild(keyCell);
+              row.appendChild(valueCell);
+              tableBody.appendChild(row);
+            }
           });
-
-          const existingDropdown = document.getElementById('deviceDetailsDropdown');
-          if (existingDropdown) {
-            existingDropdown.replaceWith(dropdown);
-          } else {
-            dropdown.id = 'deviceDetailsDropdown';
-            document.getElementById('deviceInfo').appendChild(dropdown);
-          }
         };
 
         showDeviceInfo = async (UUID) => {
-          homebridge.showSpinner();
-          const thisAcc = cachedAccessories.find((x) => x.UUID === UUID);
-          const context = thisAcc.context;
-
-          const updateElement = (id, value) => {
-            const element = document.getElementById(id);
-            if (value === undefined || value === null || String(value).trim() === '') {
-              element.style.display = 'none';
-            } else {
-              element.style.display = '';
-              element.innerHTML = value;
+          try {
+            homebridge.showSpinner();
+            const thisAcc = cachedAccessories.find((x) => x.UUID === UUID);
+            if (!thisAcc) {
+              throw new Error('Device not found');
             }
-          };
+            const context = thisAcc.context;
+            document.getElementById('displayName').innerHTML = thisAcc.displayName;
+            document.getElementById('deviceId').innerHTML = context.deviceId;
+            document.getElementById('model').innerHTML = context.model;
+            document.getElementById('version').innerHTML = context.version;
+            document.getElementById('deviceType').innerHTML = context.deviceType;
+            document.getElementById('connectionType').innerHTML = context.connectionType;
+            document.getElementById('refreshRate').innerHTML = context.refreshRate;
+            document.getElementById('updateRate').innerHTML = context.updateRate;
+            document.getElementById('pushRate').innerHTML = context.pushRate;
+            document.getElementById('deviceTable').style.display = 'inline-table';
 
-          updateElement('displayName', thisAcc.displayName);
-          updateElement('deviceId', context.deviceId);
-          updateElement('model', context.model);
-          updateElement('version', context.version);
-          updateElement('deviceType', context.deviceType);
-          updateElement('connectionType', context.connectionType);
-          updateElement('refreshRate', context.refreshRate);
-          updateElement('updateRate', context.updateRate);
-          updateElement('pushRate', context.pushRate);
+            const protocol = thisAcc.isMatter ? 'Matter Protocol' : 'HAP Protocol';
+            document.getElementById('protocolInfo').textContent = protocol;
 
-          document.getElementById('deviceTable').style.display = 'inline-table';
-          updateElement('protocolInfo', thisAcc.isMatter ? 'Matter Protocol' : 'HAP Protocol');
-
-          showDeviceDetailsDropdown(context);
-          homebridge.hideSpinner();
+            updateTableWithDetails(context);
+          } catch (error) {
+            homebridge.toast.error(error.message, 'Error');
+          } finally {
+            homebridge.hideSpinner();
+          }
         };
         deviceSelect.addEventListener('change', (event) => showDeviceInfo(event.target.value));
         if (cachedAccessories.length > 0) {
@@ -386,4 +410,12 @@
       homebridge.hideSpinner();
     }
   })();
+
+  document.getElementById('dynamic-config-tab').addEventListener('click', function() {
+    // Hide other tabs
+    document.querySelectorAll('.tab-content').forEach(tab => tab.style.display = 'none');
+
+    // Show Dynamic Config tab
+    document.getElementById('dynamic-config-content').style.display = 'block';
+  });
 </script>

package/docs/variables/default.html

@@ -1 +1 @@
-<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>default | @switchbot/homebridge-switchbot</title><meta name="description" content="Documentation for @switchbot/homebridge-switchbot"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">@switchbot/homebridge-switchbot</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">default</a></li></ul><h1>Variable default</h1></div><div class="tsd-signature"><span class="tsd-kind-variable">default</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">api</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">API</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">void</span></div><div class="tsd-type-declaration"><h4>Type Declaration</h4><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures"><li class="tsd-signature" id="__type"><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">api</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">API</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">api</span>: <span class="tsd-signature-type">API</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/OpenWonderLabs/homebridge-switchbot/blob/c54b1e8490ae8c9d4967e1f0cc561142055fadc4/src/index.ts#L13">index.ts:13</a></li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">@switchbot/homebridge-switchbot</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
+<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>default | @switchbot/homebridge-switchbot</title><meta name="description" content="Documentation for @switchbot/homebridge-switchbot"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">@switchbot/homebridge-switchbot</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">default</a></li></ul><h1>Variable default</h1></div><div class="tsd-signature"><span class="tsd-kind-variable">default</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">api</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">API</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">void</span></div><div class="tsd-type-declaration"><h4>Type Declaration</h4><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures"><li class="tsd-signature" id="__type"><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">api</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">API</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">api</span>: <span class="tsd-signature-type">API</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/OpenWonderLabs/homebridge-switchbot/blob/7d8706abf1b9b1652d5a8615f70372fedcf3ae66/src/index.ts#L13">index.ts:13</a></li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">@switchbot/homebridge-switchbot</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@switchbot/homebridge-switchbot",
   "displayName": "SwitchBot",
   "type": "module",
-  "version": "5.0.0-beta.56",
+  "version": "5.0.0-beta.58",
   "description": "The SwitchBot plugin allows you to access your SwitchBot device(s) from HomeKit.",
   "author": "SwitchBot <support@wondertechlabs.com> (https://github.com/SwitchBot)",
   "contributors": [

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

@@ -28,7 +28,8 @@
 <div id="menuWrapper" class="btn-group w-100 mb-0" role="group" aria-label="UI Menu" style="display: none">
   <button type="button" class="btn btn-primary" id="menuSettings">Settings</button>
   <button type="button" class="btn btn-primary" id="menuDevices">Devices</button>
-  <button type="button" class="btn btn-primary mr-0" id="menuHome">Support</button>
+  <button type="button" class="btn btn-primary" id="menuHome">Support</button>
+  <button type="button" class="btn btn-primary mr-0" id="dynamic-config-tab">Dynamic Config</button>
 </div>
 <div id="disabledBanner" class="alert alert-secondary mb-0 mt-3" role="alert" style="display: none">
   Plugin is currently disabled
@@ -121,7 +122,7 @@
   <h5>Help/About</h5>
   <ul>
     <li>
-      <a href="https://github.com/OpenWonderLabs/homebridge-switchbot/issues/new/choose" target="_blank">Support
+      <a href="https://
         Request</a>
     </li>
     <li>
@@ -130,6 +131,11 @@
     </li>
   </ul>
 </div>
+<div id="dynamic-config-content" class="tab-content" style="display: none;">
+  <h2>Dynamic Config</h2>
+  <p>Discover and configure devices dynamically.</p>
+  <!-- Placeholder for dynamic content -->
+</div>
 <script>
   (async () => {
     try {
@@ -223,6 +229,23 @@
           option.value = a.UUID;
           deviceSelect.add(option);
         });
+        const validateConfig = (config) => {
+          const deviceIds = new Set();
+          const isValid = config[0].options.devices.every((device) => {
+            if (!device.deviceId || typeof device.deviceId !== 'string') {
+              homebridge.toast.error(`Invalid device ID: ${device.deviceId}`, 'Error');
+              return false;
+            }
+            if (deviceIds.has(device.deviceId)) {
+              homebridge.toast.error(`Duplicate device ID found: ${device.deviceId}`, 'Error');
+              return false;
+            }
+            deviceIds.add(device.deviceId);
+            return true;
+          });
+          return isValid;
+        };
+
         const addDeviceToConfig = async (deviceId) => {
           try {
             homebridge.showSpinner();
@@ -237,6 +260,10 @@
               allowPush: false,
               disableCaching: false,
             });
+            if (!validateConfig(currentConfig)) {
+              homebridge.hideSpinner();
+              return;
+            }
             await homebridge.updatePluginConfig(currentConfig);
             await homebridge.savePluginConfig();
             homebridge.toast.success('Device added to config successfully!', 'Success');
@@ -250,7 +277,7 @@
         const addDeviceButton = document.createElement('button');
         addDeviceButton.textContent = 'Add Device to Config';
         addDeviceButton.className = 'btn btn-success';
-        addDeviceButton.style.marginLeft = '10px';
+        addDeviceButton.style.marginTop = '10px';
         addDeviceButton.addEventListener('click', () => {
           const deviceId = document.getElementById('deviceId').textContent;
           if (deviceId) {
@@ -259,63 +286,60 @@
             homebridge.toast.error('No device ID found!', 'Error');
           }
         });
-        document.getElementById('displayName').appendChild(addDeviceButton);
+        document.getElementById('deviceInfo').appendChild(addDeviceButton);
 
         const protocolInfo = document.createElement('p');
         protocolInfo.id = 'protocolInfo';
         protocolInfo.style.marginTop = '10px';
         document.getElementById('deviceInfo').appendChild(protocolInfo);
 
-        const showDeviceDetailsDropdown = (deviceContext) => {
-          const dropdown = document.createElement('select');
-          dropdown.className = 'form-control';
-          dropdown.style.marginTop = '10px';
+        const updateTableWithDetails = (deviceContext) => {
+          const tableBody = document.querySelector('#deviceTable tbody');
+          tableBody.innerHTML = '';
 
           Object.entries(deviceContext).forEach(([key, value]) => {
-            const option = document.createElement('option');
-            option.textContent = `${key}: ${value}`;
-            dropdown.appendChild(option);
+            if (value !== undefined && value !== null && String(value).trim() !== '') {
+              const row = document.createElement('tr');
+              const keyCell = document.createElement('th');
+              keyCell.scope = 'row';
+              keyCell.textContent = key;
+              const valueCell = document.createElement('td');
+              valueCell.textContent = value;
+              row.appendChild(keyCell);
+              row.appendChild(valueCell);
+              tableBody.appendChild(row);
+            }
           });
-
-          const existingDropdown = document.getElementById('deviceDetailsDropdown');
-          if (existingDropdown) {
-            existingDropdown.replaceWith(dropdown);
-          } else {
-            dropdown.id = 'deviceDetailsDropdown';
-            document.getElementById('deviceInfo').appendChild(dropdown);
-          }
         };
 
         showDeviceInfo = async (UUID) => {
-          homebridge.showSpinner();
-          const thisAcc = cachedAccessories.find((x) => x.UUID === UUID);
-          const context = thisAcc.context;
-
-          const updateElement = (id, value) => {
-            const element = document.getElementById(id);
-            if (value === undefined || value === null || String(value).trim() === '') {
-              element.style.display = 'none';
-            } else {
-              element.style.display = '';
-              element.innerHTML = value;
+          try {
+            homebridge.showSpinner();
+            const thisAcc = cachedAccessories.find((x) => x.UUID === UUID);
+            if (!thisAcc) {
+              throw new Error('Device not found');
             }
-          };
+            const context = thisAcc.context;
+            document.getElementById('displayName').innerHTML = thisAcc.displayName;
+            document.getElementById('deviceId').innerHTML = context.deviceId;
+            document.getElementById('model').innerHTML = context.model;
+            document.getElementById('version').innerHTML = context.version;
+            document.getElementById('deviceType').innerHTML = context.deviceType;
+            document.getElementById('connectionType').innerHTML = context.connectionType;
+            document.getElementById('refreshRate').innerHTML = context.refreshRate;
+            document.getElementById('updateRate').innerHTML = context.updateRate;
+            document.getElementById('pushRate').innerHTML = context.pushRate;
+            document.getElementById('deviceTable').style.display = 'inline-table';
 
-          updateElement('displayName', thisAcc.displayName);
-          updateElement('deviceId', context.deviceId);
-          updateElement('model', context.model);
-          updateElement('version', context.version);
-          updateElement('deviceType', context.deviceType);
-          updateElement('connectionType', context.connectionType);
-          updateElement('refreshRate', context.refreshRate);
-          updateElement('updateRate', context.updateRate);
-          updateElement('pushRate', context.pushRate);
+            const protocol = thisAcc.isMatter ? 'Matter Protocol' : 'HAP Protocol';
+            document.getElementById('protocolInfo').textContent = protocol;
 
-          document.getElementById('deviceTable').style.display = 'inline-table';
-          updateElement('protocolInfo', thisAcc.isMatter ? 'Matter Protocol' : 'HAP Protocol');
-
-          showDeviceDetailsDropdown(context);
-          homebridge.hideSpinner();
+            updateTableWithDetails(context);
+          } catch (error) {
+            homebridge.toast.error(error.message, 'Error');
+          } finally {
+            homebridge.hideSpinner();
+          }
         };
         deviceSelect.addEventListener('change', (event) => showDeviceInfo(event.target.value));
         if (cachedAccessories.length > 0) {
@@ -386,4 +410,12 @@
       homebridge.hideSpinner();
     }
   })();
+
+  document.getElementById('dynamic-config-tab').addEventListener('click', function() {
+    // Hide other tabs
+    document.querySelectorAll('.tab-content').forEach(tab => tab.style.display = 'none');
+
+    // Show Dynamic Config tab
+    document.getElementById('dynamic-config-content').style.display = 'block';
+  });
 </script>

package/assets/device-details-mockup.svg

@@ -1,38 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600">
-  <!-- Background -->
-  <rect width="800" height="600" fill="#f8f9fa" />
-
-  <!-- Header -->
-  <rect x="0" y="0" width="800" height="50" fill="#343a40" />
-  <text x="400" y="30" fill="#ffffff" font-size="20" text-anchor="middle" font-family="Arial">SwitchBot - Device Details</text>
-
-  <!-- Device Info Section -->
-  <rect x="50" y="70" width="700" height="400" fill="#ffffff" stroke="#ced4da" stroke-width="1" />
-
-  <!-- Device Name -->
-  <text x="70" y="110" fill="#212529" font-size="16" font-family="Arial">Device Name:</text>
-  <text x="200" y="110" fill="#212529" font-size="16" font-family="Arial">Master Bedroom Left Curtain</text>
-
-  <!-- Device ID -->
-  <text x="70" y="140" fill="#212529" font-size="16" font-family="Arial">Device ID:</text>
-  <text x="200" y="140" fill="#212529" font-size="16" font-family="Arial">84F703B3A45A</text>
-
-  <!-- Model -->
-  <text x="70" y="170" fill="#212529" font-size="16" font-family="Arial">Model:</text>
-  <text x="200" y="170" fill="#212529" font-size="16" font-family="Arial">Color Bulb</text>
-
-  <!-- Connection Type -->
-  <text x="70" y="200" fill="#212529" font-size="16" font-family="Arial">Connection Type:</text>
-  <text x="200" y="200" fill="#212529" font-size="16" font-family="Arial">BLE</text>
-
-  <!-- Protocol -->
-  <text x="70" y="230" fill="#212529" font-size="16" font-family="Arial">Protocol:</text>
-  <text x="200" y="230" fill="#212529" font-size="16" font-family="Arial">HAP Protocol</text>
-
-  <!-- Dropdown for Device Details -->
-  <rect x="70" y="270" width="660" height="40" fill="#ffffff" stroke="#ced4da" stroke-width="1" />
-  <text x="400" y="295" fill="#212529" font-size="16" text-anchor="middle" font-family="Arial">Key: Value</text>
-
-  <!-- Footer -->
-  <text x="400" y="550" fill="#6c757d" font-size="14" text-anchor="middle" font-family="Arial">External accessories will not be displayed here.</text>
-</svg>