@peers-app/peers-ui 0.20.6 → 0.21.1

package/dist/screens/packages/package-versions.js

@@ -39,6 +39,7 @@ function tagBadgeClass(tag) {
         return "text-bg-success";
     return "text-bg-secondary";
 }
+/** Lists package versions with activate, promote, pin, edit-semver, and delete actions. */
 const PackageVersionsList = (props) => {
     const { pkg } = props;
     const refreshKey = (0, hooks_1.useObservableState)(0);
@@ -115,24 +116,41 @@ const PackageVersionsList = (props) => {
                 signature: "",
             });
             const pvHash = (0, peers_sdk_1.computePackageVersionHash)(pv.version, newTag, pv.packageBundleFileHash, 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 peers_sdk_1.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 = {
                 ...pv,
                 versionTag: newTag,
                 packageVersionHash: pvHash,
                 history,
+                packageAuthorSignature: authorSig,
             };
-            // Auto-sign with package author key if available (server-side, key never exposed)
-            const authorSig = await peers_sdk_1.rpcServerCalls.signPackageAuthorVersion({
-                packageId: updated.packageId,
-                packageVersionId: updated.packageVersionId,
-                version: updated.version,
-                versionTag: newTag,
-                packageBundleFileHash: updated.packageBundleFileHash,
-                routesBundleFileHash: updated.routesBundleFileHash,
-                uiBundleFileHash: updated.uiBundleFileHash,
-            });
-            updated.packageAuthorSignature = authorSig;
             await (0, peers_sdk_1.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 (0, package_helpers_1.maybeActivateAfterPromote)(pkg.packageId, updated, {
+                wasEffectiveActive: pv.packageVersionId === effectiveActiveVersionId,
+                groupFollowTags: pkgJs.followVersionTags,
+                groupPinned: pkgJs.versionFollowRange === "pinned",
+            });
+            if (activated) {
+                await pkg.load();
+            }
             refreshKey(refreshKey() + 1);
         }
         catch (err) {
@@ -142,7 +160,25 @@ const PackageVersionsList = (props) => {
     async function updateVersion(pv, newSemver) {
         try {
             const pvHash = (0, peers_sdk_1.computePackageVersionHash)(newSemver, pv.versionTag || "dev", pv.packageBundleFileHash, 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 peers_sdk_1.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 = {
+                ...pv,
+                version: newSemver,
+                packageVersionHash: pvHash,
+                packageAuthorSignature: authorSig,
+            };
             await (0, peers_sdk_1.PackageVersions)().signAndSave(updated, { saveAsSnapshot: true });
             refreshKey(refreshKey() + 1);
         }

package/dist/screens/settings/settings-page.js

@@ -43,6 +43,7 @@ const tooltip_1 = require("../../components/tooltip");
 const globals = __importStar(require("../../globals"));
 const hooks_1 = require("../../hooks");
 const layout_picker_1 = require("../../root-layout/layout-picker");
+const device_pairing_1 = require("../device-pairing");
 const color_mode_dropdown_1 = require("./color-mode-dropdown");
 const voice_settings_1 = require("./voice-settings");
 function getAppVersion() {
@@ -72,7 +73,7 @@ const SettingsPage = () => {
 };
 exports.SettingsPage = SettingsPage;
 const UserSettingsTab = () => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ProfileSection, {}), (0, jsx_runtime_1.jsx)(LogoutSection, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ProfileSection, {}), (0, jsx_runtime_1.jsx)(AddDeviceSection, {}), (0, jsx_runtime_1.jsx)(LogoutSection, {})] }));
 };
 const AppearanceSettingsTab = () => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-3", children: "Appearance" }), (0, jsx_runtime_1.jsx)("div", { className: "mb-3", children: (0, jsx_runtime_1.jsx)(color_mode_dropdown_1.ColorModeDropdown, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "mb-3", children: (0, jsx_runtime_1.jsx)(layout_picker_1.LayoutPicker, {}) })] }));
@@ -148,6 +149,10 @@ const ProfileSection = () => {
     const hasChanges = !!me.q() || deviceName() !== savedDeviceName();
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center mb-3", children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-0 me-auto", children: "Settings" }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-primary btn-sm", onClick: handleSave, disabled: !hasChanges, children: "Save" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("small", { className: "form-label", children: "Display Name:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.qs.name, className: "form-control", maxLength: peers_sdk_1.DISPLAY_NAME_MAX_LENGTH, placeholder: "Enter your name" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Device Name:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "Give this device a friendly name to identify it in your network." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: deviceName, className: "form-control", maxLength: peers_sdk_1.DISPLAY_NAME_MAX_LENGTH, placeholder: "e.g., My Laptop" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["User ID:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies you to all other users." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.userId, className: "form-control", disabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Public Key:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This is your public key that other users will use to verify your signatures." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.publicKey, className: "form-control form-control-sm", disabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Public Box Key:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This is the public key that other users can use to encrypt data so that only you can open it." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.publicBoxKey, className: "form-control form-control-sm", disabled: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Device ID:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies this device on Peers networks." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: deviceId || "", className: "form-control form-control-sm", disabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("small", { className: "form-label", children: "App Version:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: getAppVersion(), className: "form-control form-control-sm", disabled: true })] })] }));
 };
+const AddDeviceSection = () => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("section", { className: "mt-4 pt-3 border-top", children: [(0, jsx_runtime_1.jsx)("h6", { children: "Add another device" }), (0, jsx_runtime_1.jsx)("p", { className: "small text-muted", children: "Create a five-minute invitation, compare the same number on both devices, and approve on each one before account access is transferred." }), open ? ((0, jsx_runtime_1.jsx)(device_pairing_1.SourceDevicePairing, { onClose: () => setOpen(false) })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary", onClick: () => setOpen(true), children: "Add another device" }))] }));
+};
 const PackagesRootDirectory = () => {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-3", children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Packages Directory:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `Changing this will not effect existing packages.` })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: peers_sdk_1.packagesRootDir, className: "form-control" })] }));
 };

package/dist/screens/setup-user.js

@@ -5,10 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = require("react");
 const hooks_1 = require("../hooks");
+const device_pairing_1 = require("./device-pairing");
 const color_mode_dropdown_1 = require("./settings/color-mode-dropdown");
 const SetupUser = () => {
     const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
     const [step, _setStep] = (0, react_1.useState)("select-user-type");
+    const [pairingInvitation, setPairingInvitation] = (0, react_1.useState)(() => (0, device_pairing_1.consumePendingDevicePairingInvite)());
+    const [showPairing, setShowPairing] = (0, react_1.useState)(() => Boolean(pairingInvitation));
     const [isExistingUser, setIsExistingUser] = (0, react_1.useState)(null);
     const [userId, setUserId] = (0, react_1.useState)("");
     const [secretKey, setSecretKey] = (0, react_1.useState)("");
@@ -16,6 +19,16 @@ const SetupUser = () => {
     const [isValidating, setIsValidating] = (0, react_1.useState)(false);
     document.getElementById("appLoadingDiv")?.remove();
     const isDark = _colorMode === "dark";
+    (0, react_1.useEffect)(() => {
+        const capture = (event) => {
+            const invitation = event.detail;
+            setPairingInvitation(invitation);
+            (0, device_pairing_1.consumePendingDevicePairingInvite)();
+            setShowPairing(true);
+        };
+        window.addEventListener(device_pairing_1.DEVICE_PAIRING_INVITE_CAPTURED_EVENT, capture);
+        return () => window.removeEventListener(device_pairing_1.DEVICE_PAIRING_INVITE_CAPTURED_EVENT, capture);
+    }, []);
     const handleNewUser = async () => {
         setError("");
         setIsValidating(true);
@@ -65,13 +78,23 @@ const SetupUser = () => {
             setIsValidating(false);
         }
     };
+    if (showPairing) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { paddingTop: "20px", backgroundColor: isDark ? "#212529" : "#f8f9fa" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card shadow", style: {
+                    maxWidth: "560px",
+                    width: "100%",
+                    backgroundColor: isDark ? "#2d3238" : "#ffffff",
+                }, children: (0, jsx_runtime_1.jsx)("div", { className: "card-body p-4 p-md-5", children: (0, jsx_runtime_1.jsx)(device_pairing_1.DestinationDevicePairing, { initialInvitation: pairingInvitation, onInvitationConsumed: () => setPairingInvitation(undefined), onBack: () => {
+                            setPairingInvitation(undefined);
+                            setShowPairing(false);
+                        } }) }) }) }));
+    }
     // Step 1: Select User Type
     if (step === "select-user-type" && isExistingUser === null) {
         return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { paddingTop: "20px", backgroundColor: isDark ? "#212529" : "#f8f9fa" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card shadow", style: {
                     maxWidth: "500px",
                     width: "100%",
                     backgroundColor: isDark ? "#2d3238" : "#ffffff",
-                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body p-4 p-md-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: `fw-bold mb-2 ${isDark ? "text-light" : ""}`, children: "Welcome to Peers" }), (0, jsx_runtime_1.jsx)("p", { className: isDark ? "text-light opacity-75" : "text-muted", children: "Let's get you set up" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-grid gap-3", children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-lg btn-primary py-3", onClick: () => setIsExistingUser(false), children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-plus fs-4 me-2" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-semibold", children: "I'm a New User" }), (0, jsx_runtime_1.jsx)("small", { className: "opacity-75", children: "Create a new account" })] })] }) }), (0, jsx_runtime_1.jsx)("button", { className: `btn btn-lg py-3 ${isDark ? "btn-outline-light" : "btn-outline-primary"}`, onClick: () => setIsExistingUser(true), children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-box-arrow-in-right fs-4 me-2" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-semibold", children: "I'm an Existing User" }), (0, jsx_runtime_1.jsx)("small", { className: "opacity-75", children: "Sign in with your credentials" })] })] }) })] })] }) }) }));
+                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body p-4 p-md-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: `fw-bold mb-2 ${isDark ? "text-light" : ""}`, children: "Welcome to Peers" }), (0, jsx_runtime_1.jsx)("p", { className: isDark ? "text-light opacity-75" : "text-muted", children: "Let's get you set up" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-grid gap-3", children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-lg btn-primary py-3", onClick: () => setIsExistingUser(false), children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-plus fs-4 me-2" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-semibold", children: "I'm a New User" }), (0, jsx_runtime_1.jsx)("small", { className: "opacity-75", children: "Create a new account" })] })] }) }), (0, jsx_runtime_1.jsx)("button", { className: `btn btn-lg py-3 ${isDark ? "btn-outline-light" : "btn-outline-primary"}`, onClick: () => setIsExistingUser(true), children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-box-arrow-in-right fs-4 me-2" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-semibold", children: "I'm an Existing User" }), (0, jsx_runtime_1.jsx)("small", { className: "opacity-75", children: "Sign in with your credentials" })] })] }) }), (0, jsx_runtime_1.jsx)("button", { className: `btn btn-lg py-3 ${isDark ? "btn-outline-light" : "btn-outline-primary"}`, onClick: () => setShowPairing(true), children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-phone fs-4 me-2" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-semibold", children: "Use Another Device" }), (0, jsx_runtime_1.jsx)("small", { className: "opacity-75", children: "Sign in with a device already on Peers" })] })] }) })] })] }) }) }));
     }
     // Step 2: New User Confirmation
     if (isExistingUser === false) {

package/package.json

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

package/src/root-layout/root-layout-host.tsx

@@ -25,6 +25,7 @@ import {
   captureUserConnectInviteFromLocation,
   readUserConnectPendingIntent,
 } from "../screens/contacts/user-connect-invite";
+import { captureDevicePairingInviteFromLocation } from "../screens/device-pairing";
 import { colorMode } from "../screens/settings/color-mode-dropdown";
 import { SetupUser } from "../screens/setup-user";
 import { WelcomeModal } from "../screens/welcome-modal";
@@ -41,6 +42,7 @@ import { selectedRootLayoutId } from "./root-layout-state";
  */
 export function RootLayoutHost() {
   useState(() => {
+    captureDevicePairingInviteFromLocation();
     captureUserConnectInviteFromLocation();
     return true;
   });
@@ -55,6 +57,7 @@ export function RootLayoutHost() {
   useEffect(() => {
     const captureInviteFromHashChange = () => {
       const previousHash = window.location.hash;
+      captureDevicePairingInviteFromLocation();
       captureUserConnectInviteFromLocation();
       if (window.location.hash === previousHash) {
         return;

package/src/screens/device-pairing/device-pairing-invite.test.ts

@@ -0,0 +1,50 @@
+import {
+  createDevicePairingInvitation,
+  createDevicePairingInvitationUrl,
+  parseDevicePairingInvitation,
+} from "@peers-app/peers-sdk";
+import {
+  captureDevicePairingInviteFromLocation,
+  clearPendingDevicePairingInvite,
+  consumePendingDevicePairingInvite,
+  readPendingDevicePairingInvite,
+} from "./device-pairing-invite";
+
+describe("device pairing invitation capture", () => {
+  beforeEach(() => {
+    clearPendingDevicePairingInvite();
+    window.history.replaceState({}, "", "/?app");
+  });
+
+  it("captures the fragment only in memory and removes it from browser history", () => {
+    const invitation = createDevicePairingInvitation({
+      serviceOrigin: "https://peers.app",
+    });
+    const inviteUrl = createDevicePairingInvitationUrl(
+      `${window.location.origin}/?app`,
+      invitation,
+    );
+    window.history.replaceState(
+      {},
+      "",
+      new URL(inviteUrl).pathname + new URL(inviteUrl).search + new URL(inviteUrl).hash,
+    );
+
+    const token = captureDevicePairingInviteFromLocation();
+
+    expect(token).toBeDefined();
+    expect(parseDevicePairingInvitation(token ?? "")).toEqual(invitation);
+    expect(window.location.hash).toBe("");
+    expect(readPendingDevicePairingInvite()).toBe(token);
+    expect(consumePendingDevicePairingInvite()).toBe(token);
+    expect(readPendingDevicePairingInvite()).toBeUndefined();
+  });
+
+  it("ignores invalid fragments without retaining them", () => {
+    window.history.replaceState({}, "", "/?app#pair=invalid");
+
+    expect(captureDevicePairingInviteFromLocation()).toBeUndefined();
+    expect(readPendingDevicePairingInvite()).toBeUndefined();
+    expect(window.location.hash).toBe("");
+  });
+});

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

@@ -0,0 +1,55 @@
+import { encodeDevicePairingInvitation, parseDevicePairingInvitation } from "@peers-app/peers-sdk";
+
+let pendingInvitation: string | undefined;
+
+/** Browser event emitted after a pairing invitation is captured and removed from the URL. */
+export const DEVICE_PAIRING_INVITE_CAPTURED_EVENT = "device-pairing:invite-captured";
+
+/** Captures a pairing fragment in memory and immediately removes it from browser history. */
+export function captureDevicePairingInviteFromLocation(
+  location: Location = window.location,
+): string | undefined {
+  if (!location.hash.startsWith("#pair=") && !location.hash.startsWith("#pair?")) {
+    return undefined;
+  }
+  let capturedInvitation: string | undefined;
+  try {
+    capturedInvitation = encodeDevicePairingInvitation(parseDevicePairingInvitation(location.href));
+    pendingInvitation = capturedInvitation;
+    return capturedInvitation;
+  } catch {
+    return undefined;
+  } finally {
+    if (typeof window !== "undefined" && location === window.location) {
+      window.history.replaceState(
+        window.history.state,
+        document.title,
+        `${location.pathname}${location.search}`,
+      );
+      if (capturedInvitation) {
+        window.dispatchEvent(
+          new CustomEvent(DEVICE_PAIRING_INVITE_CAPTURED_EVENT, {
+            detail: capturedInvitation,
+          }),
+        );
+      }
+    }
+  }
+}
+
+/** Returns the in-memory invitation without consuming it. */
+export function readPendingDevicePairingInvite(): string | undefined {
+  return pendingInvitation;
+}
+
+/** Returns and erases the in-memory invitation. */
+export function consumePendingDevicePairingInvite(): string | undefined {
+  const invitation = pendingInvitation;
+  pendingInvitation = undefined;
+  return invitation;
+}
+
+/** Erases any unconsumed invitation. */
+export function clearPendingDevicePairingInvite(): void {
+  pendingInvitation = undefined;
+}

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

@@ -0,0 +1,100 @@
+import { type DevicePairingState, rpcServerCalls } from "@peers-app/peers-sdk";
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { DestinationDevicePairing, SourceDevicePairing } from "./device-pairing";
+
+const mockRpc = {
+  startSource: jest.fn(),
+  startDestination: jest.fn(),
+  approve: jest.fn(),
+  reject: jest.fn(),
+  cancel: jest.fn(),
+};
+let mockPairingState: DevicePairingState = { phase: "idle" };
+
+rpcServerCalls.devicePairingStartSource =
+  mockRpc.startSource as typeof rpcServerCalls.devicePairingStartSource;
+rpcServerCalls.devicePairingStartDestination =
+  mockRpc.startDestination as typeof rpcServerCalls.devicePairingStartDestination;
+rpcServerCalls.devicePairingApprove = mockRpc.approve as typeof rpcServerCalls.devicePairingApprove;
+rpcServerCalls.devicePairingReject = mockRpc.reject as typeof rpcServerCalls.devicePairingReject;
+rpcServerCalls.devicePairingCancel = mockRpc.cancel as typeof rpcServerCalls.devicePairingCancel;
+
+jest.mock("./use-device-pairing-state", () => ({
+  useDevicePairingState: () => mockPairingState,
+}));
+
+describe("device pairing UI lifecycle", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockPairingState = { phase: "idle" };
+    mockRpc.cancel.mockResolvedValue({ phase: "idle" });
+  });
+
+  it("uses the host-owned invitation URL and cancels a source that resolves after unmount", async () => {
+    let resolveStart!: (value: { state: DevicePairingState; invitationUrl: string }) => void;
+    mockRpc.startSource.mockReturnValue(
+      new Promise((resolve) => {
+        resolveStart = resolve;
+      }),
+    );
+    const view = render(<SourceDevicePairing onClose={jest.fn()} />);
+
+    expect(mockRpc.startSource).toHaveBeenCalledWith();
+    view.unmount();
+    resolveStart({
+      state: { sessionId: "00mh0wlipkdbeaw8tests0001", role: "source", phase: "inviting" },
+      invitationUrl: "https://peers.app/?app#pair=token",
+    });
+
+    await waitFor(() => {
+      expect(mockRpc.cancel).toHaveBeenCalledWith({
+        sessionId: "00mh0wlipkdbeaw8tests0001",
+      });
+    });
+  });
+
+  it("keeps source cancellation available while waiting for remote approval", async () => {
+    const onClose = jest.fn();
+    mockPairingState = {
+      sessionId: "00mh0wlipkdbeaw8tests0002",
+      role: "source",
+      phase: "waiting-for-approval",
+    };
+    mockRpc.startSource.mockResolvedValue({
+      state: mockPairingState,
+      invitationUrl: "https://peers.app/?app#pair=token",
+    });
+    const view = render(<SourceDevicePairing onClose={onClose} />);
+    await waitFor(() => expect(mockRpc.startSource).toHaveBeenCalled());
+
+    fireEvent.click(view.getByRole("button", { name: "Cancel" }));
+
+    await waitFor(() => {
+      expect(mockRpc.cancel).toHaveBeenCalledWith({
+        sessionId: "00mh0wlipkdbeaw8tests0002",
+      });
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  it("does not clear the destination success reload when Done unmounts the flow", () => {
+    jest.useFakeTimers();
+    mockPairingState = {
+      sessionId: "00mh0wlipkdbeaw8tests0003",
+      role: "destination",
+      phase: "complete",
+    };
+    const setTimeoutSpy = jest.spyOn(window, "setTimeout");
+    const clearTimeoutSpy = jest.spyOn(window, "clearTimeout");
+    const view = render(<DestinationDevicePairing onBack={jest.fn()} />);
+    const reloadTimer = setTimeoutSpy.mock.calls.find(([, delay]) => delay === 750);
+
+    expect(reloadTimer).toBeDefined();
+    view.unmount();
+    expect(clearTimeoutSpy).not.toHaveBeenCalled();
+
+    setTimeoutSpy.mockRestore();
+    clearTimeoutSpy.mockRestore();
+    jest.useRealTimers();
+  });
+});