@peers-app/peers-ui 0.20.6 → 0.21.0

package/dist/root-layout/root-layout-host.js

@@ -21,6 +21,7 @@ const command_palette_ui_1 = require("../command-palette/command-palette-ui");
 const globals_1 = require("../globals");
 const hooks_1 = require("../hooks");
 const user_connect_invite_1 = require("../screens/contacts/user-connect-invite");
+const device_pairing_1 = require("../screens/device-pairing");
 const color_mode_dropdown_1 = require("../screens/settings/color-mode-dropdown");
 const setup_user_1 = require("../screens/setup-user");
 const welcome_modal_1 = require("../screens/welcome-modal");
@@ -36,6 +37,7 @@ const root_layout_state_1 = require("./root-layout-state");
  */
 function RootLayoutHost() {
     (0, react_1.useState)(() => {
+        (0, device_pairing_1.captureDevicePairingInviteFromLocation)();
         (0, user_connect_invite_1.captureUserConnectInviteFromLocation)();
         return true;
     });
@@ -48,6 +50,7 @@ function RootLayoutHost() {
     (0, react_1.useEffect)(() => {
         const captureInviteFromHashChange = () => {
             const previousHash = window.location.hash;
+            (0, device_pairing_1.captureDevicePairingInviteFromLocation)();
             (0, user_connect_invite_1.captureUserConnectInviteFromLocation)();
             if (window.location.hash === previousHash) {
                 return;

package/dist/screens/device-pairing/device-pairing-invite.d.ts

@@ -0,0 +1,10 @@
+/** Browser event emitted after a pairing invitation is captured and removed from the URL. */
+export declare const DEVICE_PAIRING_INVITE_CAPTURED_EVENT = "device-pairing:invite-captured";
+/** Captures a pairing fragment in memory and immediately removes it from browser history. */
+export declare function captureDevicePairingInviteFromLocation(location?: Location): string | undefined;
+/** Returns the in-memory invitation without consuming it. */
+export declare function readPendingDevicePairingInvite(): string | undefined;
+/** Returns and erases the in-memory invitation. */
+export declare function consumePendingDevicePairingInvite(): string | undefined;
+/** Erases any unconsumed invitation. */
+export declare function clearPendingDevicePairingInvite(): void;

package/dist/screens/device-pairing/device-pairing-invite.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEVICE_PAIRING_INVITE_CAPTURED_EVENT = void 0;
+exports.captureDevicePairingInviteFromLocation = captureDevicePairingInviteFromLocation;
+exports.readPendingDevicePairingInvite = readPendingDevicePairingInvite;
+exports.consumePendingDevicePairingInvite = consumePendingDevicePairingInvite;
+exports.clearPendingDevicePairingInvite = clearPendingDevicePairingInvite;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+let pendingInvitation;
+/** Browser event emitted after a pairing invitation is captured and removed from the URL. */
+exports.DEVICE_PAIRING_INVITE_CAPTURED_EVENT = "device-pairing:invite-captured";
+/** Captures a pairing fragment in memory and immediately removes it from browser history. */
+function captureDevicePairingInviteFromLocation(location = window.location) {
+    if (!location.hash.startsWith("#pair=") && !location.hash.startsWith("#pair?")) {
+        return undefined;
+    }
+    let capturedInvitation;
+    try {
+        capturedInvitation = (0, peers_sdk_1.encodeDevicePairingInvitation)((0, peers_sdk_1.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(exports.DEVICE_PAIRING_INVITE_CAPTURED_EVENT, {
+                    detail: capturedInvitation,
+                }));
+            }
+        }
+    }
+}
+/** Returns the in-memory invitation without consuming it. */
+function readPendingDevicePairingInvite() {
+    return pendingInvitation;
+}
+/** Returns and erases the in-memory invitation. */
+function consumePendingDevicePairingInvite() {
+    const invitation = pendingInvitation;
+    pendingInvitation = undefined;
+    return invitation;
+}
+/** Erases any unconsumed invitation. */
+function clearPendingDevicePairingInvite() {
+    pendingInvitation = undefined;
+}

package/dist/screens/device-pairing/device-pairing-invite.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/screens/device-pairing/device-pairing-invite.test.js

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

package/dist/screens/device-pairing/device-pairing.d.ts

@@ -0,0 +1,10 @@
+/** Signed-in source flow opened from Settings. */
+export declare function SourceDevicePairing(props: {
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+/** Signed-out destination flow opened by a QR link or manual invitation paste. */
+export declare function DestinationDevicePairing(props: {
+    initialInvitation?: string;
+    onInvitationConsumed?: () => void;
+    onBack: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/screens/device-pairing/device-pairing.js

@@ -0,0 +1,237 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SourceDevicePairing = SourceDevicePairing;
+exports.DestinationDevicePairing = DestinationDevicePairing;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
+const react_qr_code_1 = __importDefault(require("react-qr-code"));
+const use_device_pairing_state_1 = require("./use-device-pairing-state");
+function formatCountdown(expiresAt) {
+    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 }) {
+    const messages = {
+        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 ((0, jsx_runtime_1.jsxs)("output", { className: "text-center py-4 d-block", children: [(0, jsx_runtime_1.jsx)("div", { className: "spinner-border text-primary mb-3", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-0", children: messages[state.phase] ?? "Working…" })] }));
+}
+function PairingComparison(props) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 440, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("h4", { children: "Compare these numbers" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "Confirm that both devices show the same number and the expected device before approving." }), (0, jsx_runtime_1.jsx)("div", { className: "display-4 font-monospace text-primary mb-3", style: { letterSpacing: "0.12em" }, children: props.state.sas }), (0, jsx_runtime_1.jsxs)("p", { className: "mb-4", children: [props.state.remoteDevice?.deviceName || "Unnamed device", props.state.remoteDevice?.deviceType ? ` (${props.state.remoteDevice.deviceType})` : ""] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary", disabled: props.approving, onClick: props.onApprove, children: props.approving ? "Approving…" : "Numbers match — approve" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-danger", disabled: props.approving, onClick: props.onReject, children: "Reject" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", disabled: props.approving, onClick: props.onCancel, children: "Cancel" })] })] }));
+}
+function TerminalPanel(props) {
+    const complete = props.state.phase === "complete";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 440, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("output", { className: `alert d-block ${complete ? "alert-success" : "alert-warning"}`, children: 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." }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onClose, children: complete ? "Done" : "Back" })] }));
+}
+function ProgressWithCancel(props) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PairingProgress, { state: props.state }), (0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onCancel, children: "Cancel" }) })] }));
+}
+function usePairingSessionLifecycle(state) {
+    const sessionId = (0, react_1.useRef)(undefined);
+    const phase = (0, react_1.useRef)("idle");
+    const mounted = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        if (state.sessionId && state.sessionId === sessionId.current) {
+            phase.current = state.phase;
+        }
+    }, [state.phase, state.sessionId]);
+    (0, react_1.useEffect)(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+            const activeSessionId = sessionId.current;
+            if (activeSessionId && !["idle", "complete", "rejected", "error"].includes(phase.current)) {
+                void peers_sdk_1.rpcServerCalls
+                    .devicePairingCancel({ sessionId: activeSessionId })
+                    .catch(() => undefined);
+            }
+        };
+    }, []);
+    return { sessionId, phase, mounted };
+}
+/** Signed-in source flow opened from Settings. */
+function SourceDevicePairing(props) {
+    const state = (0, use_device_pairing_state_1.useDevicePairingState)();
+    const lifecycle = usePairingSessionLifecycle(state);
+    const started = (0, react_1.useRef)(false);
+    const [invitationUrl, setInvitationUrl] = (0, react_1.useState)("");
+    const [localError, setLocalError] = (0, react_1.useState)("");
+    const [approving, setApproving] = (0, react_1.useState)(false);
+    const [, setClock] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (started.current) {
+            return;
+        }
+        started.current = true;
+        void peers_sdk_1.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 peers_sdk_1.rpcServerCalls
+                    .devicePairingCancel({ sessionId: result.state.sessionId })
+                    .catch(() => undefined);
+                return;
+            }
+            setInvitationUrl(result.invitationUrl);
+        })
+            .catch(() => setLocalError("Could not create a pairing invitation."));
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!state.expiresAt) {
+            return;
+        }
+        const timer = window.setInterval(() => setClock((value) => value + 1), 1000);
+        return () => window.clearInterval(timer);
+    }, [state.expiresAt]);
+    (0, react_1.useEffect)(() => {
+        if (state.phase !== "inviting") {
+            setInvitationUrl("");
+        }
+    }, [state.phase]);
+    const act = async (action) => {
+        const sessionId = lifecycle.sessionId.current;
+        if (!sessionId) {
+            return;
+        }
+        setApproving(true);
+        try {
+            if (action === "approve") {
+                await peers_sdk_1.rpcServerCalls.devicePairingApprove({ sessionId });
+            }
+            else {
+                await peers_sdk_1.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 peers_sdk_1.rpcServerCalls.devicePairingCancel({ sessionId }).catch(() => undefined);
+        }
+        props.onClose();
+    };
+    if (localError) {
+        return (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger", children: localError });
+    }
+    if (["complete", "rejected", "error"].includes(state.phase)) {
+        return (0, jsx_runtime_1.jsx)(TerminalPanel, { state: state, onClose: props.onClose });
+    }
+    if (state.phase === "comparing" && state.sas) {
+        return ((0, jsx_runtime_1.jsx)(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 (0, jsx_runtime_1.jsx)(ProgressWithCancel, { state: state, onCancel: () => void cancel() });
+    }
+    if (invitationUrl) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 440, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "Scan this on the signed-out device you want to add." }), (0, jsx_runtime_1.jsx)("div", { className: "d-inline-block bg-white rounded p-3 mb-3", children: (0, jsx_runtime_1.jsx)(react_qr_code_1.default, { value: invitationUrl, size: 220, "aria-label": "Device pairing QR code" }) }), (0, jsx_runtime_1.jsxs)("p", { className: "small text-muted", children: ["Expires in ", formatCountdown(state.expiresAt)] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary", onClick: () => void (0, peers_sdk_1.copyToClipboard)(invitationUrl), children: "Copy pairing link" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: () => void cancel(), children: "Cancel" })] })] }));
+    }
+    return (0, jsx_runtime_1.jsx)(PairingProgress, { state: state });
+}
+/** Signed-out destination flow opened by a QR link or manual invitation paste. */
+function DestinationDevicePairing(props) {
+    const state = (0, use_device_pairing_state_1.useDevicePairingState)();
+    const lifecycle = usePairingSessionLifecycle(state);
+    const [invitation, setInvitation] = (0, react_1.useState)(props.initialInvitation ?? "");
+    const [localError, setLocalError] = (0, react_1.useState)("");
+    const [approving, setApproving] = (0, react_1.useState)(false);
+    const autoStarted = (0, react_1.useRef)(false);
+    const start = async (value = invitation) => {
+        setLocalError("");
+        try {
+            const result = await peers_sdk_1.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 peers_sdk_1.rpcServerCalls
+                    .devicePairingCancel({ sessionId: result.sessionId })
+                    .catch(() => undefined);
+                return;
+            }
+            setInvitation("");
+            props.onInvitationConsumed?.();
+        }
+        catch {
+            setLocalError("That pairing invitation is invalid, expired, or unavailable.");
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (!props.initialInvitation || autoStarted.current) {
+            return;
+        }
+        autoStarted.current = true;
+        void start(props.initialInvitation);
+    }, [props.initialInvitation]);
+    (0, react_1.useEffect)(() => {
+        if (state.phase !== "complete") {
+            return;
+        }
+        window.setTimeout(() => window.location.reload(), 750);
+    }, [state.phase]);
+    const act = async (action) => {
+        const sessionId = lifecycle.sessionId.current;
+        if (!sessionId) {
+            return;
+        }
+        setApproving(true);
+        try {
+            if (action === "approve") {
+                await peers_sdk_1.rpcServerCalls.devicePairingApprove({ sessionId });
+            }
+            else {
+                await peers_sdk_1.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 peers_sdk_1.rpcServerCalls.devicePairingCancel({ sessionId }).catch(() => undefined);
+        }
+        props.onBack();
+    };
+    if (["complete", "rejected", "error"].includes(state.phase)) {
+        return (0, jsx_runtime_1.jsx)(TerminalPanel, { state: state, onClose: props.onBack });
+    }
+    if (state.phase === "comparing" && state.sas) {
+        return ((0, jsx_runtime_1.jsx)(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 (0, jsx_runtime_1.jsx)(ProgressWithCancel, { state: state, onCancel: () => void cancel() });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 500, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("h3", { children: "Sign in using another device" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "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." }), (0, jsx_runtime_1.jsx)("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 ? (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger", children: localError }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "d-grid gap-2", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary btn-lg", disabled: !invitation.trim(), onClick: () => void start(), children: "Connect securely" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onBack, children: "Back" })] })] }));
+}

package/dist/screens/device-pairing/device-pairing.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/screens/device-pairing/device-pairing.test.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("@testing-library/react");
+const device_pairing_1 = require("./device-pairing");
+const mockRpc = {
+    startSource: jest.fn(),
+    startDestination: jest.fn(),
+    approve: jest.fn(),
+    reject: jest.fn(),
+    cancel: jest.fn(),
+};
+let mockPairingState = { phase: "idle" };
+peers_sdk_1.rpcServerCalls.devicePairingStartSource =
+    mockRpc.startSource;
+peers_sdk_1.rpcServerCalls.devicePairingStartDestination =
+    mockRpc.startDestination;
+peers_sdk_1.rpcServerCalls.devicePairingApprove = mockRpc.approve;
+peers_sdk_1.rpcServerCalls.devicePairingReject = mockRpc.reject;
+peers_sdk_1.rpcServerCalls.devicePairingCancel = mockRpc.cancel;
+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;
+        mockRpc.startSource.mockReturnValue(new Promise((resolve) => {
+            resolveStart = resolve;
+        }));
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(device_pairing_1.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 (0, react_1.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 = (0, react_1.render)((0, jsx_runtime_1.jsx)(device_pairing_1.SourceDevicePairing, { onClose: onClose }));
+        await (0, react_1.waitFor)(() => expect(mockRpc.startSource).toHaveBeenCalled());
+        react_1.fireEvent.click(view.getByRole("button", { name: "Cancel" }));
+        await (0, react_1.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 = (0, react_1.render)((0, jsx_runtime_1.jsx)(device_pairing_1.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();
+    });
+});

package/dist/screens/device-pairing/index.d.ts

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

package/dist/screens/device-pairing/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./device-pairing"), exports);
+__exportStar(require("./device-pairing-invite"), exports);
+__exportStar(require("./use-device-pairing-state"), exports);

package/dist/screens/device-pairing/use-device-pairing-state.d.ts

@@ -0,0 +1,3 @@
+import { type DevicePairingState } from "@peers-app/peers-sdk";
+/** Subscribes to renderer-safe host pairing state and loads its current snapshot. */
+export declare function useDevicePairingState(): DevicePairingState;

package/dist/screens/device-pairing/use-device-pairing-state.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDevicePairingState = useDevicePairingState;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
+const IDLE_PAIRING_STATE = { phase: "idle" };
+/** Subscribes to renderer-safe host pairing state and loads its current snapshot. */
+function useDevicePairingState() {
+    const [state, setState] = (0, react_1.useState)(IDLE_PAIRING_STATE);
+    (0, react_1.useEffect)(() => {
+        let active = true;
+        const subscription = (0, peers_sdk_1.subscribe)(peers_sdk_1.DEVICE_PAIRING_STATE_EVENT, (event) => {
+            if (active) {
+                setState(peers_sdk_1.devicePairingStateSchema.parse(event.data));
+            }
+        });
+        void peers_sdk_1.rpcServerCalls
+            .devicePairingGetState()
+            .then((value) => {
+            if (active) {
+                setState(peers_sdk_1.devicePairingStateSchema.parse(value));
+            }
+        })
+            .catch(() => undefined);
+        return () => {
+            active = false;
+            subscription.unsubscribe();
+        };
+    }, []);
+    return state;
+}

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) {