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

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

@@ -42,10 +42,12 @@ __export(api_exports, {
   deleteAllDevices: () => deleteAllDevices,
   deleteDevice: () => deleteDevice,
   discoverDevices: () => discoverDevices,
+  fetchBluetoothStatus: () => fetchBluetoothStatus,
   fetchCredentialStatus: () => fetchCredentialStatus,
   fetchDevices: () => fetchDevices,
   saveCredentials: () => saveCredentials,
   syncParentPluginConfigFromDisk: () => syncParentPluginConfigFromDisk,
+  testDeviceConnection: () => testDeviceConnection,
   updateDevice: () => updateDevice
 });
 function isSwitchBotPlatformConfig(block) {
@@ -125,9 +127,9 @@ async function fetchDevices() {
     return [];
   }
 }
-async function discoverDevices() {
+async function discoverDevices(mode = "all", options) {
   try {
-    const resp = await homebridge.request("/discover", {});
+    const resp = await homebridge.request("/discover", { mode, ...options });
     uiLog.info("Discover response:", resp);
     if (!resp || resp.success === false) {
       throw new Error(resp?.data?.message || "Discovery failed");
@@ -137,6 +139,30 @@ async function discoverDevices() {
     throw e;
   }
 }
+async function fetchBluetoothStatus() {
+  try {
+    const resp = await homebridge.request("/ble-status", {});
+    if (!resp || resp.success === false) {
+      return { available: false, message: "Bluetooth status unavailable" };
+    }
+    return resp.data || { available: false, message: "Bluetooth status unavailable" };
+  } catch (_e) {
+    return { available: false, message: "Bluetooth status unavailable" };
+  }
+}
+async function testDeviceConnection(payload) {
+  const resp = await homebridge.request("/test-connection", payload);
+  if (!resp || resp.success === false) {
+    throw new Error(resp?.data?.message || "Connection test failed");
+  }
+  return resp.data || {
+    success: false,
+    deviceId: payload.deviceId,
+    method: "Auto",
+    latencyMs: 0,
+    message: "Connection test failed"
+  };
+}
 async function addDevice(deviceId, name, type, options) {
   try {
     const payload = { deviceId, name, type };
@@ -149,6 +175,12 @@ async function addDevice(deviceId, name, type, options) {
     if (options?.rssi !== void 0 && options?.rssi !== null && options?.rssi !== 0) {
       payload.rssi = options.rssi;
     }
+    if (options?.encryptionKey) {
+      payload.encryptionKey = options.encryptionKey;
+    }
+    if (options?.keyId) {
+      payload.keyId = options.keyId;
+    }
     uiLog.info("Adding device to config:", payload);
     const resp = await homebridge.request("/add-device", payload);
     uiLog.info("Add device response:", resp);
@@ -292,83 +324,466 @@ var init_toast = __esm({
 var discovery_exports = {};
 __export(discovery_exports, {
   addDeviceToConfig: () => addDeviceToConfig,
-  discoverDevices: () => discoverDevices2
+  discoverDevices: () => discoverDevices2,
+  initializeDiscoverySettings: () => initializeDiscoverySettings
 });
+async function batchSetDeviceEnabled(selectedIds, enabled) {
+  const resp = await homebridge.request("/platform-config", {});
+  if (!resp || resp.success === false || !resp.data) {
+    throw new Error("Failed to load config");
+  }
+  const config = resp.data;
+  const configArr = Array.isArray(config) ? config : [config];
+  const platformIdx = configArr.findIndex((c) => (c.platform || c.name || "").toLowerCase().includes("switchbot"));
+  if (platformIdx === -1) {
+    throw new Error("SwitchBot platform config not found");
+  }
+  const platformConfig = configArr[platformIdx];
+  if (!Array.isArray(platformConfig.devices)) {
+    throw new TypeError("No devices array in config");
+  }
+  let changed = false;
+  for (const dev of platformConfig.devices) {
+    const id = String(dev.deviceId || dev.id || "").trim().toLowerCase();
+    if (selectedIds.has(id)) {
+      if (dev.enabled !== enabled) {
+        dev.enabled = enabled;
+        changed = true;
+      }
+    }
+  }
+  if (changed) {
+    if (typeof homebridge.updatePluginConfig === "function") {
+      await homebridge.updatePluginConfig(configArr);
+    } else {
+      throw new TypeError("homebridge.updatePluginConfig is not available");
+    }
+    if (typeof homebridge.savePluginConfig === "function") {
+      await homebridge.savePluginConfig();
+    }
+  }
+}
 function normalizeId(value) {
   return String(value ?? "").trim().toLowerCase();
 }
+function dedupeById(devices) {
+  return devices.filter((d, index, arr) => !!d?.id && arr.findIndex((x) => x?.id === d.id) === index);
+}
+function mergeDiscoveredDevices(existingDevices, incomingDevices) {
+  const deviceMap = /* @__PURE__ */ new Map();
+  for (const d of dedupeById(existingDevices)) {
+    deviceMap.set(d.id, { ...d });
+  }
+  for (const d of dedupeById(incomingDevices)) {
+    const current = deviceMap.get(d.id);
+    if (current) {
+      const nextConnectionType = current.connectionType === d.connectionType ? current.connectionType : "Both";
+      deviceMap.set(d.id, {
+        ...current,
+        ...d,
+        connectionType: nextConnectionType
+      });
+    } else {
+      deviceMap.set(d.id, { ...d });
+    }
+  }
+  return [...deviceMap.values()];
+}
+function setDiscoveryCache(devices) {
+  try {
+    const payload = { timestamp: Date.now(), devices };
+    localStorage.setItem(DISCOVERY_CACHE_KEY, JSON.stringify(payload));
+  } catch (_e) {
+  }
+}
+function clearDiscoveryCache() {
+  try {
+    localStorage.removeItem(DISCOVERY_CACHE_KEY);
+  } catch (_e) {
+  }
+}
+function getDiscoveryCache(validOnly = true) {
+  try {
+    const stored = localStorage.getItem(DISCOVERY_CACHE_KEY);
+    if (!stored) {
+      return null;
+    }
+    const payload = JSON.parse(stored);
+    if (!payload || !Array.isArray(payload.devices) || typeof payload.timestamp !== "number") {
+      return null;
+    }
+    const age = Date.now() - payload.timestamp;
+    if (validOnly && age > DISCOVERY_CACHE_TTL_MS) {
+      return null;
+    }
+    return payload;
+  } catch (_e) {
+    return null;
+  }
+}
+function getDiscoveryAutoRefreshSeconds() {
+  try {
+    const stored = localStorage.getItem(DISCOVERY_AUTO_REFRESH_KEY);
+    const value = Number(stored || 0);
+    return Number.isFinite(value) && value >= 0 ? value : 0;
+  } catch (_e) {
+    return 0;
+  }
+}
+function setDiscoveryAutoRefreshSeconds(value) {
+  try {
+    localStorage.setItem(DISCOVERY_AUTO_REFRESH_KEY, String(Math.max(0, value)));
+  } catch (_e) {
+  }
+}
+function getDiscoveryHideAddedPreference() {
+  try {
+    return localStorage.getItem(DISCOVERY_HIDE_ADDED_KEY) === "true";
+  } catch (_e) {
+    return false;
+  }
+}
+function setDiscoveryHideAddedPreference(value) {
+  try {
+    localStorage.setItem(DISCOVERY_HIDE_ADDED_KEY, String(value));
+  } catch (_e) {
+  }
+}
+function formatElapsedShort(ms) {
+  const totalSeconds = Math.max(0, Math.floor(ms / 1e3));
+  if (totalSeconds < 60) {
+    return `${totalSeconds}s ago`;
+  }
+  const minutes = Math.floor(totalSeconds / 60);
+  if (minutes < 60) {
+    return `${minutes}m ago`;
+  }
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {
+    return `${hours}h ago`;
+  }
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+function updateLastScannedStatus() {
+  const lastScannedStatus = document.getElementById("lastScannedStatus");
+  if (!lastScannedStatus) {
+    return;
+  }
+  const cache = getDiscoveryCache(false);
+  if (!cache) {
+    lastScannedStatus.textContent = "Last scanned: never";
+    return;
+  }
+  const ageMs = Date.now() - cache.timestamp;
+  const timestampText = new Date(cache.timestamp).toLocaleString();
+  const stale = ageMs > DISCOVERY_CACHE_TTL_MS;
+  lastScannedStatus.textContent = stale ? `Last scanned: ${formatElapsedShort(ageMs)} (${timestampText}, cache expired)` : `Last scanned: ${formatElapsedShort(ageMs)} (${timestampText})`;
+}
+async function renderCachedDiscoveryResults() {
+  const cache = getDiscoveryCache(true);
+  const list = document.getElementById("discoveredList");
+  if (!cache || !list || !cache.devices.length) {
+    return;
+  }
+  list.style.display = "block";
+  if (!window._discoverySelectedIds) {
+    window._discoverySelectedIds = /* @__PURE__ */ new Set();
+  }
+  await updateDiscoveryView(
+    cache.devices,
+    getDiscoveryPreferences(),
+    getDiscoveryGroupByPreference(),
+    getDiscoveryHideAddedPreference(),
+    window._discoverySelectedIds
+  );
+}
+function getDiscoveryBleSettings() {
+  try {
+    const stored = localStorage.getItem(DISCOVERY_BLE_SETTINGS_KEY);
+    if (!stored) {
+      return { bleEnabled: true, bleScanDurationSeconds: 5, bleTimeoutSeconds: 8 };
+    }
+    const parsed = JSON.parse(stored);
+    return {
+      bleEnabled: parsed?.bleEnabled !== false,
+      bleScanDurationSeconds: Math.max(3, Math.min(15, Number(parsed?.bleScanDurationSeconds || 5))),
+      bleTimeoutSeconds: Math.max(3, Math.min(30, Number(parsed?.bleTimeoutSeconds || 8)))
+    };
+  } catch (_e) {
+    return { bleEnabled: true, bleScanDurationSeconds: 5, bleTimeoutSeconds: 8 };
+  }
+}
+function setDiscoveryBleSettings(settings) {
+  try {
+    localStorage.setItem(DISCOVERY_BLE_SETTINGS_KEY, JSON.stringify(settings));
+  } catch (_e) {
+  }
+}
+async function initializeDiscoverySettings() {
+  const scanSelect = document.getElementById("bleScanDurationSelect");
+  const timeoutInput = document.getElementById("bleTimeoutInput");
+  const disableBleCheckbox = document.getElementById("disableBleScanCheckbox");
+  const scanSetting = document.getElementById("bleScanSetting");
+  const timeoutSetting = document.getElementById("bleTimeoutSetting");
+  const bluetoothStatus = document.getElementById("bluetoothStatus");
+  const autoRefreshSelect = document.getElementById("autoRefreshIntervalSelect");
+  const refreshBtn = document.getElementById("refreshDiscoverBtn");
+  const current = getDiscoveryBleSettings();
+  if (scanSelect) {
+    scanSelect.value = String(current.bleScanDurationSeconds);
+  }
+  if (timeoutInput) {
+    timeoutInput.value = String(current.bleTimeoutSeconds);
+  }
+  if (disableBleCheckbox) {
+    disableBleCheckbox.checked = !current.bleEnabled;
+  }
+  if (autoRefreshSelect) {
+    autoRefreshSelect.value = String(getDiscoveryAutoRefreshSeconds());
+  }
+  const updateBleSettingVisibility = () => {
+    const disabled = !!disableBleCheckbox?.checked;
+    if (scanSetting) {
+      scanSetting.style.display = disabled ? "none" : "inline-flex";
+    }
+    if (timeoutSetting) {
+      timeoutSetting.style.display = disabled ? "none" : "inline-flex";
+    }
+  };
+  const persistFromControls = () => {
+    const next = {
+      bleEnabled: !(disableBleCheckbox?.checked ?? false),
+      bleScanDurationSeconds: Math.max(3, Math.min(15, Number(scanSelect?.value || 5))),
+      bleTimeoutSeconds: Math.max(3, Math.min(30, Number(timeoutInput?.value || 8)))
+    };
+    setDiscoveryBleSettings(next);
+  };
+  scanSelect?.addEventListener("change", persistFromControls);
+  timeoutInput?.addEventListener("change", persistFromControls);
+  disableBleCheckbox?.addEventListener("change", () => {
+    persistFromControls();
+    updateBleSettingVisibility();
+  });
+  updateBleSettingVisibility();
+  if (bluetoothStatus) {
+    const status = await fetchBluetoothStatus();
+    bluetoothStatus.textContent = status.available ? `Bluetooth: available (${status.message})` : `Bluetooth: unavailable (${status.message})`;
+  }
+  updateLastScannedStatus();
+  if (discoveryLastScannedTimer) {
+    clearInterval(discoveryLastScannedTimer);
+  }
+  discoveryLastScannedTimer = setInterval(updateLastScannedStatus, 15e3);
+  refreshBtn?.addEventListener("click", () => {
+    void discoverDevices2();
+  });
+  const applyAutoRefresh = () => {
+    const seconds = Math.max(0, Number(autoRefreshSelect?.value || 0));
+    setDiscoveryAutoRefreshSeconds(seconds);
+    if (discoveryAutoRefreshTimer) {
+      clearInterval(discoveryAutoRefreshTimer);
+      discoveryAutoRefreshTimer = null;
+    }
+    if (seconds > 0) {
+      discoveryAutoRefreshTimer = setInterval(() => {
+        const discoverBtn = document.getElementById("discoverBtn");
+        if (!discoverBtn || discoverBtn.disabled || document.hidden) {
+          return;
+        }
+        void discoverDevices2();
+      }, seconds * 1e3);
+    }
+  };
+  autoRefreshSelect?.addEventListener("change", applyAutoRefresh);
+  applyAutoRefresh();
+  await renderCachedDiscoveryResults();
+}
+function getDiscoveryGroupByPreference() {
+  try {
+    const stored = localStorage.getItem(DISCOVERY_GROUP_BY_KEY);
+    if (stored === "hub" || stored === "type") {
+      return stored;
+    }
+    return "connection";
+  } catch (_e) {
+    return "connection";
+  }
+}
+function setDiscoveryGroupByPreference(groupBy) {
+  try {
+    localStorage.setItem(DISCOVERY_GROUP_BY_KEY, groupBy);
+  } catch (_e) {
+  }
+}
+function getDiscoveryGroupExpandedState() {
+  try {
+    const stored = localStorage.getItem(DISCOVERY_GROUP_EXPANDED_KEY);
+    if (!stored) {
+      return {};
+    }
+    const parsed = JSON.parse(stored);
+    return typeof parsed === "object" && parsed ? parsed : {};
+  } catch (_e) {
+    return {};
+  }
+}
+function setDiscoveryGroupExpandedState(state) {
+  try {
+    localStorage.setItem(DISCOVERY_GROUP_EXPANDED_KEY, JSON.stringify(state));
+  } catch (_e) {
+  }
+}
+function isDiscoveryGroupExpanded(groupKey) {
+  const state = getDiscoveryGroupExpandedState();
+  return state[groupKey] !== false;
+}
+function setDiscoveryGroupExpanded(groupKey, expanded) {
+  const state = getDiscoveryGroupExpandedState();
+  state[groupKey] = expanded;
+  setDiscoveryGroupExpandedState(state);
+}
 async function discoverDevices2() {
   const btn = document.getElementById("discoverBtn");
+  const cancelBtn = document.getElementById("cancelDiscoverBtn");
   const status = document.getElementById("discoverStatus");
+  const phaseProgress = document.getElementById("discoverPhaseProgress");
+  const phaseFill = document.getElementById("discoverPhaseFill");
+  const phaseLabel = document.getElementById("discoverPhaseLabel");
   const list = document.getElementById("discoveredList");
   const autoAddAll = document.getElementById("autoAddAllCheckbox")?.checked;
+  const scanSelect = document.getElementById("bleScanDurationSelect");
+  const timeoutInput = document.getElementById("bleTimeoutInput");
+  const disableBleCheckbox = document.getElementById("disableBleScanCheckbox");
   if (!btn || !status || !list) {
     return;
   }
-  try {
-    showBusyUi();
-    btn.disabled = true;
-    btn.textContent = "\u{1F50D} Discovering...";
-    status.textContent = "Searching SwitchBot account...";
-    status.classList.remove("error");
-    const devicesRaw = await discoverDevices();
-    uiLog.info("Discover response:", devicesRaw);
-    const devices = devicesRaw.filter((d, index, arr) => !!d?.id && arr.findIndex((x) => x?.id === d.id) === index);
-    if (!devices.length) {
-      status.textContent = "No devices found in your SwitchBot account";
-      toastInfo("No devices found in your SwitchBot account");
-      list.style.display = "none";
-      return;
+  const spinnerFrames = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+  let spinnerIndex = 0;
+  const startedAt = Date.now();
+  let phaseStartedAt = startedAt;
+  let phase = "Preparing discovery...";
+  let cancelled = false;
+  const bleScanDurationSeconds = scanSelect ? Number(scanSelect.value) : 5;
+  const pollIntervalMs = 1e3;
+  const scanEndTime = Date.now() + bleScanDurationSeconds * 1e3;
+  const setPhase = (nextPhase) => {
+    phase = nextPhase;
+    phaseStartedAt = Date.now();
+  };
+  const getPhasePercent = (phaseName) => {
+    if (phaseName.includes("Scanning BLE")) {
+      return 35;
     }
-    if (autoAddAll) {
-      status.textContent = `Auto-adding ${devices.length} device(s)...`;
+    if (phaseName.includes("Fetching OpenAPI")) {
+      return 75;
+    }
+    if (phaseName.includes("Complete")) {
+      return 100;
+    }
+    return 10;
+  };
+  const renderProgress = () => {
+    const totalSeconds = Math.max(0, Math.floor((Date.now() - startedAt) / 1e3));
+    const phaseSeconds = Math.max(0, Math.floor((Date.now() - phaseStartedAt) / 1e3));
+    const frame = spinnerFrames[spinnerIndex % spinnerFrames.length];
+    spinnerIndex += 1;
+    status.textContent = `${frame} ${phase} (${phaseSeconds}s, ${totalSeconds}s total)`;
+    if (phaseProgress) {
+      phaseProgress.style.display = "block";
+    }
+    if (phaseFill) {
+      phaseFill.style.width = `${getPhasePercent(phase)}%`;
+    }
+    if (phaseLabel) {
+      phaseLabel.textContent = phase;
+    }
+  };
+  const progressTimer = setInterval(renderProgress, 250);
+  let discoveredDevices = [];
+  const preferences = getDiscoveryPreferences();
+  let groupBy = getDiscoveryGroupByPreference();
+  let hideAdded = getDiscoveryHideAddedPreference();
+  let controlsInitialized = false;
+  if (!window._discoverySelectedIds) {
+    window._discoverySelectedIds = /* @__PURE__ */ new Set();
+  }
+  const selectedIds = window._discoverySelectedIds;
+  setPhase("Scanning BLE (real-time RSSI)");
+  let pollTimer = null;
+  const pollDiscovery = async () => {
+    if (cancelled || Date.now() > scanEndTime) {
+      if (pollTimer) {
+        clearInterval(pollTimer);
+      }
+      setPhase("Scan Complete");
       try {
-        const bulkResult = await addDevicesInBulk(
-          devices.map((d) => ({
-            deviceId: d.id,
-            name: d.name,
-            type: d.type,
-            rssi: d.rssi,
-            address: d.address,
-            model: d.model
-          }))
-        );
-        uiLog.info("Bulk add response:", bulkResult);
-        if (!bulkResult || bulkResult.success === false) {
-          throw new Error(bulkResult?.data?.message || "Bulk add failed");
-        }
-        const addedCount = bulkResult?.addedCount ?? bulkResult?.data?.addedCount ?? 0;
-        const skippedCount = bulkResult?.skippedCount ?? bulkResult?.data?.skippedCount ?? 0;
-        status.textContent = `\u2713 Added ${addedCount} device(s)${skippedCount > 0 ? ` (${skippedCount} skipped)` : ""}`;
-        if (addedCount > 0) {
-          toastSuccess(`Added ${addedCount} device(s)${skippedCount > 0 ? ` (${skippedCount} skipped)` : ""}`);
-        } else if (skippedCount > 0) {
-          toastWarning(`No new devices were added (${skippedCount} skipped)`);
-        }
-        status.classList.remove("error");
-        list.style.display = "none";
-        if (devices.length > 0) {
-          const synced = await syncParentPluginConfigFromDisk(true);
-          status.textContent += synced ? " - Config saved automatically." : " - Warning: config may not persist until you close/reopen settings.";
-          if (synced) {
-            toastSuccess("Configuration synced and saved automatically");
-          } else {
-            toastWarning("Configuration sync failed; close and reopen settings before Save");
-          }
-        }
+        const devices = await discoverDevices("ble");
+        discoveredDevices = mergeDiscoveredDevices(discoveredDevices, devices);
+        setDiscoveryCache(discoveredDevices);
+        await updateDiscoveryView(discoveredDevices, preferences, groupBy, hideAdded, selectedIds);
       } catch (e) {
-        uiLog.error("Bulk add error:", e);
-        status.textContent = `\u2717 Error: ${e instanceof Error ? e.message : "Failed to add devices"}`;
-        status.classList.add("error");
-        toastError(e instanceof Error ? e.message : "Failed to add devices");
+        uiLog.error("Final BLE poll failed:", e);
       }
-      await loadConfiguredDevices();
       return;
     }
-    status.textContent = `Found ${devices.length} device(s)`;
+    try {
+      const devices = await discoverDevices("ble");
+      discoveredDevices = mergeDiscoveredDevices(discoveredDevices, devices);
+      setDiscoveryCache(discoveredDevices);
+      await updateDiscoveryView(discoveredDevices, preferences, groupBy, hideAdded, selectedIds);
+    } catch (e) {
+      uiLog.error("BLE poll failed:", e);
+    }
+  };
+  pollTimer = setInterval(pollDiscovery, pollIntervalMs);
+  pollDiscovery();
+  async function batchSetDeviceEnabled2(selectedIds2, enabled) {
+    const resp = await homebridge.request("/platform-config", {});
+    if (!resp || resp.success === false || !resp.data) {
+      throw new Error("Failed to load config");
+    }
+    const config = resp.data;
+    const configArr = Array.isArray(config) ? config : [config];
+    const platformIdx = configArr.findIndex((c) => (c.platform || c.name || "").toLowerCase().includes("switchbot"));
+    if (platformIdx === -1) {
+      throw new Error("SwitchBot platform config not found");
+    }
+    const platformConfig = configArr[platformIdx];
+    if (!Array.isArray(platformConfig.devices)) {
+      throw new TypeError("No devices array in config");
+    }
+    let changed = false;
+    for (const dev of platformConfig.devices) {
+      const id = String(dev.deviceId || dev.id || "").trim().toLowerCase();
+      if (selectedIds2.has(id)) {
+        if (dev.enabled !== enabled) {
+          dev.enabled = enabled;
+          changed = true;
+        }
+      }
+    }
+    if (changed) {
+      if (typeof homebridge.updatePluginConfig === "function") {
+        await homebridge.updatePluginConfig(configArr);
+      } else {
+        throw new TypeError("homebridge.updatePluginConfig is not available");
+      }
+      if (typeof homebridge.savePluginConfig === "function") {
+        await homebridge.savePluginConfig();
+      }
+    }
+  }
+  const ensureDiscoveryControls = async () => {
+    if (controlsInitialized) {
+      return;
+    }
+    if (!window._discoverySelectedIds) {
+      window._discoverySelectedIds = /* @__PURE__ */ new Set();
+    }
+    const selectedIds2 = window._discoverySelectedIds;
     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";
@@ -384,30 +799,29 @@ async function discoverDevices2() {
       { 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.style.color = preferences.connectionType === option.value ? "#1d4ed8" : "#374151";
-      btn2.onclick = () => {
+      const filterBtn = document.createElement("button");
+      filterBtn.textContent = option.label;
+      filterBtn.style.padding = "4px 8px";
+      filterBtn.style.fontSize = "11px";
+      filterBtn.style.borderRadius = "3px";
+      filterBtn.style.cursor = "pointer";
+      filterBtn.style.border = preferences.connectionType === option.value ? "2px solid #007AFF" : "1px solid #ccc";
+      filterBtn.style.backgroundColor = preferences.connectionType === option.value ? "#f0f7ff" : "#fff";
+      filterBtn.style.color = preferences.connectionType === option.value ? "#1d4ed8" : "#374151";
+      filterBtn.onclick = () => {
         preferences.connectionType = option.value;
         setDiscoveryPreferences(preferences);
-        updateDiscoveryView(devices, preferences);
-        for (const b of Array.from(filterGroup.querySelectorAll("button"))) {
-          ;
+        void updateDiscoveryView(discoveredDevices, preferences, groupBy, hideAdded, selectedIds2);
+        Array.prototype.forEach.call(filterGroup.querySelectorAll("button"), (b) => {
           b.style.border = "1px solid #ccc";
           b.style.backgroundColor = "#fff";
           b.style.color = "#374151";
-        }
-        btn2.style.border = "2px solid #007AFF";
-        btn2.style.backgroundColor = "#f0f7ff";
-        btn2.style.color = "#1d4ed8";
+        });
+        filterBtn.style.border = "2px solid #007AFF";
+        filterBtn.style.backgroundColor = "#f0f7ff";
+        filterBtn.style.color = "#1d4ed8";
       };
-      filterGroup.appendChild(btn2);
+      filterGroup.appendChild(filterBtn);
     }
     const sortLabel = document.createElement("label");
     sortLabel.style.fontSize = "12px";
@@ -426,26 +840,73 @@ async function discoverDevices2() {
       { 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);
+      const sortOption = document.createElement("option");
+      sortOption.value = opt.value;
+      sortOption.textContent = opt.label;
+      sortSelect.appendChild(sortOption);
     }
     sortSelect.onchange = () => {
       preferences.sortBy = sortSelect.value;
       setDiscoveryPreferences(preferences);
-      updateDiscoveryView(devices, preferences);
+      void updateDiscoveryView(discoveredDevices, preferences, groupBy, hideAdded, selectedIds2);
+    };
+    const groupLabel = document.createElement("label");
+    groupLabel.style.fontSize = "12px";
+    groupLabel.style.fontWeight = "500";
+    groupLabel.style.marginLeft = "8px";
+    groupLabel.textContent = "Group:";
+    const groupSelect = document.createElement("select");
+    groupSelect.style.fontSize = "11px";
+    groupSelect.style.padding = "4px 8px";
+    groupSelect.style.borderRadius = "3px";
+    groupSelect.value = groupBy;
+    const groupOptions = [
+      { label: "Connection", value: "connection" },
+      { label: "Hub", value: "hub" },
+      { label: "Device Type", value: "type" }
+    ];
+    for (const opt of groupOptions) {
+      const groupOption = document.createElement("option");
+      groupOption.value = opt.value;
+      groupOption.textContent = opt.label;
+      groupSelect.appendChild(groupOption);
+    }
+    groupSelect.onchange = () => {
+      groupBy = groupSelect.value;
+      setDiscoveryGroupByPreference(groupBy);
+      void updateDiscoveryView(discoveredDevices, preferences, groupBy, hideAdded, selectedIds2);
+    };
+    const hideAddedLabel = document.createElement("label");
+    hideAddedLabel.style.display = "inline-flex";
+    hideAddedLabel.style.alignItems = "center";
+    hideAddedLabel.style.gap = "4px";
+    hideAddedLabel.style.fontSize = "11px";
+    hideAddedLabel.style.marginLeft = "8px";
+    const hideAddedCheckbox = document.createElement("input");
+    hideAddedCheckbox.type = "checkbox";
+    hideAddedCheckbox.checked = hideAdded;
+    hideAddedCheckbox.style.margin = "0";
+    hideAddedCheckbox.style.width = "auto";
+    const hideAddedText = document.createElement("span");
+    hideAddedText.textContent = "Hide Added";
+    hideAddedLabel.appendChild(hideAddedCheckbox);
+    hideAddedLabel.appendChild(hideAddedText);
+    hideAddedCheckbox.onchange = () => {
+      hideAdded = hideAddedCheckbox.checked;
+      setDiscoveryHideAddedPreference(hideAdded);
+      void updateDiscoveryView(discoveredDevices, preferences, groupBy, hideAdded, selectedIds2);
     };
     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.fontSize = "13px";
+    searchInput.style.padding = "8px 16px";
+    searchInput.style.borderRadius = "6px";
     searchInput.style.border = "1px solid #ccc";
-    searchInput.style.flex = "1";
-    searchInput.style.minWidth = "200px";
-    searchInput.style.maxWidth = "300px";
+    searchInput.style.flex = "1 1 0%";
+    searchInput.style.minWidth = "120px";
+    searchInput.style.maxWidth = "100%";
+    searchInput.style.width = "100%";
     searchInput.value = preferences.searchQuery;
     let searchTimeout;
     searchInput.oninput = () => {
@@ -453,44 +914,644 @@ async function discoverDevices2() {
       searchTimeout = setTimeout(() => {
         preferences.searchQuery = searchInput.value;
         setDiscoveryPreferences(preferences);
-        updateDiscoveryView(devices, preferences);
+        void updateDiscoveryView(discoveredDevices, preferences, groupBy, hideAdded, selectedIds2);
       }, 300);
     };
+    const actionBtnStyle = {
+      fontSize: "16px",
+      padding: "10px 0",
+      borderRadius: "10px",
+      margin: "0 12px 0 0",
+      width: "100%",
+      maxWidth: "220px",
+      fontWeight: "bold",
+      background: "#ef4444",
+      color: "#fff",
+      border: "none",
+      cursor: "pointer",
+      boxShadow: "0 2px 8px #0001",
+      transition: "background 0.2s",
+      outline: "none",
+      display: "block"
+    };
+    const addSelectedBtn = document.createElement("button");
+    addSelectedBtn.textContent = "Add Selected to Config";
+    Object.assign(addSelectedBtn.style, actionBtnStyle);
+    addSelectedBtn.disabled = true;
+    addSelectedBtn.onclick = async () => {
+      if (!selectedIds2.size) {
+        return;
+      }
+      addSelectedBtn.disabled = true;
+      addSelectedBtn.textContent = "Adding...";
+      try {
+        showBusyUi();
+        const selectedDevices = discoveredDevices.filter((d) => selectedIds2.has(normalizeId(d.id)));
+        const bulkResult = await addDevicesInBulk(selectedDevices.map((d) => ({
+          deviceId: d.id,
+          name: d.name,
+          type: d.type,
+          rssi: d.rssi,
+          address: d.address,
+          model: d.model
+        })));
+        uiLog.info("Batch add response:", bulkResult);
+        if (!bulkResult || bulkResult.success === false) {
+          throw new Error(bulkResult?.data?.message || "Batch add failed");
+        }
+        const addedCount = bulkResult?.addedCount ?? bulkResult?.data?.addedCount ?? 0;
+        const skippedCount = bulkResult?.skippedCount ?? bulkResult?.data?.skippedCount ?? 0;
+        toastSuccess(`Added ${addedCount} device(s)${skippedCount > 0 ? ` (${skippedCount} skipped)` : ""}`);
+        await loadConfiguredDevices();
+        selectedIds2.clear();
+        addSelectedBtn.disabled = true;
+        addSelectedBtn.textContent = "Add Selected";
+        await updateDiscoveryView(discoveredDevices, preferences, groupBy, hideAdded, selectedIds2);
+      } catch (e) {
+        uiLog.error("Batch add error:", e);
+        toastError(e instanceof Error ? e.message : "Failed to add devices");
+        addSelectedBtn.disabled = false;
+        addSelectedBtn.textContent = "Add Selected";
+      } finally {
+        hideBusyUi();
+      }
+    };
+    const enableSelectedBtn = document.createElement("button");
+    enableSelectedBtn.textContent = "Enable Selected";
+    Object.assign(enableSelectedBtn.style, actionBtnStyle);
+    enableSelectedBtn.disabled = true;
+    enableSelectedBtn.onclick = async () => {
+      if (!selectedIds2.size) {
+        return;
+      }
+      enableSelectedBtn.disabled = true;
+      enableSelectedBtn.textContent = "Enabling...";
+      try {
+        showBusyUi();
+        await batchSetDeviceEnabled2(selectedIds2, true);
+        toastSuccess("Selected devices enabled");
+        await loadConfiguredDevices();
+        enableSelectedBtn.disabled = true;
+        enableSelectedBtn.textContent = "Enable Selected";
+        await updateDiscoveryView(discoveredDevices, preferences, groupBy, hideAdded, selectedIds2);
+      } catch (e) {
+        uiLog.error("Batch enable error:", e);
+        toastError(e instanceof Error ? e.message : "Failed to enable devices");
+        enableSelectedBtn.disabled = false;
+        enableSelectedBtn.textContent = "Enable Selected";
+      } finally {
+        hideBusyUi();
+      }
+    };
+    const disableSelectedBtn = document.createElement("button");
+    disableSelectedBtn.textContent = "Disable Selected";
+    Object.assign(disableSelectedBtn.style, actionBtnStyle);
+    disableSelectedBtn.disabled = true;
+    disableSelectedBtn.onclick = async () => {
+      if (!selectedIds2.size) {
+        return;
+      }
+      disableSelectedBtn.disabled = true;
+      disableSelectedBtn.textContent = "Disabling...";
+      try {
+        showBusyUi();
+        await batchSetDeviceEnabled2(selectedIds2, false);
+        toastSuccess("Selected devices disabled");
+        await loadConfiguredDevices();
+        disableSelectedBtn.disabled = true;
+        disableSelectedBtn.textContent = "Disable Selected";
+        await updateDiscoveryView(discoveredDevices, preferences, groupBy, hideAdded, selectedIds2);
+      } catch (e) {
+        uiLog.error("Batch disable error:", e);
+        toastError(e instanceof Error ? e.message : "Failed to disable devices");
+        disableSelectedBtn.disabled = false;
+        disableSelectedBtn.textContent = "Disable Selected";
+      } finally {
+        hideBusyUi();
+      }
+    };
     controlsDiv.appendChild(filterLabel);
     controlsDiv.appendChild(filterGroup);
     controlsDiv.appendChild(sortLabel);
     controlsDiv.appendChild(sortSelect);
+    controlsDiv.appendChild(groupLabel);
+    controlsDiv.appendChild(groupSelect);
+    controlsDiv.appendChild(hideAddedLabel);
     controlsDiv.appendChild(searchInput);
+    const topActionRow = document.createElement("div");
+    topActionRow.style.display = "flex";
+    topActionRow.style.gap = "20px";
+    topActionRow.style.margin = "18px 0 10px 0";
+    topActionRow.style.justifyContent = "flex-start";
+    topActionRow.appendChild(addSelectedBtn);
+    topActionRow.appendChild(enableSelectedBtn);
+    topActionRow.appendChild(disableSelectedBtn);
+    list.insertBefore(topActionRow, controlsDiv);
     list.innerHTML = "";
     list.appendChild(controlsDiv);
+    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);
+    }
     list.style.display = "block";
-    await updateDiscoveryView(devices, preferences);
+    controlsInitialized = true;
+    const updateActionButtons = () => {
+      const hasSelection = selectedIds2.size > 0;
+      addSelectedBtn.disabled = !hasSelection;
+      enableSelectedBtn.disabled = !hasSelection;
+      disableSelectedBtn.disabled = !hasSelection;
+    };
+    setInterval(updateActionButtons, 300);
+  };
+  try {
+    const bleSettings = {
+      bleEnabled: !(disableBleCheckbox?.checked ?? false),
+      bleScanDurationSeconds: Math.max(3, Math.min(15, Number(scanSelect?.value || 5))),
+      bleTimeoutSeconds: Math.max(3, Math.min(30, Number(timeoutInput?.value || 8)))
+    };
+    setDiscoveryBleSettings(bleSettings);
+    showBusyUi();
+    btn.disabled = true;
+    btn.textContent = "\u{1F50D} Discovering...";
+    setPhase(bleSettings.bleEnabled ? "Scanning BLE..." : "Skipping BLE scan...");
+    renderProgress();
+    status.classList.remove("error");
+    const devicesFoundDisplay = document.getElementById("discoverDevicesFound");
+    if (devicesFoundDisplay) {
+      devicesFoundDisplay.style.display = "none";
+      devicesFoundDisplay.classList.remove("discovery-scanning-pulse");
+    }
+    if (cancelBtn) {
+      cancelBtn.style.display = "inline-block";
+      cancelBtn.disabled = false;
+      cancelBtn.onclick = () => {
+        cancelled = true;
+        const totalSeconds = Math.max(0, Math.floor((Date.now() - startedAt) / 1e3));
+        status.textContent = `Discovery cancelled (${totalSeconds}s total)`;
+        if (phaseProgress) {
+          phaseProgress.style.display = "none";
+        }
+        if (devicesFoundDisplay) {
+          devicesFoundDisplay.style.display = "none";
+          devicesFoundDisplay.classList.remove("discovery-scanning-pulse");
+        }
+        cancelBtn.style.display = "none";
+        btn.disabled = false;
+        btn.textContent = "\u{1F50D} Discover Devices";
+        hideBusyUi();
+      };
+    }
+    if (bleSettings.bleEnabled) {
+      const bleDevicesRaw = await discoverDevices("ble", bleSettings);
+      if (cancelled) {
+        return;
+      }
+      discoveredDevices = dedupeById(bleDevicesRaw);
+      uiLog.info("BLE discover response:", bleDevicesRaw);
+      if (devicesFoundDisplay && bleDevicesRaw.length > 0) {
+        devicesFoundDisplay.style.display = "inline";
+        devicesFoundDisplay.classList.add("discovery-scanning-pulse");
+        devicesFoundDisplay.textContent = `\u{1F4CA} ${bleDevicesRaw.length} device(s) found (scanning...)`;
+      }
+    } else {
+      discoveredDevices = [];
+      uiLog.info("BLE discovery skipped by user setting");
+    }
+    if (!autoAddAll && discoveredDevices.length > 0) {
+      await ensureDiscoveryControls();
+      await updateDiscoveryView(discoveredDevices, preferences, groupBy, hideAdded, selectedIds);
+      status.textContent = `Showing ${discoveredDevices.length} device(s) from BLE, fetching OpenAPI...`;
+    }
+    setPhase("Fetching OpenAPI...");
+    renderProgress();
+    try {
+      const openApiDevicesRaw = await discoverDevices("openapi");
+      if (cancelled) {
+        return;
+      }
+      uiLog.info("OpenAPI discover response:", openApiDevicesRaw);
+      discoveredDevices = mergeDiscoveredDevices(discoveredDevices, openApiDevicesRaw);
+      if (devicesFoundDisplay && discoveredDevices.length > 0) {
+        devicesFoundDisplay.textContent = `\u{1F4CA} ${discoveredDevices.length} device(s) found (complete)`;
+      }
+    } catch (openApiError) {
+      uiLog.warn("OpenAPI phase failed during discovery:", openApiError);
+      if (!discoveredDevices.length) {
+        throw openApiError;
+      }
+      if (devicesFoundDisplay) {
+        devicesFoundDisplay.classList.remove("discovery-scanning-pulse");
+      }
+    }
+    setPhase("Complete");
+    renderProgress();
+    uiLog.info("Final merged discover response:", discoveredDevices);
+    if (!discoveredDevices.length) {
+      status.textContent = "No devices found in your SwitchBot account";
+      toastInfo("No devices found in your SwitchBot account");
+      list.style.display = "none";
+      if (devicesFoundDisplay) {
+        devicesFoundDisplay.style.display = "none";
+        devicesFoundDisplay.classList.remove("discovery-scanning-pulse");
+      }
+      clearDiscoveryCache();
+      updateLastScannedStatus();
+      return;
+    }
+    if (autoAddAll) {
+      status.textContent = `Auto-adding ${discoveredDevices.length} device(s)...`;
+      try {
+        const bulkResult = await addDevicesInBulk(
+          discoveredDevices.map((d) => ({
+            deviceId: d.id,
+            name: d.name,
+            type: d.type,
+            rssi: d.rssi,
+            address: d.address,
+            model: d.model
+          }))
+        );
+        uiLog.info("Bulk add response:", bulkResult);
+        if (!bulkResult || bulkResult.success === false) {
+          throw new Error(bulkResult?.data?.message || "Bulk add failed");
+        }
+        const addedCount = bulkResult?.addedCount ?? bulkResult?.data?.addedCount ?? 0;
+        const skippedCount = bulkResult?.skippedCount ?? bulkResult?.data?.skippedCount ?? 0;
+        status.textContent = `\u2713 Added ${addedCount} device(s)${skippedCount > 0 ? ` (${skippedCount} skipped)` : ""}`;
+        if (addedCount > 0) {
+          toastSuccess(`Added ${addedCount} device(s)${skippedCount > 0 ? ` (${skippedCount} skipped)` : ""}`);
+        } else if (skippedCount > 0) {
+          toastWarning(`No new devices were added (${skippedCount} skipped)`);
+        }
+        status.classList.remove("error");
+        list.style.display = "none";
+        if (discoveredDevices.length > 0) {
+          const synced = await syncParentPluginConfigFromDisk(true);
+          status.textContent += synced ? " - Config saved automatically." : " - Warning: config may not persist until you close/reopen settings.";
+          if (synced) {
+            toastSuccess("Configuration synced and saved automatically");
+          } else {
+            toastWarning("Configuration sync failed; close and reopen settings before Save");
+          }
+        }
+      } catch (e) {
+        uiLog.error("Bulk add error:", e);
+        status.textContent = `\u2717 Error: ${e instanceof Error ? e.message : "Failed to add devices"}`;
+        status.classList.add("error");
+        toastError(e instanceof Error ? e.message : "Failed to add devices");
+      }
+      await loadConfiguredDevices();
+      return;
+    }
+    await ensureDiscoveryControls();
+    await updateDiscoveryView(discoveredDevices, preferences, groupBy, hideAdded, selectedIds);
+    setDiscoveryCache(discoveredDevices);
+    updateLastScannedStatus();
   } catch (e) {
+    if (cancelled) {
+      return;
+    }
     uiLog.error("Discovery error:", e);
     status.textContent = `Error: ${e instanceof Error ? e.message : "Discovery failed"}`;
     status.classList.add("error");
     toastError(e instanceof Error ? e.message : "Discovery failed");
     list.style.display = "none";
   } finally {
+    clearInterval(progressTimer);
     hideBusyUi();
+    if (phaseProgress) {
+      phaseProgress.style.display = "none";
+    }
+    if (phaseFill) {
+      phaseFill.style.width = "0%";
+    }
+    if (phaseLabel) {
+      phaseLabel.textContent = "";
+    }
+    const devicesFoundDisplay = document.getElementById("discoverDevicesFound");
+    if (devicesFoundDisplay) {
+      devicesFoundDisplay.style.display = "none";
+      devicesFoundDisplay.classList.remove("discovery-scanning-pulse");
+    }
     btn.disabled = false;
     btn.textContent = "\u{1F50D} Discover Devices";
+    if (cancelBtn) {
+      cancelBtn.disabled = false;
+      cancelBtn.style.display = "none";
+      cancelBtn.onclick = null;
+    }
   }
 }
-async function updateDiscoveryView(allDevices, preferences) {
-  const filtered = filterDevices(allDevices, preferences.connectionType, preferences.searchQuery);
-  const sorted = sortDevices(filtered, preferences.sortBy);
-  const configured = await fetchDevices();
-  const configuredIds = new Set((configured || []).map((d) => normalizeId(d?.id || d?.deviceId)));
-  const ul = await renderDiscoveredDevices(sorted, {
-    configuredIds
+async function updateDiscoveryView(allDevices, preferences, groupBy, hideAdded, selectedIds) {
+  const visibleDevices = allDevices.filter((d) => {
+    if (hideAdded && d.added) {
+      return false;
+    }
+    return true;
   });
-  document.getElementById("discoveredDevices")?.replaceWith(ul);
-  ul.id = "discoveredDevices";
+  const configuredIds = new Set(
+    allDevices.filter((d) => d.added).map((d) => normalizeId(d.id))
+  );
+  const getConnectionGroup = (device) => {
+    if (device?.isIR) {
+      return "IR";
+    }
+    const connectionType = String(device?.connectionType || "").toLowerCase();
+    if (connectionType.includes("both")) {
+      return "Both";
+    }
+    if (connectionType.includes("ble")) {
+      return "BLE";
+    }
+    if (connectionType.includes("api")) {
+      return "OpenAPI";
+    }
+    return "Unknown";
+  };
+  const getHubGroup = (device) => {
+    const hub = String(device?.hubDeviceId || "").trim();
+    return hub ? `Hub ${hub}` : "No Hub";
+  };
+  const getTypeGroup = (device) => {
+    const type = String(device?.type || "").trim();
+    return type || "Unknown Type";
+  };
+  const groupedDevices = /* @__PURE__ */ new Map();
+  for (const d of visibleDevices) {
+    let group = getConnectionGroup(d);
+    if (groupBy === "hub") {
+      group = getHubGroup(d);
+    } else if (groupBy === "type") {
+      group = getTypeGroup(d);
+    }
+    const groupDevices = groupedDevices.get(group) || [];
+    groupDevices.push(d);
+    groupedDevices.set(group, groupDevices);
+  }
+  let orderedGroups = [];
+  if (groupBy === "hub") {
+    const hubGroups = [...groupedDevices.keys()].filter((group) => group !== "No Hub").sort((a, b) => a.localeCompare(b));
+    orderedGroups = groupedDevices.has("No Hub") ? [...hubGroups, "No Hub"] : hubGroups;
+  } else if (groupBy === "type") {
+    const typeGroups = [...groupedDevices.keys()].filter((group) => group !== "Unknown Type").sort((a, b) => a.localeCompare(b));
+    orderedGroups = groupedDevices.has("Unknown Type") ? [...typeGroups, "Unknown Type"] : typeGroups;
+  } else {
+    const groupOrder = ["Both", "BLE", "OpenAPI", "IR", "Unknown"];
+    orderedGroups = groupOrder.filter((group) => groupedDevices.has(group));
+  }
+  const container = document.createElement("div");
+  container.id = "discoveredDevices";
+  container.className = "discovery-groups";
+  if (!visibleDevices.length) {
+    const empty = document.createElement("div");
+    empty.className = "discovery-group-empty";
+    empty.textContent = hideAdded ? "No devices match current filters (or all are already added)." : "No devices match current filters.";
+    container.appendChild(empty);
+  } else {
+    for (const groupName of orderedGroups) {
+      const groupItems = groupedDevices.get(groupName);
+      if (!groupItems?.length) {
+        continue;
+      }
+      const groupSection = document.createElement("section");
+      groupSection.className = "discovery-group";
+      const groupStorageKey = `${groupBy}:${groupName}`;
+      let expanded = isDiscoveryGroupExpanded(groupStorageKey);
+      const groupHeader = document.createElement("button");
+      groupHeader.className = "discovery-group-header-btn";
+      groupHeader.type = "button";
+      const setGroupHeaderText = () => {
+        const marker = expanded ? "\u25BE" : "\u25B8";
+        groupHeader.textContent = `${marker} ${groupName} (${groupItems.length})`;
+      };
+      setGroupHeaderText();
+      groupSection.appendChild(groupHeader);
+      const groupList = await renderDiscoveredDevices(groupItems, {
+        configuredIds,
+        selectedIds,
+        onToggleSelect: (device, selected) => {
+          const id = normalizeId(device.id);
+          if (selected) {
+            selectedIds.add(id);
+          } else {
+            selectedIds.delete(id);
+          }
+          const btn = document.querySelector("button")?.parentElement?.querySelector("button");
+          if (btn && btn.textContent?.includes("Add Selected")) {
+            btn.disabled = selectedIds.size === 0;
+          }
+        }
+      });
+      if (!expanded) {
+        groupList.style.display = "none";
+      }
+      groupHeader.onclick = () => {
+        expanded = !expanded;
+        setDiscoveryGroupExpanded(groupStorageKey, expanded);
+        setGroupHeaderText();
+        groupList.style.display = expanded ? "grid" : "none";
+      };
+      groupSection.appendChild(groupList);
+      container.appendChild(groupSection);
+    }
+  }
+  const existingList = document.getElementById("discoveredDevices");
+  if (existingList && existingList.parentNode) {
+    existingList.replaceWith(container);
+  } else {
+    const listContainer = document.getElementById("discoveredList");
+    if (listContainer) {
+      listContainer.appendChild(container);
+    }
+  }
+  const legacyAddSelectedBtns = [];
+  const allBtns = document.querySelectorAll("button");
+  for (let i = 0; i < allBtns.length; i++) {
+    const btn = allBtns[i];
+    if (btn.textContent && btn.textContent.trim() === "Add Selected") {
+      legacyAddSelectedBtns.push(btn);
+    }
+  }
+  for (let i = 0; i < legacyAddSelectedBtns.length; i++) {
+    legacyAddSelectedBtns[i].remove();
+  }
+  function updateBatchButtonStates() {
+    const addSelectedBtn = document.getElementById("addSelectedBtn");
+    const enableSelectedBtn = document.querySelector("button")?.parentElement?.querySelector('button[aria-label="Enable Selected"]');
+    const disableSelectedBtn = document.querySelector("button")?.parentElement?.querySelector('button[aria-label="Disable Selected"]');
+    const hasSelection = selectedIds.size > 0;
+    if (addSelectedBtn) addSelectedBtn.disabled = !hasSelection;
+    if (enableSelectedBtn) enableSelectedBtn.disabled = !hasSelection;
+    if (disableSelectedBtn) disableSelectedBtn.disabled = !hasSelection;
+  }
+  window.removeEventListener("discovery-selection-changed", updateBatchButtonStates);
+  window.addEventListener("discovery-selection-changed", updateBatchButtonStates);
+  let batchControls = document.getElementById("batchImportControls");
+  if (!batchControls) {
+    batchControls = document.createElement("div");
+    batchControls.id = "batchImportControls";
+    batchControls.style.display = "flex";
+    batchControls.style.flexWrap = "wrap";
+    batchControls.style.alignItems = "center";
+    batchControls.style.gap = "18px";
+    batchControls.style.margin = "8px 0 18px 0";
+    batchControls.style.width = "100%";
+    const buttonRow = document.createElement("div");
+    buttonRow.style.display = "flex";
+    buttonRow.style.flexWrap = "nowrap";
+    buttonRow.style.alignItems = "center";
+    buttonRow.style.justifyContent = "center";
+    buttonRow.style.gap = "16px";
+    buttonRow.style.width = "100%";
+    const addSelectedBtn = document.createElement("button");
+    addSelectedBtn.id = "addSelectedBtn";
+    addSelectedBtn.textContent = "Add Selected to Config";
+    addSelectedBtn.disabled = selectedIds.size === 0;
+    addSelectedBtn.style.fontWeight = "600";
+    const redButtonStyle = {
+      width: "220px",
+      padding: "12px 0",
+      fontSize: "17px",
+      marginBottom: "0",
+      boxShadow: "0 2px 8px 0 rgba(220,38,38,0.10)",
+      borderRadius: "8px"
+    };
+    Object.assign(addSelectedBtn.style, redButtonStyle);
+    addSelectedBtn.style.background = "#ef4444";
+    addSelectedBtn.style.color = "white";
+    addSelectedBtn.style.transition = "background 0.2s, box-shadow 0.2s";
+    addSelectedBtn.onmouseenter = function() {
+      addSelectedBtn.style.background = "#dc2626";
+    };
+    addSelectedBtn.onmouseleave = function() {
+      addSelectedBtn.style.background = "#ef4444";
+    };
+    addSelectedBtn.onclick = async () => {
+      if (!selectedIds.size) {
+        return;
+      }
+      addSelectedBtn.disabled = true;
+      addSelectedBtn.textContent = "Adding...";
+      try {
+        const selectedDevices = visibleDevices.filter((d) => selectedIds.has(normalizeId(d.id)));
+        const bulkResult = await addDevicesInBulk(selectedDevices.map((d) => ({
+          deviceId: d.id,
+          name: d.name,
+          type: d.type,
+          rssi: d.rssi,
+          address: d.address,
+          model: d.model
+        })));
+        uiLog.info("Batch add response:", bulkResult);
+        if (!bulkResult || bulkResult.success === false) {
+          throw new Error(bulkResult?.data?.message || "Batch add failed");
+        }
+        const addedCount = bulkResult?.addedCount ?? bulkResult?.data?.addedCount ?? 0;
+        const skippedCount = bulkResult?.skippedCount ?? bulkResult?.data?.skippedCount ?? 0;
+        toastSuccess(`Added ${addedCount} device(s)${skippedCount > 0 ? ` (${skippedCount} skipped)` : ""}`);
+        await loadConfiguredDevices();
+        selectedIds.clear();
+        addSelectedBtn.disabled = true;
+        addSelectedBtn.textContent = "Add Selected to Config";
+        await updateDiscoveryView(allDevices, preferences, groupBy, hideAdded, selectedIds);
+      } catch (e) {
+        uiLog.error("Batch add error:", e);
+        toastError(e instanceof Error ? e.message : "Failed to add devices");
+        addSelectedBtn.disabled = false;
+        addSelectedBtn.textContent = "Add Selected to Config";
+      }
+    };
+    const enableSelectedBtn = document.createElement("button");
+    enableSelectedBtn.textContent = "Enable Selected";
+    enableSelectedBtn.style.fontWeight = "600";
+    Object.assign(enableSelectedBtn.style, redButtonStyle);
+    enableSelectedBtn.style.background = "#ef4444";
+    enableSelectedBtn.style.color = "white";
+    enableSelectedBtn.style.transition = "background 0.2s, box-shadow 0.2s";
+    enableSelectedBtn.onmouseenter = function() {
+      enableSelectedBtn.style.background = "#dc2626";
+    };
+    enableSelectedBtn.onmouseleave = function() {
+      enableSelectedBtn.style.background = "#ef4444";
+    };
+    enableSelectedBtn.disabled = selectedIds.size === 0;
+    enableSelectedBtn.onclick = async () => {
+      if (!selectedIds.size) {
+        return;
+      }
+      enableSelectedBtn.disabled = true;
+      try {
+        showBusyUi();
+        await batchSetDeviceEnabled(selectedIds, true);
+        toastSuccess("Selected devices enabled");
+        await loadConfiguredDevices();
+        await updateDiscoveryView(allDevices, preferences, groupBy, hideAdded, selectedIds);
+      } catch (e) {
+        uiLog.error("Batch enable error:", e);
+        toastError(e instanceof Error ? e.message : "Failed to enable devices");
+      } finally {
+        hideBusyUi();
+        enableSelectedBtn.disabled = false;
+      }
+    };
+    const disableSelectedBtn = document.createElement("button");
+    disableSelectedBtn.textContent = "Disable Selected";
+    disableSelectedBtn.style.fontWeight = "600";
+    Object.assign(disableSelectedBtn.style, redButtonStyle);
+    disableSelectedBtn.style.background = "#ef4444";
+    disableSelectedBtn.style.color = "white";
+    disableSelectedBtn.style.transition = "background 0.2s, box-shadow 0.2s";
+    disableSelectedBtn.onmouseenter = function() {
+      disableSelectedBtn.style.background = "#dc2626";
+    };
+    disableSelectedBtn.onmouseleave = function() {
+      disableSelectedBtn.style.background = "#ef4444";
+    };
+    disableSelectedBtn.disabled = selectedIds.size === 0;
+    disableSelectedBtn.onclick = async () => {
+      if (!selectedIds.size) {
+        return;
+      }
+      disableSelectedBtn.disabled = true;
+      try {
+        showBusyUi();
+        await batchSetDeviceEnabled(selectedIds, false);
+        toastSuccess("Selected devices disabled");
+        await loadConfiguredDevices();
+        await updateDiscoveryView(allDevices, preferences, groupBy, hideAdded, selectedIds);
+      } catch (e) {
+        uiLog.error("Batch disable error:", e);
+        toastError(e instanceof Error ? e.message : "Failed to disable devices");
+      } finally {
+        hideBusyUi();
+        disableSelectedBtn.disabled = false;
+      }
+    };
+    buttonRow.appendChild(addSelectedBtn);
+    buttonRow.appendChild(enableSelectedBtn);
+    buttonRow.appendChild(disableSelectedBtn);
+    batchControls.appendChild(buttonRow);
+    const listContainer = document.getElementById("discoveredList");
+    if (listContainer) {
+      listContainer.insertBefore(batchControls, listContainer.firstChild);
+    }
+  } else {
+    const addSelectedBtn = document.getElementById("addSelectedBtn");
+    if (addSelectedBtn) {
+      addSelectedBtn.disabled = selectedIds.size === 0;
+    }
+  }
   const status = document.getElementById("discoverStatus");
   if (status) {
     const totalCount = allDevices.length;
-    const filteredCount = sorted.length;
+    const filteredCount = visibleDevices.length;
     status.textContent = filteredCount === totalCount ? `Found ${totalCount} device(s)` : `Showing ${filteredCount} of ${totalCount} device(s)`;
   }
 }
@@ -498,6 +1559,7 @@ async function addDeviceToConfig(device) {
   const { addDeviceToConfig: addDevice2 } = await Promise.resolve().then(() => (init_devices(), devices_exports));
   await addDevice2(device);
 }
+var DISCOVERY_GROUP_BY_KEY, DISCOVERY_GROUP_EXPANDED_KEY, DISCOVERY_BLE_SETTINGS_KEY, DISCOVERY_HIDE_ADDED_KEY, DISCOVERY_CACHE_KEY, DISCOVERY_AUTO_REFRESH_KEY, DISCOVERY_CACHE_TTL_MS, discoveryAutoRefreshTimer, discoveryLastScannedTimer;
 var init_discovery = __esm({
   "src/homebridge-ui/public/js/discovery.ts"() {
     "use strict";
@@ -507,6 +1569,15 @@ var init_discovery = __esm({
     init_modal();
     init_render();
     init_toast();
+    DISCOVERY_GROUP_BY_KEY = "discoveryGroupBy";
+    DISCOVERY_GROUP_EXPANDED_KEY = "discoveryGroupExpanded";
+    DISCOVERY_BLE_SETTINGS_KEY = "discoveryBleSettings";
+    DISCOVERY_HIDE_ADDED_KEY = "discoveryHideAdded";
+    DISCOVERY_CACHE_KEY = "discoveryCache";
+    DISCOVERY_AUTO_REFRESH_KEY = "discoveryAutoRefreshSeconds";
+    DISCOVERY_CACHE_TTL_MS = 5 * 60 * 1e3;
+    discoveryAutoRefreshTimer = null;
+    discoveryLastScannedTimer = null;
   }
 });
 
@@ -724,6 +1795,40 @@ async function importDiscoveredDevice(device) {
     macInput.style.borderRadius = "6px";
     macInput.style.fontSize = "14px";
     macInput.style.boxSizing = "border-box";
+    const encryptionKeyLabel = document.createElement("label");
+    encryptionKeyLabel.textContent = "BLE Encryption Key (optional)";
+    encryptionKeyLabel.style.display = "block";
+    encryptionKeyLabel.style.marginBottom = "6px";
+    encryptionKeyLabel.style.fontWeight = "500";
+    encryptionKeyLabel.style.fontSize = "12px";
+    encryptionKeyLabel.style.color = "#6b7280";
+    const encryptionKeyInput = document.createElement("input");
+    encryptionKeyInput.type = "password";
+    encryptionKeyInput.value = device.encryptionKey || "";
+    encryptionKeyInput.placeholder = "Paste device BLE encryption key";
+    encryptionKeyInput.style.width = "100%";
+    encryptionKeyInput.style.marginBottom = "12px";
+    encryptionKeyInput.style.padding = "8px 10px";
+    encryptionKeyInput.style.borderRadius = "6px";
+    encryptionKeyInput.style.fontSize = "14px";
+    encryptionKeyInput.style.boxSizing = "border-box";
+    const keyIdLabel = document.createElement("label");
+    keyIdLabel.textContent = "BLE Key ID (optional)";
+    keyIdLabel.style.display = "block";
+    keyIdLabel.style.marginBottom = "6px";
+    keyIdLabel.style.fontWeight = "500";
+    keyIdLabel.style.fontSize = "12px";
+    keyIdLabel.style.color = "#6b7280";
+    const keyIdInput = document.createElement("input");
+    keyIdInput.type = "text";
+    keyIdInput.value = device.keyId || "";
+    keyIdInput.placeholder = "e.g. ff";
+    keyIdInput.style.width = "100%";
+    keyIdInput.style.marginBottom = "12px";
+    keyIdInput.style.padding = "8px 10px";
+    keyIdInput.style.borderRadius = "6px";
+    keyIdInput.style.fontSize = "14px";
+    keyIdInput.style.boxSizing = "border-box";
     const buttons = document.createElement("div");
     buttons.style.display = "flex";
     buttons.style.gap = "10px";
@@ -750,7 +1855,9 @@ async function importDiscoveredDevice(device) {
     importBtn.onclick = () => cleanup({
       configDeviceName: nameInput.value || device.name || device.id,
       configDeviceType: typeSelect.value || device.type,
-      address: macInput.value || void 0
+      address: macInput.value || void 0,
+      encryptionKey: encryptionKeyInput.value || void 0,
+      keyId: keyIdInput.value || void 0
     });
     div.addEventListener("click", (event) => {
       if (event.target === div) {
@@ -765,6 +1872,10 @@ async function importDiscoveredDevice(device) {
     contentDiv.appendChild(typeSelect);
     contentDiv.appendChild(macLabel);
     contentDiv.appendChild(macInput);
+    contentDiv.appendChild(encryptionKeyLabel);
+    contentDiv.appendChild(encryptionKeyInput);
+    contentDiv.appendChild(keyIdLabel);
+    contentDiv.appendChild(keyIdInput);
     contentDiv.appendChild(buttons);
     modal.appendChild(title);
     modal.appendChild(contentDiv);
@@ -1167,6 +2278,7 @@ __export(render_exports, {
   getRssiSignalQuality: () => getRssiSignalQuality,
   renderBadge: () => renderBadge,
   renderConnectionBadge: () => renderConnectionBadge,
+  renderDeviceDetailsPanel: () => renderDeviceDetailsPanel,
   renderDeviceList: () => renderDeviceList,
   renderDiscoveredDevices: () => renderDiscoveredDevices,
   renderIRBadge: () => renderIRBadge,
@@ -1305,8 +2417,216 @@ function scrollToConfiguredDevice(deviceId) {
     target.style.background = originalBackground;
   }, 1800);
 }
+function createConnectionTestControls(device) {
+  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: testDeviceConnection2 } = await Promise.resolve().then(() => (init_api(), api_exports));
+      const result = await testDeviceConnection2({
+        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 = `\u2713 ${method} \xB7 ${measuredLatency}ms`;
+        status.style.color = "#16a34a";
+      } else {
+        const detail = result?.message ? ` \xB7 ${result.message}` : "";
+        status.textContent = `\u2717 Failed \xB7 ${measuredLatency}ms${detail}`;
+        status.style.color = "#dc2626";
+      }
+    } catch (e) {
+      status.textContent = `\u2717 Failed \xB7 ${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) {
+  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);
+  }
+}
+function renderDeviceDetailsPanel(device) {
+  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;
+  `;
+  const batteryHistoryKey = `batteryHistory:${device?.id || device?.deviceId}`;
+  let batteryHistory = [];
+  try {
+    const raw = localStorage.getItem(batteryHistoryKey);
+    if (raw) batteryHistory = JSON.parse(raw);
+  } catch {
+  }
+  const now = Date.now();
+  if (typeof device?.battery === "number") {
+    const last = batteryHistory[batteryHistory.length - 1];
+    if (!last || last.value !== device.battery || now - last.ts > 60 * 60 * 1e3) {
+      batteryHistory.push({ value: device.battery, ts: now });
+      if (batteryHistory.length > 30) batteryHistory = batteryHistory.slice(-30);
+      try {
+        localStorage.setItem(batteryHistoryKey, JSON.stringify(batteryHistory));
+      } catch {
+      }
+    }
+  }
+  const rows = [
+    { 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 !== void 0 && 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 = "\u{1F4CB}";
+      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 = "\u2713";
+          setTimeout(() => {
+            copyBtn.textContent = "\u{1F4CB}";
+          }, 1200);
+        } catch (_e) {
+          copyBtn.textContent = "!";
+          setTimeout(() => {
+            copyBtn.textContent = "\u{1F4CB}";
+          }, 1200);
+        }
+      };
+      valueWrap.appendChild(copyBtn);
+    }
+    line.appendChild(label);
+    line.appendChild(valueWrap);
+    details.appendChild(line);
+  }
+  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] !== void 0 && !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;
+}
 async function renderDiscoveredDevices(devices, options = {}) {
   const ul = document.createElement("ul");
+  ul.className = "device-grid";
   ul.style.maxHeight = "400px";
   ul.style.overflowY = "auto";
   ul.style.marginTop = "12px";
@@ -1315,34 +2635,98 @@ async function renderDiscoveredDevices(devices, options = {}) {
   const { addDeviceToConfig: addDeviceToConfig3 } = await Promise.resolve().then(() => (init_discovery(), discovery_exports));
   const { loadConfiguredDevices: loadConfiguredDevices2 } = await Promise.resolve().then(() => (init_devices(), devices_exports));
   const configuredIds = options.configuredIds ?? /* @__PURE__ */ new Set();
+  const selectedIds = options.selectedIds ?? /* @__PURE__ */ new Set();
+  const onToggleSelect = options.onToggleSelect;
   for (const d of devices) {
     const deviceId = normalizeId2(d.id);
     const alreadyAdded = configuredIds.has(deviceId);
     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);
+      window.dispatchEvent(new CustomEvent("discovery-selection-changed"));
+    };
+    nameContainer.appendChild(selectCheckbox);
     nameContainer.appendChild(name);
+    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);
+    }
+    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 > 1e3 * 60 * 60) {
+          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 = "\u25BE";
+    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 ? "\u2713 Already Added" : "\u2795 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;";
+    duplicateBadge.style.cssText = alreadyAdded ? "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);
     if (d.connectionType) {
       const badge = renderConnectionBadge(d.connectionType);
@@ -1357,11 +2741,21 @@ async function renderDiscoveredDevices(devices, options = {}) {
       nameContainer.appendChild(renderSignalBars(d.rssi));
       nameContainer.appendChild(renderSignalQualityBadge(d.rssi));
     }
+    if (typeof d.battery === "number" && d.battery < 20) {
+      const batteryWarn = document.createElement("span");
+      batteryWarn.textContent = `\u26A0\uFE0F ${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}`;
@@ -1372,11 +2766,13 @@ async function renderDiscoveredDevices(devices, options = {}) {
     details.textContent = detailsText;
     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;
@@ -1395,25 +2791,44 @@ async function renderDiscoveredDevices(devices, options = {}) {
       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 loadConfiguredDevices2();
         scrollToConfiguredDevice(d.id);
       };
       li.appendChild(info);
-      const actions = document.createElement("div");
-      actions.style.display = "flex";
-      actions.style.alignItems = "center";
-      actions.appendChild(viewBtn);
-      actions.appendChild(addBtn);
-      li.appendChild(actions);
+      const actions2 = document.createElement("div");
+      actions2.className = "device-actions";
+      actions2.style.display = "flex";
+      actions2.style.alignItems = "center";
+      actions2.style.flexWrap = "wrap";
+      actions2.style.justifyContent = "flex-start";
+      actions2.style.marginLeft = "0";
+      actions2.style.width = "100%";
+      actions2.style.marginTop = "2px";
+      actions2.style.gap = "5px";
+      actions2.appendChild(viewBtn);
+      actions2.appendChild(addBtn);
+      actions2.appendChild(createConnectionTestControls(d));
+      li.appendChild(actions2);
       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);
   }
   return ul;
@@ -1526,6 +2941,7 @@ function renderDeviceList(list) {
     return;
   }
   status.textContent = `Found ${list.length} device(s)`;
+  ul.classList.add("device-grid");
   ul.innerHTML = "";
   if (removeAllContainer) {
     removeAllContainer.style.display = "block";
@@ -1534,22 +2950,56 @@ function renderDeviceList(list) {
     const li = document.createElement("li");
     li.className = "device-item";
     li.setAttribute("data-device-id", normalizeId2(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 = "\u25BE";
+    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);
     if (d.rssi !== void 0 && d.rssi !== null && d.rssi !== 0) {
       nameContainer.appendChild(renderSignalBars(d.rssi));
@@ -1557,29 +3007,36 @@ function renderDeviceList(list) {
     }
     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}` : "";
     const roomText = d.room ? `room: ${d.room}` : "";
     meta.textContent = [typeText, connText, roomText].filter(Boolean).join(" | ");
     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 = "\u270F\uFE0F Edit";
-    editBtn.style.padding = "6px 12px";
-    editBtn.style.fontSize = "12px";
+    editBtn.style.padding = "4px 9px";
+    editBtn.style.fontSize = "11px";
     editBtn.onclick = async () => {
       const { editDevice: editDevice2 } = await Promise.resolve().then(() => (init_modals(), modals_exports));
       await editDevice2(d);
     };
     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);
@@ -1595,8 +3052,8 @@ function renderDeviceList(list) {
     });
     const deleteBtn = document.createElement("button");
     deleteBtn.textContent = "\u{1F5D1}\uFE0F 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: deleteDeviceFromConfig2 } = await Promise.resolve().then(() => (init_devices_delete(), devices_delete_exports));
@@ -1604,6 +3061,7 @@ function renderDeviceList(list) {
     };
     buttons.appendChild(editBtn);
     buttons.appendChild(copyBtn);
+    buttons.appendChild(createConnectionTestControls(d));
     buttons.appendChild(deleteBtn);
     li.appendChild(info);
     li.appendChild(buttons);
@@ -1636,7 +3094,9 @@ async function addDeviceToConfig2(device, options = {}) {
     const resp = await addDevice(device.id, importValues.configDeviceName, importValues.configDeviceType, {
       address: importValues.address,
       model: device.model,
-      rssi: device.rssi
+      rssi: device.rssi,
+      encryptionKey: importValues.encryptionKey,
+      keyId: importValues.keyId
     });
     uiLog.info("Add device response:", resp);
     if (!resp || resp.success === false) {
@@ -1804,6 +3264,7 @@ window.saveCredentials = saveCredentials2;
 window.discoverDevices = discoverDevices2;
 async function init() {
   await loadCredentialStatus();
+  await initializeDiscoverySettings();
   const list = await loadConfiguredDevices();
   await initRemoveAllButton();
 }