@peers-app/peers-ui 0.20.3 → 0.20.5

package/dist/screens/contacts/user-connect.test.js

@@ -0,0 +1,291 @@
+"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 globals_1 = require("../../globals");
+const user_connect_1 = require("./user-connect");
+const user_connect_invite_1 = require("./user-connect-invite");
+jest.mock("../../globals", () => ({
+    mainContentPath: jest.fn(),
+}));
+jest.mock("../../ui-router/ui-loader", () => ({
+    registerInternalPeersUI: jest.fn(),
+}));
+jest.mock("../../hooks", () => {
+    const React = jest.requireActual("react");
+    return {
+        useObservable: (observable) => {
+            const [value, setValue] = React.useState(observable());
+            React.useEffect(() => {
+                const subscription = observable.subscribe(() => setValue(observable()));
+                return () => subscription.dispose();
+            }, [observable]);
+            return [value, observable];
+        },
+    };
+});
+jest.mock("@peers-app/peers-sdk", () => {
+    const actual = jest.requireActual("@peers-app/peers-sdk");
+    const createObservable = (initial) => {
+        let value = initial;
+        const listeners = new Set();
+        const observable = jest.fn((next) => {
+            if (next !== undefined) {
+                value = next;
+                for (const listener of listeners)
+                    listener();
+            }
+            return value;
+        });
+        observable.subscribe = (listener) => {
+            listeners.add(listener);
+            return { dispose: () => listeners.delete(listener) };
+        };
+        observable.loadingPromise = Promise.resolve();
+        observable.reset = (next) => {
+            value = next;
+            for (const listener of listeners)
+                listener();
+        };
+        return observable;
+    };
+    const idle = { kind: "idle" };
+    const status = createObservable(idle);
+    const offer = createObservable("");
+    const answer = createObservable("");
+    const remoteUser = {
+        userId: "remote-user",
+        name: "Ada",
+        publicKey: "remote-public-key",
+        publicBoxKey: "remote-public-box-key",
+    };
+    return {
+        ...actual,
+        copyToClipboard: jest.fn(async () => true),
+        Devices: jest.fn(() => ({
+            get: jest.fn(async () => ({ deviceId: "remote-device", userId: remoteUser.userId })),
+        })),
+        generateConnectionCode: jest.fn(() => ({
+            code: "ABCD1234EFGH",
+            alias: "ABCD",
+            secret: "1234EFGH",
+        })),
+        getMe: jest.fn(async () => ({
+            userId: "local-user",
+            name: "Grace",
+            publicKey: "local-public-key",
+            publicBoxKey: "local-public-box-key",
+        })),
+        getUserContext: jest.fn(async () => ({
+            userDataContext: {},
+            deviceId: () => "local-device",
+        })),
+        rpcServerCalls: {
+            ...actual.rpcServerCalls,
+            listConnectedDevices: jest.fn(async () => [
+                {
+                    deviceId: "route-device",
+                    userId: "route-user",
+                    connectionId: "route-connection",
+                    trustLevel: 0,
+                    verified: true,
+                },
+            ]),
+        },
+        setUserTrustLevel: jest.fn(async () => undefined),
+        Users: jest.fn(() => ({
+            get: jest.fn(async () => remoteUser),
+        })),
+        userConnectCodeAnswer: answer,
+        userConnectCodeOffer: offer,
+        userConnectStatus: status,
+    };
+});
+const sdk = jest.requireMock("@peers-app/peers-sdk");
+const validCode = "ABCD1234EFGH";
+function resetMocks() {
+    sessionStorage.clear();
+    window.history.replaceState(null, "", "/");
+    sdk.userConnectStatus.reset({ kind: "idle" });
+    sdk.userConnectCodeOffer.reset("");
+    sdk.userConnectCodeAnswer.reset("");
+    jest.clearAllMocks();
+}
+describe("UserConnect", () => {
+    beforeEach(() => {
+        resetMocks();
+    });
+    afterEach(() => {
+        jest.useRealTimers();
+        Reflect.deleteProperty(navigator, "share");
+    });
+    it("starts with a QR invite and readable fallback code", async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        expect(await react_1.screen.findByText("Ask the other person to scan this with their camera")).toBeVisible();
+        expect(react_1.screen.getByLabelText("Connection QR code")).toBeVisible();
+        expect(react_1.screen.getByLabelText("Connection code")).toHaveValue("ABCD-1234-EFGH");
+        expect(sdk.userConnectCodeOffer).toHaveBeenCalledWith(validCode);
+    });
+    it("opens a captured inbound invite in review without auto-submitting", async () => {
+        (0, user_connect_invite_1.writeUserConnectPendingIntent)({ code: validCode, capturedAt: Date.now() });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        expect(await react_1.screen.findByText("You opened a connection invite")).toBeVisible();
+        expect(react_1.screen.getByText("ABCD-1234-EFGH")).toBeVisible();
+        expect(sdk.userConnectCodeAnswer).not.toHaveBeenCalledWith(validCode);
+    });
+    it("keeps an unconfirmed invite available across a screen remount", async () => {
+        window.history.replaceState(null, "", "/#contacts/connect");
+        (0, user_connect_invite_1.writeUserConnectPendingIntent)({ code: validCode, capturedAt: Date.now() });
+        const firstRender = (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        expect(await react_1.screen.findByText("You opened a connection invite")).toBeVisible();
+        firstRender.unmount();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        expect(await react_1.screen.findByText("You opened a connection invite")).toBeVisible();
+        expect(react_1.screen.getByText("ABCD-1234-EFGH")).toBeVisible();
+    });
+    it("clears an unconfirmed invite when navigating away", async () => {
+        window.history.replaceState(null, "", "/#contacts/connect");
+        (0, user_connect_invite_1.writeUserConnectPendingIntent)({ code: validCode, capturedAt: Date.now() });
+        const rendered = (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        expect(await react_1.screen.findByText("You opened a connection invite")).toBeVisible();
+        window.history.replaceState(null, "", "/#contacts");
+        rendered.unmount();
+        expect((0, user_connect_invite_1.readUserConnectPendingIntent)()).toEqual({ ok: false, reason: "none" });
+    });
+    it("captures an invite opened while the screen is already mounted", async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        await react_1.screen.findByText("Ask the other person to scan this with their camera");
+        window.history.replaceState(null, "", `/?app#contacts/connect?code=${encodeURIComponent("ABCD-1234-EFGH")}`);
+        (0, react_1.fireEvent)(window, new HashChangeEvent("hashchange"));
+        expect(await react_1.screen.findByText("You opened a connection invite")).toBeVisible();
+        expect(react_1.screen.getByText("ABCD-1234-EFGH")).toBeVisible();
+        expect(window.location.hash).toBe("#contacts/connect");
+        expect(sdk.userConnectCodeOffer).toHaveBeenCalledWith("");
+        expect(sdk.userConnectCodeAnswer).not.toHaveBeenCalledWith(validCode);
+    });
+    it("copies the complete invite link", async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        react_1.fireEvent.click(await react_1.screen.findByRole("button", { name: "Copy link" }));
+        await (0, react_1.waitFor)(() => {
+            expect(sdk.copyToClipboard).toHaveBeenCalledWith((0, user_connect_invite_1.buildUserConnectInviteUrl)(validCode));
+        });
+        expect((await react_1.screen.findAllByText("Link copied")).length).toBeGreaterThan(0);
+    });
+    it("shares the complete invite through the Web Share API", async () => {
+        const share = jest.fn(async () => undefined);
+        Object.defineProperty(navigator, "share", {
+            configurable: true,
+            value: share,
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        react_1.fireEvent.click(await react_1.screen.findByRole("button", { name: "Share link" }));
+        await (0, react_1.waitFor)(() => {
+            expect(share).toHaveBeenCalledWith(expect.objectContaining({
+                title: "Connect on Peers",
+                url: (0, user_connect_invite_1.buildUserConnectInviteUrl)(validCode),
+                text: expect.stringContaining("expires in 10 minutes"),
+            }));
+        });
+    });
+    it("stops waiting when the invite expires", async () => {
+        jest.useFakeTimers();
+        jest.setSystemTime(new Date("2026-07-16T12:00:00Z"));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        await (0, react_1.act)(async () => {
+            jest.advanceTimersByTime(600_000);
+        });
+        expect(react_1.screen.getByText("Invite expired")).toBeVisible();
+        expect(sdk.userConnectCodeOffer).toHaveBeenCalledWith("");
+    });
+    it("submits an inbound invite only once on a double click", async () => {
+        (0, user_connect_invite_1.writeUserConnectPendingIntent)({ code: validCode, capturedAt: Date.now() });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        const connect = await react_1.screen.findByRole("button", { name: "Connect" });
+        react_1.fireEvent.click(connect);
+        react_1.fireEvent.click(connect);
+        expect(sdk.userConnectCodeAnswer.mock.calls.filter(([code]) => code === validCode)).toHaveLength(1);
+        expect((0, user_connect_invite_1.readUserConnectPendingIntent)()).toEqual({ ok: false, reason: "none" });
+    });
+    it("rechecks invite expiry before confirming review", async () => {
+        jest.useFakeTimers();
+        jest.setSystemTime(new Date("2026-07-16T12:00:00Z"));
+        (0, user_connect_invite_1.writeUserConnectPendingIntent)({ code: validCode, capturedAt: Date.now() });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        const connect = await react_1.screen.findByRole("button", { name: "Connect" });
+        jest.setSystemTime(new Date("2026-07-16T12:10:00Z"));
+        react_1.fireEvent.click(connect);
+        expect(react_1.screen.getByText("Invite expired")).toBeVisible();
+        expect(sdk.userConnectCodeAnswer).not.toHaveBeenCalledWith(validCode);
+    });
+    it("does not treat the initial idle status as a canceled connection", async () => {
+        (0, user_connect_invite_1.writeUserConnectPendingIntent)({ code: validCode, capturedAt: Date.now() });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        react_1.fireEvent.click(await react_1.screen.findByRole("button", { name: "Connect" }));
+        expect(react_1.screen.getByText("Connecting…")).toBeVisible();
+        expect(react_1.screen.queryByText("Connection canceled")).not.toBeInTheDocument();
+    });
+    it("leaves connecting when the answer expires back to idle", async () => {
+        (0, user_connect_invite_1.writeUserConnectPendingIntent)({ code: validCode, capturedAt: Date.now() });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        react_1.fireEvent.click(await react_1.screen.findByRole("button", { name: "Connect" }));
+        (0, react_1.act)(() => {
+            sdk.userConnectCodeAnswer("");
+            sdk.userConnectStatus({ kind: "idle" });
+        });
+        expect(await react_1.screen.findByText("Invite expired")).toBeVisible();
+    });
+    it("reports cancellation when an active protocol resets to idle", async () => {
+        (0, user_connect_invite_1.writeUserConnectPendingIntent)({ code: validCode, capturedAt: Date.now() });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        react_1.fireEvent.click(await react_1.screen.findByRole("button", { name: "Connect" }));
+        (0, react_1.act)(() => {
+            sdk.userConnectStatus({ kind: "connecting", attempt: 1 });
+        });
+        (0, react_1.act)(() => {
+            sdk.userConnectStatus({ kind: "idle" });
+        });
+        expect(await react_1.screen.findByText("Connection canceled")).toBeVisible();
+    });
+    it("renders actionable structured errors", async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        (0, react_1.act)(() => {
+            sdk.userConnectStatus({ kind: "error", code: "no-route" });
+        });
+        expect(await react_1.screen.findByText("This device isn’t connected yet")).toBeVisible();
+        expect(react_1.screen.getByText("Connect this device to the internet or another Peers device, then try again.")).toBeVisible();
+    });
+    it("trusts only when the primary success action is selected", async () => {
+        (0, user_connect_invite_1.writeUserConnectPendingIntent)({ code: validCode, capturedAt: Date.now() });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        react_1.fireEvent.click(await react_1.screen.findByRole("button", { name: "Connect" }));
+        (0, react_1.act)(() => {
+            sdk.userConnectStatus({
+                kind: "connected",
+                remoteUserId: "remote-user",
+                remoteDeviceId: "remote-device",
+            });
+        });
+        react_1.fireEvent.click(await react_1.screen.findByRole("button", { name: "Trust and view contact" }));
+        await (0, react_1.waitFor)(() => {
+            expect(sdk.Devices.mock.results.at(-1)?.value.get).toHaveBeenCalledWith("remote-device");
+            expect(sdk.setUserTrustLevel).toHaveBeenCalledWith("remote-user", peers_sdk_1.TrustLevel.Trusted, expect.anything());
+            expect(globals_1.mainContentPath).toHaveBeenCalledWith("contacts/remote-user");
+        });
+    });
+    it("can view a connected contact without changing trust", async () => {
+        (0, user_connect_invite_1.writeUserConnectPendingIntent)({ code: validCode, capturedAt: Date.now() });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(user_connect_1.UserConnect, {}));
+        react_1.fireEvent.click(await react_1.screen.findByRole("button", { name: "Connect" }));
+        (0, react_1.act)(() => {
+            sdk.userConnectStatus({
+                kind: "connected",
+                remoteUserId: "remote-user",
+                remoteDeviceId: "remote-device",
+            });
+        });
+        react_1.fireEvent.click(await react_1.screen.findByRole("button", { name: "View without trusting" }));
+        expect(sdk.setUserTrustLevel).not.toHaveBeenCalled();
+        expect(globals_1.mainContentPath).toHaveBeenCalledWith("contacts/remote-user");
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.20.3",
+  "version": "0.20.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -28,18 +28,18 @@
     "lint:fix": "biome check --write ."
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.20.3",
+    "@peers-app/peers-sdk": "^0.20.5",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.11",
     "@babel/core": "^7.24.5",
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@peers-app/peers-sdk": "0.20.3",
+    "@biomejs/biome": "2.3.11",
+    "@peers-app/peers-sdk": "0.20.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -98,6 +98,7 @@
     "moment-timezone": "^0.5.46",
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^9.0.1",
+    "react-qr-code": "^2.2.0",
     "react-tiny-popover": "^8.0.4",
     "remark-gfm": "^4.0.0",
     "socket.io": "^4.7.5",

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

@@ -0,0 +1,106 @@
+import { fireEvent, render } from "@testing-library/react";
+import { mainContentPath } from "../globals";
+import { readUserConnectPendingIntent } from "../screens/contacts/user-connect-invite";
+import { RootLayoutHost } from "./root-layout-host";
+
+jest.mock("@peers-app/peers-sdk", () => {
+  const actual = jest.requireActual<typeof import("@peers-app/peers-sdk")>("@peers-app/peers-sdk");
+  return {
+    ...actual,
+    hasShownWelcomeModal: Object.assign(
+      jest.fn(() => true),
+      {
+        loadingPromise: Promise.resolve(),
+      },
+    ),
+    rpcServerCalls: {
+      ...actual.rpcServerCalls,
+      getUserId: jest.fn(async () => "local-user"),
+    },
+    setDefaultClientUserContext: jest.fn(),
+  };
+});
+
+jest.mock("../command-palette/command-palette-ui", () => ({
+  CommandPaletteOverlay: () => null,
+}));
+
+jest.mock("../globals", () => ({
+  loadGlobals: jest.fn(async () => true),
+  mainContentPath: jest.fn(),
+}));
+
+jest.mock("../hooks", () => ({
+  useObservable: (observable: () => unknown) => [observable(), observable],
+  usePromise: (promiseOrFactory: unknown) => {
+    if (
+      typeof promiseOrFactory === "function" &&
+      Function.prototype.toString.call(promiseOrFactory).includes("getUserId")
+    ) {
+      return "local-user";
+    }
+    return true;
+  },
+}));
+
+jest.mock("../screens/settings/color-mode-dropdown", () => ({
+  colorMode: jest.fn(() => "light"),
+}));
+
+jest.mock("../screens/setup-user", () => ({
+  SetupUser: () => null,
+}));
+
+jest.mock("../screens/welcome-modal", () => ({
+  WelcomeModal: () => null,
+}));
+
+jest.mock("../tabs-layout/tabs-state", () => ({
+  activeTabId: { loadingPromise: Promise.resolve() },
+  activeTabs: { loadingPromise: Promise.resolve() },
+  recentlyUsedApps: { loadingPromise: Promise.resolve() },
+}));
+
+jest.mock("../ui-router/routes-loader", () => ({
+  loadAllRoutes: jest.fn(async () => undefined),
+}));
+
+jest.mock("./global-overlays", () => ({
+  globalOverlays: jest.fn(() => []),
+}));
+
+jest.mock("./root-layout-registry", () => ({
+  DEFAULT_ROOT_LAYOUT_ID: "default",
+  getRootLayout: jest.fn(() => ({ Component: () => null })),
+}));
+
+jest.mock("./root-layout-state", () => ({
+  selectedRootLayoutId: jest.fn(() => undefined),
+}));
+
+describe("RootLayoutHost", () => {
+  beforeEach(() => {
+    sessionStorage.clear();
+    window.history.replaceState(null, "", "/");
+    jest.clearAllMocks();
+  });
+
+  it("captures and sanitizes invite links opened after startup", () => {
+    render(<RootLayoutHost />);
+    window.history.replaceState(
+      null,
+      "",
+      `/?app#contacts/connect?code=${encodeURIComponent("ABCD-1234-EFGH")}`,
+    );
+
+    fireEvent(window, new HashChangeEvent("hashchange"));
+
+    expect(window.location.hash).toBe("#contacts/connect");
+    expect(readUserConnectPendingIntent()).toEqual({
+      ok: true,
+      intent: expect.objectContaining({ code: "ABCD1234EFGH" }),
+    });
+    expect(mainContentPath).toHaveBeenCalledWith("contacts/connect");
+    expect(mainContentPath).not.toHaveBeenCalledWith(expect.stringContaining("code="));
+  });
+});

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

@@ -17,10 +17,14 @@ import {
   rpcServerCalls,
   setDefaultClientUserContext,
 } from "@peers-app/peers-sdk";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { CommandPaletteOverlay } from "../command-palette/command-palette-ui";
-import { loadGlobals } from "../globals";
+import { loadGlobals, mainContentPath } from "../globals";
 import { useObservable, usePromise } from "../hooks";
+import {
+  captureUserConnectInviteFromLocation,
+  readUserConnectPendingIntent,
+} from "../screens/contacts/user-connect-invite";
 import { colorMode } from "../screens/settings/color-mode-dropdown";
 import { SetupUser } from "../screens/setup-user";
 import { WelcomeModal } from "../screens/welcome-modal";
@@ -36,10 +40,33 @@ import { selectedRootLayoutId } from "./root-layout-state";
  * order downstream is stable across the user/no-user branches.
  */
 export function RootLayoutHost() {
+  useState(() => {
+    captureUserConnectInviteFromLocation();
+    return true;
+  });
+
+  const userIdRef = useRef<string | null | undefined>(undefined);
   const userId = usePromise(async () => {
     const _userId = await rpcServerCalls.getUserId();
     return _userId || (null as string | null);
   });
+  userIdRef.current = userId;
+
+  useEffect(() => {
+    const captureInviteFromHashChange = () => {
+      const previousHash = window.location.hash;
+      captureUserConnectInviteFromLocation();
+      if (window.location.hash === previousHash) {
+        return;
+      }
+      // Signed-out captures stay in sessionStorage until setup finishes.
+      if (userIdRef.current) {
+        mainContentPath("contacts/connect");
+      }
+    };
+    window.addEventListener("hashchange", captureInviteFromHashChange);
+    return () => window.removeEventListener("hashchange", captureInviteFromHashChange);
+  }, []);
 
   if (userId === undefined) {
     return;
@@ -75,6 +102,10 @@ function RootLayoutBootstrap(props: { userId: string }) {
       recentlyUsedApps.loadingPromise,
       hasShownWelcomeModal.loadingPromise,
     ]);
+    const pendingInvite = readUserConnectPendingIntent();
+    if (pendingInvite.ok || pendingInvite.reason !== "none") {
+      mainContentPath("contacts/connect");
+    }
     return true;
   });