From 853f6e6d67823b5a58c4d799c8c185a192e0426f Mon Sep 17 00:00:00 2001
From: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
 <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@buzz.block.builderlab.xyz>
Date: Tue, 28 Jul 2026 12:46:30 -0700
Subject: [PATCH 01/21] feat(identity): add optional Keycase backup flow

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/src-tauri/src/commands/identity.rs    |  2 +-
 desktop/src-tauri/src/key_backup.rs           |  5 +-
 desktop/src-tauri/src/key_backup_tests.rs     |  8 +-
 .../src/features/onboarding/ui/BackupStep.tsx | 60 ++++----------
 .../onboarding/ui/EncryptedBackupCreator.tsx  | 82 +++++++++++--------
 .../onboarding/ui/NostrKeyImportForm.tsx      | 17 ++--
 .../onboarding/ui/NsecMaskedDisplay.tsx       |  6 +-
 .../ui/onboardingFlowSteps.test.mjs           | 69 +---------------
 .../settings/ui/ProfileSettingsCard.tsx       | 13 ++-
 desktop/src/testing/e2eBridge.ts              |  4 +-
 desktop/tests/e2e/onboarding-backup.spec.ts   | 21 +++--
 desktop/tests/e2e/onboarding.spec.ts          |  2 +-
 12 files changed, 111 insertions(+), 178 deletions(-)

diff --git a/desktop/src-tauri/src/commands/identity.rs b/desktop/src-tauri/src/commands/identity.rs
index bb3ef796bb..b5074f4437 100644
--- a/desktop/src-tauri/src/commands/identity.rs
+++ b/desktop/src-tauri/src/commands/identity.rs
@@ -278,7 +278,7 @@ pub async fn save_ncryptsec_copy(
     let dest = match crate::commands::export_util::pick_save_path(
         &app_handle,
         crate::key_backup::BACKUP_FILE_NAME,
-        "Encrypted key backup",
+        "Keycase",
         &["ncryptsec"],
     )
     .await?
diff --git a/desktop/src-tauri/src/key_backup.rs b/desktop/src-tauri/src/key_backup.rs
index 6db9eaa385..c8b16c1569 100644
--- a/desktop/src-tauri/src/key_backup.rs
+++ b/desktop/src-tauri/src/key_backup.rs
@@ -100,7 +100,7 @@ pub fn decrypt_ncryptsec(input: &str, password: &str) -> Result<Keys, String> {
     let encrypted = parse_ncryptsec(input)?;
     let secret_key = encrypted
         .decrypt(password)
-        .map_err(|_| "wrong passphrase or corrupted backup".to_string())?;
+        .map_err(|_| "wrong Keycase password or damaged Keycase".to_string())?;
     Ok(Keys::new(secret_key))
 }
 
@@ -119,8 +119,7 @@ pub fn recover_keys_from_input(input: &str, password: Option<&str>) -> Result<Ke
         .get(..NCRYPTSEC_HRP.len())
         .is_some_and(|head| head.eq_ignore_ascii_case(NCRYPTSEC_HRP));
     if hrp_match {
-        let password =
-            password.ok_or_else(|| "encrypted backup requires a passphrase".to_string())?;
+        let password = password.ok_or_else(|| "Keycase requires a password".to_string())?;
         decrypt_ncryptsec(trimmed, password)
     } else {
         Keys::parse(trimmed).map_err(|e| format!("Invalid private key: {e}"))
diff --git a/desktop/src-tauri/src/key_backup_tests.rs b/desktop/src-tauri/src/key_backup_tests.rs
index 2f92343f23..41e8fa4872 100644
--- a/desktop/src-tauri/src/key_backup_tests.rs
+++ b/desktop/src-tauri/src/key_backup_tests.rs
@@ -41,7 +41,7 @@ fn wrong_password_is_a_friendly_error() {
     let keys = Keys::generate();
     let blob = create_backup_blob(&keys, "right password", FAST_LOG_N).unwrap();
     let err = decrypt_ncryptsec(&blob, "wrong password").unwrap_err();
-    assert_eq!(err, "wrong passphrase or corrupted backup");
+    assert_eq!(err, "wrong Keycase password or damaged Keycase");
 }
 
 #[test]
@@ -90,13 +90,13 @@ fn recover_keys_ncryptsec_happy_path() {
 #[test]
 fn recover_keys_ncryptsec_requires_password() {
     let err = recover_keys_from_input(SPEC_NCRYPTSEC, None).unwrap_err();
-    assert_eq!(err, "encrypted backup requires a passphrase");
+    assert_eq!(err, "Keycase requires a password");
 }
 
 #[test]
 fn recover_keys_ncryptsec_wrong_password() {
     let err = recover_keys_from_input(SPEC_NCRYPTSEC, Some("wrong")).unwrap_err();
-    assert_eq!(err, "wrong passphrase or corrupted backup");
+    assert_eq!(err, "wrong Keycase password or damaged Keycase");
 }
 
 /// Bech32 permits an all-uppercase encoding: `NCRYPTSEC1…` must classify as
@@ -108,7 +108,7 @@ fn recover_keys_uppercase_ncryptsec_classifies_as_encrypted() {
     let upper = SPEC_NCRYPTSEC.to_ascii_uppercase();
     // Routing proof: encrypted path demands a passphrase.
     let err = recover_keys_from_input(&upper, None).unwrap_err();
-    assert_eq!(err, "encrypted backup requires a passphrase");
+    assert_eq!(err, "Keycase requires a password");
     // With the passphrase, the bech32 decoder accepts the uppercase form.
     let keys = recover_keys_from_input(&upper, Some("nostr")).unwrap();
     assert_eq!(keys.secret_key().to_secret_hex(), SPEC_SECRET_HEX);
diff --git a/desktop/src/features/onboarding/ui/BackupStep.tsx b/desktop/src/features/onboarding/ui/BackupStep.tsx
index 4b7b176494..ddd4b1cb7e 100644
--- a/desktop/src/features/onboarding/ui/BackupStep.tsx
+++ b/desktop/src/features/onboarding/ui/BackupStep.tsx
@@ -16,29 +16,9 @@ import { NsecMaskedDisplay } from "./NsecMaskedDisplay";
 
 export type BackupStepMode = "encrypted" | "raw";
 
-/**
- * Pure helper so the disabled logic can be unit-tested without a DOM.
- *
- * Encrypted mode (default): Next unlocks once the backup blob exists — the
- * user must either create a backup or explicitly switch to the raw key.
- * Raw mode: disabled while loading or after a failed load (only the explicit
- * "Skip for now" ghost advances past an error), matching the previous flow.
- */
-export function backupNextDisabled({
-  mode,
-  hasBackup,
-  isLoading,
-  loadError,
-}: {
-  mode: BackupStepMode;
-  hasBackup: boolean;
-  isLoading: boolean;
-  loadError: string | null;
-}): boolean {
-  if (mode === "encrypted") {
-    return !hasBackup;
-  }
-  return isLoading || loadError !== null;
+/** Saving a Keycase is recommended, never required to continue onboarding. */
+export function backupNextDisabled(): boolean {
+  return false;
 }
 
 type BackupStepProps = {
@@ -48,14 +28,11 @@ type BackupStepProps = {
 };
 
 /**
- * Onboarding backup step — encrypted by default. The user protects their
- * freshly created key with a passphrase and gets a NIP-49 `ncryptsec1…`
- * backup; the raw key is only fetched (and shown) after an explicit
- * "Show raw key instead" click. The default path never invokes `get_nsec`.
+ * Onboarding backup step — recommends a portable Keycase without blocking
+ * setup. The raw key is fetched only after the user chooses the advanced path.
  */
 export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
   const [mode, setMode] = React.useState<BackupStepMode>("encrypted");
-  const [hasBackup, setHasBackup] = React.useState(false);
   const [nsec, setNsec] = React.useState<string | null>(null);
   const [isLoading, setIsLoading] = React.useState(false);
   const [loadError, setLoadError] = React.useState<string | null>(null);
@@ -103,11 +80,11 @@ export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
     >
       <div className="flex w-full max-w-[500px] shrink-0 flex-col text-center">
         <h1 className="text-title font-normal text-foreground">
-          Your unique identity key has been created
+          Account created!
         </h1>
         <p className="mt-5 text-sm leading-6 text-foreground/80">
           {mode === "encrypted"
-            ? "Protect it with a passphrase and keep an encrypted backup in case you ever need to restore your account."
+            ? "Buzz keeps your identity in the system keychain. Save a portable, password-protected Keycase in case you need to restore it elsewhere."
             : "This key is stored in your system keychain, but save it some place safe in case you ever need to restore your account."}
         </p>
       </div>
@@ -116,10 +93,14 @@ export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
         {mode === "encrypted" ? (
           <Card className="w-full px-8 py-6" variant="textured">
             <div className="mx-auto w-full max-w-[832px]">
-              <EncryptedBackupCreator
-                onCreated={() => setHasBackup(true)}
-                variant="spotlight"
-              />
+              <div className="mb-5 space-y-2 text-center">
+                <h2 className="text-lg font-medium">Save a Keycase</h2>
+                <p className="text-xs leading-5 text-muted-foreground">
+                  A Keycase is still private. Never publish or share it. You
+                  need both the file and password to restore your identity.
+                </p>
+              </div>
+              <EncryptedBackupCreator variant="spotlight" />
             </div>
           </Card>
         ) : isLoading ? (
@@ -164,7 +145,7 @@ export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
           </p>
         )}
 
-        {mode === "encrypted" && !hasBackup ? (
+        {mode === "encrypted" ? (
           <div className="mt-4 flex justify-center">
             <Button
               className="h-8 text-sm text-muted-foreground hover:text-accent-foreground"
@@ -174,7 +155,7 @@ export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
               type="button"
               variant="ghost"
             >
-              Show raw key instead
+              Advanced: show my private key instead
             </Button>
           </div>
         ) : null}
@@ -194,12 +175,7 @@ export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
         <Button
           className={ONBOARDING_PRIMARY_CTA_CLASS}
           data-testid="onboarding-next"
-          disabled={backupNextDisabled({
-            mode,
-            hasBackup,
-            isLoading,
-            loadError,
-          })}
+          disabled={backupNextDisabled()}
           onClick={onNext}
           type="button"
         >
diff --git a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
index ced5e9e449..5433d94459 100644
--- a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
+++ b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
@@ -23,22 +23,18 @@ import { NsecMaskedDisplay } from "./NsecMaskedDisplay";
 type EncryptedBackupCreatorProps = {
   /** "spotlight" is the onboarding treatment; "boxed" fits settings cards. */
   variant?: "spotlight" | "boxed";
-  /** Fired once the backup blob exists (hosts gate Next / show toasts). */
-  onCreated?: (ncryptsec: string) => void;
+  /** Fired only after the portable Keycase has been saved successfully. */
+  onSaved?: (path: string) => void;
 };
 
 /**
- * Passphrase-first NIP-49 backup creation flow, shared by the onboarding
- * BackupStep and the settings Password Backup row.
- *
- * The raw private key never enters this component: it collects a passphrase,
- * asks Rust to create + persist the encrypted backup, and displays the
- * returned `ncryptsec1…` blob. A generated 6-word passphrase is the default;
- * "choose my own" requires ≥12 characters plus confirmation.
+ * Password-first Keycase creation flow shared by onboarding and Settings.
+ * The raw private key never enters this component. Rust creates the NIP-49
+ * payload locally, then the native save dialog produces the user-owned file.
  */
 export function EncryptedBackupCreator({
   variant = "spotlight",
-  onCreated,
+  onSaved,
 }: EncryptedBackupCreatorProps) {
   const [state, dispatch] = React.useReducer(
     encryptedBackupReducer,
@@ -61,7 +57,7 @@ export function EncryptedBackupCreator({
           message:
             err instanceof Error
               ? err.message
-              : "Failed to generate a passphrase.",
+              : "Failed to generate a Keycase password.",
         });
     }
   }, []);
@@ -82,16 +78,31 @@ export function EncryptedBackupCreator({
       const ncryptsec = await createNcryptsecBackup(passphrase);
       if (!mountedRef.current) return;
       dispatch({ type: "create-succeeded", ncryptsec });
-      onCreated?.(ncryptsec);
+      setIsSaving(true);
+      setSaveError(null);
+      try {
+        const path = await saveNcryptsecCopy(ncryptsec);
+        if (mountedRef.current && path) {
+          setSavedPath(path);
+          onSaved?.(path);
+        }
+      } catch (err) {
+        if (mountedRef.current)
+          setSaveError(
+            err instanceof Error ? err.message : "Failed to save Keycase.",
+          );
+      } finally {
+        if (mountedRef.current) setIsSaving(false);
+      }
     } catch (err) {
       if (mountedRef.current)
         dispatch({
           type: "create-failed",
           message:
-            err instanceof Error ? err.message : "Failed to create backup.",
+            err instanceof Error ? err.message : "Failed to create Keycase.",
         });
     }
-  }, [onCreated, state]);
+  }, [onSaved, state]);
 
   const handleSaveCopy = React.useCallback(async () => {
     if (!state.ncryptsec || isSaving) return;
@@ -99,16 +110,19 @@ export function EncryptedBackupCreator({
     setSaveError(null);
     try {
       const path = await saveNcryptsecCopy(state.ncryptsec);
-      if (mountedRef.current && path) setSavedPath(path);
+      if (mountedRef.current && path) {
+        setSavedPath(path);
+        onSaved?.(path);
+      }
     } catch (err) {
       if (mountedRef.current)
         setSaveError(
-          err instanceof Error ? err.message : "Failed to save a copy.",
+          err instanceof Error ? err.message : "Failed to save Keycase.",
         );
     } finally {
       if (mountedRef.current) setIsSaving(false);
     }
-  }, [isSaving, state.ncryptsec]);
+  }, [isSaving, onSaved, state.ncryptsec]);
 
   const isSpotlight = variant === "spotlight";
   const customIssue = customPassphraseIssue(
@@ -135,14 +149,14 @@ export function EncryptedBackupCreator({
             variant="outline"
           >
             {isSaving ? <Spinner className="h-3.5 w-3.5 border-2" /> : null}
-            Save a copy…
+            Save Keycase…
           </Button>
           {savedPath ? (
             <p
               className="text-xs text-muted-foreground"
               data-testid="encrypted-backup-saved-path"
             >
-              Saved to {savedPath}
+              Keycase saved to {savedPath}
             </p>
           ) : null}
         </div>
@@ -150,8 +164,8 @@ export function EncryptedBackupCreator({
           <p className="text-center text-sm text-destructive">{saveError}</p>
         ) : null}
         <p className="text-center text-xs leading-5 text-muted-foreground">
-          This backup can only be unlocked with your passphrase. Without the
-          passphrase it cannot be recovered — not even by Buzz.
+          Keep this Keycase private. You need both the file and its password to
+          restore your identity. Buzz cannot reset the password.
         </p>
       </div>
     );
@@ -180,13 +194,13 @@ export function EncryptedBackupCreator({
             >
               <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
               <span>
-                Could not generate a passphrase: {state.generateError}
+                Could not generate a Keycase password: {state.generateError}
               </span>
             </div>
           ) : (
             <div className="flex items-center justify-center gap-2 py-4 text-sm text-foreground/70">
               <Spinner className="h-4 w-4 border-2" />
-              Generating a passphrase…
+              Generating a password…
             </div>
           )}
           <div className="flex items-center justify-center gap-3">
@@ -199,7 +213,7 @@ export function EncryptedBackupCreator({
               variant="outline"
             >
               <RefreshCw className="h-3.5 w-3.5" />
-              New passphrase
+              New generated password
             </Button>
             <Button
               className="h-8 text-sm text-muted-foreground hover:text-accent-foreground"
@@ -213,15 +227,15 @@ export function EncryptedBackupCreator({
             </Button>
           </div>
           <p className="text-center text-xs leading-5 text-muted-foreground">
-            Write this passphrase down. It protects your backup and cannot be
-            recovered if lost.
+            Save this generated passphrase as your Keycase password. Store it
+            separately from the private Keycase file.
           </p>
         </div>
       ) : (
         <div className="space-y-3">
           <div className="space-y-2">
             <Input
-              aria-label="Backup passphrase"
+              aria-label="Keycase password"
               autoComplete="new-password"
               className="h-10 bg-background"
               data-testid="backup-passphrase-custom"
@@ -231,12 +245,12 @@ export function EncryptedBackupCreator({
                   value: event.target.value,
                 })
               }
-              placeholder={`Passphrase (min ${MIN_CUSTOM_PASSPHRASE_LEN} characters)`}
+              placeholder={`Password (min ${MIN_CUSTOM_PASSPHRASE_LEN} characters)`}
               type="password"
               value={state.customPassphrase}
             />
             <Input
-              aria-label="Confirm backup passphrase"
+              aria-label="Confirm Keycase password"
               autoComplete="new-password"
               className="h-10 bg-background"
               data-testid="backup-passphrase-confirm"
@@ -246,7 +260,7 @@ export function EncryptedBackupCreator({
                   value: event.target.value,
                 })
               }
-              placeholder="Confirm passphrase"
+              placeholder="Confirm password"
               type="password"
               value={state.customConfirm}
             />
@@ -268,11 +282,11 @@ export function EncryptedBackupCreator({
               type="button"
               variant="ghost"
             >
-              Use a generated passphrase
+              Use a generated password
             </Button>
           </div>
           <p className="text-center text-xs leading-5 text-muted-foreground">
-            Your passphrase protects the backup and cannot be recovered if lost.
+            Your password protects the Keycase. Buzz cannot reset it if lost.
           </p>
         </div>
       )}
@@ -297,10 +311,10 @@ export function EncryptedBackupCreator({
           {state.isCreating ? (
             <>
               <Spinner className="h-4 w-4 border-2" />
-              Encrypting… this takes a couple of seconds
+              Creating Keycase… this takes a couple of seconds
             </>
           ) : (
-            "Create encrypted backup"
+            "Create Keycase"
           )}
         </Button>
       </div>
diff --git a/desktop/src/features/onboarding/ui/NostrKeyImportForm.tsx b/desktop/src/features/onboarding/ui/NostrKeyImportForm.tsx
index dfa68e7d5b..90eb1f368a 100644
--- a/desktop/src/features/onboarding/ui/NostrKeyImportForm.tsx
+++ b/desktop/src/features/onboarding/ui/NostrKeyImportForm.tsx
@@ -96,7 +96,7 @@ export function NostrKeyImportForm({
 
     if (file.size > NOSTR_KEY_FILE_MAX_BYTES) {
       setImportError(
-        "That file is too large to be a key. Choose a .key or .ncryptsec backup file, or paste your key.",
+        "That file is too large to be a Keycase or private key. Choose another file.",
       );
       return;
     }
@@ -126,7 +126,7 @@ export function NostrKeyImportForm({
     if (!isValid) {
       setImportError(
         isEncryptedInput
-          ? "Enter the passphrase for this encrypted backup."
+          ? "Enter the password for this Keycase."
           : "That doesn't look like a valid nsec. Paste an nsec1 key.",
       );
       return;
@@ -244,7 +244,7 @@ export function NostrKeyImportForm({
       </div>
 
       {/* Hidden file input shared by both variants: the default drop zone and
-          the spotlight "Import from a file" button both open it. Accepts the
+          the spotlight "Use a Keycase" button both open it. Accepts the
           .ncryptsec archives our own save flow emits alongside raw .key files. */}
       <input
         accept=".key,.ncryptsec,text/plain"
@@ -273,7 +273,7 @@ export function NostrKeyImportForm({
             type="button"
             variant="ghost"
           >
-            Import from a file
+            Use a Keycase
           </Button>
         </div>
       ) : (
@@ -358,7 +358,7 @@ export function NostrKeyImportForm({
             className="text-sm font-medium text-foreground"
             htmlFor="nostr-import-passphrase"
           >
-            Backup passphrase
+            Keycase password
           </label>
           <Input
             autoComplete="off"
@@ -370,11 +370,14 @@ export function NostrKeyImportForm({
               setPassphrase(event.target.value);
               setImportError(null);
             }}
-            placeholder="Passphrase"
+            placeholder="Password"
             spellCheck={false}
             type="password"
             value={passphrase}
           />
+          <p className="text-xs leading-5 text-muted-foreground">
+            Your Keycase and password stay on this device.
+          </p>
         </div>
       ) : null}
 
@@ -393,7 +396,7 @@ export function NostrKeyImportForm({
             data-testid="nostr-import-encrypted-badge"
           >
             <KeyRound aria-hidden="true" className="h-4 w-4 shrink-0" />
-            Encrypted key backup — enter its passphrase to import
+            Keycase · Private — enter its password to restore
           </p>
         ) : previewNpub ? (
           variant === "spotlight" ? (
diff --git a/desktop/src/features/onboarding/ui/NsecMaskedDisplay.tsx b/desktop/src/features/onboarding/ui/NsecMaskedDisplay.tsx
index df4536ef1d..1dda9b5e22 100644
--- a/desktop/src/features/onboarding/ui/NsecMaskedDisplay.tsx
+++ b/desktop/src/features/onboarding/ui/NsecMaskedDisplay.tsx
@@ -9,8 +9,8 @@ type NsecMaskedDisplayProps = {
   variant?: "boxed" | "bare";
   /**
    * What kind of secret is displayed. Drives labels, aria and testids:
-   * a raw private key ("nsec", default) can impersonate its holder; an
-   * encrypted backup ("ncryptsec") is only as sensitive as its passphrase.
+   * a raw private key ("nsec", default) can impersonate its holder; a
+   * Keycase ("ncryptsec") is only as sensitive as its passphrase.
    */
   kind?: "nsec" | "ncryptsec";
   /**
@@ -26,7 +26,7 @@ const KIND_LABELS = {
     testIdPrefix: "nsec",
   },
   ncryptsec: {
-    noun: "encrypted backup",
+    noun: "Keycase",
     testIdPrefix: "ncryptsec",
   },
 } as const;
diff --git a/desktop/src/features/onboarding/ui/onboardingFlowSteps.test.mjs b/desktop/src/features/onboarding/ui/onboardingFlowSteps.test.mjs
index 720741eff1..c28be13864 100644
--- a/desktop/src/features/onboarding/ui/onboardingFlowSteps.test.mjs
+++ b/desktop/src/features/onboarding/ui/onboardingFlowSteps.test.mjs
@@ -53,74 +53,11 @@ test("currentStep_falls_back_to_1_for_pages_outside_the_step_list", () => {
 });
 
 // ---------------------------------------------------------------------------
-// BackupStep gating: backupNextDisabled() pure helper
+// BackupStep gating: saving a Keycase is recommended, not required
 // ---------------------------------------------------------------------------
 
-test("backup_next_disabled_in_encrypted_mode_until_backup_exists", () => {
-  // Encrypted (default) mode: the user must create a backup — or explicitly
-  // switch to the raw key — before Next unlocks. Loading/error state belongs
-  // to the raw path and must not leak into the encrypted gate.
-  assert.equal(
-    backupNextDisabled({
-      mode: "encrypted",
-      hasBackup: false,
-      isLoading: false,
-      loadError: null,
-    }),
-    true,
-  );
-});
-
-test("backup_next_enabled_in_encrypted_mode_once_backup_created", () => {
-  assert.equal(
-    backupNextDisabled({
-      mode: "encrypted",
-      hasBackup: true,
-      isLoading: false,
-      loadError: null,
-    }),
-    false,
-  );
-});
-
-test("backup_next_disabled_while_loading_raw_key", () => {
-  // During a slow keychain read, Next must be blocked — user cannot race past
-  // the key display before it is shown.
-  assert.equal(
-    backupNextDisabled({
-      mode: "raw",
-      hasBackup: false,
-      isLoading: true,
-      loadError: null,
-    }),
-    true,
-  );
-});
-
-test("backup_next_disabled_on_raw_load_error", () => {
-  // Error state: only the explicit "Skip for now" ghost advances; Next blocked.
-  assert.equal(
-    backupNextDisabled({
-      mode: "raw",
-      hasBackup: false,
-      isLoading: false,
-      loadError: "IPC error",
-    }),
-    true,
-  );
-});
-
-test("backup_next_enabled_after_clean_raw_load", () => {
-  // Key shown (or backend cleanly returned none) — user may proceed.
-  assert.equal(
-    backupNextDisabled({
-      mode: "raw",
-      hasBackup: false,
-      isLoading: false,
-      loadError: null,
-    }),
-    false,
-  );
+test("backup_next_is_always_enabled", () => {
+  assert.equal(backupNextDisabled(), false);
 });
 
 // ---------------------------------------------------------------------------
diff --git a/desktop/src/features/settings/ui/ProfileSettingsCard.tsx b/desktop/src/features/settings/ui/ProfileSettingsCard.tsx
index 5326243ff4..bec4d2e4ae 100644
--- a/desktop/src/features/settings/ui/ProfileSettingsCard.tsx
+++ b/desktop/src/features/settings/ui/ProfileSettingsCard.tsx
@@ -178,7 +178,7 @@ function NsecRevealRow() {
 }
 
 /**
- * Collapsible row for creating an encrypted NIP-49 backup on demand. The raw
+ * Collapsible row for saving a portable Keycase on demand. The raw
  * private key never reaches this flow — the passphrase goes to Rust, which
  * returns the persisted `ncryptsec1…` blob.
  */
@@ -189,9 +189,10 @@ function EncryptedBackupRow() {
     <div className="px-4 py-3" data-testid="profile-encrypted-backup-row">
       <div className="flex items-center justify-between gap-4">
         <div className="min-w-0 space-y-1">
-          <p className="text-sm font-medium">Password Backup</p>
+          <p className="text-sm font-medium">Keycase</p>
           <p className="text-sm text-muted-foreground">
-            Protect your key with a password and save a recoverable backup.
+            Save a portable, password-protected copy of your identity. Keep it
+            private.
           </p>
         </div>
         <button
@@ -201,12 +202,16 @@ function EncryptedBackupRow() {
           onClick={() => setIsOpen((open) => !open)}
           type="button"
         >
-          {isOpen ? "Close" : "Create"}
+          {isOpen ? "Close" : "Save a new Keycase"}
         </button>
       </div>
       {isOpen ? (
         <div className="mt-3">
           <EncryptedBackupCreator variant="boxed" />
+          <p className="mt-3 text-xs leading-5 text-muted-foreground">
+            Buzz cannot reset the password. Saving a new Keycase does not
+            invalidate copies you saved before.
+          </p>
         </div>
       ) : null}
     </div>
diff --git a/desktop/src/testing/e2eBridge.ts b/desktop/src/testing/e2eBridge.ts
index 741e575736..c376f62662 100644
--- a/desktop/src/testing/e2eBridge.ts
+++ b/desktop/src/testing/e2eBridge.ts
@@ -9608,7 +9608,7 @@ export function maybeInstallE2eTauriMocks() {
       case "save_ncryptsec_copy": {
         const blob = (payload as { ncryptsec?: string } | null)?.ncryptsec;
         if (!blob?.startsWith("ncryptsec1")) {
-          throw new Error("Not a valid encrypted key backup.");
+          throw new Error("Not a valid Keycase.");
         }
         // Production opens a native save dialog; the harness pretends the
         // user picked a path.
@@ -9644,7 +9644,7 @@ export function maybeInstallE2eTauriMocks() {
             input.trim() !== MOCK_NCRYPTSEC ||
             request?.password !== MOCK_BACKUP_PASSPHRASE
           ) {
-            throw new Error("Wrong passphrase or corrupted backup.");
+            throw new Error("Wrong Keycase password or damaged Keycase.");
           }
           mockIdentityLostCleared = true;
           mockIdentityLockedCleared = true;
diff --git a/desktop/tests/e2e/onboarding-backup.spec.ts b/desktop/tests/e2e/onboarding-backup.spec.ts
index 167e274bf3..e123e00793 100644
--- a/desktop/tests/e2e/onboarding-backup.spec.ts
+++ b/desktop/tests/e2e/onboarding-backup.spec.ts
@@ -21,31 +21,31 @@ test("backup step appears on fresh-key path after profile submit", async ({
   await expect(page.getByTestId("onboarding-page-backup")).toBeVisible();
   await expect(
     page.getByRole("heading", {
-      name: "Your unique identity key has been created",
+      name: "Account created!",
     }),
   ).toBeVisible();
 });
 
 // ---------------------------------------------------------------------------
-// Encrypted-by-default path (plan D3): passphrase → create → ncryptsec shown.
+// Keycase path: password → create locally → native save → saved confirmation.
 // The raw key must never be fetched on this path.
 // ---------------------------------------------------------------------------
 
-test("encrypted backup happy path: generated passphrase, create, save copy, Next", async ({
+test("Keycase happy path: generated password, create, native save, Next", async ({
   page,
 }) => {
   await enterMachineBackup(page);
 
-  // Default mode: generated passphrase shown, Next locked until backup exists.
+  // Default mode: generated password shown, but backup remains optional.
   await expect(page.getByTestId("backup-passphrase-generated")).toBeVisible();
-  await expect(page.getByTestId("onboarding-next")).toBeDisabled();
+  await expect(page.getByTestId("onboarding-next")).toBeEnabled();
 
   await waitForAnimations(page);
   await page.screenshot({ path: `${SHOTS}/02-backup-step-passphrase.png` });
 
   await page.getByTestId("encrypted-backup-create").click();
 
-  // The persisted blob is displayed masked; copy + save-a-copy available.
+  // The locally created blob stays masked; the portable save action is explicit.
   const blob = page.getByTestId("ncryptsec-value");
   await expect(blob).toBeVisible();
   await expect(blob).toHaveCSS("filter", /blur/);
@@ -55,7 +55,6 @@ test("encrypted backup happy path: generated passphrase, create, save copy, Next
   await waitForAnimations(page);
   await page.screenshot({ path: `${SHOTS}/03-backup-step-encrypted.png` });
 
-  await page.getByTestId("encrypted-backup-save-copy").click();
   await expect(page.getByTestId("encrypted-backup-saved-path")).toContainText(
     "identity.ncryptsec",
   );
@@ -98,7 +97,7 @@ test("custom passphrase requires 12 characters and confirmation", async ({
 });
 
 // ---------------------------------------------------------------------------
-// Raw-key path: preserved behind an explicit "Show raw key instead" click.
+// Raw-key path: preserved behind one explicit advanced action.
 // ---------------------------------------------------------------------------
 
 test("raw key path is one explicit click away and shows the masked nsec", async ({
@@ -124,7 +123,7 @@ test("raw key path is one explicit click away and shows the masked nsec", async
   await waitForAnimations(page);
   await page.screenshot({ path: `${SHOTS}/04-backup-step-raw-revealed.png` });
 
-  // Raw mode keeps the previous gating: key shown → Next enabled.
+  // Next remains enabled on the advanced raw-key path.
   await expect(page.getByTestId("onboarding-next")).toBeEnabled();
   await page.getByTestId("onboarding-next").click();
   await expect(page.getByTestId("onboarding-page-2")).toBeVisible();
@@ -168,8 +167,8 @@ test("raw path shows error banner and retry button when get_nsec fails", async (
 
   await expect(page.getByTestId("backup-load-error")).toBeVisible();
   await expect(page.getByTestId("backup-retry")).toBeVisible();
-  // Next is blocked on error; Skip for now ghost is shown instead.
-  await expect(page.getByTestId("onboarding-next")).toBeDisabled();
+  // Keychain failure does not trap the user; both Next and explicit skip work.
+  await expect(page.getByTestId("onboarding-next")).toBeEnabled();
   await expect(page.getByTestId("backup-skip")).toBeVisible();
 
   // Skip for now still advances to machine setup.
diff --git a/desktop/tests/e2e/onboarding.spec.ts b/desktop/tests/e2e/onboarding.spec.ts
index d827654960..0cf08f9be6 100644
--- a/desktop/tests/e2e/onboarding.spec.ts
+++ b/desktop/tests/e2e/onboarding.spec.ts
@@ -645,7 +645,7 @@ test("first-launch encrypted backup import asks for a passphrase and continues",
   await page.getByTestId("nostr-import-passphrase").fill("wrong passphrase");
   await page.getByTestId("nostr-import-submit").click();
   await expect(page.getByTestId("nostr-import-feedback")).toContainText(
-    /wrong passphrase/i,
+    /wrong Keycase password/i,
   );
 
   await page

From e63562dcbced6ad100ebe092fd5c9ef223463d6f Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Tue, 28 Jul 2026 13:11:35 -0700
Subject: [PATCH 02/21] feat(onboarding): add perceived key-creation loading
 state to backup step

- BackupStep.tsx: replace the static "Account created!" landing with a
  two-phase intro driven by a 1.4s timer (INTRO_HOLD_MS):
  - Loading phase: title "Creating your identity key" with the animated
    FuzzyLogo mark rendered in place of the body content; description,
    Keycase card, and footer CTAs are withheld
  - Finished phase: title swaps to "Your unique identity key has been
    created" with new copy ("Your identity key will be saved to your
    keychain. Back it up somewhere safe so you can restore your account.
    Never share your key."), and the Keycase flow + footer fade in via
    animate-in fade-in (700ms, disabled under prefers-reduced-motion)
- Unify the previously mode-dependent (encrypted vs raw) header copy into
  the single new description string
- Use plain string concat for the h1 classes: cn()'s tailwind-merge
  misreads the custom text-title size token as conflicting with
  text-foreground and drops it
- onboarding-backup.spec.ts: assert the loading -> finished title/logo
  sequence, and wait for the intro logo to unmount before screenshots so
  captures are deterministic

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../src/features/onboarding/ui/BackupStep.tsx | 266 +++++++++++-------
 desktop/tests/e2e/onboarding-backup.spec.ts   |  16 +-
 2 files changed, 175 insertions(+), 107 deletions(-)

diff --git a/desktop/src/features/onboarding/ui/BackupStep.tsx b/desktop/src/features/onboarding/ui/BackupStep.tsx
index ddd4b1cb7e..aecc128ddd 100644
--- a/desktop/src/features/onboarding/ui/BackupStep.tsx
+++ b/desktop/src/features/onboarding/ui/BackupStep.tsx
@@ -2,7 +2,9 @@ import { AlertTriangle, Info, RefreshCw } from "lucide-react";
 import * as React from "react";
 
 import { getNsec } from "@/shared/api/tauriIdentity";
+import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
+import { FuzzyLogo } from "@/shared/ui/buzz-logo/FuzzyLogo";
 import { Card } from "@/shared/ui/card";
 import { Spinner } from "@/shared/ui/spinner";
 import { ONBOARDING_PRIMARY_CTA_CLASS } from "./OnboardingChrome";
@@ -16,6 +18,16 @@ import { NsecMaskedDisplay } from "./NsecMaskedDisplay";
 
 export type BackupStepMode = "encrypted" | "raw";
 
+/**
+ * How long the "Creating your identity key" loader holds the stage before the
+ * finished state fades in. Purely perceptual — the key already exists; the
+ * pause sells the creation moment.
+ */
+const INTRO_HOLD_MS = 1400;
+
+const REVEAL_ANIMATION_CLASS =
+  "animate-in fade-in duration-700 motion-reduce:animate-none";
+
 /** Saving a Keycase is recommended, never required to continue onboarding. */
 export function backupNextDisabled(): boolean {
   return false;
@@ -36,8 +48,14 @@ export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
   const [nsec, setNsec] = React.useState<string | null>(null);
   const [isLoading, setIsLoading] = React.useState(false);
   const [loadError, setLoadError] = React.useState<string | null>(null);
+  const [created, setCreated] = React.useState(false);
   const cancelledRef = React.useRef(false);
 
+  React.useEffect(() => {
+    const timer = window.setTimeout(() => setCreated(true), INTRO_HOLD_MS);
+    return () => window.clearTimeout(timer);
+  }, []);
+
   const loadNsec = React.useCallback(async () => {
     setIsLoading(true);
     setLoadError(null);
@@ -79,131 +97,167 @@ export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
       transitionKey={`backup-${direction}`}
     >
       <div className="flex w-full max-w-[500px] shrink-0 flex-col text-center">
-        <h1 className="text-title font-normal text-foreground">
-          Account created!
+        {/* Plain string concat: cn()'s tailwind-merge misreads the custom
+            text-title size token as conflicting with text-foreground. */}
+        <h1
+          className={`text-title font-normal text-foreground ${REVEAL_ANIMATION_CLASS}`}
+          key={created ? "created" : "creating"}
+        >
+          {created
+            ? "Your unique identity key has been created"
+            : "Creating your identity key"}
         </h1>
-        <p className="mt-5 text-sm leading-6 text-foreground/80">
-          {mode === "encrypted"
-            ? "Buzz keeps your identity in the system keychain. Save a portable, password-protected Keycase in case you need to restore it elsewhere."
-            : "This key is stored in your system keychain, but save it some place safe in case you ever need to restore your account."}
-        </p>
+        {created ? (
+          <p
+            className={cn(
+              "mt-5 text-sm leading-6 text-foreground/80",
+              REVEAL_ANIMATION_CLASS,
+            )}
+          >
+            Your identity key will be saved to your keychain. Back it up
+            somewhere safe so you can restore your account. Never share your
+            key.
+          </p>
+        ) : null}
       </div>
 
-      <div className="flex w-full max-w-[1040px] flex-1 flex-col justify-center py-10">
-        {mode === "encrypted" ? (
-          <Card className="w-full px-8 py-6" variant="textured">
-            <div className="mx-auto w-full max-w-[832px]">
-              <div className="mb-5 space-y-2 text-center">
-                <h2 className="text-lg font-medium">Save a Keycase</h2>
-                <p className="text-xs leading-5 text-muted-foreground">
-                  A Keycase is still private. Never publish or share it. You
-                  need both the file and password to restore your identity.
-                </p>
+      {!created ? (
+        <div
+          className="flex w-full flex-1 items-center justify-center py-10"
+          data-testid="backup-intro-logo"
+        >
+          <FuzzyLogo
+            ariaLabel="Creating your identity key"
+            className="w-20! text-foreground"
+            fuzz
+            loop
+            loopRestSeconds={0}
+          />
+        </div>
+      ) : (
+        <div
+          className={cn(
+            "flex w-full max-w-[1040px] flex-1 flex-col justify-center py-10",
+            REVEAL_ANIMATION_CLASS,
+          )}
+        >
+          {mode === "encrypted" ? (
+            <Card className="w-full px-8 py-6" variant="textured">
+              <div className="mx-auto w-full max-w-[832px]">
+                <div className="mb-5 space-y-2 text-center">
+                  <h2 className="text-lg font-medium">Save a Keycase</h2>
+                  <p className="text-xs leading-5 text-muted-foreground">
+                    A Keycase is still private. Never publish or share it. You
+                    need both the file and password to restore your identity.
+                  </p>
+                </div>
+                <EncryptedBackupCreator variant="spotlight" />
               </div>
-              <EncryptedBackupCreator variant="spotlight" />
+            </Card>
+          ) : isLoading ? (
+            <div className="flex items-center justify-center gap-2 py-6 text-sm text-foreground/70">
+              <Spinner className="h-4 w-4 border-2" />
+              Loading your private key…
             </div>
-          </Card>
-        ) : isLoading ? (
-          <div className="flex items-center justify-center gap-2 py-6 text-sm text-foreground/70">
-            <Spinner className="h-4 w-4 border-2" />
-            Loading your private key…
-          </div>
-        ) : loadError ? (
-          <div className="mx-auto max-w-[500px] space-y-3 text-left">
-            <div
-              className="flex items-start gap-3 rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive"
-              data-testid="backup-load-error"
-            >
-              <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
-              <span>
-                Could not retrieve your private key: {loadError}. You can
-                continue and find it later in Settings &gt; Profile &gt;
-                Identity.
-              </span>
+          ) : loadError ? (
+            <div className="mx-auto max-w-[500px] space-y-3 text-left">
+              <div
+                className="flex items-start gap-3 rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive"
+                data-testid="backup-load-error"
+              >
+                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+                <span>
+                  Could not retrieve your private key: {loadError}. You can
+                  continue and find it later in Settings &gt; Profile &gt;
+                  Identity.
+                </span>
+              </div>
+              <Button
+                className="h-8 gap-1.5 text-sm"
+                data-testid="backup-retry"
+                onClick={() => void loadNsec()}
+                size="sm"
+                type="button"
+                variant="outline"
+              >
+                <RefreshCw className="h-3.5 w-3.5" />
+                Try again
+              </Button>
             </div>
-            <Button
-              className="h-8 gap-1.5 text-sm"
-              data-testid="backup-retry"
-              onClick={() => void loadNsec()}
-              size="sm"
-              type="button"
-              variant="outline"
-            >
-              <RefreshCw className="h-3.5 w-3.5" />
-              Try again
-            </Button>
-          </div>
-        ) : nsec ? (
-          <Card className="w-full px-8 py-6" variant="textured">
-            <div className="mx-auto w-full max-w-[832px]">
-              <NsecMaskedDisplay nsec={nsec} variant="bare" />
+          ) : nsec ? (
+            <Card className="w-full px-8 py-6" variant="textured">
+              <div className="mx-auto w-full max-w-[832px]">
+                <NsecMaskedDisplay nsec={nsec} variant="bare" />
+              </div>
+            </Card>
+          ) : (
+            <p className="text-center text-sm text-foreground/70">
+              No key available to back up.
+            </p>
+          )}
+
+          {mode === "encrypted" ? (
+            <div className="mt-4 flex justify-center">
+              <Button
+                className="h-8 text-sm text-muted-foreground hover:text-accent-foreground"
+                data-testid="backup-show-raw-key"
+                onClick={showRawKey}
+                size="sm"
+                type="button"
+                variant="ghost"
+              >
+                Advanced: show my private key instead
+              </Button>
             </div>
-          </Card>
-        ) : (
-          <p className="text-center text-sm text-foreground/70">
-            No key available to back up.
-          </p>
-        )}
+          ) : null}
+
+          {mode === "raw" && nsec ? (
+            <p className="mx-auto mt-6 flex max-w-[440px] items-start justify-center gap-1.5 text-center text-xs leading-5 text-[var(--buzz-onboarding-backup-ink)]">
+              <Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+              <span>
+                Never share your private key. Anyone with this key can
+                impersonate you and access everything in your account.
+              </span>
+            </p>
+          ) : null}
+        </div>
+      )}
+
+      {created ? (
+        <OnboardingFooter className={REVEAL_ANIMATION_CLASS}>
+          <Button
+            className={ONBOARDING_PRIMARY_CTA_CLASS}
+            data-testid="onboarding-next"
+            disabled={backupNextDisabled()}
+            onClick={onNext}
+            type="button"
+          >
+            Next
+          </Button>
 
-        {mode === "encrypted" ? (
-          <div className="mt-4 flex justify-center">
+          {mode === "raw" && loadError ? (
             <Button
-              className="h-8 text-sm text-muted-foreground hover:text-accent-foreground"
-              data-testid="backup-show-raw-key"
-              onClick={showRawKey}
-              size="sm"
+              className="h-9 rounded-full px-5 text-muted-foreground hover:text-accent-foreground"
+              data-testid="backup-skip"
+              onClick={onNext}
               type="button"
               variant="ghost"
             >
-              Advanced: show my private key instead
+              Skip for now
             </Button>
-          </div>
-        ) : null}
-
-        {mode === "raw" && nsec ? (
-          <p className="mx-auto mt-6 flex max-w-[440px] items-start justify-center gap-1.5 text-center text-xs leading-5 text-[var(--buzz-onboarding-backup-ink)]">
-            <Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
-            <span>
-              Never share your private key. Anyone with this key can impersonate
-              you and access everything in your account.
-            </span>
-          </p>
-        ) : null}
-      </div>
+          ) : null}
 
-      <OnboardingFooter>
-        <Button
-          className={ONBOARDING_PRIMARY_CTA_CLASS}
-          data-testid="onboarding-next"
-          disabled={backupNextDisabled()}
-          onClick={onNext}
-          type="button"
-        >
-          Next
-        </Button>
-
-        {mode === "raw" && loadError ? (
           <Button
-            className="h-9 rounded-full px-5 text-muted-foreground hover:text-accent-foreground"
-            data-testid="backup-skip"
-            onClick={onNext}
+            className="h-9 rounded-full bg-foreground/10 px-6 hover:bg-foreground/15"
+            data-testid="onboarding-back"
+            onClick={onBack}
             type="button"
             variant="ghost"
           >
-            Skip for now
+            Back
           </Button>
-        ) : null}
-
-        <Button
-          className="h-9 rounded-full bg-foreground/10 px-6 hover:bg-foreground/15"
-          data-testid="onboarding-back"
-          onClick={onBack}
-          type="button"
-          variant="ghost"
-        >
-          Back
-        </Button>
-      </OnboardingFooter>
+        </OnboardingFooter>
+      ) : null}
     </OnboardingSlideTransition>
   );
 }
diff --git a/desktop/tests/e2e/onboarding-backup.spec.ts b/desktop/tests/e2e/onboarding-backup.spec.ts
index e123e00793..99fa401921 100644
--- a/desktop/tests/e2e/onboarding-backup.spec.ts
+++ b/desktop/tests/e2e/onboarding-backup.spec.ts
@@ -19,11 +19,20 @@ test("backup step appears on fresh-key path after profile submit", async ({
   await enterMachineBackup(page);
 
   await expect(page.getByTestId("onboarding-page-backup")).toBeVisible();
+
+  // Perceived-loading intro: the animated logo and "Creating" title show
+  // first, then the finished state replaces them after the hold.
+  await expect(
+    page.getByRole("heading", { name: "Creating your identity key" }),
+  ).toBeVisible();
+  await expect(page.getByTestId("backup-intro-logo")).toBeVisible();
+
   await expect(
     page.getByRole("heading", {
-      name: "Account created!",
+      name: "Your unique identity key has been created",
     }),
   ).toBeVisible();
+  await expect(page.getByTestId("backup-intro-logo")).toHaveCount(0);
 });
 
 // ---------------------------------------------------------------------------
@@ -40,6 +49,9 @@ test("Keycase happy path: generated password, create, native save, Next", async
   await expect(page.getByTestId("backup-passphrase-generated")).toBeVisible();
   await expect(page.getByTestId("onboarding-next")).toBeEnabled();
 
+  // Let the perceived-loading intro (animated logo → content fade-in) finish
+  // so the screenshot captures fully opaque content.
+  await expect(page.getByTestId("backup-intro-logo")).toHaveCount(0);
   await waitForAnimations(page);
   await page.screenshot({ path: `${SHOTS}/02-backup-step-passphrase.png` });
 
@@ -120,6 +132,8 @@ test("raw key path is one explicit click away and shows the masked nsec", async
   await expect(nsecDisplay).not.toHaveCSS("filter", /blur/);
   await expect(nsecDisplay).toContainText("nsec1mock");
 
+  // Intro crossfade must be finished before capturing.
+  await expect(page.getByTestId("backup-intro-logo")).toHaveCount(0);
   await waitForAnimations(page);
   await page.screenshot({ path: `${SHOTS}/04-backup-step-raw-revealed.png` });
 

From 0cd947cd554cbc98ad7eea5d875011fd3a3edcc5 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Tue, 28 Jul 2026 15:33:47 -0700
Subject: [PATCH 03/21] feat(onboarding): rework backup step into masked-key
 chooser with copy and download options
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- BackupStep.tsx: replace the single Keycase card with a chooser view
  centered on a full-width masked key display:
  - Masked nsec with same-length monospace mask, inline reveal toggle
    (backup-key-reveal-toggle) and inline copy button (backup-copy-key)
    with spinner/checkmark feedback and an inline error banner
    (backup-copy-error) when the keychain fetch fails
  - Copy guidance ("save it somewhere safe — a password manager is a
    great place for it") moved into a tooltip on the copy icon
  - Security note restored below the key card
  - Encrypted download flow moved behind a footer CTA
    (backup-option-download) between Next and Back; opens a dedicated
    view with an "All backup options" back link (backup-back-to-options)
  - Raw key is fetched from the keychain only on explicit reveal/copy;
    the download path never fetches it
- EncryptedBackupCreator.tsx: de-brand "Keycase" to download/password
  terminology across headings, buttons, errors, and a11y labels
  ("Create Keycase" → "Encrypt and download", "Keycase saved to" →
  "Saved to", etc.)
- NsecMaskedDisplay.tsx: de-brand the ncryptsec kind label to
  "encrypted key"
- onboarding-backup.spec.ts: rewrite for the new UX — chooser
  masked-key/reveal/copy coverage (with clipboard permissions), download
  happy path behind the footer CTA, return-to-chooser navigation, and
  reveal error/retry paths replacing the old raw-key error tests
- onboarding-docked-cta-screenshots.spec.ts: capture the reveal toggle
  on the chooser instead of the removed backup-show-raw-key flow

Settings keeps its own Keycase wording; only the onboarding surface is
de-branded here.

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../src/features/onboarding/ui/BackupStep.tsx | 323 ++++++++++++------
 .../onboarding/ui/EncryptedBackupCreator.tsx  |  42 +--
 .../onboarding/ui/NsecMaskedDisplay.tsx       |   6 +-
 desktop/tests/e2e/onboarding-backup.spec.ts   | 161 +++++----
 .../onboarding-docked-cta-screenshots.spec.ts |   9 +-
 5 files changed, 333 insertions(+), 208 deletions(-)

diff --git a/desktop/src/features/onboarding/ui/BackupStep.tsx b/desktop/src/features/onboarding/ui/BackupStep.tsx
index aecc128ddd..54c8f45cda 100644
--- a/desktop/src/features/onboarding/ui/BackupStep.tsx
+++ b/desktop/src/features/onboarding/ui/BackupStep.tsx
@@ -1,12 +1,14 @@
-import { AlertTriangle, Info, RefreshCw } from "lucide-react";
+import { ArrowLeft, Check, Copy, Eye, EyeOff, Info } from "lucide-react";
 import * as React from "react";
 
 import { getNsec } from "@/shared/api/tauriIdentity";
 import { cn } from "@/shared/lib/cn";
+import { writeTextToClipboard } from "@/shared/lib/clipboard";
 import { Button } from "@/shared/ui/button";
 import { FuzzyLogo } from "@/shared/ui/buzz-logo/FuzzyLogo";
 import { Card } from "@/shared/ui/card";
 import { Spinner } from "@/shared/ui/spinner";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
 import { ONBOARDING_PRIMARY_CTA_CLASS } from "./OnboardingChrome";
 import { OnboardingFooter } from "./OnboardingFooter";
 import {
@@ -14,9 +16,7 @@ import {
   OnboardingSlideTransition,
 } from "./OnboardingSlideTransition";
 import { EncryptedBackupCreator } from "./EncryptedBackupCreator";
-import { NsecMaskedDisplay } from "./NsecMaskedDisplay";
-
-export type BackupStepMode = "encrypted" | "raw";
+import { ONBOARDING_KEY_TEXT_CLASS } from "./NsecMaskedDisplay";
 
 /**
  * How long the "Creating your identity key" loader holds the stage before the
@@ -25,9 +25,44 @@ export type BackupStepMode = "encrypted" | "raw";
  */
 const INTRO_HOLD_MS = 1400;
 
+/**
+ * The creation moment should only be sold once per app session. Module-level
+ * so remounts (e.g. navigating Back and returning to this step) skip the fake
+ * hold and show the finished state instantly.
+ */
+let introPlayed = false;
+
 const REVEAL_ANIMATION_CLASS =
   "animate-in fade-in duration-700 motion-reduce:animate-none";
 
+/** Quicker fade for switching between the chooser and a backup method. */
+const VIEW_ANIMATION_CLASS =
+  "animate-in fade-in duration-300 motion-reduce:animate-none";
+
+/**
+ * The chooser offers both backup methods: copying happens in place, while the
+ * encrypted download flow expands into its own view.
+ */
+type BackupView = "choose" | "download";
+
+function BackToOptions({ onClick }: { onClick: () => void }) {
+  return (
+    <div className="mt-4 flex justify-center">
+      <Button
+        className="h-8 gap-1 text-sm text-muted-foreground hover:text-accent-foreground"
+        data-testid="backup-back-to-options"
+        onClick={onClick}
+        size="sm"
+        type="button"
+        variant="ghost"
+      >
+        <ArrowLeft className="h-3.5 w-3.5" aria-hidden="true" />
+        All backup options
+      </Button>
+    </div>
+  );
+}
+
 /** Saving a Keycase is recommended, never required to continue onboarding. */
 export function backupNextDisabled(): boolean {
   return false;
@@ -40,40 +75,33 @@ type BackupStepProps = {
 };
 
 /**
- * Onboarding backup step — recommends a portable Keycase without blocking
- * setup. The raw key is fetched only after the user chooses the advanced path.
+ * Onboarding backup step — offers two ways to back up the new key without
+ * blocking setup: a portable password-protected Keycase (recommended) or a
+ * direct clipboard copy destined for a password manager. The raw key is
+ * fetched only when the user explicitly clicks Copy, goes straight to the
+ * clipboard, and is never rendered or held in state.
  */
 export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
-  const [mode, setMode] = React.useState<BackupStepMode>("encrypted");
+  const [created, setCreated] = React.useState(introPlayed);
+  const [view, setView] = React.useState<BackupView>("choose");
+  const [copyState, setCopyState] = React.useState<
+    "idle" | "copying" | "copied"
+  >("idle");
+  const [copyError, setCopyError] = React.useState<string | null>(null);
   const [nsec, setNsec] = React.useState<string | null>(null);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [loadError, setLoadError] = React.useState<string | null>(null);
-  const [created, setCreated] = React.useState(false);
+  const [isRevealed, setIsRevealed] = React.useState(false);
   const cancelledRef = React.useRef(false);
+  const copiedTimerRef = React.useRef<number | null>(null);
 
   React.useEffect(() => {
-    const timer = window.setTimeout(() => setCreated(true), INTRO_HOLD_MS);
+    if (introPlayed) return;
+    const timer = window.setTimeout(() => {
+      introPlayed = true;
+      setCreated(true);
+    }, INTRO_HOLD_MS);
     return () => window.clearTimeout(timer);
   }, []);
 
-  const loadNsec = React.useCallback(async () => {
-    setIsLoading(true);
-    setLoadError(null);
-    try {
-      const value = await getNsec();
-      if (!cancelledRef.current) setNsec(value);
-    } catch (err) {
-      if (!cancelledRef.current)
-        setLoadError(
-          err instanceof Error
-            ? err.message
-            : "Failed to retrieve private key.",
-        );
-    } finally {
-      if (!cancelledRef.current) setIsLoading(false);
-    }
-  }, []);
-
   React.useEffect(() => {
     cancelledRef.current = false;
     return () => {
@@ -81,13 +109,61 @@ export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
       // nsec from memory on unmount (backup step is only on the fresh-key path).
       cancelledRef.current = true;
       setNsec(null);
+      if (copiedTimerRef.current !== null)
+        window.clearTimeout(copiedTimerRef.current);
     };
   }, []);
 
-  const showRawKey = React.useCallback(() => {
-    setMode("raw");
-    void loadNsec();
-  }, [loadNsec]);
+  const copyKeyToClipboard = React.useCallback(async () => {
+    setCopyState("copying");
+    setCopyError(null);
+    try {
+      const value = nsec ?? (await getNsec());
+      await writeTextToClipboard(value);
+      if (cancelledRef.current) return;
+      setCopyState("copied");
+      if (copiedTimerRef.current !== null)
+        window.clearTimeout(copiedTimerRef.current);
+      copiedTimerRef.current = window.setTimeout(() => {
+        if (!cancelledRef.current) setCopyState("idle");
+      }, 2000);
+    } catch (err) {
+      if (cancelledRef.current) return;
+      setCopyState("idle");
+      setCopyError(
+        err instanceof Error ? err.message : "Failed to retrieve private key.",
+      );
+    }
+  }, [nsec]);
+
+  const toggleReveal = React.useCallback(async () => {
+    if (isRevealed) {
+      setIsRevealed(false);
+      return;
+    }
+    setCopyError(null);
+    try {
+      // The raw key enters the DOM only after this explicit reveal action.
+      const value = nsec ?? (await getNsec());
+      if (cancelledRef.current) return;
+      setNsec(value);
+      setIsRevealed(true);
+    } catch (err) {
+      if (cancelledRef.current) return;
+      setCopyError(
+        err instanceof Error ? err.message : "Failed to retrieve private key.",
+      );
+    }
+  }, [isRevealed, nsec]);
+
+  // Fixed-length decorative mask (nsec keys are 63 chars) so no key material
+  // is fetched just to render the blurred row. Bullets are joined with a
+  // zero-width space: WebKit won't line-break a run of U+2022 without an
+  // explicit break opportunity, so the masked row would overflow otherwise.
+  const maskedKey = React.useMemo(
+    () => Array.from({ length: nsec?.length ?? 63 }, () => "•").join("\u200b"),
+    [nsec],
+  );
 
   return (
     <OnboardingSlideTransition
@@ -141,85 +217,110 @@ export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
             REVEAL_ANIMATION_CLASS,
           )}
         >
-          {mode === "encrypted" ? (
-            <Card className="w-full px-8 py-6" variant="textured">
-              <div className="mx-auto w-full max-w-[832px]">
-                <div className="mb-5 space-y-2 text-center">
-                  <h2 className="text-lg font-medium">Save a Keycase</h2>
-                  <p className="text-xs leading-5 text-muted-foreground">
-                    A Keycase is still private. Never publish or share it. You
-                    need both the file and password to restore your identity.
-                  </p>
+          {view === "choose" ? (
+            <div className="w-full">
+              <Card className="px-8 py-6" variant="textured">
+                <div className="mx-auto flex w-full min-w-0 max-w-[832px] items-center gap-4">
+                  <div className="min-w-0 flex-1">
+                    <p
+                      className={cn(
+                        ONBOARDING_KEY_TEXT_CLASS,
+                        isRevealed && nsec
+                          ? "select-text"
+                          : "select-none blur-[4px]",
+                      )}
+                      data-testid="backup-key-value"
+                    >
+                      {isRevealed && nsec ? nsec : maskedKey}
+                    </p>
+                  </div>
+                  <div className="flex shrink-0 gap-1.5">
+                    <Button
+                      aria-label={
+                        isRevealed ? "Hide private key" : "Reveal private key"
+                      }
+                      className="h-10 w-10 text-muted-foreground hover:text-foreground"
+                      data-testid="backup-key-reveal-toggle"
+                      onClick={() => void toggleReveal()}
+                      size="icon"
+                      type="button"
+                      variant="ghost"
+                    >
+                      {isRevealed ? (
+                        <EyeOff className="h-6 w-6" aria-hidden="true" />
+                      ) : (
+                        <Eye className="h-6 w-6" aria-hidden="true" />
+                      )}
+                    </Button>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          aria-label="Copy private key"
+                          className="h-10 w-10 text-muted-foreground hover:text-foreground"
+                          data-testid="backup-copy-key"
+                          disabled={copyState === "copying"}
+                          onClick={() => void copyKeyToClipboard()}
+                          size="icon"
+                          type="button"
+                          variant="ghost"
+                        >
+                          {copyState === "copying" ? (
+                            <Spinner className="h-5 w-5 border-2" />
+                          ) : copyState === "copied" ? (
+                            <Check
+                              className="h-6 w-6 text-primary"
+                              aria-hidden="true"
+                            />
+                          ) : (
+                            <Copy className="h-6 w-6" aria-hidden="true" />
+                          )}
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-[240px] text-center">
+                        Copy your key and save it somewhere safe — a password
+                        manager is a great place for it.
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
                 </div>
-                <EncryptedBackupCreator variant="spotlight" />
-              </div>
-            </Card>
-          ) : isLoading ? (
-            <div className="flex items-center justify-center gap-2 py-6 text-sm text-foreground/70">
-              <Spinner className="h-4 w-4 border-2" />
-              Loading your private key…
-            </div>
-          ) : loadError ? (
-            <div className="mx-auto max-w-[500px] space-y-3 text-left">
-              <div
-                className="flex items-start gap-3 rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive"
-                data-testid="backup-load-error"
-              >
-                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+                {copyError ? (
+                  <p
+                    className="mt-3 text-center text-sm text-destructive"
+                    data-testid="backup-copy-error"
+                  >
+                    Could not retrieve your private key: {copyError}. You can
+                    continue and find it later in Settings &gt; Profile &gt;
+                    Identity.
+                  </p>
+                ) : null}
+              </Card>
+
+              <p className="mx-auto mt-6 flex max-w-[440px] items-start justify-center gap-1.5 text-center text-xs leading-5 text-[var(--buzz-onboarding-backup-ink)]">
+                <Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
                 <span>
-                  Could not retrieve your private key: {loadError}. You can
-                  continue and find it later in Settings &gt; Profile &gt;
-                  Identity.
+                  Never share your private key. Anyone with this key can
+                  impersonate you and access everything in your account.
                 </span>
-              </div>
-              <Button
-                className="h-8 gap-1.5 text-sm"
-                data-testid="backup-retry"
-                onClick={() => void loadNsec()}
-                size="sm"
-                type="button"
-                variant="outline"
-              >
-                <RefreshCw className="h-3.5 w-3.5" />
-                Try again
-              </Button>
+              </p>
             </div>
-          ) : nsec ? (
-            <Card className="w-full px-8 py-6" variant="textured">
-              <div className="mx-auto w-full max-w-[832px]">
-                <NsecMaskedDisplay nsec={nsec} variant="bare" />
-              </div>
-            </Card>
           ) : (
-            <p className="text-center text-sm text-foreground/70">
-              No key available to back up.
-            </p>
-          )}
-
-          {mode === "encrypted" ? (
-            <div className="mt-4 flex justify-center">
-              <Button
-                className="h-8 text-sm text-muted-foreground hover:text-accent-foreground"
-                data-testid="backup-show-raw-key"
-                onClick={showRawKey}
-                size="sm"
-                type="button"
-                variant="ghost"
-              >
-                Advanced: show my private key instead
-              </Button>
+            <div className={VIEW_ANIMATION_CLASS}>
+              <Card className="w-full px-8 py-6" variant="textured">
+                <div className="mx-auto w-full max-w-[832px]">
+                  <div className="mb-5 space-y-2 text-center">
+                    <h2 className="text-lg font-medium">Download your key</h2>
+                    <p className="text-xs leading-5 text-muted-foreground">
+                      Your key is encrypted with your password before it
+                      downloads. Keep the file private — you need both it and
+                      the password to restore your identity.
+                    </p>
+                  </div>
+                  <EncryptedBackupCreator variant="spotlight" />
+                </div>
+              </Card>
+              <BackToOptions onClick={() => setView("choose")} />
             </div>
-          ) : null}
-
-          {mode === "raw" && nsec ? (
-            <p className="mx-auto mt-6 flex max-w-[440px] items-start justify-center gap-1.5 text-center text-xs leading-5 text-[var(--buzz-onboarding-backup-ink)]">
-              <Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
-              <span>
-                Never share your private key. Anyone with this key can
-                impersonate you and access everything in your account.
-              </span>
-            </p>
-          ) : null}
+          )}
         </div>
       )}
 
@@ -235,15 +336,15 @@ export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
             Next
           </Button>
 
-          {mode === "raw" && loadError ? (
+          {view === "choose" ? (
             <Button
-              className="h-9 rounded-full px-5 text-muted-foreground hover:text-accent-foreground"
-              data-testid="backup-skip"
-              onClick={onNext}
+              className="h-9 rounded-full bg-foreground/10 px-6 hover:bg-foreground/15"
+              data-testid="backup-option-download"
+              onClick={() => setView("download")}
               type="button"
               variant="ghost"
             >
-              Skip for now
+              Download my key
             </Button>
           ) : null}
 
diff --git a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
index 5433d94459..8399b70c84 100644
--- a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
+++ b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
@@ -23,14 +23,15 @@ import { NsecMaskedDisplay } from "./NsecMaskedDisplay";
 type EncryptedBackupCreatorProps = {
   /** "spotlight" is the onboarding treatment; "boxed" fits settings cards. */
   variant?: "spotlight" | "boxed";
-  /** Fired only after the portable Keycase has been saved successfully. */
+  /** Fired only after the encrypted key file has been saved successfully. */
   onSaved?: (path: string) => void;
 };
 
 /**
- * Password-first Keycase creation flow shared by onboarding and Settings.
- * The raw private key never enters this component. Rust creates the NIP-49
- * payload locally, then the native save dialog produces the user-owned file.
+ * Password-first encrypted key download flow shared by onboarding and
+ * Settings. The raw private key never enters this component. Rust creates the
+ * NIP-49 payload locally, then the native save dialog produces the user-owned
+ * file.
  */
 export function EncryptedBackupCreator({
   variant = "spotlight",
@@ -57,7 +58,7 @@ export function EncryptedBackupCreator({
           message:
             err instanceof Error
               ? err.message
-              : "Failed to generate a Keycase password.",
+              : "Failed to generate a password.",
         });
     }
   }, []);
@@ -89,7 +90,7 @@ export function EncryptedBackupCreator({
       } catch (err) {
         if (mountedRef.current)
           setSaveError(
-            err instanceof Error ? err.message : "Failed to save Keycase.",
+            err instanceof Error ? err.message : "Failed to save your key.",
           );
       } finally {
         if (mountedRef.current) setIsSaving(false);
@@ -99,7 +100,7 @@ export function EncryptedBackupCreator({
         dispatch({
           type: "create-failed",
           message:
-            err instanceof Error ? err.message : "Failed to create Keycase.",
+            err instanceof Error ? err.message : "Failed to encrypt your key.",
         });
     }
   }, [onSaved, state]);
@@ -117,7 +118,7 @@ export function EncryptedBackupCreator({
     } catch (err) {
       if (mountedRef.current)
         setSaveError(
-          err instanceof Error ? err.message : "Failed to save Keycase.",
+          err instanceof Error ? err.message : "Failed to save your key.",
         );
     } finally {
       if (mountedRef.current) setIsSaving(false);
@@ -149,14 +150,14 @@ export function EncryptedBackupCreator({
             variant="outline"
           >
             {isSaving ? <Spinner className="h-3.5 w-3.5 border-2" /> : null}
-            Save Keycase…
+            Save a copy…
           </Button>
           {savedPath ? (
             <p
               className="text-xs text-muted-foreground"
               data-testid="encrypted-backup-saved-path"
             >
-              Keycase saved to {savedPath}
+              Saved to {savedPath}
             </p>
           ) : null}
         </div>
@@ -164,7 +165,7 @@ export function EncryptedBackupCreator({
           <p className="text-center text-sm text-destructive">{saveError}</p>
         ) : null}
         <p className="text-center text-xs leading-5 text-muted-foreground">
-          Keep this Keycase private. You need both the file and its password to
+          Keep this file private. You need both the file and its password to
           restore your identity. Buzz cannot reset the password.
         </p>
       </div>
@@ -193,9 +194,7 @@ export function EncryptedBackupCreator({
               data-testid="backup-passphrase-generate-error"
             >
               <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
-              <span>
-                Could not generate a Keycase password: {state.generateError}
-              </span>
+              <span>Could not generate a password: {state.generateError}</span>
             </div>
           ) : (
             <div className="flex items-center justify-center gap-2 py-4 text-sm text-foreground/70">
@@ -227,15 +226,15 @@ export function EncryptedBackupCreator({
             </Button>
           </div>
           <p className="text-center text-xs leading-5 text-muted-foreground">
-            Save this generated passphrase as your Keycase password. Store it
-            separately from the private Keycase file.
+            Save this generated passphrase as your encryption password. Store it
+            separately from the downloaded key file.
           </p>
         </div>
       ) : (
         <div className="space-y-3">
           <div className="space-y-2">
             <Input
-              aria-label="Keycase password"
+              aria-label="Encryption password"
               autoComplete="new-password"
               className="h-10 bg-background"
               data-testid="backup-passphrase-custom"
@@ -250,7 +249,7 @@ export function EncryptedBackupCreator({
               value={state.customPassphrase}
             />
             <Input
-              aria-label="Confirm Keycase password"
+              aria-label="Confirm encryption password"
               autoComplete="new-password"
               className="h-10 bg-background"
               data-testid="backup-passphrase-confirm"
@@ -286,7 +285,8 @@ export function EncryptedBackupCreator({
             </Button>
           </div>
           <p className="text-center text-xs leading-5 text-muted-foreground">
-            Your password protects the Keycase. Buzz cannot reset it if lost.
+            Your password protects your downloaded key. Buzz cannot reset it if
+            lost.
           </p>
         </div>
       )}
@@ -311,10 +311,10 @@ export function EncryptedBackupCreator({
           {state.isCreating ? (
             <>
               <Spinner className="h-4 w-4 border-2" />
-              Creating Keycase… this takes a couple of seconds
+              Encrypting… this takes a couple of seconds
             </>
           ) : (
-            "Create Keycase"
+            "Encrypt and download"
           )}
         </Button>
       </div>
diff --git a/desktop/src/features/onboarding/ui/NsecMaskedDisplay.tsx b/desktop/src/features/onboarding/ui/NsecMaskedDisplay.tsx
index 1dda9b5e22..78c9ec24a2 100644
--- a/desktop/src/features/onboarding/ui/NsecMaskedDisplay.tsx
+++ b/desktop/src/features/onboarding/ui/NsecMaskedDisplay.tsx
@@ -9,8 +9,8 @@ type NsecMaskedDisplayProps = {
   variant?: "boxed" | "bare";
   /**
    * What kind of secret is displayed. Drives labels, aria and testids:
-   * a raw private key ("nsec", default) can impersonate its holder; a
-   * Keycase ("ncryptsec") is only as sensitive as its passphrase.
+   * a raw private key ("nsec", default) can impersonate its holder; an
+   * encrypted key ("ncryptsec") is only as sensitive as its passphrase.
    */
   kind?: "nsec" | "ncryptsec";
   /**
@@ -26,7 +26,7 @@ const KIND_LABELS = {
     testIdPrefix: "nsec",
   },
   ncryptsec: {
-    noun: "Keycase",
+    noun: "encrypted key",
     testIdPrefix: "ncryptsec",
   },
 } as const;
diff --git a/desktop/tests/e2e/onboarding-backup.spec.ts b/desktop/tests/e2e/onboarding-backup.spec.ts
index 99fa401921..4570b002cb 100644
--- a/desktop/tests/e2e/onboarding-backup.spec.ts
+++ b/desktop/tests/e2e/onboarding-backup.spec.ts
@@ -11,6 +11,14 @@ async function enterMachineBackup(page: import("@playwright/test").Page) {
   await page.getByRole("button", { name: "Create a new identity key" }).click();
 }
 
+async function invokedCommands(page: import("@playwright/test").Page) {
+  return page.evaluate(
+    () =>
+      (window as Window & { __BUZZ_E2E_COMMANDS__?: string[] })
+        .__BUZZ_E2E_COMMANDS__ ?? [],
+  );
+}
+
 const SHOTS = "test-results/screenshots-onboarding";
 
 test("backup step appears on fresh-key path after profile submit", async ({
@@ -36,24 +44,70 @@ test("backup step appears on fresh-key path after profile submit", async ({
 });
 
 // ---------------------------------------------------------------------------
-// Keycase path: password → create locally → native save → saved confirmation.
-// The raw key must never be fetched on this path.
+// Chooser: masked key with reveal toggle and inline copy. The raw key is
+// fetched only on explicit reveal/copy, and Next is never blocked.
+// ---------------------------------------------------------------------------
+
+test("chooser shows masked key; reveal and copy fetch it explicitly", async ({
+  page,
+}) => {
+  await page.context().grantPermissions(["clipboard-read", "clipboard-write"]);
+  await enterMachineBackup(page);
+
+  await expect(page.getByTestId("backup-intro-logo")).toHaveCount(0);
+
+  // Masked by default: decorative mask only, no key material in the DOM.
+  const key = page.getByTestId("backup-key-value");
+  await expect(key).toBeVisible();
+  await expect(key).toHaveClass(/blur/);
+  await expect(key).not.toContainText("nsec1");
+  expect(await invokedCommands(page)).not.toContain("get_nsec");
+
+  // Reveal fetches the key; box must not reflow (same-length monospace mask).
+  await page.getByTestId("backup-key-reveal-toggle").click();
+  await expect(key).toContainText("nsec1mock");
+  await expect(key).toHaveClass(/select-text/);
+
+  await waitForAnimations(page);
+  await page.screenshot({ path: `${SHOTS}/02-backup-chooser-revealed.png` });
+
+  // Hide again.
+  await page.getByTestId("backup-key-reveal-toggle").click();
+  await expect(key).not.toContainText("nsec1");
+
+  // Inline copy goes straight to the clipboard.
+  await page.getByTestId("backup-copy-key").click();
+  await expect
+    .poll(async () => invokedCommands(page))
+    .toContain("copy_text_to_clipboard");
+  expect(await invokedCommands(page)).toContain("get_nsec");
+
+  // Backup is recommended, never required.
+  await expect(page.getByTestId("onboarding-next")).toBeEnabled();
+  await page.getByTestId("onboarding-next").click();
+  await expect(page.getByTestId("onboarding-page-2")).toBeVisible();
+});
+
+// ---------------------------------------------------------------------------
+// Encrypted download path: password → encrypt locally → native save → saved
+// confirmation. The raw key must never be fetched on this path.
 // ---------------------------------------------------------------------------
 
-test("Keycase happy path: generated password, create, native save, Next", async ({
+test("download happy path: generated password, encrypt, native save, Next", async ({
   page,
 }) => {
   await enterMachineBackup(page);
 
+  // The download flow sits behind the footer CTA.
+  await expect(page.getByTestId("backup-intro-logo")).toHaveCount(0);
+  await page.getByTestId("backup-option-download").click();
+
   // Default mode: generated password shown, but backup remains optional.
   await expect(page.getByTestId("backup-passphrase-generated")).toBeVisible();
   await expect(page.getByTestId("onboarding-next")).toBeEnabled();
 
-  // Let the perceived-loading intro (animated logo → content fade-in) finish
-  // so the screenshot captures fully opaque content.
-  await expect(page.getByTestId("backup-intro-logo")).toHaveCount(0);
   await waitForAnimations(page);
-  await page.screenshot({ path: `${SHOTS}/02-backup-step-passphrase.png` });
+  await page.screenshot({ path: `${SHOTS}/03-backup-download-passphrase.png` });
 
   await page.getByTestId("encrypted-backup-create").click();
 
@@ -65,18 +119,14 @@ test("Keycase happy path: generated password, create, native save, Next", async
   await expect(blob).toContainText("ncryptsec1");
 
   await waitForAnimations(page);
-  await page.screenshot({ path: `${SHOTS}/03-backup-step-encrypted.png` });
+  await page.screenshot({ path: `${SHOTS}/04-backup-download-encrypted.png` });
 
   await expect(page.getByTestId("encrypted-backup-saved-path")).toContainText(
     "identity.ncryptsec",
   );
 
-  // The default path must never have fetched the raw key.
-  const commands = await page.evaluate(
-    () =>
-      (window as Window & { __BUZZ_E2E_COMMANDS__?: string[] })
-        .__BUZZ_E2E_COMMANDS__ ?? [],
-  );
+  // The download path must never have fetched the raw key.
+  const commands = await invokedCommands(page);
   expect(commands).not.toContain("get_nsec");
   expect(commands).toContain("create_ncryptsec_backup");
 
@@ -85,10 +135,26 @@ test("Keycase happy path: generated password, create, native save, Next", async
   await expect(page.getByTestId("onboarding-page-2")).toBeVisible();
 });
 
+test("download view returns to the chooser via All backup options", async ({
+  page,
+}) => {
+  await enterMachineBackup(page);
+
+  await page.getByTestId("backup-option-download").click();
+  await expect(page.getByTestId("backup-passphrase-generated")).toBeVisible();
+  // The footer download CTA hides while the flow is open.
+  await expect(page.getByTestId("backup-option-download")).toHaveCount(0);
+
+  await page.getByTestId("backup-back-to-options").click();
+  await expect(page.getByTestId("backup-key-value")).toBeVisible();
+  await expect(page.getByTestId("backup-option-download")).toBeVisible();
+});
+
 test("custom passphrase requires 12 characters and confirmation", async ({
   page,
 }) => {
   await enterMachineBackup(page);
+  await page.getByTestId("backup-option-download").click();
 
   await page.getByTestId("backup-passphrase-choose-own").click();
   const create = page.getByTestId("encrypted-backup-create");
@@ -108,41 +174,6 @@ test("custom passphrase requires 12 characters and confirmation", async ({
   await expect(create).toBeEnabled();
 });
 
-// ---------------------------------------------------------------------------
-// Raw-key path: preserved behind one explicit advanced action.
-// ---------------------------------------------------------------------------
-
-test("raw key path is one explicit click away and shows the masked nsec", async ({
-  page,
-}) => {
-  await enterMachineBackup(page);
-
-  await page.getByTestId("backup-show-raw-key").click();
-
-  const nsecDisplay = page.getByTestId("nsec-value");
-  await expect(nsecDisplay).toBeVisible();
-
-  // Should start masked (blurred) — reveal button exists and eye icon visible.
-  const revealBtn = page.getByTestId("nsec-reveal-toggle");
-  await expect(revealBtn).toBeVisible();
-  await expect(nsecDisplay).toHaveCSS("filter", /blur/);
-
-  // Reveal and verify the mock nsec appears.
-  await revealBtn.click();
-  await expect(nsecDisplay).not.toHaveCSS("filter", /blur/);
-  await expect(nsecDisplay).toContainText("nsec1mock");
-
-  // Intro crossfade must be finished before capturing.
-  await expect(page.getByTestId("backup-intro-logo")).toHaveCount(0);
-  await waitForAnimations(page);
-  await page.screenshot({ path: `${SHOTS}/04-backup-step-raw-revealed.png` });
-
-  // Next remains enabled on the advanced raw-key path.
-  await expect(page.getByTestId("onboarding-next")).toBeEnabled();
-  await page.getByTestId("onboarding-next").click();
-  await expect(page.getByTestId("onboarding-page-2")).toBeVisible();
-});
-
 test("backup step back button returns to machine identity choice", async ({
   page,
 }) => {
@@ -162,10 +193,10 @@ test("backup step back button returns to machine identity choice", async ({
 });
 
 // ---------------------------------------------------------------------------
-// B4: Error path coverage (raw path)
+// B4: Error path coverage (reveal/copy)
 // ---------------------------------------------------------------------------
 
-test("raw path shows error banner and retry button when get_nsec fails", async ({
+test("reveal shows inline error when get_nsec fails and Next still advances", async ({
   page,
 }) => {
   await installMockBridge(
@@ -177,22 +208,16 @@ test("raw path shows error banner and retry button when get_nsec fails", async (
   await page.getByRole("button", { name: "Create a new identity key" }).click();
 
   await expect(page.getByTestId("onboarding-page-backup")).toBeVisible();
-  await page.getByTestId("backup-show-raw-key").click();
+  await page.getByTestId("backup-key-reveal-toggle").click();
 
-  await expect(page.getByTestId("backup-load-error")).toBeVisible();
-  await expect(page.getByTestId("backup-retry")).toBeVisible();
-  // Keychain failure does not trap the user; both Next and explicit skip work.
+  await expect(page.getByTestId("backup-copy-error")).toBeVisible();
+  // Keychain failure does not trap the user.
   await expect(page.getByTestId("onboarding-next")).toBeEnabled();
-  await expect(page.getByTestId("backup-skip")).toBeVisible();
-
-  // Skip for now still advances to machine setup.
-  await page.getByTestId("backup-skip").click();
+  await page.getByTestId("onboarding-next").click();
   await expect(page.getByTestId("onboarding-page-2")).toBeVisible();
 });
 
-test("raw path retry succeeds and shows key after initial failure", async ({
-  page,
-}) => {
+test("reveal retry succeeds after initial failure", async ({ page }) => {
   // First call fails, second succeeds (sequenced via nsecErrors).
   await installMockBridge(
     page,
@@ -201,12 +226,12 @@ test("raw path retry succeeds and shows key after initial failure", async ({
   );
   await page.goto("/");
   await page.getByRole("button", { name: "Create a new identity key" }).click();
-  await page.getByTestId("backup-show-raw-key").click();
 
-  await expect(page.getByTestId("backup-load-error")).toBeVisible();
+  await page.getByTestId("backup-key-reveal-toggle").click();
+  await expect(page.getByTestId("backup-copy-error")).toBeVisible();
 
-  // Retry — second call succeeds.
-  await page.getByTestId("backup-retry").click();
-  await expect(page.getByTestId("nsec-value")).toBeVisible();
-  await expect(page.getByTestId("backup-load-error")).not.toBeVisible();
+  // Retry — second call succeeds and clears the error.
+  await page.getByTestId("backup-key-reveal-toggle").click();
+  await expect(page.getByTestId("backup-key-value")).toContainText("nsec1mock");
+  await expect(page.getByTestId("backup-copy-error")).not.toBeVisible();
 });
diff --git a/desktop/tests/e2e/onboarding-docked-cta-screenshots.spec.ts b/desktop/tests/e2e/onboarding-docked-cta-screenshots.spec.ts
index ee6bd3fee6..f9d7c72af9 100644
--- a/desktop/tests/e2e/onboarding-docked-cta-screenshots.spec.ts
+++ b/desktop/tests/e2e/onboarding-docked-cta-screenshots.spec.ts
@@ -59,13 +59,12 @@ test("machine onboarding: landing, backup, setup docked CTAs", async ({
   await waitForAnimations(page);
   await page.screenshot({ path: `${SHOT_DIR}/02-backup.png` });
 
-  // Encrypted-by-default backup: the raw key sits behind an explicit click.
-  await page.getByTestId("backup-show-raw-key").click();
-  await expect(page.getByTestId("nsec-value")).toBeVisible();
+  // The key stays masked behind an explicit reveal toggle.
+  await expect(page.getByTestId("backup-key-value")).toBeVisible();
 
   // Reveal the key: box must not reflow (same-length monospace mask).
-  await page.getByTestId("nsec-reveal-toggle").click();
-  await expect(page.getByTestId("nsec-value")).toHaveClass(/select-text/);
+  await page.getByTestId("backup-key-reveal-toggle").click();
+  await expect(page.getByTestId("backup-key-value")).toHaveClass(/select-text/);
   await waitForAnimations(page);
   await page.screenshot({ path: `${SHOT_DIR}/02b-backup-revealed.png` });
 

From a9f9d4f97743d4d4db80f0e79bb06ffadbe22f47 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Tue, 28 Jul 2026 22:13:59 -0700
Subject: [PATCH 04/21] feat(onboarding): morph nsec card into bracketed shell
 box on download

Add a shared-element transition in the backup step: clicking "Download my
key" scales the textured nsec card down and translates it up into a compact
white square "shell box", framing the metaphor that the user is working on
the secure shell that surrounds their key while the encrypted download view
loads in below.

- BackupStep.tsx: wrap the chooser's nsec Card and the download view's shell
  box in motion.div elements sharing a layoutId, so Motion runs the FLIP
  morph (550ms, same cubic-bezier as the onboarding line-slide) with an
  automatic crossfade; going back via "All backup options" reverses the morph
- Add ShellBracket: black square brackets (6px lines, 2rem outer radius)
  that fade in and clamp inward around the box once the morph settles
  (onLayoutAnimationComplete gates via new shellSettled state); geometry
  keeps the lines 10px clear of the box on all sides, concentric with its
  rounded-2xl corners, forming a 96px square around the 64px box
- Fade/rise the "Download your key" card in concurrently with the morph,
  replacing the old VIEW_ANIMATION_CLASS crossfade
- Respect prefers-reduced-motion via useReducedMotion: morph and bracket
  entrance render their final state instantly
- No e2e changes needed: all existing test ids are preserved and the
  onboarding-backup.spec.ts suite passes unmodified (8/8)

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../src/features/onboarding/ui/BackupStep.tsx | 274 ++++++++++++------
 1 file changed, 185 insertions(+), 89 deletions(-)

diff --git a/desktop/src/features/onboarding/ui/BackupStep.tsx b/desktop/src/features/onboarding/ui/BackupStep.tsx
index 54c8f45cda..54ce786266 100644
--- a/desktop/src/features/onboarding/ui/BackupStep.tsx
+++ b/desktop/src/features/onboarding/ui/BackupStep.tsx
@@ -1,4 +1,5 @@
 import { ArrowLeft, Check, Copy, Eye, EyeOff, Info } from "lucide-react";
+import { motion, type Transition, useReducedMotion } from "motion/react";
 import * as React from "react";
 
 import { getNsec } from "@/shared/api/tauriIdentity";
@@ -35,9 +36,62 @@ let introPlayed = false;
 const REVEAL_ANIMATION_CLASS =
   "animate-in fade-in duration-700 motion-reduce:animate-none";
 
-/** Quicker fade for switching between the chooser and a backup method. */
-const VIEW_ANIMATION_CLASS =
-  "animate-in fade-in duration-300 motion-reduce:animate-none";
+/**
+ * Shared-element id for the nsec card → shell box morph between the
+ * chooser and the download view. Same id on both sides lets Motion run the
+ * scale-down/translate-up FLIP with an automatic crossfade.
+ */
+const NSEC_SHELL_LAYOUT_ID = "nsec-shell-box";
+
+/** Morph tween — same curve as the onboarding line-slide keyframes. */
+const SHELL_MORPH_TRANSITION: Transition = {
+  type: "tween",
+  duration: 0.55,
+  ease: [0.22, 1, 0.36, 1],
+};
+
+/**
+ * One half of the "[   ]" pair that clamps around the shell box once it
+ * settles — the visual is the user working on the secure shell that
+ * surrounds their key. Brackets close inward as they fade in.
+ */
+function ShellBracket({
+  reduceMotion,
+  side,
+  visible,
+}: {
+  reduceMotion: boolean;
+  side: "left" | "right";
+  visible: boolean;
+}) {
+  return (
+    <motion.div
+      animate={
+        visible
+          ? { opacity: 1, x: 0 }
+          : { opacity: 0, x: side === "left" ? -10 : 10 }
+      }
+      aria-hidden
+      className={cn(
+        // The bracket pair frames the h-16 (64px) box as a concentric 96px
+        // square: each line sits 10px clear of the box on every side (plus
+        // the 6px line itself), and the 2rem corner radius wraps the box's
+        // rounded-2xl (16px) corners at a constant 16px offset. The vertical
+        // line lives on the OUTER edge of the 32px-deep arm, so each bracket
+        // pulls 16px back over the box (negative margin) to keep that line
+        // 10px from the box edge.
+        "h-24 w-8 shrink-0 border-black",
+        side === "left"
+          ? "-mr-4 rounded-l-[2rem] border-y-[6px] border-l-[6px]"
+          : "-ml-4 rounded-r-[2rem] border-y-[6px] border-r-[6px]",
+      )}
+      initial={false}
+      transition={
+        reduceMotion ? { duration: 0 } : { duration: 0.35, ease: "easeOut" }
+      }
+    />
+  );
+}
 
 /**
  * The chooser offers both backup methods: copying happens in place, while the
@@ -84,6 +138,9 @@ type BackupStepProps = {
 export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
   const [created, setCreated] = React.useState(introPlayed);
   const [view, setView] = React.useState<BackupView>("choose");
+  // True once the card → shell-box morph has finished; gates the brackets.
+  const [shellSettled, setShellSettled] = React.useState(false);
+  const reduceMotion = useReducedMotion() ?? false;
   const [copyState, setCopyState] = React.useState<
     "idle" | "copying" | "copied"
   >("idle");
@@ -219,81 +276,88 @@ export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
         >
           {view === "choose" ? (
             <div className="w-full">
-              <Card className="px-8 py-6" variant="textured">
-                <div className="mx-auto flex w-full min-w-0 max-w-[832px] items-center gap-4">
-                  <div className="min-w-0 flex-1">
+              <motion.div
+                layoutId={NSEC_SHELL_LAYOUT_ID}
+                transition={
+                  reduceMotion ? { duration: 0 } : SHELL_MORPH_TRANSITION
+                }
+              >
+                <Card className="px-8 py-6" variant="textured">
+                  <div className="mx-auto flex w-full min-w-0 max-w-[832px] items-center gap-4">
+                    <div className="min-w-0 flex-1">
+                      <p
+                        className={cn(
+                          ONBOARDING_KEY_TEXT_CLASS,
+                          isRevealed && nsec
+                            ? "select-text"
+                            : "select-none blur-[4px]",
+                        )}
+                        data-testid="backup-key-value"
+                      >
+                        {isRevealed && nsec ? nsec : maskedKey}
+                      </p>
+                    </div>
+                    <div className="flex shrink-0 gap-1.5">
+                      <Button
+                        aria-label={
+                          isRevealed ? "Hide private key" : "Reveal private key"
+                        }
+                        className="h-10 w-10 text-muted-foreground hover:text-foreground"
+                        data-testid="backup-key-reveal-toggle"
+                        onClick={() => void toggleReveal()}
+                        size="icon"
+                        type="button"
+                        variant="ghost"
+                      >
+                        {isRevealed ? (
+                          <EyeOff className="h-6 w-6" aria-hidden="true" />
+                        ) : (
+                          <Eye className="h-6 w-6" aria-hidden="true" />
+                        )}
+                      </Button>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            aria-label="Copy private key"
+                            className="h-10 w-10 text-muted-foreground hover:text-foreground"
+                            data-testid="backup-copy-key"
+                            disabled={copyState === "copying"}
+                            onClick={() => void copyKeyToClipboard()}
+                            size="icon"
+                            type="button"
+                            variant="ghost"
+                          >
+                            {copyState === "copying" ? (
+                              <Spinner className="h-5 w-5 border-2" />
+                            ) : copyState === "copied" ? (
+                              <Check
+                                className="h-6 w-6 text-primary"
+                                aria-hidden="true"
+                              />
+                            ) : (
+                              <Copy className="h-6 w-6" aria-hidden="true" />
+                            )}
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent className="max-w-[240px] text-center">
+                          Copy your key and save it somewhere safe — a password
+                          manager is a great place for it.
+                        </TooltipContent>
+                      </Tooltip>
+                    </div>
+                  </div>
+                  {copyError ? (
                     <p
-                      className={cn(
-                        ONBOARDING_KEY_TEXT_CLASS,
-                        isRevealed && nsec
-                          ? "select-text"
-                          : "select-none blur-[4px]",
-                      )}
-                      data-testid="backup-key-value"
+                      className="mt-3 text-center text-sm text-destructive"
+                      data-testid="backup-copy-error"
                     >
-                      {isRevealed && nsec ? nsec : maskedKey}
+                      Could not retrieve your private key: {copyError}. You can
+                      continue and find it later in Settings &gt; Profile &gt;
+                      Identity.
                     </p>
-                  </div>
-                  <div className="flex shrink-0 gap-1.5">
-                    <Button
-                      aria-label={
-                        isRevealed ? "Hide private key" : "Reveal private key"
-                      }
-                      className="h-10 w-10 text-muted-foreground hover:text-foreground"
-                      data-testid="backup-key-reveal-toggle"
-                      onClick={() => void toggleReveal()}
-                      size="icon"
-                      type="button"
-                      variant="ghost"
-                    >
-                      {isRevealed ? (
-                        <EyeOff className="h-6 w-6" aria-hidden="true" />
-                      ) : (
-                        <Eye className="h-6 w-6" aria-hidden="true" />
-                      )}
-                    </Button>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Button
-                          aria-label="Copy private key"
-                          className="h-10 w-10 text-muted-foreground hover:text-foreground"
-                          data-testid="backup-copy-key"
-                          disabled={copyState === "copying"}
-                          onClick={() => void copyKeyToClipboard()}
-                          size="icon"
-                          type="button"
-                          variant="ghost"
-                        >
-                          {copyState === "copying" ? (
-                            <Spinner className="h-5 w-5 border-2" />
-                          ) : copyState === "copied" ? (
-                            <Check
-                              className="h-6 w-6 text-primary"
-                              aria-hidden="true"
-                            />
-                          ) : (
-                            <Copy className="h-6 w-6" aria-hidden="true" />
-                          )}
-                        </Button>
-                      </TooltipTrigger>
-                      <TooltipContent className="max-w-[240px] text-center">
-                        Copy your key and save it somewhere safe — a password
-                        manager is a great place for it.
-                      </TooltipContent>
-                    </Tooltip>
-                  </div>
-                </div>
-                {copyError ? (
-                  <p
-                    className="mt-3 text-center text-sm text-destructive"
-                    data-testid="backup-copy-error"
-                  >
-                    Could not retrieve your private key: {copyError}. You can
-                    continue and find it later in Settings &gt; Profile &gt;
-                    Identity.
-                  </p>
-                ) : null}
-              </Card>
+                  ) : null}
+                </Card>
+              </motion.div>
 
               <p className="mx-auto mt-6 flex max-w-[440px] items-start justify-center gap-1.5 text-center text-xs leading-5 text-[var(--buzz-onboarding-backup-ink)]">
                 <Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
@@ -304,21 +368,53 @@ export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
               </p>
             </div>
           ) : (
-            <div className={VIEW_ANIMATION_CLASS}>
-              <Card className="w-full px-8 py-6" variant="textured">
-                <div className="mx-auto w-full max-w-[832px]">
-                  <div className="mb-5 space-y-2 text-center">
-                    <h2 className="text-lg font-medium">Download your key</h2>
-                    <p className="text-xs leading-5 text-muted-foreground">
-                      Your key is encrypted with your password before it
-                      downloads. Keep the file private — you need both it and
-                      the password to restore your identity.
-                    </p>
+            <div className="w-full">
+              <div className="mb-6 flex items-center justify-center">
+                <ShellBracket
+                  reduceMotion={reduceMotion}
+                  side="left"
+                  visible={shellSettled || reduceMotion}
+                />
+                <motion.div
+                  className="h-16 w-16 rounded-2xl bg-white"
+                  data-testid="backup-key-shell"
+                  layoutId={NSEC_SHELL_LAYOUT_ID}
+                  onLayoutAnimationComplete={() => setShellSettled(true)}
+                  transition={
+                    reduceMotion ? { duration: 0 } : SHELL_MORPH_TRANSITION
+                  }
+                />
+                <ShellBracket
+                  reduceMotion={reduceMotion}
+                  side="right"
+                  visible={shellSettled || reduceMotion}
+                />
+              </div>
+              <motion.div
+                animate={{ opacity: 1, y: 0 }}
+                initial={reduceMotion ? false : { opacity: 0, y: 12 }}
+                transition={{ delay: 0.12, duration: 0.4, ease: "easeOut" }}
+              >
+                <Card className="w-full px-8 py-6" variant="textured">
+                  <div className="mx-auto w-full max-w-[832px]">
+                    <div className="mb-5 space-y-2 text-center">
+                      <h2 className="text-lg font-medium">Download your key</h2>
+                      <p className="text-xs leading-5 text-muted-foreground">
+                        Your key is encrypted with your password before it
+                        downloads. Keep the file private — you need both it and
+                        the password to restore your identity.
+                      </p>
+                    </div>
+                    <EncryptedBackupCreator variant="spotlight" />
                   </div>
-                  <EncryptedBackupCreator variant="spotlight" />
-                </div>
-              </Card>
-              <BackToOptions onClick={() => setView("choose")} />
+                </Card>
+                <BackToOptions
+                  onClick={() => {
+                    setShellSettled(false);
+                    setView("choose");
+                  }}
+                />
+              </motion.div>
             </div>
           )}
         </div>

From 8b3a71f6764875fbd9a863961e97d12fc0edd937 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Tue, 28 Jul 2026 22:38:18 -0700
Subject: [PATCH 05/21] feat(onboarding): promote encrypted key download to a
 "Backup your key" step
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Split the backup step's in-place download view into its own page in the
machine onboarding flow, with its own progress dot, slide transition, and
footer. The chooser keeps the masked-key card; "Backup your key" (primary
CTA) now navigates forward instead of swapping views, with a delayed
fade-in ghost "Skip for now" beside it and a Settings hint below.

- DownloadKeyStep.tsx (new): "Backup your key" page — title + encryption
  explainer, shell box + closing brackets animating in on mount (replaces
  the card→box layoutId morph, which can't span two pages), textured card
  hosting EncryptedBackupCreator, and a footer whose primary slot holds
  the portaled "Encrypt and download" button until the payload exists,
  then a primary "Next" that continues to setup
- BackupStep.tsx: reduced to the chooser; removed view state, ShellBracket,
  BackToOptions, and the morph; new onDownload prop; footer reworked to a
  centered primary CTA with an absolutely-positioned "Skip for now" that
  fades in after 1s (animation-delay/duration arbitrary properties so the
  hover transition isn't delayed) and a Settings → Profile → Identity hint
- EncryptedBackupCreator.tsx: new opt-in createButtonPortal /
  createButtonClassName / onCreated props so onboarding can relocate the
  create button into its footer (undefined = inline for Settings; null =
  slot not mounted yet, render nothing to avoid an inline flash)
- MachineOnboardingFlow.tsx: new "download" page between backup and setup
  (Back → backup, Next → setup); progress indices shifted (download=3,
  setup=4, config=5)
- OnboardingChrome.tsx: TOTAL_ONBOARDING_PAGES 7 → 8; WelcomeSetup 5→6 and
  CommunityOnboardingFlow 6→7/7→8 dot positions bumped to match
- SetupStep.tsx: same footer treatment — centered Next with a no-background
  "Skip for now" hanging off its right edge, fading in after 1s
- tests: passThroughBackupStep helper now skips from the chooser;
  onboarding-backup.spec.ts covers the new page (create button absent from
  footer until encryption, Back returns to the chooser); 47 e2e + 3778
  unit tests pass

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../features/communities/ui/WelcomeSetup.tsx  |   2 +-
 .../src/features/onboarding/ui/BackupStep.tsx | 352 ++++++------------
 .../onboarding/ui/CommunityOnboardingFlow.tsx |   2 +-
 .../onboarding/ui/DownloadKeyStep.tsx         | 185 +++++++++
 .../onboarding/ui/EncryptedBackupCreator.tsx  |  61 ++-
 .../onboarding/ui/MachineOnboardingFlow.tsx   |  19 +-
 .../onboarding/ui/OnboardingChrome.tsx        |   9 +-
 .../src/features/onboarding/ui/SetupStep.tsx  |  41 +-
 desktop/tests/e2e/onboarding-backup.spec.ts   |  23 +-
 desktop/tests/helpers/onboarding.ts           |   9 +-
 10 files changed, 400 insertions(+), 303 deletions(-)
 create mode 100644 desktop/src/features/onboarding/ui/DownloadKeyStep.tsx

diff --git a/desktop/src/features/communities/ui/WelcomeSetup.tsx b/desktop/src/features/communities/ui/WelcomeSetup.tsx
index bde1458222..71bd382db2 100644
--- a/desktop/src/features/communities/ui/WelcomeSetup.tsx
+++ b/desktop/src/features/communities/ui/WelcomeSetup.tsx
@@ -103,7 +103,7 @@ export function WelcomeSetup({
       data-system-color-scheme={systemColorScheme}
     >
       <StartupWindowDragRegion />
-      <OnboardingChrome current={5} />
+      <OnboardingChrome current={6} />
       <OnboardingFooterProvider>
         <div className="relative flex min-h-0 w-full max-w-[920px] flex-1 flex-col items-center text-center">
           {page === "welcome" ? (
diff --git a/desktop/src/features/onboarding/ui/BackupStep.tsx b/desktop/src/features/onboarding/ui/BackupStep.tsx
index 54ce786266..4419b6e63e 100644
--- a/desktop/src/features/onboarding/ui/BackupStep.tsx
+++ b/desktop/src/features/onboarding/ui/BackupStep.tsx
@@ -1,5 +1,4 @@
-import { ArrowLeft, Check, Copy, Eye, EyeOff, Info } from "lucide-react";
-import { motion, type Transition, useReducedMotion } from "motion/react";
+import { Check, Copy, Eye, EyeOff, Info } from "lucide-react";
 import * as React from "react";
 
 import { getNsec } from "@/shared/api/tauriIdentity";
@@ -16,7 +15,6 @@ import {
   type OnboardingTransitionDirection,
   OnboardingSlideTransition,
 } from "./OnboardingSlideTransition";
-import { EncryptedBackupCreator } from "./EncryptedBackupCreator";
 import { ONBOARDING_KEY_TEXT_CLASS } from "./NsecMaskedDisplay";
 
 /**
@@ -36,87 +34,6 @@ let introPlayed = false;
 const REVEAL_ANIMATION_CLASS =
   "animate-in fade-in duration-700 motion-reduce:animate-none";
 
-/**
- * Shared-element id for the nsec card → shell box morph between the
- * chooser and the download view. Same id on both sides lets Motion run the
- * scale-down/translate-up FLIP with an automatic crossfade.
- */
-const NSEC_SHELL_LAYOUT_ID = "nsec-shell-box";
-
-/** Morph tween — same curve as the onboarding line-slide keyframes. */
-const SHELL_MORPH_TRANSITION: Transition = {
-  type: "tween",
-  duration: 0.55,
-  ease: [0.22, 1, 0.36, 1],
-};
-
-/**
- * One half of the "[   ]" pair that clamps around the shell box once it
- * settles — the visual is the user working on the secure shell that
- * surrounds their key. Brackets close inward as they fade in.
- */
-function ShellBracket({
-  reduceMotion,
-  side,
-  visible,
-}: {
-  reduceMotion: boolean;
-  side: "left" | "right";
-  visible: boolean;
-}) {
-  return (
-    <motion.div
-      animate={
-        visible
-          ? { opacity: 1, x: 0 }
-          : { opacity: 0, x: side === "left" ? -10 : 10 }
-      }
-      aria-hidden
-      className={cn(
-        // The bracket pair frames the h-16 (64px) box as a concentric 96px
-        // square: each line sits 10px clear of the box on every side (plus
-        // the 6px line itself), and the 2rem corner radius wraps the box's
-        // rounded-2xl (16px) corners at a constant 16px offset. The vertical
-        // line lives on the OUTER edge of the 32px-deep arm, so each bracket
-        // pulls 16px back over the box (negative margin) to keep that line
-        // 10px from the box edge.
-        "h-24 w-8 shrink-0 border-black",
-        side === "left"
-          ? "-mr-4 rounded-l-[2rem] border-y-[6px] border-l-[6px]"
-          : "-ml-4 rounded-r-[2rem] border-y-[6px] border-r-[6px]",
-      )}
-      initial={false}
-      transition={
-        reduceMotion ? { duration: 0 } : { duration: 0.35, ease: "easeOut" }
-      }
-    />
-  );
-}
-
-/**
- * The chooser offers both backup methods: copying happens in place, while the
- * encrypted download flow expands into its own view.
- */
-type BackupView = "choose" | "download";
-
-function BackToOptions({ onClick }: { onClick: () => void }) {
-  return (
-    <div className="mt-4 flex justify-center">
-      <Button
-        className="h-8 gap-1 text-sm text-muted-foreground hover:text-accent-foreground"
-        data-testid="backup-back-to-options"
-        onClick={onClick}
-        size="sm"
-        type="button"
-        variant="ghost"
-      >
-        <ArrowLeft className="h-3.5 w-3.5" aria-hidden="true" />
-        All backup options
-      </Button>
-    </div>
-  );
-}
-
 /** Saving a Keycase is recommended, never required to continue onboarding. */
 export function backupNextDisabled(): boolean {
   return false;
@@ -125,22 +42,25 @@ export function backupNextDisabled(): boolean {
 type BackupStepProps = {
   direction: OnboardingTransitionDirection;
   onBack: () => void;
+  /** Advances to the dedicated "Download your key" onboarding step. */
+  onDownload: () => void;
   onNext: () => void;
 };
 
 /**
- * Onboarding backup step — offers two ways to back up the new key without
- * blocking setup: a portable password-protected Keycase (recommended) or a
- * direct clipboard copy destined for a password manager. The raw key is
- * fetched only when the user explicitly clicks Copy, goes straight to the
- * clipboard, and is never rendered or held in state.
+ * Onboarding backup step — shows the freshly created key and offers two ways
+ * to back it up without blocking setup: the encrypted download flow (its own
+ * onboarding step, via `onDownload`) or a direct clipboard copy destined for
+ * a password manager. The raw key is fetched only when the user explicitly
+ * clicks Copy or Reveal, and is never held in state before that.
  */
-export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
+export function BackupStep({
+  direction,
+  onBack,
+  onDownload,
+  onNext,
+}: BackupStepProps) {
   const [created, setCreated] = React.useState(introPlayed);
-  const [view, setView] = React.useState<BackupView>("choose");
-  // True once the card → shell-box morph has finished; gates the brackets.
-  const [shellSettled, setShellSettled] = React.useState(false);
-  const reduceMotion = useReducedMotion() ?? false;
   const [copyState, setCopyState] = React.useState<
     "idle" | "copying" | "copied"
   >("idle");
@@ -274,175 +194,118 @@ export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
             REVEAL_ANIMATION_CLASS,
           )}
         >
-          {view === "choose" ? (
-            <div className="w-full">
-              <motion.div
-                layoutId={NSEC_SHELL_LAYOUT_ID}
-                transition={
-                  reduceMotion ? { duration: 0 } : SHELL_MORPH_TRANSITION
-                }
-              >
-                <Card className="px-8 py-6" variant="textured">
-                  <div className="mx-auto flex w-full min-w-0 max-w-[832px] items-center gap-4">
-                    <div className="min-w-0 flex-1">
-                      <p
-                        className={cn(
-                          ONBOARDING_KEY_TEXT_CLASS,
-                          isRevealed && nsec
-                            ? "select-text"
-                            : "select-none blur-[4px]",
-                        )}
-                        data-testid="backup-key-value"
-                      >
-                        {isRevealed && nsec ? nsec : maskedKey}
-                      </p>
-                    </div>
-                    <div className="flex shrink-0 gap-1.5">
+          <div className="w-full">
+            <Card className="px-8 py-6" variant="textured">
+              <div className="mx-auto flex w-full min-w-0 max-w-[832px] items-center gap-4">
+                <div className="min-w-0 flex-1">
+                  <p
+                    className={cn(
+                      ONBOARDING_KEY_TEXT_CLASS,
+                      isRevealed && nsec
+                        ? "select-text"
+                        : "select-none blur-[4px]",
+                    )}
+                    data-testid="backup-key-value"
+                  >
+                    {isRevealed && nsec ? nsec : maskedKey}
+                  </p>
+                </div>
+                <div className="flex shrink-0 gap-1.5">
+                  <Button
+                    aria-label={
+                      isRevealed ? "Hide private key" : "Reveal private key"
+                    }
+                    className="h-10 w-10 text-muted-foreground hover:text-foreground"
+                    data-testid="backup-key-reveal-toggle"
+                    onClick={() => void toggleReveal()}
+                    size="icon"
+                    type="button"
+                    variant="ghost"
+                  >
+                    {isRevealed ? (
+                      <EyeOff className="h-6 w-6" aria-hidden="true" />
+                    ) : (
+                      <Eye className="h-6 w-6" aria-hidden="true" />
+                    )}
+                  </Button>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
                       <Button
-                        aria-label={
-                          isRevealed ? "Hide private key" : "Reveal private key"
-                        }
+                        aria-label="Copy private key"
                         className="h-10 w-10 text-muted-foreground hover:text-foreground"
-                        data-testid="backup-key-reveal-toggle"
-                        onClick={() => void toggleReveal()}
+                        data-testid="backup-copy-key"
+                        disabled={copyState === "copying"}
+                        onClick={() => void copyKeyToClipboard()}
                         size="icon"
                         type="button"
                         variant="ghost"
                       >
-                        {isRevealed ? (
-                          <EyeOff className="h-6 w-6" aria-hidden="true" />
+                        {copyState === "copying" ? (
+                          <Spinner className="h-5 w-5 border-2" />
+                        ) : copyState === "copied" ? (
+                          <Check
+                            className="h-6 w-6 text-primary"
+                            aria-hidden="true"
+                          />
                         ) : (
-                          <Eye className="h-6 w-6" aria-hidden="true" />
+                          <Copy className="h-6 w-6" aria-hidden="true" />
                         )}
                       </Button>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button
-                            aria-label="Copy private key"
-                            className="h-10 w-10 text-muted-foreground hover:text-foreground"
-                            data-testid="backup-copy-key"
-                            disabled={copyState === "copying"}
-                            onClick={() => void copyKeyToClipboard()}
-                            size="icon"
-                            type="button"
-                            variant="ghost"
-                          >
-                            {copyState === "copying" ? (
-                              <Spinner className="h-5 w-5 border-2" />
-                            ) : copyState === "copied" ? (
-                              <Check
-                                className="h-6 w-6 text-primary"
-                                aria-hidden="true"
-                              />
-                            ) : (
-                              <Copy className="h-6 w-6" aria-hidden="true" />
-                            )}
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent className="max-w-[240px] text-center">
-                          Copy your key and save it somewhere safe — a password
-                          manager is a great place for it.
-                        </TooltipContent>
-                      </Tooltip>
-                    </div>
-                  </div>
-                  {copyError ? (
-                    <p
-                      className="mt-3 text-center text-sm text-destructive"
-                      data-testid="backup-copy-error"
-                    >
-                      Could not retrieve your private key: {copyError}. You can
-                      continue and find it later in Settings &gt; Profile &gt;
-                      Identity.
-                    </p>
-                  ) : null}
-                </Card>
-              </motion.div>
-
-              <p className="mx-auto mt-6 flex max-w-[440px] items-start justify-center gap-1.5 text-center text-xs leading-5 text-[var(--buzz-onboarding-backup-ink)]">
-                <Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
-                <span>
-                  Never share your private key. Anyone with this key can
-                  impersonate you and access everything in your account.
-                </span>
-              </p>
-            </div>
-          ) : (
-            <div className="w-full">
-              <div className="mb-6 flex items-center justify-center">
-                <ShellBracket
-                  reduceMotion={reduceMotion}
-                  side="left"
-                  visible={shellSettled || reduceMotion}
-                />
-                <motion.div
-                  className="h-16 w-16 rounded-2xl bg-white"
-                  data-testid="backup-key-shell"
-                  layoutId={NSEC_SHELL_LAYOUT_ID}
-                  onLayoutAnimationComplete={() => setShellSettled(true)}
-                  transition={
-                    reduceMotion ? { duration: 0 } : SHELL_MORPH_TRANSITION
-                  }
-                />
-                <ShellBracket
-                  reduceMotion={reduceMotion}
-                  side="right"
-                  visible={shellSettled || reduceMotion}
-                />
+                    </TooltipTrigger>
+                    <TooltipContent className="max-w-[240px] text-center">
+                      Copy your key and save it somewhere safe — a password
+                      manager is a great place for it.
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
               </div>
-              <motion.div
-                animate={{ opacity: 1, y: 0 }}
-                initial={reduceMotion ? false : { opacity: 0, y: 12 }}
-                transition={{ delay: 0.12, duration: 0.4, ease: "easeOut" }}
-              >
-                <Card className="w-full px-8 py-6" variant="textured">
-                  <div className="mx-auto w-full max-w-[832px]">
-                    <div className="mb-5 space-y-2 text-center">
-                      <h2 className="text-lg font-medium">Download your key</h2>
-                      <p className="text-xs leading-5 text-muted-foreground">
-                        Your key is encrypted with your password before it
-                        downloads. Keep the file private — you need both it and
-                        the password to restore your identity.
-                      </p>
-                    </div>
-                    <EncryptedBackupCreator variant="spotlight" />
-                  </div>
-                </Card>
-                <BackToOptions
-                  onClick={() => {
-                    setShellSettled(false);
-                    setView("choose");
-                  }}
-                />
-              </motion.div>
-            </div>
-          )}
+              {copyError ? (
+                <p
+                  className="mt-3 text-center text-sm text-destructive"
+                  data-testid="backup-copy-error"
+                >
+                  Could not retrieve your private key: {copyError}. You can
+                  continue and find it later in Settings &gt; Profile &gt;
+                  Identity.
+                </p>
+              ) : null}
+            </Card>
+
+            <p className="mx-auto mt-6 flex max-w-[440px] items-start justify-center gap-1.5 text-center text-xs leading-5 text-[var(--buzz-onboarding-backup-ink)]">
+              <Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+              <span>
+                Never share your private key. Anyone with this key can
+                impersonate you and access everything in your account.
+              </span>
+            </p>
+          </div>
         </div>
       )}
 
       {created ? (
         <OnboardingFooter className={REVEAL_ANIMATION_CLASS}>
-          <Button
-            className={ONBOARDING_PRIMARY_CTA_CLASS}
-            data-testid="onboarding-next"
-            disabled={backupNextDisabled()}
-            onClick={onNext}
-            type="button"
-          >
-            Next
-          </Button>
-
-          {view === "choose" ? (
+          {/* Relative row keeps the primary CTA truly centered while Skip
+              hangs off its right edge without shifting the center. */}
+          <div className="relative flex items-center justify-center">
             <Button
-              className="h-9 rounded-full bg-foreground/10 px-6 hover:bg-foreground/15"
+              className={ONBOARDING_PRIMARY_CTA_CLASS}
               data-testid="backup-option-download"
-              onClick={() => setView("download")}
+              onClick={onDownload}
+              type="button"
+            >
+              Backup your key
+            </Button>
+            <Button
+              className="absolute left-full ml-3 h-9 animate-in whitespace-nowrap rounded-full px-6 fade-in fill-mode-backwards [animation-delay:1000ms] animation-duration-[500ms] hover:bg-foreground/10 motion-reduce:animate-none"
+              data-testid="onboarding-next"
+              disabled={backupNextDisabled()}
+              onClick={onNext}
               type="button"
               variant="ghost"
             >
-              Download my key
+              Skip for now
             </Button>
-          ) : null}
+          </div>
 
           <Button
             className="h-9 rounded-full bg-foreground/10 px-6 hover:bg-foreground/15"
@@ -453,6 +316,11 @@ export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
           >
             Back
           </Button>
+
+          <p className="text-xs text-foreground/50">
+            You can back up your key anytime in Settings &rarr; Profile &rarr;
+            Identity.
+          </p>
         </OnboardingFooter>
       ) : null}
     </OnboardingSlideTransition>
diff --git a/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx b/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
index 4b729ab33f..805d19661a 100644
--- a/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
+++ b/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
@@ -448,7 +448,7 @@ export function CommunityOnboardingFlow({
     >
       <StartupWindowDragRegion />
       {isProfileStage || isTeamStage ? (
-        <OnboardingChrome current={isTeamStage ? 7 : 6} />
+        <OnboardingChrome current={isTeamStage ? 8 : 7} />
       ) : null}
       <OnboardingFooterProvider>
         <div
diff --git a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
new file mode 100644
index 0000000000..40f5e503f1
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
@@ -0,0 +1,185 @@
+import { motion, useReducedMotion } from "motion/react";
+import * as React from "react";
+
+import { cn } from "@/shared/lib/cn";
+import { Button } from "@/shared/ui/button";
+import { Card } from "@/shared/ui/card";
+import { ONBOARDING_PRIMARY_CTA_CLASS } from "./OnboardingChrome";
+import { OnboardingFooter } from "./OnboardingFooter";
+import {
+  type OnboardingTransitionDirection,
+  OnboardingSlideTransition,
+} from "./OnboardingSlideTransition";
+import { EncryptedBackupCreator } from "./EncryptedBackupCreator";
+
+/**
+ * One half of the "[   ]" pair that clamps around the shell box once it
+ * settles — the visual is the user working on the secure shell that
+ * surrounds their key. Brackets close inward as they fade in.
+ */
+function ShellBracket({
+  reduceMotion,
+  side,
+  visible,
+}: {
+  reduceMotion: boolean;
+  side: "left" | "right";
+  visible: boolean;
+}) {
+  return (
+    <motion.div
+      animate={
+        visible
+          ? { opacity: 1, x: 0 }
+          : { opacity: 0, x: side === "left" ? -10 : 10 }
+      }
+      aria-hidden
+      className={cn(
+        // The bracket pair frames the h-16 (64px) box as a concentric 96px
+        // square: each line sits 10px clear of the box on every side (plus
+        // the 6px line itself), and the 2rem corner radius wraps the box's
+        // rounded-2xl (16px) corners at a constant 16px offset. The vertical
+        // line lives on the OUTER edge of the 32px-deep arm, so each bracket
+        // pulls 16px back over the box (negative margin) to keep that line
+        // 10px from the box edge.
+        "h-24 w-8 shrink-0 border-black",
+        side === "left"
+          ? "-mr-4 rounded-l-[2rem] border-y-[6px] border-l-[6px]"
+          : "-ml-4 rounded-r-[2rem] border-y-[6px] border-r-[6px]",
+      )}
+      initial={false}
+      transition={
+        reduceMotion ? { duration: 0 } : { duration: 0.35, ease: "easeOut" }
+      }
+    />
+  );
+}
+
+type DownloadKeyStepProps = {
+  direction: OnboardingTransitionDirection;
+  onBack: () => void;
+  onNext: () => void;
+};
+
+/**
+ * Onboarding download step — the password-first encrypted key download
+ * (Keycase) flow, promoted to its own page in the machine onboarding flow.
+ * The raw key never enters this component: Rust builds the NIP-49 payload
+ * locally and the native save dialog produces the user-owned file.
+ */
+export function DownloadKeyStep({
+  direction,
+  onBack,
+  onNext,
+}: DownloadKeyStepProps) {
+  const reduceMotion = useReducedMotion() ?? false;
+  // True once the shell box has landed; gates the closing brackets.
+  const [shellSettled, setShellSettled] = React.useState(false);
+  // True once the encrypted payload exists — the create button (living in the
+  // footer's primary slot) disappears with the form, so Next takes its place.
+  const [hasCreated, setHasCreated] = React.useState(false);
+  // Footer slot the creator portals its "Encrypt and download" button into.
+  const [createButtonSlot, setCreateButtonSlot] =
+    React.useState<HTMLElement | null>(null);
+
+  return (
+    <OnboardingSlideTransition
+      className="flex min-h-0 w-full flex-col items-center"
+      data-testid="onboarding-page-download"
+      direction={direction}
+      transitionKey={`download-${direction}`}
+    >
+      <div className="flex w-full max-w-[500px] shrink-0 flex-col text-center">
+        {/* Plain string concat: cn()'s tailwind-merge misreads the custom
+            text-title size token as conflicting with text-foreground. */}
+        <h1 className="text-title font-normal text-foreground">
+          Backup your key
+        </h1>
+        <p className="mt-5 text-sm leading-6 text-foreground/80">
+          Your key is encrypted with your password before it downloads. Keep the
+          file private — you need both it and the password to restore your
+          identity.
+        </p>
+      </div>
+
+      <div className="flex w-full max-w-[1040px] flex-1 flex-col justify-center py-10">
+        <div className="w-full">
+          <div className="mb-6 flex items-center justify-center">
+            <ShellBracket
+              reduceMotion={reduceMotion}
+              side="left"
+              visible={shellSettled || reduceMotion}
+            />
+            <motion.div
+              animate={{ opacity: 1, scale: 1 }}
+              className="h-16 w-16 rounded-2xl bg-white"
+              data-testid="backup-key-shell"
+              initial={reduceMotion ? false : { opacity: 0, scale: 0.8 }}
+              onAnimationComplete={() => setShellSettled(true)}
+              transition={
+                reduceMotion
+                  ? { duration: 0 }
+                  : { duration: 0.45, ease: [0.22, 1, 0.36, 1] }
+              }
+            />
+            <ShellBracket
+              reduceMotion={reduceMotion}
+              side="right"
+              visible={shellSettled || reduceMotion}
+            />
+          </div>
+          <motion.div
+            animate={{ opacity: 1, y: 0 }}
+            initial={reduceMotion ? false : { opacity: 0, y: 12 }}
+            transition={{ delay: 0.12, duration: 0.4, ease: "easeOut" }}
+          >
+            <Card className="w-full px-8 py-6" variant="textured">
+              <div className="mx-auto w-full max-w-[832px]">
+                <EncryptedBackupCreator
+                  createButtonClassName={ONBOARDING_PRIMARY_CTA_CLASS}
+                  createButtonPortal={createButtonSlot}
+                  onCreated={() => setHasCreated(true)}
+                  variant="spotlight"
+                />
+              </div>
+            </Card>
+          </motion.div>
+        </div>
+      </div>
+
+      <OnboardingFooter>
+        {hasCreated ? (
+          <Button
+            className={ONBOARDING_PRIMARY_CTA_CLASS}
+            data-testid="onboarding-next"
+            onClick={onNext}
+            type="button"
+          >
+            Next
+          </Button>
+        ) : (
+          <div
+            className="flex justify-center"
+            data-testid="onboarding-create-slot"
+            ref={setCreateButtonSlot}
+          />
+        )}
+
+        <Button
+          className="h-9 rounded-full bg-foreground/10 px-6 hover:bg-foreground/15"
+          data-testid="onboarding-back"
+          onClick={onBack}
+          type="button"
+          variant="ghost"
+        >
+          Back
+        </Button>
+
+        <p className="text-xs text-foreground/50">
+          You can back up your key anytime in Settings &rarr; Profile &rarr;
+          Identity.
+        </p>
+      </OnboardingFooter>
+    </OnboardingSlideTransition>
+  );
+}
diff --git a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
index 8399b70c84..d0704e6fda 100644
--- a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
+++ b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
@@ -1,5 +1,6 @@
 import { AlertTriangle, RefreshCw } from "lucide-react";
 import * as React from "react";
+import { createPortal } from "react-dom";
 
 import {
   createNcryptsecBackup,
@@ -23,6 +24,15 @@ import { NsecMaskedDisplay } from "./NsecMaskedDisplay";
 type EncryptedBackupCreatorProps = {
   /** "spotlight" is the onboarding treatment; "boxed" fits settings cards. */
   variant?: "spotlight" | "boxed";
+  /**
+   * When set, the "Encrypt and download" button is portaled into this element
+   * (e.g. the onboarding footer's primary slot) instead of rendering inline.
+   */
+  createButtonPortal?: HTMLElement | null;
+  /** Extra classes for the "Encrypt and download" button. */
+  createButtonClassName?: string;
+  /** Fired once the encrypted payload has been created (before saving). */
+  onCreated?: () => void;
   /** Fired only after the encrypted key file has been saved successfully. */
   onSaved?: (path: string) => void;
 };
@@ -35,6 +45,9 @@ type EncryptedBackupCreatorProps = {
  */
 export function EncryptedBackupCreator({
   variant = "spotlight",
+  createButtonPortal,
+  createButtonClassName,
+  onCreated,
   onSaved,
 }: EncryptedBackupCreatorProps) {
   const [state, dispatch] = React.useReducer(
@@ -79,6 +92,7 @@ export function EncryptedBackupCreator({
       const ncryptsec = await createNcryptsecBackup(passphrase);
       if (!mountedRef.current) return;
       dispatch({ type: "create-succeeded", ncryptsec });
+      onCreated?.();
       setIsSaving(true);
       setSaveError(null);
       try {
@@ -103,7 +117,7 @@ export function EncryptedBackupCreator({
             err instanceof Error ? err.message : "Failed to encrypt your key.",
         });
     }
-  }, [onSaved, state]);
+  }, [onCreated, onSaved, state]);
 
   const handleSaveCopy = React.useCallback(async () => {
     if (!state.ncryptsec || isSaving) return;
@@ -300,24 +314,33 @@ export function EncryptedBackupCreator({
         </p>
       ) : null}
 
-      <div className="flex justify-center">
-        <Button
-          className="h-9 rounded-full px-6"
-          data-testid="encrypted-backup-create"
-          disabled={createDisabled(state)}
-          onClick={() => void handleCreate()}
-          type="button"
-        >
-          {state.isCreating ? (
-            <>
-              <Spinner className="h-4 w-4 border-2" />
-              Encrypting… this takes a couple of seconds
-            </>
-          ) : (
-            "Encrypt and download"
-          )}
-        </Button>
-      </div>
+      {(() => {
+        const createButton = (
+          <Button
+            className={cn("h-9 rounded-full px-6", createButtonClassName)}
+            data-testid="encrypted-backup-create"
+            disabled={createDisabled(state)}
+            onClick={() => void handleCreate()}
+            type="button"
+          >
+            {state.isCreating ? (
+              <>
+                <Spinner className="h-4 w-4 border-2" />
+                Encrypting… this takes a couple of seconds
+              </>
+            ) : (
+              "Encrypt and download"
+            )}
+          </Button>
+        );
+        // `undefined` = inline (settings); `null` = slot not mounted yet
+        // (skip a frame rather than flashing the button inline).
+        if (createButtonPortal === undefined)
+          return <div className="flex justify-center">{createButton}</div>;
+        return createButtonPortal
+          ? createPortal(createButton, createButtonPortal)
+          : null;
+      })()}
     </div>
   );
 }
diff --git a/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx b/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
index a93d75f2ef..0cdec027e1 100644
--- a/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
+++ b/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
@@ -10,6 +10,7 @@ import { Button } from "@/shared/ui/button";
 import { StartupWindowDragRegion } from "@/shared/ui/StartupWindowDragRegion";
 import { BackupStep } from "./BackupStep";
 import { DefaultConfigStep } from "./DefaultConfigStep";
+import { DownloadKeyStep } from "./DownloadKeyStep";
 import { IdentityKeyHelpDialog } from "./IdentityKeyHelpDialog";
 import { LandingBees } from "./LandingBees";
 import { NostrKeyImportForm } from "./NostrKeyImportForm";
@@ -25,6 +26,7 @@ export type MachineOnboardingPage =
   | "identity"
   | "key-import"
   | "backup"
+  | "download"
   | "setup"
   | "config";
 
@@ -136,7 +138,15 @@ export function MachineOnboardingFlow({
       {page === "identity" ? <LandingBees /> : null}
       {page !== "identity" ? (
         <OnboardingChrome
-          current={page === "config" ? 4 : page === "setup" ? 3 : 2}
+          current={
+            page === "config"
+              ? 5
+              : page === "setup"
+                ? 4
+                : page === "download"
+                  ? 3
+                  : 2
+          }
         />
       ) : null}
       <OnboardingFooterProvider>
@@ -227,6 +237,13 @@ export function MachineOnboardingFlow({
             <BackupStep
               direction="forward"
               onBack={() => setPage("identity")}
+              onDownload={() => setPage("download")}
+              onNext={() => setPage("setup")}
+            />
+          ) : page === "download" ? (
+            <DownloadKeyStep
+              direction="forward"
+              onBack={() => setPage("backup")}
               onNext={() => setPage("setup")}
             />
           ) : page === "setup" ? (
diff --git a/desktop/src/features/onboarding/ui/OnboardingChrome.tsx b/desktop/src/features/onboarding/ui/OnboardingChrome.tsx
index 936313bce0..24f020a09f 100644
--- a/desktop/src/features/onboarding/ui/OnboardingChrome.tsx
+++ b/desktop/src/features/onboarding/ui/OnboardingChrome.tsx
@@ -1,11 +1,12 @@
 import { BuzzMark } from "@/shared/ui/buzz-logo/BuzzMark";
 
 /**
- * Positions in the first-launch flow: landing, identity/key, harness setup,
- * default config, community choice, community profile, meet the team. Used as
- * the default pagination length when a flow doesn't pass an explicit total.
+ * Positions in the first-launch flow: landing, identity/key, key download,
+ * harness setup, default config, community choice, community profile, meet
+ * the team. Used as the default pagination length when a flow doesn't pass an
+ * explicit total.
  */
-export const TOTAL_ONBOARDING_PAGES = 7;
+export const TOTAL_ONBOARDING_PAGES = 8;
 
 /** Shared pill shape (38px tall) for every onboarding primary CTA. */
 const ONBOARDING_CTA_SHAPE = "h-[2.375rem] rounded-full px-6";
diff --git a/desktop/src/features/onboarding/ui/SetupStep.tsx b/desktop/src/features/onboarding/ui/SetupStep.tsx
index 843206aa70..40d62ccd39 100644
--- a/desktop/src/features/onboarding/ui/SetupStep.tsx
+++ b/desktop/src/features/onboarding/ui/SetupStep.tsx
@@ -685,25 +685,28 @@ function SetupStepContent({
       />
 
       <OnboardingFooter>
-        <Button
-          className={`${ONBOARDING_PRIMARY_CTA_CLASS} text-sm`}
-          data-testid="onboarding-setup-next"
-          disabled={readyRuntimeIds.length === 0}
-          onClick={() => actions.next(readyRuntimeIds)}
-          type="button"
-        >
-          Next
-        </Button>
-
-        <Button
-          className="h-9 rounded-full bg-foreground/10 px-6 text-sm hover:bg-foreground/15"
-          data-testid="onboarding-setup-skip"
-          onClick={() => actions.next([])}
-          type="button"
-          variant="ghost"
-        >
-          Skip for now
-        </Button>
+        {/* Relative row keeps the primary CTA truly centered while Skip
+            hangs off its right edge without shifting the center. */}
+        <div className="relative flex items-center justify-center">
+          <Button
+            className={`${ONBOARDING_PRIMARY_CTA_CLASS} text-sm`}
+            data-testid="onboarding-setup-next"
+            disabled={readyRuntimeIds.length === 0}
+            onClick={() => actions.next(readyRuntimeIds)}
+            type="button"
+          >
+            Next
+          </Button>
+          <Button
+            className="absolute left-full ml-3 h-9 animate-in whitespace-nowrap rounded-full px-6 text-sm fade-in fill-mode-backwards [animation-delay:1000ms] animation-duration-[500ms] hover:bg-foreground/10 motion-reduce:animate-none"
+            data-testid="onboarding-setup-skip"
+            onClick={() => actions.next([])}
+            type="button"
+            variant="ghost"
+          >
+            Skip for now
+          </Button>
+        </div>
 
         <Button
           className="h-9 rounded-full bg-foreground/10 px-6 text-sm hover:bg-foreground/15"
diff --git a/desktop/tests/e2e/onboarding-backup.spec.ts b/desktop/tests/e2e/onboarding-backup.spec.ts
index 4570b002cb..ed3a60cc02 100644
--- a/desktop/tests/e2e/onboarding-backup.spec.ts
+++ b/desktop/tests/e2e/onboarding-backup.spec.ts
@@ -89,8 +89,9 @@ test("chooser shows masked key; reveal and copy fetch it explicitly", async ({
 });
 
 // ---------------------------------------------------------------------------
-// Encrypted download path: password → encrypt locally → native save → saved
-// confirmation. The raw key must never be fetched on this path.
+// Encrypted download path ("Backup your key" step): password → encrypt
+// locally → native save → saved confirmation. The raw key must never be
+// fetched on this path.
 // ---------------------------------------------------------------------------
 
 test("download happy path: generated password, encrypt, native save, Next", async ({
@@ -98,13 +99,15 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
 }) => {
   await enterMachineBackup(page);
 
-  // The download flow sits behind the footer CTA.
+  // The download flow is its own onboarding step behind the footer CTA.
   await expect(page.getByTestId("backup-intro-logo")).toHaveCount(0);
   await page.getByTestId("backup-option-download").click();
+  await expect(page.getByTestId("onboarding-page-download")).toBeVisible();
 
-  // Default mode: generated password shown, but backup remains optional.
+  // Default mode: generated password shown; the create button sits in the
+  // footer's primary slot until the encrypted payload exists.
   await expect(page.getByTestId("backup-passphrase-generated")).toBeVisible();
-  await expect(page.getByTestId("onboarding-next")).toBeEnabled();
+  await expect(page.getByTestId("onboarding-next")).toHaveCount(0);
 
   await waitForAnimations(page);
   await page.screenshot({ path: `${SHOTS}/03-backup-download-passphrase.png` });
@@ -135,17 +138,17 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
   await expect(page.getByTestId("onboarding-page-2")).toBeVisible();
 });
 
-test("download view returns to the chooser via All backup options", async ({
-  page,
-}) => {
+test("download step Back returns to the backup chooser", async ({ page }) => {
   await enterMachineBackup(page);
 
   await page.getByTestId("backup-option-download").click();
+  await expect(page.getByTestId("onboarding-page-download")).toBeVisible();
   await expect(page.getByTestId("backup-passphrase-generated")).toBeVisible();
-  // The footer download CTA hides while the flow is open.
+  // The chooser's footer CTA belongs to the previous step.
   await expect(page.getByTestId("backup-option-download")).toHaveCount(0);
 
-  await page.getByTestId("backup-back-to-options").click();
+  await page.getByTestId("onboarding-back").click();
+  await expect(page.getByTestId("onboarding-page-backup")).toBeVisible();
   await expect(page.getByTestId("backup-key-value")).toBeVisible();
   await expect(page.getByTestId("backup-option-download")).toBeVisible();
 });
diff --git a/desktop/tests/helpers/onboarding.ts b/desktop/tests/helpers/onboarding.ts
index 7b35c29f9f..be36a852ad 100644
--- a/desktop/tests/helpers/onboarding.ts
+++ b/desktop/tests/helpers/onboarding.ts
@@ -16,13 +16,10 @@ export async function seedActiveIdentity(
   );
 }
 
-/** Navigate through the backup step (fresh-key path, encrypted default). */
+/** Navigate through the backup step (fresh-key path). */
 export async function passThroughBackupStep(page: Page) {
   await expect(page.getByTestId("onboarding-page-backup")).toBeVisible();
-  // Encrypted-by-default: create the backup with the generated passphrase,
-  // then advance. (The raw key path is behind "Show raw key instead".)
-  await expect(page.getByTestId("backup-passphrase-generated")).toBeVisible();
-  await page.getByTestId("encrypted-backup-create").click();
-  await expect(page.getByTestId("ncryptsec-value")).toBeVisible();
+  // Backing up is recommended, never required — "Skip for now" advances
+  // straight to setup without visiting the "Backup your key" step.
   await page.getByTestId("onboarding-next").click();
 }

From b4782d143126dfcb7af3b5ff6bf973bd3f9886e8 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Tue, 28 Jul 2026 23:20:30 -0700
Subject: [PATCH 06/21] feat(onboarding): single password field with
 1Password-style generator for key backup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the two-mode (generated vs custom + confirm) encrypted-backup
passphrase UI with a single password input and an inset generator, and make
encryption eager so Download commits instantly in the common case.

- EncryptedBackupCreator.tsx: single password input (eye reveal toggle) with
  a refresh icon inset in the field that anchors a 1Password-style popover
  containing only Words (range slider, 3-10) and Separator (Spaces default,
  Hyphens/Periods/Commas) controls; every generation (open, control change,
  repeat icon clicks) writes straight into the field — no candidate preview
  or Use button. Popover stays open across re-rolls; only click-outside or
  Esc closes it. Validation hint is absolutely positioned below the field
  (text-xs, fade + slide-down) so it never shifts layout.
- encryptedBackup.ts: state model rewritten for eager background encryption —
  the KDF starts (debounced 400ms) as soon as the passphrase is valid,
  results are keyed by passphrase so stale completions never commit, and
  Download either commits a finished result instantly or queues until the
  in-flight encryption lands (downloadPending). New helpers:
  pendingEncryptPassphrase, isEncrypting, downloadDisabled, passphraseIssue.
- DownloadKeyStep.tsx: subtitle merges the password-safety hint and drops the
  encryption-mechanics sentence; Back is locked via onBusyChange while a
  queued download resolves.
- key_backup.rs / commands/identity.rs: generate_passphrase now takes word
  count (clamped 3-10, default 3) and separator (default space); phrases
  under MIN_PASSPHRASE_LEN are re-drawn so 3-word draws always pass the same
  length gate as typed passphrases.
- tauriIdentity.ts: generateBackupPassphrase accepts { words, separator }.
- e2eBridge.ts: mocked generator honors word count and separator from a
  fixed deterministic word pool so specs can assert the popover controls.
- onboarding-backup.spec.ts: happy path drives the generator popover (open,
  slider, separator select, re-roll, Esc) and the custom-password test drops
  the confirm field; encryptedBackup.test.mjs rewritten for the eager
  lifecycle (queued download, stale results, failure retry).

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/src-tauri/src/commands/identity.rs    |  15 +-
 desktop/src-tauri/src/key_backup.rs           |  55 +-
 desktop/src-tauri/src/key_backup_tests.rs     |  32 +-
 .../onboarding/lib/encryptedBackup.test.mjs   | 267 +++++----
 .../onboarding/lib/encryptedBackup.ts         | 182 ++++---
 .../onboarding/ui/DownloadKeyStep.tsx         |   8 +-
 .../onboarding/ui/EncryptedBackupCreator.tsx  | 506 +++++++++++-------
 desktop/src/shared/api/tauriIdentity.ts       |  18 +-
 desktop/src/testing/e2eBridge.ts              |  33 +-
 desktop/tests/e2e/onboarding-backup.spec.ts   |  49 +-
 10 files changed, 759 insertions(+), 406 deletions(-)

diff --git a/desktop/src-tauri/src/commands/identity.rs b/desktop/src-tauri/src/commands/identity.rs
index b5074f4437..9abecbd2cf 100644
--- a/desktop/src-tauri/src/commands/identity.rs
+++ b/desktop/src-tauri/src/commands/identity.rs
@@ -188,11 +188,18 @@ pub fn get_nsec(state: State<'_, AppState>) -> Result<String, String> {
         .map_err(|error| format!("encode nsec: {error}"))
 }
 
-/// Generate a 6-word passphrase for a new encrypted backup (EFF short
-/// wordlist, OS entropy, ≈62 bits before the scrypt work factor).
+/// Generate a passphrase for a new encrypted backup (EFF short wordlist, OS
+/// entropy). `words` is clamped to the range allowed by `key_backup`;
+/// `separator` joins the words (defaults to a space).
 #[tauri::command]
-pub fn generate_backup_passphrase() -> Result<String, String> {
-    crate::key_backup::generate_passphrase()
+pub fn generate_backup_passphrase(
+    words: Option<u32>,
+    separator: Option<String>,
+) -> Result<String, String> {
+    crate::key_backup::generate_passphrase(
+        words.map_or(crate::key_backup::DEFAULT_PASSPHRASE_WORDS, |w| w as usize),
+        separator.as_deref().unwrap_or(" "),
+    )
 }
 
 /// Core of [`create_ncryptsec_backup`], factored so tests can drive it with a
diff --git a/desktop/src-tauri/src/key_backup.rs b/desktop/src-tauri/src/key_backup.rs
index c8b16c1569..0a19fb1431 100644
--- a/desktop/src-tauri/src/key_backup.rs
+++ b/desktop/src-tauri/src/key_backup.rs
@@ -37,9 +37,15 @@ pub const BACKUP_LOG_N: u8 = 18;
 /// Filename of the app-managed canonical backup inside the app data dir.
 pub const BACKUP_FILE_NAME: &str = "identity.ncryptsec";
 
-/// Number of words in a generated backup passphrase. Six words from a
-/// 1296-word list ≈ 62 bits of entropy before the scrypt work factor.
-const PASSPHRASE_WORDS: usize = 6;
+/// Default number of words in a generated backup passphrase. Three words
+/// from a 1296-word list ≈ 31 bits of entropy before the scrypt work factor.
+pub const DEFAULT_PASSPHRASE_WORDS: usize = 3;
+
+/// Bounds for the generator's word-count control. At the lower bound a draw
+/// can fall below [`MIN_PASSPHRASE_LEN`] (three 3-char words), so
+/// [`generate_passphrase`] re-draws until the phrase meets the minimum.
+pub const MIN_PASSPHRASE_WORDS: usize = 3;
+pub const MAX_PASSPHRASE_WORDS: usize = 10;
 
 /// EFF short wordlist 2.0 (1296 words, one per line).
 const WORDLIST: &str = include_str!("assets/eff_short_wordlist_2_0.txt");
@@ -189,10 +195,17 @@ pub fn cleanup_stale_backup(
     Ok(())
 }
 
-/// Generate a 6-word passphrase from the EFF short wordlist using OS entropy.
+/// Generate a passphrase of `word_count` EFF short-wordlist words joined by
+/// `separator`, using OS entropy.
 ///
-/// Uses rejection sampling for a uniform distribution over the 1296 words.
-pub fn generate_passphrase() -> Result<String, String> {
+/// `word_count` is clamped to `MIN_PASSPHRASE_WORDS..=MAX_PASSPHRASE_WORDS`.
+/// Because a low-word-count draw can land under [`MIN_PASSPHRASE_LEN`]
+/// (e.g. three 3-char words), whole phrases below the minimum are rejected
+/// and re-drawn — the result always passes the same length gate applied to
+/// user-chosen passphrases. Uses rejection sampling for a uniform
+/// distribution over the 1296 words.
+pub fn generate_passphrase(word_count: usize, separator: &str) -> Result<String, String> {
+    let word_count = word_count.clamp(MIN_PASSPHRASE_WORDS, MAX_PASSPHRASE_WORDS);
     let words: Vec<&str> = WORDLIST.lines().filter(|l| !l.is_empty()).collect();
     if words.len() != 1296 {
         return Err(format!(
@@ -201,19 +214,27 @@ pub fn generate_passphrase() -> Result<String, String> {
         ));
     }
 
-    let mut chosen: Vec<&str> = Vec::with_capacity(PASSPHRASE_WORDS);
-    while chosen.len() < PASSPHRASE_WORDS {
-        let mut buf = [0u8; 2];
-        getrandom::getrandom(&mut buf).map_err(|e| format!("entropy source: {e}"))?;
-        let value = u16::from_le_bytes(buf);
-        // Rejection sampling: accept only values below the largest multiple
-        // of 1296 that fits in u16 (65536 - 65536 % 1296 = 64800).
-        if value < 64800 {
-            chosen.push(words[(value as usize) % 1296]);
+    // At 3 words the under-length probability per draw is small, so a few
+    // attempts always suffice; the cap only guards against a logic bug
+    // becoming an infinite loop.
+    for _ in 0..128 {
+        let mut chosen: Vec<&str> = Vec::with_capacity(word_count);
+        while chosen.len() < word_count {
+            let mut buf = [0u8; 2];
+            getrandom::getrandom(&mut buf).map_err(|e| format!("entropy source: {e}"))?;
+            let value = u16::from_le_bytes(buf);
+            // Rejection sampling: accept only values below the largest
+            // multiple of 1296 that fits in u16 (65536 - 65536 % 1296 = 64800).
+            if value < 64800 {
+                chosen.push(words[(value as usize) % 1296]);
+            }
+        }
+        let phrase = chosen.join(separator);
+        if phrase.chars().count() >= MIN_PASSPHRASE_LEN {
+            return Ok(phrase);
         }
     }
-
-    Ok(chosen.join(" "))
+    Err("could not generate a passphrase meeting the minimum length".to_string())
 }
 
 #[cfg(test)]
diff --git a/desktop/src-tauri/src/key_backup_tests.rs b/desktop/src-tauri/src/key_backup_tests.rs
index 41e8fa4872..a4e20cd56e 100644
--- a/desktop/src-tauri/src/key_backup_tests.rs
+++ b/desktop/src-tauri/src/key_backup_tests.rs
@@ -198,28 +198,42 @@ fn cleanup_stale_backup_removes_only_on_identity_change() {
 // ── Passphrase generation ─────────────────────────────────────────────────────
 
 #[test]
-fn generated_passphrase_is_six_known_words() {
+fn generated_passphrase_respects_word_count_and_separator() {
     let words: std::collections::HashSet<&str> =
         WORDLIST.lines().filter(|l| !l.is_empty()).collect();
     assert_eq!(words.len(), 1296, "EFF short wordlist 2.0 has 1296 words");
 
-    for _ in 0..8 {
-        let phrase = generate_passphrase().unwrap();
-        let parts: Vec<&str> = phrase.split(' ').collect();
-        assert_eq!(parts.len(), 6);
-        for w in &parts {
-            assert!(words.contains(w), "unknown word {w:?}");
+    for (count, separator) in [(3, "-"), (4, "-"), (6, " "), (5, "."), (10, "")] {
+        let phrase = generate_passphrase(count, separator).unwrap();
+        if separator.is_empty() {
+            // No separator to split on; length gate below still applies.
+        } else {
+            let parts: Vec<&str> = phrase.split(separator).collect();
+            assert_eq!(parts.len(), count);
+            for w in &parts {
+                assert!(words.contains(w), "unknown word {w:?}");
+            }
         }
         assert!(phrase.chars().count() >= MIN_PASSPHRASE_LEN);
     }
 }
 
+#[test]
+fn generated_passphrase_clamps_word_count() {
+    // Below the floor: clamped up to MIN_PASSPHRASE_WORDS, never shorter.
+    let phrase = generate_passphrase(1, "-").unwrap();
+    assert_eq!(phrase.split('-').count(), MIN_PASSPHRASE_WORDS);
+    // Above the ceiling: clamped down to MAX_PASSPHRASE_WORDS.
+    let phrase = generate_passphrase(50, "-").unwrap();
+    assert_eq!(phrase.split('-').count(), MAX_PASSPHRASE_WORDS);
+}
+
 #[test]
 fn generated_passphrases_are_not_repeated() {
-    // 6 words × ~10.3 bits each — a collision across 8 draws would indicate a
+    // 3 words × ~10.3 bits each — a collision across 8 draws would indicate a
     // broken entropy source, not bad luck.
     let mut seen = std::collections::HashSet::new();
     for _ in 0..8 {
-        assert!(seen.insert(generate_passphrase().unwrap()));
+        assert!(seen.insert(generate_passphrase(DEFAULT_PASSPHRASE_WORDS, "-").unwrap()));
     }
 }
diff --git a/desktop/src/features/onboarding/lib/encryptedBackup.test.mjs b/desktop/src/features/onboarding/lib/encryptedBackup.test.mjs
index f118bbf455..d300ab8521 100644
--- a/desktop/src/features/onboarding/lib/encryptedBackup.test.mjs
+++ b/desktop/src/features/onboarding/lib/encryptedBackup.test.mjs
@@ -1,15 +1,17 @@
 /**
  * Pure-logic tests for the encrypted-backup (NIP-49) creation state model.
- * These drive the same reducer + validation helpers the BackupStep and
+ * These drive the same reducer + validation helpers the DownloadKeyStep and
  * settings row use, without a DOM.
  */
 import assert from "node:assert/strict";
 import test from "node:test";
 
 import {
-  MIN_CUSTOM_PASSPHRASE_LEN,
-  createDisabled,
-  customPassphraseIssue,
+  MIN_PASSPHRASE_LEN,
+  downloadDisabled,
+  isEncrypting,
+  passphraseIssue,
+  pendingEncryptPassphrase,
   effectivePassphrase,
   encryptedBackupReducer,
   initialEncryptedBackupState,
@@ -19,138 +21,207 @@ function reduce(events, from = initialEncryptedBackupState) {
   return events.reduce(encryptedBackupReducer, from);
 }
 
-// ── generated-passphrase mode (default) ─────────────────────────────────────
+// ── passphrase validation ────────────────────────────────────────────────────
+
+test("download_disabled_until_passphrase_meets_min_length", () => {
+  assert.equal(downloadDisabled(initialEncryptedBackupState), true);
+
+  const short = reduce([{ type: "set-passphrase", value: "short" }]);
+  assert.equal(effectivePassphrase(short), null);
+  assert.equal(downloadDisabled(short), true);
 
-test("create_disabled_until_generated_passphrase_arrives", () => {
-  assert.equal(createDisabled(initialEncryptedBackupState), true);
   const ready = reduce([
-    {
-      type: "passphrase-generated",
-      passphrase: "alpha bravo carbon delta echo fox",
-    },
+    { type: "set-passphrase", value: "regency-dawes-bilal-sit" },
   ]);
-  assert.equal(createDisabled(ready), false);
-  assert.equal(effectivePassphrase(ready), "alpha bravo carbon delta echo fox");
+  assert.equal(effectivePassphrase(ready), "regency-dawes-bilal-sit");
+  assert.equal(downloadDisabled(ready), false);
+});
+
+test("passphrase_issue_messages", () => {
+  // Empty input: no scolding while the user hasn't typed anything.
+  assert.equal(passphraseIssue(""), null);
+  assert.match(passphraseIssue("short"), new RegExp(`${MIN_PASSPHRASE_LEN}`));
+  assert.equal(passphraseIssue("a".repeat(MIN_PASSPHRASE_LEN)), null);
+});
+
+test("min_length_counts_code_points_not_utf16_units", () => {
+  // 12 astral-plane emoji = 24 UTF-16 units but 12 code points; mirrors the
+  // Rust chars().count() gate so both sides agree on the boundary.
+  const emoji = "😀".repeat(MIN_PASSPHRASE_LEN);
+  assert.equal(passphraseIssue(emoji), null);
+  const ready = reduce([{ type: "set-passphrase", value: emoji }]);
+  assert.equal(effectivePassphrase(ready), emoji);
 });
 
-test("regenerate_replaces_passphrase_and_clears_generate_error", () => {
+test("editing_passphrase_clears_create_error", () => {
   const failed = reduce([
-    { type: "passphrase-generate-failed", message: "boom" },
+    { type: "set-passphrase", value: "regency-dawes-bilal-sit" },
+    { type: "encrypt-started", passphrase: "regency-dawes-bilal-sit" },
+    {
+      type: "encrypt-failed",
+      passphrase: "regency-dawes-bilal-sit",
+      message: "keychain unavailable",
+    },
   ]);
-  assert.equal(failed.generateError, "boom");
-  const recovered = reduce(
-    [{ type: "passphrase-generated", passphrase: "a b c d e f" }],
+  assert.equal(failed.createError, "keychain unavailable");
+  const edited = reduce(
+    [{ type: "set-passphrase", value: "regency-dawes-bilal-sat" }],
     failed,
   );
-  assert.equal(recovered.generateError, null);
-  assert.equal(recovered.generatedPassphrase, "a b c d e f");
+  assert.equal(edited.createError, null);
 });
 
-// ── custom-passphrase mode ───────────────────────────────────────────────────
+// ── eager encryption lifecycle ───────────────────────────────────────────────
+
+test("valid_passphrase_requests_background_encryption", () => {
+  assert.equal(pendingEncryptPassphrase(initialEncryptedBackupState), null);
 
-test("custom_mode_requires_min_length_and_matching_confirm", () => {
-  const base = reduce([
-    { type: "passphrase-generated", passphrase: "gen gen gen gen gen gen" },
-    { type: "set-mode", mode: "custom" },
+  const short = reduce([{ type: "set-passphrase", value: "short" }]);
+  assert.equal(pendingEncryptPassphrase(short), null);
+
+  const ready = reduce([
+    { type: "set-passphrase", value: "one-two-three-four" },
   ]);
+  assert.equal(pendingEncryptPassphrase(ready), "one-two-three-four");
 
-  // Too short — even though a generated passphrase exists, custom mode must
-  // not silently fall back to it.
-  const short = reduce(
-    [
-      { type: "set-custom-passphrase", value: "short" },
-      { type: "set-custom-confirm", value: "short" },
-    ],
-    base,
+  const started = reduce(
+    [{ type: "encrypt-started", passphrase: "one-two-three-four" }],
+    ready,
+  );
+  assert.equal(isEncrypting(started), true);
+  assert.equal(
+    pendingEncryptPassphrase(started),
+    null,
+    "no duplicate start while the KDF runs",
   );
-  assert.equal(effectivePassphrase(short), null);
-  assert.equal(createDisabled(short), true);
 
-  // Long enough but mismatched confirm.
-  const mismatched = reduce(
+  const done = reduce(
     [
       {
-        type: "set-custom-passphrase",
-        value: "a".repeat(MIN_CUSTOM_PASSPHRASE_LEN),
+        type: "encrypt-succeeded",
+        passphrase: "one-two-three-four",
+        ncryptsec: "ncryptsec1abc",
       },
+    ],
+    started,
+  );
+  assert.equal(isEncrypting(done), false);
+  assert.equal(pendingEncryptPassphrase(done), null, "result cached");
+  assert.equal(done.ncryptsec, null, "nothing commits before Download");
+});
+
+test("stale_encryption_results_are_dropped_and_retriggered", () => {
+  const editedMidFlight = reduce([
+    { type: "set-passphrase", value: "one-two-three-four" },
+    { type: "encrypt-started", passphrase: "one-two-three-four" },
+    { type: "set-passphrase", value: "five-six-seven-eight" },
+  ]);
+  // The new passphrase needs its own run even while the old one is in flight.
+  assert.equal(
+    pendingEncryptPassphrase(editedMidFlight),
+    "five-six-seven-eight",
+  );
+
+  const staleLanded = reduce(
+    [
+      { type: "encrypt-started", passphrase: "five-six-seven-eight" },
       {
-        type: "set-custom-confirm",
-        value: "b".repeat(MIN_CUSTOM_PASSPHRASE_LEN),
+        type: "encrypt-succeeded",
+        passphrase: "one-two-three-four",
+        ncryptsec: "ncryptsec1stale",
       },
     ],
-    base,
+    editedMidFlight,
+  );
+  assert.equal(staleLanded.encrypted.passphrase, "one-two-three-four");
+  assert.equal(staleLanded.ncryptsec, null, "stale result never commits");
+  assert.equal(
+    isEncrypting(staleLanded),
+    true,
+    "current passphrase still encrypting",
   );
-  assert.equal(effectivePassphrase(mismatched), null);
 
-  // Valid.
-  const ok = reduce(
+  const staleFailed = reduce(
     [
-      { type: "set-custom-passphrase", value: "correct horse battery" },
-      { type: "set-custom-confirm", value: "correct horse battery" },
+      {
+        type: "encrypt-failed",
+        passphrase: "one-two-three-four",
+        message: "boom",
+      },
     ],
-    base,
+    editedMidFlight,
   );
-  assert.equal(effectivePassphrase(ok), "correct horse battery");
-  assert.equal(createDisabled(ok), false);
+  assert.equal(staleFailed.createError, null, "stale failures are silent");
 });
 
-test("custom_passphrase_issue_messages", () => {
-  // Empty input: no scolding while the user hasn't typed anything.
-  assert.equal(customPassphraseIssue("", ""), null);
-  assert.match(
-    customPassphraseIssue("short", ""),
-    new RegExp(`${MIN_CUSTOM_PASSPHRASE_LEN}`),
-  );
-  // Mismatch is only reported once confirm has content.
-  assert.equal(customPassphraseIssue("a".repeat(12), ""), null);
-  assert.match(customPassphraseIssue("a".repeat(12), "b"), /match/);
-  assert.equal(customPassphraseIssue("a".repeat(12), "a".repeat(12)), null);
-});
+// ── download commit ──────────────────────────────────────────────────────────
 
-test("min_length_counts_code_points_not_utf16_units", () => {
-  // 12 astral-plane emoji = 24 UTF-16 units but 12 code points; mirrors the
-  // Rust chars().count() gate so both sides agree on the boundary.
-  const emoji = "😀".repeat(MIN_CUSTOM_PASSPHRASE_LEN);
-  assert.equal(customPassphraseIssue(emoji, emoji), null);
-  const ready = reduce([
-    { type: "set-mode", mode: "custom" },
-    { type: "set-custom-passphrase", value: emoji },
-    { type: "set-custom-confirm", value: emoji },
+test("download_commits_instantly_when_encryption_is_done", () => {
+  const state = reduce([
+    { type: "set-passphrase", value: "one-two-three-four" },
+    { type: "encrypt-started", passphrase: "one-two-three-four" },
+    {
+      type: "encrypt-succeeded",
+      passphrase: "one-two-three-four",
+      ncryptsec: "ncryptsec1abc",
+    },
+    { type: "download-clicked" },
   ]);
-  assert.equal(effectivePassphrase(ready), emoji);
+  assert.equal(state.ncryptsec, "ncryptsec1abc");
+  assert.equal(state.downloadPending, false);
 });
 
-// ── create lifecycle ─────────────────────────────────────────────────────────
-
-test("create_lifecycle_happy_path_and_failure", () => {
-  const ready = reduce([
-    { type: "passphrase-generated", passphrase: "one two three four five six" },
+test("download_during_encryption_queues_then_commits_on_success", () => {
+  const queued = reduce([
+    { type: "set-passphrase", value: "one-two-three-four" },
+    { type: "encrypt-started", passphrase: "one-two-three-four" },
+    { type: "download-clicked" },
   ]);
+  assert.equal(queued.downloadPending, true);
+  assert.equal(queued.ncryptsec, null);
+  assert.equal(downloadDisabled(queued), true, "no double-click while queued");
 
-  const creating = reduce([{ type: "create-started" }], ready);
-  assert.equal(creating.isCreating, true);
-  assert.equal(
-    createDisabled(creating),
-    true,
-    "no double-create while KDF runs",
+  const committed = reduce(
+    [
+      {
+        type: "encrypt-succeeded",
+        passphrase: "one-two-three-four",
+        ncryptsec: "ncryptsec1abc",
+      },
+    ],
+    queued,
   );
+  assert.equal(committed.ncryptsec, "ncryptsec1abc");
+  assert.equal(committed.downloadPending, false);
+});
 
-  const failed = reduce(
-    [{ type: "create-failed", message: "keychain unavailable" }],
-    creating,
-  );
-  assert.equal(failed.isCreating, false);
+test("queued_download_clears_on_failure_so_user_can_retry", () => {
+  const failed = reduce([
+    { type: "set-passphrase", value: "one-two-three-four" },
+    { type: "encrypt-started", passphrase: "one-two-three-four" },
+    { type: "download-clicked" },
+    {
+      type: "encrypt-failed",
+      passphrase: "one-two-three-four",
+      message: "keychain unavailable",
+    },
+  ]);
+  assert.equal(failed.downloadPending, false);
   assert.equal(failed.createError, "keychain unavailable");
-  assert.equal(createDisabled(failed), false, "retry allowed after failure");
+  assert.equal(downloadDisabled(failed), false, "retry allowed after failure");
+});
 
-  const done = reduce(
-    [
-      { type: "create-started" },
-      { type: "create-succeeded", ncryptsec: "ncryptsec1abc" },
-    ],
-    failed,
+test("download_click_before_encryption_starts_still_queues", () => {
+  // Click lands inside the debounce window: nothing started yet, but the
+  // pending flag makes the eventual result commit.
+  const queued = reduce([
+    { type: "set-passphrase", value: "one-two-three-four" },
+    { type: "download-clicked" },
+  ]);
+  assert.equal(queued.downloadPending, true);
+  assert.equal(
+    pendingEncryptPassphrase(queued),
+    "one-two-three-four",
+    "host still needs to start the KDF",
   );
-  assert.equal(done.isCreating, false);
-  assert.equal(done.ncryptsec, "ncryptsec1abc");
-  assert.equal(done.createError, null);
 });
diff --git a/desktop/src/features/onboarding/lib/encryptedBackup.ts b/desktop/src/features/onboarding/lib/encryptedBackup.ts
index c8f790591a..ff616bf965 100644
--- a/desktop/src/features/onboarding/lib/encryptedBackup.ts
+++ b/desktop/src/features/onboarding/lib/encryptedBackup.ts
@@ -1,117 +1,161 @@
 /**
  * Pure state model for the encrypted-key-backup (NIP-49) creation flow,
- * shared by the onboarding BackupStep and the settings Password Backup row.
+ * shared by the onboarding DownloadKeyStep and the settings Password Backup
+ * row.
  *
  * All validation and phase logic lives here so it can be unit-tested without
  * React. Hosts wire the reducer to the Tauri commands
  * (`generate_backup_passphrase`, `create_ncryptsec_backup`) and dispatch
  * events; the model never touches the raw private key — by construction the
  * default backup path cannot invoke `get_nsec`.
+ *
+ * Encryption is eager: the moment the passphrase is valid the host kicks off
+ * the KDF in the background (`pendingEncryptPassphrase` tells it what to
+ * start). Clicking Download either commits an already-finished result
+ * immediately or flags `downloadPending` so the commit happens as soon as the
+ * in-flight encryption lands. Results are keyed by passphrase, so stale
+ * completions for an edited passphrase are ignored.
+ *
+ * The flow is a single password field. The "Generate password" popover is
+ * host-local UI state (word count, separator, candidate) — accepting a
+ * candidate simply dispatches `set-passphrase`, so the model doesn't
+ * distinguish typed from generated passwords.
  */
 
-export type PassphraseMode = "generated" | "custom";
-
 /** Mirrors `MIN_PASSPHRASE_LEN` in `src-tauri/src/key_backup.rs`. */
-export const MIN_CUSTOM_PASSPHRASE_LEN = 12;
+export const MIN_PASSPHRASE_LEN = 12;
 
 export type EncryptedBackupState = {
-  /** Six-word passphrase generated in Rust; null until loaded. */
-  generatedPassphrase: string | null;
-  generateError: string | null;
-  mode: PassphraseMode;
-  customPassphrase: string;
-  customConfirm: string;
-  isCreating: boolean;
+  passphrase: string;
+  /** Passphrase whose KDF is currently running in the background, if any. */
+  encryptingPassphrase: string | null;
+  /** Most recent completed encryption, keyed by the passphrase it used. */
+  encrypted: { passphrase: string; ncryptsec: string } | null;
   createError: string | null;
-  /** The persisted `ncryptsec1…` blob once the backup exists. */
+  /** True when Download was clicked while encryption was still in flight. */
+  downloadPending: boolean;
+  /** The committed `ncryptsec1…` blob once the user downloads the backup. */
   ncryptsec: string | null;
 };
 
 export const initialEncryptedBackupState: EncryptedBackupState = {
-  generatedPassphrase: null,
-  generateError: null,
-  mode: "generated",
-  customPassphrase: "",
-  customConfirm: "",
-  isCreating: false,
+  passphrase: "",
+  encryptingPassphrase: null,
+  encrypted: null,
   createError: null,
+  downloadPending: false,
   ncryptsec: null,
 };
 
 export type EncryptedBackupEvent =
-  | { type: "passphrase-generated"; passphrase: string }
-  | { type: "passphrase-generate-failed"; message: string }
-  | { type: "set-mode"; mode: PassphraseMode }
-  | { type: "set-custom-passphrase"; value: string }
-  | { type: "set-custom-confirm"; value: string }
-  | { type: "create-started" }
-  | { type: "create-succeeded"; ncryptsec: string }
-  | { type: "create-failed"; message: string };
+  | { type: "set-passphrase"; value: string }
+  | { type: "encrypt-started"; passphrase: string }
+  | { type: "encrypt-succeeded"; passphrase: string; ncryptsec: string }
+  | { type: "encrypt-failed"; passphrase: string; message: string }
+  | { type: "download-clicked" };
 
 export function encryptedBackupReducer(
   state: EncryptedBackupState,
   event: EncryptedBackupEvent,
 ): EncryptedBackupState {
   switch (event.type) {
-    case "passphrase-generated":
+    case "set-passphrase":
+      return { ...state, passphrase: event.value, createError: null };
+    case "encrypt-started":
       return {
         ...state,
-        generatedPassphrase: event.passphrase,
-        generateError: null,
+        encryptingPassphrase: event.passphrase,
+        createError: null,
+      };
+    case "encrypt-succeeded": {
+      const next: EncryptedBackupState = {
+        ...state,
+        encryptingPassphrase:
+          state.encryptingPassphrase === event.passphrase
+            ? null
+            : state.encryptingPassphrase,
+        encrypted: {
+          passphrase: event.passphrase,
+          ncryptsec: event.ncryptsec,
+        },
       };
-    case "passphrase-generate-failed":
-      return { ...state, generateError: event.message };
-    case "set-mode":
-      // Editing state carries across toggles; validation re-derives.
-      return { ...state, mode: event.mode, createError: null };
-    case "set-custom-passphrase":
-      return { ...state, customPassphrase: event.value, createError: null };
-    case "set-custom-confirm":
-      return { ...state, customConfirm: event.value, createError: null };
-    case "create-started":
-      return { ...state, isCreating: true, createError: null };
-    case "create-succeeded":
-      return { ...state, isCreating: false, ncryptsec: event.ncryptsec };
-    case "create-failed":
-      return { ...state, isCreating: false, createError: event.message };
+      // A pending download commits the moment the matching result lands;
+      // results for an edited (stale) passphrase never commit.
+      if (state.downloadPending && event.passphrase === state.passphrase) {
+        return {
+          ...next,
+          downloadPending: false,
+          ncryptsec: event.ncryptsec,
+        };
+      }
+      return next;
+    }
+    case "encrypt-failed": {
+      const next: EncryptedBackupState = {
+        ...state,
+        encryptingPassphrase:
+          state.encryptingPassphrase === event.passphrase
+            ? null
+            : state.encryptingPassphrase,
+      };
+      // Stale failures (passphrase already edited) are silent — a fresh
+      // encryption for the current passphrase is already on its way.
+      if (event.passphrase !== state.passphrase) return next;
+      return { ...next, createError: event.message, downloadPending: false };
+    }
+    case "download-clicked": {
+      const passphrase = effectivePassphrase(state);
+      if (!passphrase || state.downloadPending || state.ncryptsec) return state;
+      if (state.encrypted?.passphrase === passphrase) {
+        return { ...state, ncryptsec: state.encrypted.ncryptsec };
+      }
+      return { ...state, downloadPending: true };
+    }
   }
 }
 
 /**
- * Validation issue for a custom passphrase, or null when acceptable.
- * Confirm mismatch is only reported once the confirm field has content, so
- * the user isn't scolded mid-typing.
+ * Validation issue for the passphrase, or null when acceptable. An empty
+ * field reports nothing so the user isn't scolded before typing.
  */
-export function customPassphraseIssue(
-  passphrase: string,
-  confirm: string,
-): string | null {
+export function passphraseIssue(passphrase: string): string | null {
   if (passphrase.length === 0) return null;
-  if ([...passphrase].length < MIN_CUSTOM_PASSPHRASE_LEN) {
-    return `Use at least ${MIN_CUSTOM_PASSPHRASE_LEN} characters.`;
-  }
-  if (confirm.length > 0 && passphrase !== confirm) {
-    return "Passphrases don't match.";
+  if ([...passphrase].length < MIN_PASSPHRASE_LEN) {
+    return `Use at least ${MIN_PASSPHRASE_LEN} characters.`;
   }
   return null;
 }
 
-/** The passphrase the Create action would submit, or null when not ready. */
+/** The passphrase a download would use, or null when not yet valid. */
 export function effectivePassphrase(
   state: EncryptedBackupState,
 ): string | null {
-  if (state.mode === "generated") return state.generatedPassphrase;
-  const { customPassphrase, customConfirm } = state;
-  if (
-    [...customPassphrase].length < MIN_CUSTOM_PASSPHRASE_LEN ||
-    customPassphrase !== customConfirm
-  ) {
-    return null;
-  }
-  return customPassphrase;
+  if ([...state.passphrase].length < MIN_PASSPHRASE_LEN) return null;
+  return state.passphrase;
+}
+
+/**
+ * The passphrase the host should start encrypting now, or null when nothing
+ * needs to start (invalid, already encrypted, already in flight, or done).
+ */
+export function pendingEncryptPassphrase(
+  state: EncryptedBackupState,
+): string | null {
+  if (state.ncryptsec) return null;
+  const passphrase = effectivePassphrase(state);
+  if (!passphrase) return null;
+  if (state.encrypted?.passphrase === passphrase) return null;
+  if (state.encryptingPassphrase === passphrase) return null;
+  return passphrase;
+}
+
+/** Whether the current passphrase's encryption is still running. */
+export function isEncrypting(state: EncryptedBackupState): boolean {
+  const passphrase = effectivePassphrase(state);
+  return passphrase !== null && state.encryptingPassphrase === passphrase;
 }
 
-/** Whether the "Create backup" action is currently actionable. */
-export function createDisabled(state: EncryptedBackupState): boolean {
-  return state.isCreating || effectivePassphrase(state) === null;
+/** Whether the Download action is currently actionable. */
+export function downloadDisabled(state: EncryptedBackupState): boolean {
+  return state.downloadPending || effectivePassphrase(state) === null;
 }
diff --git a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
index 40f5e503f1..ec6ac72a4f 100644
--- a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
+++ b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
@@ -78,7 +78,7 @@ export function DownloadKeyStep({
   // True once the encrypted payload exists — the create button (living in the
   // footer's primary slot) disappears with the form, so Next takes its place.
   const [hasCreated, setHasCreated] = React.useState(false);
-  // Footer slot the creator portals its "Encrypt and download" button into.
+  // Footer slot the creator portals its "Download" button into.
   const [createButtonSlot, setCreateButtonSlot] =
     React.useState<HTMLElement | null>(null);
 
@@ -96,9 +96,9 @@ export function DownloadKeyStep({
           Backup your key
         </h1>
         <p className="mt-5 text-sm leading-6 text-foreground/80">
-          Your key is encrypted with your password before it downloads. Keep the
-          file private — you need both it and the password to restore your
-          identity.
+          Keep the downloaded file private — you need both it and your password
+          to restore your identity. Save the password somewhere safe; Buzz
+          cannot reset it if lost.
         </p>
       </div>
 
diff --git a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
index d0704e6fda..d2d24df7d4 100644
--- a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
+++ b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
@@ -1,4 +1,4 @@
-import { AlertTriangle, RefreshCw } from "lucide-react";
+import { AlertTriangle, Eye, EyeOff, RefreshCw } from "lucide-react";
 import * as React from "react";
 import { createPortal } from "react-dom";
 
@@ -10,26 +10,48 @@ import {
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Input } from "@/shared/ui/input";
+import { Popover, PopoverAnchor, PopoverContent } from "@/shared/ui/popover";
 import { Spinner } from "@/shared/ui/spinner";
 import {
-  createDisabled,
-  customPassphraseIssue,
+  downloadDisabled,
+  isEncrypting,
+  passphraseIssue,
+  pendingEncryptPassphrase,
   encryptedBackupReducer,
   initialEncryptedBackupState,
-  MIN_CUSTOM_PASSPHRASE_LEN,
-  effectivePassphrase,
+  MIN_PASSPHRASE_LEN,
 } from "../lib/encryptedBackup";
 import { NsecMaskedDisplay } from "./NsecMaskedDisplay";
 
+/** Word-count bounds mirroring `key_backup.rs` (Rust clamps regardless). */
+const MIN_GENERATED_WORDS = 3;
+const MAX_GENERATED_WORDS = 10;
+const DEFAULT_GENERATED_WORDS = 3;
+
+const SEPARATOR_OPTIONS = [
+  { label: "Spaces", value: " " },
+  { label: "Hyphens", value: "-" },
+  { label: "Periods", value: "." },
+  { label: "Commas", value: "," },
+] as const;
+
+const DEFAULT_SEPARATOR = SEPARATOR_OPTIONS[0].value;
+
+/**
+ * Pause after the last keystroke before the background KDF starts, so typing
+ * past the minimum length doesn't launch an encryption per character.
+ */
+const ENCRYPT_DEBOUNCE_MS = 400;
+
 type EncryptedBackupCreatorProps = {
   /** "spotlight" is the onboarding treatment; "boxed" fits settings cards. */
   variant?: "spotlight" | "boxed";
   /**
-   * When set, the "Encrypt and download" button is portaled into this element
+   * When set, the "Download" button is portaled into this element
    * (e.g. the onboarding footer's primary slot) instead of rendering inline.
    */
   createButtonPortal?: HTMLElement | null;
-  /** Extra classes for the "Encrypt and download" button. */
+  /** Extra classes for the "Download" button. */
   createButtonClassName?: string;
   /** Fired once the encrypted payload has been created (before saving). */
   onCreated?: () => void;
@@ -37,11 +59,177 @@ type EncryptedBackupCreatorProps = {
   onSaved?: (path: string) => void;
 };
 
+/**
+ * 1Password-style memorable-password generator popover with word-count and
+ * separator fields, anchored to a refresh icon inset in the password field
+ * (the anchor assumes a `relative` parent). The first click opens the
+ * popover and generates; further clicks on the icon re-roll while the
+ * popover stays open — only click-outside or Esc closes it. There is no
+ * candidate preview: every generation writes the passphrase straight into
+ * the parent's password field via `onGenerated`.
+ */
+function PassphraseGeneratorPopover({
+  disabled = false,
+  onGenerated,
+}: {
+  disabled?: boolean;
+  onGenerated: (value: string) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [words, setWords] = React.useState(DEFAULT_GENERATED_WORDS);
+  const [separator, setSeparator] = React.useState<string>(DEFAULT_SEPARATOR);
+  const [error, setError] = React.useState<string | null>(null);
+  const anchorRef = React.useRef<HTMLButtonElement | null>(null);
+  const mountedRef = React.useRef(true);
+  // Read via a ref so `generate` stays reference-stable even though parents
+  // pass an inline `onGenerated`. Otherwise each generated password would
+  // re-render the parent, rebuild `generate`, and re-fire the open/controls
+  // effect below — an infinite generate loop while the popover is open.
+  const onGeneratedRef = React.useRef(onGenerated);
+
+  React.useEffect(() => {
+    onGeneratedRef.current = onGenerated;
+  }, [onGenerated]);
+
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  const generate = React.useCallback(async (wordCount: number, sep: string) => {
+    setError(null);
+    try {
+      const passphrase = await generateBackupPassphrase({
+        words: wordCount,
+        separator: sep,
+      });
+      if (mountedRef.current) onGeneratedRef.current(passphrase);
+    } catch (err) {
+      if (!mountedRef.current) return;
+      setError(
+        err instanceof Error ? err.message : "Failed to generate a password.",
+      );
+    }
+  }, []);
+
+  // Fill the password field on every open and whenever a control changes.
+  React.useEffect(() => {
+    if (open) void generate(words, separator);
+  }, [open, words, separator, generate]);
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      {/* Anchor (not Trigger): Radix triggers toggle on click, but repeat
+          clicks here must generate a fresh password while the popover stays
+          open. Only click-outside or Esc closes it. */}
+      <PopoverAnchor asChild>
+        <Button
+          aria-label="Generate a password"
+          className="absolute right-9 top-1/2 h-8 w-8 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          data-testid="backup-passphrase-generate"
+          disabled={disabled}
+          onClick={() => {
+            // The open effect below generates the first password; later
+            // clicks re-roll with the current controls.
+            if (!open) setOpen(true);
+            else void generate(words, separator);
+          }}
+          ref={anchorRef}
+          size="icon"
+          type="button"
+          variant="ghost"
+        >
+          <RefreshCw className="h-4 w-4" aria-hidden="true" />
+        </Button>
+      </PopoverAnchor>
+      <PopoverContent
+        align="end"
+        className="w-72 space-y-3"
+        onInteractOutside={(event) => {
+          // Clicking the anchor icon is "outside" the content — keep the
+          // popover open so that click re-rolls instead of closing.
+          if (
+            event.target instanceof Node &&
+            anchorRef.current?.contains(event.target)
+          ) {
+            event.preventDefault();
+          }
+        }}
+        onOpenAutoFocus={(event) => event.preventDefault()}
+      >
+        <div className="flex items-center justify-between gap-4">
+          <label
+            className="text-sm text-muted-foreground"
+            htmlFor="backup-passphrase-words"
+          >
+            Words
+          </label>
+          <div className="flex flex-1 items-center justify-end gap-3">
+            <input
+              className="h-1.5 w-full max-w-30 cursor-pointer appearance-none rounded-full bg-foreground/15 accent-primary"
+              id="backup-passphrase-words"
+              data-testid="backup-passphrase-words"
+              max={MAX_GENERATED_WORDS}
+              min={MIN_GENERATED_WORDS}
+              onChange={(event) => setWords(Number(event.target.value))}
+              type="range"
+              value={words}
+            />
+            <span className="w-6 text-right text-sm tabular-nums text-foreground">
+              {words}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between gap-4">
+          <label
+            className="text-sm text-muted-foreground"
+            htmlFor="backup-passphrase-separator"
+          >
+            Separator
+          </label>
+          <select
+            className="h-8 rounded-lg border border-border bg-background px-2 text-sm text-foreground outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
+            id="backup-passphrase-separator"
+            data-testid="backup-passphrase-separator"
+            onChange={(event) => setSeparator(event.target.value)}
+            value={separator}
+          >
+            {SEPARATOR_OPTIONS.map((option) => (
+              <option key={option.label} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {error ? (
+          <p
+            className="flex items-start gap-1.5 text-xs text-destructive"
+            data-testid="backup-passphrase-generate-error"
+          >
+            <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+            {error}
+          </p>
+        ) : null}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 /**
  * Password-first encrypted key download flow shared by onboarding and
  * Settings. The raw private key never enters this component. Rust creates the
  * NIP-49 payload locally, then the native save dialog produces the user-owned
  * file.
+ *
+ * The flow is a single password input; a refresh icon inset in the field
+ * opens a 1Password-style generator popover (word count + separator).
+ * Encryption starts eagerly once the password is valid, so Download usually
+ * opens the save dialog instantly; clicking mid-encryption queues the
+ * download until the KDF finishes.
  */
 export function EncryptedBackupCreator({
   variant = "spotlight",
@@ -54,70 +242,90 @@ export function EncryptedBackupCreator({
     encryptedBackupReducer,
     initialEncryptedBackupState,
   );
+  const [isRevealed, setIsRevealed] = React.useState(false);
   const [savedPath, setSavedPath] = React.useState<string | null>(null);
   const [saveError, setSaveError] = React.useState<string | null>(null);
   const [isSaving, setIsSaving] = React.useState(false);
   const mountedRef = React.useRef(true);
-
-  const generate = React.useCallback(async () => {
-    try {
-      const passphrase = await generateBackupPassphrase();
-      if (mountedRef.current)
-        dispatch({ type: "passphrase-generated", passphrase });
-    } catch (err) {
-      if (mountedRef.current)
-        dispatch({
-          type: "passphrase-generate-failed",
-          message:
-            err instanceof Error
-              ? err.message
-              : "Failed to generate a password.",
-        });
-    }
-  }, []);
+  // The committed blob we've already kicked a save off for — guards the
+  // commit effect against re-running on unrelated re-renders.
+  const savedForRef = React.useRef<string | null>(null);
 
   React.useEffect(() => {
     mountedRef.current = true;
-    void generate();
     return () => {
       mountedRef.current = false;
     };
-  }, [generate]);
+  }, []);
 
-  const handleCreate = React.useCallback(async () => {
-    const passphrase = effectivePassphrase(state);
-    if (!passphrase || state.isCreating) return;
-    dispatch({ type: "create-started" });
-    try {
-      const ncryptsec = await createNcryptsecBackup(passphrase);
-      if (!mountedRef.current) return;
-      dispatch({ type: "create-succeeded", ncryptsec });
-      onCreated?.();
-      setIsSaving(true);
-      setSaveError(null);
-      try {
-        const path = await saveNcryptsecCopy(ncryptsec);
+  // Eager background encryption: start the KDF as soon as the passphrase is
+  // valid (debounced against typing). Results are keyed by passphrase in the
+  // reducer, so a completion for an edited passphrase is dropped there.
+  const pendingPassphrase = pendingEncryptPassphrase(state);
+  const skipDebounce = state.downloadPending;
+  React.useEffect(() => {
+    if (!pendingPassphrase) return;
+    let cancelled = false;
+    const start = () => {
+      if (cancelled || !mountedRef.current) return;
+      dispatch({ type: "encrypt-started", passphrase: pendingPassphrase });
+      void createNcryptsecBackup(pendingPassphrase)
+        .then((ncryptsec) => {
+          if (mountedRef.current)
+            dispatch({
+              type: "encrypt-succeeded",
+              passphrase: pendingPassphrase,
+              ncryptsec,
+            });
+        })
+        .catch((err: unknown) => {
+          if (mountedRef.current)
+            dispatch({
+              type: "encrypt-failed",
+              passphrase: pendingPassphrase,
+              message:
+                err instanceof Error
+                  ? err.message
+                  : "Failed to encrypt your key.",
+            });
+        });
+    };
+    const timer = window.setTimeout(
+      start,
+      skipDebounce ? 0 : ENCRYPT_DEBOUNCE_MS,
+    );
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+    };
+  }, [pendingPassphrase, skipDebounce]);
+
+  // Download commit: fires once per committed blob, whether the commit was
+  // instant (encryption already done) or resolved a queued download.
+  React.useEffect(() => {
+    const ncryptsec = state.ncryptsec;
+    if (!ncryptsec || savedForRef.current === ncryptsec) return;
+    savedForRef.current = ncryptsec;
+    onCreated?.();
+    setIsSaving(true);
+    setSaveError(null);
+    void saveNcryptsecCopy(ncryptsec)
+      .then((path) => {
         if (mountedRef.current && path) {
           setSavedPath(path);
           onSaved?.(path);
         }
-      } catch (err) {
+      })
+      .catch((err: unknown) => {
         if (mountedRef.current)
           setSaveError(
             err instanceof Error ? err.message : "Failed to save your key.",
           );
-      } finally {
+      })
+      .finally(() => {
         if (mountedRef.current) setIsSaving(false);
-      }
-    } catch (err) {
-      if (mountedRef.current)
-        dispatch({
-          type: "create-failed",
-          message:
-            err instanceof Error ? err.message : "Failed to encrypt your key.",
-        });
-    }
-  }, [onCreated, onSaved, state]);
+      });
+  }, [onCreated, onSaved, state.ncryptsec]);
 
   const handleSaveCopy = React.useCallback(async () => {
     if (!state.ncryptsec || isSaving) return;
@@ -140,10 +348,7 @@ export function EncryptedBackupCreator({
   }, [isSaving, onSaved, state.ncryptsec]);
 
   const isSpotlight = variant === "spotlight";
-  const customIssue = customPassphraseIssue(
-    state.customPassphrase,
-    state.customConfirm,
-  );
+  const issue = passphraseIssue(state.passphrase);
 
   if (state.ncryptsec) {
     return (
@@ -188,122 +393,55 @@ export function EncryptedBackupCreator({
 
   return (
     <div
-      className={cn("mx-auto w-full max-w-[500px] space-y-4 text-left")}
+      className={cn("mx-auto w-full max-w-[500px] space-y-3 text-left")}
       data-testid="encrypted-backup-creator"
     >
-      {state.mode === "generated" ? (
-        <div className="space-y-3">
-          {state.generatedPassphrase ? (
-            <div className="rounded-xl bg-white/50 px-6 py-5 text-center">
-              <p
-                className="font-mono text-lg leading-8 text-foreground"
-                data-testid="backup-passphrase-generated"
-              >
-                {state.generatedPassphrase}
-              </p>
-            </div>
-          ) : state.generateError ? (
-            <div
-              className="flex items-start gap-3 rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive"
-              data-testid="backup-passphrase-generate-error"
-            >
-              <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
-              <span>Could not generate a password: {state.generateError}</span>
-            </div>
+      <div className="relative">
+        <Input
+          aria-label="Encryption password"
+          autoComplete="new-password"
+          className="h-10 bg-background pr-19 font-mono"
+          data-testid="backup-passphrase-input"
+          disabled={state.downloadPending}
+          onChange={(event) =>
+            dispatch({ type: "set-passphrase", value: event.target.value })
+          }
+          placeholder={`Password (min ${MIN_PASSPHRASE_LEN} characters)`}
+          type={isRevealed ? "text" : "password"}
+          value={state.passphrase}
+        />
+        <Button
+          aria-label={isRevealed ? "Hide password" : "Reveal password"}
+          className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          data-testid="backup-passphrase-reveal-toggle"
+          onClick={() => setIsRevealed((revealed) => !revealed)}
+          size="icon"
+          type="button"
+          variant="ghost"
+        >
+          {isRevealed ? (
+            <EyeOff className="h-4 w-4" aria-hidden="true" />
           ) : (
-            <div className="flex items-center justify-center gap-2 py-4 text-sm text-foreground/70">
-              <Spinner className="h-4 w-4 border-2" />
-              Generating a password…
-            </div>
+            <Eye className="h-4 w-4" aria-hidden="true" />
           )}
-          <div className="flex items-center justify-center gap-3">
-            <Button
-              className="h-8 gap-1.5 text-sm"
-              data-testid="backup-passphrase-regenerate"
-              onClick={() => void generate()}
-              size="sm"
-              type="button"
-              variant="outline"
-            >
-              <RefreshCw className="h-3.5 w-3.5" />
-              New generated password
-            </Button>
-            <Button
-              className="h-8 text-sm text-muted-foreground hover:text-accent-foreground"
-              data-testid="backup-passphrase-choose-own"
-              onClick={() => dispatch({ type: "set-mode", mode: "custom" })}
-              size="sm"
-              type="button"
-              variant="ghost"
-            >
-              Choose my own
-            </Button>
-          </div>
-          <p className="text-center text-xs leading-5 text-muted-foreground">
-            Save this generated passphrase as your encryption password. Store it
-            separately from the downloaded key file.
-          </p>
-        </div>
-      ) : (
-        <div className="space-y-3">
-          <div className="space-y-2">
-            <Input
-              aria-label="Encryption password"
-              autoComplete="new-password"
-              className="h-10 bg-background"
-              data-testid="backup-passphrase-custom"
-              onChange={(event) =>
-                dispatch({
-                  type: "set-custom-passphrase",
-                  value: event.target.value,
-                })
-              }
-              placeholder={`Password (min ${MIN_CUSTOM_PASSPHRASE_LEN} characters)`}
-              type="password"
-              value={state.customPassphrase}
-            />
-            <Input
-              aria-label="Confirm encryption password"
-              autoComplete="new-password"
-              className="h-10 bg-background"
-              data-testid="backup-passphrase-confirm"
-              onChange={(event) =>
-                dispatch({
-                  type: "set-custom-confirm",
-                  value: event.target.value,
-                })
-              }
-              placeholder="Confirm password"
-              type="password"
-              value={state.customConfirm}
-            />
-          </div>
-          {customIssue ? (
-            <p
-              className="text-sm text-muted-foreground"
-              data-testid="backup-passphrase-issue"
-            >
-              {customIssue}
-            </p>
-          ) : null}
-          <div className="flex items-center justify-center">
-            <Button
-              className="h-8 text-sm text-muted-foreground hover:text-accent-foreground"
-              data-testid="backup-passphrase-use-generated"
-              onClick={() => dispatch({ type: "set-mode", mode: "generated" })}
-              size="sm"
-              type="button"
-              variant="ghost"
-            >
-              Use a generated password
-            </Button>
-          </div>
-          <p className="text-center text-xs leading-5 text-muted-foreground">
-            Your password protects your downloaded key. Buzz cannot reset it if
-            lost.
+        </Button>
+        <PassphraseGeneratorPopover
+          disabled={state.downloadPending}
+          onGenerated={(value) => {
+            dispatch({ type: "set-passphrase", value });
+            // A generated password must be visible so the user can save it.
+            setIsRevealed(true);
+          }}
+        />
+        {issue ? (
+          <p
+            className="absolute left-1 top-full mt-1 animate-in text-xs text-muted-foreground fade-in slide-in-from-top-1 duration-200 motion-reduce:animate-none"
+            data-testid="backup-passphrase-issue"
+          >
+            {issue}
           </p>
-        </div>
-      )}
+        ) : null}
+      </div>
 
       {state.createError ? (
         <p
@@ -315,23 +453,27 @@ export function EncryptedBackupCreator({
       ) : null}
 
       {(() => {
+        // Absolute spinner: signals the background encryption without
+        // shifting the centered button while it appears and disappears.
         const createButton = (
-          <Button
-            className={cn("h-9 rounded-full px-6", createButtonClassName)}
-            data-testid="encrypted-backup-create"
-            disabled={createDisabled(state)}
-            onClick={() => void handleCreate()}
-            type="button"
-          >
-            {state.isCreating ? (
-              <>
-                <Spinner className="h-4 w-4 border-2" />
-                Encrypting… this takes a couple of seconds
-              </>
-            ) : (
-              "Encrypt and download"
-            )}
-          </Button>
+          <div className="relative">
+            {isEncrypting(state) || state.downloadPending ? (
+              <Spinner
+                aria-label="Encrypting your key"
+                className="absolute right-full top-1/2 mr-3 h-4 w-4 -translate-y-1/2 border-2"
+                data-testid="encrypted-backup-encrypting"
+              />
+            ) : null}
+            <Button
+              className={cn("h-9 rounded-full px-6", createButtonClassName)}
+              data-testid="encrypted-backup-create"
+              disabled={downloadDisabled(state)}
+              onClick={() => dispatch({ type: "download-clicked" })}
+              type="button"
+            >
+              {state.downloadPending ? "Downloading once finished" : "Download"}
+            </Button>
+          </div>
         );
         // `undefined` = inline (settings); `null` = slot not mounted yet
         // (skip a frame rather than flashing the button inline).
diff --git a/desktop/src/shared/api/tauriIdentity.ts b/desktop/src/shared/api/tauriIdentity.ts
index 1d961aa16b..91b3a40077 100644
--- a/desktop/src/shared/api/tauriIdentity.ts
+++ b/desktop/src/shared/api/tauriIdentity.ts
@@ -40,9 +40,21 @@ export async function importIdentity(
   );
 }
 
-/** Generate a 6-word passphrase (EFF short wordlist, OS entropy) in Rust. */
-export async function generateBackupPassphrase(): Promise<string> {
-  return invokeTauri<string>("generate_backup_passphrase");
+export type GeneratePassphraseOptions = {
+  /** Word count; Rust clamps to its allowed range (currently 4–10). */
+  words?: number;
+  /** Separator joined between words. Defaults to a space in Rust. */
+  separator?: string;
+};
+
+/** Generate a word passphrase (EFF short wordlist, OS entropy) in Rust. */
+export async function generateBackupPassphrase(
+  options?: GeneratePassphraseOptions,
+): Promise<string> {
+  return invokeTauri<string>("generate_backup_passphrase", {
+    words: options?.words,
+    separator: options?.separator,
+  });
 }
 
 /**
diff --git a/desktop/src/testing/e2eBridge.ts b/desktop/src/testing/e2eBridge.ts
index c376f62662..87a2a3c0b4 100644
--- a/desktop/src/testing/e2eBridge.ts
+++ b/desktop/src/testing/e2eBridge.ts
@@ -7167,6 +7167,21 @@ const MOCK_NCRYPTSEC =
 // The single passphrase the mocked backup commands accept/emit.
 const MOCK_BACKUP_PASSPHRASE = "mock horse battery staple lake orbit";
 
+// Fixed word pool for the mocked passphrase generator (deterministic —
+// specs assert word count and separator, never entropy).
+const MOCK_PASSPHRASE_WORDS = [
+  "mock",
+  "horse",
+  "battery",
+  "staple",
+  "lake",
+  "orbit",
+  "cedar",
+  "plume",
+  "raven",
+  "tundra",
+];
+
 // Per-page confirm_team_snapshot_import call counter for sequenced error testing.
 let teamSnapshotConfirmCallCount = 0;
 
@@ -9589,11 +9604,19 @@ export function maybeInstallE2eTauriMocks() {
         }
         return "nsec1mock000000000000000000000000000000000000000000000000000000";
       }
-      case "generate_backup_passphrase":
-        // Deterministic mock: production generates 6 EFF short-wordlist words
-        // from OS entropy in Rust. Specs only assert display/flow, never
-        // entropy quality.
-        return MOCK_BACKUP_PASSPHRASE;
+      case "generate_backup_passphrase": {
+        // Deterministic mock: production draws EFF short-wordlist words from
+        // OS entropy in Rust. The mock honors the generator popover's word
+        // count and separator (clamped like Rust) so specs can assert the
+        // controls, but never entropy quality.
+        const request = payload as {
+          words?: number;
+          separator?: string;
+        } | null;
+        const wordCount = Math.min(Math.max(request?.words ?? 3, 3), 10);
+        const separator = request?.separator ?? " ";
+        return MOCK_PASSPHRASE_WORDS.slice(0, wordCount).join(separator);
+      }
       case "create_ncryptsec_backup": {
         // Production encrypts the live key under the passphrase, persists
         // `identity.ncryptsec`, and returns the exact persisted blob. The
diff --git a/desktop/tests/e2e/onboarding-backup.spec.ts b/desktop/tests/e2e/onboarding-backup.spec.ts
index ed3a60cc02..2d583692ae 100644
--- a/desktop/tests/e2e/onboarding-backup.spec.ts
+++ b/desktop/tests/e2e/onboarding-backup.spec.ts
@@ -104,14 +104,39 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
   await page.getByTestId("backup-option-download").click();
   await expect(page.getByTestId("onboarding-page-download")).toBeVisible();
 
-  // Default mode: generated password shown; the create button sits in the
-  // footer's primary slot until the encrypted payload exists.
-  await expect(page.getByTestId("backup-passphrase-generated")).toBeVisible();
+  // The password field starts empty; the create button sits in the footer's
+  // primary slot and stays disabled until a valid password exists.
+  const input = page.getByTestId("backup-passphrase-input");
+  await expect(input).toHaveValue("");
+  await expect(page.getByTestId("encrypted-backup-create")).toBeDisabled();
   await expect(page.getByTestId("onboarding-next")).toHaveCount(0);
 
+  // The inset refresh icon opens the generator popover and immediately
+  // fills the field (mock default: 3 words, spaces).
+  await page.getByTestId("backup-passphrase-generate").click();
+  await expect(input).toHaveValue("mock horse battery");
+
+  // Popover controls regenerate in place: word count (slider) and separator.
+  await page.getByTestId("backup-passphrase-words").focus();
+  await page.keyboard.press("ArrowRight");
+  await expect(input).toHaveValue("mock horse battery staple");
+  await page
+    .getByTestId("backup-passphrase-separator")
+    .selectOption({ label: "Hyphens" });
+  await expect(input).toHaveValue("mock-horse-battery-staple");
+
+  // Clicking the inset icon again re-rolls without closing the popover.
+  await page.getByTestId("backup-passphrase-generate").click();
+  await expect(page.getByTestId("backup-passphrase-separator")).toBeVisible();
+
   await waitForAnimations(page);
   await page.screenshot({ path: `${SHOTS}/03-backup-download-passphrase.png` });
 
+  // Esc closes the popover; the generated password stays in the field.
+  await page.keyboard.press("Escape");
+  await expect(page.getByTestId("backup-passphrase-separator")).toHaveCount(0);
+  await expect(input).toHaveValue("mock-horse-battery-staple");
+
   await page.getByTestId("encrypted-backup-create").click();
 
   // The locally created blob stays masked; the portable save action is explicit.
@@ -143,7 +168,7 @@ test("download step Back returns to the backup chooser", async ({ page }) => {
 
   await page.getByTestId("backup-option-download").click();
   await expect(page.getByTestId("onboarding-page-download")).toBeVisible();
-  await expect(page.getByTestId("backup-passphrase-generated")).toBeVisible();
+  await expect(page.getByTestId("backup-passphrase-input")).toBeVisible();
   // The chooser's footer CTA belongs to the previous step.
   await expect(page.getByTestId("backup-option-download")).toHaveCount(0);
 
@@ -153,27 +178,21 @@ test("download step Back returns to the backup chooser", async ({ page }) => {
   await expect(page.getByTestId("backup-option-download")).toBeVisible();
 });
 
-test("custom passphrase requires 12 characters and confirmation", async ({
-  page,
-}) => {
+test("typed password requires 12 characters", async ({ page }) => {
   await enterMachineBackup(page);
   await page.getByTestId("backup-option-download").click();
 
-  await page.getByTestId("backup-passphrase-choose-own").click();
   const create = page.getByTestId("encrypted-backup-create");
+  await expect(create).toBeDisabled(); // empty field
 
-  await page.getByTestId("backup-passphrase-custom").fill("short");
+  await page.getByTestId("backup-passphrase-input").fill("short");
   await expect(page.getByTestId("backup-passphrase-issue")).toBeVisible();
   await expect(create).toBeDisabled();
 
   await page
-    .getByTestId("backup-passphrase-custom")
-    .fill("a much longer passphrase");
-  await expect(create).toBeDisabled(); // confirm still empty
-
-  await page
-    .getByTestId("backup-passphrase-confirm")
+    .getByTestId("backup-passphrase-input")
     .fill("a much longer passphrase");
+  await expect(page.getByTestId("backup-passphrase-issue")).toHaveCount(0);
   await expect(create).toBeEnabled();
 });
 

From f940bb753d8dc0218bb96d4442618c54e136e97e Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Tue, 28 Jul 2026 23:34:36 -0700
Subject: [PATCH 07/21] feat(onboarding): ticker label and password lockdown
 for queued key download

Polish the queued-download state of the encrypted key backup flow (Download
clicked while the background KDF is still running):

- EncryptedBackupCreator.tsx: the disabled Download button now shows a
  vertical ticker instead of a static label, cycling "Downloading once
  finished" / "Encrypting your password" / "Just a bit longer..." every 2.5s.
  The stacked column slides up inside a one-line clipped viewport (300ms
  ease-out, motion-reduce safe) and ends with a clone of the first message so
  the loop wraps from the same bottom origin, then snaps back to the real
  first row with the transition disabled once the clone settles. All lines
  render at all times, so the button holds the width of the longest message,
  and the viewport is aria-live=polite for screen readers.
- While the download is queued, the password field flips back to masked and
  the reveal (eye) toggle disables, so the passphrase isn't left readable on
  screen while the user waits for the native save dialog (input and generator
  popover were already locked in this state).

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../onboarding/ui/EncryptedBackupCreator.tsx  | 96 ++++++++++++++++++-
 1 file changed, 95 insertions(+), 1 deletion(-)

diff --git a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
index d2d24df7d4..13bc429087 100644
--- a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
+++ b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
@@ -43,6 +43,93 @@ const DEFAULT_SEPARATOR = SEPARATOR_OPTIONS[0].value;
  */
 const ENCRYPT_DEBOUNCE_MS = 400;
 
+const PENDING_TICKER_MESSAGES = [
+  "Downloading once finished",
+  "Encrypting your password",
+  "Just a bit longer...",
+] as const;
+
+/** How long each ticker message holds before sliding to the next. */
+const PENDING_TICKER_INTERVAL_MS = 2500;
+
+/** Matches the `duration-300` slide transition on the ticker column. */
+const PENDING_TICKER_SLIDE_MS = 300;
+
+/**
+ * Vertical ticker for the queued-download button label — cycles through the
+ * pending messages by sliding a stacked column inside a one-line viewport.
+ * The column ends with a clone of the first message, so the wrap-around
+ * slides up from the bottom like every other step; once the clone settles,
+ * the column snaps (transition disabled) back to the real first row. All
+ * lines render at all times, so the button keeps the width of the longest
+ * message instead of resizing on each swap.
+ */
+function PendingDownloadTicker() {
+  // Index into the rendered column (messages + trailing clone of the first).
+  const [position, setPosition] = React.useState(0);
+  const [snap, setSnap] = React.useState(false);
+
+  React.useEffect(() => {
+    const timer = window.setInterval(
+      () => setPosition((current) => current + 1),
+      PENDING_TICKER_INTERVAL_MS,
+    );
+    return () => window.clearInterval(timer);
+  }, []);
+
+  // The clone is visually identical to the first message: once its slide-in
+  // finishes, jump back to the real first row without animating.
+  React.useEffect(() => {
+    if (position !== PENDING_TICKER_MESSAGES.length) return;
+    const timer = window.setTimeout(() => {
+      setSnap(true);
+      setPosition(0);
+    }, PENDING_TICKER_SLIDE_MS);
+    return () => window.clearTimeout(timer);
+  }, [position]);
+
+  // Re-enable the transition one frame after the snap has painted.
+  React.useEffect(() => {
+    if (!snap) return;
+    const raf = window.requestAnimationFrame(() => setSnap(false));
+    return () => window.cancelAnimationFrame(raf);
+  }, [snap]);
+
+  // The clone row duplicates the first message's text, so it carries its own
+  // stable key.
+  const column = [
+    ...PENDING_TICKER_MESSAGES.map((message) => ({ key: message, message })),
+    { key: "wrap-clone", message: PENDING_TICKER_MESSAGES[0] },
+  ];
+
+  return (
+    <span
+      aria-live="polite"
+      className="relative block h-5 overflow-hidden"
+      data-testid="encrypted-backup-pending-ticker"
+    >
+      <span
+        className={cn(
+          "block ease-out",
+          snap
+            ? "transition-none"
+            : "transition-transform duration-300 motion-reduce:transition-none",
+        )}
+        style={{ transform: `translateY(-${position * 1.25}rem)` }}
+      >
+        {column.map((row) => (
+          <span
+            className="flex h-5 items-center justify-center whitespace-nowrap"
+            key={row.key}
+          >
+            {row.message}
+          </span>
+        ))}
+      </span>
+    </span>
+  );
+}
+
 type EncryptedBackupCreatorProps = {
   /** "spotlight" is the onboarding treatment; "boxed" fits settings cards. */
   variant?: "spotlight" | "boxed";
@@ -258,6 +345,12 @@ export function EncryptedBackupCreator({
     };
   }, []);
 
+  // A queued download locks the form — mask the password too so it isn't
+  // left readable on screen while the user waits for the save dialog.
+  React.useEffect(() => {
+    if (state.downloadPending) setIsRevealed(false);
+  }, [state.downloadPending]);
+
   // Eager background encryption: start the KDF as soon as the passphrase is
   // valid (debounced against typing). Results are keyed by passphrase in the
   // reducer, so a completion for an edited passphrase is dropped there.
@@ -414,6 +507,7 @@ export function EncryptedBackupCreator({
           aria-label={isRevealed ? "Hide password" : "Reveal password"}
           className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2 text-muted-foreground hover:text-foreground"
           data-testid="backup-passphrase-reveal-toggle"
+          disabled={state.downloadPending}
           onClick={() => setIsRevealed((revealed) => !revealed)}
           size="icon"
           type="button"
@@ -471,7 +565,7 @@ export function EncryptedBackupCreator({
               onClick={() => dispatch({ type: "download-clicked" })}
               type="button"
             >
-              {state.downloadPending ? "Downloading once finished" : "Download"}
+              {state.downloadPending ? <PendingDownloadTicker /> : "Download"}
             </Button>
           </div>
         );

From 3b635e384244eaa1cb20364fe729b550857b18d1 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 29 Jul 2026 09:49:43 -0700
Subject: [PATCH 08/21] feat(onboarding): chooser CTA becomes Next; skip and
 Backup key label move to download step

Soften the backup chooser and shift the opt-out into the download step:

- BackupStep.tsx: replace the "Backup your key" primary CTA
  (backup-option-download) with a plain "Next" button (onboarding-next) that
  leads into the download step via onDownload; remove the "Skip for now"
  button and the now-unused onNext prop. backupNextDisabled() still gates the
  new Next (always actionable).
- MachineOnboardingFlow.tsx: drop the removed onNext prop from the
  <BackupStep> call site.
- DownloadKeyStep.tsx: add a "Skip for now" ghost button (onboarding-skip,
  calls onNext) absolutely positioned off the right edge of the footer's
  create-button slot, so the Download CTA stays centered; it renders only
  until the backup exists, after which the primary slot swaps to Next.
- EncryptedBackupCreator.tsx: rename the idle Download button to "Backup key"
  (the pending-download ticker is unchanged).
- E2E: passThroughBackupStep and the docked-CTA screenshot spec route
  Next -> download page -> Skip; onboarding-backup.spec.ts swaps every
  backup-option-download click for onboarding-next, routes the two
  skip-to-setup paths through onboarding-skip, and asserts the skip button on
  the download page.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../src/features/onboarding/ui/BackupStep.tsx | 49 ++++++-------------
 .../onboarding/ui/DownloadKeyStep.tsx         | 23 +++++++--
 .../onboarding/ui/EncryptedBackupCreator.tsx  |  2 +-
 .../onboarding/ui/MachineOnboardingFlow.tsx   |  1 -
 desktop/tests/e2e/onboarding-backup.spec.ts   | 25 ++++++----
 .../onboarding-docked-cta-screenshots.spec.ts |  3 ++
 desktop/tests/helpers/onboarding.ts           |  8 +--
 7 files changed, 58 insertions(+), 53 deletions(-)

diff --git a/desktop/src/features/onboarding/ui/BackupStep.tsx b/desktop/src/features/onboarding/ui/BackupStep.tsx
index 4419b6e63e..2ab7434910 100644
--- a/desktop/src/features/onboarding/ui/BackupStep.tsx
+++ b/desktop/src/features/onboarding/ui/BackupStep.tsx
@@ -34,7 +34,7 @@ let introPlayed = false;
 const REVEAL_ANIMATION_CLASS =
   "animate-in fade-in duration-700 motion-reduce:animate-none";
 
-/** Saving a Keycase is recommended, never required to continue onboarding. */
+/** Viewing the key never blocks onboarding — Next is always actionable. */
 export function backupNextDisabled(): boolean {
   return false;
 }
@@ -44,22 +44,16 @@ type BackupStepProps = {
   onBack: () => void;
   /** Advances to the dedicated "Download your key" onboarding step. */
   onDownload: () => void;
-  onNext: () => void;
 };
 
 /**
- * Onboarding backup step — shows the freshly created key and offers two ways
- * to back it up without blocking setup: the encrypted download flow (its own
- * onboarding step, via `onDownload`) or a direct clipboard copy destined for
- * a password manager. The raw key is fetched only when the user explicitly
+ * Onboarding backup step — shows the freshly created key and offers a direct
+ * clipboard copy destined for a password manager. Next leads into the
+ * encrypted download step (its own onboarding page, via `onDownload`), which
+ * is skippable there. The raw key is fetched only when the user explicitly
  * clicks Copy or Reveal, and is never held in state before that.
  */
-export function BackupStep({
-  direction,
-  onBack,
-  onDownload,
-  onNext,
-}: BackupStepProps) {
+export function BackupStep({ direction, onBack, onDownload }: BackupStepProps) {
   const [created, setCreated] = React.useState(introPlayed);
   const [copyState, setCopyState] = React.useState<
     "idle" | "copying" | "copied"
@@ -284,28 +278,15 @@ export function BackupStep({
 
       {created ? (
         <OnboardingFooter className={REVEAL_ANIMATION_CLASS}>
-          {/* Relative row keeps the primary CTA truly centered while Skip
-              hangs off its right edge without shifting the center. */}
-          <div className="relative flex items-center justify-center">
-            <Button
-              className={ONBOARDING_PRIMARY_CTA_CLASS}
-              data-testid="backup-option-download"
-              onClick={onDownload}
-              type="button"
-            >
-              Backup your key
-            </Button>
-            <Button
-              className="absolute left-full ml-3 h-9 animate-in whitespace-nowrap rounded-full px-6 fade-in fill-mode-backwards [animation-delay:1000ms] animation-duration-[500ms] hover:bg-foreground/10 motion-reduce:animate-none"
-              data-testid="onboarding-next"
-              disabled={backupNextDisabled()}
-              onClick={onNext}
-              type="button"
-              variant="ghost"
-            >
-              Skip for now
-            </Button>
-          </div>
+          <Button
+            className={ONBOARDING_PRIMARY_CTA_CLASS}
+            data-testid="onboarding-next"
+            disabled={backupNextDisabled()}
+            onClick={onDownload}
+            type="button"
+          >
+            Next
+          </Button>
 
           <Button
             className="h-9 rounded-full bg-foreground/10 px-6 hover:bg-foreground/15"
diff --git a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
index ec6ac72a4f..cf4a9228e4 100644
--- a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
+++ b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
@@ -158,11 +158,24 @@ export function DownloadKeyStep({
             Next
           </Button>
         ) : (
-          <div
-            className="flex justify-center"
-            data-testid="onboarding-create-slot"
-            ref={setCreateButtonSlot}
-          />
+          /* Relative row keeps the Download CTA truly centered while Skip
+             hangs off its right edge without shifting the center. */
+          <div className="relative flex items-center justify-center">
+            <div
+              className="flex justify-center"
+              data-testid="onboarding-create-slot"
+              ref={setCreateButtonSlot}
+            />
+            <Button
+              className="absolute left-full ml-3 h-9 animate-in whitespace-nowrap rounded-full px-6 fade-in fill-mode-backwards [animation-delay:1000ms] animation-duration-[500ms] hover:bg-foreground/10 motion-reduce:animate-none"
+              data-testid="onboarding-skip"
+              onClick={onNext}
+              type="button"
+              variant="ghost"
+            >
+              Skip for now
+            </Button>
+          </div>
         )}
 
         <Button
diff --git a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
index 13bc429087..2726599321 100644
--- a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
+++ b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
@@ -565,7 +565,7 @@ export function EncryptedBackupCreator({
               onClick={() => dispatch({ type: "download-clicked" })}
               type="button"
             >
-              {state.downloadPending ? <PendingDownloadTicker /> : "Download"}
+              {state.downloadPending ? <PendingDownloadTicker /> : "Backup key"}
             </Button>
           </div>
         );
diff --git a/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx b/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
index 0cdec027e1..bdeaaa5308 100644
--- a/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
+++ b/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
@@ -238,7 +238,6 @@ export function MachineOnboardingFlow({
               direction="forward"
               onBack={() => setPage("identity")}
               onDownload={() => setPage("download")}
-              onNext={() => setPage("setup")}
             />
           ) : page === "download" ? (
             <DownloadKeyStep
diff --git a/desktop/tests/e2e/onboarding-backup.spec.ts b/desktop/tests/e2e/onboarding-backup.spec.ts
index 2d583692ae..f05e91c886 100644
--- a/desktop/tests/e2e/onboarding-backup.spec.ts
+++ b/desktop/tests/e2e/onboarding-backup.spec.ts
@@ -82,9 +82,11 @@ test("chooser shows masked key; reveal and copy fetch it explicitly", async ({
     .toContain("copy_text_to_clipboard");
   expect(await invokedCommands(page)).toContain("get_nsec");
 
-  // Backup is recommended, never required.
+  // Next leads into the download step, where backup stays skippable.
   await expect(page.getByTestId("onboarding-next")).toBeEnabled();
   await page.getByTestId("onboarding-next").click();
+  await expect(page.getByTestId("onboarding-page-download")).toBeVisible();
+  await page.getByTestId("onboarding-skip").click();
   await expect(page.getByTestId("onboarding-page-2")).toBeVisible();
 });
 
@@ -99,9 +101,9 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
 }) => {
   await enterMachineBackup(page);
 
-  // The download flow is its own onboarding step behind the footer CTA.
+  // The download flow is its own onboarding step behind the footer's Next.
   await expect(page.getByTestId("backup-intro-logo")).toHaveCount(0);
-  await page.getByTestId("backup-option-download").click();
+  await page.getByTestId("onboarding-next").click();
   await expect(page.getByTestId("onboarding-page-download")).toBeVisible();
 
   // The password field starts empty; the create button sits in the footer's
@@ -110,6 +112,7 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
   await expect(input).toHaveValue("");
   await expect(page.getByTestId("encrypted-backup-create")).toBeDisabled();
   await expect(page.getByTestId("onboarding-next")).toHaveCount(0);
+  await expect(page.getByTestId("onboarding-skip")).toBeVisible();
 
   // The inset refresh icon opens the generator popover and immediately
   // fills the field (mock default: 3 words, spaces).
@@ -166,21 +169,22 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
 test("download step Back returns to the backup chooser", async ({ page }) => {
   await enterMachineBackup(page);
 
-  await page.getByTestId("backup-option-download").click();
+  await page.getByTestId("onboarding-next").click();
   await expect(page.getByTestId("onboarding-page-download")).toBeVisible();
   await expect(page.getByTestId("backup-passphrase-input")).toBeVisible();
-  // The chooser's footer CTA belongs to the previous step.
-  await expect(page.getByTestId("backup-option-download")).toHaveCount(0);
+  // The chooser's footer Next belongs to the previous step; the download
+  // step only mounts its own Next once the backup exists.
+  await expect(page.getByTestId("onboarding-next")).toHaveCount(0);
 
   await page.getByTestId("onboarding-back").click();
   await expect(page.getByTestId("onboarding-page-backup")).toBeVisible();
   await expect(page.getByTestId("backup-key-value")).toBeVisible();
-  await expect(page.getByTestId("backup-option-download")).toBeVisible();
+  await expect(page.getByTestId("onboarding-next")).toBeVisible();
 });
 
 test("typed password requires 12 characters", async ({ page }) => {
   await enterMachineBackup(page);
-  await page.getByTestId("backup-option-download").click();
+  await page.getByTestId("onboarding-next").click();
 
   const create = page.getByTestId("encrypted-backup-create");
   await expect(create).toBeDisabled(); // empty field
@@ -233,9 +237,12 @@ test("reveal shows inline error when get_nsec fails and Next still advances", as
   await page.getByTestId("backup-key-reveal-toggle").click();
 
   await expect(page.getByTestId("backup-copy-error")).toBeVisible();
-  // Keychain failure does not trap the user.
+  // Keychain failure does not trap the user: Next still advances into the
+  // download step, and Skip there continues to setup.
   await expect(page.getByTestId("onboarding-next")).toBeEnabled();
   await page.getByTestId("onboarding-next").click();
+  await expect(page.getByTestId("onboarding-page-download")).toBeVisible();
+  await page.getByTestId("onboarding-skip").click();
   await expect(page.getByTestId("onboarding-page-2")).toBeVisible();
 });
 
diff --git a/desktop/tests/e2e/onboarding-docked-cta-screenshots.spec.ts b/desktop/tests/e2e/onboarding-docked-cta-screenshots.spec.ts
index f9d7c72af9..66965c7ef8 100644
--- a/desktop/tests/e2e/onboarding-docked-cta-screenshots.spec.ts
+++ b/desktop/tests/e2e/onboarding-docked-cta-screenshots.spec.ts
@@ -68,7 +68,10 @@ test("machine onboarding: landing, backup, setup docked CTAs", async ({
   await waitForAnimations(page);
   await page.screenshot({ path: `${SHOT_DIR}/02b-backup-revealed.png` });
 
+  // Next leads into the download step; Skip there continues to setup.
   await page.getByTestId("onboarding-next").click();
+  await expect(page.getByTestId("onboarding-page-download")).toBeVisible();
+  await page.getByTestId("onboarding-skip").click();
   await expect(
     page.getByRole("heading", { name: "Set up your agent harnesses" }),
   ).toBeVisible();
diff --git a/desktop/tests/helpers/onboarding.ts b/desktop/tests/helpers/onboarding.ts
index be36a852ad..afcb3e64f9 100644
--- a/desktop/tests/helpers/onboarding.ts
+++ b/desktop/tests/helpers/onboarding.ts
@@ -16,10 +16,12 @@ export async function seedActiveIdentity(
   );
 }
 
-/** Navigate through the backup step (fresh-key path). */
+/** Navigate through the backup steps (fresh-key path). */
 export async function passThroughBackupStep(page: Page) {
   await expect(page.getByTestId("onboarding-page-backup")).toBeVisible();
-  // Backing up is recommended, never required — "Skip for now" advances
-  // straight to setup without visiting the "Backup your key" step.
+  // Next always leads into the "Backup your key" step; backing up is
+  // recommended, never required — "Skip for now" there advances to setup.
   await page.getByTestId("onboarding-next").click();
+  await expect(page.getByTestId("onboarding-page-download")).toBeVisible();
+  await page.getByTestId("onboarding-skip").click();
 }

From 301e534f6f944bfdfd50b3c2fdab0ab1529393af Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Tue, 28 Jul 2026 23:59:48 -0700
Subject: [PATCH 09/21] feat(onboarding): replace post-download blob view with
 Test your backup flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add BackupTestFlow.tsx: after downloading the Keycase, the step becomes an
  explicit "Test your backup" view — a large dropzone for the downloaded
  file, then a password prompt that succeeds the instant the password is
  typed completely, ending in a spring-in check badge with an emoji burst
  celebration (skipped under reduced motion)
- Verification is instant and KDF-free: the dropped file's bytes are
  compared to the committed ncryptsec blob and the typed password to the
  in-memory passphrase, so no key material beyond what the creator already
  held enters the component
- Wrong files get inline errors (Keycase-but-different vs not-a-Keycase);
  full-length wrong passwords get a mismatch hint; a "Re-download backup"
  button re-opens the native save dialog and "Use a different file" returns
  to the dropzone
- EncryptedBackupCreator.tsx: swap the masked-ncryptsec result view
  (NsecMaskedDisplay + "Save a copy…") for BackupTestFlow
- DownloadKeyStep.tsx: header/subtitle now conditional — "Backup your key
  with a password" while creating, "Test your backup" once created; remove
  the bracketed shell-box visual, the keep-this-file-private hints, and the
  "back up anytime in Settings" footer note
- BackupStep.tsx / MachineOnboardingFlow.tsx: chooser footer "Next" now
  always leads into the download step (skip lives there as "Skip for now")
- Update onboarding-backup.spec.ts happy path to drive the new flow
  (wrong file, right file, wrong password, success, Next) with screenshots;
  align docked-CTA spec and passThroughBackupStep helper with the new
  navigation; allowlist BackupTestFlow.tsx in the ncryptsec source scan

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../features/onboarding/ui/BackupTestFlow.tsx | 396 ++++++++++++++++++
 .../onboarding/ui/DownloadKeyStep.tsx         |  83 +---
 .../onboarding/ui/EncryptedBackupCreator.tsx  |  46 +-
 .../shared/lib/ncryptsecSourceScan.test.mjs   |   1 +
 desktop/tests/e2e/onboarding-backup.spec.ts   |  62 ++-
 5 files changed, 463 insertions(+), 125 deletions(-)
 create mode 100644 desktop/src/features/onboarding/ui/BackupTestFlow.tsx

diff --git a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
new file mode 100644
index 0000000000..5b857de8ae
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
@@ -0,0 +1,396 @@
+import { Check, Eye, EyeOff, FileKey2, FileUp } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import * as React from "react";
+
+import { cn } from "@/shared/lib/cn";
+import { Button } from "@/shared/ui/button";
+import { Input } from "@/shared/ui/input";
+import { Spinner } from "@/shared/ui/spinner";
+
+type BackupTestStage = "drop" | "password" | "success";
+
+type BackupTestFlowProps = {
+  /** "spotlight" is the onboarding treatment; "boxed" fits settings cards. */
+  variant?: "spotlight" | "boxed";
+  /** The exact committed `ncryptsec1…` blob the downloaded file contains. */
+  ncryptsec: string;
+  /** The passphrase the backup was encrypted under. */
+  passphrase: string;
+  /** Re-open the native save dialog for another copy of the backup file. */
+  onSaveCopy: () => void;
+  isSaving: boolean;
+  savedPath: string | null;
+  saveError: string | null;
+  /** Fired once when the user completes the test successfully. */
+  onVerified?: () => void;
+};
+
+const BURST_EMOJIS = ["🎉", "✨", "🐝", "🍯", "🔑", "💛"] as const;
+const BURST_PARTICLE_COUNT = 18;
+
+type BurstParticle = {
+  id: number;
+  x: number;
+  y: number;
+  emoji: string;
+  delay: number;
+  scale: number;
+  rotate: number;
+};
+
+/**
+ * One-shot radial emoji burst behind the success badge. Purely decorative —
+ * skipped entirely under reduced motion.
+ */
+function SuccessBurst() {
+  const particles = React.useMemo<BurstParticle[]>(
+    () =>
+      Array.from({ length: BURST_PARTICLE_COUNT }, (_, i) => {
+        const angle =
+          (i / BURST_PARTICLE_COUNT) * Math.PI * 2 + Math.random() * 0.5;
+        const distance = 70 + Math.random() * 80;
+        return {
+          id: i,
+          x: Math.cos(angle) * distance,
+          y: Math.sin(angle) * distance,
+          emoji: BURST_EMOJIS[i % BURST_EMOJIS.length],
+          delay: Math.random() * 0.18,
+          scale: 0.8 + Math.random() * 0.7,
+          rotate: -120 + Math.random() * 240,
+        };
+      }),
+    [],
+  );
+
+  return (
+    <div
+      aria-hidden
+      className="pointer-events-none absolute inset-0 flex items-center justify-center overflow-visible"
+    >
+      {particles.map((particle) => (
+        <motion.span
+          animate={{
+            x: particle.x,
+            y: particle.y,
+            opacity: 0,
+            scale: particle.scale,
+            rotate: particle.rotate,
+          }}
+          className="absolute text-xl"
+          initial={{ x: 0, y: 0, opacity: 1, scale: 0.3, rotate: 0 }}
+          key={particle.id}
+          transition={{
+            duration: 0.9,
+            delay: particle.delay,
+            ease: "easeOut",
+          }}
+        >
+          {particle.emoji}
+        </motion.span>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Post-download "Test your backup" flow: the user drops the file they just
+ * downloaded onto a large dropzone, then retypes their password. Both checks
+ * run instantly in memory — the dropped file's bytes must equal the committed
+ * blob and the typed password must equal the passphrase that encrypted it —
+ * so there is no second KDF run and no key material beyond what the creator
+ * already held.
+ */
+export function BackupTestFlow({
+  variant = "spotlight",
+  ncryptsec,
+  passphrase,
+  onSaveCopy,
+  isSaving,
+  savedPath,
+  saveError,
+  onVerified,
+}: BackupTestFlowProps) {
+  const reduceMotion = useReducedMotion() ?? false;
+  const [stage, setStage] = React.useState<BackupTestStage>("drop");
+  const [isDragActive, setIsDragActive] = React.useState(false);
+  const [fileName, setFileName] = React.useState<string | null>(null);
+  const [fileError, setFileError] = React.useState<string | null>(null);
+  const [attempt, setAttempt] = React.useState("");
+  const [isRevealed, setIsRevealed] = React.useState(false);
+  const fileInputRef = React.useRef<HTMLInputElement | null>(null);
+  const passwordInputRef = React.useRef<HTMLInputElement | null>(null);
+  const mountedRef = React.useRef(true);
+  const verifiedFiredRef = React.useRef(false);
+
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (stage === "password") passwordInputRef.current?.focus();
+  }, [stage]);
+
+  const succeed = React.useCallback(() => {
+    setStage("success");
+    if (!verifiedFiredRef.current) {
+      verifiedFiredRef.current = true;
+      onVerified?.();
+    }
+  }, [onVerified]);
+
+  const handleFile = React.useCallback(
+    async (file: File) => {
+      let text: string;
+      try {
+        text = await file.text();
+      } catch {
+        if (mountedRef.current) setFileError("Could not read that file.");
+        return;
+      }
+      if (!mountedRef.current) return;
+      const trimmed = text.trim();
+      if (trimmed === ncryptsec.trim()) {
+        setFileName(file.name);
+        setFileError(null);
+        setStage("password");
+      } else if (trimmed.toLowerCase().startsWith("ncryptsec1")) {
+        setFileError(
+          "That's a Keycase file, but not the one you just downloaded.",
+        );
+      } else {
+        setFileError(
+          "That doesn't look like your Keycase file. Drop the file you just downloaded.",
+        );
+      }
+    },
+    [ncryptsec],
+  );
+
+  const handlePasswordChange = React.useCallback(
+    (value: string) => {
+      setAttempt(value);
+      if (value === passphrase) succeed();
+    },
+    [passphrase, succeed],
+  );
+
+  const isSpotlight = variant === "spotlight";
+  // Only scold once the attempt is at least as long as the real password —
+  // never mid-typing.
+  const attemptWrong =
+    stage === "password" &&
+    attempt !== passphrase &&
+    [...attempt].length >= [...passphrase].length;
+
+  if (stage === "success") {
+    return (
+      <div
+        className="relative flex flex-col items-center gap-4 py-4 text-center"
+        data-testid="backup-test-success"
+      >
+        {reduceMotion ? null : <SuccessBurst />}
+        <motion.div
+          animate={{ scale: 1, opacity: 1 }}
+          className="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground"
+          initial={reduceMotion ? false : { scale: 0, opacity: 0 }}
+          transition={
+            reduceMotion
+              ? { duration: 0 }
+              : { type: "spring", stiffness: 380, damping: 18 }
+          }
+        >
+          <Check aria-hidden="true" className="h-8 w-8" strokeWidth={3} />
+        </motion.div>
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          initial={reduceMotion ? false : { opacity: 0, y: 8 }}
+          transition={
+            reduceMotion ? { duration: 0 } : { delay: 0.15, duration: 0.35 }
+          }
+        >
+          <p className="text-lg font-medium text-foreground">
+            Your backup works!
+          </p>
+          <p className="mt-1.5 text-sm leading-6 text-muted-foreground">
+            File and password verified. Keep them both somewhere safe — that's
+            all you need to restore your identity.
+          </p>
+        </motion.div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "mx-auto w-full space-y-4",
+        isSpotlight ? "max-w-140" : "max-w-125",
+      )}
+      data-testid="backup-test-flow"
+    >
+      {stage === "drop" ? (
+        <>
+          <input
+            accept=".ncryptsec,text/plain"
+            className="sr-only"
+            data-testid="backup-test-file-input"
+            onChange={(event) => {
+              const file = event.target.files?.[0];
+              // Allow re-selecting the same file after an error.
+              event.target.value = "";
+              if (file) void handleFile(file);
+            }}
+            ref={fileInputRef}
+            tabIndex={-1}
+            type="file"
+          />
+          <button
+            className={cn(
+              "flex w-full flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed px-6 text-center transition-colors",
+              isSpotlight ? "h-44" : "h-32",
+              isDragActive
+                ? "border-primary bg-primary/10"
+                : "border-foreground/25 bg-background/40 hover:border-foreground/40 hover:bg-background/70",
+            )}
+            data-testid="backup-test-dropzone"
+            onClick={() => fileInputRef.current?.click()}
+            onDragLeave={() => setIsDragActive(false)}
+            onDragOver={(event) => {
+              event.preventDefault();
+              setIsDragActive(true);
+            }}
+            onDrop={(event) => {
+              event.preventDefault();
+              setIsDragActive(false);
+              const file = event.dataTransfer.files?.[0];
+              if (file) void handleFile(file);
+            }}
+            type="button"
+          >
+            <FileUp
+              aria-hidden="true"
+              className={cn(
+                "h-8 w-8 transition-colors",
+                isDragActive ? "text-primary" : "text-muted-foreground",
+              )}
+            />
+            <span className="text-sm font-medium text-foreground">
+              Drop your backup file here
+            </span>
+            <span className="text-xs text-muted-foreground">
+              or click to browse for it
+            </span>
+          </button>
+          {fileError ? (
+            <p
+              className="text-center text-sm text-destructive"
+              data-testid="backup-test-file-error"
+            >
+              {fileError}
+            </p>
+          ) : null}
+          <div className="flex flex-col items-center gap-2">
+            <Button
+              className="h-8 gap-1.5 text-sm"
+              data-testid="encrypted-backup-save-copy"
+              disabled={isSaving}
+              onClick={onSaveCopy}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              {isSaving ? <Spinner className="h-3.5 w-3.5 border-2" /> : null}
+              Re-download backup
+            </Button>
+            {savedPath ? (
+              <p
+                className="text-center text-xs text-muted-foreground"
+                data-testid="encrypted-backup-saved-path"
+              >
+                Saved to {savedPath}
+              </p>
+            ) : null}
+          </div>
+          {saveError ? (
+            <p className="text-center text-sm text-destructive">{saveError}</p>
+          ) : null}
+        </>
+      ) : (
+        <>
+          <div
+            className="flex items-center justify-center gap-2 text-sm text-foreground animate-in fade-in slide-in-from-bottom-1 duration-300 motion-reduce:animate-none"
+            data-testid="backup-test-file-accepted"
+          >
+            <FileKey2
+              aria-hidden="true"
+              className="h-4 w-4 text-muted-foreground"
+            />
+            <span className="max-w-70 truncate font-mono text-xs">
+              {fileName}
+            </span>
+            <Check aria-hidden="true" className="h-4 w-4 text-primary" />
+          </div>
+          <p className="text-center text-sm leading-6 text-muted-foreground">
+            That's the one. Now type your password to prove you can unlock it.
+          </p>
+          <div className="relative">
+            <Input
+              aria-label="Backup password"
+              autoComplete="off"
+              className="h-10 bg-background pr-10 font-mono"
+              data-testid="backup-test-password"
+              onChange={(event) => handlePasswordChange(event.target.value)}
+              placeholder="Your backup password"
+              ref={passwordInputRef}
+              type={isRevealed ? "text" : "password"}
+              value={attempt}
+            />
+            <Button
+              aria-label={isRevealed ? "Hide password" : "Reveal password"}
+              className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              data-testid="backup-test-password-reveal-toggle"
+              onClick={() => setIsRevealed((revealed) => !revealed)}
+              size="icon"
+              type="button"
+              variant="ghost"
+            >
+              {isRevealed ? (
+                <EyeOff aria-hidden="true" className="h-4 w-4" />
+              ) : (
+                <Eye aria-hidden="true" className="h-4 w-4" />
+              )}
+            </Button>
+            {attemptWrong ? (
+              <p
+                className="absolute left-1 top-full mt-1 text-xs text-destructive animate-in fade-in duration-200 motion-reduce:animate-none"
+                data-testid="backup-test-password-mismatch"
+              >
+                Not quite — check the password you saved.
+              </p>
+            ) : null}
+          </div>
+          <div className="flex justify-center pt-2">
+            <Button
+              className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+              data-testid="backup-test-use-different-file"
+              onClick={() => {
+                setStage("drop");
+                setFileName(null);
+                setAttempt("");
+                setIsRevealed(false);
+              }}
+              size="sm"
+              type="button"
+              variant="ghost"
+            >
+              Use a different file
+            </Button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
index cf4a9228e4..25e18f348f 100644
--- a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
+++ b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
@@ -1,7 +1,6 @@
 import { motion, useReducedMotion } from "motion/react";
 import * as React from "react";
 
-import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Card } from "@/shared/ui/card";
 import { ONBOARDING_PRIMARY_CTA_CLASS } from "./OnboardingChrome";
@@ -12,49 +11,6 @@ import {
 } from "./OnboardingSlideTransition";
 import { EncryptedBackupCreator } from "./EncryptedBackupCreator";
 
-/**
- * One half of the "[   ]" pair that clamps around the shell box once it
- * settles — the visual is the user working on the secure shell that
- * surrounds their key. Brackets close inward as they fade in.
- */
-function ShellBracket({
-  reduceMotion,
-  side,
-  visible,
-}: {
-  reduceMotion: boolean;
-  side: "left" | "right";
-  visible: boolean;
-}) {
-  return (
-    <motion.div
-      animate={
-        visible
-          ? { opacity: 1, x: 0 }
-          : { opacity: 0, x: side === "left" ? -10 : 10 }
-      }
-      aria-hidden
-      className={cn(
-        // The bracket pair frames the h-16 (64px) box as a concentric 96px
-        // square: each line sits 10px clear of the box on every side (plus
-        // the 6px line itself), and the 2rem corner radius wraps the box's
-        // rounded-2xl (16px) corners at a constant 16px offset. The vertical
-        // line lives on the OUTER edge of the 32px-deep arm, so each bracket
-        // pulls 16px back over the box (negative margin) to keep that line
-        // 10px from the box edge.
-        "h-24 w-8 shrink-0 border-black",
-        side === "left"
-          ? "-mr-4 rounded-l-[2rem] border-y-[6px] border-l-[6px]"
-          : "-ml-4 rounded-r-[2rem] border-y-[6px] border-r-[6px]",
-      )}
-      initial={false}
-      transition={
-        reduceMotion ? { duration: 0 } : { duration: 0.35, ease: "easeOut" }
-      }
-    />
-  );
-}
-
 type DownloadKeyStepProps = {
   direction: OnboardingTransitionDirection;
   onBack: () => void;
@@ -73,8 +29,6 @@ export function DownloadKeyStep({
   onNext,
 }: DownloadKeyStepProps) {
   const reduceMotion = useReducedMotion() ?? false;
-  // True once the shell box has landed; gates the closing brackets.
-  const [shellSettled, setShellSettled] = React.useState(false);
   // True once the encrypted payload exists — the create button (living in the
   // footer's primary slot) disappears with the form, so Next takes its place.
   const [hasCreated, setHasCreated] = React.useState(false);
@@ -93,41 +47,17 @@ export function DownloadKeyStep({
         {/* Plain string concat: cn()'s tailwind-merge misreads the custom
             text-title size token as conflicting with text-foreground. */}
         <h1 className="text-title font-normal text-foreground">
-          Backup your key
+          {hasCreated ? "Test your backup" : "Backup your key with a password"}
         </h1>
         <p className="mt-5 text-sm leading-6 text-foreground/80">
-          Keep the downloaded file private — you need both it and your password
-          to restore your identity. Save the password somewhere safe; Buzz
-          cannot reset it if lost.
+          {hasCreated
+            ? "Make sure your backup works: drop the file you just saved and unlock it with your password."
+            : "Keep the downloaded file private — you need both it and your password to restore your identity. Save the backup password somewhere safe; Buzz cannot reset it if lost."}
         </p>
       </div>
 
       <div className="flex w-full max-w-[1040px] flex-1 flex-col justify-center py-10">
         <div className="w-full">
-          <div className="mb-6 flex items-center justify-center">
-            <ShellBracket
-              reduceMotion={reduceMotion}
-              side="left"
-              visible={shellSettled || reduceMotion}
-            />
-            <motion.div
-              animate={{ opacity: 1, scale: 1 }}
-              className="h-16 w-16 rounded-2xl bg-white"
-              data-testid="backup-key-shell"
-              initial={reduceMotion ? false : { opacity: 0, scale: 0.8 }}
-              onAnimationComplete={() => setShellSettled(true)}
-              transition={
-                reduceMotion
-                  ? { duration: 0 }
-                  : { duration: 0.45, ease: [0.22, 1, 0.36, 1] }
-              }
-            />
-            <ShellBracket
-              reduceMotion={reduceMotion}
-              side="right"
-              visible={shellSettled || reduceMotion}
-            />
-          </div>
           <motion.div
             animate={{ opacity: 1, y: 0 }}
             initial={reduceMotion ? false : { opacity: 0, y: 12 }}
@@ -187,11 +117,6 @@ export function DownloadKeyStep({
         >
           Back
         </Button>
-
-        <p className="text-xs text-foreground/50">
-          You can back up your key anytime in Settings &rarr; Profile &rarr;
-          Identity.
-        </p>
       </OnboardingFooter>
     </OnboardingSlideTransition>
   );
diff --git a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
index 2726599321..bcca3fb090 100644
--- a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
+++ b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
@@ -21,7 +21,7 @@ import {
   initialEncryptedBackupState,
   MIN_PASSPHRASE_LEN,
 } from "../lib/encryptedBackup";
-import { NsecMaskedDisplay } from "./NsecMaskedDisplay";
+import { BackupTestFlow } from "./BackupTestFlow";
 
 /** Word-count bounds mirroring `key_backup.rs` (Rust clamps regardless). */
 const MIN_GENERATED_WORDS = 3;
@@ -440,46 +440,20 @@ export function EncryptedBackupCreator({
     }
   }, [isSaving, onSaved, state.ncryptsec]);
 
-  const isSpotlight = variant === "spotlight";
   const issue = passphraseIssue(state.passphrase);
 
   if (state.ncryptsec) {
     return (
-      <div className="space-y-4" data-testid="encrypted-backup-result">
-        <NsecMaskedDisplay
-          kind="ncryptsec"
-          nsec={state.ncryptsec}
-          variant={isSpotlight ? "bare" : "boxed"}
+      <div data-testid="encrypted-backup-result">
+        <BackupTestFlow
+          isSaving={isSaving}
+          ncryptsec={state.ncryptsec}
+          onSaveCopy={() => void handleSaveCopy()}
+          passphrase={state.passphrase}
+          saveError={saveError}
+          savedPath={savedPath}
+          variant={variant}
         />
-        <div className="flex flex-wrap items-center justify-center gap-3">
-          <Button
-            className="h-8 gap-1.5 text-sm"
-            data-testid="encrypted-backup-save-copy"
-            disabled={isSaving}
-            onClick={() => void handleSaveCopy()}
-            size="sm"
-            type="button"
-            variant="outline"
-          >
-            {isSaving ? <Spinner className="h-3.5 w-3.5 border-2" /> : null}
-            Save a copy…
-          </Button>
-          {savedPath ? (
-            <p
-              className="text-xs text-muted-foreground"
-              data-testid="encrypted-backup-saved-path"
-            >
-              Saved to {savedPath}
-            </p>
-          ) : null}
-        </div>
-        {saveError ? (
-          <p className="text-center text-sm text-destructive">{saveError}</p>
-        ) : null}
-        <p className="text-center text-xs leading-5 text-muted-foreground">
-          Keep this file private. You need both the file and its password to
-          restore your identity. Buzz cannot reset the password.
-        </p>
       </div>
     );
   }
diff --git a/desktop/src/shared/lib/ncryptsecSourceScan.test.mjs b/desktop/src/shared/lib/ncryptsecSourceScan.test.mjs
index a30baa6a0d..a64bbea7de 100644
--- a/desktop/src/shared/lib/ncryptsecSourceScan.test.mjs
+++ b/desktop/src/shared/lib/ncryptsecSourceScan.test.mjs
@@ -26,6 +26,7 @@ const ALLOWLIST = [
   "features/onboarding/lib/keyImportInput.ts",
   "features/onboarding/lib/keyImportInput.test.mjs",
   "features/onboarding/ui/BackupStep.tsx",
+  "features/onboarding/ui/BackupTestFlow.tsx",
   "features/onboarding/ui/EncryptedBackupCreator.tsx",
   "features/onboarding/ui/NostrKeyImportForm.tsx",
   "features/onboarding/ui/NsecMaskedDisplay.tsx",
diff --git a/desktop/tests/e2e/onboarding-backup.spec.ts b/desktop/tests/e2e/onboarding-backup.spec.ts
index f05e91c886..6944a6cd2f 100644
--- a/desktop/tests/e2e/onboarding-backup.spec.ts
+++ b/desktop/tests/e2e/onboarding-backup.spec.ts
@@ -21,6 +21,12 @@ async function invokedCommands(page: import("@playwright/test").Page) {
 
 const SHOTS = "test-results/screenshots-onboarding";
 
+// Mirrors the mock bridge's MOCK_NCRYPTSEC (e2eBridge.ts): the blob the
+// mocked `create_ncryptsec_backup` returns, i.e. the "downloaded file"
+// contents the test-your-backup dropzone expects.
+const MOCK_NCRYPTSEC =
+  "ncryptsec1qgg9947rlpvqu76pj5ecreduf9jxhselq2nae2kghhvd5g7dgjtcxfqtd67p9m0w57lspw8gsq6yphnm8623nsl8xn9j4jdzz84zm3frztj3z7s35vpzmqf6ksu8r89qk5z2zxfmu5gv8th8wclt0h4p";
+
 test("backup step appears on fresh-key path after profile submit", async ({
   page,
 }) => {
@@ -142,20 +148,56 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
 
   await page.getByTestId("encrypted-backup-create").click();
 
-  // The locally created blob stays masked; the portable save action is explicit.
-  const blob = page.getByTestId("ncryptsec-value");
-  await expect(blob).toBeVisible();
-  await expect(blob).toHaveCSS("filter", /blur/);
-  await page.getByTestId("ncryptsec-reveal-toggle").click();
-  await expect(blob).toContainText("ncryptsec1");
-
-  await waitForAnimations(page);
-  await page.screenshot({ path: `${SHOTS}/04-backup-download-encrypted.png` });
-
+  // Download commits the blob and hands over to the "Test your backup"
+  // flow: a dropzone for the saved file, then the password to unlock it.
+  await expect(
+    page.getByRole("heading", { name: "Test your backup" }),
+  ).toBeVisible();
+  const dropzone = page.getByTestId("backup-test-dropzone");
+  await expect(dropzone).toBeVisible();
   await expect(page.getByTestId("encrypted-backup-saved-path")).toContainText(
     "identity.ncryptsec",
   );
 
+  await waitForAnimations(page);
+  await page.screenshot({ path: `${SHOTS}/04-backup-test-dropzone.png` });
+
+  // A wrong file is rejected with an inline error; the dropzone stays.
+  await page.getByTestId("backup-test-file-input").setInputFiles({
+    name: "notes.txt",
+    mimeType: "text/plain",
+    buffer: Buffer.from("not a keycase"),
+  });
+  await expect(page.getByTestId("backup-test-file-error")).toBeVisible();
+
+  // The freshly downloaded file advances to the password check.
+  await page.getByTestId("backup-test-file-input").setInputFiles({
+    name: "identity.ncryptsec",
+    mimeType: "text/plain",
+    buffer: Buffer.from(MOCK_NCRYPTSEC),
+  });
+  const password = page.getByTestId("backup-test-password");
+  await expect(password).toBeVisible();
+
+  await waitForAnimations(page);
+  await page.screenshot({ path: `${SHOTS}/05-backup-test-password.png` });
+
+  // A full-length wrong password shows the mismatch hint, never success.
+  await password.fill("mock-horse-battery-staplX");
+  await expect(page.getByTestId("backup-test-password-mismatch")).toBeVisible();
+  await expect(page.getByTestId("backup-test-success")).toHaveCount(0);
+
+  // Typing the password completely succeeds without any extra click.
+  await password.fill("mock-horse-battery-staple");
+  await expect(page.getByTestId("backup-test-success")).toBeVisible();
+
+  // The celebration is driven by motion's rAF loop, which
+  // `waitForAnimations` (WAAPI-only) cannot observe — hold until the badge
+  // and copy have faded in before capturing.
+  await page.waitForTimeout(1200);
+  await waitForAnimations(page);
+  await page.screenshot({ path: `${SHOTS}/06-backup-test-success.png` });
+
   // The download path must never have fetched the raw key.
   const commands = await invokedCommands(page);
   expect(commands).not.toContain("get_nsec");

From 1ec89cdce6c52a8d999fa59e37baed7f4c6fb131 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 29 Jul 2026 00:12:53 -0700
Subject: [PATCH 10/21] feat(onboarding): gate Next on backup test with
 select-button dropzone

- BackupTestFlow.tsx: replace the always-on dashed dropzone with an
  oversized onboarding-style primary pill ("Select your backup file",
  h-14, rounded-full, bg-primary with the onboarding CTA label color)
  that opens the file browser; window-level dragenter/dragleave
  listeners (depth-counted, filtered to file drags) morph it back into
  the dashed drop target only while a file is dragged over the window
- BackupTestFlow.tsx: restyle "Re-download backup" as the flow's ghost
  pill secondary (h-12, rounded-full, bg-foreground/10) and move the
  "Saved to <path>" label below the button in a centered column
- EncryptedBackupCreator.tsx: add onVerified prop and forward it to
  BackupTestFlow so parents can observe a passed backup test
- DownloadKeyStep.tsx: track hasVerified; after the backup is created,
  Next renders disabled until the test passes while a ghost "Skip for
  now" button hangs off its right edge as the escape hatch; retitle the
  post-download page to "Now, test your backup"
- onboarding-backup.spec.ts: assert the new heading, the disabled
  Next + visible Skip state after download, and that a passed test
  enables Next and removes Skip (all 8 tests passing)

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../features/onboarding/ui/BackupTestFlow.tsx | 85 ++++++++++++++-----
 .../onboarding/ui/DownloadKeyStep.tsx         | 40 +++++++--
 .../onboarding/ui/EncryptedBackupCreator.tsx  |  4 +
 desktop/tests/e2e/onboarding-backup.spec.ts   | 14 ++-
 4 files changed, 109 insertions(+), 34 deletions(-)

diff --git a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
index 5b857de8ae..3645312f3f 100644
--- a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
+++ b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
@@ -113,6 +113,38 @@ export function BackupTestFlow({
   const reduceMotion = useReducedMotion() ?? false;
   const [stage, setStage] = React.useState<BackupTestStage>("drop");
   const [isDragActive, setIsDragActive] = React.useState(false);
+  // True while a file drag is anywhere over the window — the select button
+  // renders as a dropzone only for the duration of the drag.
+  const [isWindowDragging, setIsWindowDragging] = React.useState(false);
+  const dragDepthRef = React.useRef(0);
+
+  React.useEffect(() => {
+    // dragenter/dragleave fire per nested element, so track depth to know
+    // when the drag has actually left the window.
+    const handleDragEnter = (event: DragEvent) => {
+      if (!event.dataTransfer?.types.includes("Files")) return;
+      dragDepthRef.current += 1;
+      setIsWindowDragging(true);
+    };
+    const handleDragLeave = () => {
+      dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+      if (dragDepthRef.current === 0) setIsWindowDragging(false);
+    };
+    const handleDragEnd = () => {
+      dragDepthRef.current = 0;
+      setIsWindowDragging(false);
+    };
+    window.addEventListener("dragenter", handleDragEnter);
+    window.addEventListener("dragleave", handleDragLeave);
+    window.addEventListener("drop", handleDragEnd);
+    window.addEventListener("dragend", handleDragEnd);
+    return () => {
+      window.removeEventListener("dragenter", handleDragEnter);
+      window.removeEventListener("dragleave", handleDragLeave);
+      window.removeEventListener("drop", handleDragEnd);
+      window.removeEventListener("dragend", handleDragEnd);
+    };
+  }, []);
   const [fileName, setFileName] = React.useState<string | null>(null);
   const [fileError, setFileError] = React.useState<string | null>(null);
   const [attempt, setAttempt] = React.useState("");
@@ -249,11 +281,16 @@ export function BackupTestFlow({
           />
           <button
             className={cn(
-              "flex w-full flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed px-6 text-center transition-colors",
-              isSpotlight ? "h-44" : "h-32",
-              isDragActive
-                ? "border-primary bg-primary/10"
-                : "border-foreground/25 bg-background/40 hover:border-foreground/40 hover:bg-background/70",
+              "flex flex-col items-center justify-center gap-2 text-center transition-all",
+              isWindowDragging
+                ? cn(
+                    "w-full rounded-2xl border-2 border-dashed px-6",
+                    isSpotlight ? "h-44" : "h-32",
+                    isDragActive
+                      ? "border-primary bg-primary/10"
+                      : "border-foreground/25 bg-background/40",
+                  )
+                : "mx-auto h-14 rounded-full bg-primary px-12 text-(--buzz-onboarding-cta-label) shadow hover:bg-primary/90",
             )}
             data-testid="backup-test-dropzone"
             onClick={() => fileInputRef.current?.click()}
@@ -270,19 +307,24 @@ export function BackupTestFlow({
             }}
             type="button"
           >
-            <FileUp
-              aria-hidden="true"
-              className={cn(
-                "h-8 w-8 transition-colors",
-                isDragActive ? "text-primary" : "text-muted-foreground",
-              )}
-            />
-            <span className="text-sm font-medium text-foreground">
-              Drop your backup file here
-            </span>
-            <span className="text-xs text-muted-foreground">
-              or click to browse for it
-            </span>
+            {isWindowDragging ? (
+              <>
+                <FileUp
+                  aria-hidden="true"
+                  className={cn(
+                    "h-8 w-8 transition-colors",
+                    isDragActive ? "text-primary" : "text-muted-foreground",
+                  )}
+                />
+                <span className="text-sm font-medium text-foreground">
+                  Drop your backup file here
+                </span>
+              </>
+            ) : (
+              <span className="text-base font-medium">
+                Select your backup file
+              </span>
+            )}
           </button>
           {fileError ? (
             <p
@@ -294,15 +336,14 @@ export function BackupTestFlow({
           ) : null}
           <div className="flex flex-col items-center gap-2">
             <Button
-              className="h-8 gap-1.5 text-sm"
+              className="h-12 gap-1.5 rounded-full bg-foreground/10 px-10 text-base hover:bg-foreground/15"
               data-testid="encrypted-backup-save-copy"
               disabled={isSaving}
               onClick={onSaveCopy}
-              size="sm"
               type="button"
-              variant="outline"
+              variant="ghost"
             >
-              {isSaving ? <Spinner className="h-3.5 w-3.5 border-2" /> : null}
+              {isSaving ? <Spinner className="h-4 w-4 border-2" /> : null}
               Re-download backup
             </Button>
             {savedPath ? (
diff --git a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
index 25e18f348f..2749bebe8e 100644
--- a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
+++ b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
@@ -32,6 +32,9 @@ export function DownloadKeyStep({
   // True once the encrypted payload exists — the create button (living in the
   // footer's primary slot) disappears with the form, so Next takes its place.
   const [hasCreated, setHasCreated] = React.useState(false);
+  // True once the user has passed the backup test — until then Next stays
+  // disabled and "Skip for now" remains the escape hatch.
+  const [hasVerified, setHasVerified] = React.useState(false);
   // Footer slot the creator portals its "Download" button into.
   const [createButtonSlot, setCreateButtonSlot] =
     React.useState<HTMLElement | null>(null);
@@ -47,7 +50,9 @@ export function DownloadKeyStep({
         {/* Plain string concat: cn()'s tailwind-merge misreads the custom
             text-title size token as conflicting with text-foreground. */}
         <h1 className="text-title font-normal text-foreground">
-          {hasCreated ? "Test your backup" : "Backup your key with a password"}
+          {hasCreated
+            ? "Now, test your backup"
+            : "Backup your key with a password"}
         </h1>
         <p className="mt-5 text-sm leading-6 text-foreground/80">
           {hasCreated
@@ -69,6 +74,7 @@ export function DownloadKeyStep({
                   createButtonClassName={ONBOARDING_PRIMARY_CTA_CLASS}
                   createButtonPortal={createButtonSlot}
                   onCreated={() => setHasCreated(true)}
+                  onVerified={() => setHasVerified(true)}
                   variant="spotlight"
                 />
               </div>
@@ -79,14 +85,30 @@ export function DownloadKeyStep({
 
       <OnboardingFooter>
         {hasCreated ? (
-          <Button
-            className={ONBOARDING_PRIMARY_CTA_CLASS}
-            data-testid="onboarding-next"
-            onClick={onNext}
-            type="button"
-          >
-            Next
-          </Button>
+          /* Relative row keeps Next truly centered while Skip hangs off its
+             right edge without shifting the center. */
+          <div className="relative flex items-center justify-center">
+            <Button
+              className={ONBOARDING_PRIMARY_CTA_CLASS}
+              data-testid="onboarding-next"
+              disabled={!hasVerified}
+              onClick={onNext}
+              type="button"
+            >
+              Next
+            </Button>
+            {hasVerified ? null : (
+              <Button
+                className="absolute left-full ml-3 h-9 animate-in whitespace-nowrap rounded-full px-6 fade-in fill-mode-backwards [animation-delay:1000ms] animation-duration-[500ms] hover:bg-foreground/10 motion-reduce:animate-none"
+                data-testid="onboarding-skip"
+                onClick={onNext}
+                type="button"
+                variant="ghost"
+              >
+                Skip for now
+              </Button>
+            )}
+          </div>
         ) : (
           /* Relative row keeps the Download CTA truly centered while Skip
              hangs off its right edge without shifting the center. */
diff --git a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
index bcca3fb090..a892af3265 100644
--- a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
+++ b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
@@ -144,6 +144,8 @@ type EncryptedBackupCreatorProps = {
   onCreated?: () => void;
   /** Fired only after the encrypted key file has been saved successfully. */
   onSaved?: (path: string) => void;
+  /** Fired once when the user completes the backup test successfully. */
+  onVerified?: () => void;
 };
 
 /**
@@ -324,6 +326,7 @@ export function EncryptedBackupCreator({
   createButtonClassName,
   onCreated,
   onSaved,
+  onVerified,
 }: EncryptedBackupCreatorProps) {
   const [state, dispatch] = React.useReducer(
     encryptedBackupReducer,
@@ -449,6 +452,7 @@ export function EncryptedBackupCreator({
           isSaving={isSaving}
           ncryptsec={state.ncryptsec}
           onSaveCopy={() => void handleSaveCopy()}
+          onVerified={onVerified}
           passphrase={state.passphrase}
           saveError={saveError}
           savedPath={savedPath}
diff --git a/desktop/tests/e2e/onboarding-backup.spec.ts b/desktop/tests/e2e/onboarding-backup.spec.ts
index 6944a6cd2f..dfaf9269c0 100644
--- a/desktop/tests/e2e/onboarding-backup.spec.ts
+++ b/desktop/tests/e2e/onboarding-backup.spec.ts
@@ -148,10 +148,11 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
 
   await page.getByTestId("encrypted-backup-create").click();
 
-  // Download commits the blob and hands over to the "Test your backup"
-  // flow: a dropzone for the saved file, then the password to unlock it.
+  // Download commits the blob and hands over to the "Now, test your backup"
+  // flow: a select-file button (dropzone while dragging) for the saved file,
+  // then the password to unlock it.
   await expect(
-    page.getByRole("heading", { name: "Test your backup" }),
+    page.getByRole("heading", { name: "Now, test your backup" }),
   ).toBeVisible();
   const dropzone = page.getByTestId("backup-test-dropzone");
   await expect(dropzone).toBeVisible();
@@ -159,6 +160,11 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
     "identity.ncryptsec",
   );
 
+  // Until the test passes, Next stays disabled and Skip remains the escape
+  // hatch.
+  await expect(page.getByTestId("onboarding-next")).toBeDisabled();
+  await expect(page.getByTestId("onboarding-skip")).toBeVisible();
+
   await waitForAnimations(page);
   await page.screenshot({ path: `${SHOTS}/04-backup-test-dropzone.png` });
 
@@ -203,7 +209,9 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
   expect(commands).not.toContain("get_nsec");
   expect(commands).toContain("create_ncryptsec_backup");
 
+  // A passed test unlocks Next and retires the Skip escape hatch.
   await expect(page.getByTestId("onboarding-next")).toBeEnabled();
+  await expect(page.getByTestId("onboarding-skip")).toHaveCount(0);
   await page.getByTestId("onboarding-next").click();
   await expect(page.getByTestId("onboarding-page-2")).toBeVisible();
 });

From 2c7bbf2f2f54a889d392017bec3bdf3c28b58faf Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 29 Jul 2026 00:36:50 -0700
Subject: [PATCH 11/21] feat(onboarding): durable backup session with
 save-gated test flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Back navigation in the machine onboarding flow no longer destroys
in-progress key-backup work, and the "Now, test your backup" view only
appears once the file is actually on disk.

- EncryptedBackupCreator.tsx: new useEncryptedBackupSession() hook lifts
  everything that must survive step unmounts — the encrypt reducer state
  (entered password, cached KDF result, committed blob), the verified
  flag, the saved path, the save-once guard, and the test-flow
  progress — into a host-owned session. The creator accepts an optional
  session prop and falls back to a private one, so the settings
  "Save a new Keycase" card is unchanged. KDF completions now dispatch
  unguarded so results landing while the step is unmounted still commit.
- EncryptedBackupCreator.tsx: advancing to the test view now requires a
  successful save, not just a committed blob. Canceling the native save
  dialog (or a save failure) rolls the commit back to the password form
  and clears the save-once guard so "Download backup" can be clicked
  again; save errors now render on the form. CTA renamed
  "Backup key" → "Download backup".
- encryptedBackup.ts: new "back-to-password" reducer event discards the
  committed blob while keeping the passphrase and its cached encryption
  result, so returning to the form re-downloads instantly without a
  second KDF run. Covered by a new unit test.
- BackupTestFlow.tsx: drop/password/success progress is host-controlled
  (survives remounts), and the wrong-password hint no longer compares
  attempt length against the real password (which leaked its length) —
  it shows only after a 900ms typing pause or an explicit Enter.
- DownloadKeyStep.tsx: Back from the test view returns to the password
  form (via backupSessionToPasswordEntry) instead of leaving the step;
  the pre-verification footer shows a ghost "Skip for now" instead of a
  disabled Next; the "back up anytime in Settings" hint only renders on
  the password form; hasCreated/hasVerified derive from the session
  (session.created keeps the step outside the ncryptsec confinement
  scan).
- MachineOnboardingFlow.tsx: owns the backup session; the setup
  (providers) step's Back returns fresh-key users to the "Backup your
  key with a password" form rather than the key-created page.
- BackupStep.tsx: footer hint moved to the download step.
- onboarding-backup.spec.ts: pre-verification footer asserts Next is
  absent (not disabled), documents save-gating, and adds a spec covering
  test-view Back → password form with the password intact plus instant
  re-download from the cached encryption.

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../onboarding/lib/encryptedBackup.test.mjs   |  25 +++
 .../onboarding/lib/encryptedBackup.ts         |  15 +-
 .../src/features/onboarding/ui/BackupStep.tsx |   5 -
 .../features/onboarding/ui/BackupTestFlow.tsx |  83 ++++++--
 .../onboarding/ui/DownloadKeyStep.tsx         |  63 ++++--
 .../onboarding/ui/EncryptedBackupCreator.tsx  | 196 ++++++++++++++----
 .../onboarding/ui/MachineOnboardingFlow.tsx   |  21 +-
 desktop/tests/e2e/onboarding-backup.spec.ts   |  47 ++++-
 8 files changed, 365 insertions(+), 90 deletions(-)

diff --git a/desktop/src/features/onboarding/lib/encryptedBackup.test.mjs b/desktop/src/features/onboarding/lib/encryptedBackup.test.mjs
index d300ab8521..8db64b6218 100644
--- a/desktop/src/features/onboarding/lib/encryptedBackup.test.mjs
+++ b/desktop/src/features/onboarding/lib/encryptedBackup.test.mjs
@@ -211,6 +211,31 @@ test("queued_download_clears_on_failure_so_user_can_retry", () => {
   assert.equal(downloadDisabled(failed), false, "retry allowed after failure");
 });
 
+test("back_to_password_discards_commit_but_keeps_cached_encryption", () => {
+  const back = reduce([
+    { type: "set-passphrase", value: "one-two-three-four" },
+    { type: "encrypt-started", passphrase: "one-two-three-four" },
+    {
+      type: "encrypt-succeeded",
+      passphrase: "one-two-three-four",
+      ncryptsec: "ncryptsec1abc",
+    },
+    { type: "download-clicked" },
+    { type: "back-to-password" },
+  ]);
+  assert.equal(back.ncryptsec, null, "committed blob discarded");
+  assert.equal(back.passphrase, "one-two-three-four", "passphrase kept");
+  assert.equal(
+    pendingEncryptPassphrase(back),
+    null,
+    "cached result means no re-encryption",
+  );
+
+  // Re-downloading the unchanged passphrase commits instantly from cache.
+  const recommitted = reduce([{ type: "download-clicked" }], back);
+  assert.equal(recommitted.ncryptsec, "ncryptsec1abc");
+});
+
 test("download_click_before_encryption_starts_still_queues", () => {
   // Click lands inside the debounce window: nothing started yet, but the
   // pending flag makes the eventual result commit.
diff --git a/desktop/src/features/onboarding/lib/encryptedBackup.ts b/desktop/src/features/onboarding/lib/encryptedBackup.ts
index ff616bf965..4f74c72e27 100644
--- a/desktop/src/features/onboarding/lib/encryptedBackup.ts
+++ b/desktop/src/features/onboarding/lib/encryptedBackup.ts
@@ -52,7 +52,13 @@ export type EncryptedBackupEvent =
   | { type: "encrypt-started"; passphrase: string }
   | { type: "encrypt-succeeded"; passphrase: string; ncryptsec: string }
   | { type: "encrypt-failed"; passphrase: string; message: string }
-  | { type: "download-clicked" };
+  | { type: "download-clicked" }
+  /**
+   * Return from the post-download test view to the password form (onboarding
+   * Back). The committed blob is discarded but the passphrase and its cached
+   * encryption result are kept, so re-downloading is instant.
+   */
+  | { type: "back-to-password" };
 
 export function encryptedBackupReducer(
   state: EncryptedBackupState,
@@ -111,6 +117,13 @@ export function encryptedBackupReducer(
       }
       return { ...state, downloadPending: true };
     }
+    case "back-to-password":
+      return {
+        ...state,
+        ncryptsec: null,
+        downloadPending: false,
+        createError: null,
+      };
   }
 }
 
diff --git a/desktop/src/features/onboarding/ui/BackupStep.tsx b/desktop/src/features/onboarding/ui/BackupStep.tsx
index 2ab7434910..1d1b1d0bcf 100644
--- a/desktop/src/features/onboarding/ui/BackupStep.tsx
+++ b/desktop/src/features/onboarding/ui/BackupStep.tsx
@@ -297,11 +297,6 @@ export function BackupStep({ direction, onBack, onDownload }: BackupStepProps) {
           >
             Back
           </Button>
-
-          <p className="text-xs text-foreground/50">
-            You can back up your key anytime in Settings &rarr; Profile &rarr;
-            Identity.
-          </p>
         </OnboardingFooter>
       ) : null}
     </OnboardingSlideTransition>
diff --git a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
index 3645312f3f..5145da091a 100644
--- a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
+++ b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
@@ -9,6 +9,25 @@ import { Spinner } from "@/shared/ui/spinner";
 
 type BackupTestStage = "drop" | "password" | "success";
 
+/**
+ * Durable progress through the test flow. Owned by the host so navigating
+ * away (e.g. onboarding Back) and returning doesn't force the user to
+ * re-drop the file or retype their attempt.
+ */
+export type BackupTestProgress = {
+  stage: BackupTestStage;
+  /** Name of the accepted file once the drop check passed. */
+  fileName: string | null;
+  /** The password attempt typed so far. */
+  attempt: string;
+};
+
+export const initialBackupTestProgress: BackupTestProgress = {
+  stage: "drop",
+  fileName: null,
+  attempt: "",
+};
+
 type BackupTestFlowProps = {
   /** "spotlight" is the onboarding treatment; "boxed" fits settings cards. */
   variant?: "spotlight" | "boxed";
@@ -21,10 +40,19 @@ type BackupTestFlowProps = {
   isSaving: boolean;
   savedPath: string | null;
   saveError: string | null;
+  /** Host-owned progress so it survives this component unmounting. */
+  progress: BackupTestProgress;
+  onProgressChange: React.Dispatch<React.SetStateAction<BackupTestProgress>>;
   /** Fired once when the user completes the test successfully. */
   onVerified?: () => void;
 };
 
+/**
+ * How long after the last keystroke before a wrong attempt is called out.
+ * Verification itself is instant on match; this only delays the scolding.
+ */
+const MISMATCH_HINT_PAUSE_MS = 900;
+
 const BURST_EMOJIS = ["🎉", "✨", "🐝", "🍯", "🔑", "💛"] as const;
 const BURST_PARTICLE_COUNT = 18;
 
@@ -108,10 +136,12 @@ export function BackupTestFlow({
   isSaving,
   savedPath,
   saveError,
+  progress,
+  onProgressChange,
   onVerified,
 }: BackupTestFlowProps) {
   const reduceMotion = useReducedMotion() ?? false;
-  const [stage, setStage] = React.useState<BackupTestStage>("drop");
+  const { stage, fileName, attempt } = progress;
   const [isDragActive, setIsDragActive] = React.useState(false);
   // True while a file drag is anywhere over the window — the select button
   // renders as a dropzone only for the duration of the drag.
@@ -145,9 +175,7 @@ export function BackupTestFlow({
       window.removeEventListener("dragend", handleDragEnd);
     };
   }, []);
-  const [fileName, setFileName] = React.useState<string | null>(null);
   const [fileError, setFileError] = React.useState<string | null>(null);
-  const [attempt, setAttempt] = React.useState("");
   const [isRevealed, setIsRevealed] = React.useState(false);
   const fileInputRef = React.useRef<HTMLInputElement | null>(null);
   const passwordInputRef = React.useRef<HTMLInputElement | null>(null);
@@ -166,12 +194,12 @@ export function BackupTestFlow({
   }, [stage]);
 
   const succeed = React.useCallback(() => {
-    setStage("success");
+    onProgressChange((prev) => ({ ...prev, stage: "success" }));
     if (!verifiedFiredRef.current) {
       verifiedFiredRef.current = true;
       onVerified?.();
     }
-  }, [onVerified]);
+  }, [onProgressChange, onVerified]);
 
   const handleFile = React.useCallback(
     async (file: File) => {
@@ -185,9 +213,12 @@ export function BackupTestFlow({
       if (!mountedRef.current) return;
       const trimmed = text.trim();
       if (trimmed === ncryptsec.trim()) {
-        setFileName(file.name);
         setFileError(null);
-        setStage("password");
+        onProgressChange((prev) => ({
+          ...prev,
+          stage: "password",
+          fileName: file.name,
+        }));
       } else if (trimmed.toLowerCase().startsWith("ncryptsec1")) {
         setFileError(
           "That's a Keycase file, but not the one you just downloaded.",
@@ -198,24 +229,34 @@ export function BackupTestFlow({
         );
       }
     },
-    [ncryptsec],
+    [ncryptsec, onProgressChange],
   );
 
   const handlePasswordChange = React.useCallback(
     (value: string) => {
-      setAttempt(value);
+      onProgressChange((prev) => ({ ...prev, attempt: value }));
       if (value === passphrase) succeed();
     },
-    [passphrase, succeed],
+    [onProgressChange, passphrase, succeed],
   );
 
+  // Only scold after the user pauses (or presses Enter), never mid-typing —
+  // and never based on the attempt's length, which would leak how long the
+  // real password is.
+  const [mismatchVisible, setMismatchVisible] = React.useState(false);
+  React.useEffect(() => {
+    setMismatchVisible(false);
+    if (stage !== "password" || attempt.length === 0 || attempt === passphrase)
+      return;
+    const timer = window.setTimeout(
+      () => setMismatchVisible(true),
+      MISMATCH_HINT_PAUSE_MS,
+    );
+    return () => window.clearTimeout(timer);
+  }, [stage, attempt, passphrase]);
+
   const isSpotlight = variant === "spotlight";
-  // Only scold once the attempt is at least as long as the real password —
-  // never mid-typing.
-  const attemptWrong =
-    stage === "password" &&
-    attempt !== passphrase &&
-    [...attempt].length >= [...passphrase].length;
+  const attemptWrong = stage === "password" && mismatchVisible;
 
   if (stage === "success") {
     return (
@@ -384,6 +425,12 @@ export function BackupTestFlow({
               className="h-10 bg-background pr-10 font-mono"
               data-testid="backup-test-password"
               onChange={(event) => handlePasswordChange(event.target.value)}
+              onKeyDown={(event) => {
+                // Enter is an explicit "check it" — no need to wait out the
+                // typing pause before calling out a mismatch.
+                if (event.key === "Enter" && attempt.length > 0)
+                  setMismatchVisible(attempt !== passphrase);
+              }}
               placeholder="Your backup password"
               ref={passwordInputRef}
               type={isRevealed ? "text" : "password"}
@@ -418,9 +465,7 @@ export function BackupTestFlow({
               className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
               data-testid="backup-test-use-different-file"
               onClick={() => {
-                setStage("drop");
-                setFileName(null);
-                setAttempt("");
+                onProgressChange(initialBackupTestProgress);
                 setIsRevealed(false);
               }}
               size="sm"
diff --git a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
index 2749bebe8e..ce9c06ac67 100644
--- a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
+++ b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
@@ -9,10 +9,20 @@ import {
   type OnboardingTransitionDirection,
   OnboardingSlideTransition,
 } from "./OnboardingSlideTransition";
-import { EncryptedBackupCreator } from "./EncryptedBackupCreator";
+import {
+  type EncryptedBackupSession,
+  backupSessionToPasswordEntry,
+  EncryptedBackupCreator,
+} from "./EncryptedBackupCreator";
 
 type DownloadKeyStepProps = {
   direction: OnboardingTransitionDirection;
+  /**
+   * Backup state owned by the parent flow so Back navigation (which unmounts
+   * this step) doesn't discard the created Keycase, the entered password, or
+   * the backup-test progress.
+   */
+  session: EncryptedBackupSession;
   onBack: () => void;
   onNext: () => void;
 };
@@ -25,16 +35,17 @@ type DownloadKeyStepProps = {
  */
 export function DownloadKeyStep({
   direction,
+  session,
   onBack,
   onNext,
 }: DownloadKeyStepProps) {
   const reduceMotion = useReducedMotion() ?? false;
   // True once the encrypted payload exists — the create button (living in the
   // footer's primary slot) disappears with the form, so Next takes its place.
-  const [hasCreated, setHasCreated] = React.useState(false);
+  const hasCreated = session.created;
   // True once the user has passed the backup test — until then Next stays
   // disabled and "Skip for now" remains the escape hatch.
-  const [hasVerified, setHasVerified] = React.useState(false);
+  const hasVerified = session.verified;
   // Footer slot the creator portals its "Download" button into.
   const [createButtonSlot, setCreateButtonSlot] =
     React.useState<HTMLElement | null>(null);
@@ -73,8 +84,7 @@ export function DownloadKeyStep({
                 <EncryptedBackupCreator
                   createButtonClassName={ONBOARDING_PRIMARY_CTA_CLASS}
                   createButtonPortal={createButtonSlot}
-                  onCreated={() => setHasCreated(true)}
-                  onVerified={() => setHasVerified(true)}
+                  session={session}
                   variant="spotlight"
                 />
               </div>
@@ -85,30 +95,28 @@ export function DownloadKeyStep({
 
       <OnboardingFooter>
         {hasCreated ? (
-          /* Relative row keeps Next truly centered while Skip hangs off its
-             right edge without shifting the center. */
-          <div className="relative flex items-center justify-center">
+          hasVerified ? (
             <Button
               className={ONBOARDING_PRIMARY_CTA_CLASS}
               data-testid="onboarding-next"
-              disabled={!hasVerified}
               onClick={onNext}
               type="button"
             >
               Next
             </Button>
-            {hasVerified ? null : (
-              <Button
-                className="absolute left-full ml-3 h-9 animate-in whitespace-nowrap rounded-full px-6 fade-in fill-mode-backwards [animation-delay:1000ms] animation-duration-[500ms] hover:bg-foreground/10 motion-reduce:animate-none"
-                data-testid="onboarding-skip"
-                onClick={onNext}
-                type="button"
-                variant="ghost"
-              >
-                Skip for now
-              </Button>
-            )}
-          </div>
+          ) : (
+            /* No disabled Next while the test is unfinished — skipping is
+               the only way forward until verification succeeds. */
+            <Button
+              className="h-9 whitespace-nowrap rounded-full px-6 hover:bg-foreground/10"
+              data-testid="onboarding-skip"
+              onClick={onNext}
+              type="button"
+              variant="ghost"
+            >
+              Skip for now
+            </Button>
+          )
         ) : (
           /* Relative row keeps the Download CTA truly centered while Skip
              hangs off its right edge without shifting the center. */
@@ -133,12 +141,23 @@ export function DownloadKeyStep({
         <Button
           className="h-9 rounded-full bg-foreground/10 px-6 hover:bg-foreground/15"
           data-testid="onboarding-back"
-          onClick={onBack}
+          onClick={
+            // From the test view, Back first returns to the password form;
+            // only from the form does it leave the step entirely.
+            hasCreated ? () => backupSessionToPasswordEntry(session) : onBack
+          }
           type="button"
           variant="ghost"
         >
           Back
         </Button>
+
+        {hasCreated ? null : (
+          <p className="text-xs text-foreground/50">
+            You can back up your key anytime in Settings &rarr; Profile &rarr;
+            Identity.
+          </p>
+        )}
       </OnboardingFooter>
     </OnboardingSlideTransition>
   );
diff --git a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
index a892af3265..c5aa4ac4e0 100644
--- a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
+++ b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
@@ -20,8 +20,14 @@ import {
   encryptedBackupReducer,
   initialEncryptedBackupState,
   MIN_PASSPHRASE_LEN,
+  type EncryptedBackupEvent,
+  type EncryptedBackupState,
 } from "../lib/encryptedBackup";
-import { BackupTestFlow } from "./BackupTestFlow";
+import {
+  type BackupTestProgress,
+  BackupTestFlow,
+  initialBackupTestProgress,
+} from "./BackupTestFlow";
 
 /** Word-count bounds mirroring `key_backup.rs` (Rust clamps regardless). */
 const MIN_GENERATED_WORDS = 3;
@@ -130,6 +136,81 @@ function PendingDownloadTicker() {
   );
 }
 
+/**
+ * Everything about an in-progress backup that must survive this component
+ * unmounting: the reducer state (passphrase + committed blob), whether the
+ * backup test passed, where the file was saved, the save-once guard, and the
+ * test-flow progress. Hosts that need the state to outlive the creator (the
+ * onboarding flow, where Back unmounts the step) call
+ * `useEncryptedBackupSession` at a longer-lived level and pass it down;
+ * otherwise the creator owns a private session internally.
+ */
+export type EncryptedBackupSession = {
+  state: EncryptedBackupState;
+  dispatch: React.Dispatch<EncryptedBackupEvent>;
+  /**
+   * True once the encrypted payload has been committed AND saved to disk.
+   * Derived so hosts (e.g. DownloadKeyStep) can branch on it without touching
+   * the blob itself — keeping them outside the ncryptsec confinement scan.
+   */
+  created: boolean;
+  /** True once the user has passed the backup test. */
+  verified: boolean;
+  setVerified: React.Dispatch<React.SetStateAction<boolean>>;
+  savedPath: string | null;
+  setSavedPath: React.Dispatch<React.SetStateAction<string | null>>;
+  /** The committed blob a save was already kicked off for (save-once guard). */
+  savedForRef: React.MutableRefObject<string | null>;
+  test: BackupTestProgress;
+  setTest: React.Dispatch<React.SetStateAction<BackupTestProgress>>;
+};
+
+/** Host-side state for `EncryptedBackupCreator` — see `EncryptedBackupSession`. */
+export function useEncryptedBackupSession(): EncryptedBackupSession {
+  const [state, dispatch] = React.useReducer(
+    encryptedBackupReducer,
+    initialEncryptedBackupState,
+  );
+  const [verified, setVerified] = React.useState(false);
+  const [savedPath, setSavedPath] = React.useState<string | null>(null);
+  const savedForRef = React.useRef<string | null>(null);
+  const [test, setTest] = React.useState<BackupTestProgress>(
+    initialBackupTestProgress,
+  );
+  return React.useMemo(
+    () => ({
+      state,
+      dispatch,
+      created: state.ncryptsec !== null && savedPath !== null,
+      verified,
+      setVerified,
+      savedPath,
+      setSavedPath,
+      savedForRef,
+      test,
+      setTest,
+    }),
+    [state, verified, savedPath, test],
+  );
+}
+
+/**
+ * Roll a session back from the post-download test view to the password form
+ * (onboarding Back on "Now, test your backup"). The passphrase and its cached
+ * encryption result survive, so re-downloading is instant; the committed
+ * blob, test progress, verification, and save bookkeeping are discarded so a
+ * re-download runs the full save + test ceremony again.
+ */
+export function backupSessionToPasswordEntry(
+  session: EncryptedBackupSession,
+): void {
+  session.dispatch({ type: "back-to-password" });
+  session.setVerified(false);
+  session.setSavedPath(null);
+  session.savedForRef.current = null;
+  session.setTest(initialBackupTestProgress);
+}
+
 type EncryptedBackupCreatorProps = {
   /** "spotlight" is the onboarding treatment; "boxed" fits settings cards. */
   variant?: "spotlight" | "boxed";
@@ -140,6 +221,11 @@ type EncryptedBackupCreatorProps = {
   createButtonPortal?: HTMLElement | null;
   /** Extra classes for the "Download" button. */
   createButtonClassName?: string;
+  /**
+   * Host-owned session so the backup state survives this component
+   * unmounting (onboarding Back navigation). Omitted = private session.
+   */
+  session?: EncryptedBackupSession;
   /** Fired once the encrypted payload has been created (before saving). */
   onCreated?: () => void;
   /** Fired only after the encrypted key file has been saved successfully. */
@@ -324,22 +410,19 @@ export function EncryptedBackupCreator({
   variant = "spotlight",
   createButtonPortal,
   createButtonClassName,
+  session: sessionProp,
   onCreated,
   onSaved,
   onVerified,
 }: EncryptedBackupCreatorProps) {
-  const [state, dispatch] = React.useReducer(
-    encryptedBackupReducer,
-    initialEncryptedBackupState,
-  );
+  // Hosts without a longer-lived session get a private one (settings card).
+  const fallbackSession = useEncryptedBackupSession();
+  const session = sessionProp ?? fallbackSession;
+  const { state, dispatch, savedPath, setSavedPath, savedForRef } = session;
   const [isRevealed, setIsRevealed] = React.useState(false);
-  const [savedPath, setSavedPath] = React.useState<string | null>(null);
   const [saveError, setSaveError] = React.useState<string | null>(null);
   const [isSaving, setIsSaving] = React.useState(false);
   const mountedRef = React.useRef(true);
-  // The committed blob we've already kicked a save off for — guards the
-  // commit effect against re-running on unrelated re-renders.
-  const savedForRef = React.useRef<string | null>(null);
 
   React.useEffect(() => {
     mountedRef.current = true;
@@ -363,27 +446,29 @@ export function EncryptedBackupCreator({
     if (!pendingPassphrase) return;
     let cancelled = false;
     const start = () => {
-      if (cancelled || !mountedRef.current) return;
+      if (cancelled) return;
+      // Completions dispatch unguarded: with a host-owned session the KDF
+      // may finish while this component is unmounted (user navigated Back),
+      // and the result must still land in the session. Dispatching to an
+      // unmounted private session is a safe no-op.
       dispatch({ type: "encrypt-started", passphrase: pendingPassphrase });
       void createNcryptsecBackup(pendingPassphrase)
         .then((ncryptsec) => {
-          if (mountedRef.current)
-            dispatch({
-              type: "encrypt-succeeded",
-              passphrase: pendingPassphrase,
-              ncryptsec,
-            });
+          dispatch({
+            type: "encrypt-succeeded",
+            passphrase: pendingPassphrase,
+            ncryptsec,
+          });
         })
         .catch((err: unknown) => {
-          if (mountedRef.current)
-            dispatch({
-              type: "encrypt-failed",
-              passphrase: pendingPassphrase,
-              message:
-                err instanceof Error
-                  ? err.message
-                  : "Failed to encrypt your key.",
-            });
+          dispatch({
+            type: "encrypt-failed",
+            passphrase: pendingPassphrase,
+            message:
+              err instanceof Error
+                ? err.message
+                : "Failed to encrypt your key.",
+          });
         });
     };
     const timer = window.setTimeout(
@@ -394,10 +479,13 @@ export function EncryptedBackupCreator({
       cancelled = true;
       window.clearTimeout(timer);
     };
-  }, [pendingPassphrase, skipDebounce]);
+  }, [dispatch, pendingPassphrase, skipDebounce]);
 
   // Download commit: fires once per committed blob, whether the commit was
-  // instant (encryption already done) or resolved a queued download.
+  // instant (encryption already done) or resolved a queued download. The flow
+  // only advances to the test view once the file is actually on disk — a
+  // canceled save dialog or a save failure rolls the commit back to the
+  // password form so "Download backup" can be clicked again.
   React.useEffect(() => {
     const ncryptsec = state.ncryptsec;
     if (!ncryptsec || savedForRef.current === ncryptsec) return;
@@ -405,14 +493,22 @@ export function EncryptedBackupCreator({
     onCreated?.();
     setIsSaving(true);
     setSaveError(null);
+    const rollBack = () => {
+      savedForRef.current = null;
+      dispatch({ type: "back-to-password" });
+    };
     void saveNcryptsecCopy(ncryptsec)
       .then((path) => {
-        if (mountedRef.current && path) {
+        if (path) {
           setSavedPath(path);
           onSaved?.(path);
+        } else {
+          // User canceled the native save dialog — nothing was downloaded.
+          rollBack();
         }
       })
       .catch((err: unknown) => {
+        rollBack();
         if (mountedRef.current)
           setSaveError(
             err instanceof Error ? err.message : "Failed to save your key.",
@@ -421,7 +517,14 @@ export function EncryptedBackupCreator({
       .finally(() => {
         if (mountedRef.current) setIsSaving(false);
       });
-  }, [onCreated, onSaved, state.ncryptsec]);
+  }, [
+    dispatch,
+    onCreated,
+    onSaved,
+    savedForRef,
+    setSavedPath,
+    state.ncryptsec,
+  ]);
 
   const handleSaveCopy = React.useCallback(async () => {
     if (!state.ncryptsec || isSaving) return;
@@ -441,19 +544,29 @@ export function EncryptedBackupCreator({
     } finally {
       if (mountedRef.current) setIsSaving(false);
     }
-  }, [isSaving, onSaved, state.ncryptsec]);
+  }, [isSaving, onSaved, setSavedPath, state.ncryptsec]);
+
+  const { setVerified, test, setTest } = session;
+  const handleVerified = React.useCallback(() => {
+    setVerified(true);
+    onVerified?.();
+  }, [onVerified, setVerified]);
 
   const issue = passphraseIssue(state.passphrase);
 
-  if (state.ncryptsec) {
+  // The test view requires a successful save, not just a committed blob —
+  // while the native save dialog is open the password form stays put.
+  if (state.ncryptsec && savedPath) {
     return (
       <div data-testid="encrypted-backup-result">
         <BackupTestFlow
           isSaving={isSaving}
           ncryptsec={state.ncryptsec}
+          onProgressChange={setTest}
           onSaveCopy={() => void handleSaveCopy()}
-          onVerified={onVerified}
+          onVerified={handleVerified}
           passphrase={state.passphrase}
+          progress={test}
           saveError={saveError}
           savedPath={savedPath}
           variant={variant}
@@ -524,12 +637,21 @@ export function EncryptedBackupCreator({
         </p>
       ) : null}
 
+      {saveError ? (
+        <p
+          className="text-center text-sm text-destructive"
+          data-testid="encrypted-backup-save-error"
+        >
+          {saveError}
+        </p>
+      ) : null}
+
       {(() => {
         // Absolute spinner: signals the background encryption without
         // shifting the centered button while it appears and disappears.
         const createButton = (
           <div className="relative">
-            {isEncrypting(state) || state.downloadPending ? (
+            {isEncrypting(state) || state.downloadPending || isSaving ? (
               <Spinner
                 aria-label="Encrypting your key"
                 className="absolute right-full top-1/2 mr-3 h-4 w-4 -translate-y-1/2 border-2"
@@ -539,11 +661,15 @@ export function EncryptedBackupCreator({
             <Button
               className={cn("h-9 rounded-full px-6", createButtonClassName)}
               data-testid="encrypted-backup-create"
-              disabled={downloadDisabled(state)}
+              disabled={downloadDisabled(state) || isSaving}
               onClick={() => dispatch({ type: "download-clicked" })}
               type="button"
             >
-              {state.downloadPending ? <PendingDownloadTicker /> : "Backup key"}
+              {state.downloadPending ? (
+                <PendingDownloadTicker />
+              ) : (
+                "Download backup"
+              )}
             </Button>
           </div>
         );
diff --git a/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx b/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
index bdeaaa5308..9b4e33ef73 100644
--- a/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
+++ b/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
@@ -11,6 +11,10 @@ import { StartupWindowDragRegion } from "@/shared/ui/StartupWindowDragRegion";
 import { BackupStep } from "./BackupStep";
 import { DefaultConfigStep } from "./DefaultConfigStep";
 import { DownloadKeyStep } from "./DownloadKeyStep";
+import {
+  backupSessionToPasswordEntry,
+  useEncryptedBackupSession,
+} from "./EncryptedBackupCreator";
 import { IdentityKeyHelpDialog } from "./IdentityKeyHelpDialog";
 import { LandingBees } from "./LandingBees";
 import { NostrKeyImportForm } from "./NostrKeyImportForm";
@@ -67,6 +71,9 @@ export function MachineOnboardingFlow({
     null,
   );
   const [readyRuntimeIds, setReadyRuntimeIds] = React.useState<string[]>([]);
+  // Owned here (not by DownloadKeyStep) so Back navigation — which unmounts
+  // the step — keeps the created Keycase, entered password, and test progress.
+  const backupSession = useEncryptedBackupSession();
   const handleReadyRuntimeIdsChange = React.useCallback(
     (runtimeIds: readonly string[]) => {
       setReadyRuntimeIds(Array.from(new Set(runtimeIds)));
@@ -244,12 +251,22 @@ export function MachineOnboardingFlow({
               direction="forward"
               onBack={() => setPage("backup")}
               onNext={() => setPage("setup")}
+              session={backupSession}
             />
           ) : page === "setup" ? (
             <SetupStep
               actions={{
-                back: () =>
-                  setPage(identityWasImported ? "key-import" : "backup"),
+                // Fresh-key users return to the "Backup your key with a
+                // password" form (not the test flow they may have finished);
+                // imported keys skip that step entirely.
+                back: () => {
+                  if (identityWasImported) {
+                    setPage("key-import");
+                    return;
+                  }
+                  backupSessionToPasswordEntry(backupSession);
+                  setPage("download");
+                },
                 next: (runtimeIds) => {
                   const ids = Array.from(runtimeIds);
                   setReadyRuntimeIds(ids);
diff --git a/desktop/tests/e2e/onboarding-backup.spec.ts b/desktop/tests/e2e/onboarding-backup.spec.ts
index dfaf9269c0..3994c555ad 100644
--- a/desktop/tests/e2e/onboarding-backup.spec.ts
+++ b/desktop/tests/e2e/onboarding-backup.spec.ts
@@ -148,9 +148,9 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
 
   await page.getByTestId("encrypted-backup-create").click();
 
-  // Download commits the blob and hands over to the "Now, test your backup"
-  // flow: a select-file button (dropzone while dragging) for the saved file,
-  // then the password to unlock it.
+  // Only a successful save (the mock "picks" a path) advances to the
+  // "Now, test your backup" flow: a select-file button (dropzone while
+  // dragging) for the saved file, then the password to unlock it.
   await expect(
     page.getByRole("heading", { name: "Now, test your backup" }),
   ).toBeVisible();
@@ -160,9 +160,9 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
     "identity.ncryptsec",
   );
 
-  // Until the test passes, Next stays disabled and Skip remains the escape
-  // hatch.
-  await expect(page.getByTestId("onboarding-next")).toBeDisabled();
+  // Until the test passes there is no Next at all — Skip is the only way
+  // forward.
+  await expect(page.getByTestId("onboarding-next")).toHaveCount(0);
   await expect(page.getByTestId("onboarding-skip")).toBeVisible();
 
   await waitForAnimations(page);
@@ -232,6 +232,41 @@ test("download step Back returns to the backup chooser", async ({ page }) => {
   await expect(page.getByTestId("onboarding-next")).toBeVisible();
 });
 
+test("test-view Back returns to the password form with the password intact", async ({
+  page,
+}) => {
+  await enterMachineBackup(page);
+  await page.getByTestId("onboarding-next").click();
+  await expect(page.getByTestId("onboarding-page-download")).toBeVisible();
+
+  const input = page.getByTestId("backup-passphrase-input");
+  await input.fill("mock-horse-battery-staple");
+  await page.getByTestId("encrypted-backup-create").click();
+  await expect(
+    page.getByRole("heading", { name: "Now, test your backup" }),
+  ).toBeVisible();
+
+  // Back from the test view rolls back to the password form (same step),
+  // keeping the entered password; only from the form does Back leave the
+  // step.
+  await page.getByTestId("onboarding-back").click();
+  await expect(
+    page.getByRole("heading", { name: "Backup your key with a password" }),
+  ).toBeVisible();
+  await expect(input).toHaveValue("mock-horse-battery-staple");
+
+  // Re-downloading runs the ceremony again instantly from the cached
+  // encryption.
+  await page.getByTestId("encrypted-backup-create").click();
+  await expect(
+    page.getByRole("heading", { name: "Now, test your backup" }),
+  ).toBeVisible();
+
+  await page.getByTestId("onboarding-back").click();
+  await page.getByTestId("onboarding-back").click();
+  await expect(page.getByTestId("onboarding-page-backup")).toBeVisible();
+});
+
 test("typed password requires 12 characters", async ({ page }) => {
   await enterMachineBackup(page);
   await page.getByTestId("onboarding-next").click();

From bfbfdfb94212835d53c30385ab3adddb8edae2dc Mon Sep 17 00:00:00 2001
From: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
 <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@buzz.block.builderlab.xyz>
Date: Wed, 29 Jul 2026 01:01:50 -0700
Subject: [PATCH 12/21] fix(desktop): align password-protected backup semantics

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/src-tauri/src/commands/identity.rs    |  2 +-
 desktop/src-tauri/src/key_backup.rs           |  4 +--
 desktop/src-tauri/src/key_backup_tests.rs     |  8 ++---
 .../features/onboarding/ui/BackupTestFlow.tsx |  4 +--
 .../onboarding/ui/DownloadKeyStep.tsx         |  4 +--
 .../onboarding/ui/MachineOnboardingFlow.tsx   |  2 +-
 .../onboarding/ui/NostrKeyImportForm.tsx      | 17 +++++-----
 .../ui/onboardingFlowSteps.test.mjs           |  2 +-
 .../settings/ui/ProfileSettingsCard.tsx       | 24 +++++++++-----
 .../features/settings/ui/SignOutSection.tsx   | 16 +++++----
 desktop/src/testing/e2eBridge.ts              |  4 +--
 desktop/tests/e2e/onboarding-backup.spec.ts   |  2 +-
 desktop/tests/e2e/onboarding.spec.ts          | 11 ++++++-
 desktop/tests/e2e/profile-nsec-reveal.spec.ts | 33 +++++++++++++++++++
 14 files changed, 92 insertions(+), 41 deletions(-)

diff --git a/desktop/src-tauri/src/commands/identity.rs b/desktop/src-tauri/src/commands/identity.rs
index 9abecbd2cf..45ae33d99f 100644
--- a/desktop/src-tauri/src/commands/identity.rs
+++ b/desktop/src-tauri/src/commands/identity.rs
@@ -285,7 +285,7 @@ pub async fn save_ncryptsec_copy(
     let dest = match crate::commands::export_util::pick_save_path(
         &app_handle,
         crate::key_backup::BACKUP_FILE_NAME,
-        "Keycase",
+        "Password-protected key backup",
         &["ncryptsec"],
     )
     .await?
diff --git a/desktop/src-tauri/src/key_backup.rs b/desktop/src-tauri/src/key_backup.rs
index 0a19fb1431..418be3bb06 100644
--- a/desktop/src-tauri/src/key_backup.rs
+++ b/desktop/src-tauri/src/key_backup.rs
@@ -106,7 +106,7 @@ pub fn decrypt_ncryptsec(input: &str, password: &str) -> Result<Keys, String> {
     let encrypted = parse_ncryptsec(input)?;
     let secret_key = encrypted
         .decrypt(password)
-        .map_err(|_| "wrong Keycase password or damaged Keycase".to_string())?;
+        .map_err(|_| "wrong backup password or damaged key backup".to_string())?;
     Ok(Keys::new(secret_key))
 }
 
@@ -125,7 +125,7 @@ pub fn recover_keys_from_input(input: &str, password: Option<&str>) -> Result<Ke
         .get(..NCRYPTSEC_HRP.len())
         .is_some_and(|head| head.eq_ignore_ascii_case(NCRYPTSEC_HRP));
     if hrp_match {
-        let password = password.ok_or_else(|| "Keycase requires a password".to_string())?;
+        let password = password.ok_or_else(|| "key backup requires a password".to_string())?;
         decrypt_ncryptsec(trimmed, password)
     } else {
         Keys::parse(trimmed).map_err(|e| format!("Invalid private key: {e}"))
diff --git a/desktop/src-tauri/src/key_backup_tests.rs b/desktop/src-tauri/src/key_backup_tests.rs
index a4e20cd56e..2367de80ec 100644
--- a/desktop/src-tauri/src/key_backup_tests.rs
+++ b/desktop/src-tauri/src/key_backup_tests.rs
@@ -41,7 +41,7 @@ fn wrong_password_is_a_friendly_error() {
     let keys = Keys::generate();
     let blob = create_backup_blob(&keys, "right password", FAST_LOG_N).unwrap();
     let err = decrypt_ncryptsec(&blob, "wrong password").unwrap_err();
-    assert_eq!(err, "wrong Keycase password or damaged Keycase");
+    assert_eq!(err, "wrong backup password or damaged key backup");
 }
 
 #[test]
@@ -90,13 +90,13 @@ fn recover_keys_ncryptsec_happy_path() {
 #[test]
 fn recover_keys_ncryptsec_requires_password() {
     let err = recover_keys_from_input(SPEC_NCRYPTSEC, None).unwrap_err();
-    assert_eq!(err, "Keycase requires a password");
+    assert_eq!(err, "key backup requires a password");
 }
 
 #[test]
 fn recover_keys_ncryptsec_wrong_password() {
     let err = recover_keys_from_input(SPEC_NCRYPTSEC, Some("wrong")).unwrap_err();
-    assert_eq!(err, "wrong Keycase password or damaged Keycase");
+    assert_eq!(err, "wrong backup password or damaged key backup");
 }
 
 /// Bech32 permits an all-uppercase encoding: `NCRYPTSEC1…` must classify as
@@ -108,7 +108,7 @@ fn recover_keys_uppercase_ncryptsec_classifies_as_encrypted() {
     let upper = SPEC_NCRYPTSEC.to_ascii_uppercase();
     // Routing proof: encrypted path demands a passphrase.
     let err = recover_keys_from_input(&upper, None).unwrap_err();
-    assert_eq!(err, "Keycase requires a password");
+    assert_eq!(err, "key backup requires a password");
     // With the passphrase, the bech32 decoder accepts the uppercase form.
     let keys = recover_keys_from_input(&upper, Some("nostr")).unwrap();
     assert_eq!(keys.secret_key().to_secret_hex(), SPEC_SECRET_HEX);
diff --git a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
index 5145da091a..37f19d97f2 100644
--- a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
+++ b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
@@ -221,11 +221,11 @@ export function BackupTestFlow({
         }));
       } else if (trimmed.toLowerCase().startsWith("ncryptsec1")) {
         setFileError(
-          "That's a Keycase file, but not the one you just downloaded.",
+          "That's a key backup, but not the one you just downloaded.",
         );
       } else {
         setFileError(
-          "That doesn't look like your Keycase file. Drop the file you just downloaded.",
+          "That doesn't look like your key backup. Choose the file you just downloaded.",
         );
       }
     },
diff --git a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
index ce9c06ac67..43c0061caa 100644
--- a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
+++ b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
@@ -19,7 +19,7 @@ type DownloadKeyStepProps = {
   direction: OnboardingTransitionDirection;
   /**
    * Backup state owned by the parent flow so Back navigation (which unmounts
-   * this step) doesn't discard the created Keycase, the entered password, or
+   * this step) doesn't discard the created backup, the entered password, or
    * the backup-test progress.
    */
   session: EncryptedBackupSession;
@@ -29,7 +29,7 @@ type DownloadKeyStepProps = {
 
 /**
  * Onboarding download step — the password-first encrypted key download
- * (Keycase) flow, promoted to its own page in the machine onboarding flow.
+ * flow, promoted to its own page in the machine onboarding flow.
  * The raw key never enters this component: Rust builds the NIP-49 payload
  * locally and the native save dialog produces the user-owned file.
  */
diff --git a/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx b/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
index 9b4e33ef73..2576f71e10 100644
--- a/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
+++ b/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
@@ -72,7 +72,7 @@ export function MachineOnboardingFlow({
   );
   const [readyRuntimeIds, setReadyRuntimeIds] = React.useState<string[]>([]);
   // Owned here (not by DownloadKeyStep) so Back navigation — which unmounts
-  // the step — keeps the created Keycase, entered password, and test progress.
+  // the step — keeps the created backup, entered password, and test progress.
   const backupSession = useEncryptedBackupSession();
   const handleReadyRuntimeIdsChange = React.useCallback(
     (runtimeIds: readonly string[]) => {
diff --git a/desktop/src/features/onboarding/ui/NostrKeyImportForm.tsx b/desktop/src/features/onboarding/ui/NostrKeyImportForm.tsx
index 90eb1f368a..900b7b932e 100644
--- a/desktop/src/features/onboarding/ui/NostrKeyImportForm.tsx
+++ b/desktop/src/features/onboarding/ui/NostrKeyImportForm.tsx
@@ -96,7 +96,7 @@ export function NostrKeyImportForm({
 
     if (file.size > NOSTR_KEY_FILE_MAX_BYTES) {
       setImportError(
-        "That file is too large to be a Keycase or private key. Choose another file.",
+        "That file is too large to be a key backup or private key. Choose another file.",
       );
       return;
     }
@@ -126,7 +126,7 @@ export function NostrKeyImportForm({
     if (!isValid) {
       setImportError(
         isEncryptedInput
-          ? "Enter the password for this Keycase."
+          ? "Enter the password for this key backup."
           : "That doesn't look like a valid nsec. Paste an nsec1 key.",
       );
       return;
@@ -244,8 +244,8 @@ export function NostrKeyImportForm({
       </div>
 
       {/* Hidden file input shared by both variants: the default drop zone and
-          the spotlight "Use a Keycase" button both open it. Accepts the
-          .ncryptsec archives our own save flow emits alongside raw .key files. */}
+          the spotlight "Choose a backup file" button both open it. Accepts the
+          .ncryptsec backups our own save flow emits alongside raw .key files. */}
       <input
         accept=".key,.ncryptsec,text/plain"
         className="sr-only"
@@ -273,7 +273,7 @@ export function NostrKeyImportForm({
             type="button"
             variant="ghost"
           >
-            Use a Keycase
+            Choose a backup file
           </Button>
         </div>
       ) : (
@@ -358,7 +358,7 @@ export function NostrKeyImportForm({
             className="text-sm font-medium text-foreground"
             htmlFor="nostr-import-passphrase"
           >
-            Keycase password
+            Backup password
           </label>
           <Input
             autoComplete="off"
@@ -376,7 +376,7 @@ export function NostrKeyImportForm({
             value={passphrase}
           />
           <p className="text-xs leading-5 text-muted-foreground">
-            Your Keycase and password stay on this device.
+            Your backup file and password stay on this device.
           </p>
         </div>
       ) : null}
@@ -396,7 +396,8 @@ export function NostrKeyImportForm({
             data-testid="nostr-import-encrypted-badge"
           >
             <KeyRound aria-hidden="true" className="h-4 w-4 shrink-0" />
-            Keycase · Private — enter its password to restore
+            Password-protected key backup · Private — enter its password to
+            restore
           </p>
         ) : previewNpub ? (
           variant === "spotlight" ? (
diff --git a/desktop/src/features/onboarding/ui/onboardingFlowSteps.test.mjs b/desktop/src/features/onboarding/ui/onboardingFlowSteps.test.mjs
index c28be13864..622db610aa 100644
--- a/desktop/src/features/onboarding/ui/onboardingFlowSteps.test.mjs
+++ b/desktop/src/features/onboarding/ui/onboardingFlowSteps.test.mjs
@@ -53,7 +53,7 @@ test("currentStep_falls_back_to_1_for_pages_outside_the_step_list", () => {
 });
 
 // ---------------------------------------------------------------------------
-// BackupStep gating: saving a Keycase is recommended, not required
+// BackupStep gating: saving a password-protected backup is recommended, not required
 // ---------------------------------------------------------------------------
 
 test("backup_next_is_always_enabled", () => {
diff --git a/desktop/src/features/settings/ui/ProfileSettingsCard.tsx b/desktop/src/features/settings/ui/ProfileSettingsCard.tsx
index bec4d2e4ae..8066ba6dbe 100644
--- a/desktop/src/features/settings/ui/ProfileSettingsCard.tsx
+++ b/desktop/src/features/settings/ui/ProfileSettingsCard.tsx
@@ -178,9 +178,9 @@ function NsecRevealRow() {
 }
 
 /**
- * Collapsible row for saving a portable Keycase on demand. The raw
- * private key never reaches this flow — the passphrase goes to Rust, which
- * returns the persisted `ncryptsec1…` blob.
+ * Collapsible row for creating and testing a password-protected key backup.
+ * The raw private key never reaches this flow — the password goes to Rust,
+ * which returns the persisted `ncryptsec1…` blob.
  */
 function EncryptedBackupRow() {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -189,28 +189,34 @@ function EncryptedBackupRow() {
     <div className="px-4 py-3" data-testid="profile-encrypted-backup-row">
       <div className="flex items-center justify-between gap-4">
         <div className="min-w-0 space-y-1">
-          <p className="text-sm font-medium">Keycase</p>
+          <p className="text-sm font-medium">Password-protected key backup</p>
           <p className="text-sm text-muted-foreground">
-            Save a portable, password-protected copy of your identity. Keep it
-            private.
+            Download an encrypted copy of your identity key, then test the file
+            and password before relying on it.
           </p>
         </div>
         <button
           aria-expanded={isOpen}
+          aria-label={
+            isOpen
+              ? "Close password-protected key backup"
+              : "Create password-protected key backup"
+          }
           className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-muted px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
           data-testid="profile-encrypted-backup-toggle"
           onClick={() => setIsOpen((open) => !open)}
           type="button"
         >
-          {isOpen ? "Close" : "Save a new Keycase"}
+          {isOpen ? "Close" : "Create backup"}
         </button>
       </div>
       {isOpen ? (
         <div className="mt-3">
           <EncryptedBackupCreator variant="boxed" />
           <p className="mt-3 text-xs leading-5 text-muted-foreground">
-            Buzz cannot reset the password. Saving a new Keycase does not
-            invalidate copies you saved before.
+            Keep the downloaded file private and save its password somewhere
+            safe. Buzz cannot reset the password. Creating another backup does
+            not invalidate copies you saved before.
           </p>
         </div>
       ) : null}
diff --git a/desktop/src/features/settings/ui/SignOutSection.tsx b/desktop/src/features/settings/ui/SignOutSection.tsx
index 8d4dc1c481..7379a4a4b8 100644
--- a/desktop/src/features/settings/ui/SignOutSection.tsx
+++ b/desktop/src/features/settings/ui/SignOutSection.tsx
@@ -31,9 +31,9 @@ export const SIGNOUT_CONFIRM_PHRASE = "wipe all my data";
  * Signing out wipes the identity key and all local data, so the confirm
  * dialog gates the delete button behind two explicit steps:
  *
- * 1. Back up the key — the nsec is shown inline (masked, with reveal/copy);
- *    the "I have saved my private key" checkbox unlocks only after the user
- *    actually reveals or copies the key.
+ * 1. Confirm recovery — Settings offers a tested password-protected backup;
+ *    the dialog also shows the raw nsec as a last-chance fallback. The
+ *    checkbox unlocks only after the user reveals or copies that key.
  * 2. Typed confirmation — the user must type the exact phrase
  *    "wipe all my data".
  *
@@ -137,7 +137,8 @@ export function SignOutSection() {
           <h2 className="text-lg font-semibold tracking-tight">Sign out</h2>
           <p className="text-sm text-muted-foreground">
             Removes your identity key and all local app data from this device.
-            Back up your private key (nsec) first — this cannot be undone.
+            Before signing out, create and test a password-protected key backup
+            above — this cannot be undone.
           </p>
         </div>
         <Button
@@ -175,7 +176,7 @@ export function SignOutSection() {
 
           <div className="space-y-3">
             <p className="text-sm font-medium">
-              1. Back up your private key (nsec)
+              1. Confirm you can restore your identity
             </p>
             {isNsecLoading ? (
               <p className="text-sm text-muted-foreground">Loading…</p>
@@ -208,10 +209,11 @@ export function SignOutSection() {
                 }
               />
               <span>
-                I have saved my private key somewhere safe.
+                I have tested a key backup or saved this private key somewhere
+                safe.
                 {!canConfirmBackup ? (
                   <span className="block text-xs text-muted-foreground">
-                    Reveal or copy the key above first.
+                    Reveal or copy this last-chance private key first.
                   </span>
                 ) : null}
               </span>
diff --git a/desktop/src/testing/e2eBridge.ts b/desktop/src/testing/e2eBridge.ts
index 87a2a3c0b4..99e6fb2d83 100644
--- a/desktop/src/testing/e2eBridge.ts
+++ b/desktop/src/testing/e2eBridge.ts
@@ -9631,7 +9631,7 @@ export function maybeInstallE2eTauriMocks() {
       case "save_ncryptsec_copy": {
         const blob = (payload as { ncryptsec?: string } | null)?.ncryptsec;
         if (!blob?.startsWith("ncryptsec1")) {
-          throw new Error("Not a valid Keycase.");
+          throw new Error("Not a valid key backup.");
         }
         // Production opens a native save dialog; the harness pretends the
         // user picked a path.
@@ -9667,7 +9667,7 @@ export function maybeInstallE2eTauriMocks() {
             input.trim() !== MOCK_NCRYPTSEC ||
             request?.password !== MOCK_BACKUP_PASSPHRASE
           ) {
-            throw new Error("Wrong Keycase password or damaged Keycase.");
+            throw new Error("Wrong backup password or damaged key backup.");
           }
           mockIdentityLostCleared = true;
           mockIdentityLockedCleared = true;
diff --git a/desktop/tests/e2e/onboarding-backup.spec.ts b/desktop/tests/e2e/onboarding-backup.spec.ts
index 3994c555ad..6e7c90c67f 100644
--- a/desktop/tests/e2e/onboarding-backup.spec.ts
+++ b/desktop/tests/e2e/onboarding-backup.spec.ts
@@ -172,7 +172,7 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
   await page.getByTestId("backup-test-file-input").setInputFiles({
     name: "notes.txt",
     mimeType: "text/plain",
-    buffer: Buffer.from("not a keycase"),
+    buffer: Buffer.from("not a key backup"),
   });
   await expect(page.getByTestId("backup-test-file-error")).toBeVisible();
 
diff --git a/desktop/tests/e2e/onboarding.spec.ts b/desktop/tests/e2e/onboarding.spec.ts
index 0cf08f9be6..de6aa0dda6 100644
--- a/desktop/tests/e2e/onboarding.spec.ts
+++ b/desktop/tests/e2e/onboarding.spec.ts
@@ -645,7 +645,7 @@ test("first-launch encrypted backup import asks for a passphrase and continues",
   await page.getByTestId("nostr-import-passphrase").fill("wrong passphrase");
   await page.getByTestId("nostr-import-submit").click();
   await expect(page.getByTestId("nostr-import-feedback")).toContainText(
-    /wrong Keycase password/i,
+    /wrong backup password/i,
   );
 
   await page
@@ -679,6 +679,15 @@ test("first-launch import accepts an .ncryptsec backup file", async ({
     ".key,.ncryptsec,text/plain",
   );
 
+  await fileInput.setInputFiles({
+    buffer: Buffer.alloc(1_025, "x"),
+    mimeType: "text/plain",
+    name: "not-a-backup.txt",
+  });
+  await expect(page.getByTestId("nostr-import-feedback")).toContainText(
+    /too large to be a key backup/i,
+  );
+
   // Spec-vector blob the mock bridge accepts with the mock passphrase.
   const mockNcryptsec =
     "ncryptsec1qgg9947rlpvqu76pj5ecreduf9jxhselq2nae2kghhvd5g7dgjtcxfqtd67p9m0w57lspw8gsq6yphnm8623nsl8xn9j4jdzz84zm3frztj3z7s35vpzmqf6ksu8r89qk5z2zxfmu5gv8th8wclt0h4p";
diff --git a/desktop/tests/e2e/profile-nsec-reveal.spec.ts b/desktop/tests/e2e/profile-nsec-reveal.spec.ts
index 47e4c8a2de..057c815ceb 100644
--- a/desktop/tests/e2e/profile-nsec-reveal.spec.ts
+++ b/desktop/tests/e2e/profile-nsec-reveal.spec.ts
@@ -63,3 +63,36 @@ test("reveal shows error when get_nsec fails", async ({ page }) => {
     "Keychain locked",
   );
 });
+
+test("settings creates and tests a password-protected key backup", async ({
+  page,
+}) => {
+  await installMockBridge(page);
+  await page.goto("/");
+  await openSettings(page, "profile");
+  await expandIdentity(page);
+
+  const row = page.getByTestId("profile-encrypted-backup-row");
+  await expect(row).toContainText("Password-protected key backup");
+  await page.getByTestId("profile-encrypted-backup-toggle").click();
+
+  await page
+    .getByTestId("backup-passphrase-input")
+    .fill("mock horse battery staple");
+  await page.getByTestId("encrypted-backup-create").click();
+  await expect(page.getByTestId("backup-test-dropzone")).toBeVisible();
+
+  await page.getByTestId("backup-test-file-input").setInputFiles({
+    name: "identity.ncryptsec",
+    mimeType: "text/plain",
+    buffer: Buffer.from(
+      "ncryptsec1qgg9947rlpvqu76pj5ecreduf9jxhselq2nae2kghhvd5g7dgjtcxfqtd67p9m0w57lspw8gsq6yphnm8623nsl8xn9j4jdzz84zm3frztj3z7s35vpzmqf6ksu8r89qk5z2zxfmu5gv8th8wclt0h4p",
+    ),
+  });
+  await page
+    .getByTestId("backup-test-password")
+    .fill("mock horse battery staple");
+  await expect(page.getByTestId("backup-test-success")).toContainText(
+    "Your backup works!",
+  );
+});

From 581f1eed3a804bfbebdeb446f96a86f5141c1c24 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 29 Jul 2026 08:39:40 -0700
Subject: [PATCH 13/21] fix(desktop): variant-aware backup test buttons for the
 settings context
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "Select your backup file" button in BackupTestFlow hardcoded
text-(--buzz-onboarding-cta-label), a CSS variable defined only under
.buzz-onboarding-neutral-theme. In the settings card that variable is
unset, so the label color fell back to the inherited dark foreground on
the dark bg-primary pill — invisible text. The drop-stage buttons also
ignored the existing "boxed" variant and always rendered at onboarding
scale.

- Select button: boxed variant now uses text-primary-foreground with
  settings-scale sizing (h-9 px-6, text-sm label); spotlight keeps the
  onboarding CTA treatment (h-14 px-12, CTA-label color) unchanged
- Re-download button: boxed variant drops from h-12 px-10 text-base to
  h-9 px-6 text-sm to match the other pill buttons in settings cards
- Verified via Playwright screenshot of the settings drop stage; the
  onboarding-backup and profile-nsec-reveal specs both pass

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../features/onboarding/ui/BackupTestFlow.tsx | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
index 37f19d97f2..ec84b5f761 100644
--- a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
+++ b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
@@ -331,7 +331,14 @@ export function BackupTestFlow({
                       ? "border-primary bg-primary/10"
                       : "border-foreground/25 bg-background/40",
                   )
-                : "mx-auto h-14 rounded-full bg-primary px-12 text-(--buzz-onboarding-cta-label) shadow hover:bg-primary/90",
+                : cn(
+                    "mx-auto rounded-full bg-primary shadow hover:bg-primary/90",
+                    // The CTA-label variable only exists inside the onboarding
+                    // theme; elsewhere fall back to the standard primary pair.
+                    isSpotlight
+                      ? "h-14 px-12 text-(--buzz-onboarding-cta-label)"
+                      : "h-9 px-6 text-primary-foreground",
+                  ),
             )}
             data-testid="backup-test-dropzone"
             onClick={() => fileInputRef.current?.click()}
@@ -362,7 +369,12 @@ export function BackupTestFlow({
                 </span>
               </>
             ) : (
-              <span className="text-base font-medium">
+              <span
+                className={cn(
+                  "font-medium",
+                  isSpotlight ? "text-base" : "text-sm",
+                )}
+              >
                 Select your backup file
               </span>
             )}
@@ -377,7 +389,10 @@ export function BackupTestFlow({
           ) : null}
           <div className="flex flex-col items-center gap-2">
             <Button
-              className="h-12 gap-1.5 rounded-full bg-foreground/10 px-10 text-base hover:bg-foreground/15"
+              className={cn(
+                "gap-1.5 rounded-full bg-foreground/10 hover:bg-foreground/15",
+                isSpotlight ? "h-12 px-10 text-base" : "h-9 px-6 text-sm",
+              )}
               data-testid="encrypted-backup-save-copy"
               disabled={isSaving}
               onClick={onSaveCopy}

From b92af2321a9de3da61ceb2f622cd79a5cce9eed8 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 29 Jul 2026 09:09:56 -0700
Subject: [PATCH 14/21] refactor(desktop): composer-style drop overlay for
 backup test flow

Replace the morphing select-button dropzone in the "Test your backup"
flow with the same full-surface drag treatment the chat composer uses:
while a file drag is anywhere over the window, a dashed drop overlay
takes over the host surface instead of reshaping the CTA button.

- BackupTestFlow.tsx: the "Select your backup file" button is now a
  static pill; a window-level file drag renders an absolutely
  positioned overlay (inset-2, dashed primary border, backdrop blur,
  centered "Drop your backup file here" pill mirroring the composer's
  DropZoneOverlay) that is itself the drop target, so anywhere on the
  host surface accepts the file. Removed the per-button isDragActive
  tracking; drop handling moved from the button to the overlay.
- EncryptedBackupRow.tsx: extracted from ProfileSettingsCard (file-size
  ratchet) and given `relative` so the overlay covers the whole
  settings row; onboarding needs no host change since the textured
  Card is already relative.
- tests/helpers/fileDrag.ts: new shared helpers to synthesize window
  file-drag enter/end and drop a file onto a testid target.
- onboarding-backup.spec.ts: cover overlay appearing on drag, reverting
  on drag end, and advancing to the password check when the correct
  file is dropped on the overlay (new 04b screenshot).
- profile-nsec-reveal.spec.ts: cover the overlay takeover/dismiss on
  the settings backup row.

The overlay carries its own testid (backup-test-drop-overlay);
backup-test-dropzone stays on the select button, keeping existing
selectors working.

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../features/onboarding/ui/BackupTestFlow.tsx | 94 ++++++++-----------
 .../settings/ui/EncryptedBackupRow.tsx        | 55 +++++++++++
 .../settings/ui/ProfileSettingsCard.tsx       | 49 +---------
 desktop/tests/e2e/onboarding-backup.spec.ts   | 32 +++++--
 desktop/tests/e2e/profile-nsec-reveal.spec.ts |  9 ++
 desktop/tests/helpers/fileDrag.ts             | 52 ++++++++++
 6 files changed, 181 insertions(+), 110 deletions(-)
 create mode 100644 desktop/src/features/settings/ui/EncryptedBackupRow.tsx
 create mode 100644 desktop/tests/helpers/fileDrag.ts

diff --git a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
index ec84b5f761..ff370c893d 100644
--- a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
+++ b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
@@ -142,9 +142,8 @@ export function BackupTestFlow({
 }: BackupTestFlowProps) {
   const reduceMotion = useReducedMotion() ?? false;
   const { stage, fileName, attempt } = progress;
-  const [isDragActive, setIsDragActive] = React.useState(false);
-  // True while a file drag is anywhere over the window — the select button
-  // renders as a dropzone only for the duration of the drag.
+  // True while a file drag is anywhere over the window — the drop overlay
+  // takes over the host surface only for the duration of the drag.
   const [isWindowDragging, setIsWindowDragging] = React.useState(false);
   const dragDepthRef = React.useRef(0);
 
@@ -322,63 +321,50 @@ export function BackupTestFlow({
           />
           <button
             className={cn(
-              "flex flex-col items-center justify-center gap-2 text-center transition-all",
-              isWindowDragging
-                ? cn(
-                    "w-full rounded-2xl border-2 border-dashed px-6",
-                    isSpotlight ? "h-44" : "h-32",
-                    isDragActive
-                      ? "border-primary bg-primary/10"
-                      : "border-foreground/25 bg-background/40",
-                  )
-                : cn(
-                    "mx-auto rounded-full bg-primary shadow hover:bg-primary/90",
-                    // The CTA-label variable only exists inside the onboarding
-                    // theme; elsewhere fall back to the standard primary pair.
-                    isSpotlight
-                      ? "h-14 px-12 text-(--buzz-onboarding-cta-label)"
-                      : "h-9 px-6 text-primary-foreground",
-                  ),
+              "mx-auto flex items-center justify-center rounded-full bg-primary text-center shadow transition-colors hover:bg-primary/90",
+              // The CTA-label variable only exists inside the onboarding
+              // theme; elsewhere fall back to the standard primary pair.
+              isSpotlight
+                ? "h-14 px-12 text-(--buzz-onboarding-cta-label)"
+                : "h-9 px-6 text-primary-foreground",
             )}
             data-testid="backup-test-dropzone"
             onClick={() => fileInputRef.current?.click()}
-            onDragLeave={() => setIsDragActive(false)}
-            onDragOver={(event) => {
-              event.preventDefault();
-              setIsDragActive(true);
-            }}
-            onDrop={(event) => {
-              event.preventDefault();
-              setIsDragActive(false);
-              const file = event.dataTransfer.files?.[0];
-              if (file) void handleFile(file);
-            }}
             type="button"
           >
-            {isWindowDragging ? (
-              <>
-                <FileUp
-                  aria-hidden="true"
-                  className={cn(
-                    "h-8 w-8 transition-colors",
-                    isDragActive ? "text-primary" : "text-muted-foreground",
-                  )}
-                />
-                <span className="text-sm font-medium text-foreground">
-                  Drop your backup file here
-                </span>
-              </>
-            ) : (
-              <span
-                className={cn(
-                  "font-medium",
-                  isSpotlight ? "text-base" : "text-sm",
-                )}
-              >
-                Select your backup file
-              </span>
-            )}
+            <span
+              className={cn(
+                "font-medium",
+                isSpotlight ? "text-base" : "text-sm",
+              )}
+            >
+              Select your backup file
+            </span>
           </button>
+          {isWindowDragging ? (
+            /*
+             * Composer-style takeover: fills the nearest positioned host
+             * surface (the onboarding card / the settings backup row) and is
+             * itself the drop target, so anywhere on that surface accepts
+             * the file.
+             */
+            // biome-ignore lint/a11y/noStaticElementInteractions: pointer-only drop target; the select button is the keyboard-accessible path
+            <div
+              className="absolute inset-2 z-10 mt-0! flex items-center justify-center rounded-2xl border-2 border-dashed border-primary bg-primary/10 backdrop-blur-sm"
+              data-testid="backup-test-drop-overlay"
+              onDragOver={(event) => event.preventDefault()}
+              onDrop={(event) => {
+                event.preventDefault();
+                const file = event.dataTransfer.files?.[0];
+                if (file) void handleFile(file);
+              }}
+            >
+              <span className="flex items-center gap-2 rounded-full bg-foreground px-4 py-2 text-sm font-semibold text-background shadow-sm ring-1 ring-background/15">
+                <FileUp aria-hidden="true" className="size-4" />
+                <span>Drop your backup file here</span>
+              </span>
+            </div>
+          ) : null}
           {fileError ? (
             <p
               className="text-center text-sm text-destructive"
diff --git a/desktop/src/features/settings/ui/EncryptedBackupRow.tsx b/desktop/src/features/settings/ui/EncryptedBackupRow.tsx
new file mode 100644
index 0000000000..a8d7262660
--- /dev/null
+++ b/desktop/src/features/settings/ui/EncryptedBackupRow.tsx
@@ -0,0 +1,55 @@
+import * as React from "react";
+
+import { EncryptedBackupCreator } from "@/features/onboarding/ui/EncryptedBackupCreator";
+
+/**
+ * Collapsible row for creating and testing a password-protected key backup.
+ * The raw private key never reaches this flow — the password goes to Rust,
+ * which returns the persisted `ncryptsec1…` blob.
+ */
+export function EncryptedBackupRow() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    // `relative`: anchors the backup-test drop overlay (BackupTestFlow) so a
+    // file drag takes over this whole row, mirroring the composer treatment.
+    <div
+      className="relative px-4 py-3"
+      data-testid="profile-encrypted-backup-row"
+    >
+      <div className="flex items-center justify-between gap-4">
+        <div className="min-w-0 space-y-1">
+          <p className="text-sm font-medium">Password-protected key backup</p>
+          <p className="text-sm text-muted-foreground">
+            Download an encrypted copy of your identity key, then test the file
+            and password before relying on it.
+          </p>
+        </div>
+        <button
+          aria-expanded={isOpen}
+          aria-label={
+            isOpen
+              ? "Close password-protected key backup"
+              : "Create password-protected key backup"
+          }
+          className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-muted px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          data-testid="profile-encrypted-backup-toggle"
+          onClick={() => setIsOpen((open) => !open)}
+          type="button"
+        >
+          {isOpen ? "Close" : "Create backup"}
+        </button>
+      </div>
+      {isOpen ? (
+        <div className="mt-3">
+          <EncryptedBackupCreator variant="boxed" />
+          <p className="mt-3 text-xs leading-5 text-muted-foreground">
+            Keep the downloaded file private and save its password somewhere
+            safe. Buzz cannot reset the password. Creating another backup does
+            not invalidate copies you saved before.
+          </p>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/desktop/src/features/settings/ui/ProfileSettingsCard.tsx b/desktop/src/features/settings/ui/ProfileSettingsCard.tsx
index 8066ba6dbe..d82100026d 100644
--- a/desktop/src/features/settings/ui/ProfileSettingsCard.tsx
+++ b/desktop/src/features/settings/ui/ProfileSettingsCard.tsx
@@ -13,7 +13,6 @@ import {
   useUpdateProfileMutation,
 } from "@/features/profile/hooks";
 import { NsecMaskedDisplay } from "@/features/onboarding/ui/NsecMaskedDisplay";
-import { EncryptedBackupCreator } from "@/features/onboarding/ui/EncryptedBackupCreator";
 import { getNsec } from "@/shared/api/tauriIdentity";
 import { MaskedAvatarBadgeFrame } from "@/features/profile/ui/MaskedAvatarBadgeFrame";
 import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar";
@@ -25,6 +24,7 @@ import { cn } from "@/shared/lib/cn";
 import { Input } from "@/shared/ui/input";
 import { Spinner } from "@/shared/ui/spinner";
 import { Textarea } from "@/shared/ui/textarea";
+import { EncryptedBackupRow } from "./EncryptedBackupRow";
 import { SettingsSectionHeader } from "./SettingsSectionHeader";
 import { SignOutSection } from "./SignOutSection";
 import { writeTextToClipboard } from "@/shared/lib/clipboard";
@@ -177,53 +177,6 @@ function NsecRevealRow() {
   );
 }
 
-/**
- * Collapsible row for creating and testing a password-protected key backup.
- * The raw private key never reaches this flow — the password goes to Rust,
- * which returns the persisted `ncryptsec1…` blob.
- */
-function EncryptedBackupRow() {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  return (
-    <div className="px-4 py-3" data-testid="profile-encrypted-backup-row">
-      <div className="flex items-center justify-between gap-4">
-        <div className="min-w-0 space-y-1">
-          <p className="text-sm font-medium">Password-protected key backup</p>
-          <p className="text-sm text-muted-foreground">
-            Download an encrypted copy of your identity key, then test the file
-            and password before relying on it.
-          </p>
-        </div>
-        <button
-          aria-expanded={isOpen}
-          aria-label={
-            isOpen
-              ? "Close password-protected key backup"
-              : "Create password-protected key backup"
-          }
-          className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-muted px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-          data-testid="profile-encrypted-backup-toggle"
-          onClick={() => setIsOpen((open) => !open)}
-          type="button"
-        >
-          {isOpen ? "Close" : "Create backup"}
-        </button>
-      </div>
-      {isOpen ? (
-        <div className="mt-3">
-          <EncryptedBackupCreator variant="boxed" />
-          <p className="mt-3 text-xs leading-5 text-muted-foreground">
-            Keep the downloaded file private and save its password somewhere
-            safe. Buzz cannot reset the password. Creating another backup does
-            not invalidate copies you saved before.
-          </p>
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
 function EditProfileMetadataButton({
   label,
   testId,
diff --git a/desktop/tests/e2e/onboarding-backup.spec.ts b/desktop/tests/e2e/onboarding-backup.spec.ts
index 6e7c90c67f..b5522ee1c0 100644
--- a/desktop/tests/e2e/onboarding-backup.spec.ts
+++ b/desktop/tests/e2e/onboarding-backup.spec.ts
@@ -1,6 +1,11 @@
 import { expect, test } from "@playwright/test";
 import { installMockBridge } from "../helpers/bridge";
 import { waitForAnimations } from "../helpers/animations";
+import {
+  dropFileOnTestId,
+  endWindowFileDrag,
+  startWindowFileDrag,
+} from "../helpers/fileDrag";
 
 async function enterMachineBackup(page: import("@playwright/test").Page) {
   await installMockBridge(page, undefined, {
@@ -149,8 +154,9 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
   await page.getByTestId("encrypted-backup-create").click();
 
   // Only a successful save (the mock "picks" a path) advances to the
-  // "Now, test your backup" flow: a select-file button (dropzone while
-  // dragging) for the saved file, then the password to unlock it.
+  // "Now, test your backup" flow: a select-file button for the saved file
+  // (a composer-style drop overlay takes over the card while a file drag is
+  // over the window), then the password to unlock it.
   await expect(
     page.getByRole("heading", { name: "Now, test your backup" }),
   ).toBeVisible();
@@ -176,14 +182,24 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
   });
   await expect(page.getByTestId("backup-test-file-error")).toBeVisible();
 
-  // The freshly downloaded file advances to the password check.
-  await page.getByTestId("backup-test-file-input").setInputFiles({
-    name: "identity.ncryptsec",
-    mimeType: "text/plain",
-    buffer: Buffer.from(MOCK_NCRYPTSEC),
-  });
+  // A file drag over the window swaps in the drop overlay; leaving without
+  // dropping restores the select button.
+  const dropOverlay = page.getByTestId("backup-test-drop-overlay");
+  await startWindowFileDrag(page);
+  await expect(dropOverlay).toBeVisible();
+  await waitForAnimations(page);
+  await page.screenshot({ path: `${SHOTS}/04b-backup-test-drop-overlay.png` });
+  await endWindowFileDrag(page);
+  await expect(dropOverlay).toHaveCount(0);
+
+  // Dropping the freshly downloaded file on the overlay advances to the
+  // password check.
+  await startWindowFileDrag(page);
+  await expect(dropOverlay).toBeVisible();
+  await dropFileOnTestId(page, "backup-test-drop-overlay", MOCK_NCRYPTSEC);
   const password = page.getByTestId("backup-test-password");
   await expect(password).toBeVisible();
+  await expect(dropOverlay).toHaveCount(0);
 
   await waitForAnimations(page);
   await page.screenshot({ path: `${SHOTS}/05-backup-test-password.png` });
diff --git a/desktop/tests/e2e/profile-nsec-reveal.spec.ts b/desktop/tests/e2e/profile-nsec-reveal.spec.ts
index 057c815ceb..ed9b5f1e12 100644
--- a/desktop/tests/e2e/profile-nsec-reveal.spec.ts
+++ b/desktop/tests/e2e/profile-nsec-reveal.spec.ts
@@ -5,6 +5,7 @@
 import { expect, test } from "@playwright/test";
 import { installMockBridge } from "../helpers/bridge";
 import { openSettings } from "../helpers/settings";
+import { endWindowFileDrag, startWindowFileDrag } from "../helpers/fileDrag";
 
 /** Expand the identity details section if it is not already open. */
 async function expandIdentity(page: import("@playwright/test").Page) {
@@ -82,6 +83,14 @@ test("settings creates and tests a password-protected key backup", async ({
   await page.getByTestId("encrypted-backup-create").click();
   await expect(page.getByTestId("backup-test-dropzone")).toBeVisible();
 
+  // A file drag over the window swaps in a drop overlay covering the backup
+  // row (composer-style takeover); leaving restores the select button.
+  const dropOverlay = page.getByTestId("backup-test-drop-overlay");
+  await startWindowFileDrag(page);
+  await expect(dropOverlay).toBeVisible();
+  await endWindowFileDrag(page);
+  await expect(dropOverlay).toHaveCount(0);
+
   await page.getByTestId("backup-test-file-input").setInputFiles({
     name: "identity.ncryptsec",
     mimeType: "text/plain",
diff --git a/desktop/tests/helpers/fileDrag.ts b/desktop/tests/helpers/fileDrag.ts
new file mode 100644
index 0000000000..3a396ada0f
--- /dev/null
+++ b/desktop/tests/helpers/fileDrag.ts
@@ -0,0 +1,52 @@
+import type { Page } from "@playwright/test";
+
+/**
+ * Simulate a native file drag entering the window. The backup test flow
+ * listens for window-level dragenter with a "Files" payload and swaps in a
+ * composer-style drop overlay over its host surface.
+ */
+export async function startWindowFileDrag(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(
+      new File(["x"], "identity.ncryptsec", { type: "text/plain" }),
+    );
+    window.dispatchEvent(
+      new DragEvent("dragenter", { dataTransfer, bubbles: true }),
+    );
+  });
+}
+
+/** Simulate the file drag leaving the window without dropping. */
+export async function endWindowFileDrag(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    window.dispatchEvent(new DragEvent("dragend", { bubbles: true }));
+  });
+}
+
+/** Drop a text file with the given contents onto the element with `testId`. */
+export async function dropFileOnTestId(
+  page: Page,
+  testId: string,
+  contents: string,
+  name = "identity.ncryptsec",
+): Promise<void> {
+  await page.evaluate(
+    ({ testId, contents, name }) => {
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(
+        new File([contents], name, { type: "text/plain" }),
+      );
+      const target = document.querySelector(`[data-testid="${testId}"]`);
+      if (!target) throw new Error(`drop target ${testId} not found`);
+      target.dispatchEvent(
+        new DragEvent("drop", {
+          dataTransfer,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+    },
+    { testId, contents, name },
+  );
+}

From 18a8c8266f380975f64cdc144709dca067efece0 Mon Sep 17 00:00:00 2001
From: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
 <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@buzz.block.builderlab.xyz>
Date: Wed, 29 Jul 2026 09:36:57 -0700
Subject: [PATCH 15/21] fix(desktop): harden NIP-49 backup verification

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/src-tauri/src/commands/identity.rs    | 249 ++------
 .../src/commands/identity_key_backup_tests.rs | 236 +++++++
 desktop/src-tauri/src/egress_guard_tests.rs   |   1 +
 desktop/src-tauri/src/lib.rs                  |   1 +
 .../onboarding/lib/encryptedBackup.test.mjs   | 275 +++-----
 .../onboarding/lib/encryptedBackup.ts         | 188 +++---
 .../features/onboarding/ui/BackupTestFlow.tsx | 594 +++++++-----------
 .../onboarding/ui/EncryptedBackupCreator.tsx  | 188 ++++--
 .../settings/ui/EncryptedBackupRow.tsx        | 109 ++--
 desktop/src/shared/api/tauriIdentity.ts       |  17 +
 desktop/src/testing/e2eBridge.ts              |  19 +
 desktop/tests/e2e/onboarding-backup.spec.ts   |  37 +-
 desktop/tests/e2e/profile-nsec-reveal.spec.ts |  36 +-
 13 files changed, 946 insertions(+), 1004 deletions(-)
 create mode 100644 desktop/src-tauri/src/commands/identity_key_backup_tests.rs

diff --git a/desktop/src-tauri/src/commands/identity.rs b/desktop/src-tauri/src/commands/identity.rs
index 45ae33d99f..344e519657 100644
--- a/desktop/src-tauri/src/commands/identity.rs
+++ b/desktop/src-tauri/src/commands/identity.rs
@@ -266,6 +266,47 @@ pub async fn create_ncryptsec_backup(
     .map_err(|e| format!("spawn_blocking failed: {e}"))?
 }
 
+#[derive(Debug, serde::Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct BackupVerification {
+    pub pubkey: String,
+    pub npub: String,
+    pub matches_current_identity: bool,
+}
+
+fn verify_ncryptsec_backup_inner(
+    state: &AppState,
+    ncryptsec: &str,
+    password: &str,
+) -> Result<BackupVerification, String> {
+    let keys = crate::key_backup::decrypt_ncryptsec(ncryptsec, password)?;
+    let pubkey = keys.public_key();
+    let current = state.signing_keys()?.public_key();
+    Ok(BackupVerification {
+        pubkey: pubkey.to_hex(),
+        npub: pubkey
+            .to_bech32()
+            .map_err(|e| format!("encode backup identity: {e}"))?,
+        matches_current_identity: pubkey == current,
+    })
+}
+
+/// Decrypt and validate a NIP-49 backup without exposing its secret key.
+#[tauri::command]
+pub async fn verify_ncryptsec_backup(
+    ncryptsec: String,
+    password: String,
+    app_handle: tauri::AppHandle,
+) -> Result<BackupVerification, String> {
+    tokio::task::spawn_blocking(move || {
+        let password = zeroize::Zeroizing::new(password);
+        let state = app_handle.state::<AppState>();
+        verify_ncryptsec_backup_inner(&state, &ncryptsec, &password)
+    })
+    .await
+    .map_err(|e| format!("spawn_blocking failed: {e}"))?
+}
+
 /// Save a portable copy of an `ncryptsec1…` backup to a user-chosen path.
 ///
 /// The input must parse as a structurally valid NIP-49 payload. The dialog is
@@ -751,209 +792,5 @@ mod nostr_identity_binding_tests {
 }
 
 #[cfg(test)]
-mod key_backup_command_tests {
-    use super::create_and_persist_backup_with_log_n;
-    use crate::app_state::build_app_state;
-    use nostr::Keys;
-
-    /// Fast scrypt tier for tests; production uses BACKUP_LOG_N (18), covered
-    /// once in key_backup_tests::round_trip_at_production_cost.
-    const FAST_LOG_N: u8 = 16;
-    const PASSWORD: &str = "correct horse battery";
-
-    #[test]
-    fn returned_bytes_equal_on_disk_bytes() {
-        let state = build_app_state();
-        let dir = tempfile::tempdir().unwrap();
-        let returned =
-            create_and_persist_backup_with_log_n(&state, dir.path(), PASSWORD, FAST_LOG_N).unwrap();
-
-        let path = crate::key_backup::backup_file_path(dir.path());
-        let on_disk = std::fs::read_to_string(&path).unwrap();
-        assert_eq!(
-            returned, on_disk,
-            "webview must receive the exact persisted bytes"
-        );
-
-        #[cfg(unix)]
-        {
-            use std::os::unix::fs::PermissionsExt;
-            let mode = std::fs::metadata(&path).unwrap().permissions().mode();
-            assert_eq!(mode & 0o777, 0o600);
-        }
-
-        // And the persisted blob provably recovers the live identity.
-        let keys = state.keys.lock().unwrap().clone();
-        let recovered = crate::key_backup::decrypt_ncryptsec(&on_disk, PASSWORD).unwrap();
-        assert_eq!(recovered.public_key(), keys.public_key());
-    }
-
-    #[test]
-    fn overwrite_replaces_atomically() {
-        let state = build_app_state();
-        let dir = tempfile::tempdir().unwrap();
-        let first =
-            create_and_persist_backup_with_log_n(&state, dir.path(), PASSWORD, FAST_LOG_N).unwrap();
-        let second = create_and_persist_backup_with_log_n(
-            &state,
-            dir.path(),
-            "another passphrase",
-            FAST_LOG_N,
-        )
-        .unwrap();
-        assert_ne!(first, second, "fresh salt/nonce per action");
-
-        let path = crate::key_backup::backup_file_path(dir.path());
-        assert_eq!(std::fs::read_to_string(&path).unwrap(), second);
-    }
-
-    #[test]
-    fn rejects_short_passphrase() {
-        let state = build_app_state();
-        let dir = tempfile::tempdir().unwrap();
-        let err = create_and_persist_backup_with_log_n(&state, dir.path(), "short", FAST_LOG_N)
-            .unwrap_err();
-        assert!(err.contains("at least"), "{err}");
-        assert!(!crate::key_backup::backup_file_path(dir.path()).exists());
-    }
-
-    #[test]
-    fn recovery_mode_blocks_backup_creation() {
-        let state = build_app_state();
-        let dir = tempfile::tempdir().unwrap();
-
-        state
-            .identity_lost
-            .store(true, std::sync::atomic::Ordering::Release);
-        assert!(
-            create_and_persist_backup_with_log_n(&state, dir.path(), PASSWORD, FAST_LOG_N).is_err(),
-            "lost identity must not be backed up"
-        );
-        state
-            .identity_lost
-            .store(false, std::sync::atomic::Ordering::Release);
-
-        state
-            .keyring_locked
-            .store(true, std::sync::atomic::Ordering::Release);
-        assert!(
-            create_and_persist_backup_with_log_n(&state, dir.path(), PASSWORD, FAST_LOG_N).is_err(),
-            "locked keyring must not be backed up"
-        );
-        assert!(!crate::key_backup::backup_file_path(dir.path()).exists());
-    }
-
-    /// Blocker-1 regression (Wren, implementation review): a failed
-    /// different-key import must leave BOTH the old in-memory identity and
-    /// the old canonical backup intact. Persistence runs before cleanup, so
-    /// an `Err` from persist means nothing was mutated or deleted.
-    #[test]
-    fn failed_import_persistence_preserves_old_identity_and_backup() {
-        let state = build_app_state();
-        let dir = tempfile::tempdir().unwrap();
-        let old_pubkey = state.keys.lock().unwrap().public_key();
-
-        // A valid canonical backup for the live (old) identity.
-        create_and_persist_backup_with_log_n(&state, dir.path(), PASSWORD, FAST_LOG_N).unwrap();
-        let backup_path = crate::key_backup::backup_file_path(dir.path());
-        let backup_before = std::fs::read_to_string(&backup_path).unwrap();
-
-        // Different-key import whose durable persistence fails (both
-        // keyring and file fallback down).
-        let _guard = state.identity_mutation.lock().unwrap();
-        let err = super::commit_imported_identity(&state, dir.path(), Keys::generate(), |_| {
-            Err("keyring and file both unavailable".to_string())
-        })
-        .unwrap_err();
-        assert!(err.contains("unavailable"), "{err}");
-
-        // Old identity still live; old backup untouched byte-for-byte.
-        assert_eq!(state.keys.lock().unwrap().public_key(), old_pubkey);
-        assert_eq!(
-            std::fs::read_to_string(&backup_path).unwrap(),
-            backup_before
-        );
-        assert!(
-            crate::key_backup::decrypt_ncryptsec(&backup_before, PASSWORD)
-                .unwrap()
-                .public_key()
-                == old_pubkey,
-            "surviving backup must still recover the still-live identity"
-        );
-    }
-
-    /// Successful different-key import removes the previous identity's
-    /// backup — cleanup runs after the durable commit, not before.
-    #[test]
-    fn successful_import_removes_stale_backup_after_commit() {
-        let state = build_app_state();
-        let dir = tempfile::tempdir().unwrap();
-
-        create_and_persist_backup_with_log_n(&state, dir.path(), PASSWORD, FAST_LOG_N).unwrap();
-        let backup_path = crate::key_backup::backup_file_path(dir.path());
-        assert!(backup_path.exists());
-
-        let new_keys = Keys::generate();
-        let backup_present_at_persist = std::cell::Cell::new(false);
-        let _guard = state.identity_mutation.lock().unwrap();
-        let pubkey = super::commit_imported_identity(&state, dir.path(), new_keys.clone(), |_| {
-            // Ordering probe: the old backup must still exist while
-            // persistence is running (cleanup has not happened yet).
-            backup_present_at_persist.set(backup_path.exists());
-            Ok(())
-        })
-        .unwrap();
-
-        assert!(
-            backup_present_at_persist.get(),
-            "cleanup must not precede persist"
-        );
-        assert_eq!(pubkey, new_keys.public_key());
-        assert_eq!(
-            state.keys.lock().unwrap().public_key(),
-            new_keys.public_key()
-        );
-        assert!(
-            !backup_path.exists(),
-            "stale backup must be removed post-commit"
-        );
-    }
-
-    /// Concurrent identity swap vs backup creation: `identity_mutation`
-    /// serializes both, so every persisted blob decrypts to the identity that
-    /// was live for the whole of its create operation — never a torn state.
-    #[test]
-    fn concurrent_identity_swap_vs_backup_is_serialized() {
-        let state = std::sync::Arc::new(build_app_state());
-        let dir = tempfile::tempdir().unwrap();
-        let key_a = state.keys.lock().unwrap().clone();
-        let key_b = Keys::generate();
-
-        let swapper = {
-            let state = state.clone();
-            let key_b = key_b.clone();
-            std::thread::spawn(move || {
-                // Mirrors import_identity's locking: mutation guard held
-                // across the key swap.
-                let _guard = state.identity_mutation.lock().unwrap();
-                *state.keys.lock().unwrap() = key_b;
-            })
-        };
-
-        let backup =
-            create_and_persist_backup_with_log_n(&state, dir.path(), PASSWORD, FAST_LOG_N).unwrap();
-        swapper.join().unwrap();
-
-        let recovered = crate::key_backup::decrypt_ncryptsec(&backup, PASSWORD)
-            .unwrap()
-            .public_key();
-        assert!(
-            recovered == key_a.public_key() || recovered == key_b.public_key(),
-            "backup must match one coherent identity"
-        );
-        // Whichever won, the persisted file equals the returned blob.
-        let on_disk =
-            std::fs::read_to_string(crate::key_backup::backup_file_path(dir.path())).unwrap();
-        assert_eq!(on_disk, backup);
-    }
-}
+#[path = "identity_key_backup_tests.rs"]
+mod key_backup_command_tests;
diff --git a/desktop/src-tauri/src/commands/identity_key_backup_tests.rs b/desktop/src-tauri/src/commands/identity_key_backup_tests.rs
new file mode 100644
index 0000000000..54ccdab2f6
--- /dev/null
+++ b/desktop/src-tauri/src/commands/identity_key_backup_tests.rs
@@ -0,0 +1,236 @@
+
+use super::{create_and_persist_backup_with_log_n, verify_ncryptsec_backup_inner};
+use crate::app_state::build_app_state;
+use nostr::Keys;
+
+/// Fast scrypt tier for tests; production uses BACKUP_LOG_N (18), covered
+/// once in key_backup_tests::round_trip_at_production_cost.
+const FAST_LOG_N: u8 = 16;
+const PASSWORD: &str = "correct horse battery";
+
+#[test]
+fn returned_bytes_equal_on_disk_bytes() {
+    let state = build_app_state();
+    let dir = tempfile::tempdir().unwrap();
+    let returned =
+        create_and_persist_backup_with_log_n(&state, dir.path(), PASSWORD, FAST_LOG_N).unwrap();
+
+    let path = crate::key_backup::backup_file_path(dir.path());
+    let on_disk = std::fs::read_to_string(&path).unwrap();
+    assert_eq!(
+        returned, on_disk,
+        "webview must receive the exact persisted bytes"
+    );
+
+    #[cfg(unix)]
+    {
+        use std::os::unix::fs::PermissionsExt;
+        let mode = std::fs::metadata(&path).unwrap().permissions().mode();
+        assert_eq!(mode & 0o777, 0o600);
+    }
+
+    // And the persisted blob provably recovers the live identity.
+    let keys = state.keys.lock().unwrap().clone();
+    let recovered = crate::key_backup::decrypt_ncryptsec(&on_disk, PASSWORD).unwrap();
+    assert_eq!(recovered.public_key(), keys.public_key());
+}
+
+#[test]
+fn verification_returns_only_public_identity_and_match_status() {
+    let state = build_app_state();
+    let dir = tempfile::tempdir().unwrap();
+    let backup =
+        create_and_persist_backup_with_log_n(&state, dir.path(), PASSWORD, FAST_LOG_N).unwrap();
+    let result = verify_ncryptsec_backup_inner(&state, &backup, PASSWORD).unwrap();
+    assert_eq!(
+        result.pubkey,
+        state.keys.lock().unwrap().public_key().to_hex()
+    );
+    assert!(result.npub.starts_with("npub1"));
+    assert!(result.matches_current_identity);
+}
+
+#[test]
+fn verification_reports_valid_backup_for_a_different_identity() {
+    let state = build_app_state();
+    let other = Keys::generate();
+    let backup = crate::key_backup::create_backup_blob(&other, PASSWORD, FAST_LOG_N).unwrap();
+    let result = verify_ncryptsec_backup_inner(&state, &backup, PASSWORD).unwrap();
+    assert_eq!(result.pubkey, other.public_key().to_hex());
+    assert!(!result.matches_current_identity);
+}
+
+#[test]
+fn verification_rejects_wrong_password() {
+    let state = build_app_state();
+    let backup =
+        crate::key_backup::create_backup_blob(&Keys::generate(), PASSWORD, FAST_LOG_N).unwrap();
+    assert_eq!(
+        verify_ncryptsec_backup_inner(&state, &backup, "wrong password").unwrap_err(),
+        "wrong backup password or damaged key backup"
+    );
+}
+
+#[test]
+fn overwrite_replaces_atomically() {
+    let state = build_app_state();
+    let dir = tempfile::tempdir().unwrap();
+    let first =
+        create_and_persist_backup_with_log_n(&state, dir.path(), PASSWORD, FAST_LOG_N).unwrap();
+    let second =
+        create_and_persist_backup_with_log_n(&state, dir.path(), "another passphrase", FAST_LOG_N)
+            .unwrap();
+    assert_ne!(first, second, "fresh salt/nonce per action");
+
+    let path = crate::key_backup::backup_file_path(dir.path());
+    assert_eq!(std::fs::read_to_string(&path).unwrap(), second);
+}
+
+#[test]
+fn rejects_short_passphrase() {
+    let state = build_app_state();
+    let dir = tempfile::tempdir().unwrap();
+    let err =
+        create_and_persist_backup_with_log_n(&state, dir.path(), "short", FAST_LOG_N).unwrap_err();
+    assert!(err.contains("at least"), "{err}");
+    assert!(!crate::key_backup::backup_file_path(dir.path()).exists());
+}
+
+#[test]
+fn recovery_mode_blocks_backup_creation() {
+    let state = build_app_state();
+    let dir = tempfile::tempdir().unwrap();
+
+    state
+        .identity_lost
+        .store(true, std::sync::atomic::Ordering::Release);
+    assert!(
+        create_and_persist_backup_with_log_n(&state, dir.path(), PASSWORD, FAST_LOG_N).is_err(),
+        "lost identity must not be backed up"
+    );
+    state
+        .identity_lost
+        .store(false, std::sync::atomic::Ordering::Release);
+
+    state
+        .keyring_locked
+        .store(true, std::sync::atomic::Ordering::Release);
+    assert!(
+        create_and_persist_backup_with_log_n(&state, dir.path(), PASSWORD, FAST_LOG_N).is_err(),
+        "locked keyring must not be backed up"
+    );
+    assert!(!crate::key_backup::backup_file_path(dir.path()).exists());
+}
+
+/// Blocker-1 regression (Wren, implementation review): a failed
+/// different-key import must leave BOTH the old in-memory identity and
+/// the old canonical backup intact. Persistence runs before cleanup, so
+/// an `Err` from persist means nothing was mutated or deleted.
+#[test]
+fn failed_import_persistence_preserves_old_identity_and_backup() {
+    let state = build_app_state();
+    let dir = tempfile::tempdir().unwrap();
+    let old_pubkey = state.keys.lock().unwrap().public_key();
+
+    // A valid canonical backup for the live (old) identity.
+    create_and_persist_backup_with_log_n(&state, dir.path(), PASSWORD, FAST_LOG_N).unwrap();
+    let backup_path = crate::key_backup::backup_file_path(dir.path());
+    let backup_before = std::fs::read_to_string(&backup_path).unwrap();
+
+    // Different-key import whose durable persistence fails (both
+    // keyring and file fallback down).
+    let _guard = state.identity_mutation.lock().unwrap();
+    let err = super::commit_imported_identity(&state, dir.path(), Keys::generate(), |_| {
+        Err("keyring and file both unavailable".to_string())
+    })
+    .unwrap_err();
+    assert!(err.contains("unavailable"), "{err}");
+
+    // Old identity still live; old backup untouched byte-for-byte.
+    assert_eq!(state.keys.lock().unwrap().public_key(), old_pubkey);
+    assert_eq!(
+        std::fs::read_to_string(&backup_path).unwrap(),
+        backup_before
+    );
+    assert!(
+        crate::key_backup::decrypt_ncryptsec(&backup_before, PASSWORD)
+            .unwrap()
+            .public_key()
+            == old_pubkey,
+        "surviving backup must still recover the still-live identity"
+    );
+}
+
+/// Successful different-key import removes the previous identity's
+/// backup — cleanup runs after the durable commit, not before.
+#[test]
+fn successful_import_removes_stale_backup_after_commit() {
+    let state = build_app_state();
+    let dir = tempfile::tempdir().unwrap();
+
+    create_and_persist_backup_with_log_n(&state, dir.path(), PASSWORD, FAST_LOG_N).unwrap();
+    let backup_path = crate::key_backup::backup_file_path(dir.path());
+    assert!(backup_path.exists());
+
+    let new_keys = Keys::generate();
+    let backup_present_at_persist = std::cell::Cell::new(false);
+    let _guard = state.identity_mutation.lock().unwrap();
+    let pubkey = super::commit_imported_identity(&state, dir.path(), new_keys.clone(), |_| {
+        // Ordering probe: the old backup must still exist while
+        // persistence is running (cleanup has not happened yet).
+        backup_present_at_persist.set(backup_path.exists());
+        Ok(())
+    })
+    .unwrap();
+
+    assert!(
+        backup_present_at_persist.get(),
+        "cleanup must not precede persist"
+    );
+    assert_eq!(pubkey, new_keys.public_key());
+    assert_eq!(
+        state.keys.lock().unwrap().public_key(),
+        new_keys.public_key()
+    );
+    assert!(
+        !backup_path.exists(),
+        "stale backup must be removed post-commit"
+    );
+}
+
+/// Concurrent identity swap vs backup creation: `identity_mutation`
+/// serializes both, so every persisted blob decrypts to the identity that
+/// was live for the whole of its create operation — never a torn state.
+#[test]
+fn concurrent_identity_swap_vs_backup_is_serialized() {
+    let state = std::sync::Arc::new(build_app_state());
+    let dir = tempfile::tempdir().unwrap();
+    let key_a = state.keys.lock().unwrap().clone();
+    let key_b = Keys::generate();
+
+    let swapper = {
+        let state = state.clone();
+        let key_b = key_b.clone();
+        std::thread::spawn(move || {
+            // Mirrors import_identity's locking: mutation guard held
+            // across the key swap.
+            let _guard = state.identity_mutation.lock().unwrap();
+            *state.keys.lock().unwrap() = key_b;
+        })
+    };
+
+    let backup =
+        create_and_persist_backup_with_log_n(&state, dir.path(), PASSWORD, FAST_LOG_N).unwrap();
+    swapper.join().unwrap();
+
+    let recovered = crate::key_backup::decrypt_ncryptsec(&backup, PASSWORD)
+        .unwrap()
+        .public_key();
+    assert!(
+        recovered == key_a.public_key() || recovered == key_b.public_key(),
+        "backup must match one coherent identity"
+    );
+    // Whichever won, the persisted file equals the returned blob.
+    let on_disk = std::fs::read_to_string(crate::key_backup::backup_file_path(dir.path())).unwrap();
+    assert_eq!(on_disk, backup);
+}
diff --git a/desktop/src-tauri/src/egress_guard_tests.rs b/desktop/src-tauri/src/egress_guard_tests.rs
index cc8cd483c7..65448405e7 100644
--- a/desktop/src-tauri/src/egress_guard_tests.rs
+++ b/desktop/src-tauri/src/egress_guard_tests.rs
@@ -399,6 +399,7 @@ fn ncryptsec_handling_is_confined_to_allowlisted_files() {
         "src/egress_guard.rs",
         "src/egress_guard_tests.rs",
         "src/commands/identity.rs",
+        "src/commands/identity_key_backup_tests.rs",
         "src/lib.rs", // module registration + invoke handler
         // boundary wiring (guard call sites name the module, not the codec):
         "src/relay.rs",
diff --git a/desktop/src-tauri/src/lib.rs b/desktop/src-tauri/src/lib.rs
index c75daafea5..661295fa04 100644
--- a/desktop/src-tauri/src/lib.rs
+++ b/desktop/src-tauri/src/lib.rs
@@ -682,6 +682,7 @@ pub fn run() {
             get_nsec,
             generate_backup_passphrase,
             create_ncryptsec_backup,
+            verify_ncryptsec_backup,
             save_ncryptsec_copy,
             import_identity,
             persist_current_identity,
diff --git a/desktop/src/features/onboarding/lib/encryptedBackup.test.mjs b/desktop/src/features/onboarding/lib/encryptedBackup.test.mjs
index 8db64b6218..1d98a98541 100644
--- a/desktop/src/features/onboarding/lib/encryptedBackup.test.mjs
+++ b/desktop/src/features/onboarding/lib/encryptedBackup.test.mjs
@@ -1,11 +1,5 @@
-/**
- * Pure-logic tests for the encrypted-backup (NIP-49) creation state model.
- * These drive the same reducer + validation helpers the DownloadKeyStep and
- * settings row use, without a DOM.
- */
 import assert from "node:assert/strict";
 import test from "node:test";
-
 import {
   MIN_PASSPHRASE_LEN,
   downloadDisabled,
@@ -16,237 +10,108 @@ import {
   encryptedBackupReducer,
   initialEncryptedBackupState,
 } from "./encryptedBackup.ts";
-
-function reduce(events, from = initialEncryptedBackupState) {
-  return events.reduce(encryptedBackupReducer, from);
-}
-
-// ── passphrase validation ────────────────────────────────────────────────────
-
-test("download_disabled_until_passphrase_meets_min_length", () => {
-  assert.equal(downloadDisabled(initialEncryptedBackupState), true);
-
-  const short = reduce([{ type: "set-passphrase", value: "short" }]);
-  assert.equal(effectivePassphrase(short), null);
-  assert.equal(downloadDisabled(short), true);
-
-  const ready = reduce([
-    { type: "set-passphrase", value: "regency-dawes-bilal-sit" },
-  ]);
-  assert.equal(effectivePassphrase(ready), "regency-dawes-bilal-sit");
-  assert.equal(downloadDisabled(ready), false);
-});
-
-test("passphrase_issue_messages", () => {
-  // Empty input: no scolding while the user hasn't typed anything.
+const reduce = (events, from = initialEncryptedBackupState) =>
+  events.reduce(encryptedBackupReducer, from);
+test("password validation mirrors Rust character counting", () => {
   assert.equal(passphraseIssue(""), null);
   assert.match(passphraseIssue("short"), new RegExp(`${MIN_PASSPHRASE_LEN}`));
-  assert.equal(passphraseIssue("a".repeat(MIN_PASSPHRASE_LEN)), null);
-});
-
-test("min_length_counts_code_points_not_utf16_units", () => {
-  // 12 astral-plane emoji = 24 UTF-16 units but 12 code points; mirrors the
-  // Rust chars().count() gate so both sides agree on the boundary.
   const emoji = "😀".repeat(MIN_PASSPHRASE_LEN);
   assert.equal(passphraseIssue(emoji), null);
-  const ready = reduce([{ type: "set-passphrase", value: emoji }]);
-  assert.equal(effectivePassphrase(ready), emoji);
-});
-
-test("editing_passphrase_clears_create_error", () => {
-  const failed = reduce([
-    { type: "set-passphrase", value: "regency-dawes-bilal-sit" },
-    { type: "encrypt-started", passphrase: "regency-dawes-bilal-sit" },
-    {
-      type: "encrypt-failed",
-      passphrase: "regency-dawes-bilal-sit",
-      message: "keychain unavailable",
-    },
-  ]);
-  assert.equal(failed.createError, "keychain unavailable");
-  const edited = reduce(
-    [{ type: "set-passphrase", value: "regency-dawes-bilal-sat" }],
-    failed,
+  assert.equal(
+    effectivePassphrase(reduce([{ type: "set-passphrase", value: emoji }])),
+    emoji,
   );
-  assert.equal(edited.createError, null);
 });
-
-// ── eager encryption lifecycle ───────────────────────────────────────────────
-
-test("valid_passphrase_requests_background_encryption", () => {
-  assert.equal(pendingEncryptPassphrase(initialEncryptedBackupState), null);
-
-  const short = reduce([{ type: "set-passphrase", value: "short" }]);
-  assert.equal(pendingEncryptPassphrase(short), null);
-
+test("valid password requests encryption without copying it into events", () => {
   const ready = reduce([
     { type: "set-passphrase", value: "one-two-three-four" },
   ]);
   assert.equal(pendingEncryptPassphrase(ready), "one-two-three-four");
-
-  const started = reduce(
-    [{ type: "encrypt-started", passphrase: "one-two-three-four" }],
-    ready,
-  );
+  const started = reduce([{ type: "encrypt-started", requestId: 1 }], ready);
   assert.equal(isEncrypting(started), true);
-  assert.equal(
-    pendingEncryptPassphrase(started),
-    null,
-    "no duplicate start while the KDF runs",
-  );
-
-  const done = reduce(
-    [
-      {
-        type: "encrypt-succeeded",
-        passphrase: "one-two-three-four",
-        ncryptsec: "ncryptsec1abc",
-      },
-    ],
-    started,
-  );
-  assert.equal(isEncrypting(done), false);
-  assert.equal(pendingEncryptPassphrase(done), null, "result cached");
-  assert.equal(done.ncryptsec, null, "nothing commits before Download");
+  assert.equal(started.requestId, 1);
+  assert.equal(Object.hasOwn(started, "encryptingPassphrase"), false);
 });
-
-test("stale_encryption_results_are_dropped_and_retriggered", () => {
-  const editedMidFlight = reduce([
+test("success clears password and retains only encrypted blob", () => {
+  const state = reduce([
     { type: "set-passphrase", value: "one-two-three-four" },
-    { type: "encrypt-started", passphrase: "one-two-three-four" },
-    { type: "set-passphrase", value: "five-six-seven-eight" },
+    { type: "encrypt-started", requestId: 1 },
+    { type: "encrypt-succeeded", requestId: 1, ncryptsec: "ncryptsec1abc" },
   ]);
-  // The new passphrase needs its own run even while the old one is in flight.
-  assert.equal(
-    pendingEncryptPassphrase(editedMidFlight),
-    "five-six-seven-eight",
-  );
-
-  const staleLanded = reduce(
-    [
-      { type: "encrypt-started", passphrase: "five-six-seven-eight" },
-      {
-        type: "encrypt-succeeded",
-        passphrase: "one-two-three-four",
-        ncryptsec: "ncryptsec1stale",
-      },
-    ],
-    editedMidFlight,
-  );
-  assert.equal(staleLanded.encrypted.passphrase, "one-two-three-four");
-  assert.equal(staleLanded.ncryptsec, null, "stale result never commits");
-  assert.equal(
-    isEncrypting(staleLanded),
-    true,
-    "current passphrase still encrypting",
-  );
-
-  const staleFailed = reduce(
-    [
-      {
-        type: "encrypt-failed",
-        passphrase: "one-two-three-four",
-        message: "boom",
-      },
-    ],
-    editedMidFlight,
-  );
-  assert.equal(staleFailed.createError, null, "stale failures are silent");
+  assert.equal(state.passphrase, "");
+  assert.equal(state.encrypted, "ncryptsec1abc");
+  assert.equal(state.savedPassword, true);
+  assert.equal(state.requestId, null);
 });
-
-// ── download commit ──────────────────────────────────────────────────────────
-
-test("download_commits_instantly_when_encryption_is_done", () => {
+test("stale async completions cannot replace current request", () => {
   const state = reduce([
     { type: "set-passphrase", value: "one-two-three-four" },
-    { type: "encrypt-started", passphrase: "one-two-three-four" },
-    {
-      type: "encrypt-succeeded",
-      passphrase: "one-two-three-four",
-      ncryptsec: "ncryptsec1abc",
-    },
-    { type: "download-clicked" },
+    { type: "encrypt-started", requestId: 1 },
+    { type: "set-passphrase", value: "five-six-seven-eight" },
+    { type: "encrypt-started", requestId: 2 },
+    { type: "encrypt-succeeded", requestId: 1, ncryptsec: "ncryptsec1stale" },
   ]);
-  assert.equal(state.ncryptsec, "ncryptsec1abc");
-  assert.equal(state.downloadPending, false);
+  assert.equal(state.requestId, 2);
+  assert.equal(state.encrypted, null);
+  assert.equal(state.passphrase, "five-six-seven-eight");
 });
-
-test("download_during_encryption_queues_then_commits_on_success", () => {
-  const queued = reduce([
+test("failure clears submitted password", () => {
+  const state = reduce([
     { type: "set-passphrase", value: "one-two-three-four" },
-    { type: "encrypt-started", passphrase: "one-two-three-four" },
+    { type: "encrypt-started", requestId: 1 },
     { type: "download-clicked" },
+    { type: "encrypt-failed", requestId: 1, message: "keychain unavailable" },
   ]);
-  assert.equal(queued.downloadPending, true);
-  assert.equal(queued.ncryptsec, null);
-  assert.equal(downloadDisabled(queued), true, "no double-click while queued");
-
-  const committed = reduce(
-    [
-      {
-        type: "encrypt-succeeded",
-        passphrase: "one-two-three-four",
-        ncryptsec: "ncryptsec1abc",
-      },
-    ],
-    queued,
-  );
-  assert.equal(committed.ncryptsec, "ncryptsec1abc");
-  assert.equal(committed.downloadPending, false);
+  assert.equal(state.passphrase, "");
+  assert.equal(state.createError, "keychain unavailable");
+  assert.equal(state.downloadPending, false);
+  assert.equal(downloadDisabled(state), true);
 });
-
-test("queued_download_clears_on_failure_so_user_can_retry", () => {
-  const failed = reduce([
+test("queued download commits and clears password", () => {
+  const state = reduce([
     { type: "set-passphrase", value: "one-two-three-four" },
-    { type: "encrypt-started", passphrase: "one-two-three-four" },
+    { type: "encrypt-started", requestId: 1 },
     { type: "download-clicked" },
-    {
-      type: "encrypt-failed",
-      passphrase: "one-two-three-four",
-      message: "keychain unavailable",
-    },
+    { type: "encrypt-succeeded", requestId: 1, ncryptsec: "ncryptsec1abc" },
   ]);
-  assert.equal(failed.downloadPending, false);
-  assert.equal(failed.createError, "keychain unavailable");
-  assert.equal(downloadDisabled(failed), false, "retry allowed after failure");
+  assert.equal(state.ncryptsec, "ncryptsec1abc");
+  assert.equal(state.passphrase, "");
+  assert.equal(state.savedPassword, true);
 });
-
-test("back_to_password_discards_commit_but_keeps_cached_encryption", () => {
-  const back = reduce([
+test("Back preserves blob for immediate re-download without password", () => {
+  const made = reduce([
     { type: "set-passphrase", value: "one-two-three-four" },
-    { type: "encrypt-started", passphrase: "one-two-three-four" },
-    {
-      type: "encrypt-succeeded",
-      passphrase: "one-two-three-four",
-      ncryptsec: "ncryptsec1abc",
-    },
+    { type: "encrypt-started", requestId: 1 },
+    { type: "encrypt-succeeded", requestId: 1, ncryptsec: "ncryptsec1abc" },
     { type: "download-clicked" },
     { type: "back-to-password" },
   ]);
-  assert.equal(back.ncryptsec, null, "committed blob discarded");
-  assert.equal(back.passphrase, "one-two-three-four", "passphrase kept");
-  assert.equal(
-    pendingEncryptPassphrase(back),
-    null,
-    "cached result means no re-encryption",
-  );
-
-  // Re-downloading the unchanged passphrase commits instantly from cache.
-  const recommitted = reduce([{ type: "download-clicked" }], back);
-  assert.equal(recommitted.ncryptsec, "ncryptsec1abc");
+  assert.equal(made.ncryptsec, "ncryptsec1abc");
+  assert.equal(made.passphrase, "");
+  assert.equal(downloadDisabled(made), false);
 });
-
-test("download_click_before_encryption_starts_still_queues", () => {
-  // Click lands inside the debounce window: nothing started yet, but the
-  // pending flag makes the eventual result commit.
-  const queued = reduce([
-    { type: "set-passphrase", value: "one-two-three-four" },
-    { type: "download-clicked" },
-  ]);
-  assert.equal(queued.downloadPending, true);
+test("starting over discards blob and invalidates late requests", () => {
+  const made = {
+    ...initialEncryptedBackupState,
+    ncryptsec: "ncryptsec1abc",
+    encrypted: "ncryptsec1abc",
+    savedPassword: true,
+    nextRequestId: 3,
+  };
+  const fresh = reduce([{ type: "start-new-backup" }], made);
+  assert.equal(fresh.ncryptsec, null);
+  assert.equal(fresh.nextRequestId, 4);
   assert.equal(
-    pendingEncryptPassphrase(queued),
-    "one-two-three-four",
-    "host still needs to start the KDF",
+    reduce(
+      [
+        {
+          type: "encrypt-succeeded",
+          requestId: 2,
+          ncryptsec: "ncryptsec1stale",
+        },
+      ],
+      fresh,
+    ).ncryptsec,
+    null,
   );
 });
diff --git a/desktop/src/features/onboarding/lib/encryptedBackup.ts b/desktop/src/features/onboarding/lib/encryptedBackup.ts
index 4f74c72e27..d2aad94422 100644
--- a/desktop/src/features/onboarding/lib/encryptedBackup.ts
+++ b/desktop/src/features/onboarding/lib/encryptedBackup.ts
@@ -1,64 +1,36 @@
-/**
- * Pure state model for the encrypted-key-backup (NIP-49) creation flow,
- * shared by the onboarding DownloadKeyStep and the settings Password Backup
- * row.
- *
- * All validation and phase logic lives here so it can be unit-tested without
- * React. Hosts wire the reducer to the Tauri commands
- * (`generate_backup_passphrase`, `create_ncryptsec_backup`) and dispatch
- * events; the model never touches the raw private key — by construction the
- * default backup path cannot invoke `get_nsec`.
- *
- * Encryption is eager: the moment the passphrase is valid the host kicks off
- * the KDF in the background (`pendingEncryptPassphrase` tells it what to
- * start). Clicking Download either commits an already-finished result
- * immediately or flags `downloadPending` so the commit happens as soon as the
- * in-flight encryption lands. Results are keyed by passphrase, so stale
- * completions for an edited passphrase are ignored.
- *
- * The flow is a single password field. The "Generate password" popover is
- * host-local UI state (word count, separator, candidate) — accepting a
- * candidate simply dispatches `set-passphrase`, so the model doesn't
- * distinguish typed from generated passwords.
- */
-
-/** Mirrors `MIN_PASSPHRASE_LEN` in `src-tauri/src/key_backup.rs`. */
+/** Pure state model for NIP-49 backup creation. */
 export const MIN_PASSPHRASE_LEN = 12;
 
 export type EncryptedBackupState = {
   passphrase: string;
-  /** Passphrase whose KDF is currently running in the background, if any. */
-  encryptingPassphrase: string | null;
-  /** Most recent completed encryption, keyed by the passphrase it used. */
-  encrypted: { passphrase: string; ncryptsec: string } | null;
+  requestId: number | null;
+  nextRequestId: number;
+  encrypted: string | null;
   createError: string | null;
-  /** True when Download was clicked while encryption was still in flight. */
   downloadPending: boolean;
-  /** The committed `ncryptsec1…` blob once the user downloads the backup. */
   ncryptsec: string | null;
+  savedPassword: boolean;
 };
 
 export const initialEncryptedBackupState: EncryptedBackupState = {
   passphrase: "",
-  encryptingPassphrase: null,
+  requestId: null,
+  nextRequestId: 1,
   encrypted: null,
   createError: null,
   downloadPending: false,
   ncryptsec: null,
+  savedPassword: false,
 };
 
 export type EncryptedBackupEvent =
   | { type: "set-passphrase"; value: string }
-  | { type: "encrypt-started"; passphrase: string }
-  | { type: "encrypt-succeeded"; passphrase: string; ncryptsec: string }
-  | { type: "encrypt-failed"; passphrase: string; message: string }
+  | { type: "encrypt-started"; requestId: number }
+  | { type: "encrypt-succeeded"; requestId: number; ncryptsec: string }
+  | { type: "encrypt-failed"; requestId: number; message: string }
   | { type: "download-clicked" }
-  /**
-   * Return from the post-download test view to the password form (onboarding
-   * Back). The committed blob is discarded but the passphrase and its cached
-   * encryption result are kept, so re-downloading is instant.
-   */
-  | { type: "back-to-password" };
+  | { type: "back-to-password" }
+  | { type: "start-new-backup" };
 
 export function encryptedBackupReducer(
   state: EncryptedBackupState,
@@ -66,109 +38,91 @@ export function encryptedBackupReducer(
 ): EncryptedBackupState {
   switch (event.type) {
     case "set-passphrase":
-      return { ...state, passphrase: event.value, createError: null };
-    case "encrypt-started":
       return {
         ...state,
-        encryptingPassphrase: event.passphrase,
+        passphrase: event.value,
+        encrypted: null,
         createError: null,
       };
-    case "encrypt-succeeded": {
-      const next: EncryptedBackupState = {
+    case "encrypt-started":
+      return {
         ...state,
-        encryptingPassphrase:
-          state.encryptingPassphrase === event.passphrase
-            ? null
-            : state.encryptingPassphrase,
-        encrypted: {
-          passphrase: event.passphrase,
-          ncryptsec: event.ncryptsec,
-        },
+        requestId: event.requestId,
+        nextRequestId: Math.max(state.nextRequestId, event.requestId + 1),
+        createError: null,
       };
-      // A pending download commits the moment the matching result lands;
-      // results for an edited (stale) passphrase never commit.
-      if (state.downloadPending && event.passphrase === state.passphrase) {
-        return {
-          ...next,
-          downloadPending: false,
-          ncryptsec: event.ncryptsec,
-        };
-      }
-      return next;
-    }
-    case "encrypt-failed": {
-      const next: EncryptedBackupState = {
+    case "encrypt-succeeded":
+      if (event.requestId !== state.requestId) return state;
+      return {
         ...state,
-        encryptingPassphrase:
-          state.encryptingPassphrase === event.passphrase
-            ? null
-            : state.encryptingPassphrase,
+        passphrase: "",
+        requestId: null,
+        encrypted: event.ncryptsec,
+        ncryptsec: state.downloadPending ? event.ncryptsec : state.ncryptsec,
+        downloadPending: false,
+        savedPassword: true,
       };
-      // Stale failures (passphrase already edited) are silent — a fresh
-      // encryption for the current passphrase is already on its way.
-      if (event.passphrase !== state.passphrase) return next;
-      return { ...next, createError: event.message, downloadPending: false };
-    }
-    case "download-clicked": {
-      const passphrase = effectivePassphrase(state);
-      if (!passphrase || state.downloadPending || state.ncryptsec) return state;
-      if (state.encrypted?.passphrase === passphrase) {
-        return { ...state, ncryptsec: state.encrypted.ncryptsec };
-      }
-      return { ...state, downloadPending: true };
-    }
-    case "back-to-password":
+    case "encrypt-failed":
+      if (event.requestId !== state.requestId) return state;
       return {
         ...state,
-        ncryptsec: null,
+        passphrase: "",
+        requestId: null,
+        createError: event.message,
         downloadPending: false,
-        createError: null,
+      };
+    case "download-clicked":
+      if (
+        state.ncryptsec ||
+        state.downloadPending ||
+        (!state.encrypted && !effectivePassphrase(state))
+      )
+        return state;
+      return state.encrypted
+        ? {
+            ...state,
+            ncryptsec: state.encrypted,
+            passphrase: "",
+            savedPassword: true,
+          }
+        : { ...state, downloadPending: true };
+    case "back-to-password":
+      return { ...state, createError: null };
+    case "start-new-backup":
+      return {
+        ...initialEncryptedBackupState,
+        nextRequestId: state.nextRequestId + 1,
       };
   }
 }
 
-/**
- * Validation issue for the passphrase, or null when acceptable. An empty
- * field reports nothing so the user isn't scolded before typing.
- */
 export function passphraseIssue(passphrase: string): string | null {
   if (passphrase.length === 0) return null;
-  if ([...passphrase].length < MIN_PASSPHRASE_LEN) {
-    return `Use at least ${MIN_PASSPHRASE_LEN} characters.`;
-  }
-  return null;
+  return [...passphrase].length < MIN_PASSPHRASE_LEN
+    ? `Use at least ${MIN_PASSPHRASE_LEN} characters.`
+    : null;
 }
-
-/** The passphrase a download would use, or null when not yet valid. */
 export function effectivePassphrase(
   state: EncryptedBackupState,
 ): string | null {
-  if ([...state.passphrase].length < MIN_PASSPHRASE_LEN) return null;
-  return state.passphrase;
+  return [...state.passphrase].length < MIN_PASSPHRASE_LEN
+    ? null
+    : state.passphrase;
 }
-
-/**
- * The passphrase the host should start encrypting now, or null when nothing
- * needs to start (invalid, already encrypted, already in flight, or done).
- */
 export function pendingEncryptPassphrase(
   state: EncryptedBackupState,
 ): string | null {
-  if (state.ncryptsec) return null;
-  const passphrase = effectivePassphrase(state);
-  if (!passphrase) return null;
-  if (state.encrypted?.passphrase === passphrase) return null;
-  if (state.encryptingPassphrase === passphrase) return null;
-  return passphrase;
+  if (state.savedPassword || state.encrypted || state.requestId !== null)
+    return null;
+  return effectivePassphrase(state);
 }
-
-/** Whether the current passphrase's encryption is still running. */
 export function isEncrypting(state: EncryptedBackupState): boolean {
-  const passphrase = effectivePassphrase(state);
-  return passphrase !== null && state.encryptingPassphrase === passphrase;
+  return state.requestId !== null;
 }
-
-/** Whether the Download action is currently actionable. */
 export function downloadDisabled(state: EncryptedBackupState): boolean {
-  return state.downloadPending || effectivePassphrase(state) === null;
+  if (state.savedPassword && state.ncryptsec) return false;
+  return (
+    state.downloadPending ||
+    (!state.encrypted && effectivePassphrase(state) === null)
+  );
 }
diff --git a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
index ff370c893d..82a3bcd836 100644
--- a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
+++ b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
@@ -1,476 +1,335 @@
-import { Check, Eye, EyeOff, FileKey2, FileUp } from "lucide-react";
-import { motion, useReducedMotion } from "motion/react";
+import { Check, Copy, Eye, EyeOff, FileKey2, FileUp } from "lucide-react";
 import * as React from "react";
+import { toast } from "sonner";
 
+import {
+  verifyNcryptsecBackup,
+  type BackupVerification,
+} from "@/shared/api/tauriIdentity";
+import { writeTextToClipboard } from "@/shared/lib/clipboard";
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Input } from "@/shared/ui/input";
 import { Spinner } from "@/shared/ui/spinner";
 
-type BackupTestStage = "drop" | "password" | "success";
-
-/**
- * Durable progress through the test flow. Owned by the host so navigating
- * away (e.g. onboarding Back) and returning doesn't force the user to
- * re-drop the file or retype their attempt.
- */
 export type BackupTestProgress = {
-  stage: BackupTestStage;
-  /** Name of the accepted file once the drop check passed. */
+  stage: "drop" | "password" | "success";
   fileName: string | null;
-  /** The password attempt typed so far. */
-  attempt: string;
+  ncryptsec: string | null;
+  result: BackupVerification | null;
 };
-
 export const initialBackupTestProgress: BackupTestProgress = {
   stage: "drop",
   fileName: null,
-  attempt: "",
+  ncryptsec: null,
+  result: null,
 };
 
-type BackupTestFlowProps = {
-  /** "spotlight" is the onboarding treatment; "boxed" fits settings cards. */
+type Props = {
   variant?: "spotlight" | "boxed";
-  /** The exact committed `ncryptsec1…` blob the downloaded file contains. */
-  ncryptsec: string;
-  /** The passphrase the backup was encrypted under. */
-  passphrase: string;
-  /** Re-open the native save dialog for another copy of the backup file. */
-  onSaveCopy: () => void;
-  isSaving: boolean;
-  savedPath: string | null;
-  saveError: string | null;
-  /** Host-owned progress so it survives this component unmounting. */
+  /** When supplied, only this exact just-created file can complete onboarding. */
+  expectedNcryptsec?: string;
+  onSaveCopy?: () => void;
+  isSaving?: boolean;
+  savedPath?: string | null;
+  saveError?: string | null;
   progress: BackupTestProgress;
   onProgressChange: React.Dispatch<React.SetStateAction<BackupTestProgress>>;
-  /** Fired once when the user completes the test successfully. */
   onVerified?: () => void;
 };
 
-/**
- * How long after the last keystroke before a wrong attempt is called out.
- * Verification itself is instant on match; this only delays the scolding.
- */
-const MISMATCH_HINT_PAUSE_MS = 900;
-
-const BURST_EMOJIS = ["🎉", "✨", "🐝", "🍯", "🔑", "💛"] as const;
-const BURST_PARTICLE_COUNT = 18;
-
-type BurstParticle = {
-  id: number;
-  x: number;
-  y: number;
-  emoji: string;
-  delay: number;
-  scale: number;
-  rotate: number;
-};
-
-/**
- * One-shot radial emoji burst behind the success badge. Purely decorative —
- * skipped entirely under reduced motion.
- */
-function SuccessBurst() {
-  const particles = React.useMemo<BurstParticle[]>(
-    () =>
-      Array.from({ length: BURST_PARTICLE_COUNT }, (_, i) => {
-        const angle =
-          (i / BURST_PARTICLE_COUNT) * Math.PI * 2 + Math.random() * 0.5;
-        const distance = 70 + Math.random() * 80;
-        return {
-          id: i,
-          x: Math.cos(angle) * distance,
-          y: Math.sin(angle) * distance,
-          emoji: BURST_EMOJIS[i % BURST_EMOJIS.length],
-          delay: Math.random() * 0.18,
-          scale: 0.8 + Math.random() * 0.7,
-          rotate: -120 + Math.random() * 240,
-        };
-      }),
-    [],
-  );
-
-  return (
-    <div
-      aria-hidden
-      className="pointer-events-none absolute inset-0 flex items-center justify-center overflow-visible"
-    >
-      {particles.map((particle) => (
-        <motion.span
-          animate={{
-            x: particle.x,
-            y: particle.y,
-            opacity: 0,
-            scale: particle.scale,
-            rotate: particle.rotate,
-          }}
-          className="absolute text-xl"
-          initial={{ x: 0, y: 0, opacity: 1, scale: 0.3, rotate: 0 }}
-          key={particle.id}
-          transition={{
-            duration: 0.9,
-            delay: particle.delay,
-            ease: "easeOut",
-          }}
-        >
-          {particle.emoji}
-        </motion.span>
-      ))}
-    </div>
-  );
-}
-
-/**
- * Post-download "Test your backup" flow: the user drops the file they just
- * downloaded onto a large dropzone, then retypes their password. Both checks
- * run instantly in memory — the dropped file's bytes must equal the committed
- * blob and the typed password must equal the passphrase that encrypted it —
- * so there is no second KDF run and no key material beyond what the creator
- * already held.
- */
 export function BackupTestFlow({
   variant = "spotlight",
-  ncryptsec,
-  passphrase,
+  expectedNcryptsec,
   onSaveCopy,
-  isSaving,
+  isSaving = false,
   savedPath,
   saveError,
   progress,
   onProgressChange,
   onVerified,
-}: BackupTestFlowProps) {
-  const reduceMotion = useReducedMotion() ?? false;
-  const { stage, fileName, attempt } = progress;
-  // True while a file drag is anywhere over the window — the drop overlay
-  // takes over the host surface only for the duration of the drag.
-  const [isWindowDragging, setIsWindowDragging] = React.useState(false);
-  const dragDepthRef = React.useRef(0);
+}: Props) {
+  const { stage, fileName, ncryptsec, result } = progress;
+  const [attempt, setAttempt] = React.useState("");
+  const [error, setError] = React.useState<string | null>(null);
+  const [verifying, setVerifying] = React.useState(false);
+  const [revealed, setRevealed] = React.useState(false);
+  const [dragging, setDragging] = React.useState(false);
+  const fileRef = React.useRef<HTMLInputElement>(null);
+  const mounted = React.useRef(true);
+  const requestRef = React.useRef(0);
+  React.useEffect(
+    () => () => {
+      mounted.current = false;
+      requestRef.current += 1;
+      setAttempt("");
+    },
+    [],
+  );
 
   React.useEffect(() => {
-    // dragenter/dragleave fire per nested element, so track depth to know
-    // when the drag has actually left the window.
-    const handleDragEnter = (event: DragEvent) => {
-      if (!event.dataTransfer?.types.includes("Files")) return;
-      dragDepthRef.current += 1;
-      setIsWindowDragging(true);
-    };
-    const handleDragLeave = () => {
-      dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
-      if (dragDepthRef.current === 0) setIsWindowDragging(false);
-    };
-    const handleDragEnd = () => {
-      dragDepthRef.current = 0;
-      setIsWindowDragging(false);
+    const enter = (event: DragEvent) => {
+      if (event.dataTransfer?.types.includes("Files")) setDragging(true);
     };
-    window.addEventListener("dragenter", handleDragEnter);
-    window.addEventListener("dragleave", handleDragLeave);
-    window.addEventListener("drop", handleDragEnd);
-    window.addEventListener("dragend", handleDragEnd);
-    return () => {
-      window.removeEventListener("dragenter", handleDragEnter);
-      window.removeEventListener("dragleave", handleDragLeave);
-      window.removeEventListener("drop", handleDragEnd);
-      window.removeEventListener("dragend", handleDragEnd);
+    const leave = (event: DragEvent) => {
+      if (event.clientX === 0 && event.clientY === 0) setDragging(false);
     };
-  }, []);
-  const [fileError, setFileError] = React.useState<string | null>(null);
-  const [isRevealed, setIsRevealed] = React.useState(false);
-  const fileInputRef = React.useRef<HTMLInputElement | null>(null);
-  const passwordInputRef = React.useRef<HTMLInputElement | null>(null);
-  const mountedRef = React.useRef(true);
-  const verifiedFiredRef = React.useRef(false);
-
-  React.useEffect(() => {
-    mountedRef.current = true;
+    const end = () => setDragging(false);
+    window.addEventListener("dragenter", enter);
+    window.addEventListener("dragleave", leave);
+    window.addEventListener("drop", end);
+    window.addEventListener("dragend", end);
     return () => {
-      mountedRef.current = false;
+      window.removeEventListener("dragenter", enter);
+      window.removeEventListener("dragleave", leave);
+      window.removeEventListener("drop", end);
+      window.removeEventListener("dragend", end);
     };
   }, []);
 
-  React.useEffect(() => {
-    if (stage === "password") passwordInputRef.current?.focus();
-  }, [stage]);
-
-  const succeed = React.useCallback(() => {
-    onProgressChange((prev) => ({ ...prev, stage: "success" }));
-    if (!verifiedFiredRef.current) {
-      verifiedFiredRef.current = true;
-      onVerified?.();
-    }
-  }, [onProgressChange, onVerified]);
-
-  const handleFile = React.useCallback(
-    async (file: File) => {
-      let text: string;
-      try {
-        text = await file.text();
-      } catch {
-        if (mountedRef.current) setFileError("Could not read that file.");
-        return;
-      }
-      if (!mountedRef.current) return;
-      const trimmed = text.trim();
-      if (trimmed === ncryptsec.trim()) {
-        setFileError(null);
-        onProgressChange((prev) => ({
-          ...prev,
-          stage: "password",
-          fileName: file.name,
-        }));
-      } else if (trimmed.toLowerCase().startsWith("ncryptsec1")) {
-        setFileError(
+  async function choose(file: File) {
+    try {
+      const text = (await file.text()).trim();
+      if (!text.toLowerCase().startsWith("ncryptsec1"))
+        throw new Error("That doesn't look like a NIP-49 key backup.");
+      if (expectedNcryptsec && text !== expectedNcryptsec.trim())
+        throw new Error(
           "That's a key backup, but not the one you just downloaded.",
         );
-      } else {
-        setFileError(
-          "That doesn't look like your key backup. Choose the file you just downloaded.",
+      setError(null);
+      setAttempt("");
+      onProgressChange({
+        stage: "password",
+        fileName: file.name,
+        ncryptsec: text,
+        result: null,
+      });
+    } catch (err) {
+      if (mounted.current)
+        setError(
+          err instanceof Error ? err.message : "Could not read that file.",
         );
-      }
-    },
-    [ncryptsec, onProgressChange],
-  );
-
-  const handlePasswordChange = React.useCallback(
-    (value: string) => {
-      onProgressChange((prev) => ({ ...prev, attempt: value }));
-      if (value === passphrase) succeed();
-    },
-    [onProgressChange, passphrase, succeed],
-  );
-
-  // Only scold after the user pauses (or presses Enter), never mid-typing —
-  // and never based on the attempt's length, which would leak how long the
-  // real password is.
-  const [mismatchVisible, setMismatchVisible] = React.useState(false);
-  React.useEffect(() => {
-    setMismatchVisible(false);
-    if (stage !== "password" || attempt.length === 0 || attempt === passphrase)
-      return;
-    const timer = window.setTimeout(
-      () => setMismatchVisible(true),
-      MISMATCH_HINT_PAUSE_MS,
-    );
-    return () => window.clearTimeout(timer);
-  }, [stage, attempt, passphrase]);
+    }
+  }
 
-  const isSpotlight = variant === "spotlight";
-  const attemptWrong = stage === "password" && mismatchVisible;
+  async function verify() {
+    if (!ncryptsec || !attempt || verifying) return;
+    const password = attempt;
+    const id = ++requestRef.current;
+    setVerifying(true);
+    setError(null);
+    setRevealed(false);
+    setAttempt("");
+    try {
+      const verified = await verifyNcryptsecBackup(ncryptsec, password);
+      if (!mounted.current || id !== requestRef.current) return;
+      onProgressChange({ ...progress, stage: "success", result: verified });
+      onVerified?.();
+    } catch (err) {
+      if (mounted.current && id === requestRef.current)
+        setError(
+          err instanceof Error ? err.message : "Could not verify this backup.",
+        );
+    } finally {
+      if (mounted.current && id === requestRef.current) setVerifying(false);
+    }
+  }
 
-  if (stage === "success") {
+  if (stage === "success" && result)
     return (
       <div
-        className="relative flex flex-col items-center gap-4 py-4 text-center"
+        className="space-y-4 py-3 text-center"
         data-testid="backup-test-success"
       >
-        {reduceMotion ? null : <SuccessBurst />}
-        <motion.div
-          animate={{ scale: 1, opacity: 1 }}
-          className="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground"
-          initial={reduceMotion ? false : { scale: 0, opacity: 0 }}
-          transition={
-            reduceMotion
-              ? { duration: 0 }
-              : { type: "spring", stiffness: 380, damping: 18 }
-          }
-        >
-          <Check aria-hidden="true" className="h-8 w-8" strokeWidth={3} />
-        </motion.div>
-        <motion.div
-          animate={{ opacity: 1, y: 0 }}
-          initial={reduceMotion ? false : { opacity: 0, y: 8 }}
-          transition={
-            reduceMotion ? { duration: 0 } : { delay: 0.15, duration: 0.35 }
-          }
-        >
-          <p className="text-lg font-medium text-foreground">
-            Your backup works!
+        <div className="mx-auto flex size-14 items-center justify-center rounded-full bg-primary text-primary-foreground">
+          <Check className="size-7" aria-hidden />
+        </div>
+        <div>
+          <p className="text-lg font-medium">Valid backup</p>
+          <p className="mt-1 text-sm text-muted-foreground">
+            {result.matchesCurrentIdentity
+              ? "Matches your current Buzz identity."
+              : "Belongs to a different identity."}
           </p>
-          <p className="mt-1.5 text-sm leading-6 text-muted-foreground">
-            File and password verified. Keep them both somewhere safe — that's
-            all you need to restore your identity.
-          </p>
-        </motion.div>
+        </div>
+        <div className="mx-auto flex max-w-md items-center gap-2 rounded-lg bg-muted px-3 py-2">
+          <code
+            className="min-w-0 flex-1 truncate text-xs"
+            title={result.npub}
+            data-testid="backup-test-npub"
+          >
+            {result.npub}
+          </code>
+          <Button
+            aria-label="Copy backup identity"
+            data-testid="backup-test-copy-npub"
+            onClick={async () => {
+              await writeTextToClipboard(result.npub);
+              toast.success("Copied to clipboard");
+            }}
+            size="icon"
+            variant="ghost"
+          >
+            <Copy className="size-4" />
+          </Button>
+        </div>
+        {!expectedNcryptsec ? (
+          <Button
+            data-testid="backup-test-another"
+            onClick={() => {
+              setError(null);
+              onProgressChange(initialBackupTestProgress);
+            }}
+            variant="ghost"
+          >
+            Test another backup
+          </Button>
+        ) : null}
       </div>
     );
-  }
 
+  const spotlight = variant === "spotlight";
   return (
     <div
       className={cn(
         "mx-auto w-full space-y-4",
-        isSpotlight ? "max-w-140" : "max-w-125",
+        spotlight ? "max-w-140" : "max-w-125",
       )}
       data-testid="backup-test-flow"
     >
       {stage === "drop" ? (
         <>
           <input
-            accept=".ncryptsec,text/plain"
+            ref={fileRef}
             className="sr-only"
             data-testid="backup-test-file-input"
-            onChange={(event) => {
-              const file = event.target.files?.[0];
-              // Allow re-selecting the same file after an error.
-              event.target.value = "";
-              if (file) void handleFile(file);
-            }}
-            ref={fileInputRef}
-            tabIndex={-1}
             type="file"
+            accept=".ncryptsec,text/plain"
+            tabIndex={-1}
+            onChange={(e) => {
+              const file = e.target.files?.[0];
+              e.target.value = "";
+              if (file) void choose(file);
+            }}
           />
           <button
+            type="button"
+            data-testid="backup-test-dropzone"
             className={cn(
-              "mx-auto flex items-center justify-center rounded-full bg-primary text-center shadow transition-colors hover:bg-primary/90",
-              // The CTA-label variable only exists inside the onboarding
-              // theme; elsewhere fall back to the standard primary pair.
-              isSpotlight
-                ? "h-14 px-12 text-(--buzz-onboarding-cta-label)"
-                : "h-9 px-6 text-primary-foreground",
+              "mx-auto flex items-center justify-center rounded-full bg-primary font-medium text-primary-foreground",
+              spotlight ? "h-14 px-12" : "h-9 px-6 text-sm",
             )}
-            data-testid="backup-test-dropzone"
-            onClick={() => fileInputRef.current?.click()}
-            type="button"
+            onClick={() => fileRef.current?.click()}
           >
-            <span
-              className={cn(
-                "font-medium",
-                isSpotlight ? "text-base" : "text-sm",
-              )}
-            >
-              Select your backup file
-            </span>
+            Select a backup file
           </button>
-          {isWindowDragging ? (
-            /*
-             * Composer-style takeover: fills the nearest positioned host
-             * surface (the onboarding card / the settings backup row) and is
-             * itself the drop target, so anywhere on that surface accepts
-             * the file.
-             */
-            // biome-ignore lint/a11y/noStaticElementInteractions: pointer-only drop target; the select button is the keyboard-accessible path
-            <div
+          {dragging ? (
+            <section
+              aria-label="Drop your key backup here"
               className="absolute inset-2 z-10 mt-0! flex items-center justify-center rounded-2xl border-2 border-dashed border-primary bg-primary/10 backdrop-blur-sm"
               data-testid="backup-test-drop-overlay"
-              onDragOver={(event) => event.preventDefault()}
-              onDrop={(event) => {
-                event.preventDefault();
-                const file = event.dataTransfer.files?.[0];
-                if (file) void handleFile(file);
+              onDragOver={(e) => e.preventDefault()}
+              onDrop={(e) => {
+                e.preventDefault();
+                const f = e.dataTransfer.files?.[0];
+                if (f) void choose(f);
               }}
             >
-              <span className="flex items-center gap-2 rounded-full bg-foreground px-4 py-2 text-sm font-semibold text-background shadow-sm ring-1 ring-background/15">
-                <FileUp aria-hidden="true" className="size-4" />
-                <span>Drop your backup file here</span>
+              <span className="flex items-center gap-2 rounded-full bg-foreground px-4 py-2 text-sm font-semibold text-background">
+                <FileUp className="size-4" />
+                Drop your backup file here
               </span>
-            </div>
-          ) : null}
-          {fileError ? (
-            <p
-              className="text-center text-sm text-destructive"
-              data-testid="backup-test-file-error"
-            >
-              {fileError}
-            </p>
+            </section>
           ) : null}
-          <div className="flex flex-col items-center gap-2">
-            <Button
-              className={cn(
-                "gap-1.5 rounded-full bg-foreground/10 hover:bg-foreground/15",
-                isSpotlight ? "h-12 px-10 text-base" : "h-9 px-6 text-sm",
-              )}
-              data-testid="encrypted-backup-save-copy"
-              disabled={isSaving}
-              onClick={onSaveCopy}
-              type="button"
-              variant="ghost"
-            >
-              {isSaving ? <Spinner className="h-4 w-4 border-2" /> : null}
-              Re-download backup
-            </Button>
-            {savedPath ? (
-              <p
-                className="text-center text-xs text-muted-foreground"
-                data-testid="encrypted-backup-saved-path"
+          {onSaveCopy ? (
+            <div className="text-center">
+              <Button
+                data-testid="encrypted-backup-save-copy"
+                disabled={isSaving}
+                onClick={onSaveCopy}
+                variant="ghost"
               >
-                Saved to {savedPath}
-              </p>
-            ) : null}
-          </div>
-          {saveError ? (
-            <p className="text-center text-sm text-destructive">{saveError}</p>
+                {isSaving ? <Spinner className="mr-2 size-4 border-2" /> : null}
+                Re-download backup
+              </Button>
+              {savedPath ? (
+                <p
+                  className="text-xs text-muted-foreground"
+                  data-testid="encrypted-backup-saved-path"
+                >
+                  Saved to {savedPath}
+                </p>
+              ) : null}
+            </div>
           ) : null}
         </>
       ) : (
         <>
           <div
-            className="flex items-center justify-center gap-2 text-sm text-foreground animate-in fade-in slide-in-from-bottom-1 duration-300 motion-reduce:animate-none"
+            className="flex items-center justify-center gap-2 text-sm"
             data-testid="backup-test-file-accepted"
           >
-            <FileKey2
-              aria-hidden="true"
-              className="h-4 w-4 text-muted-foreground"
-            />
+            <FileKey2 className="size-4" />
             <span className="max-w-70 truncate font-mono text-xs">
               {fileName}
             </span>
-            <Check aria-hidden="true" className="h-4 w-4 text-primary" />
+            <Check className="size-4 text-primary" />
           </div>
-          <p className="text-center text-sm leading-6 text-muted-foreground">
-            That's the one. Now type your password to prove you can unlock it.
+          <p className="text-center text-sm text-muted-foreground">
+            Enter its password, then verify it with real NIP-49 decryption.
           </p>
           <div className="relative">
             <Input
               aria-label="Backup password"
               autoComplete="off"
-              className="h-10 bg-background pr-10 font-mono"
               data-testid="backup-test-password"
-              onChange={(event) => handlePasswordChange(event.target.value)}
-              onKeyDown={(event) => {
-                // Enter is an explicit "check it" — no need to wait out the
-                // typing pause before calling out a mismatch.
-                if (event.key === "Enter" && attempt.length > 0)
-                  setMismatchVisible(attempt !== passphrase);
-              }}
-              placeholder="Your backup password"
-              ref={passwordInputRef}
-              type={isRevealed ? "text" : "password"}
+              disabled={verifying}
+              type={revealed ? "text" : "password"}
               value={attempt}
+              onChange={(e) => setAttempt(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  void verify();
+                }
+              }}
+              className="pr-10 font-mono"
             />
             <Button
-              aria-label={isRevealed ? "Hide password" : "Reveal password"}
-              className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              aria-label={revealed ? "Hide password" : "Reveal password"}
               data-testid="backup-test-password-reveal-toggle"
-              onClick={() => setIsRevealed((revealed) => !revealed)}
+              disabled={verifying}
+              onClick={() => setRevealed((v) => !v)}
               size="icon"
               type="button"
               variant="ghost"
+              className="absolute right-1 top-1/2 -translate-y-1/2"
             >
-              {isRevealed ? (
-                <EyeOff aria-hidden="true" className="h-4 w-4" />
+              {revealed ? (
+                <EyeOff className="size-4" />
               ) : (
-                <Eye aria-hidden="true" className="h-4 w-4" />
+                <Eye className="size-4" />
               )}
             </Button>
-            {attemptWrong ? (
-              <p
-                className="absolute left-1 top-full mt-1 text-xs text-destructive animate-in fade-in duration-200 motion-reduce:animate-none"
-                data-testid="backup-test-password-mismatch"
-              >
-                Not quite — check the password you saved.
-              </p>
-            ) : null}
           </div>
-          <div className="flex justify-center pt-2">
+          <div className="flex justify-center gap-2">
+            <Button
+              data-testid="backup-test-verify"
+              disabled={!attempt || verifying}
+              onClick={() => void verify()}
+            >
+              {verifying ? <Spinner className="mr-2 size-4 border-2" /> : null}
+              Verify backup
+            </Button>
             <Button
-              className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
               data-testid="backup-test-use-different-file"
+              disabled={verifying}
               onClick={() => {
+                requestRef.current += 1;
+                setAttempt("");
+                setError(null);
                 onProgressChange(initialBackupTestProgress);
-                setIsRevealed(false);
               }}
-              size="sm"
-              type="button"
               variant="ghost"
             >
               Use a different file
@@ -478,6 +337,15 @@ export function BackupTestFlow({
           </div>
         </>
       )}
+      {error || saveError ? (
+        <p
+          role="alert"
+          className="text-center text-sm text-destructive"
+          data-testid="backup-test-error"
+        >
+          {error ?? saveError}
+        </p>
+      ) : null}
     </div>
   );
 }
diff --git a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
index c5aa4ac4e0..2f3d3bd14b 100644
--- a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
+++ b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
@@ -12,6 +12,16 @@ import { Button } from "@/shared/ui/button";
 import { Input } from "@/shared/ui/input";
 import { Popover, PopoverAnchor, PopoverContent } from "@/shared/ui/popover";
 import { Spinner } from "@/shared/ui/spinner";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/ui/alert-dialog";
 import {
   downloadDisabled,
   isEncrypting,
@@ -138,7 +148,7 @@ function PendingDownloadTicker() {
 
 /**
  * Everything about an in-progress backup that must survive this component
- * unmounting: the reducer state (passphrase + committed blob), whether the
+ * unmounting: the reducer state (short-lived passphrase + encrypted blob), whether the
  * backup test passed, where the file was saved, the save-once guard, and the
  * test-flow progress. Hosts that need the state to outlive the creator (the
  * onboarding flow, where Back unmounts the step) call
@@ -195,11 +205,8 @@ export function useEncryptedBackupSession(): EncryptedBackupSession {
 }
 
 /**
- * Roll a session back from the post-download test view to the password form
- * (onboarding Back on "Now, test your backup"). The passphrase and its cached
- * encryption result survive, so re-downloading is instant; the committed
- * blob, test progress, verification, and save bookkeeping are discarded so a
- * re-download runs the full save + test ceremony again.
+ * Return to a secure saved-password placeholder. The encrypted blob survives
+ * for instant re-download, while no password or test attempt is retained.
  */
 export function backupSessionToPasswordEntry(
   session: EncryptedBackupSession,
@@ -207,7 +214,6 @@ export function backupSessionToPasswordEntry(
   session.dispatch({ type: "back-to-password" });
   session.setVerified(false);
   session.setSavedPath(null);
-  session.savedForRef.current = null;
   session.setTest(initialBackupTestProgress);
 }
 
@@ -230,6 +236,8 @@ type EncryptedBackupCreatorProps = {
   onCreated?: () => void;
   /** Fired only after the encrypted key file has been saved successfully. */
   onSaved?: (path: string) => void;
+  /** Whether creation continues into onboarding's guided test ceremony. */
+  guidedTest?: boolean;
   /** Fired once when the user completes the backup test successfully. */
   onVerified?: () => void;
 };
@@ -245,9 +253,11 @@ type EncryptedBackupCreatorProps = {
  */
 function PassphraseGeneratorPopover({
   disabled = false,
+  onRequestGenerate,
   onGenerated,
 }: {
   disabled?: boolean;
+  onRequestGenerate?: () => void;
   onGenerated: (value: string) => void;
 }) {
   const [open, setOpen] = React.useState(false);
@@ -308,6 +318,10 @@ function PassphraseGeneratorPopover({
           onClick={() => {
             // The open effect below generates the first password; later
             // clicks re-roll with the current controls.
+            if (onRequestGenerate) {
+              onRequestGenerate();
+              return;
+            }
             if (!open) setOpen(true);
             else void generate(words, separator);
           }}
@@ -413,6 +427,7 @@ export function EncryptedBackupCreator({
   session: sessionProp,
   onCreated,
   onSaved,
+  guidedTest = true,
   onVerified,
 }: EncryptedBackupCreatorProps) {
   // Hosts without a longer-lived session get a private one (settings card).
@@ -422,6 +437,7 @@ export function EncryptedBackupCreator({
   const [isRevealed, setIsRevealed] = React.useState(false);
   const [saveError, setSaveError] = React.useState<string | null>(null);
   const [isSaving, setIsSaving] = React.useState(false);
+  const [confirmNewPassword, setConfirmNewPassword] = React.useState(false);
   const mountedRef = React.useRef(true);
 
   React.useEffect(() => {
@@ -437,39 +453,32 @@ export function EncryptedBackupCreator({
     if (state.downloadPending) setIsRevealed(false);
   }, [state.downloadPending]);
 
-  // Eager background encryption: start the KDF as soon as the passphrase is
-  // valid (debounced against typing). Results are keyed by passphrase in the
-  // reducer, so a completion for an edited passphrase is dropped there.
+  // Correlate KDF completion by an opaque request id. The password exists only
+  // in this short-lived effect closure and is cleared from reducer state once
+  // Rust returns; stale completions cannot commit.
   const pendingPassphrase = pendingEncryptPassphrase(state);
   const skipDebounce = state.downloadPending;
   React.useEffect(() => {
     if (!pendingPassphrase) return;
     let cancelled = false;
+    const requestId = state.nextRequestId;
     const start = () => {
       if (cancelled) return;
-      // Completions dispatch unguarded: with a host-owned session the KDF
-      // may finish while this component is unmounted (user navigated Back),
-      // and the result must still land in the session. Dispatching to an
-      // unmounted private session is a safe no-op.
-      dispatch({ type: "encrypt-started", passphrase: pendingPassphrase });
+      dispatch({ type: "encrypt-started", requestId });
       void createNcryptsecBackup(pendingPassphrase)
-        .then((ncryptsec) => {
-          dispatch({
-            type: "encrypt-succeeded",
-            passphrase: pendingPassphrase,
-            ncryptsec,
-          });
-        })
-        .catch((err: unknown) => {
+        .then((ncryptsec) =>
+          dispatch({ type: "encrypt-succeeded", requestId, ncryptsec }),
+        )
+        .catch((err: unknown) =>
           dispatch({
             type: "encrypt-failed",
-            passphrase: pendingPassphrase,
+            requestId,
             message:
               err instanceof Error
                 ? err.message
                 : "Failed to encrypt your key.",
-          });
-        });
+          }),
+        );
     };
     const timer = window.setTimeout(
       start,
@@ -479,7 +488,7 @@ export function EncryptedBackupCreator({
       cancelled = true;
       window.clearTimeout(timer);
     };
-  }, [dispatch, pendingPassphrase, skipDebounce]);
+  }, [dispatch, pendingPassphrase, skipDebounce, state.nextRequestId]);
 
   // Download commit: fires once per committed blob, whether the commit was
   // instant (encryption already done) or resolved a queued download. The flow
@@ -556,16 +565,15 @@ export function EncryptedBackupCreator({
 
   // The test view requires a successful save, not just a committed blob —
   // while the native save dialog is open the password form stays put.
-  if (state.ncryptsec && savedPath) {
+  if (state.ncryptsec && savedPath && guidedTest) {
     return (
       <div data-testid="encrypted-backup-result">
         <BackupTestFlow
           isSaving={isSaving}
-          ncryptsec={state.ncryptsec}
+          expectedNcryptsec={state.ncryptsec}
           onProgressChange={setTest}
           onSaveCopy={() => void handleSaveCopy()}
           onVerified={handleVerified}
-          passphrase={state.passphrase}
           progress={test}
           saveError={saveError}
           savedPath={savedPath}
@@ -574,6 +582,31 @@ export function EncryptedBackupCreator({
       </div>
     );
   }
+  if (state.ncryptsec && savedPath) {
+    return (
+      <div
+        className="space-y-3 text-center"
+        data-testid="encrypted-backup-created"
+      >
+        <p className="font-medium">Backup downloaded</p>
+        <p className="text-sm text-muted-foreground">
+          Buzz cleared the password from this session. You can download another
+          copy without entering it again.
+        </p>
+        <Button
+          data-testid="encrypted-backup-save-copy"
+          disabled={isSaving}
+          onClick={() => void handleSaveCopy()}
+        >
+          {isSaving ? <Spinner className="mr-2 size-4 border-2" /> : null}
+          Download another copy
+        </Button>
+        {saveError ? (
+          <p className="text-sm text-destructive">{saveError}</p>
+        ) : null}
+      </div>
+    );
+  }
 
   return (
     <div
@@ -587,19 +620,65 @@ export function EncryptedBackupCreator({
           className="h-10 bg-background pr-19 font-mono"
           data-testid="backup-passphrase-input"
           disabled={state.downloadPending}
+          readOnly={state.savedPassword}
+          aria-describedby={
+            state.savedPassword
+              ? "backup-saved-password-description"
+              : undefined
+          }
+          onBeforeInput={(event) => {
+            if (state.savedPassword) {
+              event.preventDefault();
+              setConfirmNewPassword(true);
+            }
+          }}
+          onPaste={(event) => {
+            if (state.savedPassword) {
+              event.preventDefault();
+              setConfirmNewPassword(true);
+            }
+          }}
           onChange={(event) =>
             dispatch({ type: "set-passphrase", value: event.target.value })
           }
-          placeholder={`Password (min ${MIN_PASSPHRASE_LEN} characters)`}
+          placeholder={
+            state.savedPassword
+              ? ""
+              : `Password (min ${MIN_PASSPHRASE_LEN} characters)`
+          }
           type={isRevealed ? "text" : "password"}
           value={state.passphrase}
         />
+        {state.savedPassword ? (
+          <div
+            aria-hidden
+            className="pointer-events-none absolute inset-y-0 left-3 flex items-center font-mono tracking-widest text-foreground"
+            data-testid="backup-saved-password-mask"
+          >
+            ••••••••••••••••••••••••••••••••
+          </div>
+        ) : null}
+        {state.savedPassword ? (
+          <span className="sr-only" id="backup-saved-password-description">
+            Backup password saved; hidden for security.
+          </span>
+        ) : null}
         <Button
-          aria-label={isRevealed ? "Hide password" : "Reveal password"}
+          aria-label={
+            state.savedPassword
+              ? "Change saved backup password"
+              : isRevealed
+                ? "Hide password"
+                : "Reveal password"
+          }
           className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2 text-muted-foreground hover:text-foreground"
           data-testid="backup-passphrase-reveal-toggle"
           disabled={state.downloadPending}
-          onClick={() => setIsRevealed((revealed) => !revealed)}
+          onClick={() =>
+            state.savedPassword
+              ? setConfirmNewPassword(true)
+              : setIsRevealed((revealed) => !revealed)
+          }
           size="icon"
           type="button"
           variant="ghost"
@@ -612,6 +691,9 @@ export function EncryptedBackupCreator({
         </Button>
         <PassphraseGeneratorPopover
           disabled={state.downloadPending}
+          onRequestGenerate={
+            state.savedPassword ? () => setConfirmNewPassword(true) : undefined
+          }
           onGenerated={(value) => {
             dispatch({ type: "set-passphrase", value });
             // A generated password must be visible so the user can save it.
@@ -662,13 +744,19 @@ export function EncryptedBackupCreator({
               className={cn("h-9 rounded-full px-6", createButtonClassName)}
               data-testid="encrypted-backup-create"
               disabled={downloadDisabled(state) || isSaving}
-              onClick={() => dispatch({ type: "download-clicked" })}
+              onClick={() =>
+                state.savedPassword && state.ncryptsec
+                  ? void handleSaveCopy()
+                  : dispatch({ type: "download-clicked" })
+              }
               type="button"
             >
               {state.downloadPending ? (
                 <PendingDownloadTicker />
+              ) : state.savedPassword ? (
+                "Download backup again"
               ) : (
-                "Download backup"
+                "Backup key"
               )}
             </Button>
           </div>
@@ -681,6 +769,36 @@ export function EncryptedBackupCreator({
           ? createPortal(createButton, createButtonPortal)
           : null;
       })()}
+      <AlertDialog
+        open={confirmNewPassword}
+        onOpenChange={setConfirmNewPassword}
+      >
+        <AlertDialogContent data-testid="backup-change-password-dialog">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Create a new backup password?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Buzz no longer keeps the password for this backup. Starting over
+              creates a new backup; copies you already saved will keep working
+              with their original password.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Keep current backup</AlertDialogCancel>
+            <AlertDialogAction
+              data-testid="backup-start-new-password"
+              onClick={() => {
+                dispatch({ type: "start-new-backup" });
+                setSavedPath(null);
+                savedForRef.current = null;
+                setTest(initialBackupTestProgress);
+                setIsRevealed(false);
+              }}
+            >
+              Start with a new password
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }
diff --git a/desktop/src/features/settings/ui/EncryptedBackupRow.tsx b/desktop/src/features/settings/ui/EncryptedBackupRow.tsx
index a8d7262660..e1f2e60922 100644
--- a/desktop/src/features/settings/ui/EncryptedBackupRow.tsx
+++ b/desktop/src/features/settings/ui/EncryptedBackupRow.tsx
@@ -1,55 +1,84 @@
 import * as React from "react";
-
 import { EncryptedBackupCreator } from "@/features/onboarding/ui/EncryptedBackupCreator";
+import {
+  BackupTestFlow,
+  initialBackupTestProgress,
+} from "@/features/onboarding/ui/BackupTestFlow";
 
-/**
- * Collapsible row for creating and testing a password-protected key backup.
- * The raw private key never reaches this flow — the password goes to Rust,
- * which returns the persisted `ncryptsec1…` blob.
- */
-export function EncryptedBackupRow() {
-  const [isOpen, setIsOpen] = React.useState(false);
-
+function ToolRow({
+  title,
+  description,
+  action,
+  open,
+  onToggle,
+  children,
+  testId,
+}: {
+  title: string;
+  description: string;
+  action: string;
+  open: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+  testId: string;
+}) {
   return (
-    // `relative`: anchors the backup-test drop overlay (BackupTestFlow) so a
-    // file drag takes over this whole row, mirroring the composer treatment.
-    <div
-      className="relative px-4 py-3"
-      data-testid="profile-encrypted-backup-row"
-    >
+    <div className="relative px-4 py-3" data-testid={testId}>
       <div className="flex items-center justify-between gap-4">
         <div className="min-w-0 space-y-1">
-          <p className="text-sm font-medium">Password-protected key backup</p>
-          <p className="text-sm text-muted-foreground">
-            Download an encrypted copy of your identity key, then test the file
-            and password before relying on it.
-          </p>
+          <p className="text-sm font-medium">{title}</p>
+          <p className="text-sm text-muted-foreground">{description}</p>
         </div>
         <button
-          aria-expanded={isOpen}
-          aria-label={
-            isOpen
-              ? "Close password-protected key backup"
-              : "Create password-protected key backup"
-          }
-          className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-muted px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-          data-testid="profile-encrypted-backup-toggle"
-          onClick={() => setIsOpen((open) => !open)}
+          aria-expanded={open}
+          data-testid={`${testId}-toggle`}
+          className="inline-flex shrink-0 rounded-full bg-muted px-3 py-1.5 text-sm font-medium hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-ring"
+          onClick={onToggle}
           type="button"
         >
-          {isOpen ? "Close" : "Create backup"}
+          {open ? "Close" : action}
         </button>
       </div>
-      {isOpen ? (
-        <div className="mt-3">
-          <EncryptedBackupCreator variant="boxed" />
-          <p className="mt-3 text-xs leading-5 text-muted-foreground">
-            Keep the downloaded file private and save its password somewhere
-            safe. Buzz cannot reset the password. Creating another backup does
-            not invalidate copies you saved before.
-          </p>
-        </div>
-      ) : null}
+      {open ? <div className="mt-3">{children}</div> : null}
     </div>
   );
 }
+
+export function EncryptedBackupRow() {
+  const [createOpen, setCreateOpen] = React.useState(false);
+  const [testOpen, setTestOpen] = React.useState(false);
+  const [progress, setProgress] = React.useState(initialBackupTestProgress);
+  return (
+    <>
+      <ToolRow
+        title="Create a key backup"
+        description="Download a password-protected NIP-49 copy of your identity key."
+        action="Create backup"
+        open={createOpen}
+        onToggle={() => setCreateOpen((v) => !v)}
+        testId="profile-encrypted-backup-row"
+      >
+        <EncryptedBackupCreator guidedTest={false} variant="boxed" />
+        <p className="mt-3 text-xs leading-5 text-muted-foreground">
+          Keep the file private and save its password somewhere safe. Buzz
+          cannot reset it.
+        </p>
+      </ToolRow>
+      <div className="border-t border-border/60" />
+      <ToolRow
+        title="Test a key backup"
+        description="Verify any NIP-49 backup and see which public identity it belongs to."
+        action="Test backup"
+        open={testOpen}
+        onToggle={() => setTestOpen((v) => !v)}
+        testId="profile-backup-test-row"
+      >
+        <BackupTestFlow
+          variant="boxed"
+          progress={progress}
+          onProgressChange={setProgress}
+        />
+      </ToolRow>
+    </>
+  );
+}
diff --git a/desktop/src/shared/api/tauriIdentity.ts b/desktop/src/shared/api/tauriIdentity.ts
index 91b3a40077..57224a2382 100644
--- a/desktop/src/shared/api/tauriIdentity.ts
+++ b/desktop/src/shared/api/tauriIdentity.ts
@@ -95,3 +95,20 @@ export async function persistCurrentIdentity(): Promise<Identity> {
 export async function signOut(): Promise<void> {
   await invokeTauri("sign_out");
 }
+
+export type BackupVerification = {
+  pubkey: string;
+  npub: string;
+  matchesCurrentIdentity: boolean;
+};
+
+/** Decrypt a NIP-49 backup in Rust and return only its public identity. */
+export async function verifyNcryptsecBackup(
+  ncryptsec: string,
+  password: string,
+): Promise<BackupVerification> {
+  return invokeTauri<BackupVerification>("verify_ncryptsec_backup", {
+    ncryptsec,
+    password,
+  });
+}
diff --git a/desktop/src/testing/e2eBridge.ts b/desktop/src/testing/e2eBridge.ts
index 99e6fb2d83..ff241fc7e2 100644
--- a/desktop/src/testing/e2eBridge.ts
+++ b/desktop/src/testing/e2eBridge.ts
@@ -9628,6 +9628,25 @@ export function maybeInstallE2eTauriMocks() {
         }
         return MOCK_NCRYPTSEC;
       }
+      case "verify_ncryptsec_backup": {
+        const request = payload as {
+          ncryptsec?: string;
+          password?: string;
+        } | null;
+        if (
+          request?.password !== MOCK_BACKUP_PASSPHRASE ||
+          !request.ncryptsec?.startsWith("ncryptsec1")
+        )
+          throw new Error("Wrong backup password or damaged key backup.");
+        const different = request.ncryptsec !== MOCK_NCRYPTSEC;
+        return {
+          pubkey: different ? "f".repeat(64) : DEFAULT_MOCK_IDENTITY.pubkey,
+          npub: different
+            ? "npub1differentmockidentity000000000000000000000000000000000"
+            : "npub1mockcurrentidentity0000000000000000000000000000000000",
+          matchesCurrentIdentity: !different,
+        };
+      }
       case "save_ncryptsec_copy": {
         const blob = (payload as { ncryptsec?: string } | null)?.ncryptsec;
         if (!blob?.startsWith("ncryptsec1")) {
diff --git a/desktop/tests/e2e/onboarding-backup.spec.ts b/desktop/tests/e2e/onboarding-backup.spec.ts
index b5522ee1c0..dff9b012b4 100644
--- a/desktop/tests/e2e/onboarding-backup.spec.ts
+++ b/desktop/tests/e2e/onboarding-backup.spec.ts
@@ -146,11 +146,17 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
   await waitForAnimations(page);
   await page.screenshot({ path: `${SHOTS}/03-backup-download-passphrase.png` });
 
-  // Esc closes the popover; the generated password stays in the field.
+  // Encryption may finish while the generator popover is still open. Once it
+  // does, the real password is cleared and only the fixed saved-password mask
+  // remains over an empty read-only input.
   await page.keyboard.press("Escape");
   await expect(page.getByTestId("backup-passphrase-separator")).toHaveCount(0);
-  await expect(input).toHaveValue("mock-horse-battery-staple");
+  await expect(input).toHaveValue("");
+  await expect(input).toHaveAttribute("readonly", "");
+  await expect(page.getByTestId("backup-saved-password-mask")).toBeVisible();
 
+  // Saving uses the retained encrypted blob; it does not re-encrypt or need
+  // the cleared password.
   await page.getByTestId("encrypted-backup-create").click();
 
   // Only a successful save (the mock "picks" a path) advances to the
@@ -180,7 +186,7 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
     mimeType: "text/plain",
     buffer: Buffer.from("not a key backup"),
   });
-  await expect(page.getByTestId("backup-test-file-error")).toBeVisible();
+  await expect(page.getByTestId("backup-test-error")).toBeVisible();
 
   // A file drag over the window swaps in the drop overlay; leaving without
   // dropping restores the select button.
@@ -204,13 +210,14 @@ test("download happy path: generated password, encrypt, native save, Next", asyn
   await waitForAnimations(page);
   await page.screenshot({ path: `${SHOTS}/05-backup-test-password.png` });
 
-  // A full-length wrong password shows the mismatch hint, never success.
+  // Verification is explicit and clears every submitted attempt.
   await password.fill("mock-horse-battery-staplX");
-  await expect(page.getByTestId("backup-test-password-mismatch")).toBeVisible();
-  await expect(page.getByTestId("backup-test-success")).toHaveCount(0);
+  await page.getByTestId("backup-test-verify").click();
+  await expect(page.getByTestId("backup-test-error")).toBeVisible();
+  await expect(password).toHaveValue("");
 
-  // Typing the password completely succeeds without any extra click.
-  await password.fill("mock-horse-battery-staple");
+  await password.fill("mock horse battery staple lake orbit");
+  await page.getByTestId("backup-test-verify").click();
   await expect(page.getByTestId("backup-test-success")).toBeVisible();
 
   // The celebration is driven by motion's rAF loop, which
@@ -248,7 +255,7 @@ test("download step Back returns to the backup chooser", async ({ page }) => {
   await expect(page.getByTestId("onboarding-next")).toBeVisible();
 });
 
-test("test-view Back returns to the password form with the password intact", async ({
+test("test-view Back returns to a secure saved-password placeholder", async ({
   page,
 }) => {
   await enterMachineBackup(page);
@@ -262,17 +269,17 @@ test("test-view Back returns to the password form with the password intact", asy
     page.getByRole("heading", { name: "Now, test your backup" }),
   ).toBeVisible();
 
-  // Back from the test view rolls back to the password form (same step),
-  // keeping the entered password; only from the form does Back leave the
-  // step.
+  // Back retains only the encrypted blob and renders a fixed visual mask over
+  // an empty readonly input.
   await page.getByTestId("onboarding-back").click();
   await expect(
     page.getByRole("heading", { name: "Backup your key with a password" }),
   ).toBeVisible();
-  await expect(input).toHaveValue("mock-horse-battery-staple");
+  await expect(input).toHaveValue("");
+  await expect(input).toHaveAttribute("readonly", "");
+  await expect(page.getByTestId("backup-saved-password-mask")).toBeVisible();
 
-  // Re-downloading runs the ceremony again instantly from the cached
-  // encryption.
+  // Re-downloading needs no password or re-encryption.
   await page.getByTestId("encrypted-backup-create").click();
   await expect(
     page.getByRole("heading", { name: "Now, test your backup" }),
diff --git a/desktop/tests/e2e/profile-nsec-reveal.spec.ts b/desktop/tests/e2e/profile-nsec-reveal.spec.ts
index ed9b5f1e12..ca6a12a65a 100644
--- a/desktop/tests/e2e/profile-nsec-reveal.spec.ts
+++ b/desktop/tests/e2e/profile-nsec-reveal.spec.ts
@@ -5,7 +5,6 @@
 import { expect, test } from "@playwright/test";
 import { installMockBridge } from "../helpers/bridge";
 import { openSettings } from "../helpers/settings";
-import { endWindowFileDrag, startWindowFileDrag } from "../helpers/fileDrag";
 
 /** Expand the identity details section if it is not already open. */
 async function expandIdentity(page: import("@playwright/test").Page) {
@@ -65,32 +64,18 @@ test("reveal shows error when get_nsec fails", async ({ page }) => {
   );
 });
 
-test("settings creates and tests a password-protected key backup", async ({
+test("settings separates backup creation from general NIP-49 testing", async ({
   page,
 }) => {
   await installMockBridge(page);
   await page.goto("/");
   await openSettings(page, "profile");
   await expandIdentity(page);
-
-  const row = page.getByTestId("profile-encrypted-backup-row");
-  await expect(row).toContainText("Password-protected key backup");
-  await page.getByTestId("profile-encrypted-backup-toggle").click();
-
-  await page
-    .getByTestId("backup-passphrase-input")
-    .fill("mock horse battery staple");
-  await page.getByTestId("encrypted-backup-create").click();
-  await expect(page.getByTestId("backup-test-dropzone")).toBeVisible();
-
-  // A file drag over the window swaps in a drop overlay covering the backup
-  // row (composer-style takeover); leaving restores the select button.
-  const dropOverlay = page.getByTestId("backup-test-drop-overlay");
-  await startWindowFileDrag(page);
-  await expect(dropOverlay).toBeVisible();
-  await endWindowFileDrag(page);
-  await expect(dropOverlay).toHaveCount(0);
-
+  const createRow = page.getByTestId("profile-encrypted-backup-row");
+  const testRow = page.getByTestId("profile-backup-test-row");
+  await expect(createRow).toContainText("Create a key backup");
+  await expect(testRow).toContainText("Test a key backup");
+  await page.getByTestId("profile-backup-test-row-toggle").click();
   await page.getByTestId("backup-test-file-input").setInputFiles({
     name: "identity.ncryptsec",
     mimeType: "text/plain",
@@ -100,8 +85,13 @@ test("settings creates and tests a password-protected key backup", async ({
   });
   await page
     .getByTestId("backup-test-password")
-    .fill("mock horse battery staple");
+    .fill("mock horse battery staple lake orbit");
+  await page.getByTestId("backup-test-verify").click();
+  await expect(page.getByTestId("backup-test-success")).toContainText(
+    "Valid backup",
+  );
   await expect(page.getByTestId("backup-test-success")).toContainText(
-    "Your backup works!",
+    "Matches your current Buzz identity",
   );
+  await expect(page.getByTestId("backup-test-npub")).toBeVisible();
 });

From 7700be32da4489004af64bd3ad1642a3093b445b Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 29 Jul 2026 11:03:21 -0700
Subject: [PATCH 16/21] fix(desktop): restore backup flow polish over hardened
 NIP-49 verification
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hardened-verification commit (0ce29b187) replaced the in-memory
backup check with a real Rust NIP-49 decrypt but rewrote the test-flow
UI from scratch, dropping the treatment built across the prior flow
commits (60b7da631..a8929a3db) and reintroducing protocol jargon into
primary copy. This restores the presentation and phrasing around the
new engine; all security behavior is unchanged (Rust decrypt,
request-id correlation, attempt clearing, explicit Verify, exact-file
onboarding gate, saved-password mask, change-password confirmation).

- BackupTestFlow.tsx: bring back the SuccessBurst emoji celebration,
  spring check badge, and staged fade-ins with useReducedMotion guards;
  password autofocus on stage entry; aria-hidden icons; animate-in on
  the accepted-file row; explanatory comments. Variant-aware buttons
  return: spotlight uses h-14 px-12 with the onboarding CTA label
  variable, boxed uses h-9 px-6 text-sm text-primary-foreground
  (preserving the a1e250201 invisible-label fix); Re-download and "Use
  a different file" regain their prior sizes. Copy is plain-language
  again: "Select your backup file", "That's the one. Now enter your
  password to prove you can unlock it.", a "Checking…" verifying state,
  and errors anchored under the input. Success splits by context:
  onboarding celebrates "Your backup works!" with no npub noise, while
  the settings tester reports "This backup works" plus which identity
  it restores, rendered via the canonical PubKey component instead of a
  hand-truncated code pill.
- EncryptedBackupRow.tsx: move NIP-49 out of the row descriptions into
  fine print ("Backups use the standard NIP-49 format…"); restore the
  toggle's aria-label, transition-colors, and focus ring offset.
- EncryptedBackupCreator.tsx: delete the plain centered "Backup
  downloaded" block; a settings save now lands in the same masked
  saved-password form onboarding uses on Back, with "Download backup
  again", the saved path, and a note that the password is not kept.
- profile-nsec-reveal.spec.ts: update the two success-copy assertions;
  all testids stay stable so no other spec changes were needed.

Verified: typecheck clean, desktop unit 3781/3781, pnpm check clean,
focused Playwright (onboarding-backup + profile-nsec-reveal) 12/12,
and fresh hash-distinct screenshots of every changed state.

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../features/onboarding/ui/BackupTestFlow.tsx | 530 ++++++++++++------
 .../onboarding/ui/EncryptedBackupCreator.tsx  |  46 +-
 .../settings/ui/EncryptedBackupRow.tsx        |  42 +-
 desktop/tests/e2e/profile-nsec-reveal.spec.ts |   4 +-
 4 files changed, 421 insertions(+), 201 deletions(-)

diff --git a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
index 82a3bcd836..dee0ea9405 100644
--- a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
+++ b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
@@ -1,23 +1,36 @@
-import { Check, Copy, Eye, EyeOff, FileKey2, FileUp } from "lucide-react";
+import { Check, Eye, EyeOff, FileKey2, FileUp } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
 import * as React from "react";
-import { toast } from "sonner";
 
 import {
   verifyNcryptsecBackup,
   type BackupVerification,
 } from "@/shared/api/tauriIdentity";
-import { writeTextToClipboard } from "@/shared/lib/clipboard";
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Input } from "@/shared/ui/input";
+import { PubKey } from "@/shared/ui/PubKey";
 import { Spinner } from "@/shared/ui/spinner";
 
+type BackupTestStage = "drop" | "password" | "success";
+
+/**
+ * Durable progress through the test flow. Owned by the host so navigating
+ * away (e.g. onboarding Back) and returning doesn't force the user to
+ * re-drop the file. The password attempt is deliberately NOT part of this
+ * state — it lives only in short-lived component state and is cleared the
+ * moment it's submitted or the component unmounts.
+ */
 export type BackupTestProgress = {
-  stage: "drop" | "password" | "success";
+  stage: BackupTestStage;
+  /** Name of the accepted file once the drop check passed. */
   fileName: string | null;
+  /** Contents of the accepted file, pending or past verification. */
   ncryptsec: string | null;
+  /** The Rust-verified public identity once decryption succeeded. */
   result: BackupVerification | null;
 };
+
 export const initialBackupTestProgress: BackupTestProgress = {
   stage: "drop",
   fileName: null,
@@ -25,19 +38,100 @@ export const initialBackupTestProgress: BackupTestProgress = {
   result: null,
 };
 
-type Props = {
+type BackupTestFlowProps = {
+  /** "spotlight" is the onboarding treatment; "boxed" fits settings cards. */
   variant?: "spotlight" | "boxed";
-  /** When supplied, only this exact just-created file can complete onboarding. */
+  /**
+   * When supplied, only this exact just-created file is accepted — the
+   * onboarding ceremony proves the user saved *that* backup. Without it the
+   * flow is a general-purpose tester for any key backup file.
+   */
   expectedNcryptsec?: string;
+  /** Re-open the native save dialog for another copy of the backup file. */
   onSaveCopy?: () => void;
   isSaving?: boolean;
   savedPath?: string | null;
   saveError?: string | null;
+  /** Host-owned progress so it survives this component unmounting. */
   progress: BackupTestProgress;
   onProgressChange: React.Dispatch<React.SetStateAction<BackupTestProgress>>;
+  /** Fired once when the user completes the test successfully. */
   onVerified?: () => void;
 };
 
+const BURST_EMOJIS = ["🎉", "✨", "🐝", "🍯", "🔑", "💛"] as const;
+const BURST_PARTICLE_COUNT = 18;
+
+type BurstParticle = {
+  id: number;
+  x: number;
+  y: number;
+  emoji: string;
+  delay: number;
+  scale: number;
+  rotate: number;
+};
+
+/**
+ * One-shot radial emoji burst behind the success badge. Purely decorative —
+ * skipped entirely under reduced motion.
+ */
+function SuccessBurst() {
+  const particles = React.useMemo<BurstParticle[]>(
+    () =>
+      Array.from({ length: BURST_PARTICLE_COUNT }, (_, i) => {
+        const angle =
+          (i / BURST_PARTICLE_COUNT) * Math.PI * 2 + Math.random() * 0.5;
+        const distance = 70 + Math.random() * 80;
+        return {
+          id: i,
+          x: Math.cos(angle) * distance,
+          y: Math.sin(angle) * distance,
+          emoji: BURST_EMOJIS[i % BURST_EMOJIS.length],
+          delay: Math.random() * 0.18,
+          scale: 0.8 + Math.random() * 0.7,
+          rotate: -120 + Math.random() * 240,
+        };
+      }),
+    [],
+  );
+
+  return (
+    <div
+      aria-hidden
+      className="pointer-events-none absolute inset-0 flex items-center justify-center overflow-visible"
+    >
+      {particles.map((particle) => (
+        <motion.span
+          animate={{
+            x: particle.x,
+            y: particle.y,
+            opacity: 0,
+            scale: particle.scale,
+            rotate: particle.rotate,
+          }}
+          className="absolute text-xl"
+          initial={{ x: 0, y: 0, opacity: 1, scale: 0.3, rotate: 0 }}
+          key={particle.id}
+          transition={{
+            duration: 0.9,
+            delay: particle.delay,
+            ease: "easeOut",
+          }}
+        >
+          {particle.emoji}
+        </motion.span>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * "Test your backup" flow: the user drops a backup file onto a large
+ * dropzone, then enters its password. Verification is a real NIP-49 decrypt
+ * in Rust — the submitted password is cleared immediately after the result
+ * and only the derived public identity ever comes back.
+ */
 export function BackupTestFlow({
   variant = "spotlight",
   expectedNcryptsec,
@@ -48,54 +142,90 @@ export function BackupTestFlow({
   progress,
   onProgressChange,
   onVerified,
-}: Props) {
+}: BackupTestFlowProps) {
+  const reduceMotion = useReducedMotion() ?? false;
   const { stage, fileName, ncryptsec, result } = progress;
+  // True while a file drag is anywhere over the window — the drop overlay
+  // takes over the host surface only for the duration of the drag.
+  const [isWindowDragging, setIsWindowDragging] = React.useState(false);
+  const dragDepthRef = React.useRef(0);
+
+  React.useEffect(() => {
+    // dragenter/dragleave fire per nested element, so track depth to know
+    // when the drag has actually left the window.
+    const handleDragEnter = (event: DragEvent) => {
+      if (!event.dataTransfer?.types.includes("Files")) return;
+      dragDepthRef.current += 1;
+      setIsWindowDragging(true);
+    };
+    const handleDragLeave = () => {
+      dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+      if (dragDepthRef.current === 0) setIsWindowDragging(false);
+    };
+    const handleDragEnd = () => {
+      dragDepthRef.current = 0;
+      setIsWindowDragging(false);
+    };
+    window.addEventListener("dragenter", handleDragEnter);
+    window.addEventListener("dragleave", handleDragLeave);
+    window.addEventListener("drop", handleDragEnd);
+    window.addEventListener("dragend", handleDragEnd);
+    return () => {
+      window.removeEventListener("dragenter", handleDragEnter);
+      window.removeEventListener("dragleave", handleDragLeave);
+      window.removeEventListener("drop", handleDragEnd);
+      window.removeEventListener("dragend", handleDragEnd);
+    };
+  }, []);
+
+  // The password attempt is component-local, never host state: it is cleared
+  // when verification is submitted and when this component unmounts.
   const [attempt, setAttempt] = React.useState("");
   const [error, setError] = React.useState<string | null>(null);
-  const [verifying, setVerifying] = React.useState(false);
-  const [revealed, setRevealed] = React.useState(false);
-  const [dragging, setDragging] = React.useState(false);
-  const fileRef = React.useRef<HTMLInputElement>(null);
-  const mounted = React.useRef(true);
+  const [isVerifying, setIsVerifying] = React.useState(false);
+  const [isRevealed, setIsRevealed] = React.useState(false);
+  const fileInputRef = React.useRef<HTMLInputElement | null>(null);
+  const passwordInputRef = React.useRef<HTMLInputElement | null>(null);
+  const mountedRef = React.useRef(true);
+  // Opaque correlation id so a stale in-flight verification can't commit
+  // after "Use a different file" or unmount.
   const requestRef = React.useRef(0);
-  React.useEffect(
-    () => () => {
-      mounted.current = false;
-      requestRef.current += 1;
-      setAttempt("");
-    },
-    [],
-  );
 
   React.useEffect(() => {
-    const enter = (event: DragEvent) => {
-      if (event.dataTransfer?.types.includes("Files")) setDragging(true);
-    };
-    const leave = (event: DragEvent) => {
-      if (event.clientX === 0 && event.clientY === 0) setDragging(false);
-    };
-    const end = () => setDragging(false);
-    window.addEventListener("dragenter", enter);
-    window.addEventListener("dragleave", leave);
-    window.addEventListener("drop", end);
-    window.addEventListener("dragend", end);
+    mountedRef.current = true;
     return () => {
-      window.removeEventListener("dragenter", enter);
-      window.removeEventListener("dragleave", leave);
-      window.removeEventListener("drop", end);
-      window.removeEventListener("dragend", end);
+      mountedRef.current = false;
+      requestRef.current += 1;
+      setAttempt("");
     };
   }, []);
 
-  async function choose(file: File) {
-    try {
-      const text = (await file.text()).trim();
-      if (!text.toLowerCase().startsWith("ncryptsec1"))
-        throw new Error("That doesn't look like a NIP-49 key backup.");
-      if (expectedNcryptsec && text !== expectedNcryptsec.trim())
-        throw new Error(
-          "That's a key backup, but not the one you just downloaded.",
+  React.useEffect(() => {
+    if (stage === "password") passwordInputRef.current?.focus();
+  }, [stage]);
+
+  const handleFile = React.useCallback(
+    async (file: File) => {
+      let text: string;
+      try {
+        text = (await file.text()).trim();
+      } catch {
+        if (mountedRef.current) setError("Could not read that file.");
+        return;
+      }
+      if (!mountedRef.current) return;
+      if (!text.toLowerCase().startsWith("ncryptsec1")) {
+        setError(
+          expectedNcryptsec
+            ? "That doesn't look like your key backup. Choose the file you just downloaded."
+            : "That doesn't look like a key backup file.",
         );
+        return;
+      }
+      if (expectedNcryptsec && text !== expectedNcryptsec.trim()) {
+        setError("That's a key backup, but not the one you just downloaded.");
+        return;
+      }
       setError(null);
       setAttempt("");
       onProgressChange({
@@ -104,157 +234,208 @@ export function BackupTestFlow({
         ncryptsec: text,
         result: null,
       });
-    } catch (err) {
-      if (mounted.current)
-        setError(
-          err instanceof Error ? err.message : "Could not read that file.",
-        );
-    }
-  }
+    },
+    [expectedNcryptsec, onProgressChange],
+  );
 
-  async function verify() {
-    if (!ncryptsec || !attempt || verifying) return;
+  const handleVerify = React.useCallback(async () => {
+    if (!ncryptsec || !attempt || isVerifying) return;
     const password = attempt;
-    const id = ++requestRef.current;
-    setVerifying(true);
+    const requestId = ++requestRef.current;
+    setIsVerifying(true);
     setError(null);
-    setRevealed(false);
+    setIsRevealed(false);
+    // Clear the attempt the moment it's handed to Rust — success or failure,
+    // the typed password never lingers in the field.
     setAttempt("");
     try {
       const verified = await verifyNcryptsecBackup(ncryptsec, password);
-      if (!mounted.current || id !== requestRef.current) return;
-      onProgressChange({ ...progress, stage: "success", result: verified });
+      if (!mountedRef.current || requestId !== requestRef.current) return;
+      onProgressChange((prev) => ({
+        ...prev,
+        stage: "success",
+        result: verified,
+      }));
       onVerified?.();
     } catch (err) {
-      if (mounted.current && id === requestRef.current)
+      if (mountedRef.current && requestId === requestRef.current)
         setError(
           err instanceof Error ? err.message : "Could not verify this backup.",
         );
     } finally {
-      if (mounted.current && id === requestRef.current) setVerifying(false);
+      if (mountedRef.current && requestId === requestRef.current)
+        setIsVerifying(false);
     }
-  }
+  }, [attempt, isVerifying, ncryptsec, onProgressChange, onVerified]);
 
-  if (stage === "success" && result)
+  const isSpotlight = variant === "spotlight";
+
+  if (stage === "success" && result) {
+    // The onboarding ceremony pins the exact file, so a success there is by
+    // construction the current identity — celebrate and move on. The general
+    // tester reports which identity the backup unlocks.
+    const isCeremony = Boolean(expectedNcryptsec);
     return (
       <div
-        className="space-y-4 py-3 text-center"
+        className="relative flex flex-col items-center gap-4 py-4 text-center"
         data-testid="backup-test-success"
       >
-        <div className="mx-auto flex size-14 items-center justify-center rounded-full bg-primary text-primary-foreground">
-          <Check className="size-7" aria-hidden />
-        </div>
-        <div>
-          <p className="text-lg font-medium">Valid backup</p>
-          <p className="mt-1 text-sm text-muted-foreground">
-            {result.matchesCurrentIdentity
-              ? "Matches your current Buzz identity."
-              : "Belongs to a different identity."}
+        {reduceMotion ? null : <SuccessBurst />}
+        <motion.div
+          animate={{ scale: 1, opacity: 1 }}
+          className="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground"
+          initial={reduceMotion ? false : { scale: 0, opacity: 0 }}
+          transition={
+            reduceMotion
+              ? { duration: 0 }
+              : { type: "spring", stiffness: 380, damping: 18 }
+          }
+        >
+          <Check aria-hidden="true" className="h-8 w-8" strokeWidth={3} />
+        </motion.div>
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          initial={reduceMotion ? false : { opacity: 0, y: 8 }}
+          transition={
+            reduceMotion ? { duration: 0 } : { delay: 0.15, duration: 0.35 }
+          }
+        >
+          <p className="text-lg font-medium text-foreground">
+            {isCeremony ? "Your backup works!" : "This backup works"}
           </p>
-        </div>
-        <div className="mx-auto flex max-w-md items-center gap-2 rounded-lg bg-muted px-3 py-2">
-          <code
-            className="min-w-0 flex-1 truncate text-xs"
-            title={result.npub}
-            data-testid="backup-test-npub"
-          >
-            {result.npub}
-          </code>
-          <Button
-            aria-label="Copy backup identity"
-            data-testid="backup-test-copy-npub"
-            onClick={async () => {
-              await writeTextToClipboard(result.npub);
-              toast.success("Copied to clipboard");
-            }}
-            size="icon"
-            variant="ghost"
-          >
-            <Copy className="size-4" />
-          </Button>
-        </div>
-        {!expectedNcryptsec ? (
+          <p className="mt-1.5 text-sm leading-6 text-muted-foreground">
+            {isCeremony
+              ? "File and password verified. Keep them both somewhere safe — that's all you need to restore your identity."
+              : result.matchesCurrentIdentity
+                ? "It restores your current Buzz identity."
+                : "It restores a different identity than the one signed in here."}
+          </p>
+          {isCeremony ? null : (
+            <div className="mt-3 flex justify-center">
+              <PubKey
+                pubkey={result.pubkey}
+                testId="backup-test-npub"
+                variant="full"
+              />
+            </div>
+          )}
+        </motion.div>
+        {isCeremony ? null : (
           <Button
+            className="h-8 rounded-full px-4 text-xs text-muted-foreground hover:text-foreground"
             data-testid="backup-test-another"
             onClick={() => {
               setError(null);
               onProgressChange(initialBackupTestProgress);
             }}
+            type="button"
             variant="ghost"
           >
             Test another backup
           </Button>
-        ) : null}
+        )}
       </div>
     );
+  }
 
-  const spotlight = variant === "spotlight";
   return (
     <div
       className={cn(
         "mx-auto w-full space-y-4",
-        spotlight ? "max-w-140" : "max-w-125",
+        isSpotlight ? "max-w-140" : "max-w-125",
       )}
       data-testid="backup-test-flow"
     >
       {stage === "drop" ? (
         <>
           <input
-            ref={fileRef}
+            accept=".ncryptsec,text/plain"
             className="sr-only"
             data-testid="backup-test-file-input"
-            type="file"
-            accept=".ncryptsec,text/plain"
-            tabIndex={-1}
-            onChange={(e) => {
-              const file = e.target.files?.[0];
-              e.target.value = "";
-              if (file) void choose(file);
+            onChange={(event) => {
+              const file = event.target.files?.[0];
+              // Allow re-selecting the same file after an error.
+              event.target.value = "";
+              if (file) void handleFile(file);
             }}
+            ref={fileInputRef}
+            tabIndex={-1}
+            type="file"
           />
           <button
-            type="button"
-            data-testid="backup-test-dropzone"
             className={cn(
-              "mx-auto flex items-center justify-center rounded-full bg-primary font-medium text-primary-foreground",
-              spotlight ? "h-14 px-12" : "h-9 px-6 text-sm",
+              "mx-auto flex items-center justify-center rounded-full bg-primary text-center shadow transition-colors hover:bg-primary/90",
+              // The CTA-label variable only exists inside the onboarding
+              // theme; elsewhere fall back to the standard primary pair.
+              isSpotlight
+                ? "h-14 px-12 text-(--buzz-onboarding-cta-label)"
+                : "h-9 px-6 text-primary-foreground",
             )}
-            onClick={() => fileRef.current?.click()}
+            data-testid="backup-test-dropzone"
+            onClick={() => fileInputRef.current?.click()}
+            type="button"
           >
-            Select a backup file
+            <span
+              className={cn(
+                "font-medium",
+                isSpotlight ? "text-base" : "text-sm",
+              )}
+            >
+              Select your backup file
+            </span>
           </button>
-          {dragging ? (
-            <section
-              aria-label="Drop your key backup here"
+          {isWindowDragging ? (
+            /*
+             * Composer-style takeover: fills the nearest positioned host
+             * surface (the onboarding card / the settings backup row) and is
+             * itself the drop target, so anywhere on that surface accepts
+             * the file.
+             */
+            // biome-ignore lint/a11y/noStaticElementInteractions: pointer-only drop target; the select button is the keyboard-accessible path
+            <div
               className="absolute inset-2 z-10 mt-0! flex items-center justify-center rounded-2xl border-2 border-dashed border-primary bg-primary/10 backdrop-blur-sm"
               data-testid="backup-test-drop-overlay"
-              onDragOver={(e) => e.preventDefault()}
-              onDrop={(e) => {
-                e.preventDefault();
-                const f = e.dataTransfer.files?.[0];
-                if (f) void choose(f);
+              onDragOver={(event) => event.preventDefault()}
+              onDrop={(event) => {
+                event.preventDefault();
+                const file = event.dataTransfer.files?.[0];
+                if (file) void handleFile(file);
               }}
             >
-              <span className="flex items-center gap-2 rounded-full bg-foreground px-4 py-2 text-sm font-semibold text-background">
-                <FileUp className="size-4" />
-                Drop your backup file here
+              <span className="flex items-center gap-2 rounded-full bg-foreground px-4 py-2 text-sm font-semibold text-background shadow-sm ring-1 ring-background/15">
+                <FileUp aria-hidden="true" className="size-4" />
+                <span>Drop your backup file here</span>
               </span>
-            </section>
+            </div>
+          ) : null}
+          {error ? (
+            <p
+              className="text-center text-sm text-destructive"
+              data-testid="backup-test-error"
+              role="alert"
+            >
+              {error}
+            </p>
           ) : null}
           {onSaveCopy ? (
-            <div className="text-center">
+            <div className="flex flex-col items-center gap-2">
               <Button
+                className={cn(
+                  "gap-1.5 rounded-full bg-foreground/10 hover:bg-foreground/15",
+                  isSpotlight ? "h-12 px-10 text-base" : "h-9 px-6 text-sm",
+                )}
                 data-testid="encrypted-backup-save-copy"
                 disabled={isSaving}
                 onClick={onSaveCopy}
+                type="button"
                 variant="ghost"
               >
-                {isSaving ? <Spinner className="mr-2 size-4 border-2" /> : null}
+                {isSaving ? <Spinner className="h-4 w-4 border-2" /> : null}
                 Re-download backup
               </Button>
               {savedPath ? (
                 <p
-                  className="text-xs text-muted-foreground"
+                  className="text-center text-xs text-muted-foreground"
                   data-testid="encrypted-backup-saved-path"
                 >
                   Saved to {savedPath}
@@ -262,74 +443,108 @@ export function BackupTestFlow({
               ) : null}
             </div>
           ) : null}
+          {saveError ? (
+            <p className="text-center text-sm text-destructive">{saveError}</p>
+          ) : null}
         </>
       ) : (
         <>
           <div
-            className="flex items-center justify-center gap-2 text-sm"
+            className="flex items-center justify-center gap-2 text-sm text-foreground animate-in fade-in slide-in-from-bottom-1 duration-300 motion-reduce:animate-none"
             data-testid="backup-test-file-accepted"
           >
-            <FileKey2 className="size-4" />
+            <FileKey2
+              aria-hidden="true"
+              className="h-4 w-4 text-muted-foreground"
+            />
             <span className="max-w-70 truncate font-mono text-xs">
               {fileName}
             </span>
-            <Check className="size-4 text-primary" />
+            <Check aria-hidden="true" className="h-4 w-4 text-primary" />
           </div>
-          <p className="text-center text-sm text-muted-foreground">
-            Enter its password, then verify it with real NIP-49 decryption.
+          <p className="text-center text-sm leading-6 text-muted-foreground">
+            That's the one. Now enter your password to prove you can unlock it.
           </p>
           <div className="relative">
             <Input
               aria-label="Backup password"
               autoComplete="off"
+              className="h-10 bg-background pr-10 font-mono"
               data-testid="backup-test-password"
-              disabled={verifying}
-              type={revealed ? "text" : "password"}
-              value={attempt}
-              onChange={(e) => setAttempt(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  void verify();
+              disabled={isVerifying}
+              onChange={(event) => setAttempt(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  void handleVerify();
                 }
               }}
-              className="pr-10 font-mono"
+              placeholder="Your backup password"
+              ref={passwordInputRef}
+              type={isRevealed ? "text" : "password"}
+              value={attempt}
             />
             <Button
-              aria-label={revealed ? "Hide password" : "Reveal password"}
+              aria-label={isRevealed ? "Hide password" : "Reveal password"}
+              className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2 text-muted-foreground hover:text-foreground"
               data-testid="backup-test-password-reveal-toggle"
-              disabled={verifying}
-              onClick={() => setRevealed((v) => !v)}
+              disabled={isVerifying}
+              onClick={() => setIsRevealed((revealed) => !revealed)}
               size="icon"
               type="button"
               variant="ghost"
-              className="absolute right-1 top-1/2 -translate-y-1/2"
             >
-              {revealed ? (
-                <EyeOff className="size-4" />
+              {isRevealed ? (
+                <EyeOff aria-hidden="true" className="h-4 w-4" />
               ) : (
-                <Eye className="size-4" />
+                <Eye aria-hidden="true" className="h-4 w-4" />
               )}
             </Button>
+            {error ? (
+              <p
+                className="absolute left-1 top-full mt-1 text-xs text-destructive animate-in fade-in duration-200 motion-reduce:animate-none"
+                data-testid="backup-test-error"
+                role="alert"
+              >
+                {error}
+              </p>
+            ) : null}
           </div>
-          <div className="flex justify-center gap-2">
+          <div className="flex items-center justify-center gap-3 pt-2">
             <Button
+              className={cn(
+                "rounded-full bg-primary font-medium shadow transition-colors hover:bg-primary/90",
+                isSpotlight
+                  ? "h-12 px-10 text-base text-(--buzz-onboarding-cta-label)"
+                  : "h-9 px-6 text-sm text-primary-foreground",
+              )}
               data-testid="backup-test-verify"
-              disabled={!attempt || verifying}
-              onClick={() => void verify()}
+              disabled={!attempt || isVerifying}
+              onClick={() => void handleVerify()}
+              type="button"
             >
-              {verifying ? <Spinner className="mr-2 size-4 border-2" /> : null}
-              Verify backup
+              {isVerifying ? (
+                <>
+                  <Spinner className="h-4 w-4 border-2" />
+                  Checking…
+                </>
+              ) : (
+                "Verify backup"
+              )}
             </Button>
             <Button
+              className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
               data-testid="backup-test-use-different-file"
-              disabled={verifying}
+              disabled={isVerifying}
               onClick={() => {
                 requestRef.current += 1;
                 setAttempt("");
                 setError(null);
+                setIsRevealed(false);
                 onProgressChange(initialBackupTestProgress);
               }}
+              size="sm"
+              type="button"
               variant="ghost"
             >
               Use a different file
@@ -337,15 +552,6 @@ export function BackupTestFlow({
           </div>
         </>
       )}
-      {error || saveError ? (
-        <p
-          role="alert"
-          className="text-center text-sm text-destructive"
-          data-testid="backup-test-error"
-        >
-          {error ?? saveError}
-        </p>
-      ) : null}
     </div>
   );
 }
diff --git a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
index 2f3d3bd14b..687e2ff315 100644
--- a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
+++ b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
@@ -582,31 +582,9 @@ export function EncryptedBackupCreator({
       </div>
     );
   }
-  if (state.ncryptsec && savedPath) {
-    return (
-      <div
-        className="space-y-3 text-center"
-        data-testid="encrypted-backup-created"
-      >
-        <p className="font-medium">Backup downloaded</p>
-        <p className="text-sm text-muted-foreground">
-          Buzz cleared the password from this session. You can download another
-          copy without entering it again.
-        </p>
-        <Button
-          data-testid="encrypted-backup-save-copy"
-          disabled={isSaving}
-          onClick={() => void handleSaveCopy()}
-        >
-          {isSaving ? <Spinner className="mr-2 size-4 border-2" /> : null}
-          Download another copy
-        </Button>
-        {saveError ? (
-          <p className="text-sm text-destructive">{saveError}</p>
-        ) : null}
-      </div>
-    );
-  }
+  // Without the guided test (settings), a completed save keeps the form
+  // visible in its saved-password state: masked input, instant re-download,
+  // and the change-password confirmation guarding any edit.
 
   return (
     <div
@@ -710,6 +688,24 @@ export function EncryptedBackupCreator({
         ) : null}
       </div>
 
+      {state.savedPassword && state.ncryptsec && savedPath ? (
+        <div
+          className="space-y-1 text-center"
+          data-testid="encrypted-backup-created"
+        >
+          <p
+            className="text-xs text-muted-foreground"
+            data-testid="encrypted-backup-saved-path"
+          >
+            Backup saved to {savedPath}
+          </p>
+          <p className="text-xs leading-5 text-muted-foreground">
+            Your password isn't kept — download another copy anytime, or start
+            over to choose a new password.
+          </p>
+        </div>
+      ) : null}
+
       {state.createError ? (
         <p
           className="text-center text-sm text-destructive"
diff --git a/desktop/src/features/settings/ui/EncryptedBackupRow.tsx b/desktop/src/features/settings/ui/EncryptedBackupRow.tsx
index e1f2e60922..ddf95e6c06 100644
--- a/desktop/src/features/settings/ui/EncryptedBackupRow.tsx
+++ b/desktop/src/features/settings/ui/EncryptedBackupRow.tsx
@@ -1,10 +1,16 @@
 import * as React from "react";
-import { EncryptedBackupCreator } from "@/features/onboarding/ui/EncryptedBackupCreator";
+
 import {
   BackupTestFlow,
   initialBackupTestProgress,
 } from "@/features/onboarding/ui/BackupTestFlow";
+import { EncryptedBackupCreator } from "@/features/onboarding/ui/EncryptedBackupCreator";
 
+/**
+ * Collapsible settings row shared by the two backup tools. `relative`
+ * anchors the backup-test drop overlay (BackupTestFlow) so a file drag takes
+ * over the whole row, mirroring the composer treatment.
+ */
 function ToolRow({
   title,
   description,
@@ -31,8 +37,9 @@ function ToolRow({
         </div>
         <button
           aria-expanded={open}
+          aria-label={open ? `Close ${title.toLowerCase()}` : title}
+          className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-muted px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
           data-testid={`${testId}-toggle`}
-          className="inline-flex shrink-0 rounded-full bg-muted px-3 py-1.5 text-sm font-medium hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-ring"
           onClick={onToggle}
           type="button"
         >
@@ -44,6 +51,12 @@ function ToolRow({
   );
 }
 
+/**
+ * Sibling settings tools for the password-protected key backup: create a new
+ * backup, or test any existing backup file. The raw private key never reaches
+ * either flow — the password goes to Rust, which returns only the encrypted
+ * NIP-49 blob (create) or the derived public identity (test).
+ */
 export function EncryptedBackupRow() {
   const [createOpen, setCreateOpen] = React.useState(false);
   const [testOpen, setTestOpen] = React.useState(false);
@@ -51,33 +64,38 @@ export function EncryptedBackupRow() {
   return (
     <>
       <ToolRow
-        title="Create a key backup"
-        description="Download a password-protected NIP-49 copy of your identity key."
         action="Create backup"
+        description="Download a password-protected copy of your identity key."
+        onToggle={() => setCreateOpen((open) => !open)}
         open={createOpen}
-        onToggle={() => setCreateOpen((v) => !v)}
         testId="profile-encrypted-backup-row"
+        title="Create a key backup"
       >
         <EncryptedBackupCreator guidedTest={false} variant="boxed" />
         <p className="mt-3 text-xs leading-5 text-muted-foreground">
-          Keep the file private and save its password somewhere safe. Buzz
-          cannot reset it.
+          Keep the file private and save its password somewhere safe — Buzz
+          cannot reset it. Creating another backup does not invalidate copies
+          you saved before.
         </p>
       </ToolRow>
       <div className="border-t border-border/60" />
       <ToolRow
-        title="Test a key backup"
-        description="Verify any NIP-49 backup and see which public identity it belongs to."
         action="Test backup"
+        description="Check a backup file and its password, and see which identity it unlocks."
+        onToggle={() => setTestOpen((open) => !open)}
         open={testOpen}
-        onToggle={() => setTestOpen((v) => !v)}
         testId="profile-backup-test-row"
+        title="Test a key backup"
       >
         <BackupTestFlow
-          variant="boxed"
-          progress={progress}
           onProgressChange={setProgress}
+          progress={progress}
+          variant="boxed"
         />
+        <p className="mt-3 text-xs leading-5 text-muted-foreground">
+          Backups use the standard NIP-49 format, so this works for backups from
+          compatible Nostr apps too.
+        </p>
       </ToolRow>
     </>
   );
diff --git a/desktop/tests/e2e/profile-nsec-reveal.spec.ts b/desktop/tests/e2e/profile-nsec-reveal.spec.ts
index ca6a12a65a..a91d4c5741 100644
--- a/desktop/tests/e2e/profile-nsec-reveal.spec.ts
+++ b/desktop/tests/e2e/profile-nsec-reveal.spec.ts
@@ -88,10 +88,10 @@ test("settings separates backup creation from general NIP-49 testing", async ({
     .fill("mock horse battery staple lake orbit");
   await page.getByTestId("backup-test-verify").click();
   await expect(page.getByTestId("backup-test-success")).toContainText(
-    "Valid backup",
+    "This backup works",
   );
   await expect(page.getByTestId("backup-test-success")).toContainText(
-    "Matches your current Buzz identity",
+    "It restores your current Buzz identity",
   );
   await expect(page.getByTestId("backup-test-npub")).toBeVisible();
 });

From ac9f9845a1cd5d84fb3357fa6399fb2a2ad3570b Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 29 Jul 2026 11:34:39 -0700
Subject: [PATCH 17/21] fix(desktop): lay-person copy for the
 new-backup-password dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rewrite the "Create a new backup password?" AlertDialog description in
  EncryptedBackupCreator.tsx:
  - Drop the "Buzz no longer keeps the password for this backup" sentence —
    an implementation detail that didn't help the user decide
  - Anchor the copy on the "starting over" action to match the
    "Start with a new password" confirm button
  - Replace "copies you already saved will keep working with their original
    password" with plain language: earlier backups still work with the
    password they were created with
- No e2e updates needed: no spec asserts on this dialog's description text

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../src/features/onboarding/ui/EncryptedBackupCreator.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
index 687e2ff315..b080f6808b 100644
--- a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
+++ b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
@@ -773,9 +773,9 @@ export function EncryptedBackupCreator({
           <AlertDialogHeader>
             <AlertDialogTitle>Create a new backup password?</AlertDialogTitle>
             <AlertDialogDescription>
-              Buzz no longer keeps the password for this backup. Starting over
-              creates a new backup; copies you already saved will keep working
-              with their original password.
+              Starting over lets you pick a new password and download a fresh
+              backup file. Backups you saved earlier will still work — just use
+              the password you created them with.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>

From bbebe3832c1c43b43c52ba4035fe6651e42853ed Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 29 Jul 2026 11:46:19 -0700
Subject: [PATCH 18/21] fix(desktop): ungate sign-out backup checkbox and wrap
 revealed nsec
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SignOutSection: the "I have tested a key backup" checkbox no longer
  requires revealing or copying the nsec first — it is enabled as soon
  as the dialog opens (still disabled while sign-out is pending)
- Remove hasInteractedWithKey state, canConfirmBackup gate, and the
  "Reveal or copy this last-chance private key first." hint text
- NsecMaskedDisplay: drop the now-unused onKeyInteraction prop
- NsecMaskedDisplay boxed variant: render the key in monospace and let
  the revealed nsec break to the next line (font-mono, break-all,
  wrap-anywhere) instead of overflowing the container; also applies to
  the profile settings key reveal
- Update signout-confirmation e2e spec: remove the reveal-unlocks test
  and copy-before-check steps; assert checkbox resets unchecked on
  reopen instead of disabled

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../onboarding/ui/NsecMaskedDisplay.tsx       | 12 ++-----
 .../features/settings/ui/SignOutSection.tsx   | 26 +++-----------
 .../tests/e2e/signout-confirmation.spec.ts    | 34 ++++---------------
 3 files changed, 14 insertions(+), 58 deletions(-)

diff --git a/desktop/src/features/onboarding/ui/NsecMaskedDisplay.tsx b/desktop/src/features/onboarding/ui/NsecMaskedDisplay.tsx
index 78c9ec24a2..2ab06799ae 100644
--- a/desktop/src/features/onboarding/ui/NsecMaskedDisplay.tsx
+++ b/desktop/src/features/onboarding/ui/NsecMaskedDisplay.tsx
@@ -13,11 +13,6 @@ type NsecMaskedDisplayProps = {
    * encrypted key ("ncryptsec") is only as sensitive as its passphrase.
    */
   kind?: "nsec" | "ncryptsec";
-  /**
-   * Called when the user reveals or copies the key. Lets flows that require
-   * a backup (e.g. sign-out) gate on actual interaction with the key.
-   */
-  onKeyInteraction?: () => void;
 };
 
 const KIND_LABELS = {
@@ -48,7 +43,6 @@ export function NsecMaskedDisplay({
   nsec,
   variant = "boxed",
   kind = "nsec",
-  onKeyInteraction,
 }: NsecMaskedDisplayProps) {
   const labels = KIND_LABELS[kind];
   const [isRevealed, setIsRevealed] = React.useState(false);
@@ -65,13 +59,11 @@ export function NsecMaskedDisplay({
   }, []);
 
   function handleRevealToggle() {
-    if (!isRevealed) onKeyInteraction?.();
     setIsRevealed((prev) => !prev);
   }
 
   async function handleCopy() {
     await writeTextToClipboard(nsec);
-    onKeyInteraction?.();
     setIsCopied(true);
     if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
     copyTimerRef.current = setTimeout(() => setIsCopied(false), 2000);
@@ -113,7 +105,9 @@ export function NsecMaskedDisplay({
         <div className="min-w-0 flex-1">
           <p
             className={`${
-              isBare ? ONBOARDING_KEY_TEXT_CLASS : "text-xs leading-5"
+              isBare
+                ? ONBOARDING_KEY_TEXT_CLASS
+                : "break-all font-mono text-xs leading-5 wrap-anywhere"
             } ${
               isRevealed
                 ? `select-text ${isBare ? "" : "text-foreground"}`
diff --git a/desktop/src/features/settings/ui/SignOutSection.tsx b/desktop/src/features/settings/ui/SignOutSection.tsx
index 7379a4a4b8..55479ec5d9 100644
--- a/desktop/src/features/settings/ui/SignOutSection.tsx
+++ b/desktop/src/features/settings/ui/SignOutSection.tsx
@@ -32,8 +32,8 @@ export const SIGNOUT_CONFIRM_PHRASE = "wipe all my data";
  * dialog gates the delete button behind two explicit steps:
  *
  * 1. Confirm recovery — Settings offers a tested password-protected backup;
- *    the dialog also shows the raw nsec as a last-chance fallback. The
- *    checkbox unlocks only after the user reveals or copies that key.
+ *    the dialog also shows the raw nsec as a last-chance fallback, and the
+ *    user checks a box confirming they can restore their identity.
  * 2. Typed confirmation — the user must type the exact phrase
  *    "wipe all my data".
  *
@@ -47,7 +47,6 @@ export function SignOutSection() {
   const [nsec, setNsec] = React.useState<string | null>(null);
   const [nsecError, setNsecError] = React.useState<string | null>(null);
   const [isNsecLoading, setIsNsecLoading] = React.useState(false);
-  const [hasInteractedWithKey, setHasInteractedWithKey] = React.useState(false);
   const [hasConfirmedBackup, setHasConfirmedBackup] = React.useState(false);
   // Guards against a late-resolving getNsec() repopulating state after the
   // dialog closes.
@@ -58,20 +57,13 @@ export function SignOutSection() {
   const isPhraseConfirmed =
     confirmText.trim().toLowerCase() === SIGNOUT_CONFIRM_PHRASE;
 
-  // The backup checkbox unlocks after real interaction with the key
-  // (reveal or copy). If the key cannot be loaded at all there is nothing to
-  // interact with — let the user proceed past the backup step rather than
-  // locking them out of sign-out entirely.
-  const isBackupGateSatisfied = hasConfirmedBackup;
-  const canConfirmBackup = hasInteractedWithKey || nsecError !== null;
-  const canDelete = isBackupGateSatisfied && isPhraseConfirmed && !isPending;
+  const canDelete = hasConfirmedBackup && isPhraseConfirmed && !isPending;
 
   function resetDialogState() {
     fetchCancelledRef.current = true;
     setNsec(null);
     setNsecError(null);
     setIsNsecLoading(false);
-    setHasInteractedWithKey(false);
     setHasConfirmedBackup(false);
     setConfirmText("");
   }
@@ -188,10 +180,7 @@ export function SignOutSection() {
                 {nsecError}
               </p>
             ) : nsec ? (
-              <NsecMaskedDisplay
-                nsec={nsec}
-                onKeyInteraction={() => setHasInteractedWithKey(true)}
-              />
+              <NsecMaskedDisplay nsec={nsec} />
             ) : null}
             <label
               className="flex cursor-pointer items-start gap-2.5 text-sm has-[button:disabled]:cursor-not-allowed has-[button:disabled]:opacity-60"
@@ -202,7 +191,7 @@ export function SignOutSection() {
                 checked={hasConfirmedBackup}
                 className="mt-0.5"
                 data-testid="signout-backup-confirm"
-                disabled={!canConfirmBackup || isPending}
+                disabled={isPending}
                 id="signout-backup-confirm"
                 onCheckedChange={(checked) =>
                   setHasConfirmedBackup(checked === true)
@@ -211,11 +200,6 @@ export function SignOutSection() {
               <span>
                 I have tested a key backup or saved this private key somewhere
                 safe.
-                {!canConfirmBackup ? (
-                  <span className="block text-xs text-muted-foreground">
-                    Reveal or copy this last-chance private key first.
-                  </span>
-                ) : null}
               </span>
             </label>
           </div>
diff --git a/desktop/tests/e2e/signout-confirmation.spec.ts b/desktop/tests/e2e/signout-confirmation.spec.ts
index b87caf5975..7b6c9b5761 100644
--- a/desktop/tests/e2e/signout-confirmation.spec.ts
+++ b/desktop/tests/e2e/signout-confirmation.spec.ts
@@ -3,7 +3,7 @@
  *
  * Signing out wipes the identity key and all local data, so the dialog gates
  * "Delete My Data" behind two explicit steps:
- *   1. backup — reveal/copy the nsec, then check "I have saved my private key"
+ *   1. backup — check "I have saved my private key"
  *   2. typed confirmation — type the exact phrase "wipe all my data"
  */
 import { expect, type Page, test } from "@playwright/test";
@@ -13,10 +13,6 @@ import { openSettings } from "../helpers/settings";
 
 const CONFIRM_PHRASE = "wipe all my data";
 
-// The mock bridge routes copy_text_to_clipboard through navigator.clipboard,
-// which requires explicit permissions in headless Chromium.
-test.use({ permissions: ["clipboard-read", "clipboard-write"] });
-
 async function openSignOutDialog(page: Page) {
   await openSettings(page, "profile");
   const section = page.getByTestId("settings-signout");
@@ -36,12 +32,8 @@ test("delete button unlocks only after backup + typed phrase", async ({
   const backupCheckbox = page.getByTestId("signout-backup-confirm");
   const phraseInput = page.getByTestId("signout-confirm-phrase");
 
-  // Everything locked initially: no key interaction yet.
+  // Delete is locked initially; the backup checkbox is immediately usable.
   await expect(deleteButton).toBeDisabled();
-  await expect(backupCheckbox).toBeDisabled();
-
-  // Copying the key unlocks the backup checkbox.
-  await page.getByTestId("nsec-copy").click();
   await expect(backupCheckbox).toBeEnabled();
   await backupCheckbox.click();
 
@@ -61,24 +53,11 @@ test("delete button unlocks only after backup + typed phrase", async ({
   await expect(deleteButton).toBeDisabled();
 });
 
-test("reveal also unlocks the backup checkbox", async ({ page }) => {
-  await installMockBridge(page);
-  await page.goto("/");
-  await openSignOutDialog(page);
-
-  const backupCheckbox = page.getByTestId("signout-backup-confirm");
-  await expect(backupCheckbox).toBeDisabled();
-
-  await page.getByTestId("nsec-reveal-toggle").click();
-  await expect(backupCheckbox).toBeEnabled();
-});
-
 test("completing both gates invokes sign_out", async ({ page }) => {
   await installMockBridge(page);
   await page.goto("/");
   await openSignOutDialog(page);
 
-  await page.getByTestId("nsec-copy").click();
   await page.getByTestId("signout-backup-confirm").click();
   await page.getByTestId("signout-confirm-phrase").fill(CONFIRM_PHRASE);
 
@@ -104,16 +83,15 @@ test("cancel resets the gates for the next open", async ({ page }) => {
   await openSignOutDialog(page);
 
   // Satisfy both gates, then cancel.
-  await page.getByTestId("nsec-copy").click();
   await page.getByTestId("signout-backup-confirm").click();
   await page.getByTestId("signout-confirm-phrase").fill(CONFIRM_PHRASE);
   await page.getByRole("button", { name: "Cancel" }).click();
   await expect(page.getByRole("alertdialog")).not.toBeVisible();
 
-  // Reopen — everything must be locked again.
+  // Reopen — everything must be reset again.
   await page.getByTestId("signout-open-dialog").click();
   await expect(page.getByRole("alertdialog")).toBeVisible();
-  await expect(page.getByTestId("signout-backup-confirm")).toBeDisabled();
+  await expect(page.getByTestId("signout-backup-confirm")).not.toBeChecked();
   await expect(page.getByTestId("signout-confirm-phrase")).toHaveValue("");
   await expect(page.getByTestId("signout-confirm")).toBeDisabled();
 });
@@ -125,8 +103,8 @@ test("nsec load failure still allows sign-out (backup step degrades)", async ({
   await page.goto("/");
   await openSignOutDialog(page);
 
-  // Error shown in place of the key; checkbox is usable so the user is not
-  // permanently locked out of signing out.
+  // Error shown in place of the key; checkbox is still usable so the user is
+  // not locked out of signing out.
   await expect(page.getByTestId("signout-nsec-error")).toContainText(
     "Keychain locked",
   );

From 49f9c446c9e396ca078850379b1221b6d30ff50f Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 29 Jul 2026 13:10:01 -0700
Subject: [PATCH 19/21] fix(desktop): remove duplicate backup row divider

- Remove the explicit separator between backup actions so the identity card's existing divide-y styling renders a single border.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/src/features/settings/ui/EncryptedBackupRow.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/desktop/src/features/settings/ui/EncryptedBackupRow.tsx b/desktop/src/features/settings/ui/EncryptedBackupRow.tsx
index ddf95e6c06..ec3fb970d2 100644
--- a/desktop/src/features/settings/ui/EncryptedBackupRow.tsx
+++ b/desktop/src/features/settings/ui/EncryptedBackupRow.tsx
@@ -78,7 +78,6 @@ export function EncryptedBackupRow() {
           you saved before.
         </p>
       </ToolRow>
-      <div className="border-t border-border/60" />
       <ToolRow
         action="Test backup"
         description="Check a backup file and its password, and see which identity it unlocks."

From 2644b5e0cecc34db7b43185f9686bb7262c81f09 Mon Sep 17 00:00:00 2001
From: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
 <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@buzz.block.builderlab.xyz>
Date: Wed, 29 Jul 2026 13:45:10 -0700
Subject: [PATCH 20/21] chore(desktop): format identity backup tests

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/src-tauri/src/commands/identity_key_backup_tests.rs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/desktop/src-tauri/src/commands/identity_key_backup_tests.rs b/desktop/src-tauri/src/commands/identity_key_backup_tests.rs
index 54ccdab2f6..0b31f44bac 100644
--- a/desktop/src-tauri/src/commands/identity_key_backup_tests.rs
+++ b/desktop/src-tauri/src/commands/identity_key_backup_tests.rs
@@ -1,4 +1,3 @@
-
 use super::{create_and_persist_backup_with_log_n, verify_ncryptsec_backup_inner};
 use crate::app_state::build_app_state;
 use nostr::Keys;

From b8d582215b19a24260d932637cb25f3b6d566a70 Mon Sep 17 00:00:00 2001
From: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
 <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@buzz.block.builderlab.xyz>
Date: Wed, 29 Jul 2026 14:03:09 -0700
Subject: [PATCH 21/21] test(desktop): disambiguate onboarding back button

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/tests/e2e/onboarding-docked-cta-screenshots.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/desktop/tests/e2e/onboarding-docked-cta-screenshots.spec.ts b/desktop/tests/e2e/onboarding-docked-cta-screenshots.spec.ts
index 66965c7ef8..13aaf6e85b 100644
--- a/desktop/tests/e2e/onboarding-docked-cta-screenshots.spec.ts
+++ b/desktop/tests/e2e/onboarding-docked-cta-screenshots.spec.ts
@@ -46,7 +46,7 @@ test("machine onboarding: landing, backup, setup docked CTAs", async ({
   await waitForAnimations(page);
   await page.screenshot({ path: `${SHOT_DIR}/01b-enter-key.png` });
 
-  await page.getByRole("button", { name: "Back" }).click();
+  await page.getByRole("button", { name: "Back", exact: true }).click();
   await expect(
     page.getByRole("button", { name: "Create a new identity key" }),
   ).toBeVisible();