@peers-app/peers-ui 0.25.14 → 0.25.16

package/dist/globals.d.ts

@@ -25,9 +25,9 @@ export declare const groups: import("@peers-app/peers-sdk").Observable<{
     description: string;
     publicKey: string;
     signature: string;
+    publicBoxKey: string;
     groupId: string;
     founderUserId: string;
-    publicBoxKey: string;
     disabled?: boolean | undefined;
     iconClassName?: string | undefined;
     publicRole?: import("@peers-app/peers-sdk").GroupMemberRole | undefined;

package/dist/screens/account/account-screen.js

@@ -53,12 +53,319 @@ function AccountScreen() {
     if (!me) {
         return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-xxl p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("h4", { className: "mb-1 d-flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-circle" }), "Account"] }), (0, jsx_runtime_1.jsx)("div", { className: "small text-muted", children: "Your public identity and account-level services" })] }), error && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger alert-dismissible", role: "alert", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-exclamation-triangle me-2" }), error, (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn-close", onClick: () => setError(null), "aria-label": "Close" })] })), success && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-success alert-dismissible", role: "alert", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle me-2" }), success, (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn-close", onClick: () => setSuccess(null), "aria-label": "Close" })] })), (0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body d-flex align-items-center gap-3 flex-wrap", children: [(0, jsx_runtime_1.jsx)("span", { className: "rounded-circle bg-primary-subtle text-primary-emphasis d-inline-flex align-items-center justify-content-center fs-4 fw-semibold", style: { width: 58, height: 58 }, "aria-hidden": "true", children: profileInitials(me.name) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-grow-1", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title mb-1", children: me.name || "Unnamed user" }), (0, jsx_runtime_1.jsx)("div", { className: "small text-muted", children: "Peers identity" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 flex-wrap", children: [(0, jsx_runtime_1.jsx)("a", { href: "#settings", className: "btn btn-outline-secondary btn-sm", children: "Edit display name" }), (0, jsx_runtime_1.jsx)("a", { href: "#identity/devices", className: "btn btn-outline-primary btn-sm", children: "Manage devices" }), (0, jsx_runtime_1.jsx)("a", { href: "#identity/devices/pair", className: "btn btn-primary btn-sm", children: "Add device" })] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Technical identity" }), (0, jsx_runtime_1.jsx)("p", { className: "small text-muted", children: "Share these values only when diagnosing identity or connection problems." }), (0, jsx_runtime_1.jsx)(TechnicalValue, { label: "User ID", value: me.userId, help: "Your stable identifier across Peers." }), (0, jsx_runtime_1.jsx)(TechnicalValue, { label: "Signing key", value: me.publicKey, help: "Other people use this public key to verify your signatures." }), (0, jsx_runtime_1.jsx)(TechnicalValue, { label: "Encryption key", value: me.publicBoxKey, help: "Other people use this public key to encrypt data for you." }), (0, jsx_runtime_1.jsx)(TechnicalValue, { label: "Current device ID", value: deviceId || "Not available", help: "Identifies this installation on Peers networks." })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "card", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("h5", { className: "card-title d-flex align-items-center gap-2", children: ["Peers Services Registration", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: INFO_TEXT })] }), isRegistered ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle-fill text-success", style: { fontSize: "1.2em" } }), (0, jsx_runtime_1.jsx)("span", { children: "Registered" })] }), (0, jsx_runtime_1.jsxs)("small", { className: "text-muted d-block mb-3", children: ["Registered on", " ", new Date(registrationStatus).toLocaleDateString(undefined, {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-xxl p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("h4", { className: "mb-1 d-flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-circle" }), "Account"] }), (0, jsx_runtime_1.jsx)("div", { className: "small text-muted", children: "Your public identity and account-level services" })] }), error && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger alert-dismissible", role: "alert", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-exclamation-triangle me-2" }), error, (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn-close", onClick: () => setError(null), "aria-label": "Close" })] })), success && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-success alert-dismissible", role: "alert", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle me-2" }), success, (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn-close", onClick: () => setSuccess(null), "aria-label": "Close" })] })), (0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body d-flex align-items-center gap-3 flex-wrap", children: [(0, jsx_runtime_1.jsx)("span", { className: "rounded-circle bg-primary-subtle text-primary-emphasis d-inline-flex align-items-center justify-content-center fs-4 fw-semibold", style: { width: 58, height: 58 }, "aria-hidden": "true", children: profileInitials(me.name) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-grow-1", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title mb-1", children: me.name || "Unnamed user" }), (0, jsx_runtime_1.jsx)("div", { className: "small text-muted", children: "Peers identity" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 flex-wrap", children: [(0, jsx_runtime_1.jsx)("a", { href: "#settings", className: "btn btn-outline-secondary btn-sm", children: "Edit display name" }), (0, jsx_runtime_1.jsx)("a", { href: "#identity/devices", className: "btn btn-outline-primary btn-sm", children: "Manage devices" }), (0, jsx_runtime_1.jsx)("a", { href: "#identity/devices/pair", className: "btn btn-primary btn-sm", children: "Add device" })] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Technical identity" }), (0, jsx_runtime_1.jsx)("p", { className: "small text-muted", children: "Share these values only when diagnosing identity or connection problems." }), (0, jsx_runtime_1.jsx)(TechnicalValue, { label: "User ID", value: me.userId, help: "Your stable identifier across Peers." }), (0, jsx_runtime_1.jsx)(TechnicalValue, { label: "Signing key", value: me.publicKey, help: "Other people use this public key to verify your signatures." }), (0, jsx_runtime_1.jsx)(TechnicalValue, { label: "Encryption key", value: me.publicBoxKey, help: "Other people use this public key to encrypt data for you." }), (0, jsx_runtime_1.jsx)(TechnicalValue, { label: "Current device ID", value: deviceId || "Not available", help: "Identifies this installation on Peers networks." })] }) }), (0, jsx_runtime_1.jsx)(RecoveryNotice, {}), (0, jsx_runtime_1.jsx)(SigningKeyCard, {}), (0, jsx_runtime_1.jsx)(RecoveryEmailCard, {}), (0, jsx_runtime_1.jsx)(AnchorsCard, {}), (0, jsx_runtime_1.jsx)(PasskeyCard, {}), (0, jsx_runtime_1.jsx)("div", { className: "card", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("h5", { className: "card-title d-flex align-items-center gap-2", children: ["Peers Services Registration", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: INFO_TEXT })] }), isRegistered ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle-fill text-success", style: { fontSize: "1.2em" } }), (0, jsx_runtime_1.jsx)("span", { children: "Registered" })] }), (0, jsx_runtime_1.jsxs)("small", { className: "text-muted d-block mb-3", children: ["Registered on", " ", new Date(registrationStatus).toLocaleDateString(undefined, {
                                             year: "numeric",
                                             month: "long",
                                             day: "numeric",
                                         })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary btn-sm", onClick: handleRegister, disabled: isRegistering, children: isRegistering ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-2" }), "Refreshing..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-arrow-clockwise me-2" }), "Refresh Token"] })) })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-3", children: "Register your account to enable cloud-powered features like the AI assistant." }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary", onClick: handleRegister, disabled: isRegistering, children: isRegistering ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-2" }), "Registering..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-cloud-upload me-2" }), "Register Account"] })) })] }))] }) })] }));
 }
+const ROTATE_INFO = `### Rotating your signing key
+
+Your signing key is how other people and your own devices verify that something came from you.
+Replacing it needs an **anchor** already on your profile. A recovery email lets this device
+publish the new key to Peers Services. An https anchor cannot be written to from here, so
+**Rotate signing key** shows a document for you to place there. The key on this device changes
+only after every anchor on your profile lists the new key.
+
+The database key is stored separately, so a rotation does not re-encrypt the database.`;
+/** A recovery waiting on the delay, or held because a device contested it. */
+function RecoveryNotice() {
+    const [notices] = (0, hooks_1.useObservable)(peers_sdk_1.identityRecoveryNoticesVar);
+    const [busy, setBusy] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    if (!notices || notices.length === 0)
+        return null;
+    const act = async (label, action) => {
+        setBusy(label);
+        setError(null);
+        try {
+            await action();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Key recovery" }), notices.map((notice) => ((0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("p", { className: "mb-2", children: [notice.own
+                                    ? "A new key was published for this account without your current key's signature."
+                                    : "A contact's key is being recovered.", " ", notice.contested
+                                    ? "A device that holds the current key objects. The new key stays untrusted until you accept it."
+                                    : `Peers adopt it after ${new Date(notice.readyAt).toLocaleString()} unless someone contests it.`] }), (0, jsx_runtime_1.jsx)("code", { className: "small text-break", children: notice.pendingPublicKey }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2", children: notice.own ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-warning btn-sm", disabled: busy !== null, onClick: () => act(notice.pendingPublicKey, async () => {
+                                    const tools = await (0, identity_ipc_1.identityTools)();
+                                    await tools.contestRecovery({ pendingKey: notice.pendingPublicKey });
+                                }), children: busy === notice.pendingPublicKey ? "Sending..." : "Contest" })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary btn-sm", disabled: busy !== null, onClick: () => act(notice.pendingPublicKey, async () => {
+                                    const tools = await (0, identity_ipc_1.identityTools)();
+                                    await tools.acceptRecovery({
+                                        userId: notice.userId,
+                                        pendingKey: notice.pendingPublicKey,
+                                    });
+                                }), children: busy === notice.pendingPublicKey ? "Accepting..." : "Accept the new key" })) })] }, `${notice.userId}:${notice.pendingPublicKey}`))), error && (0, jsx_runtime_1.jsx)("p", { className: "alert alert-danger mb-0", children: error })] }) }));
+}
+function bytesFromBase64Url(value) {
+    const padded = value.replace(/-/g, "+").replace(/_/g, "/");
+    const binary = atob(padded);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++)
+        bytes[i] = binary.charCodeAt(i);
+    return bytes.buffer;
+}
+function base64UrlFromBytes(buffer) {
+    const bytes = new Uint8Array(buffer);
+    let binary = "";
+    for (const byte of bytes)
+        binary += String.fromCharCode(byte);
+    return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function credentialJson(credential) {
+    const withJson = credential;
+    if (typeof withJson.toJSON === "function")
+        return withJson.toJSON();
+    const response = credential.response;
+    const body = {
+        clientDataJSON: base64UrlFromBytes(response.clientDataJSON),
+    };
+    if ("attestationObject" in response) {
+        body.attestationObject = base64UrlFromBytes(response.attestationObject);
+    }
+    if ("authenticatorData" in response && "signature" in response) {
+        const assertion = response;
+        body.authenticatorData = base64UrlFromBytes(assertion.authenticatorData);
+        body.signature = base64UrlFromBytes(assertion.signature);
+    }
+    return {
+        id: credential.id,
+        rawId: base64UrlFromBytes(credential.rawId),
+        type: credential.type,
+        response: body,
+        clientExtensionResults: credential.getClientExtensionResults(),
+    };
+}
+/** Add or remove an anchor by publishing the new list at the anchors already on record. */
+function AnchorsCard() {
+    const info = (0, hooks_1.usePromise)(async () => (await (0, identity_ipc_1.identityTools)()).getKeyInfo(), undefined, []);
+    const [anchors, setAnchors] = (0, react_1.useState)(null);
+    const [url, setUrl] = (0, react_1.useState)("");
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const shown = anchors ?? info?.anchors?.onRecord ?? [];
+    const publish = async (next) => {
+        setBusy(true);
+        setError(null);
+        try {
+            const tools = await (0, identity_ipc_1.identityTools)();
+            const saved = await tools.setAnchors({ anchors: next });
+            setAnchors(saved.anchors);
+            setUrl("");
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Anchors" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "Peers ask these places before they believe a different key. Adding one publishes the new list at an anchor already here. An https anchor has to be updated first. Removing the last one means a lost key cannot be recovered." }), shown.length === 0 && (0, jsx_runtime_1.jsx)("p", { children: "None yet." }), (0, jsx_runtime_1.jsx)("ul", { className: "list-unstyled", children: shown.map((anchor) => ((0, jsx_runtime_1.jsxs)("li", { className: "d-flex justify-content-between mb-2", children: [(0, jsx_runtime_1.jsx)("code", { className: "small text-break", children: anchor.url }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-danger btn-sm ms-2", disabled: busy, onClick: () => publish(shown.filter((item) => item.url !== anchor.url)), children: "Remove" })] }, `${anchor.type}:${anchor.url}`))) }), (0, jsx_runtime_1.jsxs)("div", { className: "input-group", children: [(0, jsx_runtime_1.jsx)("input", { className: "form-control", placeholder: "https://example.com/.well-known/peers-identity.json", value: url, onChange: (event) => setUrl(event.target.value) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary", disabled: busy || url.trim() === "", onClick: () => publish([...shown, { type: "https", url: url.trim() }]), children: busy ? "Publishing..." : "Add" })] }), error && (0, jsx_runtime_1.jsx)("p", { className: "alert alert-danger mt-3 mb-0", children: error })] }) }));
+}
+/** Bind a passkey that can open an anchor-write session. */
+function PasskeyCard() {
+    // A passkey is bound to a website. The Electron renderer loads from a file, which has no
+    // host; the registry refuses that origin and the browser would too.
+    const onWebsite = typeof window !== "undefined" && /^https?:$/.test(window.location.protocol);
+    const supported = onWebsite && typeof PublicKeyCredential !== "undefined";
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    const [message, setMessage] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    const run = async (action) => {
+        setBusy(true);
+        setError(null);
+        setMessage(null);
+        try {
+            const tools = await (0, identity_ipc_1.identityTools)();
+            const origin = window.location.origin;
+            if (action === "register") {
+                const started = await tools.passkeyRegisterStart({ origin });
+                const options = started.options;
+                const credential = (await navigator.credentials.create({
+                    publicKey: {
+                        ...options,
+                        challenge: bytesFromBase64Url(options.challenge),
+                        user: { ...options.user, id: bytesFromBase64Url(options.user.id) },
+                        excludeCredentials: options.excludeCredentials?.map((item) => ({
+                            ...item,
+                            id: bytesFromBase64Url(item.id),
+                        })),
+                    },
+                }));
+                if (!credential)
+                    throw new Error("No passkey was created");
+                await tools.passkeyRegisterFinish({ response: credentialJson(credential) });
+                setMessage("Passkey saved. It can open an anchor session without the signing key.");
+            }
+            else {
+                const started = await tools.passkeyAuthStart({ origin });
+                const options = started.options;
+                const credential = (await navigator.credentials.get({
+                    publicKey: {
+                        ...options,
+                        challenge: bytesFromBase64Url(options.challenge),
+                        allowCredentials: options.allowCredentials?.map((item) => ({
+                            ...item,
+                            id: bytesFromBase64Url(item.id),
+                        })),
+                    },
+                }));
+                if (!credential)
+                    throw new Error("No passkey was used");
+                const session = await tools.passkeyAuthFinish({ response: credentialJson(credential) });
+                const minutes = Math.round(session.expiresIn / 60);
+                setMessage(`Anchor session open for about ${minutes} minutes.`);
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Passkey" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "A passkey opens the same short session as the recovery email. It does not replace the signing key. This page has to be served on the passkey's site." }), supported ? ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary btn-sm", disabled: busy, onClick: () => run("register"), children: busy ? "Waiting..." : "Add a passkey" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary btn-sm", disabled: busy, onClick: () => run("session"), children: "Use passkey" })] })) : ((0, jsx_runtime_1.jsx)("p", { className: "mb-0", children: onWebsite
+                        ? "This browser cannot create a passkey."
+                        : "This window is not a website, so it cannot hold a passkey. Open your account in the web app to add or use one." })), message && (0, jsx_runtime_1.jsx)("p", { className: "mt-3 mb-0", children: message }), error && (0, jsx_runtime_1.jsx)("p", { className: "alert alert-danger mt-3 mb-0", children: error })] }) }));
+}
+/** Current signing key, previous keys, on-record anchors, and manual rotation. */
+function SigningKeyCard() {
+    const info = (0, hooks_1.usePromise)(() => (0, identity_ipc_1.identityTools)().then((tools) => tools.getKeyInfo()));
+    const [rotatedAway] = (0, hooks_1.useObservable)(peers_sdk_1.identityRotatedAwayVar);
+    const [manualDocument, setManualDocument] = (0, react_1.useState)(null);
+    const [busy, setBusy] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    // Writes through every anchor that has a writer. When an anchor on record has none (an
+    // https document) the host hands the document back first; confirm polls until every
+    // anchor lists the new key. A committed rotation restarts the host.
+    const prepare = async () => {
+        setBusy("prepare");
+        setError(null);
+        try {
+            const tools = await (0, identity_ipc_1.identityTools)();
+            const result = await tools.rotateKey({ publish: "anchors", confirm: false });
+            if (result.committed)
+                return;
+            setManualDocument(JSON.stringify(result.manualDocument, null, 2));
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const confirm = async () => {
+        setBusy("confirm");
+        setError(null);
+        try {
+            const tools = await (0, identity_ipc_1.identityTools)();
+            await tools.rotateKey({ publish: "anchors", confirm: true });
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+            setBusy(null);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("h5", { className: "card-title d-flex align-items-center gap-2", children: ["Signing key", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: ROTATE_INFO })] }), rotatedAway && ((0, jsx_runtime_1.jsxs)("p", { className: "alert alert-warning", children: ["This device holds an old key. Pair it again. The anchors confirmed", " ", (0, jsx_runtime_1.jsx)("code", { children: rotatedAway.newPublicKey }), "."] })), !info ? ((0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(KeyStatusList, { info: info }), info.canRotate ? ((0, jsx_runtime_1.jsxs)("div", { className: "mt-3", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary btn-sm", onClick: prepare, disabled: busy !== null, children: busy === "prepare" ? "Rotating..." : "Rotate signing key" }), manualDocument && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("pre", { className: "small mt-3 mb-2 text-break", children: manualDocument }), (0, jsx_runtime_1.jsx)("p", { className: "small text-muted", children: "Place this document at every https anchor listed above, then confirm. This device waits until every anchor lists the new key before it changes anything." }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary btn-sm", onClick: confirm, disabled: busy !== null, children: busy === "confirm" ? "Waiting for the anchors..." : "I've published this" })] }))] })) : ((0, jsx_runtime_1.jsx)("p", { className: "alert alert-secondary mt-3 mb-0", children: "This host's identity is fixed at startup and cannot be rotated here." })), error && (0, jsx_runtime_1.jsx)("p", { className: "alert alert-danger mt-3 mb-0", children: error })] }))] }) }));
+}
+const RECOVERY_INFO = `### Recovery email
+
+This mailbox is how Peers Services agrees to publish a new key. The code proves you can read
+the mailbox. The signing key is still what other people verify.
+
+Without a recovery email, Peers Services refuses a new key. **Prepare manual rotation** still
+works if another anchor is on your profile. If you lose the signing key and have no recovery
+email, there is no way back into this account.`;
+/** Bind, confirm, and use a recovery email to publish a key rotation. */
+function RecoveryEmailCard() {
+    const current = (0, hooks_1.usePromise)(() => (0, identity_ipc_1.identityTools)()
+        .then((tools) => tools.getRecoveryEmail())
+        .catch(() => ({ email: undefined })));
+    const [email, setEmail] = (0, react_1.useState)("");
+    const [code, setCode] = (0, react_1.useState)("");
+    const [bound, setBound] = (0, react_1.useState)(undefined);
+    const [busy, setBusy] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [notice, setNotice] = (0, react_1.useState)(null);
+    const shown = bound === undefined ? (current?.email ?? "") : (bound ?? "");
+    const run = async (label, action) => {
+        setBusy(label);
+        setError(null);
+        setNotice(null);
+        try {
+            setNotice(await action());
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("h5", { className: "card-title d-flex align-items-center gap-2", children: ["Recovery email", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: RECOVERY_INFO })] }), shown ? ((0, jsx_runtime_1.jsxs)("p", { className: "mb-3", children: ["Bound to ", (0, jsx_runtime_1.jsx)("strong", { children: shown })] })) : ((0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-3", children: "Optional. Bind one if you want Peers Services to accept a new signing key." })), !shown && ((0, jsx_runtime_1.jsx)("input", { className: "form-control form-control-sm mb-2", type: "email", placeholder: "you@example.com", value: email, onChange: (event) => setEmail(event.target.value), disabled: busy !== null })), (0, jsx_runtime_1.jsx)("input", { className: "form-control form-control-sm mb-2", inputMode: "numeric", placeholder: "Code from the email", value: code, onChange: (event) => setCode(event.target.value), disabled: busy !== null }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex flex-wrap gap-2", children: [!shown && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary btn-sm", disabled: busy !== null || email.trim() === "", onClick: () => run("bind", async () => {
+                                        const tools = await (0, identity_ipc_1.identityTools)();
+                                        await tools.bindEmailStart({ email: email.trim() });
+                                        return `A code was sent to ${email.trim()}.`;
+                                    }), children: busy === "bind" ? "Sending..." : "Send bind code" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary btn-sm", disabled: busy !== null || code.trim() === "", onClick: () => run("verify", async () => {
+                                        const tools = await (0, identity_ipc_1.identityTools)();
+                                        const verified = await tools.bindEmailVerify({
+                                            email: email.trim(),
+                                            code: code.trim(),
+                                        });
+                                        setBound(verified.email);
+                                        setCode("");
+                                        return `Recovery email saved: ${verified.email}`;
+                                    }), children: busy === "verify" ? "Checking..." : "Verify" })] })), shown && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary btn-sm", disabled: busy !== null, onClick: () => run("session", async () => {
+                                        const tools = await (0, identity_ipc_1.identityTools)();
+                                        await tools.startAnchorSession();
+                                        return "A code was sent to the recovery email.";
+                                    }), children: busy === "session" ? "Sending..." : "Send rotation code" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary btn-sm", disabled: busy !== null || code.trim() === "", onClick: () => run("confirm", async () => {
+                                        const tools = await (0, identity_ipc_1.identityTools)();
+                                        const session = await tools.confirmAnchorSession({ code: code.trim() });
+                                        setCode("");
+                                        const minutes = Math.max(1, Math.round(session.expiresIn / 60));
+                                        return `Session open for about ${minutes} minutes. You can rotate now.`;
+                                    }), children: busy === "confirm" ? "Checking..." : "Open session" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary btn-sm", disabled: busy !== null, onClick: () => run("rotate", async () => {
+                                        const tools = await (0, identity_ipc_1.identityTools)();
+                                        const result = await tools.rotateKey({ publish: "anchors" });
+                                        return `Rotated to ${result.newPublicKey}. This host will restart.`;
+                                    }), children: busy === "rotate" ? "Rotating..." : "Rotate signing key" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-link btn-sm", disabled: busy !== null, onClick: () => run("unbind", async () => {
+                                        const tools = await (0, identity_ipc_1.identityTools)();
+                                        await tools.unbindEmail();
+                                        setBound(null);
+                                        return "Recovery email removed.";
+                                    }), children: "Remove" })] }))] }), notice && (0, jsx_runtime_1.jsx)("p", { className: "alert alert-success mt-3 mb-0", children: notice }), error && (0, jsx_runtime_1.jsx)("p", { className: "alert alert-danger mt-3 mb-0", children: error })] }) }));
+}
+function KeyStatusList({ info }) {
+    const registryStatus = (publicKey) => info.registry?.keys?.find((k) => k.publicKey === publicKey)?.status;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "small", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2 flex-wrap", children: [(0, jsx_runtime_1.jsx)("code", { className: "text-break", children: info.publicKey }), (0, jsx_runtime_1.jsx)("span", { className: "badge text-bg-success", children: "current" }), (0, jsx_runtime_1.jsx)(RegistryBadge, { status: registryStatus(info.publicKey) })] }), info.previousPublicKeys.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "list-unstyled mt-2 mb-0 text-muted", children: [...info.previousPublicKeys].reverse().map((previous) => ((0, jsx_runtime_1.jsxs)("li", { className: "d-flex align-items-center gap-2 flex-wrap", children: [(0, jsx_runtime_1.jsx)("code", { className: "text-break", children: previous.publicKey }), (0, jsx_runtime_1.jsx)("span", { className: "badge text-bg-secondary", children: previous.reason === "rotation" || !previous.reason ? "retired" : "revoked" }), (0, jsx_runtime_1.jsx)(RegistryBadge, { status: registryStatus(previous.publicKey) }), (0, jsx_runtime_1.jsx)("span", { children: new Date(previous.replacedAt).toLocaleDateString() })] }, previous.publicKey))) })), info.anchors && info.anchors.onRecord.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "list-unstyled mt-2 mb-0 text-muted", children: info.anchors.onRecord.map((anchor) => {
+                    const view = info.anchors?.views.find((item) => item.url === anchor.url);
+                    return ((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("span", { className: "badge text-bg-light me-2", children: anchor.type }), (0, jsx_runtime_1.jsx)("code", { className: "text-break", children: anchor.url }), view?.error && (0, jsx_runtime_1.jsx)("span", { className: "ms-2", children: view.error })] }, anchor.url));
+                }) })), (0, jsx_runtime_1.jsx)("div", { className: "text-muted mt-2", children: info.registry
+                    ? info.registry.error
+                        ? `Key registry at ${info.registry.url} is not reachable: ${info.registry.error}`
+                        : info.registry.keys
+                            ? `Key registry: ${info.registry.url}`
+                            : `The key registry at ${info.registry.url} has no record of this account yet; it is created on the first rotation.`
+                    : "No key registry is configured (peers-services disabled)." })] }));
+}
+function RegistryBadge({ status }) {
+    if (!status)
+        return null;
+    const tone = status === "active"
+        ? "text-bg-primary"
+        : status === "revoked"
+            ? "text-bg-danger"
+            : "text-bg-light";
+    return (0, jsx_runtime_1.jsxs)("span", { className: `badge ${tone}`, children: ["registry: ", status] });
+}
 function TechnicalValue(props) {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const copy = async () => {

package/dist/screens/account/account-screen.test.js

@@ -8,11 +8,15 @@ jest.mock("../../components/tooltip", () => ({
 }));
 jest.mock("../../hooks", () => ({
     useObservable: (value) => value === "device-observable" ? ["device0000000000000000001"] : [undefined],
+    // One result for every usePromise on the screen. getKeyInfo reads previousPublicKeys
+    // and canRotate; the profile card reads the rest.
     usePromise: () => ({
         userId: "user00000000000000000001",
         name: "Taylor Example",
         publicKey: "public-signing-key",
         publicBoxKey: "public-encryption-key",
+        previousPublicKeys: [],
+        canRotate: false,
     }),
 }));
 jest.mock("../../peers-services-registration", () => ({
@@ -36,7 +40,7 @@ describe("AccountScreen", () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(account_screen_1.AccountScreen, {}));
         expect(react_1.screen.getByText("Taylor Example")).toBeInTheDocument();
         expect(react_1.screen.getByText("user00000000000000000001")).toBeInTheDocument();
-        expect(react_1.screen.getByText("public-signing-key")).toBeInTheDocument();
+        expect(react_1.screen.getAllByText("public-signing-key")).toHaveLength(2);
         expect(react_1.screen.getByText("public-encryption-key")).toBeInTheDocument();
         expect(react_1.screen.getByText("device0000000000000000001")).toBeInTheDocument();
         expect(react_1.screen.getByRole("link", { name: "Edit display name" })).toHaveAttribute("href", "#settings");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.25.14",
+  "version": "0.25.16",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -30,7 +30,7 @@
     "lint:fix": "biome check --write ."
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.25.14",
+    "@peers-app/peers-sdk": "^0.25.16",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -41,7 +41,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
     "@biomejs/biome": "2.3.11",
-    "@peers-app/peers-sdk": "0.25.14",
+    "@peers-app/peers-sdk": "0.25.16",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/screens/account/account-screen.test.tsx

@@ -8,11 +8,15 @@ jest.mock("../../components/tooltip", () => ({
 jest.mock("../../hooks", () => ({
   useObservable: (value: unknown) =>
     value === "device-observable" ? ["device0000000000000000001"] : [undefined],
+  // One result for every usePromise on the screen. getKeyInfo reads previousPublicKeys
+  // and canRotate; the profile card reads the rest.
   usePromise: () => ({
     userId: "user00000000000000000001",
     name: "Taylor Example",
     publicKey: "public-signing-key",
     publicBoxKey: "public-encryption-key",
+    previousPublicKeys: [],
+    canRotate: false,
   }),
 }));
 
@@ -41,7 +45,7 @@ describe("AccountScreen", () => {
 
     expect(screen.getByText("Taylor Example")).toBeInTheDocument();
     expect(screen.getByText("user00000000000000000001")).toBeInTheDocument();
-    expect(screen.getByText("public-signing-key")).toBeInTheDocument();
+    expect(screen.getAllByText("public-signing-key")).toHaveLength(2);
     expect(screen.getByText("public-encryption-key")).toBeInTheDocument();
     expect(screen.getByText("device0000000000000000001")).toBeInTheDocument();
     expect(screen.getByRole("link", { name: "Edit display name" })).toHaveAttribute(

package/src/screens/account/account-screen.tsx

@@ -1,4 +1,12 @@
-import { copyToClipboard, getMe, thisDeviceId } from "@peers-app/peers-sdk";
+import {
+  copyToClipboard,
+  getMe,
+  type IAnchorRef,
+  type IIdentityKeyInfo,
+  identityRecoveryNoticesVar,
+  identityRotatedAwayVar,
+  thisDeviceId,
+} from "@peers-app/peers-sdk";
 import { useState } from "react";
 import { LoadingIndicator } from "../../components/loading-indicator";
 import { Tooltip } from "../../components/tooltip";
@@ -149,6 +157,12 @@ export function AccountScreen() {
         </div>
       </div>
 
+      <RecoveryNotice />
+      <SigningKeyCard />
+      <RecoveryEmailCard />
+      <AnchorsCard />
+      <PasskeyCard />
+
       <div className="card">
         <div className="card-body">
           <h5 className="card-title d-flex align-items-center gap-2">
@@ -220,6 +234,673 @@ export function AccountScreen() {
   );
 }
 
+const ROTATE_INFO = `### Rotating your signing key
+
+Your signing key is how other people and your own devices verify that something came from you.
+Replacing it needs an **anchor** already on your profile. A recovery email lets this device
+publish the new key to Peers Services. An https anchor cannot be written to from here, so
+**Rotate signing key** shows a document for you to place there. The key on this device changes
+only after every anchor on your profile lists the new key.
+
+The database key is stored separately, so a rotation does not re-encrypt the database.`;
+
+/** A recovery waiting on the delay, or held because a device contested it. */
+function RecoveryNotice() {
+  const [notices] = useObservable(identityRecoveryNoticesVar);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  if (!notices || notices.length === 0) return null;
+
+  const act = async (label: string, action: () => Promise<void>) => {
+    setBusy(label);
+    setError(null);
+    try {
+      await action();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <div className="card mb-3">
+      <div className="card-body">
+        <h5 className="card-title">Key recovery</h5>
+        {notices.map((notice) => (
+          <div key={`${notice.userId}:${notice.pendingPublicKey}`} className="mb-3">
+            <p className="mb-2">
+              {notice.own
+                ? "A new key was published for this account without your current key's signature."
+                : "A contact's key is being recovered."}{" "}
+              {notice.contested
+                ? "A device that holds the current key objects. The new key stays untrusted until you accept it."
+                : `Peers adopt it after ${new Date(notice.readyAt).toLocaleString()} unless someone contests it.`}
+            </p>
+            <code className="small text-break">{notice.pendingPublicKey}</code>
+            <div className="mt-2">
+              {notice.own ? (
+                <button
+                  type="button"
+                  className="btn btn-warning btn-sm"
+                  disabled={busy !== null}
+                  onClick={() =>
+                    act(notice.pendingPublicKey, async () => {
+                      const tools = await identityTools();
+                      await tools.contestRecovery({ pendingKey: notice.pendingPublicKey });
+                    })
+                  }
+                >
+                  {busy === notice.pendingPublicKey ? "Sending..." : "Contest"}
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  className="btn btn-outline-primary btn-sm"
+                  disabled={busy !== null}
+                  onClick={() =>
+                    act(notice.pendingPublicKey, async () => {
+                      const tools = await identityTools();
+                      await tools.acceptRecovery({
+                        userId: notice.userId,
+                        pendingKey: notice.pendingPublicKey,
+                      });
+                    })
+                  }
+                >
+                  {busy === notice.pendingPublicKey ? "Accepting..." : "Accept the new key"}
+                </button>
+              )}
+            </div>
+          </div>
+        ))}
+        {error && <p className="alert alert-danger mb-0">{error}</p>}
+      </div>
+    </div>
+  );
+}
+
+function bytesFromBase64Url(value: string): ArrayBuffer {
+  const padded = value.replace(/-/g, "+").replace(/_/g, "/");
+  const binary = atob(padded);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return bytes.buffer;
+}
+
+function base64UrlFromBytes(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer);
+  let binary = "";
+  for (const byte of bytes) binary += String.fromCharCode(byte);
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
+function credentialJson(credential: PublicKeyCredential): Record<string, unknown> {
+  const withJson = credential as PublicKeyCredential & { toJSON?: () => Record<string, unknown> };
+  if (typeof withJson.toJSON === "function") return withJson.toJSON();
+  const response = credential.response;
+  const body: Record<string, string> = {
+    clientDataJSON: base64UrlFromBytes(response.clientDataJSON),
+  };
+  if ("attestationObject" in response) {
+    body.attestationObject = base64UrlFromBytes(
+      (response as AuthenticatorAttestationResponse).attestationObject,
+    );
+  }
+  if ("authenticatorData" in response && "signature" in response) {
+    const assertion = response as AuthenticatorAssertionResponse;
+    body.authenticatorData = base64UrlFromBytes(assertion.authenticatorData);
+    body.signature = base64UrlFromBytes(assertion.signature);
+  }
+  return {
+    id: credential.id,
+    rawId: base64UrlFromBytes(credential.rawId),
+    type: credential.type,
+    response: body,
+    clientExtensionResults: credential.getClientExtensionResults(),
+  };
+}
+
+/** Add or remove an anchor by publishing the new list at the anchors already on record. */
+function AnchorsCard() {
+  const info = usePromise(async () => (await identityTools()).getKeyInfo(), undefined, []);
+  const [anchors, setAnchors] = useState<IAnchorRef[] | null>(null);
+  const [url, setUrl] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const shown = anchors ?? info?.anchors?.onRecord ?? [];
+
+  const publish = async (next: { type: "https" | "peers-services"; url: string }[]) => {
+    setBusy(true);
+    setError(null);
+    try {
+      const tools = await identityTools();
+      const saved = await tools.setAnchors({ anchors: next });
+      setAnchors(saved.anchors);
+      setUrl("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="card mb-3">
+      <div className="card-body">
+        <h5 className="card-title">Anchors</h5>
+        <p className="text-muted">
+          Peers ask these places before they believe a different key. Adding one publishes the new
+          list at an anchor already here. An https anchor has to be updated first. Removing the last
+          one means a lost key cannot be recovered.
+        </p>
+        {shown.length === 0 && <p>None yet.</p>}
+        <ul className="list-unstyled">
+          {shown.map((anchor) => (
+            <li
+              key={`${anchor.type}:${anchor.url}`}
+              className="d-flex justify-content-between mb-2"
+            >
+              <code className="small text-break">{anchor.url}</code>
+              <button
+                type="button"
+                className="btn btn-outline-danger btn-sm ms-2"
+                disabled={busy}
+                onClick={() => publish(shown.filter((item) => item.url !== anchor.url))}
+              >
+                Remove
+              </button>
+            </li>
+          ))}
+        </ul>
+        <div className="input-group">
+          <input
+            className="form-control"
+            placeholder="https://example.com/.well-known/peers-identity.json"
+            value={url}
+            onChange={(event) => setUrl(event.target.value)}
+          />
+          <button
+            type="button"
+            className="btn btn-outline-primary"
+            disabled={busy || url.trim() === ""}
+            onClick={() => publish([...shown, { type: "https", url: url.trim() }])}
+          >
+            {busy ? "Publishing..." : "Add"}
+          </button>
+        </div>
+        {error && <p className="alert alert-danger mt-3 mb-0">{error}</p>}
+      </div>
+    </div>
+  );
+}
+
+/** Bind a passkey that can open an anchor-write session. */
+function PasskeyCard() {
+  // A passkey is bound to a website. The Electron renderer loads from a file, which has no
+  // host; the registry refuses that origin and the browser would too.
+  const onWebsite = typeof window !== "undefined" && /^https?:$/.test(window.location.protocol);
+  const supported = onWebsite && typeof PublicKeyCredential !== "undefined";
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const run = async (action: "register" | "session") => {
+    setBusy(true);
+    setError(null);
+    setMessage(null);
+    try {
+      const tools = await identityTools();
+      const origin = window.location.origin;
+      if (action === "register") {
+        const started = await tools.passkeyRegisterStart({ origin });
+        const options = started.options as PublicKeyCredentialCreationOptionsJSON;
+        const credential = (await navigator.credentials.create({
+          publicKey: {
+            ...options,
+            challenge: bytesFromBase64Url(options.challenge),
+            user: { ...options.user, id: bytesFromBase64Url(options.user.id) },
+            excludeCredentials: options.excludeCredentials?.map((item) => ({
+              ...item,
+              id: bytesFromBase64Url(item.id),
+            })),
+          },
+        })) as PublicKeyCredential | null;
+        if (!credential) throw new Error("No passkey was created");
+        await tools.passkeyRegisterFinish({ response: credentialJson(credential) });
+        setMessage("Passkey saved. It can open an anchor session without the signing key.");
+      } else {
+        const started = await tools.passkeyAuthStart({ origin });
+        const options = started.options as PublicKeyCredentialRequestOptionsJSON;
+        const credential = (await navigator.credentials.get({
+          publicKey: {
+            ...options,
+            challenge: bytesFromBase64Url(options.challenge),
+            allowCredentials: options.allowCredentials?.map((item) => ({
+              ...item,
+              id: bytesFromBase64Url(item.id),
+            })),
+          },
+        })) as PublicKeyCredential | null;
+        if (!credential) throw new Error("No passkey was used");
+        const session = await tools.passkeyAuthFinish({ response: credentialJson(credential) });
+        const minutes = Math.round(session.expiresIn / 60);
+        setMessage(`Anchor session open for about ${minutes} minutes.`);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="card mb-3">
+      <div className="card-body">
+        <h5 className="card-title">Passkey</h5>
+        <p className="text-muted">
+          A passkey opens the same short session as the recovery email. It does not replace the
+          signing key. This page has to be served on the passkey's site.
+        </p>
+        {supported ? (
+          <div className="d-flex gap-2">
+            <button
+              type="button"
+              className="btn btn-outline-primary btn-sm"
+              disabled={busy}
+              onClick={() => run("register")}
+            >
+              {busy ? "Waiting..." : "Add a passkey"}
+            </button>
+            <button
+              type="button"
+              className="btn btn-outline-secondary btn-sm"
+              disabled={busy}
+              onClick={() => run("session")}
+            >
+              Use passkey
+            </button>
+          </div>
+        ) : (
+          <p className="mb-0">
+            {onWebsite
+              ? "This browser cannot create a passkey."
+              : "This window is not a website, so it cannot hold a passkey. Open your account in the web app to add or use one."}
+          </p>
+        )}
+        {message && <p className="mt-3 mb-0">{message}</p>}
+        {error && <p className="alert alert-danger mt-3 mb-0">{error}</p>}
+      </div>
+    </div>
+  );
+}
+
+type PublicKeyCredentialCreationOptionsJSON = {
+  challenge: string;
+  user: { id: string; name: string; displayName: string };
+  excludeCredentials?: {
+    id: string;
+    type: PublicKeyCredentialType;
+    transports?: AuthenticatorTransport[];
+  }[];
+  rp: PublicKeyCredentialRpEntity;
+  pubKeyCredParams: PublicKeyCredentialParameters[];
+  timeout?: number;
+  attestation?: AttestationConveyancePreference;
+  authenticatorSelection?: AuthenticatorSelectionCriteria;
+};
+
+type PublicKeyCredentialRequestOptionsJSON = {
+  challenge: string;
+  allowCredentials?: {
+    id: string;
+    type: PublicKeyCredentialType;
+    transports?: AuthenticatorTransport[];
+  }[];
+  timeout?: number;
+  rpId?: string;
+  userVerification?: UserVerificationRequirement;
+};
+
+/** Current signing key, previous keys, on-record anchors, and manual rotation. */
+function SigningKeyCard() {
+  const info = usePromise(() => identityTools().then((tools) => tools.getKeyInfo()));
+  const [rotatedAway] = useObservable(identityRotatedAwayVar);
+  const [manualDocument, setManualDocument] = useState<string | null>(null);
+  const [busy, setBusy] = useState<"prepare" | "confirm" | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // Writes through every anchor that has a writer. When an anchor on record has none (an
+  // https document) the host hands the document back first; confirm polls until every
+  // anchor lists the new key. A committed rotation restarts the host.
+  const prepare = async () => {
+    setBusy("prepare");
+    setError(null);
+    try {
+      const tools = await identityTools();
+      const result = await tools.rotateKey({ publish: "anchors", confirm: false });
+      if (result.committed) return;
+      setManualDocument(JSON.stringify(result.manualDocument, null, 2));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const confirm = async () => {
+    setBusy("confirm");
+    setError(null);
+    try {
+      const tools = await identityTools();
+      await tools.rotateKey({ publish: "anchors", confirm: true });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      setBusy(null);
+    }
+  };
+
+  return (
+    <div className="card mb-3">
+      <div className="card-body">
+        <h5 className="card-title d-flex align-items-center gap-2">
+          Signing key
+          <Tooltip markdownContent={ROTATE_INFO} />
+        </h5>
+        {rotatedAway && (
+          <p className="alert alert-warning">
+            This device holds an old key. Pair it again. The anchors confirmed{" "}
+            <code>{rotatedAway.newPublicKey}</code>.
+          </p>
+        )}
+        {!info ? (
+          <LoadingIndicator />
+        ) : (
+          <>
+            <KeyStatusList info={info} />
+            {info.canRotate ? (
+              <div className="mt-3">
+                <button
+                  type="button"
+                  className="btn btn-outline-primary btn-sm"
+                  onClick={prepare}
+                  disabled={busy !== null}
+                >
+                  {busy === "prepare" ? "Rotating..." : "Rotate signing key"}
+                </button>
+                {manualDocument && (
+                  <>
+                    <pre className="small mt-3 mb-2 text-break">{manualDocument}</pre>
+                    <p className="small text-muted">
+                      Place this document at every https anchor listed above, then confirm. This
+                      device waits until every anchor lists the new key before it changes anything.
+                    </p>
+                    <button
+                      type="button"
+                      className="btn btn-primary btn-sm"
+                      onClick={confirm}
+                      disabled={busy !== null}
+                    >
+                      {busy === "confirm" ? "Waiting for the anchors..." : "I've published this"}
+                    </button>
+                  </>
+                )}
+              </div>
+            ) : (
+              <p className="alert alert-secondary mt-3 mb-0">
+                This host's identity is fixed at startup and cannot be rotated here.
+              </p>
+            )}
+            {error && <p className="alert alert-danger mt-3 mb-0">{error}</p>}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const RECOVERY_INFO = `### Recovery email
+
+This mailbox is how Peers Services agrees to publish a new key. The code proves you can read
+the mailbox. The signing key is still what other people verify.
+
+Without a recovery email, Peers Services refuses a new key. **Prepare manual rotation** still
+works if another anchor is on your profile. If you lose the signing key and have no recovery
+email, there is no way back into this account.`;
+
+/** Bind, confirm, and use a recovery email to publish a key rotation. */
+function RecoveryEmailCard() {
+  const current = usePromise(() =>
+    identityTools()
+      .then((tools) => tools.getRecoveryEmail())
+      .catch(() => ({ email: undefined })),
+  );
+  const [email, setEmail] = useState("");
+  const [code, setCode] = useState("");
+  const [bound, setBound] = useState<string | null | undefined>(undefined);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const shown = bound === undefined ? (current?.email ?? "") : (bound ?? "");
+
+  const run = async (label: string, action: () => Promise<string>) => {
+    setBusy(label);
+    setError(null);
+    setNotice(null);
+    try {
+      setNotice(await action());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <div className="card mb-3">
+      <div className="card-body">
+        <h5 className="card-title d-flex align-items-center gap-2">
+          Recovery email
+          <Tooltip markdownContent={RECOVERY_INFO} />
+        </h5>
+        {shown ? (
+          <p className="mb-3">
+            Bound to <strong>{shown}</strong>
+          </p>
+        ) : (
+          <p className="text-muted mb-3">
+            Optional. Bind one if you want Peers Services to accept a new signing key.
+          </p>
+        )}
+        {!shown && (
+          <input
+            className="form-control form-control-sm mb-2"
+            type="email"
+            placeholder="you@example.com"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            disabled={busy !== null}
+          />
+        )}
+        <input
+          className="form-control form-control-sm mb-2"
+          inputMode="numeric"
+          placeholder="Code from the email"
+          value={code}
+          onChange={(event) => setCode(event.target.value)}
+          disabled={busy !== null}
+        />
+        <div className="d-flex flex-wrap gap-2">
+          {!shown && (
+            <>
+              <button
+                type="button"
+                className="btn btn-outline-primary btn-sm"
+                disabled={busy !== null || email.trim() === ""}
+                onClick={() =>
+                  run("bind", async () => {
+                    const tools = await identityTools();
+                    await tools.bindEmailStart({ email: email.trim() });
+                    return `A code was sent to ${email.trim()}.`;
+                  })
+                }
+              >
+                {busy === "bind" ? "Sending..." : "Send bind code"}
+              </button>
+              <button
+                type="button"
+                className="btn btn-primary btn-sm"
+                disabled={busy !== null || code.trim() === ""}
+                onClick={() =>
+                  run("verify", async () => {
+                    const tools = await identityTools();
+                    const verified = await tools.bindEmailVerify({
+                      email: email.trim(),
+                      code: code.trim(),
+                    });
+                    setBound(verified.email);
+                    setCode("");
+                    return `Recovery email saved: ${verified.email}`;
+                  })
+                }
+              >
+                {busy === "verify" ? "Checking..." : "Verify"}
+              </button>
+            </>
+          )}
+          {shown && (
+            <>
+              <button
+                type="button"
+                className="btn btn-outline-primary btn-sm"
+                disabled={busy !== null}
+                onClick={() =>
+                  run("session", async () => {
+                    const tools = await identityTools();
+                    await tools.startAnchorSession();
+                    return "A code was sent to the recovery email.";
+                  })
+                }
+              >
+                {busy === "session" ? "Sending..." : "Send rotation code"}
+              </button>
+              <button
+                type="button"
+                className="btn btn-primary btn-sm"
+                disabled={busy !== null || code.trim() === ""}
+                onClick={() =>
+                  run("confirm", async () => {
+                    const tools = await identityTools();
+                    const session = await tools.confirmAnchorSession({ code: code.trim() });
+                    setCode("");
+                    const minutes = Math.max(1, Math.round(session.expiresIn / 60));
+                    return `Session open for about ${minutes} minutes. You can rotate now.`;
+                  })
+                }
+              >
+                {busy === "confirm" ? "Checking..." : "Open session"}
+              </button>
+              <button
+                type="button"
+                className="btn btn-outline-secondary btn-sm"
+                disabled={busy !== null}
+                onClick={() =>
+                  run("rotate", async () => {
+                    const tools = await identityTools();
+                    const result = await tools.rotateKey({ publish: "anchors" });
+                    return `Rotated to ${result.newPublicKey}. This host will restart.`;
+                  })
+                }
+              >
+                {busy === "rotate" ? "Rotating..." : "Rotate signing key"}
+              </button>
+              <button
+                type="button"
+                className="btn btn-link btn-sm"
+                disabled={busy !== null}
+                onClick={() =>
+                  run("unbind", async () => {
+                    const tools = await identityTools();
+                    await tools.unbindEmail();
+                    setBound(null);
+                    return "Recovery email removed.";
+                  })
+                }
+              >
+                Remove
+              </button>
+            </>
+          )}
+        </div>
+        {notice && <p className="alert alert-success mt-3 mb-0">{notice}</p>}
+        {error && <p className="alert alert-danger mt-3 mb-0">{error}</p>}
+      </div>
+    </div>
+  );
+}
+
+function KeyStatusList({ info }: { info: IIdentityKeyInfo }) {
+  const registryStatus = (publicKey: string) =>
+    info.registry?.keys?.find((k) => k.publicKey === publicKey)?.status;
+  return (
+    <div className="small">
+      <div className="d-flex align-items-center gap-2 flex-wrap">
+        <code className="text-break">{info.publicKey}</code>
+        <span className="badge text-bg-success">current</span>
+        <RegistryBadge status={registryStatus(info.publicKey)} />
+      </div>
+      {info.previousPublicKeys.length > 0 && (
+        <ul className="list-unstyled mt-2 mb-0 text-muted">
+          {[...info.previousPublicKeys].reverse().map((previous) => (
+            <li key={previous.publicKey} className="d-flex align-items-center gap-2 flex-wrap">
+              <code className="text-break">{previous.publicKey}</code>
+              <span className="badge text-bg-secondary">
+                {previous.reason === "rotation" || !previous.reason ? "retired" : "revoked"}
+              </span>
+              <RegistryBadge status={registryStatus(previous.publicKey)} />
+              <span>{new Date(previous.replacedAt).toLocaleDateString()}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+      {info.anchors && info.anchors.onRecord.length > 0 && (
+        <ul className="list-unstyled mt-2 mb-0 text-muted">
+          {info.anchors.onRecord.map((anchor) => {
+            const view = info.anchors?.views.find((item) => item.url === anchor.url);
+            return (
+              <li key={anchor.url}>
+                <span className="badge text-bg-light me-2">{anchor.type}</span>
+                <code className="text-break">{anchor.url}</code>
+                {view?.error && <span className="ms-2">{view.error}</span>}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      <div className="text-muted mt-2">
+        {info.registry
+          ? info.registry.error
+            ? `Key registry at ${info.registry.url} is not reachable: ${info.registry.error}`
+            : info.registry.keys
+              ? `Key registry: ${info.registry.url}`
+              : `The key registry at ${info.registry.url} has no record of this account yet; it is created on the first rotation.`
+          : "No key registry is configured (peers-services disabled)."}
+      </div>
+    </div>
+  );
+}
+
+function RegistryBadge({ status }: { status?: string }) {
+  if (!status) return null;
+  const tone =
+    status === "active"
+      ? "text-bg-primary"
+      : status === "revoked"
+        ? "text-bg-danger"
+        : "text-bg-light";
+  return <span className={`badge ${tone}`}>registry: {status}</span>;
+}
+
 function TechnicalValue(props: { label: string; value: string; help: string }) {
   const [copied, setCopied] = useState(false);
   const copy = async () => {