feat(recovery): show bundle verification status when below threshold (#147)

When a friend opens their personalized recover.html with only their own
share loaded (below threshold), the recovery tool now shows a
verification card confirming their bundle is valid.

The card displays:
- "Your bundle is working" with a checkmark
- Which piece they hold (e.g. "piece 1 of 3")
- How many pieces are needed for recovery
- Whether the encrypted archive is pre-loaded
- A reminder to keep the bundle safe

The card appears automatically when the personalized share loads and
disappears once enough pieces are gathered for recovery.

Friends may open their bundle months or years after receiving it to
check if everything is still functional. Without a verification signal,
they have no way to confirm their piece will work when recovery is
actually needed. The existing below-threshold state just shows "waiting
for more shares" with no validation feedback.

This is especially relevant for the non-technical users rememory is
designed for. They need reassurance that their responsibility (keeping
the bundle safe) has been met.

- Built the binary with changes, sealed a 2-of-3 test project
- Extracted Alice's bundle and verified the verification-status div,
CSS, and translation keys are all embedded in recover.html
- Opened recover.html in browser and confirmed the verification card
appears with correct piece index, threshold, and manifest status
- Verified the card disappears when a second share is added (threshold
met)
- Verified manifest status line updates when manifest is loaded/cleared

![Verification card in
recover.html](https://vhs.charm.sh/vhs-4vq1N9ptnbmTJdviH0UjGG.gif)

<img width="1708" height="896" alt="CleanShot 2026-04-05 at 15 48 29@2x"
src="https://github.com/user-attachments/assets/b9e99c40-dc4f-493d-95da-e61a937cf68d"
/>

- [x] I have read [CONTRIBUTING.md](../CONTRIBUTING.md) and this PR
follows the guidelines
- [x] A human has reviewed the **entire diff** of this PR, every line of
code
- [x] A human understands the changes and can explain why this approach
is correct
- [x] Tests pass (`make full`)
- [x] This PR doesn't have AI-generated boilerplate or co-author lines
- [ ] This PR was authored and submitted by an AI agent without human
review

This contribution was developed with AI assistance.

Author: eljojo

internal/html/assets/recover.html

@@ -28,6 +28,8 @@ <h2><span class="step-number">1</span> <span data-i18n="step1_title">Gather the
 
       <div id="shares-list" class="shares-list"></div>
 
+      <div id="verification-status" class="verification-status hidden"></div>
+
       <!-- Contact list for other friends (populated via JS if personalization data exists) -->
       <div id="contact-list-section" class="contact-list-section hidden">
         <h3 data-i18n="contact_list">Contact the others</h3>

internal/html/assets/src/app.ts

@@ -114,6 +114,7 @@ type UIShare = ParsedShare & { isHolder?: boolean };
     pasteSubmitBtn: HTMLButtonElement | null;
     contactListSection: HTMLElement | null;
     contactList: HTMLElement | null;
+    verificationStatus: HTMLElement | null;
     step1Card: HTMLElement | null;
     step2Card: HTMLElement | null;
     scanQrBtn: HTMLButtonElement | null;
@@ -146,6 +147,7 @@ type UIShare = ParsedShare & { isHolder?: boolean };
     pasteSubmitBtn: document.getElementById('paste-submit-btn') as HTMLButtonElement | null,
     contactListSection: document.getElementById('contact-list-section'),
     contactList: document.getElementById('contact-list'),
+    verificationStatus: document.getElementById('verification-status'),
     step1Card: null,
     step2Card: null,
     scanQrBtn: document.getElementById('scan-qr-btn') as HTMLButtonElement | null,
@@ -1088,6 +1090,46 @@ type UIShare = ParsedShare & { isHolder?: boolean };
     }
 
     updateContactList();
+    updateVerificationStatus();
+  }
+
+  // ============================================
+  // Bundle Verification Status
+  // ============================================
+
+  function updateVerificationStatus(): void {
+    if (!elements.verificationStatus) return;
+
+    // Show verification when we have shares but haven't reached threshold yet
+    const hasShares = state.shares.length > 0;
+    const belowThreshold = state.threshold > 0 && state.shares.length < state.threshold;
+    const notRecovering = !state.recovering && !state.recoveryComplete;
+
+    if (hasShares && belowThreshold && notRecovering) {
+      const share = state.shares[0];
+      const manifestPresent = state.manifest !== null;
+
+      const manifestLine = manifestPresent
+        ? t('verification_manifest_ok')
+        : t('verification_manifest_missing');
+
+      elements.verificationStatus.innerHTML = `
+        <div class="verification-header">
+          <span>&#9989;</span> ${escapeHtml(t('verification_title'))}
+        </div>
+        <div class="verification-details">
+          <p>${escapeHtml(t('verification_piece', share.index, share.total))}</p>
+          <p>${escapeHtml(t('verification_threshold', state.threshold))}</p>
+          <p>${escapeHtml(manifestLine)}</p>
+        </div>
+        <div class="verification-note">
+          ${escapeHtml(t('verification_keep_safe'))}
+        </div>
+      `;
+      elements.verificationStatus.classList.remove('hidden');
+    } else {
+      elements.verificationStatus.classList.add('hidden');
+    }
   }
 
   // ============================================
@@ -1120,6 +1162,8 @@ type UIShare = ParsedShare & { isHolder?: boolean };
       const clearBtn = elements.manifestStatus.querySelector('.clear-manifest');
       clearBtn?.addEventListener('click', clearManifest);
     }
+
+    updateVerificationStatus();
   }
 
   function clearManifest(): void {
@@ -1129,6 +1173,7 @@ type UIShare = ParsedShare & { isHolder?: boolean };
     elements.manifestStatus?.classList.remove('loaded');
     elements.manifestDropZone?.classList.remove('hidden');
     checkRecoverReady();
+    updateVerificationStatus();
   }
 
   // ============================================

internal/html/assets/styles.css

@@ -221,6 +221,40 @@ input[type="file"] {
   font-size: 1rem;
 }
 
+.verification-status {
+  margin-top: 1rem;
+  padding: 1rem 1.25rem;
+  background: var(--success-bg);
+  border: 1px solid var(--success-border);
+  border-radius: 6px;
+  color: var(--success-text);
+  line-height: 1.5;
+}
+
+.verification-status .verification-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.verification-status .verification-details {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+}
+
+.verification-status .verification-details p {
+  margin: 0.25rem 0;
+}
+
+.verification-status .verification-note {
+  margin-top: 0.75rem;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
 .threshold-info {
   padding: 0.75rem 1rem;
   background: var(--sage-tint);

internal/translations/recover/en.json

@@ -92,5 +92,11 @@
   "tlock_error_message": "Your pieces worked, but the time lock couldn't be verified. This usually means the network request was blocked.",
   "tlock_error_guidance": "Try a different browser (Chrome works best), or download the locked archive and use the CLI tool.",
   "tlock_error_status": "Time lock check failed. Your pieces are correct — try a different browser.",
-  "tlock_download_archive": "Download locked archive"
+  "tlock_download_archive": "Download locked archive",
+  "verification_title": "Your bundle is working",
+  "verification_piece": "You hold piece {0} of {1}.",
+  "verification_threshold": "At least {0} pieces are needed for recovery.",
+  "verification_manifest_ok": "Encrypted archive is pre-loaded.",
+  "verification_manifest_missing": "The encrypted archive will need to be provided during recovery.",
+  "verification_keep_safe": "Keep this bundle somewhere safe. When the time comes, you and the others will combine your pieces to recover."
 }