@homebridge-plugins/homebridge-eufy-security 5.0.0-beta.3 → 5.0.0-beta.5

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,65 @@ 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.
+ *
+ * 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 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');
+      diagnosticsDevicesChosen.disabled = chosenDiagnosticsDevices().length === 0;
+    });
+    diagnosticsDeviceList.append(tile);
+  }
+  diagnosticsDevicesChosen.disabled = true;
+}
+
+/** 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 +331,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 +373,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 +418,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 +450,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 +476,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 +523,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 +542,7 @@ diagnosticsAuthorize.addEventListener('click', async () => {
       {
         profile: diagnosticsWizardState.profile,
         reproductionMode: diagnosticsWizardState.reproductionMode,
+        ...(diagnosticsWizardState.devices === undefined ? {} : { affectedDevices: diagnosticsWizardState.devices }),
       },
       12000,
     );
@@ -465,37 +567,32 @@ 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]')];
+  for (const tile of tiles) tile.setAttribute('aria-pressed', 'true');
+  diagnosticsDevicesChosen.disabled = tiles.length === 0;
+  if (tiles.length === 0) {
+    diagnosticsWizardState = diagnosticsWizard.chooseDevices(diagnosticsWizardState, 'all');
+    renderDiagnosticsWizard();
+    diagnosticsFrequencyHeading.focus?.();
+  }
 });
 
-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 +605,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', () => {

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

@@ -1,37 +1,30 @@
 (function attachDiagnosticsWizard(global) {
-  const questions = [
-    { profile: 'dashboard-ui', message: 'diagnosticsQuestionDashboard' },
-    { profile: 'startup-authentication', message: 'diagnosticsQuestionStartup' },
-    { profile: 'device-representation', message: 'diagnosticsQuestionDevices' },
-    { profile: 'control-state', message: 'diagnosticsQuestionControl' },
-    { profile: 'live-media', message: 'diagnosticsQuestionLiveMedia' },
-    { profile: 'hksv-recording', message: 'diagnosticsQuestionRecording' },
+  const profiles = [
+    'startup-authentication',
+    'device-representation',
+    'control-state',
+    'live-media',
+    'hksv-recording',
+    'dashboard-ui',
+    'other',
   ];
 
-  function start() {
-    return { mode: 'questions', questionIndex: 0, profile: undefined, source: 'questions' };
-  }
+  const deviceProfiles = ['device-representation', 'control-state', 'live-media', 'hksv-recording'];
 
-  function answer(state, matches) {
-    if (matches) {
-      return { ...state, mode: 'frequency', profile: questions[state.questionIndex].profile };
-    }
-    if (state.questionIndex === questions.length - 1) {
-      return { ...state, mode: 'frequency', profile: 'other' };
-    }
-    return { ...state, questionIndex: state.questionIndex + 1 };
+  function start() {
+    return { mode: 'tiles', profile: undefined };
   }
 
-  function direct() {
-    return { mode: 'direct', questionIndex: 0, profile: undefined, source: 'direct' };
+  function select(state, profile) {
+    return { ...state, mode: deviceProfiles.includes(profile) ? 'devices' : 'frequency', profile };
   }
 
-  function selectDirect(state, profile) {
-    return { ...state, mode: 'frequency', profile, source: 'direct' };
+  function chooseDevices(state, devices) {
+    return { ...state, mode: 'frequency', devices };
   }
 
-  function reject(state) {
-    return state.source === 'direct' ? direct() : start();
+  function reject() {
+    return start();
   }
 
   function chooseReproductionMode(state, reproductionMode) {
@@ -39,7 +32,7 @@
   }
 
   function backFromFrequency(state) {
-    return state.source === 'direct' ? direct() : start();
+    return deviceProfiles.includes(state.profile) ? { ...state, mode: 'devices' } : start();
   }
 
   function screen(session, startingAnother) {
@@ -54,15 +47,15 @@
   }
 
   global.HomebridgeEufyDiagnosticsWizard = {
-    answer,
     backFromFrequency,
     backgroundActive,
+    chooseDevices,
     chooseReproductionMode,
-    direct,
-    questions,
+    deviceProfiles,
+    profiles,
     reject,
     screen,
-    selectDirect,
+    select,
     start,
   };
 })(window);

package/package.json

@@ -1,7 +1,7 @@
 {
   "displayName": "Homebridge Eufy",
   "name": "@homebridge-plugins/homebridge-eufy-security",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0-beta.5",
   "description": "Control Eufy Security from homebridge.",
   "type": "module",
   "license": "Apache-2.0",