@peers-app/peers-ui 0.20.6 → 0.21.1

package/src/screens/device-pairing/device-pairing.tsx

@@ -0,0 +1,390 @@
+import { copyToClipboard, type DevicePairingState, rpcServerCalls } from "@peers-app/peers-sdk";
+import { useEffect, useRef, useState } from "react";
+import QRCode from "react-qr-code";
+import { useDevicePairingState } from "./use-device-pairing-state";
+
+function formatCountdown(expiresAt?: number): string {
+  if (!expiresAt) {
+    return "";
+  }
+  const seconds = Math.max(0, Math.ceil((expiresAt - Date.now()) / 1000));
+  return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, "0")}`;
+}
+
+function PairingProgress({ state }: { state: DevicePairingState }) {
+  const messages: Partial<Record<DevicePairingState["phase"], string>> = {
+    inviting: "Waiting for the new device…",
+    connecting: "Establishing a secure connection…",
+    "waiting-for-approval": "Waiting for approval on the other device…",
+    transferring: "Installing encrypted account credentials…",
+  };
+  return (
+    <output className="text-center py-4 d-block">
+      <div className="spinner-border text-primary mb-3" aria-hidden="true" />
+      <p className="text-muted mb-0">{messages[state.phase] ?? "Working…"}</p>
+    </output>
+  );
+}
+
+function PairingComparison(props: {
+  state: DevicePairingState;
+  approving: boolean;
+  onApprove: () => void;
+  onReject: () => void;
+  onCancel: () => void;
+}) {
+  return (
+    <div className="text-center" style={{ maxWidth: 440, margin: "0 auto" }}>
+      <h4>Compare these numbers</h4>
+      <p className="text-muted">
+        Confirm that both devices show the same number and the expected device before approving.
+      </p>
+      <div
+        className="display-4 font-monospace text-primary mb-3"
+        style={{ letterSpacing: "0.12em" }}
+      >
+        {props.state.sas}
+      </div>
+      <p className="mb-4">
+        {props.state.remoteDevice?.deviceName || "Unnamed device"}
+        {props.state.remoteDevice?.deviceType ? ` (${props.state.remoteDevice.deviceType})` : ""}
+      </p>
+      <div className="d-flex gap-2 justify-content-center">
+        <button
+          type="button"
+          className="btn btn-primary"
+          disabled={props.approving}
+          onClick={props.onApprove}
+        >
+          {props.approving ? "Approving…" : "Numbers match — approve"}
+        </button>
+        <button
+          type="button"
+          className="btn btn-outline-danger"
+          disabled={props.approving}
+          onClick={props.onReject}
+        >
+          Reject
+        </button>
+        <button
+          type="button"
+          className="btn btn-outline-secondary"
+          disabled={props.approving}
+          onClick={props.onCancel}
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function TerminalPanel(props: { state: DevicePairingState; onClose: () => void }) {
+  const complete = props.state.phase === "complete";
+  return (
+    <div className="text-center" style={{ maxWidth: 440, margin: "0 auto" }}>
+      <output className={`alert d-block ${complete ? "alert-success" : "alert-warning"}`}>
+        {complete
+          ? "Device added successfully."
+          : props.state.phase === "rejected"
+            ? "Pairing was rejected. No credentials were installed."
+            : props.state.error || "Pairing could not be completed. No credentials were installed."}
+      </output>
+      <button type="button" className="btn btn-outline-secondary" onClick={props.onClose}>
+        {complete ? "Done" : "Back"}
+      </button>
+    </div>
+  );
+}
+
+function ProgressWithCancel(props: { state: DevicePairingState; onCancel: () => void }) {
+  return (
+    <>
+      <PairingProgress state={props.state} />
+      <div className="text-center">
+        <button type="button" className="btn btn-outline-secondary" onClick={props.onCancel}>
+          Cancel
+        </button>
+      </div>
+    </>
+  );
+}
+
+function usePairingSessionLifecycle(state: DevicePairingState) {
+  const sessionId = useRef<string | undefined>(undefined);
+  const phase = useRef<DevicePairingState["phase"]>("idle");
+  const mounted = useRef(true);
+
+  useEffect(() => {
+    if (state.sessionId && state.sessionId === sessionId.current) {
+      phase.current = state.phase;
+    }
+  }, [state.phase, state.sessionId]);
+
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      const activeSessionId = sessionId.current;
+      if (activeSessionId && !["idle", "complete", "rejected", "error"].includes(phase.current)) {
+        void rpcServerCalls
+          .devicePairingCancel({ sessionId: activeSessionId })
+          .catch(() => undefined);
+      }
+    };
+  }, []);
+
+  return { sessionId, phase, mounted };
+}
+
+/** Signed-in source flow opened from Settings. */
+export function SourceDevicePairing(props: { onClose: () => void }) {
+  const state = useDevicePairingState();
+  const lifecycle = usePairingSessionLifecycle(state);
+  const started = useRef(false);
+  const [invitationUrl, setInvitationUrl] = useState("");
+  const [localError, setLocalError] = useState("");
+  const [approving, setApproving] = useState(false);
+  const [, setClock] = useState(0);
+
+  useEffect(() => {
+    if (started.current) {
+      return;
+    }
+    started.current = true;
+    void rpcServerCalls
+      .devicePairingStartSource()
+      .then(async (result) => {
+        lifecycle.sessionId.current = result.state.sessionId;
+        lifecycle.phase.current = result.state.phase;
+        if (!lifecycle.mounted.current && result.state.sessionId) {
+          await rpcServerCalls
+            .devicePairingCancel({ sessionId: result.state.sessionId })
+            .catch(() => undefined);
+          return;
+        }
+        setInvitationUrl(result.invitationUrl);
+      })
+      .catch(() => setLocalError("Could not create a pairing invitation."));
+  }, []);
+
+  useEffect(() => {
+    if (!state.expiresAt) {
+      return;
+    }
+    const timer = window.setInterval(() => setClock((value) => value + 1), 1000);
+    return () => window.clearInterval(timer);
+  }, [state.expiresAt]);
+
+  useEffect(() => {
+    if (state.phase !== "inviting") {
+      setInvitationUrl("");
+    }
+  }, [state.phase]);
+
+  const act = async (action: "approve" | "reject") => {
+    const sessionId = lifecycle.sessionId.current;
+    if (!sessionId) {
+      return;
+    }
+    setApproving(true);
+    try {
+      if (action === "approve") {
+        await rpcServerCalls.devicePairingApprove({ sessionId });
+      } else {
+        await rpcServerCalls.devicePairingReject({ sessionId });
+      }
+    } catch {
+      setLocalError("Could not update the pairing ceremony.");
+    } finally {
+      setApproving(false);
+    }
+  };
+
+  const cancel = async () => {
+    const sessionId = lifecycle.sessionId.current;
+    lifecycle.phase.current = "idle";
+    if (sessionId) {
+      await rpcServerCalls.devicePairingCancel({ sessionId }).catch(() => undefined);
+    }
+    props.onClose();
+  };
+
+  if (localError) {
+    return <div className="alert alert-danger">{localError}</div>;
+  }
+  if (["complete", "rejected", "error"].includes(state.phase)) {
+    return <TerminalPanel state={state} onClose={props.onClose} />;
+  }
+  if (state.phase === "comparing" && state.sas) {
+    return (
+      <PairingComparison
+        state={state}
+        approving={approving}
+        onApprove={() => void act("approve")}
+        onReject={() => void act("reject")}
+        onCancel={() => void cancel()}
+      />
+    );
+  }
+  if (state.phase === "waiting-for-approval" || state.phase === "transferring") {
+    return <ProgressWithCancel state={state} onCancel={() => void cancel()} />;
+  }
+  if (invitationUrl) {
+    return (
+      <div className="text-center" style={{ maxWidth: 440, margin: "0 auto" }}>
+        <p className="text-muted">Scan this on the signed-out device you want to add.</p>
+        <div className="d-inline-block bg-white rounded p-3 mb-3">
+          <QRCode value={invitationUrl} size={220} aria-label="Device pairing QR code" />
+        </div>
+        <p className="small text-muted">Expires in {formatCountdown(state.expiresAt)}</p>
+        <div className="d-flex gap-2 justify-content-center">
+          <button
+            type="button"
+            className="btn btn-outline-primary"
+            onClick={() => void copyToClipboard(invitationUrl)}
+          >
+            Copy pairing link
+          </button>
+          <button type="button" className="btn btn-outline-secondary" onClick={() => void cancel()}>
+            Cancel
+          </button>
+        </div>
+      </div>
+    );
+  }
+  return <PairingProgress state={state} />;
+}
+
+/** Signed-out destination flow opened by a QR link or manual invitation paste. */
+export function DestinationDevicePairing(props: {
+  initialInvitation?: string;
+  onInvitationConsumed?: () => void;
+  onBack: () => void;
+}) {
+  const state = useDevicePairingState();
+  const lifecycle = usePairingSessionLifecycle(state);
+  const [invitation, setInvitation] = useState(props.initialInvitation ?? "");
+  const [localError, setLocalError] = useState("");
+  const [approving, setApproving] = useState(false);
+  const autoStarted = useRef(false);
+
+  const start = async (value = invitation) => {
+    setLocalError("");
+    try {
+      const result = await rpcServerCalls.devicePairingStartDestination({
+        invitation: value.trim(),
+        deviceType: /Mobi|Android/i.test(navigator.userAgent) ? "mobile" : "browser",
+      });
+      lifecycle.sessionId.current = result.sessionId;
+      lifecycle.phase.current = result.phase;
+      if (!lifecycle.mounted.current && result.sessionId) {
+        await rpcServerCalls
+          .devicePairingCancel({ sessionId: result.sessionId })
+          .catch(() => undefined);
+        return;
+      }
+      setInvitation("");
+      props.onInvitationConsumed?.();
+    } catch {
+      setLocalError("That pairing invitation is invalid, expired, or unavailable.");
+    }
+  };
+
+  useEffect(() => {
+    if (!props.initialInvitation || autoStarted.current) {
+      return;
+    }
+    autoStarted.current = true;
+    void start(props.initialInvitation);
+  }, [props.initialInvitation]);
+
+  useEffect(() => {
+    if (state.phase !== "complete") {
+      return;
+    }
+    window.setTimeout(() => window.location.reload(), 750);
+  }, [state.phase]);
+
+  const act = async (action: "approve" | "reject") => {
+    const sessionId = lifecycle.sessionId.current;
+    if (!sessionId) {
+      return;
+    }
+    setApproving(true);
+    try {
+      if (action === "approve") {
+        await rpcServerCalls.devicePairingApprove({ sessionId });
+      } else {
+        await rpcServerCalls.devicePairingReject({ sessionId });
+      }
+    } catch {
+      setLocalError("Could not update the pairing ceremony.");
+    } finally {
+      setApproving(false);
+    }
+  };
+
+  const cancel = async () => {
+    const sessionId = lifecycle.sessionId.current;
+    lifecycle.phase.current = "idle";
+    if (sessionId) {
+      await rpcServerCalls.devicePairingCancel({ sessionId }).catch(() => undefined);
+    }
+    props.onBack();
+  };
+
+  if (["complete", "rejected", "error"].includes(state.phase)) {
+    return <TerminalPanel state={state} onClose={props.onBack} />;
+  }
+  if (state.phase === "comparing" && state.sas) {
+    return (
+      <PairingComparison
+        state={state}
+        approving={approving}
+        onApprove={() => void act("approve")}
+        onReject={() => void act("reject")}
+        onCancel={() => void cancel()}
+      />
+    );
+  }
+  if (
+    state.phase === "connecting" ||
+    state.phase === "waiting-for-approval" ||
+    state.phase === "transferring"
+  ) {
+    return <ProgressWithCancel state={state} onCancel={() => void cancel()} />;
+  }
+  return (
+    <div className="text-center" style={{ maxWidth: 500, margin: "0 auto" }}>
+      <h3>Sign in using another device</h3>
+      <p className="text-muted">
+        On a device already signed in to Peers, choose Add another device. Scan its QR code, or
+        paste the complete pairing link or token below.
+      </p>
+      <textarea
+        className="form-control font-monospace mb-3"
+        rows={4}
+        placeholder="Paste pairing link or token"
+        value={invitation}
+        onChange={(event) => setInvitation(event.target.value)}
+        autoComplete="off"
+        aria-label="Device pairing invitation"
+      />
+      {localError ? <div className="alert alert-danger">{localError}</div> : null}
+      <div className="d-grid gap-2">
+        <button
+          type="button"
+          className="btn btn-primary btn-lg"
+          disabled={!invitation.trim()}
+          onClick={() => void start()}
+        >
+          Connect securely
+        </button>
+        <button type="button" className="btn btn-outline-secondary" onClick={props.onBack}>
+          Back
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/screens/device-pairing/index.ts

@@ -0,0 +1,3 @@
+export * from "./device-pairing";
+export * from "./device-pairing-invite";
+export * from "./use-device-pairing-state";

package/src/screens/device-pairing/use-device-pairing-state.ts

@@ -0,0 +1,38 @@
+import {
+  DEVICE_PAIRING_STATE_EVENT,
+  type DevicePairingState,
+  devicePairingStateSchema,
+  rpcServerCalls,
+  subscribe,
+} from "@peers-app/peers-sdk";
+import { useEffect, useState } from "react";
+
+const IDLE_PAIRING_STATE: DevicePairingState = { phase: "idle" };
+
+/** Subscribes to renderer-safe host pairing state and loads its current snapshot. */
+export function useDevicePairingState(): DevicePairingState {
+  const [state, setState] = useState<DevicePairingState>(IDLE_PAIRING_STATE);
+
+  useEffect(() => {
+    let active = true;
+    const subscription = subscribe<DevicePairingState>(DEVICE_PAIRING_STATE_EVENT, (event) => {
+      if (active) {
+        setState(devicePairingStateSchema.parse(event.data));
+      }
+    });
+    void rpcServerCalls
+      .devicePairingGetState()
+      .then((value) => {
+        if (active) {
+          setState(devicePairingStateSchema.parse(value));
+        }
+      })
+      .catch(() => undefined);
+    return () => {
+      active = false;
+      subscription.unsubscribe();
+    };
+  }, []);
+
+  return state;
+}

package/src/screens/packages/package-helpers.ts

@@ -136,5 +136,44 @@ export async function activatePackageVersion(
   }
 }
 
+/**
+ * After promoting a version that is currently effective-active on this device,
+ * activate it when the new tag matches the group's auto-activate / follow rules.
+ *
+ * This closes the gotcha where a device is already running a `dev` build, promotes
+ * it to `beta`/`stable`, and expects the group active version to advance without a
+ * separate Activate click — but only when the group would accept that channel
+ * (e.g. default follow is `stable`; `beta` only when the group follows beta).
+ *
+ * @param packageId - Package that was promoted
+ * @param promotedPv - PV after the tag change (must include the new `versionTag`)
+ * @param opts.wasEffectiveActive - True when this PV was this device's effective active before promote
+ * @param opts.groupFollowTags - Group `IPackage.followVersionTags` (not device override)
+ * @param opts.groupPinned - True when group `versionFollowRange` is `pinned`
+ * @returns Whether activation was attempted
+ */
+export async function maybeActivateAfterPromote(
+  packageId: string,
+  promotedPv: IPackageVersion,
+  opts: {
+    wasEffectiveActive: boolean;
+    groupFollowTags: string | undefined;
+    groupPinned: boolean;
+  },
+): Promise<boolean> {
+  if (!opts.wasEffectiveActive) return false;
+  if (opts.groupPinned) return false;
+  if (!promotedPv.versionTag || promotedPv.versionTag === "dev") return false;
+
+  // Docs default: groups follow `stable` when followVersionTags is unset.
+  const followTags = opts.groupFollowTags ?? "stable";
+  if (!doesTagMatch(undefined, promotedPv.versionTag, followTags, undefined)) {
+    return false;
+  }
+
+  await activatePackageVersion(packageId, promotedPv);
+  return true;
+}
+
 /** Numeric rank for sorting packages by update urgency. */
 export const updateLevelRank: Record<string, number> = { major: 3, minor: 2, patch: 1 };

package/src/screens/packages/package-versions.tsx

@@ -15,7 +15,7 @@ import {
 } from "@peers-app/peers-sdk";
 import { useState } from "react";
 import { useObservable, useObservableState, usePromise } from "../../hooks";
-import { activatePackageVersion, isGroupAdmin } from "./package-helpers";
+import { activatePackageVersion, isGroupAdmin, maybeActivateAfterPromote } from "./package-helpers";
 
 function formatDate(iso: string): string {
   try {
@@ -43,6 +43,7 @@ function tagBadgeClass(tag?: string): string {
   return "text-bg-secondary";
 }
 
+/** Lists package versions with activate, promote, pin, edit-semver, and delete actions. */
 export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
   const { pkg } = props;
   const refreshKey = useObservableState(0);
@@ -127,26 +128,46 @@ export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
         pv.routesBundleFileHash,
         pv.uiBundleFileHash,
       );
+
+      // Auto-sign with package author key if available (server/PWA host — key never
+      // exposed to UI). Soft-fail when the key is missing so group admins can still
+      // promote, but never keep a signature that was computed for the old tag.
+      const authorSig = await rpcServerCalls.signPackageAuthorVersion({
+        packageId: pv.packageId,
+        packageVersionId: pv.packageVersionId,
+        version: pv.version,
+        versionTag: newTag,
+        packageBundleFileHash: pv.packageBundleFileHash,
+        routesBundleFileHash: pv.routesBundleFileHash,
+        uiBundleFileHash: pv.uiBundleFileHash,
+        appNavs: pv.appNavs,
+        createdBy: pv.createdBy,
+        createdAt: pv.createdAt,
+      });
+
       const updated: IPackageVersion = {
         ...pv,
         versionTag: newTag,
         packageVersionHash: pvHash,
         history,
+        packageAuthorSignature: authorSig,
       };
 
-      // Auto-sign with package author key if available (server-side, key never exposed)
-      const authorSig = await rpcServerCalls.signPackageAuthorVersion({
-        packageId: updated.packageId,
-        packageVersionId: updated.packageVersionId,
-        version: updated.version,
-        versionTag: newTag,
-        packageBundleFileHash: updated.packageBundleFileHash,
-        routesBundleFileHash: updated.routesBundleFileHash,
-        uiBundleFileHash: updated.uiBundleFileHash,
+      await PackageVersions().signAndSave(updated, { saveAsSnapshot: true });
+
+      // Promoting the version this device is already running should advance the
+      // group active version when the new tag matches group follow policy
+      // (e.g. promote active → stable with default follow settings).
+      const pkgJs = pkg.toJS();
+      const activated = await maybeActivateAfterPromote(pkg.packageId, updated, {
+        wasEffectiveActive: pv.packageVersionId === effectiveActiveVersionId,
+        groupFollowTags: pkgJs.followVersionTags,
+        groupPinned: pkgJs.versionFollowRange === "pinned",
       });
-      updated.packageAuthorSignature = authorSig;
+      if (activated) {
+        await pkg.load();
+      }
 
-      await PackageVersions().signAndSave(updated, { saveAsSnapshot: true });
       refreshKey(refreshKey() + 1);
     } catch (err: unknown) {
       alert(`Failed to promote version: ${err instanceof Error ? err.message : String(err)}`);
@@ -162,7 +183,25 @@ export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
         pv.routesBundleFileHash,
         pv.uiBundleFileHash,
       );
-      const updated = { ...pv, version: newSemver, packageVersionHash: pvHash };
+      // Semver is part of the author-signed payload — re-sign or clear the old signature.
+      const authorSig = await rpcServerCalls.signPackageAuthorVersion({
+        packageId: pv.packageId,
+        packageVersionId: pv.packageVersionId,
+        version: newSemver,
+        versionTag: pv.versionTag,
+        packageBundleFileHash: pv.packageBundleFileHash,
+        routesBundleFileHash: pv.routesBundleFileHash,
+        uiBundleFileHash: pv.uiBundleFileHash,
+        appNavs: pv.appNavs,
+        createdBy: pv.createdBy,
+        createdAt: pv.createdAt,
+      });
+      const updated: IPackageVersion = {
+        ...pv,
+        version: newSemver,
+        packageVersionHash: pvHash,
+        packageAuthorSignature: authorSig,
+      };
       await PackageVersions().signAndSave(updated, { saveAsSnapshot: true });
       refreshKey(refreshKey() + 1);
     } catch (err: unknown) {

package/src/screens/settings/settings-page.tsx

@@ -19,6 +19,7 @@ import { Tooltip } from "../../components/tooltip";
 import * as globals from "../../globals";
 import { useObservable, useObservableState, usePromise } from "../../hooks";
 import { LayoutPicker } from "../../root-layout/layout-picker";
+import { SourceDevicePairing } from "../device-pairing";
 import { ColorModeDropdown } from "./color-mode-dropdown";
 import { VoiceSettings } from "./voice-settings";
 
@@ -71,6 +72,7 @@ const UserSettingsTab: React.FC = () => {
   return (
     <>
       <ProfileSection />
+      <AddDeviceSection />
       <LogoutSection />
     </>
   );
@@ -250,6 +252,26 @@ const ProfileSection: React.FC = () => {
   );
 };
 
+const AddDeviceSection: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <section className="mt-4 pt-3 border-top">
+      <h6>Add another device</h6>
+      <p className="small text-muted">
+        Create a five-minute invitation, compare the same number on both devices, and approve on
+        each one before account access is transferred.
+      </p>
+      {open ? (
+        <SourceDevicePairing onClose={() => setOpen(false)} />
+      ) : (
+        <button type="button" className="btn btn-outline-primary" onClick={() => setOpen(true)}>
+          Add another device
+        </button>
+      )}
+    </section>
+  );
+};
+
 const PackagesRootDirectory: React.FC = () => {
   return (
     <div className="mt-3">