+ );
+}
diff --git a/desktop/src/features/onboarding/ui/BackupStep.tsx b/desktop/src/features/onboarding/ui/BackupStep.tsx
index ed2184baaa..99d9c6324d 100644
--- a/desktop/src/features/onboarding/ui/BackupStep.tsx
+++ b/desktop/src/features/onboarding/ui/BackupStep.tsx
@@ -1,183 +1,438 @@
-import { AlertTriangle, Info, RefreshCw } from "lucide-react";
+import { Check, Copy, Eye, EyeOff, Info, ShieldCheck } from "lucide-react";
+import { useReducedMotion } from "motion/react";
import * as React from "react";
import { getNsec } from "@/shared/api/tauriIdentity";
+import type { IdentityStorage } from "@/shared/api/types";
+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 { ONBOARDING_PRIMARY_CTA_CLASS } from "./OnboardingChrome";
+import {
+ ONBOARDING_PRIMARY_CTA_CLASS,
+ ONBOARDING_SECONDARY_CTA_CLASS,
+} from "./OnboardingChrome";
import { OnboardingFooter } from "./OnboardingFooter";
import {
type OnboardingTransitionDirection,
OnboardingSlideTransition,
} from "./OnboardingSlideTransition";
-import { NsecMaskedDisplay } from "./NsecMaskedDisplay";
+import { ONBOARDING_KEY_TEXT_CLASS } from "./NsecMaskedDisplay";
/**
- * Pure helper so the disabled logic can be unit-tested without a DOM.
- *
- * Disabled while loading (key not fetched yet) or after a failed load (only
- * the explicit "Skip for now" ghost advances past an error).
+ * 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.
*/
-export function backupNextDisabled({
- isLoading,
- loadError,
-}: {
- isLoading: boolean;
- loadError: string | null;
-}): boolean {
- return isLoading || loadError !== null;
+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";
+
+const BACKUP_OPTION_CLASS =
+ "flex min-h-48 w-full flex-col items-start justify-start px-6 py-5 text-left text-foreground";
+
+/** Viewing the key never blocks onboarding — Next is always actionable. */
+export function backupNextDisabled(): boolean {
+ return false;
}
type BackupStepProps = {
direction: OnboardingTransitionDirection;
+ identityStorage?: IdentityStorage;
onBack: () => void;
onNext: () => void;
+ onOpenPasswordBackup: () => void;
+ onShowOptions: () => void;
+ optionsExpanded: boolean;
+ returningFromSecurity: boolean;
};
/**
- * Onboarding backup step — shows the user their freshly created key so they
- * can save it somewhere safe. Only shown on the fresh-key path.
+ * Onboarding identity-key step — shows the freshly created key, then opens a
+ * dark backup-options state. Copy fetches the raw key only after an explicit
+ * click; password backup opens the separate security flow. Neither method
+ * blocks Next.
*/
-export function BackupStep({ direction, onBack, onNext }: BackupStepProps) {
+export function BackupStep({
+ direction,
+ identityStorage,
+ onBack,
+ onNext,
+ onOpenPasswordBackup,
+ onShowOptions,
+ optionsExpanded,
+ returningFromSecurity,
+}: BackupStepProps) {
+ const reduceMotion = useReducedMotion() ?? false;
+ const [created, setCreated] = React.useState(introPlayed || reduceMotion);
+ const [copyState, setCopyState] = React.useState<
+ "idle" | "copying" | "copied"
+ >("idle");
+ const [copyError, setCopyError] = React.useState(null);
const [nsec, setNsec] = React.useState(null);
- const [isLoading, setIsLoading] = React.useState(true);
- const [loadError, setLoadError] = React.useState(null);
+ const [isRevealed, setIsRevealed] = React.useState(false);
const cancelledRef = React.useRef(false);
+ const copiedTimerRef = React.useRef(null);
- 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(() => {
+ if (introPlayed) return;
+ if (reduceMotion) {
+ introPlayed = true;
+ setCreated(true);
+ return;
}
- }, []);
+ const timer = window.setTimeout(() => {
+ introPlayed = true;
+ setCreated(true);
+ }, INTRO_HOLD_MS);
+ return () => window.clearTimeout(timer);
+ }, [reduceMotion]);
React.useEffect(() => {
cancelledRef.current = false;
- void loadNsec();
return () => {
// Back-during-fetch: cancel any in-flight setState calls and clear the
// 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);
};
- }, [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],
+ );
+ const storageDescription =
+ identityStorage === "system-keyring"
+ ? "Buzz keeps your identity key in your system keychain. Your computer may ask for your password when Buzz needs to read the key."
+ : identityStorage === "local-file"
+ ? "Your system keychain wasn’t available, so Buzz keeps your identity key in a private file on this device."
+ : "Buzz keeps your identity key protected on this device. Make a separate backup in case you lose access.";
+ const storageTitle =
+ identityStorage === "system-keyring"
+ ? "Protected by your system keychain"
+ : identityStorage === "local-file"
+ ? "Stored in private device storage"
+ : "Protected in private device storage";
+ const introStorageDescription =
+ identityStorage === "system-keyring"
+ ? "Buzz keeps your identity key in your system keychain."
+ : identityStorage === "local-file"
+ ? "Buzz keeps your identity key in a private file on this device because the system keychain wasn’t available."
+ : "Your identity key is protected on this device.";
+
+ if (optionsExpanded) {
+ return (
+
+
+
+ Backup options
+
+
+ Your identity key works like a password for your Buzz account. Keep
+ a copy somewhere safe. You can create a backup file and lock it with
+ a password you can remember.
+
+
+
+
+
+
+ {storageTitle}
+
+ {storageDescription}
+
+
+
+
+
+ Saved in your password manager
+
+
+ Copy your identity key, then save it in a password manager like
+ 1Password.
+
+
+
+
+
+
+ Locked in a backup file
+
+
+ Create a backup file and choose a password you can remember.
+ You’ll need both to restore your account.
+
+
+
+
+
+ {copyError ? (
+
+ Could not retrieve your private key: {copyError}. You can continue
+ and find it later in Settings > Profile > Identity.
+
+ ) : null}
+
+
+ );
+ }
return (
-
- Your unique identity key has been created
+ {/* Plain string concat: cn()'s tailwind-merge misreads the custom
+ text-title size token as conflicting with text-foreground. */}
+
+ {created
+ ? "Your unique identity key has been created"
+ : "Creating your identity key"}
-
- This key is stored in your system keychain, but save it some place
- safe in case you ever need to restore your account.
-
-
-
-
- {isLoading ? (
-
-
- Loading your private key…
-
- ) : loadError ? (
-
-
-
-
- Could not retrieve your private key: {loadError}. You can
- continue and find it later in Settings > Profile >
- Identity.
-
-
-
- ) : nsec ? (
-
-
-
-
-
- ) : (
-
- No key available to back up.
-
- )}
-
- {nsec ? (
-
-
-
- Never share your private key. Anyone with this key can impersonate
- you and access everything in your account.
-
+ review backup options
+ {" "}
+ for ways to restore your account.
) : null}
-
-
+
+
+ ) : (
+
+
+
+
+
+
+ {isRevealed && nsec ? nsec : maskedKey}
+
+
+
+
+
+
+ {copyError ? (
+
+ Could not retrieve your private key: {copyError}. You can
+ continue and find it later in Settings > Profile >
+ Identity.
+
+ ) : null}
- {loadError ? (
+
+
+
+ Never share your private key. Anyone with this key can
+ impersonate you and access everything in your account.
+
+
+
+
+ )}
+
+ {created ? (
+
- ) : null}
-
-
+
+
+ ) : null}
);
}
diff --git a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
new file mode 100644
index 0000000000..9370d5c061
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
@@ -0,0 +1,745 @@
+import { Check, CircleHelp, Eye, EyeOff, FileKey2, FileUp } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import * as React from "react";
+import { createPortal } from "react-dom";
+
+import {
+ getNsec,
+ verifyNcryptsecBackup,
+ type BackupVerification,
+} from "@/shared/api/tauriIdentity";
+import { cn } from "@/shared/lib/cn";
+import { Button } from "@/shared/ui/button";
+import { Card } from "@/shared/ui/card";
+import { Input } from "@/shared/ui/input";
+import { PubKey } from "@/shared/ui/PubKey";
+import { Spinner } from "@/shared/ui/spinner";
+import {
+ ONBOARDING_SECURITY_PRIMARY_CTA_CLASS,
+ ONBOARDING_SECONDARY_CTA_CLASS,
+} from "./OnboardingChrome";
+
+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: 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,
+ ncryptsec: null,
+ result: null,
+};
+
+type BackupTestFlowProps = {
+ /** "spotlight" is the onboarding treatment; "boxed" fits settings cards. */
+ variant?: "spotlight" | "boxed";
+ /**
+ * 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;
+ saveError?: string | null;
+ /** Optional onboarding footer target for the verification CTA. */
+ verifyButtonPortal?: HTMLElement | null;
+ /** Host-owned progress so it survives this component unmounting. */
+ progress: BackupTestProgress;
+ onProgressChange: React.Dispatch>;
+ /** Fired once when the user completes the test successfully. */
+ onVerified?: () => void;
+};
+
+const BURST_EMOJIS = ["🎉", "✨", "🐝", "🍯", "🔑", "💛"] as const;
+const BURST_PARTICLE_COUNT = 18;
+const VERIFICATION_CONNECTOR_DOTS = [
+ "verification-dot-1",
+ "verification-dot-2",
+ "verification-dot-3",
+ "verification-dot-4",
+] as const;
+const VERIFICATION_DOT_ANIMATION = {
+ opacity: [0.35, 1, 0.35],
+ scale: [0.85, 1.25, 0.85],
+};
+const VERIFICATION_DOT_TRANSITION = {
+ duration: 0.7,
+ ease: "easeInOut" as const,
+ repeat: Number.POSITIVE_INFINITY,
+ repeatDelay: 1.2,
+};
+const PRIVATE_KEY_MASK = Array.from({ length: 63 }, () => "•").join("\u200b");
+
+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(
+ () =>
+ 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 (
+
+ );
+}
diff --git a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
new file mode 100644
index 0000000000..3d69150049
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
@@ -0,0 +1,139 @@
+import { motion, useReducedMotion } from "motion/react";
+import * as React from "react";
+
+import { Button } from "@/shared/ui/button";
+import {
+ ONBOARDING_SECURITY_PRIMARY_CTA_CLASS,
+ ONBOARDING_SECONDARY_CTA_CLASS,
+} from "./OnboardingChrome";
+import { OnboardingFooter } from "./OnboardingFooter";
+import {
+ type OnboardingTransitionDirection,
+ OnboardingSlideTransition,
+} from "./OnboardingSlideTransition";
+import {
+ type EncryptedBackupSession,
+ EncryptedBackupCreator,
+} from "./EncryptedBackupCreator";
+
+type DownloadKeyStepProps = {
+ direction: OnboardingTransitionDirection;
+ /** Backup state owned by the parent flow across the creation and test views. */
+ session: EncryptedBackupSession;
+ onBack: () => void;
+};
+
+/**
+ * Password-backup security subview within the identity-key onboarding step.
+ * 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,
+ session,
+ onBack,
+}: DownloadKeyStepProps) {
+ const reduceMotion = useReducedMotion() ?? false;
+ // Once the encrypted payload is saved, the creator advances to its guided
+ // backup test while this surface keeps its own navigation.
+ const hasCreated = session.created;
+ const hasVerifiedBackup = session.verified;
+ const hasSelectedBackup = session.test.stage === "password";
+ const [primaryActionSlot, setPrimaryActionSlot] =
+ React.useState(null);
+
+ return (
+
+
+ {/* Plain string concat: cn()'s tailwind-merge misreads the custom
+ text-title size token as conflicting with text-foreground. */}
+
+ {hasVerifiedBackup
+ ? "Your backup is verified"
+ : hasSelectedBackup
+ ? "That’s your backup file"
+ : hasCreated
+ ? "Optionally, test your backup"
+ : "Backup your key with a password"}
+
+
+ {hasVerifiedBackup
+ ? "Your file and password can restore your identity."
+ : hasSelectedBackup
+ ? "Now enter your password to prove you can unlock it."
+ : hasCreated
+ ? "Learn how 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."}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
new file mode 100644
index 0000000000..bb76166bd7
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
@@ -0,0 +1,885 @@
+import { AlertTriangle, Eye, EyeOff, RefreshCw } from "lucide-react";
+import * as React from "react";
+import { createPortal } from "react-dom";
+
+import {
+ createNcryptsecBackup,
+ generateBackupPassphrase,
+ saveNcryptsecCopy,
+} from "@/shared/api/tauriIdentity";
+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 {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from "@/shared/ui/alert-dialog";
+import {
+ downloadDisabled,
+ passphraseIssue,
+ pendingEncryptPassphrase,
+ encryptedBackupReducer,
+ initialEncryptedBackupState,
+ MIN_PASSPHRASE_LEN,
+ type EncryptedBackupEvent,
+ type EncryptedBackupState,
+} from "../lib/encryptedBackup";
+import {
+ type BackupTestProgress,
+ BackupTestFlow,
+ initialBackupTestProgress,
+} from "./BackupTestFlow";
+import { BackupPasswordTimeline } from "./BackupPasswordTimeline";
+import {
+ ONBOARDING_SECURITY_PRIMARY_CTA_CLASS,
+ ONBOARDING_SECONDARY_CTA_CLASS,
+} from "./OnboardingChrome";
+
+/** 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;
+
+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 (
+
+
+ {column.map((row) => (
+
+ {row.message}
+
+ ))}
+
+
+ );
+}
+
+/**
+ * Everything about an in-progress backup that must survive this component
+ * 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
+ * `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;
+ /**
+ * 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>;
+ savedPath: string | null;
+ setSavedPath: React.Dispatch>;
+ /** The committed blob a save was already kicked off for (save-once guard). */
+ savedForRef: React.MutableRefObject;
+ test: BackupTestProgress;
+ setTest: React.Dispatch>;
+};
+
+/** 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(null);
+ const savedForRef = React.useRef(null);
+ const [test, setTest] = React.useState(
+ initialBackupTestProgress,
+ );
+ return React.useMemo(
+ () => ({
+ state,
+ dispatch,
+ created: state.ncryptsec !== null && savedPath !== null,
+ verified,
+ setVerified,
+ savedPath,
+ setSavedPath,
+ savedForRef,
+ test,
+ setTest,
+ }),
+ [state, verified, savedPath, test],
+ );
+}
+
+/**
+ * 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,
+): void {
+ session.dispatch({ type: "back-to-password" });
+ session.setVerified(false);
+ session.setSavedPath(null);
+ session.setTest(initialBackupTestProgress);
+}
+
+/** Discard all backup-creation and verification progress. */
+export function resetEncryptedBackupSession(
+ session: EncryptedBackupSession,
+): void {
+ session.dispatch({ type: "start-new-backup" });
+ 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";
+ /**
+ * When set, the "Download" button is portaled into this element instead of
+ * rendering inline.
+ */
+ createButtonPortal?: HTMLElement | null;
+ /** Optional onboarding footer target for the guided-test verification CTA. */
+ verifyButtonPortal?: 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. */
+ 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;
+};
+
+/**
+ * 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,
+ onRequestGenerate,
+ onGenerated,
+ securityTheme = false,
+}: {
+ disabled?: boolean;
+ onRequestGenerate?: () => void;
+ onGenerated: (value: string) => void;
+ securityTheme?: boolean;
+}) {
+ const [open, setOpen] = React.useState(false);
+ const [words, setWords] = React.useState(DEFAULT_GENERATED_WORDS);
+ const [separator, setSeparator] = React.useState(DEFAULT_SEPARATOR);
+ const [error, setError] = React.useState(null);
+ const anchorRef = React.useRef(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 (
+
+ {/* 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. */}
+
+
+
+ {
+ // 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()}
+ >
+
+ );
+ }
+ // 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 (
+
+ );
+ // `undefined` = inline (settings); `null` = slot not mounted yet
+ // (skip a frame rather than flashing the button inline).
+ if (createButtonPortal === undefined)
+ return
{createButton}
;
+ return createButtonPortal
+ ? createPortal(createButton, createButtonPortal)
+ : null;
+ })()}
+
+
+
+ Create a new backup 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.
+
+
+
+
+ Keep current backup
+
+ {
+ dispatch({ type: "start-new-backup" });
+ setSavedPath(null);
+ savedForRef.current = null;
+ setTest(initialBackupTestProgress);
+ setIsRevealed(false);
+ }}
+ >
+ Start with a new password
+
+
+
+
+
+ );
+}
diff --git a/desktop/src/features/onboarding/ui/KeyringLockedScreen.tsx b/desktop/src/features/onboarding/ui/KeyringLockedScreen.tsx
index 0376fc9709..a6a02f38c0 100644
--- a/desktop/src/features/onboarding/ui/KeyringLockedScreen.tsx
+++ b/desktop/src/features/onboarding/ui/KeyringLockedScreen.tsx
@@ -22,8 +22,8 @@ export function KeyringLockedScreen() {
}, []);
const handleImport = React.useCallback(
- async (nsec: string) => {
- const identity = await importIdentity(nsec);
+ async (nsec: string, password?: string) => {
+ const identity = await importIdentity(nsec, password);
// Update the identity query cache so useIdentityQuery observers see
// locked: false. The bootedLocked latch in hooks.ts will then route
// to RelaunchRequiredScreen via bootedLocked && !identityLocked.
diff --git a/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx b/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
index ca87c76636..cee17c68f8 100644
--- a/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
+++ b/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx
@@ -1,20 +1,33 @@
import * as React from "react";
import type { QueryClient } from "@tanstack/react-query";
+import { ArrowUp } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
import {
getIdentity,
importIdentity,
persistCurrentIdentity,
} from "@/shared/api/tauriIdentity";
+import type { IdentityStorage } from "@/shared/api/types";
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 {
+ backupSessionToPasswordEntry,
+ resetEncryptedBackupSession,
+ useEncryptedBackupSession,
+} from "./EncryptedBackupCreator";
import { IdentityKeyHelpDialog } from "./IdentityKeyHelpDialog";
import { LandingBees } from "./LandingBees";
-import { NostrKeyImportForm } from "./NostrKeyImportForm";
+import {
+ NostrKeyImportForm,
+ type NostrKeyImportStage,
+} from "./NostrKeyImportForm";
import {
ONBOARDING_LANDING_CTA_CLASS,
+ ONBOARDING_SECONDARY_CTA_CLASS,
OnboardingChrome,
} from "./OnboardingChrome";
import { OnboardingFooterProvider } from "./OnboardingFooter";
@@ -28,6 +41,8 @@ export type MachineOnboardingPage =
| "setup"
| "config";
+type BackupSubview = "created" | "options" | "password";
+
/** A pending navigation the parent should execute after RouterProvider mounts. */
export type PostOnboardingNavigation = {
to: string;
@@ -61,10 +76,27 @@ export function MachineOnboardingFlow({
const [error, setError] = React.useState(null);
const [isPending, setIsPending] = React.useState(false);
const [identityWasImported, setIdentityWasImported] = React.useState(false);
+ const [keyImportStage, setKeyImportStage] =
+ React.useState("key-entry");
const [selectedPubkey, setSelectedPubkey] = React.useState(
null,
);
+ const [identityStorage, setIdentityStorage] = React.useState<
+ IdentityStorage | undefined
+ >();
const [readyRuntimeIds, setReadyRuntimeIds] = React.useState([]);
+ const [backupSubview, setBackupSubview] =
+ React.useState("created");
+ const [backupDirection, setBackupDirection] = React.useState<
+ "forward" | "backward"
+ >("forward");
+ const [returningFromSecurity, setReturningFromSecurity] =
+ React.useState(false);
+ // Owned here so switching between the yellow onboarding view and the dark
+ // security subview keeps the created backup, password, and test progress.
+ const backupSession = useEncryptedBackupSession();
+ const reduceMotion = useReducedMotion() ?? false;
+ const isSecuritySubview = page === "backup" && backupSubview !== "created";
const handleReadyRuntimeIdsChange = React.useCallback(
(runtimeIds: readonly string[]) => {
setReadyRuntimeIds(Array.from(new Set(runtimeIds)));
@@ -79,6 +111,10 @@ export function MachineOnboardingFlow({
const identity = await getIdentity();
queryClient.setQueryData(["identity"], identity);
setSelectedPubkey(identity.pubkey);
+ setIdentityStorage(identity.storage);
+ setBackupDirection("forward");
+ setReturningFromSecurity(false);
+ setBackupSubview("created");
setPage("backup");
} catch (cause) {
setError(
@@ -101,6 +137,10 @@ export function MachineOnboardingFlow({
const identity = await persistCurrentIdentity();
queryClient.setQueryData(["identity"], identity);
setSelectedPubkey(identity.pubkey);
+ setIdentityStorage(identity.storage);
+ setBackupDirection("forward");
+ setReturningFromSecurity(false);
+ setBackupSubview("created");
setPage("backup");
} catch (cause) {
setError(
@@ -112,8 +152,8 @@ export function MachineOnboardingFlow({
}, [queryClient]);
const importExistingIdentity = React.useCallback(
- async (nsec: string) => {
- const identity = await importIdentity(nsec);
+ async (nsec: string, password?: string) => {
+ const identity = await importIdentity(nsec, password);
continueWithIdentity(identity.pubkey);
queryClient.setQueryData(["identity"], identity);
setIdentityWasImported(true);
@@ -126,6 +166,8 @@ export function MachineOnboardingFlow({
return (