@homebridge-plugins/homebridge-eufy-security 5.0.0-beta.2 → 5.0.0-beta.21

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

@@ -22,6 +22,13 @@ const dashboardTitle = document.querySelector('[data-dashboard-title]');
 const dashboardBadge = document.querySelector('[data-dashboard-badge]');
 const dashboardSummary = document.querySelector('[data-dashboard-summary]');
 const dashboardAuthenticate = document.querySelector('[data-dashboard-authenticate]');
+const reauthDialog = document.querySelector('[data-reauth-dialog]');
+const reauthAction = document.querySelector('[data-reauth-action]');
+const attentionDialog = document.querySelector('[data-attention-dialog]');
+const attentionTitle = document.querySelector('[data-attention-title]');
+const attentionSummary = document.querySelector('[data-attention-summary]');
+const attentionDiagnose = document.querySelector('[data-attention-diagnose]');
+const attentionChoose = document.querySelector('[data-attention-choose]');
 const deviceGroups = document.querySelector('[data-device-groups]');
 const updatePending = document.querySelector('[data-update-pending]');
 const updatePendingSummary = document.querySelector('[data-update-pending-summary]');
@@ -31,50 +38,34 @@ const pageTitle = document.querySelector('[data-page-title]');
 const legacyNotice = document.querySelector('[data-legacy-notice]');
 const legacySettings = document.querySelector('[data-legacy-settings]');
 const legacyAcknowledge = document.querySelector('[data-legacy-acknowledge]');
+const legacyStatus = document.querySelector('[data-legacy-status]');
 const menuDiagnostics = document.querySelector('[data-menu-diagnostics]');
 const menuAdvanced = document.querySelector('[data-menu-advanced]');
 const diagnosticsPanel = document.querySelector('[data-diagnostics]');
 const mastheadDiagnostics = document.querySelector('[data-masthead-diagnostics]');
 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 diagnosticsFrequency = document.querySelector('[data-diagnostics-frequency]');
-const diagnosticsFrequencyHeading = document.querySelector('#diagnostics-frequency-heading');
-const diagnosticsFrequencyNow = document.querySelector('[data-diagnostics-frequency-answer="now"]');
-const diagnosticsFrequencyIntermittent = document.querySelector('[data-diagnostics-frequency-answer="intermittent"]');
-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 diagnosticsTiles = [...document.querySelectorAll('[data-diagnostics-tile]')];
+const diagnosticsCancel = document.querySelector('[data-diagnostics-cancel]');
 const diagnosticsReproduction = document.querySelector('[data-diagnostics-reproduction]');
 const diagnosticsStatus = document.querySelector('[data-diagnostics-status]');
 const diagnosticsIssue = document.querySelector('[data-diagnostics-issue]');
+const diagnosticsExistingIssue = document.querySelector('[data-diagnostics-existing-issue]');
 const diagnosticsResult = document.querySelector('[data-diagnostics-result]');
 const diagnosticsActions = document.querySelector('[data-diagnostics-actions]');
-const diagnosticsGuidanceTitle = document.querySelector('[data-diagnostics-guidance-title]');
-const diagnosticsModeSummary = document.querySelector('[data-diagnostics-mode-summary]');
 const diagnosticsGuidance = document.querySelector('[data-diagnostics-guidance]');
 const diagnosticsPhaseTitle = document.querySelector('[data-diagnostics-phase-title]');
-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]');
+const diagnosticsCaptureNote = document.querySelector('[data-diagnostics-capture-note]');
+const diagnosticsHandoff = document.querySelector('[data-diagnostics-handoff]');
+const diagnosticsHandoffNote = document.querySelector('[data-diagnostics-handoff-note]');
+const diagnosticsResultStatus = document.querySelector('[data-diagnostics-result-status]');
 const diagnosticsExport = document.querySelector('[data-diagnostics-export]');
 const diagnosticsResultHeading = document.querySelector('[data-diagnostics-result-heading]');
 const diagnosticsStartAnother = document.querySelector('[data-diagnostics-start-another]');
+const diagnosticsDownloadAgain = document.querySelector('[data-diagnostics-download-again]');
 const advancedPanel = document.querySelector('[data-advanced-settings]');
-const dashboardDiagnose = document.querySelector('[data-dashboard-diagnose]');
 const devicePanel = document.querySelector('[data-device-settings]');
 const deviceClose = document.querySelector('[data-device-close]');
 const deviceSettingsTitle = document.querySelector('[data-device-settings-title]');
@@ -100,18 +91,23 @@ 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 archive is reviewed and ready to export, so the review is fetched once rather than per render. */
+let diagnosticsReviewedCaseId = '';
+/** The one fetch in flight, so a burst of renders does not assemble the archive several times over. */
+let diagnosticsReviewRequest;
 let diagnosticsReviewId = '';
-let diagnosticsStartingAnother = false;
 let panelReturn;
+/** The problem the dashboard last drew, which the dashboard's diagnostics action points at while there is one. */
+let dashboardAttention;
 let dashboardPanelTrigger;
 const dashboardView = window.HomebridgeEufyDashboard;
 const legacySettingsView = window.HomebridgeEufyLegacySettings;
 const diagnosticsWizard = window.HomebridgeEufyDiagnosticsWizard;
-let diagnosticsWizardState = diagnosticsWizard.start();
 const dashboardElements = {
   dashboard,
   title: dashboardTitle,
-  diagnose: dashboardDiagnose,
   summary: dashboardSummary,
   authenticate: dashboardAuthenticate,
   groups: deviceGroups,
@@ -127,12 +123,19 @@ const dashboardElements = {
   masthead,
 };
 
+const REQUEST_TIMED_OUT = 'Request timed out';
+
+/**
+ * A request the page stops waiting for after `timeoutMs`. The timeout error carries the request as `late`, since
+ * the plugin may still carry it out after the page gave up.
+ */
 function requestWithinDeadline(path, body, timeoutMs = 320000) {
   let timer;
+  const request = homebridge.request(path, body);
   const timeout = new Promise((_, reject) => {
-    timer = setTimeout(() => reject(new Error('Request timed out')), timeoutMs);
+    timer = setTimeout(() => reject(Object.assign(new Error(REQUEST_TIMED_OUT), { late: request })), timeoutMs);
   });
-  return Promise.race([homebridge.request(path, body), timeout]).finally(() => clearTimeout(timer));
+  return Promise.race([request, timeout]).finally(() => clearTimeout(timer));
 }
 
 function isDashboardUiReproducing(state = diagnosticsState) {
@@ -148,6 +151,11 @@ function recordActiveUiEventBestEffort(event) {
   void recordActiveUiEvent(event).catch(() => undefined);
 }
 
+/** A country code that is not two letters is refused where it is typed, in the page's own words. */
+countryInput.addEventListener('input', () => {
+  countryInput.setCustomValidity(countryInput.validity.patternMismatch ? (messages.countryInvalid ?? '') : '');
+});
+
 acknowledgement.addEventListener('change', () => {
   continueButton.disabled = !acknowledgement.checked;
 });
@@ -206,211 +214,150 @@ function setBusy(busy) {
 }
 
 const diagnosticsProfiles = {
-  'startup-authentication': {
-    title: 'diagnosticsProfileStartup',
-    summary: 'diagnosticsStartupSummary',
-    before: 'diagnosticsStartupBefore',
-    action: 'diagnosticsStartupAction',
-  },
-  'device-representation': {
-    title: 'diagnosticsProfileDevices',
-    summary: 'diagnosticsDevicesSummary',
-    before: 'diagnosticsDevicesBefore',
-    action: 'diagnosticsDevicesAction',
-  },
-  'control-state': {
-    title: 'diagnosticsProfileControl',
-    summary: 'diagnosticsControlSummary',
-    before: 'diagnosticsControlBefore',
-    action: 'diagnosticsControlAction',
-  },
-  'live-media': {
-    title: 'diagnosticsProfileLiveMedia',
-    summary: 'diagnosticsLiveSummary',
-    before: 'diagnosticsLiveBefore',
-    action: 'diagnosticsLiveAction',
-  },
-  'hksv-recording': {
-    title: 'diagnosticsProfileRecording',
-    summary: 'diagnosticsRecordingSummary',
-    before: 'diagnosticsRecordingBefore',
-    action: 'diagnosticsRecordingAction',
-  },
-  'dashboard-ui': {
-    title: 'diagnosticsProfileDashboard',
-    summary: 'diagnosticsDashboardSummary',
-    before: 'diagnosticsDashboardBefore',
-    action: 'diagnosticsDashboardAction',
-  },
-  other: {
-    title: 'diagnosticsProfileOther',
-    summary: 'diagnosticsOtherSummary',
-    before: 'diagnosticsOtherBefore',
-    action: 'diagnosticsOtherAction',
-  },
+  'startup-authentication': { title: 'diagnosticsProfileStartup', action: 'diagnosticsStartupAction' },
+  'device-representation': { title: 'diagnosticsProfileDevices', action: 'diagnosticsDevicesAction' },
+  'control-state': { title: 'diagnosticsProfileControl', action: 'diagnosticsControlAction' },
+  'live-media': { title: 'diagnosticsProfileLiveMedia', action: 'diagnosticsLiveAction' },
+  'hksv-recording': { title: 'diagnosticsProfileRecording', action: 'diagnosticsRecordingAction' },
+  'dashboard-ui': { title: 'diagnosticsProfileDashboard', action: 'diagnosticsDashboardAction' },
+  other: { title: 'diagnosticsProfileOther', action: 'diagnosticsOtherAction' },
 };
 
 function renderDiagnosticsGuidance(profile) {
   const guidance = diagnosticsProfiles[profile] ?? diagnosticsProfiles.other;
-  diagnosticsGuidanceTitle.textContent = messages[guidance.title] ?? '';
   diagnosticsPhaseTitle.textContent = messages[guidance.title] ?? '';
-  diagnosticsGuidanceBefore.textContent = messages[guidance.before] ?? '';
   diagnosticsGuidanceAction.textContent = messages[guidance.action] ?? '';
 }
 
-function renderDiagnosticsWizard() {
-  diagnosticsQuestion.hidden = diagnosticsWizardState.mode !== 'questions';
-  diagnosticsDirectPanel.hidden = diagnosticsWizardState.mode !== 'direct';
-  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[
-        diagnosticsWizardState.reproductionMode === 'intermittent'
-          ? 'diagnosticsModeIntermittentSummary'
-          : 'diagnosticsModeNowSummary'
-      ] ?? '';
+/**
+ * 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;
+  diagnosticsExistingIssue.href = url.replace(/\/issues\/new.*$/, '/issues?q=is%3Aissue+involves%3A%40me');
+}
+
+/**
+ * Leaves the archive dialog once its file is handed over, which is what ends the session: the plugin keeps it until
+ * then so a download that never arrived can be tried again.
+ */
+async function endDiagnosticsCase() {
+  try {
+    renderDiagnostics(await requestWithinDeadline('/diagnostics/cancel', undefined, 12000));
+  } catch (error) {
+    await redrawDiagnosticsAfterFailure('inactive', error);
   }
+  diagnosticsQuestionText.focus?.();
 }
 
 function renderDiagnostics(state) {
+  if (state.supportCaseId !== diagnosticsState.supportCaseId) diagnosticsArchiveDownloaded = false;
   diagnosticsState = state;
-  const screen = diagnosticsWizard.screen(state, diagnosticsStartingAnother);
+  const screen = diagnosticsWizard.screen(state);
   const choosing = screen === 'choose';
   const reviewing = screen === 'review';
-  const reproductionMode = state.reproductionMode ?? 'now';
-  const collecting = isDashboardUiReproducing(state);
-  for (const entry of [mastheadDiagnostics, menuDiagnostics]) {
-    if (collecting) entry.dataset.collecting = 'true';
-    else delete entry.dataset.collecting;
-    entry.setAttribute(
-      'aria-label',
-      messages[collecting ? 'diagnosticsCollectingFinishHere' : 'menuDiagnostics'] ?? '',
-    );
-  }
+  renderDiagnosticsEntries();
   diagnosticsWizardPanel.hidden = !choosing;
   diagnosticsGuidance.hidden = screen !== 'reproduce';
-  diagnosticsGuidanceBeforeSection.hidden = state.status === 'reproducing';
   diagnosticsActions.hidden = screen !== 'reproduce';
-  diagnosticsReproduction.disabled = !['authorized', 'reproducing'].includes(state.status);
-  diagnosticsReproduction.textContent =
-    reproductionMode === 'intermittent'
-      ? state.status === 'reproducing'
-        ? messages.diagnosticsIntermittentIssueHappened
-        : messages.diagnosticsIntermittentStartWaiting
-      : state.status === 'reproducing'
-        ? messages.diagnosticsNowFinish
-        : messages.diagnosticsStartRecording;
-  diagnosticsIssue.hidden = !reviewing;
-  diagnosticsIssue.href = 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;
+  diagnosticsReproduction.disabled = state.status !== 'reproducing';
+  setIssueStepReachable(diagnosticsArchiveDownloaded ? (state.issueUrl ?? '') : '');
+  const offering = (reviewing || diagnosticsArchiveDownloaded) && !diagnosticsPanel.hidden;
+  if (offering && !diagnosticsResult.open) diagnosticsResult.showModal?.();
+  if (!offering && diagnosticsResult.open) diagnosticsResult.close?.();
+  diagnosticsResultHeading.textContent =
+    messages[
+      diagnosticsArchiveDownloaded
+        ? 'diagnosticsArchiveDownloaded'
+        : state.reproductionEndedAt && state.reproductionEndedAt === state.expiresAt
+          ? 'diagnosticsCaptureTimedOut'
+          : 'diagnosticsEvidenceReady'
+    ] ?? '';
+  const reviewed = reviewing && diagnosticsReviewedCaseId === (state.supportCaseId ?? '');
+  diagnosticsExport.hidden = !reviewed || diagnosticsArchiveDownloaded;
+  diagnosticsHandoff.hidden = !diagnosticsArchiveDownloaded;
+  diagnosticsHandoffNote.hidden = !diagnosticsArchiveDownloaded;
+  if (!offering) diagnosticsResultStatus.textContent = '';
+  else if (!diagnosticsArchiveDownloaded && state.missingEvidence?.length) {
+    diagnosticsResultStatus.textContent = messages.diagnosticsMissingEvidence ?? '';
+  }
+  diagnosticsStartAnother.hidden = !diagnosticsArchiveDownloaded;
+  diagnosticsDownloadAgain.hidden = !diagnosticsArchiveDownloaded;
+  if (!reviewed) {
+    diagnosticsExport.disabled = true;
+    diagnosticsReviewId = '';
+    if (reviewing && !diagnosticsArchiveDownloaded) void ensureArchiveReview(state.supportCaseId ?? '');
+  }
   if (screen === 'reproduce') {
     renderDiagnosticsGuidance(state.profile);
-    if (reproductionMode === 'intermittent') {
-      diagnosticsGuidanceBeforeSection.hidden = true;
-      diagnosticsGuidanceAction.textContent =
-        messages[
-          state.status === 'reproducing'
-            ? 'diagnosticsIntermittentWaitingGuidance'
-            : 'diagnosticsIntermittentReadyGuidance'
-        ] ?? '';
-    }
+    const stopsAt = new Date(state.expiresAt).toLocaleString(shell.lang || undefined, {
+      weekday: 'long',
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+    diagnosticsCaptureNote.textContent = (messages.diagnosticsCaptureKeepsRunning ?? '').replace('{time}', stopsAt);
   }
-  if (choosing) renderDiagnosticsWizard();
-  const statusKey = reviewing
-    ? state.missingEvidence?.length
-      ? 'diagnosticsMissingEvidence'
-      : 'diagnosticsComplete'
-    : {
-        inactive: 'diagnosticsInactive',
-        authorized:
-          reproductionMode === 'intermittent' ? 'diagnosticsIntermittentAuthorized' : 'diagnosticsAuthorized',
-        reproducing:
-          reproductionMode === 'intermittent' ? 'diagnosticsIntermittentReproducing' : 'diagnosticsReproducing',
-        complete: state.missingEvidence?.length ? 'diagnosticsMissingEvidence' : 'diagnosticsComplete',
-        expired: 'diagnosticsExpired',
-      }[state.status];
-  diagnosticsStatus.textContent = (
-    choosing && (state.status === 'inactive' || diagnosticsStartingAnother) ? '' : (messages[statusKey] ?? '')
-  ).replace('{evidence}', state.missingEvidence?.join(', ') ?? '');
+  diagnosticsStatus.textContent = '';
 }
 
-function renderArchiveManifest(manifest) {
-  diagnosticsManifest.replaceChildren();
-  const summary = document.createElement('p');
-  const mode =
-    messages[manifest.reproductionMode === 'intermittent' ? 'diagnosticsModeIntermittent' : 'diagnosticsModeNow'] ??
-    manifest.reproductionMode;
-  summary.textContent = `${manifest.archiveFormat} v${manifest.version} · ${manifest.keyId} · ${messages.diagnosticsArchiveMode ?? ''} ${mode} · ${(messages.diagnosticsArchiveExpires ?? '').replace('{expiresAt}', new Date(manifest.archiveExpiresAt).toLocaleString(shell.lang || 'en'))}`;
-  const evidence = document.createElement('ul');
-  for (const item of manifest.evidence ?? []) {
-    const row = document.createElement('li');
-    const size = item.bytes === undefined ? '' : ` · ${item.bytes} B`;
-    const truncated = item.truncated ? ` · ${messages.diagnosticsArchiveTruncated ?? ''}` : '';
-    const missing = item.missingReason ? ` · ${item.missingReason}` : '';
-    const fields = (item.fields ?? []).map((field) => `${field.field}: ${field.privacyClass}`).join(', ');
-    row.textContent = `${item.evidence} · ${item.privacyClass} · ${item.status}${missing}${size}${truncated}${fields ? ` · ${messages.diagnosticsArchiveFields ?? ''} ${fields}` : ''}`;
-    evidence.append(row);
-  }
-  const exclusions = document.createElement('p');
-  exclusions.textContent = `${messages.diagnosticsArchiveExcluded ?? ''} ${(manifest.excludedClasses ?? []).join(', ')}`;
-  diagnosticsManifest.append(summary, evidence, exclusions);
-  const uncovered = (manifest.evidence ?? []).filter((item) => item.coversReproduction === false);
-  if (uncovered.length > 0) {
-    const gap = document.createElement('p');
-    gap.textContent = (messages.diagnosticsArchiveCoverageGap ?? '')
-      .replace('{classes}', uncovered.map((item) => item.evidence).join(', '))
-      .replace(
-        '{retainedFrom}',
-        new Date(
-          Math.min(...uncovered.map((item) => Date.parse(item.retainedFrom))),
-        ).toLocaleString(shell.lang || 'en'),
-      );
-    diagnosticsManifest.append(gap);
+/**
+ * Marks both diagnostics actions while a capture runs, whichever area it is on, and otherwise the dashboard's own
+ * while it shows a problem.
+ */
+function renderDiagnosticsEntries() {
+  const collecting = diagnosticsState.status === 'reproducing';
+  for (const entry of [mastheadDiagnostics, menuDiagnostics]) {
+    const attending = !collecting && entry === menuDiagnostics && dashboardAttention !== undefined;
+    if (collecting) entry.dataset.collecting = 'true';
+    else delete entry.dataset.collecting;
+    if (attending) entry.dataset.attention = 'true';
+    else delete entry.dataset.attention;
+    entry.setAttribute(
+      'aria-label',
+      messages[collecting ? 'diagnosticsCollectingFinishHere' : attending ? 'diagnosticsAttention' : 'menuDiagnostics'] ??
+        '',
+    );
   }
-  diagnosticsManifest.hidden = false;
 }
 
-diagnosticsReview.addEventListener('click', async () => {
-  diagnosticsReview.disabled = true;
-  try {
-    const review = await requestWithinDeadline('/diagnostics/archive/review', undefined, 12000);
-    diagnosticsReviewId = review.reviewId;
-    renderArchiveManifest(review.manifest);
-    diagnosticsReviewConfirmLabel.hidden = false;
-    diagnosticsExport.hidden = false;
-  } catch {
+/**
+ * The reviewed archive for the session on screen, fetched once.
+ *
+ * A completed reproduction that the reporter is looking at is a file they came for, so the archive is
+ * reviewed without being asked for. It is reviewed once per session rather than per render, because
+ * assembling it reads every collected log. Exporting spends it, and ends the session with it.
+ */
+function ensureArchiveReview(caseId) {
+  if (!caseId || diagnosticsReviewedCaseId === caseId) return Promise.resolve();
+  diagnosticsReviewRequest ??= (async () => {
     try {
-      renderDiagnostics(await requestWithinDeadline('/diagnostics/status', undefined, 12000));
-      diagnosticsStatus.textContent = messages.diagnosticsFailed ?? '';
+      const review = await requestWithinDeadline('/diagnostics/archive/review', undefined, 12000);
+      diagnosticsReviewId = review.reviewId;
+      diagnosticsReviewedCaseId = caseId;
+      diagnosticsExport.hidden = false;
+      diagnosticsExport.disabled = false;
     } catch {
-      diagnosticsStatus.textContent = messages.diagnosticsFailed ?? '';
+      diagnosticsResultStatus.textContent = messages.diagnosticsFailed ?? '';
+    } finally {
+      diagnosticsReviewRequest = undefined;
     }
-  } finally {
-    diagnosticsReview.disabled = false;
-  }
-});
-
-diagnosticsReviewConfirm.addEventListener('change', () => {
-  diagnosticsExport.disabled = !diagnosticsReviewConfirm.checked || !diagnosticsReviewId;
-});
+  })();
+  return diagnosticsReviewRequest;
+}
 
-diagnosticsExport.addEventListener('click', async () => {
-  if (!diagnosticsReviewConfirm.checked || !diagnosticsReviewId) return;
+/**
+ * Hands the archive of the session on screen over as a download.
+ *
+ * Finishing a reproduction calls this without being asked, since the file is what the reporter finished for; the
+ * dialog's own button is the way to try again after a failed attempt.
+ */
+async function downloadDiagnosticsArchive() {
+  await ensureArchiveReview(diagnosticsState.supportCaseId ?? '');
+  if (!diagnosticsReviewId) return;
   diagnosticsExport.disabled = true;
   try {
     const exported = await requestWithinDeadline(
@@ -421,141 +368,119 @@ diagnosticsExport.addEventListener('click', async () => {
     const download = document.createElement('a');
     download.href = `data:${exported.mediaType};base64,${exported.archive}`;
     download.download = exported.filename;
+    diagnosticsHandoffNote.textContent = (messages.diagnosticsArchiveHandoff ?? '').replace(
+      '{filename}',
+      exported.filename,
+    );
+    diagnosticsResultStatus.textContent = '';
     document.body.appendChild(download);
     download.click();
     document.body.removeChild(download);
     diagnosticsReviewId = '';
-    diagnosticsReviewConfirm.checked = false;
+    diagnosticsReviewedCaseId = '';
+    diagnosticsArchiveDownloaded = true;
+    renderDiagnostics(diagnosticsState);
+    diagnosticsResultHeading.focus?.();
   } catch {
-    diagnosticsStatus.textContent = messages.diagnosticsFailed ?? '';
+    // The plugin spends a review on any attempt, so trying again asks for a fresh one.
+    diagnosticsReviewId = '';
+    diagnosticsReviewedCaseId = '';
+    diagnosticsExport.disabled = false;
+    diagnosticsResultStatus.textContent = messages.diagnosticsFailed ?? '';
   }
-});
+}
+
+diagnosticsExport.addEventListener('click', downloadDiagnosticsArchive);
+diagnosticsDownloadAgain.addEventListener('click', downloadDiagnosticsArchive);
+
+/**
+ * Draws the session as the plugin holds it after `error`, and says so unless it reached `expected`, inside the
+ * download dialog while that covers the panel. A request that timed out may still land, so its late answer draws
+ * the session again.
+ */
+async function redrawDiagnosticsAfterFailure(expected, error) {
+  const refreshed = await settleDiagnostics().catch(() => undefined);
+  if (refreshed?.status !== expected) {
+    (diagnosticsResult.open ? diagnosticsResultStatus : diagnosticsStatus).textContent = messages.diagnosticsFailed ?? '';
+  }
+  error?.late?.then(settleDiagnostics).catch(() => undefined);
+}
+
+/**
+ * Draws the session the plugin holds. One opened but never started is what a failed or late pick leaves behind;
+ * nothing on screen stands for it and it keeps detailed logging on, so it is cancelled rather than drawn.
+ */
+async function settleDiagnostics() {
+  let state = await requestWithinDeadline('/diagnostics/status', undefined, 12000);
+  if (state.status === 'authorized') state = await requestWithinDeadline('/diagnostics/cancel', undefined, 12000);
+  renderDiagnostics(state);
+  return state;
+}
 
-diagnosticsAuthorize.addEventListener('click', async () => {
-  diagnosticsAuthorize.disabled = true;
-  let focusAuthorizeAfter = false;
-  const previousStatus = diagnosticsState.status;
+/**
+ * Captures the area picked. The area is the only answer a capture needs, so the pick opens the session and starts
+ * it in one go.
+ */
+async function startDiagnosticsCapture(profile) {
+  for (const tile of diagnosticsTiles) tile.disabled = true;
   try {
-    const authorized = await requestWithinDeadline(
-      '/diagnostics/authorize',
-      {
-        profile: diagnosticsWizardState.profile,
-        reproductionMode: diagnosticsWizardState.reproductionMode,
-      },
-      12000,
-    );
-    diagnosticsStartingAnother = false;
-    renderDiagnostics(authorized);
-    if (diagnosticsState.status === 'authorized') diagnosticsGuidance.focus?.();
-  } catch {
-    try {
-      const refreshed = await requestWithinDeadline('/diagnostics/status', undefined, 12000);
-      if (refreshed.status !== previousStatus) diagnosticsStartingAnother = false;
-      renderDiagnostics(refreshed);
-      if (refreshed.status === previousStatus) {
-        diagnosticsStatus.textContent = messages.diagnosticsFailed ?? '';
-        focusAuthorizeAfter = true;
-      } else if (refreshed.status === 'authorized') diagnosticsGuidance.focus?.();
-    } catch {
-      diagnosticsStatus.textContent = messages.diagnosticsFailed ?? '';
+    await requestWithinDeadline('/diagnostics/authorize', { profile }, 12000);
+    const state = await requestWithinDeadline('/diagnostics/reproduction/start', undefined, 12000);
+    renderDiagnostics(state);
+    if (isDashboardUiReproducing(state)) {
+      await recordActiveUiEvent('background-started').catch(() => undefined);
+      closeDashboardPanel();
+      return;
     }
+    diagnosticsPhaseTitle.focus?.();
+  } catch (error) {
+    await redrawDiagnosticsAfterFailure('reproducing', error);
   } finally {
-    diagnosticsAuthorize.disabled = false;
-    if (focusAuthorizeAfter) diagnosticsAuthorize.focus?.();
+    for (const tile of diagnosticsTiles) tile.disabled = false;
   }
-});
-
-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?.();
-});
-
-diagnosticsDirect.addEventListener('click', () => {
-  diagnosticsWizardState = diagnosticsWizard.direct();
-  renderDiagnosticsWizard();
-  diagnosticsProfile.focus?.();
-});
-
-diagnosticsDirectChoose.addEventListener('click', () => {
-  diagnosticsWizardState = diagnosticsWizard.selectDirect(diagnosticsWizardState, diagnosticsProfile.value);
-  renderDiagnosticsWizard();
-  diagnosticsFrequencyHeading.focus?.();
-});
-
-diagnosticsDirectBack.addEventListener('click', () => {
-  diagnosticsWizardState = diagnosticsWizard.start();
-  renderDiagnosticsWizard();
-  diagnosticsQuestionText.focus?.();
-});
-
-function chooseDiagnosticsReproductionMode(reproductionMode) {
-  diagnosticsWizardState = diagnosticsWizard.chooseReproductionMode(diagnosticsWizardState, reproductionMode);
-  renderDiagnosticsWizard();
-  diagnosticsGuidanceTitle.focus?.();
 }
 
-diagnosticsFrequencyNow.addEventListener('click', () => chooseDiagnosticsReproductionMode('now'));
-diagnosticsFrequencyIntermittent.addEventListener('click', () => chooseDiagnosticsReproductionMode('intermittent'));
-
-diagnosticsFrequencyBack.addEventListener('click', () => {
-  diagnosticsWizardState = diagnosticsWizard.backFromFrequency(diagnosticsWizardState);
-  renderDiagnosticsWizard();
-  if (diagnosticsWizardState.mode === 'direct') diagnosticsProfile.focus?.();
-  else diagnosticsQuestionText.focus?.();
-});
-
-diagnosticsReject.addEventListener('click', () => {
-  diagnosticsWizardState = diagnosticsWizard.reject(diagnosticsWizardState);
-  renderDiagnosticsWizard();
-  if (diagnosticsWizardState.mode === 'direct') diagnosticsProfile.focus?.();
-  else diagnosticsQuestionText.focus?.();
-});
+for (const tile of diagnosticsTiles) {
+  tile.addEventListener('click', () => startDiagnosticsCapture(tile.dataset.diagnosticsTile));
+}
 
-diagnosticsStartAnother.addEventListener('click', () => {
-  diagnosticsStartingAnother = true;
-  diagnosticsWizardState = diagnosticsWizard.start();
-  renderDiagnostics(diagnosticsState);
-  diagnosticsQuestionText.focus?.();
+diagnosticsStartAnother.addEventListener('click', endDiagnosticsCase);
+/** Escape leaves the archive dialog only once its file is downloaded, and leaving it finishes the session. */
+diagnosticsResult.addEventListener('cancel', (event) => {
+  event.preventDefault();
+  if (diagnosticsArchiveDownloaded) endDiagnosticsCase();
 });
 
 diagnosticsReproduction.addEventListener('click', async () => {
   diagnosticsReproduction.disabled = true;
-  const previousStatus = diagnosticsState.status;
-  const path =
-    diagnosticsState.status === 'reproducing' ? '/diagnostics/reproduction/end' : '/diagnostics/reproduction/start';
   try {
-    let state = await requestWithinDeadline(path, undefined, 12000);
+    let state = await requestWithinDeadline('/diagnostics/reproduction/end', undefined, 12000);
     if (state.status === 'complete' && state.missingEvidence?.length) {
       await new Promise((resolve) => setTimeout(resolve, 250));
       state = await requestWithinDeadline('/diagnostics/status', undefined, 12000);
     }
     renderDiagnostics(state);
-    if (previousStatus === 'authorized' && isDashboardUiReproducing(state)) {
-      await recordActiveUiEvent('background-started').catch(() => undefined);
-      closeDashboardPanel();
-      return;
-    }
-    if (state.status === 'complete' || state.partialExportAvailable) diagnosticsResultHeading.focus?.();
-  } catch {
-    try {
-      const refreshed = await requestWithinDeadline('/diagnostics/status', undefined, 12000);
-      renderDiagnostics(refreshed);
-      if (refreshed.status === previousStatus) diagnosticsStatus.textContent = messages.diagnosticsFailed ?? '';
-      if (refreshed.status === 'complete' || refreshed.partialExportAvailable) diagnosticsResultHeading.focus?.();
-      else if (refreshed.status === 'authorized' || refreshed.status === 'reproducing') diagnosticsGuidance.focus?.();
-    } catch {
-      diagnosticsStatus.textContent = messages.diagnosticsFailed ?? '';
-    }
+  } catch (error) {
+    await redrawDiagnosticsAfterFailure('complete', error);
+  } finally {
+    diagnosticsReproduction.disabled = diagnosticsState.status !== 'reproducing';
+  }
+  if (diagnosticsState.partialExportAvailable) {
+    diagnosticsResultHeading.focus?.();
+    await downloadDiagnosticsArchive();
+  }
+});
+
+/** Cancelling a capture deletes its session without a file, and puts the areas back on the panel. */
+diagnosticsCancel.addEventListener('click', async () => {
+  diagnosticsCancel.disabled = true;
+  try {
+    renderDiagnostics(await requestWithinDeadline('/diagnostics/cancel', undefined, 12000));
+    diagnosticsQuestionText.focus?.();
+  } catch (error) {
+    await redrawDiagnosticsAfterFailure('inactive', error);
   } finally {
-    diagnosticsReproduction.disabled = !['authorized', 'reproducing'].includes(diagnosticsState.status);
+    diagnosticsCancel.disabled = false;
   }
 });
 
@@ -612,21 +537,46 @@ function closeDashboardPanel() {
   }
 }
 
-mastheadDiagnostics.addEventListener('click', () => menuDiagnostics.click());
-
-// The dashboard's own offer of a run goes the same way the menu does, so there is one path into the wizard.
-dashboardDiagnose.addEventListener('click', () => menuDiagnostics.click());
-
-menuDiagnostics.addEventListener('click', async () => {
+/**
+ * Opens the diagnostics panel. A preset is an area the reporter already chose to diagnose from a problem the
+ * dashboard named beside the privacy note, so a panel with nothing under way captures it at once. Opened over the
+ * sign-in screen, the panel asks like any other and puts focus on the startup area.
+ */
+async function openDiagnostics(preset) {
+  const signingIn = !setupContent.hidden;
   openDashboardPanel(diagnosticsPanel, menuDiagnostics);
-  // Drawn on opening, because the wizard's first question is only ever put on the page by this call.
-  renderDiagnosticsWizard();
   try {
     renderDiagnostics(await requestWithinDeadline('/diagnostics/status', undefined, 12000));
   } catch {
     diagnosticsStatus.textContent = messages.diagnosticsFailed ?? '';
     recordActiveUiEventBestEffort('request-failed');
+    return;
+  }
+  if (diagnosticsWizard.screen(diagnosticsState) !== 'choose') return;
+  if (preset) await startDiagnosticsCapture(preset.profile);
+  else if (signingIn) {
+    diagnosticsTiles.find((tile) => tile.dataset.diagnosticsTile === 'startup-authentication')?.focus?.();
   }
+}
+
+mastheadDiagnostics.addEventListener('click', () => openDiagnostics());
+
+/** While the dashboard shows a problem and no session is under way, the action names it before opening the wizard. */
+menuDiagnostics.addEventListener('click', () => {
+  if (!menuDiagnostics.dataset.attention || diagnosticsWizard.screen(diagnosticsState) !== 'choose') {
+    return openDiagnostics();
+  }
+  attentionTitle.textContent = dashboardAttention.title;
+  attentionSummary.textContent = dashboardAttention.summary;
+  attentionDialog.showModal?.();
+});
+attentionDiagnose.addEventListener('click', () => {
+  attentionDialog.close?.();
+  return openDiagnostics(dashboardAttention);
+});
+attentionChoose.addEventListener('click', () => {
+  attentionDialog.close?.();
+  return openDiagnostics();
 });
 menuAdvanced.addEventListener('click', async () => {
   const config = configuredBlock() ?? {};
@@ -653,9 +603,8 @@ menuAdvanced.addEventListener('click', async () => {
   }
 });
 diagnosticsClose.addEventListener('click', () => {
-  diagnosticsStartingAnother = false;
-  renderDiagnostics(diagnosticsState);
   closeDashboardPanel();
+  renderDiagnostics(diagnosticsState);
 });
 advancedClose.addEventListener('click', () => {
   closeDashboardPanel();
@@ -838,7 +787,7 @@ dashboardView.bindPreferences(dashboardElements, configuredBlock, updateConfig,
   openDashboardPanel(devicePanel, trigger);
 });
 
-dashboardAuthenticate.addEventListener('click', () => {
+function openAuthentication() {
   diagnosticsPanel.hidden = true;
   advancedPanel.hidden = true;
   dashboard.hidden = true;
@@ -847,6 +796,16 @@ dashboardAuthenticate.addEventListener('click', () => {
   pageTitle.textContent = messages.pageTitle;
   accountInput.focus?.();
   recordActiveUiEventBestEffort('authentication-opened');
+}
+
+dashboardAuthenticate.addEventListener('click', openAuthentication);
+
+// A saved session the plugin can no longer use stops every device, so nothing on the page works until the user
+// signs in again. The dialog says so in front of everything else, and Escape does not dismiss it.
+reauthDialog.addEventListener('cancel', (event) => event.preventDefault());
+reauthAction.addEventListener('click', () => {
+  reauthDialog.close?.();
+  openAuthentication();
 });
 
 legacyAcknowledge.addEventListener('click', async () => {
@@ -856,12 +815,19 @@ legacyAcknowledge.addEventListener('click', async () => {
     try {
       await updateConfig({ ...existing, discardedV4Settings: legacyNames, discardedV4Acknowledged: true });
     } catch {
+      legacyStatus.textContent = messages.preferenceSaveFailed ?? '';
       return;
     }
   }
   legacyNotice.hidden = true;
 });
 
+/**
+ * Writes the signed-in account into the Homebridge configuration, reporting whether it was saved.
+ *
+ * The Save button is enabled before the attempt and never disabled by it, so a write that fails leaves the user
+ * the one control that retries it.
+ */
 async function saveAuthenticatedConfig() {
   homebridge.enableSaveButton();
   try {
@@ -870,7 +836,9 @@ async function saveAuthenticatedConfig() {
     pluginConfig = [pendingConfig];
     savedConfigSignature = configSignature(pluginConfig);
     homebridge.enableSaveButton();
+    return true;
   } catch {
+    return false;
   } finally {
     passwordInput.value = '';
     pendingConfig = undefined;
@@ -890,18 +858,35 @@ 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 ?? [];
-    dashboardView.render(snapshot, configuredBlock() ?? {}, messages, dashboardElements);
+    dashboardAttention = dashboardView.render(snapshot, configuredBlock() ?? {}, messages, dashboardElements);
+    if (snapshot.state === 'authentication-required' && snapshot.devices?.length > 0 && !reauthDialog.open) {
+      reauthDialog.showModal?.();
+    }
     // The image pass runs beside the rendered dashboard, so its failure is dropped here rather than escaping.
     void dashboardView
       .applyDeviceImages(dashboardElements, (serial) => requestWithinDeadline('/device/image', { serial }, 12000))
       .catch(() => undefined);
   } catch {
-    dashboardView.render({ state: 'missing', devices: [] }, configuredBlock() ?? {}, messages, dashboardElements);
+    dashboardAttention = dashboardView.render(
+      { state: 'unreachable', devices: [] },
+      configuredBlock() ?? {},
+      messages,
+      dashboardElements,
+    );
     recordActiveUiEventBestEffort('request-failed');
   }
+  renderDiagnosticsEntries();
   recordActiveUiEventBestEffort('dashboard-opened');
 }
 
+/** The message each unsuccessful sign-in outcome is stated with; any other outcome is a failed sign-in. */
+const AUTH_OUTCOMES = {
+  blocked: 'dashboardOwnerConflictSummary',
+  'plugin-running': 'authPluginRunning',
+  'commit-failed': 'authCommitFailed',
+  'timed-out': 'authTimedOut',
+};
+
 async function handleResult(result) {
   if (result.status === 'captcha') {
     challenge = 'captcha';
@@ -910,7 +895,7 @@ async function handleResult(result) {
     challengeImage.hidden = false;
     challengeLabel.textContent = messages.captchaLabel ?? '';
     challengeForm.hidden = false;
-    authStatus.textContent = '';
+    authStatus.textContent = result.retry ? (messages.captchaRetry ?? '') : '';
     return;
   }
   if (result.status === 'two-factor') {
@@ -919,7 +904,7 @@ async function handleResult(result) {
     challengeImage.hidden = true;
     challengeLabel.textContent = messages.twoFactorLabel ?? '';
     challengeForm.hidden = false;
-    authStatus.textContent = result.method;
+    authStatus.textContent = messages.twoFactorSent ?? '';
     return;
   }
 
@@ -927,21 +912,21 @@ async function handleResult(result) {
   if (result.status === 'restart-required') {
     authForm.hidden = true;
     authStatus.textContent = messages.authSuccess ?? '';
-    await saveAuthenticatedConfig();
     // The devices this sign-in discovered are already recorded, so the flow ends on them rather than on a notice.
-    await showDashboard();
-  } else if (result.status === 'blocked' || result.status === 'plugin-running') {
-    authForm.hidden = false;
-    authStatus.textContent = messages.authBlocked ?? '';
-  } else if (result.status === 'timed-out') {
-    authForm.hidden = false;
-    authStatus.textContent = messages.authTimedOut ?? '';
+    if (await saveAuthenticatedConfig()) await showDashboard();
+    else authStatus.textContent = messages.authSaveFailed ?? '';
   } else {
     authForm.hidden = false;
-    authStatus.textContent = messages.authFailed ?? '';
+    authStatus.textContent = messages[AUTH_OUTCOMES[result.status] ?? 'authFailed'] ?? '';
   }
 }
 
+/** A sign-in request that did not come back: the page's own deadline elapsing is said to be a timeout. */
+function reportAuthRequestFailure(error) {
+  authStatus.textContent = messages[error?.message === REQUEST_TIMED_OUT ? 'authTimedOut' : 'authFailed'] ?? '';
+  recordActiveUiEventBestEffort('request-failed');
+}
+
 authForm.addEventListener('submit', async (event) => {
   event.preventDefault();
   const existing = pluginConfig.find((block) => block.platform === 'HomebridgeEufy') ?? {};
@@ -970,9 +955,8 @@ authForm.addEventListener('submit', async (event) => {
   setBusy(true);
   try {
     await handleResult(await requestWithinDeadline('/auth/start', { configuration: pendingConfig }));
-  } catch {
-    authStatus.textContent = messages.authFailed ?? '';
-    recordActiveUiEventBestEffort('request-failed');
+  } catch (error) {
+    reportAuthRequestFailure(error);
   } finally {
     setBusy(false);
   }
@@ -986,9 +970,8 @@ challengeForm.addEventListener('submit', async (event) => {
   setBusy(true);
   try {
     await handleResult(await requestWithinDeadline(path, body));
-  } catch {
-    authStatus.textContent = messages.authFailed ?? '';
-    recordActiveUiEventBestEffort('request-failed');
+  } catch (error) {
+    reportAuthRequestFailure(error);
   } finally {
     setBusy(false);
   }