@homebridge-plugins/homebridge-eufy-security 5.0.0-beta.31 → 5.0.0-beta.33

package/homebridge-ui/public/i18n/en.json

@@ -255,5 +255,31 @@
   "updatePendingManual": "This page shows what the running version can do. Restart Homebridge to use the version you installed.",
   "updatePendingSummary": "This page shows what the running version can do. Restart to use the version you installed.",
   "updatePendingTitle": "An update is waiting",
-  "updatePendingVersionLabel": "Running now"
+  "updatePendingVersionLabel": "Running now",
+  "menuWizard": "Setup assistant",
+  "closeWizard": "Back to devices",
+  "wizardTitle": "Setup assistant",
+  "wizardProgress": "Device {current} of {total}",
+  "wizardRestartSummary": "Restart Homebridge to connect your cameras. This assistant opens again on its own once the plugin is running, to go through each device with you.",
+  "wizardBack": "Back",
+  "wizardNext": "Next",
+  "wizardFinish": "Finish",
+  "wizardClose": "Close",
+  "wizardLiveStarting": "Connecting to the camera. This can take up to 30 seconds.",
+  "wizardLiveFailed": "The camera did not send video. Check it is on and online, then try again.",
+  "wizardEufySettings": "Camera settings in the eufy app",
+  "wizardMotionDetection": "Motion detection",
+  "wizardNightVision": "Night vision",
+  "wizardNotificationStyle": "Notification style",
+  "wizardSettingSending": "Sending to the camera…",
+  "wizardSettingSent": "Sent. The camera confirms within a few minutes.",
+  "wizardSettingFailed": "The camera did not take the change. Try again.",
+  "wizardLivePlay": "Play live video",
+  "wizardLiveStop": "Stop live video",
+  "wizardHomeKitTitle": "In the Home app",
+  "wizardHomeKitHelp": "What the Home app shows of this device and how it behaves there. Saved with the plugin settings.",
+  "wizardEufyHelp": "Sent to the camera itself, the same settings as in the eufy app.",
+  "wizardMapLabel": "Your devices",
+  "wizardMapBase": "HomeBase",
+  "wizardMapStandalone": "Standalone"
 }

package/homebridge-ui/public/i18n/fr.json

@@ -255,5 +255,31 @@
   "updatePendingManual": "Cette page montre ce que sait faire la version en cours. Redémarrez Homebridge pour utiliser la version installée.",
   "updatePendingSummary": "Cette page montre ce que sait faire la version en cours. Redémarrez pour utiliser la version installée.",
   "updatePendingTitle": "Une mise à jour attend",
-  "updatePendingVersionLabel": "Version en cours"
+  "updatePendingVersionLabel": "Version en cours",
+  "menuWizard": "Assistant de configuration",
+  "closeWizard": "Retour aux appareils",
+  "wizardTitle": "Assistant de configuration",
+  "wizardProgress": "Appareil {current} sur {total}",
+  "wizardRestartSummary": "Redémarrez Homebridge pour connecter vos caméras. Cet assistant s’ouvrira de lui-même une fois le plugin lancé, pour passer chaque appareil en revue avec vous.",
+  "wizardBack": "Retour",
+  "wizardNext": "Suivant",
+  "wizardFinish": "Terminer",
+  "wizardClose": "Fermer",
+  "wizardLiveStarting": "Connexion à la caméra. Cela peut prendre jusqu’à 30 secondes.",
+  "wizardLiveFailed": "La caméra n’a pas envoyé de vidéo. Vérifiez qu’elle est allumée et en ligne, puis réessayez.",
+  "wizardEufySettings": "Réglages de la caméra dans l’app eufy",
+  "wizardMotionDetection": "Détection de mouvement",
+  "wizardNightVision": "Vision nocturne",
+  "wizardNotificationStyle": "Style de notification",
+  "wizardSettingSending": "Envoi à la caméra…",
+  "wizardSettingSent": "Envoyé. La caméra le confirme d’ici quelques minutes.",
+  "wizardSettingFailed": "La caméra n’a pas pris le changement. Réessayez.",
+  "wizardLivePlay": "Lancer la vidéo en direct",
+  "wizardLiveStop": "Arrêter la vidéo en direct",
+  "wizardHomeKitTitle": "Dans l’app Maison",
+  "wizardHomeKitHelp": "Ce que l’app Maison montre de cet appareil et comment il s’y comporte. Enregistré avec les réglages du plugin.",
+  "wizardEufyHelp": "Envoyé à la caméra elle-même, les mêmes réglages que dans l’app eufy.",
+  "wizardMapLabel": "Vos appareils",
+  "wizardMapBase": "HomeBase",
+  "wizardMapStandalone": "Autonomes"
 }

package/homebridge-ui/public/index.html

@@ -72,6 +72,9 @@
           <span class="diagnostics-name" data-i18n="menuDiagnostics"></span>
           <span class="diagnostics-capturing" data-i18n="diagnosticsCapturing"></span>
         </button>
+        <button type="button" class="dashboard-action" data-menu-wizard data-i18n-aria-label="menuWizard">
+          <img src="assets/icons/auto_fix_high.svg" alt="" />
+        </button>
         <button type="button" class="dashboard-action" data-menu-advanced data-i18n-aria-label="menuAdvanced">
           <img src="assets/icons/settings.svg" alt="" />
         </button>
@@ -190,6 +193,60 @@
       <p class="advanced-device-help" data-i18n="advancedDeviceHelp"></p>
       <p class="advanced-status" role="status" aria-live="polite" data-advanced-status></p>
     </section>
+
+    <section class="dashboard-panel wizard-panel" data-setup-wizard hidden aria-labelledby="wizard-title">
+      <div class="dashboard-panel-header">
+        <button type="button" class="dashboard-page-back" data-wizard-close data-i18n-aria-label="closeWizard">
+          <span aria-hidden="true">←</span>
+        </button>
+        <img class="dashboard-page-icon" src="assets/icons/auto_fix_high.svg" alt="" />
+        <div>
+          <p class="eyebrow" data-wizard-progress></p>
+          <h2 id="wizard-title" data-wizard-title></h2>
+          <p class="summary" data-wizard-eyebrow></p>
+        </div>
+      </div>
+      <p class="summary" data-wizard-restart hidden data-i18n="wizardRestartSummary"></p>
+      <nav class="wizard-map" data-wizard-map data-i18n-aria-label="wizardMapLabel"></nav>
+      <div class="wizard-stage" data-wizard-stage>
+        <button type="button" class="wizard-arrow" data-wizard-back data-i18n-aria-label="wizardBack">
+          <img src="assets/icons/keyboard_arrow_left.svg" alt="" />
+        </button>
+        <div class="wizard-live" data-wizard-live>
+          <img data-wizard-live-image alt="" hidden />
+          <button type="button" class="wizard-live-play" data-wizard-live-play data-i18n-aria-label="wizardLivePlay">
+            <img src="assets/icons/play_arrow.svg" alt="" />
+          </button>
+          <button
+            type="button"
+            class="wizard-live-play wizard-live-stop"
+            data-wizard-live-stop
+            hidden
+            data-i18n-aria-label="wizardLiveStop"
+          >
+            <img src="assets/icons/stop.svg" alt="" />
+          </button>
+          <span class="wizard-live-spinner" data-wizard-live-spinner hidden aria-hidden="true"></span>
+          <p class="wizard-live-status" role="status" aria-live="polite" data-wizard-live-status></p>
+        </div>
+        <button type="button" class="wizard-arrow" data-wizard-next data-i18n-aria-label="wizardNext">
+          <img src="assets/icons/keyboard_arrow_right.svg" alt="" />
+        </button>
+      </div>
+      <section class="wizard-card" data-wizard-homekit aria-labelledby="wizard-homekit-title">
+        <h3 id="wizard-homekit-title" data-i18n="wizardHomeKitTitle"></h3>
+        <p class="preference-note" data-i18n="wizardHomeKitHelp"></p>
+        <div class="preference-grid" data-wizard-controls></div>
+      </section>
+      <section class="wizard-card" data-wizard-eufy hidden aria-labelledby="wizard-eufy-title">
+        <h3 id="wizard-eufy-title" data-i18n="wizardEufySettings"></h3>
+        <p class="preference-note" data-i18n="wizardEufyHelp"></p>
+        <div class="preference-grid" data-wizard-settings></div>
+      </section>
+      <div class="wizard-nav">
+        <button type="button" data-wizard-finish></button>
+      </div>
+    </section>
   </section>
 
   <section class="dashboard-panel diagnostics-panel" data-diagnostics hidden aria-labelledby="diagnostics-title">
@@ -383,4 +440,5 @@
 <script src="js/dashboard.js"></script>
 <script src="js/legacy-settings.js"></script>
 <script src="js/profile-wizard.js"></script>
+<script src="js/setup-wizard.js"></script>
 <script src="js/app.js"></script>

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

@@ -86,6 +86,28 @@ const warmUpAddAll = document.querySelector('[data-warm-up-add-all]');
 const warmUpRemove = document.querySelector('[data-warm-up-remove]');
 const warmUpRemoveAll = document.querySelector('[data-warm-up-remove-all]');
 const advancedStatus = document.querySelector('[data-advanced-status]');
+const menuWizard = document.querySelector('[data-menu-wizard]');
+const wizardPanel = document.querySelector('[data-setup-wizard]');
+const wizardClose = document.querySelector('[data-wizard-close]');
+const wizardProgress = document.querySelector('[data-wizard-progress]');
+const wizardTitle = document.querySelector('[data-wizard-title]');
+const wizardEyebrow = document.querySelector('[data-wizard-eyebrow]');
+const wizardRestart = document.querySelector('[data-wizard-restart]');
+const wizardLive = document.querySelector('[data-wizard-live]');
+const wizardLiveImage = document.querySelector('[data-wizard-live-image]');
+const wizardLiveStatus = document.querySelector('[data-wizard-live-status]');
+const wizardLivePlay = document.querySelector('[data-wizard-live-play]');
+const wizardLiveStop = document.querySelector('[data-wizard-live-stop]');
+const wizardLiveSpinner = document.querySelector('[data-wizard-live-spinner]');
+const wizardSettings = document.querySelector('[data-wizard-settings]');
+const wizardControls = document.querySelector('[data-wizard-controls]');
+const wizardBack = document.querySelector('[data-wizard-back]');
+const wizardNext = document.querySelector('[data-wizard-next]');
+const wizardFinish = document.querySelector('[data-wizard-finish]');
+const wizardMap = document.querySelector('[data-wizard-map]');
+const wizardStage = document.querySelector('[data-wizard-stage]');
+const wizardHomeKit = document.querySelector('[data-wizard-homekit]');
+const wizardEufy = document.querySelector('[data-wizard-eufy]');
 
 let messages = {};
 let pluginConfig = [];
@@ -109,6 +131,7 @@ let dashboardPanelTrigger;
 const dashboardView = window.HomebridgeEufyDashboard;
 const legacySettingsView = window.HomebridgeEufyLegacySettings;
 const diagnosticsWizard = window.HomebridgeEufyDiagnosticsWizard;
+const setupWizard = window.HomebridgeEufySetupWizard;
 const dashboardElements = {
   dashboard,
   title: dashboardTitle,
@@ -118,6 +141,7 @@ const dashboardElements = {
   deviceSettingsTitle,
   deviceSettingsEyebrow,
   deviceSettingsControls,
+  preferenceContainers: [deviceSettingsControls, wizardControls],
   updatePending,
   updatePendingSummary,
   updatePendingVersion,
@@ -512,7 +536,7 @@ function openDashboardPanel(panel, trigger) {
   dashboardState.hidden = insideDashboard;
   dashboardSummary.hidden = insideDashboard;
   deviceGroups.hidden = insideDashboard;
-  for (const other of [diagnosticsPanel, advancedPanel, devicePanel]) {
+  for (const other of [diagnosticsPanel, advancedPanel, devicePanel, wizardPanel]) {
     other.hidden = other !== panel;
   }
   panel.scrollIntoView?.({ behavior: 'smooth', block: 'start' });
@@ -524,6 +548,8 @@ function closeDashboardPanel() {
   diagnosticsPanel.hidden = true;
   advancedPanel.hidden = true;
   devicePanel.hidden = true;
+  wizardPanel.hidden = true;
+  stopWizardLive();
   dashboardState.hidden = false;
   dashboardSummary.hidden = false;
   deviceGroups.hidden = false;
@@ -810,9 +836,288 @@ dashboardView.bindPreferences(dashboardElements, configuredBlock, updateConfig,
   openDashboardPanel(devicePanel, trigger);
 });
 
+/*
+ * The setup wizard walks every device once a sign-in has a running plugin to show it: each camera live, the eufy
+ * settings the plugin can change, and the HomeKit choices. A sign-in always leaves Homebridge to restart, so it
+ * marks the wizard pending in this browser and the next page opened on a ready plugin starts it.
+ */
+let dashboardPluginState;
+let wizardSteps = [];
+let wizardIndex = 0;
+let wizardLiveSerial;
+let wizardLivePictures = 0;
+const wizardElements = {
+  deviceSettingsTitle: wizardTitle,
+  deviceSettingsEyebrow: wizardEyebrow,
+  deviceSettingsControls: wizardControls,
+};
+/** The eufy settings the wizard offers, each with the label its control is named by. */
+const EUFY_SETTING_LABELS = {
+  motionDetection: 'wizardMotionDetection',
+  nightVision: 'wizardNightVision',
+  notificationStyle: 'wizardNotificationStyle',
+};
+
+/** Whether a plugin is running to stream and change settings: a degraded one still holds its devices. */
+function wizardPluginUp() {
+  return dashboardPluginState === 'ready' || dashboardPluginState === 'degraded';
+}
+
+function wizardPending(pending) {
+  try {
+    if (pending === undefined) return localStorage.getItem(setupWizard.PENDING_KEY) === 'pending';
+    if (pending) localStorage.setItem(setupWizard.PENDING_KEY, 'pending');
+    else localStorage.removeItem(setupWizard.PENDING_KEY);
+  } catch {
+    return false;
+  }
+  return pending;
+}
+
+async function openSetupWizard(trigger) {
+  wizardSteps = setupWizard.steps(dashboardDevices);
+  wizardIndex = 0;
+  openDashboardPanel(wizardPanel, trigger);
+  await renderWizardStep();
+}
+
+function stopWizardLive() {
+  if (!wizardLiveSerial) return;
+  wizardLiveSerial = undefined;
+  wizardLivePictures = 0;
+  wizardLivePlay.hidden = false;
+  wizardLiveStop.hidden = true;
+  wizardLiveSpinner.hidden = true;
+  wizardLiveStatus.textContent = '';
+  void requestWithinDeadline('/device/live/stop', {}, 12000).catch(() => undefined);
+}
+
+/**
+ * Shows a camera's box with its last picture behind the play button, so the step costs nothing until asked.
+ * A camera with no picture yet shows the empty box.
+ */
+async function showWizardCamera(serial) {
+  wizardLive.hidden = false;
+  wizardLiveImage.hidden = true;
+  wizardLivePlay.hidden = false;
+  wizardLiveStatus.textContent = '';
+  let answer;
+  try {
+    answer = await requestWithinDeadline('/device/image', { serial }, 12000);
+  } catch {
+    answer = undefined;
+  }
+  if (!answer?.image || wizardSteps[wizardIndex]?.serial !== serial || wizardLiveSerial) return;
+  wizardLiveImage.src = `data:image/jpeg;base64,${answer.image}`;
+  wizardLiveImage.hidden = false;
+}
+
+function startWizardLive(serial) {
+  stopWizardLive();
+  wizardLiveSerial = serial;
+  wizardLivePlay.hidden = true;
+  wizardLiveSpinner.hidden = false;
+  wizardLiveStatus.textContent = messages.wizardLiveStarting ?? '';
+  void requestWithinDeadline('/device/live/start', { serial }, 12000).catch(() => endWizardLive(serial));
+}
+
+function endWizardLive(serial) {
+  if (serial !== wizardLiveSerial) return;
+  const watched = wizardLivePictures > 0;
+  wizardLiveSerial = undefined;
+  wizardLivePictures = 0;
+  wizardLiveStatus.textContent = watched ? '' : (messages.wizardLiveFailed ?? '');
+  wizardLivePlay.hidden = false;
+  wizardLiveStop.hidden = true;
+  wizardLiveSpinner.hidden = true;
+}
+
+homebridge.addEventListener('device-live', (event) => {
+  if (!event.data || event.data.serial !== wizardLiveSerial) return;
+  wizardLivePictures += 1;
+  // The stop is offered once there is video to stop; until then the spinner says it is on its way.
+  wizardLiveSpinner.hidden = true;
+  wizardLiveStop.hidden = false;
+  wizardLiveImage.src = `data:image/jpeg;base64,${event.data.image}`;
+  wizardLiveImage.hidden = false;
+  wizardLiveStatus.textContent = '';
+});
+homebridge.addEventListener('device-live-end', (event) => endWizardLive(event.data?.serial));
+
+/** One control per eufy setting the device states and can change, named and valued the way the camera describes it. */
+function eufySettingControl(setting) {
+  const label = messages[EUFY_SETTING_LABELS[setting.setting]] ?? setting.setting;
+  const wrapper = document.createElement('label');
+  wrapper.className = typeof setting.value === 'boolean' ? 'toggle' : 'wizard-setting';
+  wrapper.dataset.setting = '';
+  const name = document.createElement('span');
+  name.className = 'setting-label';
+  name.textContent = label;
+  let control;
+  if (typeof setting.value === 'boolean') {
+    control = document.createElement('input');
+    control.type = 'checkbox';
+    control.checked = setting.value;
+    wrapper.append(control, name);
+  } else {
+    control = document.createElement('select');
+    for (const [value, text] of Object.entries(setting.labels ?? { [setting.value]: String(setting.value) })) {
+      const option = document.createElement('option');
+      option.value = value;
+      option.textContent = text;
+      option.selected = Number(value) === setting.value;
+      control.append(option);
+    }
+    wrapper.append(name, control);
+  }
+  control.dataset.eufySetting = setting.setting;
+  return wrapper;
+}
+
+async function renderWizardSettings(serial) {
+  let answer;
+  try {
+    answer = await requestWithinDeadline('/device/settings', { serial }, 12000);
+  } catch {
+    answer = undefined;
+  }
+  if (wizardSteps[wizardIndex]?.serial !== serial) return;
+  const writable = (answer?.settings ?? []).filter((setting) => setting.writable);
+  if (writable.length === 0) return;
+  const status = document.createElement('p');
+  status.className = 'preference-note';
+  status.setAttribute('role', 'status');
+  status.dataset.wizardSettingsStatus = '';
+  wizardSettings.replaceChildren(...writable.map(eufySettingControl), status);
+  wizardEufy.hidden = false;
+}
+
+/** One device on the map: a button that opens its step, marked as the current one where it is. */
+function wizardMapEntry(device, current) {
+  const entry = document.createElement('button');
+  entry.type = 'button';
+  entry.className = 'wizard-map-device';
+  entry.textContent = device.name;
+  entry.dataset.serial = device.serial;
+  if (device.serial === current) entry.setAttribute('aria-current', 'step');
+  return entry;
+}
+
+/**
+ * Draws the household: each HomeBase with the devices that hang off it, then the cameras that stand alone. A base
+ * is a step too where it has HomeKit choices, so its name opens it like any other device.
+ */
+function renderWizardMap(current) {
+  const { bases, standalone } = setupWizard.topology(wizardSteps, dashboardDevices);
+  const group = (title, members, base) => {
+    const section = document.createElement('div');
+    section.className = 'wizard-map-group';
+    const heading = base && wizardSteps.includes(base) ? wizardMapEntry(base, current) : document.createElement('p');
+    heading.classList?.add('wizard-map-base');
+    heading.textContent = title;
+    const list = document.createElement('div');
+    list.className = 'wizard-map-members';
+    list.append(...members.map((device) => wizardMapEntry(device, current)));
+    section.append(heading, list);
+    return section;
+  };
+  wizardMap.replaceChildren(
+    ...bases.map(({ base, members }) => group(base?.name ?? messages.wizardMapBase ?? '', members, base)),
+    ...(standalone.length > 0 ? [group(messages.wizardMapStandalone ?? '', standalone)] : []),
+  );
+}
+
+wizardSettings.addEventListener('change', async (event) => {
+  const control = event.target;
+  const setting = control?.dataset?.eufySetting;
+  const device = wizardSteps[wizardIndex];
+  if (!setting || !device) return;
+  const value = control.type === 'checkbox' ? control.checked : Number(control.value);
+  const status = wizardSettings.querySelector('[data-wizard-settings-status]');
+  control.disabled = true;
+  status.textContent = messages.wizardSettingSending ?? '';
+  try {
+    const answer = await requestWithinDeadline('/device/settings/write', { serial: device.serial, setting, value }, 30000);
+    // A write that reached the camera is not yet a camera that changed, so the step says sent rather than done.
+    status.textContent = answer?.ok ? (messages.wizardSettingSent ?? '') : (messages.wizardSettingFailed ?? '');
+  } catch {
+    status.textContent = messages.wizardSettingFailed ?? '';
+  } finally {
+    control.disabled = false;
+  }
+});
+
+/** A device that is not a camera shows its product picture in the box, with nothing to play. */
+function showWizardArtwork(device) {
+  wizardLivePlay.hidden = true;
+  wizardLiveStop.hidden = true;
+  wizardLiveStatus.textContent = '';
+  wizardLiveImage.hidden = !device.artwork;
+  if (device.artwork) wizardLiveImage.src = device.artwork;
+}
+
+async function renderWizardStep() {
+  stopWizardLive();
+  wizardSettings.replaceChildren();
+  wizardControls.replaceChildren();
+  wizardEufy.hidden = true;
+  const restart = !wizardPluginUp();
+  const empty = restart || wizardSteps.length === 0;
+  wizardRestart.hidden = !restart;
+  wizardMap.hidden = empty;
+  wizardStage.hidden = empty;
+  wizardHomeKit.hidden = empty;
+  wizardFinish.textContent = restart ? (messages.wizardClose ?? '') : (messages.wizardFinish ?? '');
+  if (empty) {
+    wizardProgress.textContent = '';
+    wizardTitle.textContent = messages.wizardTitle ?? '';
+    wizardEyebrow.textContent = '';
+    return;
+  }
+  const device = wizardSteps[wizardIndex];
+  renderWizardMap(device.serial);
+  dashboardView.renderDeviceSettings(device, configuredBlock() ?? {}, messages, wizardElements);
+  wizardHomeKit.hidden = !(device.preferences?.length > 0);
+  wizardProgress.textContent = setupWizard.progress(messages.wizardProgress, wizardIndex, wizardSteps.length);
+  wizardBack.disabled = wizardIndex === 0;
+  wizardNext.disabled = wizardIndex === wizardSteps.length - 1;
+  if (device.deviceClass === 'camera') void showWizardCamera(device.serial);
+  else showWizardArtwork(device);
+  await renderWizardSettings(device.serial);
+}
+
+function goToWizardStep(index) {
+  if (index < 0 || index >= wizardSteps.length || index === wizardIndex) return;
+  wizardIndex = index;
+  void renderWizardStep();
+}
+
+menuWizard.addEventListener('click', () => openSetupWizard(menuWizard));
+wizardClose.addEventListener('click', () => closeDashboardPanel());
+wizardLiveStop.addEventListener('click', () => stopWizardLive());
+wizardLivePlay.addEventListener('click', () => {
+  const device = wizardSteps[wizardIndex];
+  if (device) startWizardLive(device.serial);
+});
+wizardBack.addEventListener('click', () => goToWizardStep(wizardIndex - 1));
+wizardNext.addEventListener('click', () => goToWizardStep(wizardIndex + 1));
+wizardMap.addEventListener('click', (event) => {
+  const serial = event.target?.closest?.('[data-serial]')?.dataset?.serial;
+  goToWizardStep(wizardSteps.findIndex((device) => device.serial === serial));
+});
+// Closing a wizard that waits for a restart keeps it due; finishing one that walked the devices does not.
+wizardFinish.addEventListener('click', () => {
+  if (wizardPluginUp()) wizardPending(false);
+  closeDashboardPanel();
+});
+window.addEventListener?.('pagehide', () => stopWizardLive());
+
 function openAuthentication() {
   diagnosticsPanel.hidden = true;
   advancedPanel.hidden = true;
+  devicePanel.hidden = true;
+  wizardPanel.hidden = true;
+  stopWizardLive();
   dashboard.hidden = true;
   setupContent.hidden = false;
   masthead.hidden = false;
@@ -881,6 +1186,7 @@ async function showDashboard() {
     warmUpCandidates = Array.isArray(snapshot.warmUpCandidates) ? snapshot.warmUpCandidates : [];
     // Kept beside the render that drew them, so opening a tile finds the device that tile stands for.
     dashboardDevices = snapshot.devices ?? [];
+    dashboardPluginState = snapshot.state;
     dashboardAttention = dashboardView.render(snapshot, configuredBlock() ?? {}, messages, dashboardElements);
     if (snapshot.state === 'authentication-required' && snapshot.devices?.length > 0 && !reauthDialog.open) {
       reauthDialog.showModal?.();
@@ -936,8 +1242,11 @@ async function handleResult(result) {
     authForm.hidden = true;
     authStatus.textContent = messages.authSuccess ?? '';
     // The devices this sign-in discovered are already recorded, so the flow ends on them rather than on a notice.
-    if (await saveAuthenticatedConfig()) await showDashboard();
-    else authStatus.textContent = messages.authSaveFailed ?? '';
+    if (await saveAuthenticatedConfig()) {
+      await showDashboard();
+      wizardPending(true);
+      await openSetupWizard();
+    } else authStatus.textContent = messages.authSaveFailed ?? '';
   } else {
     authForm.hidden = false;
     authStatus.textContent = messages[AUTH_OUTCOMES[result.status] ?? 'authFailed'] ?? '';
@@ -1056,5 +1365,6 @@ homebridge.addEventListener('ready', async () => {
   trustedDeviceInput.value = configured?.trustedDeviceName ?? 'Homebridge Eufy';
   if (configured) {
     await showDashboard();
+    if (wizardPending() && wizardPluginUp()) await openSetupWizard();
   }
 });

package/homebridge-ui/public/js/dashboard.js

@@ -346,7 +346,7 @@
       },
       true,
     );
-    (elements.deviceSettingsControls ?? elements.groups).addEventListener('change', async (event) => {
+    const onPreferenceChange = async (event) => {
       const control = event.target;
       const serial = control?.dataset?.serial;
       const key = control?.dataset?.preference;
@@ -395,7 +395,10 @@
       } catch {
         elements.summary.textContent = getMessages().preferenceSaveFailed;
       }
-    });
+    };
+    for (const container of elements.preferenceContainers ?? [elements.deviceSettingsControls ?? elements.groups]) {
+      container.addEventListener('change', onPreferenceChange);
+    }
   }
 
   /**

package/homebridge-ui/public/js/setup-wizard.js

@@ -0,0 +1,52 @@
+(function (root) {
+  'use strict';
+
+  /** The browser key marking a sign-in whose devices have not been walked through yet. */
+  const PENDING_KEY = 'homebridge-eufy.setup-wizard-pending';
+
+  /**
+   * The devices the wizard walks through, in the map's order so the arrows follow it: each HomeBase then what hangs
+   * off it, then the devices that stand alone. Every camera is one, and every other device with a HomeKit choice to
+   * make; a device the plugin only diagnoses has nothing to set.
+   */
+  function steps(devices) {
+    const walkable = (devices ?? []).filter(
+      (device) => !device.diagnosticOnly && (device.deviceClass === 'camera' || device.preferences?.length > 0),
+    );
+    const { bases, standalone } = topology(walkable, devices);
+    return [
+      ...bases.flatMap(({ base, members }) => [...(base && walkable.includes(base) ? [base] : []), ...members]),
+      ...standalone,
+    ];
+  }
+
+  /** The progress line for one step, from a template naming `{current}` and `{total}`. */
+  function progress(template, index, total) {
+    return (template ?? '').replace('{current}', String(index + 1)).replace('{total}', String(total));
+  }
+
+  /**
+   * The household as the map draws it: each HomeBase with the devices that hang off it, then the devices that are
+   * their own station. A base is named by its own entry where the dashboard lists one; a device whose base it does
+   * not list stays with that base all the same, under no name.
+   */
+  function topology(steps, devices) {
+    const bases = new Map();
+    const standalone = [];
+    for (const device of devices ?? []) {
+      if (device.deviceClass === 'homebase') bases.set(device.serial, { base: device, members: [] });
+    }
+    for (const device of steps) {
+      if (device.deviceClass === 'homebase') continue;
+      if (!device.station) {
+        standalone.push(device);
+        continue;
+      }
+      if (!bases.has(device.station)) bases.set(device.station, { base: undefined, members: [] });
+      bases.get(device.station).members.push(device);
+    }
+    return { bases: [...bases.values()], standalone };
+  }
+
+  root.HomebridgeEufySetupWizard = { PENDING_KEY, steps, progress, topology };
+})(window);

package/package.json

@@ -1,7 +1,7 @@
 {
   "displayName": "Homebridge Eufy",
   "name": "@homebridge-plugins/homebridge-eufy-security",
-  "version": "5.0.0-beta.31",
+  "version": "5.0.0-beta.33",
   "description": "Control Eufy Security from homebridge.",
   "type": "module",
   "license": "Apache-2.0",
@@ -47,7 +47,7 @@
   ],
   "dependencies": {
     "@homebridge/plugin-ui-utils": "^2.2.6",
-    "@mega-yfue/eufy-sdk": "0.5.0-beta.25",
+    "@mega-yfue/eufy-sdk": "0.5.0-beta.58",
     "ffmpeg-for-homebridge": "2.2.2"
   },
   "devDependencies": {