@peers-app/peers-ui 0.27.3 → 0.27.4

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

@@ -1,942 +0,0 @@
-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";
-import { useObservable, usePromise } from "../../hooks";
-import {
-  persistPeersServicesRegistration,
-  registrationStatusPvar,
-} from "../../peers-services-registration";
-import { identityTools } from "../device-pairing/identity-ipc";
-
-const INFO_TEXT = `### What does registering do?
-
-Registering your account links your **public key** with the Peers cloud service. This enables cloud-powered features like:
-
-- **AI Assistant** - use the built-in assistant powered by hosted LLM inference
-- **Cloud relay** - improved connectivity between your devices
-- **Future services** - new cloud features as they become available
-
-### Is it safe?
-
-Registration uses a **cryptographic challenge-response** to prove you own your secret key.
-Your **secret key never leaves your device**. Only your public key is shared with the server.
-
-### Do I have to register?
-
-No. Peers works fully in local/peer-to-peer mode without registration. Cloud features simply won't be available until you register.`;
-
-/** Identity profile, public identifiers, device shortcuts, and service registration. */
-export function AccountScreen() {
-  const [registrationStatus] = useObservable(registrationStatusPvar);
-  const [deviceId] = useObservable(thisDeviceId);
-  const me = usePromise(getMe);
-  const [isRegistering, setIsRegistering] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState<string | null>(null);
-
-  const isRegistered = !!registrationStatus;
-
-  const handleRegister = async () => {
-    setIsRegistering(true);
-    setError(null);
-    setSuccess(null);
-
-    try {
-      const { token } = await (await identityTools()).registerWithPeersServices();
-      await persistPeersServicesRegistration(token);
-      setSuccess("Account registered successfully.");
-    } catch (err) {
-      setError(`Registration failed: ${String(err)}`);
-    } finally {
-      setIsRegistering(false);
-    }
-  };
-
-  if (!me) {
-    return <LoadingIndicator />;
-  }
-
-  return (
-    <div className="container-xxl p-3">
-      <div className="mb-3">
-        <h4 className="mb-1 d-flex align-items-center gap-2">
-          <i className="bi bi-person-circle" />
-          Account
-        </h4>
-        <div className="small text-muted">Your public identity and account-level services</div>
-      </div>
-
-      {error && (
-        <div className="alert alert-danger alert-dismissible" role="alert">
-          <i className="bi bi-exclamation-triangle me-2" />
-          {error}
-          <button
-            type="button"
-            className="btn-close"
-            onClick={() => setError(null)}
-            aria-label="Close"
-          />
-        </div>
-      )}
-
-      {success && (
-        <div className="alert alert-success alert-dismissible" role="alert">
-          <i className="bi bi-check-circle me-2" />
-          {success}
-          <button
-            type="button"
-            className="btn-close"
-            onClick={() => setSuccess(null)}
-            aria-label="Close"
-          />
-        </div>
-      )}
-
-      <div className="card mb-3">
-        <div className="card-body d-flex align-items-center gap-3 flex-wrap">
-          <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"
-          >
-            {profileInitials(me.name)}
-          </span>
-          <div className="flex-grow-1">
-            <h5 className="card-title mb-1">{me.name || "Unnamed user"}</h5>
-            <div className="small text-muted">Peers identity</div>
-          </div>
-          <div className="d-flex gap-2 flex-wrap">
-            <a href="#settings" className="btn btn-outline-secondary btn-sm">
-              Edit display name
-            </a>
-            <a href="#identity/devices" className="btn btn-outline-primary btn-sm">
-              Manage devices
-            </a>
-            <a href="#identity/devices/pair" className="btn btn-primary btn-sm">
-              Add device
-            </a>
-          </div>
-        </div>
-      </div>
-
-      <div className="card mb-3">
-        <div className="card-body">
-          <h5 className="card-title">Technical identity</h5>
-          <p className="small text-muted">
-            Share these values only when diagnosing identity or connection problems.
-          </p>
-          <TechnicalValue
-            label="User ID"
-            value={me.userId}
-            help="Your stable identifier across Peers."
-          />
-          <TechnicalValue
-            label="Signing key"
-            value={me.publicKey}
-            help="Other people use this public key to verify your signatures."
-          />
-          <TechnicalValue
-            label="Encryption key"
-            value={me.publicBoxKey}
-            help="Other people use this public key to encrypt data for you."
-          />
-          <TechnicalValue
-            label="Current device ID"
-            value={deviceId || "Not available"}
-            help="Identifies this installation on Peers networks."
-          />
-        </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">
-            Peers Services Registration
-            <Tooltip markdownContent={INFO_TEXT} />
-          </h5>
-
-          {isRegistered ? (
-            <div>
-              <div className="d-flex align-items-center gap-2 mb-2">
-                <i className="bi bi-check-circle-fill text-success" style={{ fontSize: "1.2em" }} />
-                <span>Registered</span>
-              </div>
-              <small className="text-muted d-block mb-3">
-                Registered on{" "}
-                {new Date(registrationStatus as string).toLocaleDateString(undefined, {
-                  year: "numeric",
-                  month: "long",
-                  day: "numeric",
-                })}
-              </small>
-              <button
-                type="button"
-                className="btn btn-outline-secondary btn-sm"
-                onClick={handleRegister}
-                disabled={isRegistering}
-              >
-                {isRegistering ? (
-                  <>
-                    <span className="spinner-border spinner-border-sm me-2" />
-                    Refreshing...
-                  </>
-                ) : (
-                  <>
-                    <i className="bi bi-arrow-clockwise me-2" />
-                    Refresh Token
-                  </>
-                )}
-              </button>
-            </div>
-          ) : (
-            <div>
-              <p className="text-muted mb-3">
-                Register your account to enable cloud-powered features like the AI assistant.
-              </p>
-              <button
-                type="button"
-                className="btn btn-primary"
-                onClick={handleRegister}
-                disabled={isRegistering}
-              >
-                {isRegistering ? (
-                  <>
-                    <span className="spinner-border spinner-border-sm me-2" />
-                    Registering...
-                  </>
-                ) : (
-                  <>
-                    <i className="bi bi-cloud-upload me-2" />
-                    Register Account
-                  </>
-                )}
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-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 () => {
-    if (await copyToClipboard(props.value)) {
-      setCopied(true);
-      window.setTimeout(() => setCopied(false), 1500);
-    }
-  };
-  return (
-    <div className="border-top py-3">
-      <div className="d-flex align-items-center gap-2 mb-1">
-        <strong className="small">{props.label}</strong>
-        <Tooltip markdownContent={props.help} />
-        <button
-          type="button"
-          className="btn btn-link btn-sm ms-auto py-0"
-          onClick={() => void copy()}
-          aria-label={`Copy ${props.label}`}
-        >
-          <i className={`bi ${copied ? "bi-check-lg" : "bi-copy"} me-1`} />
-          {copied ? "Copied" : "Copy"}
-        </button>
-      </div>
-      <code className="small text-break user-select-all">{props.value}</code>
-    </div>
-  );
-}
-
-function profileInitials(name: string): string {
-  return (
-    name
-      .trim()
-      .split(/\s+/)
-      .filter(Boolean)
-      .slice(0, 2)
-      .map((part) => part[0]?.toLocaleUpperCase())
-      .join("") || "?"
-  );
-}