@switchbot/homebridge-switchbot 5.0.0-beta.109 → 5.0.0-beta.110

package/dist/homebridge-ui/public/js/app.js

@@ -39,6 +39,7 @@ var api_exports = {};
 __export(api_exports, {
   addDevice: () => addDevice,
   addDevicesInBulk: () => addDevicesInBulk,
+  deleteAllDevices: () => deleteAllDevices,
   deleteDevice: () => deleteDevice,
   discoverDevices: () => discoverDevices,
   fetchCredentialStatus: () => fetchCredentialStatus,
@@ -194,6 +195,19 @@ async function deleteDevice(deviceId) {
     throw e;
   }
 }
+async function deleteAllDevices() {
+  try {
+    uiLog.info("Sending delete all devices request");
+    const resp = await homebridge.request("/delete-all-devices", {});
+    uiLog.info("Delete all response:", resp);
+    if (!resp || resp.success === false) {
+      throw new Error(resp?.data?.message || "Failed to delete all devices");
+    }
+    return resp.data || resp;
+  } catch (e) {
+    throw e;
+  }
+}
 var init_api = __esm({
   "src/homebridge-ui/public/js/api.ts"() {
     "use strict";
@@ -300,7 +314,10 @@ async function discoverDevices2() {
           devices.map((d) => ({
             deviceId: d.id,
             name: d.name,
-            type: d.type
+            type: d.type,
+            rssi: d.rssi,
+            address: d.address,
+            model: d.model
           }))
         );
         uiLog.info("Bulk add response:", bulkResult);
@@ -336,10 +353,102 @@ async function discoverDevices2() {
       return;
     }
     status.textContent = `Found ${devices.length} device(s)`;
-    const ul = await renderDiscoveredDevices(devices);
-    document.getElementById("discoveredDevices")?.replaceWith(ul);
-    ul.id = "discoveredDevices";
+    const controlsDiv = document.createElement("div");
+    controlsDiv.style.cssText = "margin-bottom: 12px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center;";
+    const preferences = getDiscoveryPreferences();
+    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 = [
+      { 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 btn2 = document.createElement("button");
+      btn2.textContent = option.label;
+      btn2.style.padding = "4px 8px";
+      btn2.style.fontSize = "11px";
+      btn2.style.borderRadius = "3px";
+      btn2.style.cursor = "pointer";
+      btn2.style.border = preferences.connectionType === option.value ? "2px solid #007AFF" : "1px solid #ccc";
+      btn2.style.backgroundColor = preferences.connectionType === option.value ? "#f0f7ff" : "#fff";
+      btn2.onclick = () => {
+        preferences.connectionType = option.value;
+        setDiscoveryPreferences(preferences);
+        updateDiscoveryView(devices, preferences);
+        for (const b of Array.from(filterGroup.querySelectorAll("button"))) {
+          ;
+          b.style.border = "1px solid #ccc";
+          b.style.backgroundColor = "#fff";
+        }
+        btn2.style.border = "2px solid #007AFF";
+        btn2.style.backgroundColor = "#f0f7ff";
+      };
+      filterGroup.appendChild(btn2);
+    }
+    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;
+      setDiscoveryPreferences(preferences);
+      updateDiscoveryView(devices, preferences);
+    };
+    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;
+    searchInput.oninput = () => {
+      clearTimeout(searchTimeout);
+      searchTimeout = setTimeout(() => {
+        preferences.searchQuery = searchInput.value;
+        setDiscoveryPreferences(preferences);
+        updateDiscoveryView(devices, preferences);
+      }, 300);
+    };
+    controlsDiv.appendChild(filterLabel);
+    controlsDiv.appendChild(filterGroup);
+    controlsDiv.appendChild(sortLabel);
+    controlsDiv.appendChild(sortSelect);
+    controlsDiv.appendChild(searchInput);
+    list.innerHTML = "";
+    list.appendChild(controlsDiv);
     list.style.display = "block";
+    await updateDiscoveryView(devices, preferences);
   } catch (e) {
     uiLog.error("Discovery error:", e);
     status.textContent = `Error: ${e instanceof Error ? e.message : "Discovery failed"}`;
@@ -352,6 +461,19 @@ async function discoverDevices2() {
     btn.textContent = "\u{1F50D} Discover Devices";
   }
 }
+async function updateDiscoveryView(allDevices, preferences) {
+  const filtered = filterDevices(allDevices, preferences.connectionType, preferences.searchQuery);
+  const sorted = sortDevices(filtered, preferences.sortBy);
+  const ul = await renderDiscoveredDevices(sorted);
+  document.getElementById("discoveredDevices")?.replaceWith(ul);
+  ul.id = "discoveredDevices";
+  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)`;
+  }
+}
 async function addDeviceToConfig(device) {
   const { addDeviceToConfig: addDevice2 } = await Promise.resolve().then(() => (init_devices(), devices_exports));
   await addDevice2(device);
@@ -380,6 +502,7 @@ var init_device_types = __esm({
         "Keypad Touch",
         "Keypad Vision",
         "Keypad Vision Pro",
+        "Lock Vision Pro",
         "Lock Lite",
         "Smart Lock",
         "Smart Lock Pro",
@@ -411,8 +534,11 @@ var init_device_types = __esm({
         "Humidifier2",
         "Meter",
         "MeterPlus",
+        "Meter Plus",
         "MeterPro",
+        "Meter Pro",
         "MeterPro(CO2)",
+        "Meter Pro (CO2)",
         "Smart Radiator Thermostat",
         "Standing Circulator Fan",
         "WoIOSensor"
@@ -495,49 +621,80 @@ async function editDevice(device) {
   const modal = document.createElement("div");
   modal.style.background = getComputedStyle(document.body).backgroundColor;
   modal.style.color = getComputedStyle(document.body).color;
-  modal.style.padding = "24px";
-  modal.style.borderRadius = "8px";
-  modal.style.minWidth = "400px";
-  modal.style.boxShadow = "0 10px 40px rgba(0,0,0,0.3)";
+  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 = "8px";
+  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 = "16px";
+  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";
   const apiTypeLabel = document.createElement("label");
   apiTypeLabel.textContent = "Device Type (API - Read Only)";
   apiTypeLabel.style.display = "block";
-  apiTypeLabel.style.marginBottom = "8px";
+  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 = "16px";
+  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";
   const typeLabel = document.createElement("label");
   typeLabel.textContent = "Config Device Type (Override)";
   typeLabel.style.display = "block";
-  typeLabel.style.marginBottom = "8px";
+  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";
-  typeSelect.style.marginBottom = "16px";
-  typeSelect.style.borderRadius = "4px";
+  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";
   Object.keys(DEVICE_TYPES).forEach((categoryName) => {
     const optgroup = document.createElement("optgroup");
     optgroup.label = categoryName;
@@ -551,21 +708,34 @@ async function editDevice(device) {
     });
     typeSelect.appendChild(optgroup);
   });
-  const buttons = document.createElement("div");
-  buttons.style.display = "flex";
-  buttons.style.gap = "8px";
-  buttons.style.justifyContent = "flex-end";
   const errorMessage = document.createElement("div");
-  errorMessage.style.color = "#ef4444";
+  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.style.background = "#666";
+  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: updateDevice2, syncParentPluginConfigFromDisk: syncParentPluginConfigFromDisk2, fetchDevices: fetchDevices3 } = await Promise.resolve().then(() => (init_api(), api_exports));
@@ -589,15 +759,16 @@ async function editDevice(device) {
   };
   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(nameLabel);
-  modal.appendChild(nameInput);
-  modal.appendChild(apiTypeLabel);
-  modal.appendChild(apiTypeInput);
-  modal.appendChild(typeLabel);
-  modal.appendChild(typeSelect);
-  modal.appendChild(errorMessage);
-  modal.appendChild(buttons);
+  modal.appendChild(contentDiv);
   div.appendChild(modal);
   document.body.appendChild(div);
   nameInput.focus();
@@ -613,6 +784,7 @@ var init_modals = __esm({
 // src/homebridge-ui/public/js/devices-delete.ts
 var devices_delete_exports = {};
 __export(devices_delete_exports, {
+  deleteAllDevicesFromConfig: () => deleteAllDevicesFromConfig,
   deleteDeviceFromConfig: () => deleteDeviceFromConfig
 });
 async function confirmDeleteDialog(deviceNameOrId) {
@@ -705,6 +877,110 @@ async function deleteDeviceFromConfig(deviceId, deviceName) {
     hideBusyUi();
   }
 }
+async function confirmDeleteAllDialog(deviceCount) {
+  return new Promise((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.style.position = "fixed";
+    overlay.style.top = "0";
+    overlay.style.left = "0";
+    overlay.style.width = "100%";
+    overlay.style.height = "100%";
+    overlay.style.background = "rgba(0,0,0,0.7)";
+    overlay.style.display = "flex";
+    overlay.style.alignItems = "center";
+    overlay.style.justifyContent = "center";
+    overlay.style.zIndex = "10000";
+    const modal = document.createElement("div");
+    modal.style.background = getComputedStyle(document.body).backgroundColor;
+    modal.style.color = getComputedStyle(document.body).color;
+    modal.style.padding = "20px";
+    modal.style.borderRadius = "10px";
+    modal.style.minWidth = "380px";
+    modal.style.maxWidth = "90vw";
+    modal.style.boxShadow = "0 12px 40px rgba(0,0,0,0.35)";
+    modal.style.borderTop = "3px solid #ef4444";
+    const title = document.createElement("h3");
+    title.textContent = "\u26A0\uFE0F Remove All Devices";
+    title.style.margin = "0 0 12px 0";
+    title.style.color = "#ef4444";
+    const message = document.createElement("p");
+    message.innerHTML = `Are you sure you want to remove <strong>all ${deviceCount} device(s)</strong> from your configuration?<br><br>This action cannot be undone.`;
+    message.style.margin = "0 0 18px 0";
+    message.style.lineHeight = "1.5";
+    const actions = document.createElement("div");
+    actions.style.display = "flex";
+    actions.style.justifyContent = "flex-end";
+    actions.style.gap = "10px";
+    const cancelBtn = document.createElement("button");
+    cancelBtn.textContent = "Cancel";
+    cancelBtn.style.background = "#6b7280";
+    cancelBtn.style.padding = "8px 16px";
+    cancelBtn.style.fontSize = "13px";
+    cancelBtn.className = "secondary";
+    const deleteBtn = document.createElement("button");
+    deleteBtn.textContent = "Remove All";
+    deleteBtn.style.background = "#ef4444";
+    deleteBtn.style.padding = "8px 20px";
+    deleteBtn.style.fontSize = "13px";
+    const cleanup = (result) => {
+      overlay.remove();
+      resolve(result);
+    };
+    cancelBtn.onclick = () => cleanup(false);
+    deleteBtn.onclick = () => cleanup(true);
+    overlay.addEventListener("click", (event) => {
+      if (event.target === overlay) {
+        cleanup(false);
+      }
+    });
+    actions.appendChild(cancelBtn);
+    actions.appendChild(deleteBtn);
+    modal.appendChild(title);
+    modal.appendChild(message);
+    modal.appendChild(actions);
+    overlay.appendChild(modal);
+    document.body.appendChild(overlay);
+  });
+}
+async function deleteAllDevicesFromConfig() {
+  uiLog.info("Remove All Devices button clicked");
+  try {
+    const list = await fetchDevices();
+    if (!list || list.length === 0) {
+      toastWarning("No devices to remove");
+      return;
+    }
+    const confirmed = await confirmDeleteAllDialog(list.length);
+    if (!confirmed) {
+      uiLog.info("Remove all cancelled by user");
+      return;
+    }
+    showBusyUi();
+    uiLog.info("Sending delete all devices request");
+    const resp = await deleteAllDevices();
+    uiLog.info("Delete all response:", resp);
+    if (!resp || resp.success === false) {
+      throw new Error(resp?.data?.message || "Failed to delete all devices");
+    }
+    uiLog.info("Syncing parent config from disk...");
+    const synced = await syncParentPluginConfigFromDisk(true);
+    if (!synced) {
+      toastWarning("Devices deleted, but configuration sync failed");
+    }
+    uiLog.info("Refreshing device list...");
+    const updatedList = await fetchDevices();
+    uiLog.info("Rendering devices:", updatedList.length);
+    renderDeviceList(updatedList);
+    const deletedCount = resp?.deletedCount || list.length;
+    uiLog.info(`\u2713 Removed ${deletedCount} device(s) successfully`);
+    toastSuccess(`Removed ${deletedCount} device(s) successfully`);
+  } catch (e) {
+    uiLog.error("Delete all error:", e);
+    toastError(e instanceof Error ? e.message : "Failed to delete all devices");
+  } finally {
+    hideBusyUi();
+  }
+}
 var init_devices_delete = __esm({
   "src/homebridge-ui/public/js/devices-delete.ts"() {
     "use strict";
@@ -719,12 +995,104 @@ var init_devices_delete = __esm({
 // src/homebridge-ui/public/js/render.ts
 var render_exports = {};
 __export(render_exports, {
+  filterDevices: () => filterDevices,
+  getDiscoveryPreferences: () => getDiscoveryPreferences,
+  getRssiSignalQuality: () => getRssiSignalQuality,
   renderBadge: () => renderBadge,
   renderConnectionBadge: () => renderConnectionBadge,
   renderDeviceList: () => renderDeviceList,
   renderDiscoveredDevices: () => renderDiscoveredDevices,
-  renderIRBadge: () => renderIRBadge
+  renderIRBadge: () => renderIRBadge,
+  renderSignalBars: () => renderSignalBars,
+  renderSignalQualityBadge: () => renderSignalQualityBadge,
+  setDiscoveryPreferences: () => setDiscoveryPreferences,
+  sortDevices: () => sortDevices
 });
+function getRssiSignalQuality(rssi) {
+  if (!rssi || rssi === 0) {
+    return {
+      level: "unknown",
+      color: "#999",
+      bgColor: "#f5f5f5",
+      description: "Signal strength unknown",
+      bars: 0
+    };
+  }
+  const dbm = Math.floor(rssi);
+  if (dbm > -60) {
+    return {
+      level: "excellent",
+      color: "#34a853",
+      bgColor: "#e8f5e9",
+      description: `Excellent (${dbm} dBm)`,
+      bars: 4
+    };
+  } else if (dbm > -75) {
+    return {
+      level: "good",
+      color: "#fbbc04",
+      bgColor: "#fffde7",
+      description: `Good (${dbm} dBm)`,
+      bars: 3
+    };
+  } else if (dbm > -85) {
+    return {
+      level: "fair",
+      color: "#ff9800",
+      bgColor: "#fff3e0",
+      description: `Fair (${dbm} dBm)`,
+      bars: 2
+    };
+  } else {
+    return {
+      level: "poor",
+      color: "#ea4335",
+      bgColor: "#ffebee",
+      description: `Poor (${dbm} dBm) - unreliable`,
+      bars: 1
+    };
+  }
+}
+function renderSignalBars(rssi) {
+  const quality = getRssiSignalQuality(rssi);
+  const container = document.createElement("span");
+  container.style.display = "inline-flex";
+  container.style.gap = "2px";
+  container.style.alignItems = "center";
+  container.style.marginLeft = "8px";
+  container.style.fontSize = "12px";
+  for (let i = 1; i <= 4; i++) {
+    const bar = document.createElement("span");
+    bar.style.height = `${i * 3}px`;
+    bar.style.width = "3px";
+    bar.style.borderRadius = "1px";
+    bar.style.border = `1px solid ${quality.color}`;
+    if (i <= quality.bars) {
+      bar.style.backgroundColor = quality.color;
+    } else {
+      bar.style.backgroundColor = "transparent";
+    }
+    container.appendChild(bar);
+  }
+  container.title = quality.description;
+  return container;
+}
+function renderSignalQualityBadge(rssi) {
+  const quality = getRssiSignalQuality(rssi);
+  const badge = document.createElement("span");
+  badge.textContent = quality.level.charAt(0).toUpperCase() + quality.level.slice(1);
+  badge.style.cssText = `
+    background: ${quality.color};
+    color: white;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: 600;
+    margin-left: 8px;
+  `;
+  badge.title = quality.description;
+  return badge;
+}
 function renderBadge(text, style) {
   const badge = document.createElement("span");
   badge.textContent = text;
@@ -753,47 +1121,70 @@ function renderIRBadge() {
 }
 async function renderDiscoveredDevices(devices) {
   const ul = document.createElement("ul");
-  ul.style.maxHeight = "300px";
+  ul.style.maxHeight = "400px";
   ul.style.overflowY = "auto";
+  ul.style.marginTop = "12px";
+  ul.style.padding = "0";
+  ul.style.listStyle = "none";
   const { addDeviceToConfig: addDeviceToConfig3 } = await Promise.resolve().then(() => (init_discovery(), discovery_exports));
   for (const d of devices) {
     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.transition = "all 0.2s ease";
     const info = document.createElement("div");
     info.style.flex = "1";
+    const nameContainer = document.createElement("div");
+    nameContainer.style.display = "flex";
+    nameContainer.style.alignItems = "center";
+    nameContainer.style.marginBottom = "4px";
+    nameContainer.style.flexWrap = "wrap";
+    nameContainer.style.gap = "6px";
     const name = document.createElement("div");
     name.style.fontWeight = "500";
+    name.style.fontSize = "14px";
     name.textContent = d.name || d.id;
+    nameContainer.appendChild(name);
     if (d.connectionType) {
-      name.appendChild(document.createTextNode(" "));
       const badge = renderConnectionBadge(d.connectionType);
       if (badge) {
-        name.appendChild(badge);
+        nameContainer.appendChild(badge);
       }
     }
     if (d.isIR) {
-      name.appendChild(document.createTextNode(" "));
-      name.appendChild(renderIRBadge());
+      nameContainer.appendChild(renderIRBadge());
+    }
+    if (d.rssi !== void 0 && d.rssi !== null && d.rssi !== 0) {
+      nameContainer.appendChild(renderSignalBars(d.rssi));
+      nameContainer.appendChild(renderSignalQualityBadge(d.rssi));
     }
     const details = document.createElement("div");
-    details.style.fontSize = "12px";
-    details.style.opacity = "0.75";
+    details.style.fontSize = "11px";
+    details.style.opacity = "0.7";
+    details.style.marginTop = "4px";
+    details.style.fontFamily = "monospace";
     let detailsText = `ID: ${d.id} | Type: ${d.type} | Model: ${d.model || "N/A"}`;
     if (d.hubDeviceId) {
       detailsText += ` | Hub: ${d.hubDeviceId}`;
     }
-    if (d.rssi) {
-      detailsText += ` | Signal: ${d.rssi} dBm`;
-    }
     if (d.address) {
       detailsText += ` | MAC: ${d.address}`;
     }
     details.textContent = detailsText;
-    info.appendChild(name);
+    info.appendChild(nameContainer);
     info.appendChild(details);
     const addBtn = document.createElement("button");
     addBtn.textContent = "+ Add";
     addBtn.style.marginLeft = "8px";
+    addBtn.style.padding = "6px 14px";
+    addBtn.style.fontSize = "12px";
+    addBtn.style.whiteSpace = "nowrap";
+    addBtn.style.flexShrink = "0";
     addBtn.onclick = async () => {
       await addDeviceToConfig3(d);
     };
@@ -803,24 +1194,128 @@ async function renderDiscoveredDevices(devices) {
   }
   return ul;
 }
+function filterDevices(devices, connectionType = "all", searchQuery = "") {
+  let filtered = [...devices];
+  if (connectionType !== "all") {
+    filtered = filtered.filter((d) => {
+      if (connectionType === "ir") {
+        return d.isIR === true;
+      }
+      if (connectionType === "ble") {
+        return d.connectionType === "BLE" || d.connectionType?.includes("BLE");
+      }
+      if (connectionType === "api") {
+        return d.connectionType === "OpenAPI" || d.connectionType === "API" || d.connectionType?.includes("API");
+      }
+      if (connectionType === "both") {
+        return d.connectionType === "Both" || d.connectionType?.includes("Both");
+      }
+      return true;
+    });
+  }
+  if (searchQuery.trim()) {
+    const query = searchQuery.toLowerCase();
+    filtered = filtered.filter((d) => {
+      const name = (d.name || "").toLowerCase();
+      const id = (d.id || "").toLowerCase();
+      const type = (d.type || "").toLowerCase();
+      const model = (d.model || "").toLowerCase();
+      return name.includes(query) || id.includes(query) || type.includes(query) || model.includes(query);
+    });
+  }
+  return filtered;
+}
+function sortDevices(devices, sortBy = "name") {
+  const sorted = [...devices];
+  switch (sortBy) {
+    case "signal": {
+      sorted.sort((a, b) => {
+        const aRssi = a.rssi || 0;
+        const bRssi = b.rssi || 0;
+        return bRssi - aRssi;
+      });
+      break;
+    }
+    case "type": {
+      sorted.sort((a, b) => {
+        const aType = (a.type || "").localeCompare(b.type || "");
+        return aType;
+      });
+      break;
+    }
+    case "connection": {
+      const connectionOrder = {
+        "Both": 0,
+        "BLE": 1,
+        "OpenAPI": 2,
+        "API": 2,
+        "Unknown": 3
+      };
+      sorted.sort((a, b) => {
+        const aOrder = connectionOrder[a.connectionType || "Unknown"] ?? 3;
+        const bOrder = connectionOrder[b.connectionType || "Unknown"] ?? 3;
+        return aOrder - bOrder;
+      });
+      break;
+    }
+    case "name":
+    default: {
+      sorted.sort((a, b) => (a.name || a.id || "").localeCompare(b.name || b.id || ""));
+      break;
+    }
+  }
+  return sorted;
+}
+function getDiscoveryPreferences() {
+  try {
+    const stored = localStorage.getItem("discoveryPreferences");
+    if (stored) {
+      return JSON.parse(stored);
+    }
+  } catch (_e) {
+  }
+  return {
+    connectionType: "all",
+    sortBy: "name",
+    searchQuery: ""
+  };
+}
+function setDiscoveryPreferences(preferences) {
+  try {
+    localStorage.setItem("discoveryPreferences", JSON.stringify(preferences));
+  } catch (_e) {
+  }
+}
 function renderDeviceList(list) {
   const ul = document.getElementById("devices");
   const status = document.getElementById("status");
+  const removeAllContainer = document.getElementById("removeAllContainer");
   if (!ul || !status) {
     return;
   }
   if (!list.length) {
     status.textContent = "No devices found in config.";
     ul.innerHTML = "";
+    if (removeAllContainer) {
+      removeAllContainer.style.display = "none";
+    }
     return;
   }
   status.textContent = `Found ${list.length} device(s)`;
   ul.innerHTML = "";
+  if (removeAllContainer) {
+    removeAllContainer.style.display = "block";
+  }
   for (const d of list) {
     const li = document.createElement("li");
     li.className = "device-item";
     const info = document.createElement("div");
     info.style.flex = "1";
+    const nameContainer = document.createElement("div");
+    nameContainer.style.display = "flex";
+    nameContainer.style.alignItems = "center";
+    nameContainer.style.flexWrap = "wrap";
+    nameContainer.style.gap = "6px";
     const name = document.createElement("div");
     name.style.fontWeight = "500";
     name.textContent = d.name || d.id;
@@ -829,6 +1324,12 @@ function renderDeviceList(list) {
     code.style.fontSize = "12px";
     code.style.opacity = "0.75";
     code.style.marginLeft = "8px";
+    nameContainer.appendChild(name);
+    nameContainer.appendChild(code);
+    if (d.rssi !== void 0 && d.rssi !== null && d.rssi !== 0) {
+      nameContainer.appendChild(renderSignalBars(d.rssi));
+      nameContainer.appendChild(renderSignalQualityBadge(d.rssi));
+    }
     const meta = document.createElement("div");
     meta.style.opacity = "0.75";
     meta.style.marginTop = "4px";
@@ -837,8 +1338,7 @@ function renderDeviceList(list) {
     const connText = d.connectionPreference ? `conn: ${d.connectionPreference}` : "";
     const roomText = d.room ? `room: ${d.room}` : "";
     meta.textContent = [typeText, connText, roomText].filter(Boolean).join(" | ");
-    info.appendChild(name);
-    info.appendChild(code);
+    info.appendChild(nameContainer);
     info.appendChild(meta);
     const buttons = document.createElement("div");
     buttons.style.display = "flex";
@@ -895,6 +1395,7 @@ var init_render = __esm({
 var devices_exports = {};
 __export(devices_exports, {
   addDeviceToConfig: () => addDeviceToConfig2,
+  initRemoveAllButton: () => initRemoveAllButton,
   loadConfiguredDevices: () => loadConfiguredDevices
 });
 async function addDeviceToConfig2(device, options = {}) {
@@ -948,6 +1449,16 @@ async function addDeviceToConfig2(device, options = {}) {
     hideBusyUi();
   }
 }
+async function initRemoveAllButton() {
+  const removeAllBtn = document.getElementById("removeAllBtn");
+  if (!removeAllBtn) {
+    return;
+  }
+  removeAllBtn.addEventListener("click", async () => {
+    const { deleteAllDevicesFromConfig: deleteAllDevicesFromConfig2 } = await Promise.resolve().then(() => (init_devices_delete(), devices_delete_exports));
+    await deleteAllDevicesFromConfig2();
+  });
+}
 async function loadConfiguredDevices() {
   const list = await fetchDevices();
   renderDeviceList(list);
@@ -1060,6 +1571,7 @@ window.discoverDevices = discoverDevices2;
 async function init() {
   await loadCredentialStatus();
   const list = await loadConfiguredDevices();
+  await initRemoveAllButton();
 }
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", init);