@peers-app/peers-ui 0.20.6 → 0.21.1

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/packages/package-helpers.d.ts

@@ -29,5 +29,26 @@ export declare function isGroupAdmin(): Promise<boolean>;
  * @param pv - The package version to activate.
  */
 export declare function activatePackageVersion(packageId: string, pv: IPackageVersion): Promise<void>;
+/**
+ * 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 declare function maybeActivateAfterPromote(packageId: string, promotedPv: IPackageVersion, opts: {
+    wasEffectiveActive: boolean;
+    groupFollowTags: string | undefined;
+    groupPinned: boolean;
+}): Promise<boolean>;
 /** Numeric rank for sorting packages by update urgency. */
 export declare const updateLevelRank: Record<string, number>;

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

@@ -4,6 +4,7 @@ exports.updateLevelRank = void 0;
 exports.checkVersionStatus = checkVersionStatus;
 exports.isGroupAdmin = isGroupAdmin;
 exports.activatePackageVersion = activatePackageVersion;
+exports.maybeActivateAfterPromote = maybeActivateAfterPromote;
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 /**
  * Check a package's version status: what's currently active, whether a newer
@@ -106,5 +107,36 @@ async function activatePackageVersion(packageId, pv) {
         await (0, peers_sdk_1.updatePackagePrefs)(packageId, { activePackageVersionId: pv.packageVersionId });
     }
 }
+/**
+ * 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
+ */
+async function maybeActivateAfterPromote(packageId, promotedPv, opts) {
+    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 (!(0, peers_sdk_1.doesTagMatch)(undefined, promotedPv.versionTag, followTags, undefined)) {
+        return false;
+    }
+    await activatePackageVersion(packageId, promotedPv);
+    return true;
+}
 /** Numeric rank for sorting packages by update urgency. */
 exports.updateLevelRank = { major: 3, minor: 2, patch: 1 };

package/dist/screens/packages/package-versions.d.ts

@@ -1,4 +1,5 @@
 import { type IDoc, type IPackage } from "@peers-app/peers-sdk";
+/** Lists package versions with activate, promote, pin, edit-semver, and delete actions. */
 export declare const PackageVersionsList: (props: {
     pkg: IDoc<IPackage>;
 }) => import("react/jsx-runtime").JSX.Element;