@homebridge-plugins/homebridge-eufy-security 5.0.0-beta.1 → 5.0.0-beta.11

package/homebridge-ui/public/index.html

@@ -188,44 +188,34 @@
     <div class="diagnostics-stage">
       <div class="diagnostics-wizard diagnostics-surface" data-diagnostics-wizard aria-live="polite">
         <div class="diagnostics-question" data-diagnostics-question>
-          <strong id="diagnostics-question-heading" tabindex="-1" data-diagnostics-question-text></strong>
-          <div class="diagnostics-choice-actions" role="group" aria-labelledby="diagnostics-question-heading">
-            <button
-              type="button"
-              class="diagnostics-secondary-action"
-              data-diagnostics-answer="no"
-              data-i18n="diagnosticsNo"
-            ></button>
-            <button type="button" data-diagnostics-answer="yes" data-i18n="diagnosticsYes"></button>
+          <strong
+            id="diagnostics-question-heading"
+            tabindex="-1"
+            data-diagnostics-question-text
+            data-i18n="diagnosticsTilesHeading"
+          ></strong>
+          <div class="diagnostics-tiles" role="group" aria-labelledby="diagnostics-question-heading">
+            <button type="button" data-diagnostics-tile="startup-authentication" data-i18n="diagnosticsProfileStartup"></button>
+            <button type="button" data-diagnostics-tile="device-representation" data-i18n="diagnosticsProfileDevices"></button>
+            <button type="button" data-diagnostics-tile="control-state" data-i18n="diagnosticsProfileControl"></button>
+            <button type="button" data-diagnostics-tile="live-media" data-i18n="diagnosticsProfileLiveMedia"></button>
+            <button type="button" data-diagnostics-tile="hksv-recording" data-i18n="diagnosticsProfileRecording"></button>
+            <button type="button" data-diagnostics-tile="dashboard-ui" data-i18n="diagnosticsProfileDashboard"></button>
+            <button type="button" data-diagnostics-tile="other" data-i18n="diagnosticsProfileOther"></button>
           </div>
-          <button
-            type="button"
-            class="diagnostics-quiet-action"
-            data-diagnostics-direct
-            data-i18n="diagnosticsChooseDirectly"
-          ></button>
         </div>
-        <div class="diagnostics-direct" data-diagnostics-direct-panel hidden>
-          <label>
-            <span data-i18n="diagnosticsProfileLabel"></span>
-            <select data-diagnostics-profile>
-              <option value="startup-authentication" data-i18n="diagnosticsProfileStartup"></option>
-              <option value="device-representation" data-i18n="diagnosticsProfileDevices"></option>
-              <option value="control-state" data-i18n="diagnosticsProfileControl"></option>
-              <option value="live-media" data-i18n="diagnosticsProfileLiveMedia"></option>
-              <option value="hksv-recording" data-i18n="diagnosticsProfileRecording"></option>
-              <option value="dashboard-ui" data-i18n="diagnosticsProfileDashboard"></option>
-              <option value="other" data-i18n="diagnosticsProfileOther"></option>
-            </select>
-          </label>
+        <div class="diagnostics-devices" data-diagnostics-devices hidden>
+          <strong id="diagnostics-devices-heading" tabindex="-1" data-i18n="diagnosticsDevicesHeading"></strong>
+          <p data-i18n="diagnosticsDevicesHint"></p>
+          <div class="diagnostics-device-list" data-diagnostics-device-list role="group" aria-labelledby="diagnostics-devices-heading"></div>
           <div class="diagnostics-choice-actions">
             <button
               type="button"
               class="diagnostics-secondary-action"
-              data-diagnostics-direct-back
-              data-i18n="diagnosticsBackToQuestions"
+              data-diagnostics-devices-every
+              data-i18n="diagnosticsDevicesEvery"
             ></button>
-            <button type="button" data-diagnostics-direct-choose data-i18n="diagnosticsUseProfile"></button>
+            <button type="button" data-diagnostics-devices-chosen disabled data-i18n="diagnosticsDevicesChosen"></button>
           </div>
         </div>
         <div class="diagnostics-frequency" data-diagnostics-frequency hidden>
@@ -288,20 +278,22 @@
       <div class="diagnostics-result diagnostics-surface" data-diagnostics-result hidden>
         <strong tabindex="-1" data-diagnostics-result-heading data-i18n="diagnosticsEvidenceReady"></strong>
         <p data-i18n="diagnosticsArchiveReviewIntro"></p>
-        <button type="button" data-diagnostics-review data-i18n="diagnosticsArchiveReview"></button>
         <div class="diagnostics-manifest" data-diagnostics-manifest hidden></div>
         <label class="diagnostics-review-confirm" data-diagnostics-review-confirm-label hidden>
           <input type="checkbox" data-diagnostics-review-confirm />
           <span data-i18n="diagnosticsArchiveReviewConfirm"></span>
         </label>
+        <p class="diagnostics-local-note" data-i18n="diagnosticsStaysLocal"></p>
         <button type="button" data-diagnostics-export disabled hidden data-i18n="diagnosticsArchiveExport"></button>
         <a
           data-diagnostics-issue
           hidden
           target="_blank"
           rel="noopener noreferrer"
+          aria-describedby="diagnostics-issue-hint"
           data-i18n="diagnosticsOpenIssue"
         ></a>
+        <p class="diagnostics-step-hint" id="diagnostics-issue-hint" data-diagnostics-issue-hint></p>
         <button
           type="button"
           class="diagnostics-secondary-action"

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

@@ -39,12 +39,11 @@ const diagnosticsClose = document.querySelector('[data-diagnostics-close]');
 const diagnosticsWizardPanel = document.querySelector('[data-diagnostics-wizard]');
 const diagnosticsQuestion = document.querySelector('[data-diagnostics-question]');
 const diagnosticsQuestionText = document.querySelector('[data-diagnostics-question-text]');
-const diagnosticsYes = document.querySelector('[data-diagnostics-answer="yes"]');
-const diagnosticsNo = document.querySelector('[data-diagnostics-answer="no"]');
-const diagnosticsDirect = document.querySelector('[data-diagnostics-direct]');
-const diagnosticsDirectPanel = document.querySelector('[data-diagnostics-direct-panel]');
-const diagnosticsDirectChoose = document.querySelector('[data-diagnostics-direct-choose]');
-const diagnosticsDirectBack = document.querySelector('[data-diagnostics-direct-back]');
+const diagnosticsTiles = [...document.querySelectorAll('[data-diagnostics-tile]')];
+const diagnosticsDevices = document.querySelector('[data-diagnostics-devices]');
+const diagnosticsDeviceList = document.querySelector('[data-diagnostics-device-list]');
+const diagnosticsDevicesEvery = document.querySelector('[data-diagnostics-devices-every]');
+const diagnosticsDevicesChosen = document.querySelector('[data-diagnostics-devices-chosen]');
 const diagnosticsFrequency = document.querySelector('[data-diagnostics-frequency]');
 const diagnosticsFrequencyHeading = document.querySelector('#diagnostics-frequency-heading');
 const diagnosticsFrequencyNow = document.querySelector('[data-diagnostics-frequency-answer="now"]');
@@ -52,11 +51,11 @@ const diagnosticsFrequencyIntermittent = document.querySelector('[data-diagnosti
 const diagnosticsFrequencyBack = document.querySelector('[data-diagnostics-frequency-back]');
 const diagnosticsMatch = document.querySelector('[data-diagnostics-match]');
 const diagnosticsReject = document.querySelector('[data-diagnostics-reject]');
-const diagnosticsProfile = document.querySelector('[data-diagnostics-profile]');
 const diagnosticsAuthorize = document.querySelector('[data-diagnostics-authorize]');
 const diagnosticsReproduction = document.querySelector('[data-diagnostics-reproduction]');
 const diagnosticsStatus = document.querySelector('[data-diagnostics-status]');
 const diagnosticsIssue = document.querySelector('[data-diagnostics-issue]');
+const diagnosticsIssueHint = document.querySelector('[data-diagnostics-issue-hint]');
 const diagnosticsResult = document.querySelector('[data-diagnostics-result]');
 const diagnosticsActions = document.querySelector('[data-diagnostics-actions]');
 const diagnosticsGuidanceTitle = document.querySelector('[data-diagnostics-guidance-title]');
@@ -66,7 +65,6 @@ const diagnosticsPhaseTitle = document.querySelector('[data-diagnostics-phase-ti
 const diagnosticsGuidanceBeforeSection = document.querySelector('[data-diagnostics-guidance-before-section]');
 const diagnosticsGuidanceBefore = document.querySelector('[data-diagnostics-guidance-before]');
 const diagnosticsGuidanceAction = document.querySelector('[data-diagnostics-guidance-action]');
-const diagnosticsReview = document.querySelector('[data-diagnostics-review]');
 const diagnosticsManifest = document.querySelector('[data-diagnostics-manifest]');
 const diagnosticsReviewConfirm = document.querySelector('[data-diagnostics-review-confirm]');
 const diagnosticsReviewConfirmLabel = document.querySelector('[data-diagnostics-review-confirm-label]');
@@ -100,6 +98,12 @@ let challenge = '';
 let legacyNames = [];
 let legacyAcknowledged = false;
 let diagnosticsState = { status: 'inactive', missingEvidence: [] };
+/** Whether the reporter already downloaded this session's archive, which is what the report offer follows. */
+let diagnosticsArchiveDownloaded = false;
+/** The session whose manifest is on screen, so it is fetched once rather than on every render. */
+let diagnosticsReviewedCaseId = '';
+/** Guards the one fetch, so a burst of renders does not assemble the manifest several times over. */
+let diagnosticsReviewPending = false;
 let diagnosticsReviewId = '';
 let diagnosticsStartingAnother = false;
 let panelReturn;
@@ -258,17 +262,82 @@ function renderDiagnosticsGuidance(profile) {
   diagnosticsGuidanceAction.textContent = messages[guidance.action] ?? '';
 }
 
+/**
+ * The devices the reporter may name, one tile each.
+ *
+ * A tile carries the device's own name above its retained image where it has one, and the icon the devices
+ * view uses for a device where it does not. The image is capped at half the tile: it is there to be recognised
+ * at a glance, and a picture that fills the tile leaves the name it belongs to competing with it.
+ *
+ * Only the devices the chosen area's fault could be about are offered, so the answer cannot name a device that
+ * never had the thing being reported.
+ *
+ * The list is asked for when it is empty rather than relying on the devices view having been opened first, and
+ * a request that goes unanswered leaves the step able to say every device, which is a complete answer.
+ */
+async function renderDiagnosticsDeviceList() {
+  if (dashboardDevices.length === 0) {
+    try {
+      const snapshot = await requestWithinDeadline('/dashboard', { representationPreferences: {} }, 12000);
+      dashboardDevices = snapshot.devices ?? [];
+    } catch {
+      dashboardDevices = [];
+    }
+  }
+  diagnosticsDeviceList.replaceChildren();
+  for (const device of diagnosticsWizard.affectable(diagnosticsWizardState.profile, dashboardDevices)) {
+    const tile = document.createElement('button');
+    tile.type = 'button';
+    tile.dataset.serial = device.serial;
+    tile.setAttribute('aria-pressed', 'false');
+    const art = document.createElement('img');
+    art.alt = '';
+    if (device.artwork) {
+      art.className = 'device-photo';
+      art.loading = 'lazy';
+      art.src = device.artwork;
+    } else {
+      art.src = 'assets/icons/inventory.svg';
+    }
+    const name = document.createElement('span');
+    name.textContent = device.name;
+    tile.append(art, name);
+    tile.addEventListener('click', () => {
+      tile.setAttribute('aria-pressed', tile.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');
+      renderDiagnosticsDeviceChoice();
+    });
+    diagnosticsDeviceList.append(tile);
+  }
+  renderDiagnosticsDeviceChoice();
+}
+
+/**
+ * The two controls that follow the pressed tiles: whether continuing is possible, and what the escape does.
+ *
+ * With every tile pressed there is nothing left for a select-all to select, so the same control clears instead —
+ * otherwise the only way back from a full grid is pressing each tile again.
+ */
+function renderDiagnosticsDeviceChoice() {
+  const tiles = diagnosticsDeviceList.querySelectorAll('[data-serial]').length;
+  const chosen = chosenDiagnosticsDevices().length;
+  diagnosticsDevicesChosen.disabled = chosen === 0;
+  diagnosticsDevicesEvery.textContent =
+    messages[chosen > 0 && chosen === tiles ? 'diagnosticsDevicesNone' : 'diagnosticsDevicesEvery'] ?? '';
+}
+
+/** The serials pressed in the device step, in the order the grid drew them. */
+function chosenDiagnosticsDevices() {
+  return [...diagnosticsDeviceList.querySelectorAll('[data-serial]')]
+    .filter((tile) => tile.getAttribute('aria-pressed') === 'true')
+    .map((tile) => tile.dataset.serial);
+}
+
 function renderDiagnosticsWizard() {
-  diagnosticsQuestion.hidden = diagnosticsWizardState.mode !== 'questions';
-  diagnosticsDirectPanel.hidden = diagnosticsWizardState.mode !== 'direct';
+  diagnosticsQuestion.hidden = diagnosticsWizardState.mode !== 'tiles';
+  diagnosticsDevices.hidden = diagnosticsWizardState.mode !== 'devices';
   diagnosticsFrequency.hidden = diagnosticsWizardState.mode !== 'frequency';
   diagnosticsMatch.hidden = diagnosticsWizardState.mode !== 'match';
-  if (diagnosticsWizardState.mode === 'questions') {
-    const question = diagnosticsWizard.questions[diagnosticsWizardState.questionIndex];
-    diagnosticsQuestionText.textContent = messages[question.message] ?? '';
-  }
   if (diagnosticsWizardState.mode === 'match') {
-    diagnosticsProfile.value = diagnosticsWizardState.profile;
     renderDiagnosticsGuidance(diagnosticsWizardState.profile);
     diagnosticsModeSummary.textContent =
       messages[
@@ -279,7 +348,21 @@ function renderDiagnosticsWizard() {
   }
 }
 
+/**
+ * The report step, reachable or not.
+ *
+ * Without an archive there is nothing to attach, so the anchor carries no `href` — it is not a link — and
+ * `aria-disabled` states the same thing to a reader who cannot see it greyed. The hint says why, because a
+ * control that cannot be used and does not explain itself reads as broken rather than as not yet.
+ */
+function setIssueStepReachable(url) {
+  diagnosticsIssue.href = url;
+  diagnosticsIssue.setAttribute('aria-disabled', url ? 'false' : 'true');
+  diagnosticsIssueHint.textContent = messages[url ? 'diagnosticsIssueOpensTab' : 'diagnosticsIssueNeedsArchive'] ?? '';
+}
+
 function renderDiagnostics(state) {
+  if (state.supportCaseId !== diagnosticsState.supportCaseId) diagnosticsArchiveDownloaded = false;
   diagnosticsState = state;
   const screen = diagnosticsWizard.screen(state, diagnosticsStartingAnother);
   const choosing = screen === 'choose';
@@ -307,17 +390,20 @@ function renderDiagnostics(state) {
       : state.status === 'reproducing'
         ? messages.diagnosticsNowFinish
         : messages.diagnosticsStartRecording;
-  diagnosticsIssue.hidden = !reviewing;
-  diagnosticsIssue.href = state.issueUrl ?? '';
+  diagnosticsIssue.hidden = true;
+  setIssueStepReachable(diagnosticsArchiveDownloaded ? (state.issueUrl ?? '') : '');
   diagnosticsResult.hidden = !reviewing;
-  diagnosticsReview.hidden = !reviewing;
-  diagnosticsManifest.hidden = true;
-  diagnosticsReviewConfirmLabel.hidden = true;
-  diagnosticsReviewConfirm.checked = false;
-  diagnosticsExport.hidden = true;
-  diagnosticsExport.disabled = true;
-  diagnosticsReviewId = '';
-  if (state.profile) diagnosticsProfile.value = state.profile;
+  const reviewed = reviewing && diagnosticsReviewedCaseId === (state.supportCaseId ?? '');
+  diagnosticsManifest.hidden = !reviewed;
+  diagnosticsReviewConfirmLabel.hidden = !reviewed;
+  diagnosticsExport.hidden = !reviewed;
+  diagnosticsIssue.hidden = !reviewed;
+  if (!reviewed) {
+    diagnosticsReviewConfirm.checked = false;
+    diagnosticsExport.disabled = true;
+    diagnosticsReviewId = '';
+    if (reviewing) void ensureArchiveReview(state.supportCaseId ?? '');
+  }
   if (screen === 'reproduce') {
     renderDiagnosticsGuidance(state.profile);
     if (reproductionMode === 'intermittent') {
@@ -349,6 +435,21 @@ function renderDiagnostics(state) {
   ).replace('{evidence}', state.missingEvidence?.join(', ') ?? '');
 }
 
+/**
+ * The catalogue entry that says, in a reader's words, what a never-collected class is.
+ *
+ * A class with no entry falls back to its own identifier, which is visible rather than absent, so a newly
+ * declared class shows up as something to translate instead of quietly disappearing from the list.
+ */
+const NEVER_COLLECTED_LABELS = {
+  'credentials-and-authentication': 'excludedCredentials',
+  'tokens-cookies-and-authorization': 'excludedTokens',
+  'session-and-push-stores': 'excludedSessions',
+  'private-and-symmetric-keys': 'excludedKeys',
+  'unconstrained-internal-objects': 'excludedInternalData',
+  'camera-images-talkback-and-raw-media': 'excludedMedia',
+};
+
 function renderArchiveManifest(manifest) {
   diagnosticsManifest.replaceChildren();
   const summary = document.createElement('p');
@@ -366,9 +467,16 @@ function renderArchiveManifest(manifest) {
     row.textContent = `${item.evidence} · ${item.privacyClass} · ${item.status}${missing}${size}${truncated}${fields ? ` · ${messages.diagnosticsArchiveFields ?? ''} ${fields}` : ''}`;
     evidence.append(row);
   }
+  const detail = document.createElement('details');
+  const detailLabel = document.createElement('summary');
+  detailLabel.textContent = messages.diagnosticsArchiveDetail ?? '';
+  detail.append(detailLabel, summary, evidence);
   const exclusions = document.createElement('p');
-  exclusions.textContent = `${messages.diagnosticsArchiveExcluded ?? ''} ${(manifest.excludedClasses ?? []).join(', ')}`;
-  diagnosticsManifest.append(summary, evidence, exclusions);
+  const neverCollected = (manifest.excludedClasses ?? []).map(
+    (excluded) => messages[NEVER_COLLECTED_LABELS[excluded]] ?? excluded,
+  );
+  exclusions.textContent = `${messages.diagnosticsArchiveExcluded ?? ''} ${neverCollected.join(', ')}.`;
+  diagnosticsManifest.append(detail, exclusions);
   const uncovered = (manifest.evidence ?? []).filter((item) => item.coversReproduction === false);
   if (uncovered.length > 0) {
     const gap = document.createElement('p');
@@ -385,25 +493,32 @@ function renderArchiveManifest(manifest) {
   diagnosticsManifest.hidden = false;
 }
 
-diagnosticsReview.addEventListener('click', async () => {
-  diagnosticsReview.disabled = true;
+/**
+ * The manifest for the session on screen, fetched once.
+ *
+ * A completed reproduction that the reporter is looking at is a file they came for, so the manifest is
+ * read without being asked for. It is read once per session rather than per render, because assembling it
+ * reads every collected log. Exporting spends it, so the session is forgotten again and a second download
+ * asks for a fresh one.
+ */
+async function ensureArchiveReview(caseId) {
+  if (!caseId || diagnosticsReviewedCaseId === caseId || diagnosticsReviewPending) return;
+  diagnosticsReviewPending = true;
   try {
     const review = await requestWithinDeadline('/diagnostics/archive/review', undefined, 12000);
     diagnosticsReviewId = review.reviewId;
+    diagnosticsReviewedCaseId = caseId;
     renderArchiveManifest(review.manifest);
     diagnosticsReviewConfirmLabel.hidden = false;
     diagnosticsExport.hidden = false;
+    diagnosticsExport.disabled = !diagnosticsReviewConfirm.checked;
+    diagnosticsIssue.hidden = false;
   } catch {
-    try {
-      renderDiagnostics(await requestWithinDeadline('/diagnostics/status', undefined, 12000));
-      diagnosticsStatus.textContent = messages.diagnosticsFailed ?? '';
-    } catch {
-      diagnosticsStatus.textContent = messages.diagnosticsFailed ?? '';
-    }
+    diagnosticsStatus.textContent = messages.diagnosticsFailed ?? '';
   } finally {
-    diagnosticsReview.disabled = false;
+    diagnosticsReviewPending = false;
   }
-});
+}
 
 diagnosticsReviewConfirm.addEventListener('change', () => {
   diagnosticsExport.disabled = !diagnosticsReviewConfirm.checked || !diagnosticsReviewId;
@@ -425,7 +540,10 @@ diagnosticsExport.addEventListener('click', async () => {
     download.click();
     document.body.removeChild(download);
     diagnosticsReviewId = '';
+    diagnosticsReviewedCaseId = '';
     diagnosticsReviewConfirm.checked = false;
+    diagnosticsArchiveDownloaded = true;
+    setIssueStepReachable(diagnosticsState.issueUrl ?? '');
   } catch {
     diagnosticsStatus.textContent = messages.diagnosticsFailed ?? '';
   }
@@ -441,6 +559,7 @@ diagnosticsAuthorize.addEventListener('click', async () => {
       {
         profile: diagnosticsWizardState.profile,
         reproductionMode: diagnosticsWizardState.reproductionMode,
+        ...(diagnosticsWizardState.devices === undefined ? {} : { affectedDevices: diagnosticsWizardState.devices }),
       },
       12000,
     );
@@ -465,37 +584,34 @@ diagnosticsAuthorize.addEventListener('click', async () => {
   }
 });
 
-diagnosticsYes.addEventListener('click', () => {
-  diagnosticsWizardState = diagnosticsWizard.answer(diagnosticsWizardState, true);
-  renderDiagnosticsWizard();
-  diagnosticsFrequencyHeading.focus?.();
-});
-
-diagnosticsNo.addEventListener('click', () => {
-  diagnosticsWizardState = diagnosticsWizard.answer(diagnosticsWizardState, false);
-  renderDiagnosticsWizard();
-  if (diagnosticsWizardState.mode === 'frequency') diagnosticsFrequencyHeading.focus?.();
-  else diagnosticsQuestionText.focus?.();
-});
+for (const tile of diagnosticsTiles) {
+  tile.addEventListener('click', async () => {
+    diagnosticsWizardState = diagnosticsWizard.select(diagnosticsWizardState, tile.dataset.diagnosticsTile);
+    renderDiagnosticsWizard();
+    if (diagnosticsWizardState.mode === 'devices') await renderDiagnosticsDeviceList();
+    else diagnosticsFrequencyHeading.focus?.();
+  });
+}
 
-diagnosticsDirect.addEventListener('click', () => {
-  diagnosticsWizardState = diagnosticsWizard.direct();
-  renderDiagnosticsWizard();
-  diagnosticsProfile.focus?.();
+diagnosticsDevicesEvery.addEventListener('click', () => {
+  const tiles = [...diagnosticsDeviceList.querySelectorAll('[data-serial]')];
+  if (tiles.length === 0) {
+    diagnosticsWizardState = diagnosticsWizard.chooseDevices(diagnosticsWizardState, 'all');
+    renderDiagnosticsWizard();
+    diagnosticsFrequencyHeading.focus?.();
+    return;
+  }
+  const clearing = chosenDiagnosticsDevices().length === tiles.length;
+  for (const tile of tiles) tile.setAttribute('aria-pressed', clearing ? 'false' : 'true');
+  renderDiagnosticsDeviceChoice();
 });
 
-diagnosticsDirectChoose.addEventListener('click', () => {
-  diagnosticsWizardState = diagnosticsWizard.selectDirect(diagnosticsWizardState, diagnosticsProfile.value);
+diagnosticsDevicesChosen.addEventListener('click', () => {
+  diagnosticsWizardState = diagnosticsWizard.chooseDevices(diagnosticsWizardState, chosenDiagnosticsDevices());
   renderDiagnosticsWizard();
   diagnosticsFrequencyHeading.focus?.();
 });
 
-diagnosticsDirectBack.addEventListener('click', () => {
-  diagnosticsWizardState = diagnosticsWizard.start();
-  renderDiagnosticsWizard();
-  diagnosticsQuestionText.focus?.();
-});
-
 function chooseDiagnosticsReproductionMode(reproductionMode) {
   diagnosticsWizardState = diagnosticsWizard.chooseReproductionMode(diagnosticsWizardState, reproductionMode);
   renderDiagnosticsWizard();
@@ -508,15 +624,13 @@ diagnosticsFrequencyIntermittent.addEventListener('click', () => chooseDiagnosti
 diagnosticsFrequencyBack.addEventListener('click', () => {
   diagnosticsWizardState = diagnosticsWizard.backFromFrequency(diagnosticsWizardState);
   renderDiagnosticsWizard();
-  if (diagnosticsWizardState.mode === 'direct') diagnosticsProfile.focus?.();
-  else diagnosticsQuestionText.focus?.();
+  diagnosticsQuestionText.focus?.();
 });
 
 diagnosticsReject.addEventListener('click', () => {
   diagnosticsWizardState = diagnosticsWizard.reject(diagnosticsWizardState);
   renderDiagnosticsWizard();
-  if (diagnosticsWizardState.mode === 'direct') diagnosticsProfile.focus?.();
-  else diagnosticsQuestionText.focus?.();
+  diagnosticsQuestionText.focus?.();
 });
 
 diagnosticsStartAnother.addEventListener('click', () => {
@@ -618,7 +732,15 @@ mastheadDiagnostics.addEventListener('click', () => menuDiagnostics.click());
 dashboardDiagnose.addEventListener('click', () => menuDiagnostics.click());
 
 menuDiagnostics.addEventListener('click', async () => {
+  /*
+   * Opened from the sign-in screen, the area is not in question: what is going wrong is getting signed in. The
+   * answer is presumed rather than fixed, so the frequency step's way back still reaches the other six.
+   */
+  const signingIn = !setupContent.hidden;
   openDashboardPanel(diagnosticsPanel, menuDiagnostics);
+  if (signingIn) {
+    diagnosticsWizardState = diagnosticsWizard.select(diagnosticsWizard.start(), 'startup-authentication');
+  }
   // Drawn on opening, because the wizard's first question is only ever put on the page by this call.
   renderDiagnosticsWizard();
   try {

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

@@ -8,12 +8,62 @@
       .replaceAll("'", ''');
   }
 
+  const EUFY_MODES = [
+    { value: 'away', label: 'Away' },
+    { value: 'home', label: 'Home' },
+    { value: 'schedule', label: 'Schedule' },
+    { value: 'custom1', label: 'Custom 1' },
+    { value: 'custom2', label: 'Custom 2' },
+    { value: 'custom3', label: 'Custom 3' },
+    { value: 'off', label: 'Off' },
+    { value: 'geo', label: 'Geofencing' },
+    { value: 'disarmed', label: 'Disarmed' },
+  ];
+  /** What each HomeKit state means where the household assigned nothing, as the adapter resolves it. */
+  const DEFAULT_ARMING_MODES = { home: 'home', away: 'away', off: 'disarmed' };
+  const ARMING_SLOTS = [
+    { slot: 'home', label: 'armingSlotHome' },
+    { slot: 'away', label: 'armingSlotAway' },
+    { slot: 'night', label: 'armingSlotNight' },
+    { slot: 'off', label: 'armingSlotOff' },
+  ];
+
+  /**
+   * The guard-mode map: four states HomeKit names against the nine a station reports, one pairing per row.
+   *
+   * Folded shut, because the four defaults are what nearly every household keeps and the panel has a camera's
+   * worth of settings above it. The summary carries the whole map as text, so the answer is readable without
+   * opening anything, and a household that assigned a state of its own finds it already open.
+   *
+   * A row is the whole control — the state names itself and the select beside it says what it means. An
+   * unassigned state shows a dash, which is what keeps Night out of HomeKit until it is given a mode.
+   */
+  function armingModeControl(device, assigned, messages) {
+    const summary = ARMING_SLOTS.map(
+      ({ slot, label }) => `${messages[label]} → ${EUFY_MODES.find((mode) => mode.value === assigned[slot])?.label ?? '—'}`,
+    ).join(' · ');
+    const rows = ARMING_SLOTS.map(({ slot, label }) => {
+      const value = assigned[slot] ?? '';
+      const id = `arming-${escapeHtml(device.serial)}-${slot}`;
+      const options = EUFY_MODES.map(
+        (mode) =>
+          `<option value="${mode.value}"${value === mode.value ? ' selected' : ''}>${escapeHtml(mode.label)}</option>`,
+      ).join('');
+      return `<tr><th scope="row"><label for="${id}">${escapeHtml(messages[label])}</label></th><td><select id="${id}" data-preference="armingModes" data-slot="${slot}" data-serial="${escapeHtml(device.serial)}" data-original="${escapeHtml(value)}"><option value=""${value === '' ? ' selected' : ''}>—</option>${options}</select></td></tr>`;
+    }).join('');
+    const assignedItself = ARMING_SLOTS.some(({ slot }) => assigned[slot] !== DEFAULT_ARMING_MODES[slot]);
+    return `<details class="arming-setting" data-setting${assignedItself ? ' open' : ''}${device.represented ? '' : ' hidden'} data-requires-representation><summary><span class="setting-label">${escapeHtml(messages.preferenceArmingModes)}</span><span class="arming-summary">${escapeHtml(summary)}</span></summary><table class="arming-table"><thead><tr><th scope="col">HomeKit</th><th scope="col">eufy</th></tr></thead><tbody>${rows}</tbody></table><p class="snapshot-help">${escapeHtml(messages.armingModesHelp)}</p></details>`;
+  }
+
   function preferenceControl(device, key, preference, messages) {
     const labels = {
       represented: messages.preferenceRepresented,
       audio: messages.preferenceAudio,
       snapshotMode: messages.preferenceSnapshotMode,
     };
+    if (key === 'armingModes') {
+      return armingModeControl(device, preference.armingModes, messages);
+    }
     const represented = preference.represented;
     const dependent = key === 'represented' ? '' : ` data-requires-representation${represented ? '' : ' hidden'}`;
     if (key === 'snapshotMode') {
@@ -29,7 +79,7 @@
 
   function markPendingPreference(control, key, value) {
     if (!control?.classList || control.dataset.original === undefined) return;
-    const current = key === 'snapshotMode' ? String(value) : String(Boolean(value));
+    const current = key === 'snapshotMode' || key === 'armingModes' ? String(value) : String(Boolean(value));
     const setting = control.closest('[data-setting]');
     const changed = current !== control.dataset.original;
     if (key === 'snapshotMode') {
@@ -261,6 +311,10 @@
       const existing = getConfig();
       if (!existing || !serial || !key) return;
       const defaults = { represented: true, audio: true, snapshotMode: 'Refresh' };
+      if (key === 'armingModes') {
+        await saveArmingMode(control, serial, existing, saveConfig, getMessages, elements);
+        return;
+      }
       const value = key === 'snapshotMode' ? control.value : control.checked;
       markPendingPreference(control, key, value);
       if (key === 'snapshotMode') {
@@ -295,6 +349,30 @@
     });
   }
 
+  /**
+   * Records one HomeKit state's guard mode, keeping the map sparse: a state set back to the plugin's own choice
+   * is removed rather than pinned, so a later default reaches a household that never overrode it.
+   */
+  async function saveArmingMode(control, serial, existing, saveConfig, getMessages, elements) {
+    const slot = control.dataset.slot;
+    const value = control.value;
+    markPendingPreference(control, 'armingModes', value);
+    const entityPreferences = { ...(existing.entityPreferences ?? {}) };
+    const preference = { ...(entityPreferences[serial] ?? {}) };
+    const armingModes = { ...(preference.armingModes ?? {}) };
+    if (value === '') delete armingModes[slot];
+    else armingModes[slot] = value;
+    if (Object.keys(armingModes).length === 0) delete preference.armingModes;
+    else preference.armingModes = armingModes;
+    if (Object.keys(preference).length === 0) delete entityPreferences[serial];
+    else entityPreferences[serial] = preference;
+    try {
+      await saveConfig({ ...existing, entityPreferences });
+    } catch {
+      elements.summary.textContent = getMessages().preferenceSaveFailed;
+    }
+  }
+
   /**
    * Fills the settings page for one device, which is where its controls live rather than on the tile itself.
    *
@@ -313,6 +391,7 @@
       represented: preferences[device.serial]?.represented ?? true,
       audio: preferences[device.serial]?.audio ?? true,
       snapshotMode: preferences[device.serial]?.snapshotMode ?? 'Refresh',
+      armingModes: { ...DEFAULT_ARMING_MODES, ...preferences[device.serial]?.armingModes },
     };
     const controls = device.preferences
       .map((key) => preferenceControl(device, key, preference, messages))