@peers-app/peers-ui 0.23.14 → 0.24.0

package/src/components/qr-scanner.tsx

@@ -0,0 +1,180 @@
+import { useEffect, useRef, useState } from "react";
+
+/** Props for {@link QrScanner}. */
+export interface QrScannerProps {
+  /** Called once with the decoded text of the first QR code seen; scanning stops after this. */
+  onScan: (text: string) => void;
+  /** Called when the camera cannot be opened. */
+  onError?: (message: string) => void;
+  /** Optional filter; return `false` to keep scanning past a code that is not ours. */
+  accept?: (text: string) => boolean;
+  /** Square edge length in CSS pixels. */
+  size?: number;
+}
+
+type BarcodeDetectorLike = {
+  detect(source: ImageBitmapSource): Promise<Array<{ rawValue: string }>>;
+};
+
+type BarcodeDetectorCtor = new (options?: { formats?: string[] }) => BarcodeDetectorLike;
+
+function nativeDetector(): BarcodeDetectorLike | undefined {
+  const ctor = (globalThis as { BarcodeDetector?: BarcodeDetectorCtor }).BarcodeDetector;
+  if (!ctor) {
+    return undefined;
+  }
+  try {
+    return new ctor({ formats: ["qr_code"] });
+  } catch {
+    return undefined;
+  }
+}
+
+/** Whether this host can plausibly scan (secure context with a camera API). */
+export function canScanQr(): boolean {
+  return (
+    typeof navigator !== "undefined" &&
+    Boolean(navigator.mediaDevices?.getUserMedia) &&
+    (typeof window === "undefined" || window.isSecureContext !== false)
+  );
+}
+
+/**
+ * Live camera QR scanner. Uses the platform `BarcodeDetector` when available and falls
+ * back to `jsqr` on a canvas. Stops the camera on unmount or after the first accepted code.
+ */
+export function QrScanner(props: QrScannerProps) {
+  const { onScan, onError, accept, size = 280 } = props;
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [status, setStatus] = useState<"starting" | "scanning" | "error">("starting");
+
+  useEffect(() => {
+    let cancelled = false;
+    let stream: MediaStream | undefined;
+    let frame = 0;
+    const canvas = document.createElement("canvas");
+    const detector = nativeDetector();
+    let jsqr: typeof import("jsqr").default | undefined;
+
+    const stop = () => {
+      cancelled = true;
+      if (frame) {
+        cancelAnimationFrame(frame);
+      }
+      for (const track of stream?.getTracks() ?? []) {
+        track.stop();
+      }
+    };
+
+    const deliver = (text: string) => {
+      if (cancelled || (accept && !accept(text))) {
+        return false;
+      }
+      stop();
+      onScan(text);
+      return true;
+    };
+
+    const tick = async () => {
+      const video = videoRef.current;
+      if (cancelled || !video || video.readyState < 2) {
+        frame = requestAnimationFrame(() => void tick());
+        return;
+      }
+      try {
+        if (detector) {
+          const codes = await detector.detect(video);
+          for (const code of codes) {
+            if (deliver(code.rawValue)) {
+              return;
+            }
+          }
+        } else if (jsqr) {
+          const width = video.videoWidth;
+          const height = video.videoHeight;
+          if (width && height) {
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext("2d", { willReadFrequently: true });
+            if (ctx) {
+              ctx.drawImage(video, 0, 0, width, height);
+              const image = ctx.getImageData(0, 0, width, height);
+              const result = jsqr(image.data, width, height, { inversionAttempts: "dontInvert" });
+              if (result?.data && deliver(result.data)) {
+                return;
+              }
+            }
+          }
+        }
+      } catch {
+        // A single bad frame is not fatal; keep scanning.
+      }
+      if (!cancelled) {
+        frame = requestAnimationFrame(() => void tick());
+      }
+    };
+
+    (async () => {
+      try {
+        if (!detector) {
+          jsqr = (await import("jsqr")).default;
+        }
+        stream = await navigator.mediaDevices.getUserMedia({
+          video: { facingMode: { ideal: "environment" } },
+          audio: false,
+        });
+        if (cancelled) {
+          stop();
+          return;
+        }
+        const video = videoRef.current;
+        if (!video) {
+          return;
+        }
+        video.srcObject = stream;
+        await video.play();
+        setStatus("scanning");
+        frame = requestAnimationFrame(() => void tick());
+      } catch (error) {
+        if (cancelled) {
+          return;
+        }
+        setStatus("error");
+        onError?.(
+          error instanceof DOMException && error.name === "NotAllowedError"
+            ? "Camera access was denied."
+            : "Could not open the camera.",
+        );
+      }
+    })();
+
+    return stop;
+  }, [onScan, onError, accept]);
+
+  return (
+    <div
+      className="position-relative bg-black rounded overflow-hidden mx-auto"
+      style={{ width: size, height: size }}
+    >
+      <video
+        ref={videoRef}
+        muted
+        playsInline
+        style={{ width: "100%", height: "100%", objectFit: "cover" }}
+        aria-label="Camera preview"
+      />
+      {status === "starting" ? (
+        <output className="position-absolute top-50 start-50 translate-middle text-light small">
+          Starting camera…
+        </output>
+      ) : null}
+      {status === "scanning" ? (
+        <div
+          aria-hidden="true"
+          className="position-absolute top-50 start-50 translate-middle border border-2 border-light rounded"
+          style={{ width: "60%", height: "60%", opacity: 0.7 }}
+        />
+      ) : null}
+    </div>
+  );
+}

package/src/components/router.tsx

@@ -25,7 +25,7 @@ import { ThreadMessageList } from "./messages/thread-message-list";
 import "../screens/console-logs/console-logs-list";
 import "../screens/groups";
 import "../screens/contacts";
-import "../screens/join-group";
+import "../screens/invites";
 import "../screens/network-viewer";
 import "../screens/data-explorer";
 

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

@@ -1,8 +1,10 @@
 import { fireEvent, render } from "@testing-library/react";
 import { mainContentPath } from "../globals";
-import { readUserConnectPendingIntent } from "../screens/contacts/user-connect-invite";
+import { ACCEPT_INVITE_PATH, peekPendingInvite } from "../screens/invites/invite-capture";
 import { RootLayoutHost } from "./root-layout-host";
 
+const TOKEN = "eyJhbGciOiJub25lIn0-_abcdefghijklmnopqrstuvwxyz0123456789";
+
 jest.mock("@peers-app/peers-sdk", () => {
   const actual = jest.requireActual<typeof import("@peers-app/peers-sdk")>("@peers-app/peers-sdk");
   return {
@@ -87,20 +89,23 @@ describe("RootLayoutHost", () => {
 
   it("captures and sanitizes invite links opened after startup", () => {
     render(<RootLayoutHost />);
-    window.history.replaceState(
-      null,
-      "",
-      `/?app#contacts/connect?code=${encodeURIComponent("ABCD-1234-EFGH")}`,
-    );
+    window.history.replaceState(null, "", `/?app#invite=${TOKEN}`);
+
+    fireEvent(window, new HashChangeEvent("hashchange"));
+
+    expect(window.location.hash).toBe("");
+    expect(peekPendingInvite()).toBe(TOKEN);
+    expect(mainContentPath).toHaveBeenCalledWith(ACCEPT_INVITE_PATH);
+    expect(mainContentPath).not.toHaveBeenCalledWith(expect.stringContaining(TOKEN));
+  });
+
+  it("ignores ordinary hash routes", () => {
+    render(<RootLayoutHost />);
+    window.history.replaceState(null, "", "/?app#groups");
 
     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="));
+    expect(window.location.hash).toBe("#groups");
+    expect(peekPendingInvite()).toBeUndefined();
   });
 });

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

@@ -22,10 +22,12 @@ import { CommandPaletteOverlay } from "../command-palette/command-palette-ui";
 import { loadGlobals, mainContentPath } from "../globals";
 import { useObservable, usePromise } from "../hooks";
 import {
-  captureUserConnectInviteFromLocation,
-  readUserConnectPendingIntent,
-} from "../screens/contacts/user-connect-invite";
-import { captureDevicePairingInviteFromLocation } from "../screens/device-pairing";
+  ACCEPT_INVITE_PATH,
+  captureInviteFromLocation,
+  inviteCaptured,
+  listenForOpenUrlInvites,
+  peekPendingInvite,
+} from "../screens/invites/invite-capture";
 import { colorMode } from "../screens/settings/color-mode-dropdown";
 import { SetupUser } from "../screens/setup-user";
 import { WelcomeModal } from "../screens/welcome-modal";
@@ -42,8 +44,7 @@ import { selectedRootLayoutId } from "./root-layout-state";
  */
 export function RootLayoutHost() {
   useState(() => {
-    captureDevicePairingInviteFromLocation();
-    captureUserConnectInviteFromLocation();
+    captureInviteFromLocation();
     return true;
   });
 
@@ -55,20 +56,22 @@ export function RootLayoutHost() {
   userIdRef.current = userId;
 
   useEffect(() => {
-    const captureInviteFromHashChange = () => {
-      const previousHash = window.location.hash;
-      captureDevicePairingInviteFromLocation();
-      captureUserConnectInviteFromLocation();
-      if (window.location.hash === previousHash) {
-        return;
-      }
-      // Signed-out captures stay in sessionStorage until setup finishes.
-      if (userIdRef.current) {
-        mainContentPath("contacts/connect");
+    // Tokens arriving after startup: a hash change in the browser/PWA, or a peers:// open
+    // forwarded by the Electron main process. Signed-out captures stay stashed until setup
+    // finishes; signed-in captures route straight to the Accept screen.
+    const onHashChange = () => captureInviteFromLocation();
+    window.addEventListener("hashchange", onHashChange);
+    const stopOpenUrl = listenForOpenUrlInvites();
+    const sub = inviteCaptured.subscribe(() => {
+      if (userIdRef.current && peekPendingInvite()) {
+        mainContentPath(ACCEPT_INVITE_PATH);
       }
+    });
+    return () => {
+      window.removeEventListener("hashchange", onHashChange);
+      stopOpenUrl();
+      sub.dispose();
     };
-    window.addEventListener("hashchange", captureInviteFromHashChange);
-    return () => window.removeEventListener("hashchange", captureInviteFromHashChange);
   }, []);
 
   if (userId === undefined) {
@@ -105,9 +108,8 @@ function RootLayoutBootstrap(props: { userId: string }) {
       recentlyUsedApps.loadingPromise,
       hasShownWelcomeModal.loadingPromise,
     ]);
-    const pendingInvite = readUserConnectPendingIntent();
-    if (pendingInvite.ok || pendingInvite.reason !== "none") {
-      mainContentPath("contacts/connect");
+    if (peekPendingInvite()) {
+      mainContentPath(ACCEPT_INVITE_PATH);
     }
     return true;
   });

package/src/screens/account/account-screen.tsx

@@ -1,11 +1,96 @@
-import { rpcServerCalls } from "@peers-app/peers-sdk";
-import { useState } from "react";
+import { type ICreatedInvite, rpcServerCalls } from "@peers-app/peers-sdk";
+import { useEffect, useState } from "react";
+import { LoadingIndicator } from "../../components/loading-indicator";
 import { Tooltip } from "../../components/tooltip";
 import { useObservable } from "../../hooks";
 import {
   persistPeersServicesRegistration,
   registrationStatusPvar,
 } from "../../peers-services-registration";
+import { InviteShare } from "../invites/invite-share";
+import { inviteTools } from "../invites/invites-ipc";
+
+const PROFILE_QR_INFO = `### Your profile QR
+
+Anyone who scans this (or opens the link) can send you a contact request. Requests show up under **Contacts → Pending** and nothing happens until you confirm.
+
+### Regenerate
+
+Regenerating invalidates this QR **and every other invite link you have issued**. Use it if the QR leaked somewhere you did not intend.`;
+
+/** Reusable profile invite with a regenerate control that bumps the invite epoch. */
+function ProfileInviteSection() {
+  const [invite, setInvite] = useState<ICreatedInvite | undefined>(undefined);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    void inviteTools()
+      .then((tools) => tools.createContactInvite({ profile: true }))
+      .then(({ invite: created }) => {
+        if (!cancelled) setInvite(created);
+      })
+      .catch((err) => {
+        if (!cancelled) setError((err as Error).message || "Could not load your profile QR.");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const regenerate = async () => {
+    if (
+      !confirm(
+        "Regenerate your profile QR? Every invite link you have issued so far will stop working.",
+      )
+    ) {
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      const tools = await inviteTools();
+      const { invite: created } = await tools.regenerateProfileInvite();
+      setInvite(created);
+    } catch (err) {
+      setError((err as Error).message || "Could not regenerate.");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="card mb-3">
+      <div className="card-body">
+        <h5 className="card-title d-flex align-items-center gap-2">
+          Profile QR
+          <Tooltip markdownContent={PROFILE_QR_INFO} />
+        </h5>
+        {error ? <div className="alert alert-danger py-2">{error}</div> : null}
+        {invite ? (
+          <InviteShare
+            invite={invite}
+            description="Let people connect with you by scanning this or opening the link. You confirm each request."
+            shareText="Connect with me on Peers:"
+          />
+        ) : !error ? (
+          <LoadingIndicator />
+        ) : null}
+        <div className="text-center mt-3">
+          <button
+            type="button"
+            className="btn btn-outline-danger btn-sm"
+            onClick={() => void regenerate()}
+            disabled={busy || !invite}
+          >
+            {busy ? "Regenerating…" : "Regenerate (revokes all invites)"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
 
 const INFO_TEXT = `### What does registering do?
 
@@ -81,6 +166,8 @@ export function AccountScreen() {
         </div>
       )}
 
+      <ProfileInviteSection />
+
       <div className="card">
         <div className="card-body">
           <h5 className="card-title d-flex align-items-center gap-2">

package/src/screens/contacts/contact-list.tsx

@@ -1,5 +1,6 @@
 import {
   getUserContext,
+  type ICreatedInvite,
   type ICursorIterable,
   type IUserWithSource,
   observable,
@@ -17,8 +18,53 @@ import { TrustLevelBadge } from "../../components/trust-level-badge";
 import { mainContentPath } from "../../globals";
 import { useObservable } from "../../hooks";
 import { registerInternalPeersUI } from "../../ui-router/ui-loader";
+import { ACCEPT_INVITE_PATH } from "../invites/invite-capture";
+import { InviteShare } from "../invites/invite-share";
+import { inviteTools } from "../invites/invites-ipc";
+import { PendingInvitesList } from "../invites/pending-invites-list";
+
+/** Issues a one-off contact invite and shows it as QR/link until dismissed. */
+function InviteContactPanel({ onClose }: { onClose: () => void }) {
+  const [invite, setInvite] = useState<ICreatedInvite | undefined>(undefined);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    void inviteTools()
+      .then((tools) => tools.createContactInvite({}))
+      .then(({ invite: created }) => {
+        if (!cancelled) setInvite(created);
+      })
+      .catch((err) => {
+        if (!cancelled) setError((err as Error).message || "Could not create an invite.");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <div className="card mb-3">
+      <div className="card-body">
+        <h6 className="card-title">Invite a contact</h6>
+        {error ? <div className="alert alert-danger py-2">{error}</div> : null}
+        {invite ? (
+          <InviteShare
+            invite={invite}
+            description="Send this link or show the QR. When they accept, you are connected — no need to be online at the same time."
+            shareText="Connect with me on Peers:"
+            onDone={onClose}
+          />
+        ) : !error ? (
+          <LoadingIndicator />
+        ) : null}
+      </div>
+    </div>
+  );
+}
 
 export function ContactList() {
+  const [inviting, setInviting] = useState(false);
   const [searchTextObs] = useState(() => observable(""));
   const [searchText] = useObservable(searchTextObs);
   const [cursorObs] = useState(() => observable<ICursorIterable<IUserWithSource> | undefined>());
@@ -130,12 +176,26 @@ export function ContactList() {
           <i className="bi-person-fill-check me-2" />
           Contacts
         </h4>
-        <a href="#contacts/connect" className="btn btn-primary btn-sm">
-          <i className="bi-person-plus me-1" />
-          Connect to New User
-        </a>
+        <div className="d-flex gap-2">
+          <a href={`#${ACCEPT_INVITE_PATH}`} className="btn btn-outline-primary btn-sm">
+            <i className="bi-qr-code-scan me-1" />
+            Accept invite
+          </a>
+          <button
+            type="button"
+            className="btn btn-primary btn-sm"
+            onClick={() => setInviting(true)}
+            disabled={inviting}
+          >
+            <i className="bi-person-plus me-1" />
+            Invite
+          </button>
+        </div>
       </div>
 
+      {inviting ? <InviteContactPanel onClose={() => setInviting(false)} /> : null}
+      <PendingInvitesList type="contact" hideWhenEmpty title="Pending contact invites" />
+
       <div className="input-group mb-3">
         <Input
           value={searchTextObs}

package/src/screens/contacts/index.ts

@@ -1,8 +1,6 @@
 // Import all contact screen components to ensure they register their routes
 import "./contact-list";
 import "./contact-details";
-import "./user-connect";
 
 export * from "./contact-details";
 export * from "./contact-list";
-export * from "./user-connect";

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

@@ -30,20 +30,22 @@ describe("device pairing UI lifecycle", () => {
     mockRpc.cancel.mockResolvedValue({ phase: "idle" });
   });
 
-  it("uses the host-owned invitation URL and cancels a source that resolves after unmount", async () => {
-    let resolveStart!: (value: { state: DevicePairingState; invitationUrl: string }) => void;
-    mockRpc.startSource.mockReturnValue(
+  it("starts the destination on mount and cancels when it resolves after unmount", async () => {
+    let resolveStart!: (value: DevicePairingState) => void;
+    mockRpc.startDestination.mockReturnValue(
       new Promise((resolve) => {
         resolveStart = resolve;
       }),
     );
-    const view = render(<SourceDevicePairing onClose={jest.fn()} />);
+    const view = render(<DestinationDevicePairing onBack={jest.fn()} />);
 
-    expect(mockRpc.startSource).toHaveBeenCalledWith();
+    expect(mockRpc.startDestination).toHaveBeenCalledWith({ deviceType: "browser" });
     view.unmount();
     resolveStart({
-      state: { sessionId: "00mh0wlipkdbeaw8tests0001", role: "source", phase: "inviting" },
-      invitationUrl: "https://peers.app/?app#pair=token",
+      sessionId: "00mh0wlipkdbeaw8tests0001",
+      role: "destination",
+      phase: "showing-code",
+      code: "7-aardvark-adroitness-absurd",
     });
 
     await waitFor(() => {
@@ -53,25 +55,67 @@ describe("device pairing UI lifecycle", () => {
     });
   });
 
-  it("keeps source cancellation available while waiting for remote approval", async () => {
-    const onClose = jest.fn();
+  it("shows the destination code and QR while waiting for a source", () => {
+    mockPairingState = {
+      sessionId: "00mh0wlipkdbeaw8tests0004",
+      role: "destination",
+      phase: "showing-code",
+      code: "7-aardvark-adroitness-absurd",
+      notice: "Pairing code did not match. Try the new code.",
+      expiresAt: Date.now() + 60_000,
+    };
+    mockRpc.startDestination.mockResolvedValue(mockPairingState);
+    const view = render(<DestinationDevicePairing onBack={jest.fn()} />);
+
+    expect(view.getByLabelText("Pairing code")).toHaveTextContent("7-aardvark-adroitness-absurd");
+    expect(view.getByLabelText("Pairing code QR")).toBeInTheDocument();
+    expect(view.getByText("Pairing code did not match. Try the new code.")).toBeInTheDocument();
+  });
+
+  it("sends the typed code to the host and only approves from the source", async () => {
+    mockRpc.startSource.mockResolvedValue({
+      sessionId: "00mh0wlipkdbeaw8tests0002",
+      role: "source",
+      phase: "connecting",
+    });
+    const view = render(<SourceDevicePairing onClose={jest.fn()} />);
+
+    fireEvent.change(view.getByLabelText("Pairing code"), {
+      target: { value: " 7 aardvark adroitness absurd " },
+    });
+    fireEvent.click(view.getByRole("button", { name: "Connect" }));
+    await waitFor(() =>
+      expect(mockRpc.startSource).toHaveBeenCalledWith({ code: "7 aardvark adroitness absurd" }),
+    );
+
     mockPairingState = {
       sessionId: "00mh0wlipkdbeaw8tests0002",
       role: "source",
       phase: "waiting-for-approval",
+      remoteDevice: { deviceName: "New phone", deviceType: "mobile" },
+    };
+    view.rerender(<SourceDevicePairing onClose={jest.fn()} />);
+    expect(view.getByText("New phone (mobile)")).toBeInTheDocument();
+    fireEvent.click(view.getByRole("button", { name: "Approve" }));
+    await waitFor(() =>
+      expect(mockRpc.approve).toHaveBeenCalledWith({ sessionId: "00mh0wlipkdbeaw8tests0002" }),
+    );
+  });
+
+  it("keeps source cancellation available while transferring", async () => {
+    const onClose = jest.fn();
+    mockPairingState = {
+      sessionId: "00mh0wlipkdbeaw8tests0003",
+      role: "source",
+      phase: "transferring",
     };
-    mockRpc.startSource.mockResolvedValue({
-      state: mockPairingState,
-      invitationUrl: "https://peers.app/?app#pair=token",
-    });
     const view = render(<SourceDevicePairing onClose={onClose} />);
-    await waitFor(() => expect(mockRpc.startSource).toHaveBeenCalled());
 
     fireEvent.click(view.getByRole("button", { name: "Cancel" }));
 
     await waitFor(() => {
       expect(mockRpc.cancel).toHaveBeenCalledWith({
-        sessionId: "00mh0wlipkdbeaw8tests0002",
+        sessionId: "00mh0wlipkdbeaw8tests0003",
       });
       expect(onClose).toHaveBeenCalled();
     });
@@ -80,10 +124,11 @@ describe("device pairing UI lifecycle", () => {
   it("does not clear the destination success reload when Done unmounts the flow", () => {
     jest.useFakeTimers();
     mockPairingState = {
-      sessionId: "00mh0wlipkdbeaw8tests0003",
+      sessionId: "00mh0wlipkdbeaw8tests0005",
       role: "destination",
       phase: "complete",
     };
+    mockRpc.startDestination.mockResolvedValue(mockPairingState);
     const setTimeoutSpy = jest.spyOn(window, "setTimeout");
     const clearTimeoutSpy = jest.spyOn(window, "clearTimeout");
     const view = render(<DestinationDevicePairing onBack={jest.fn()} />);