@peers-app/peers-ui 0.16.1 → 0.16.3

package/dist/peers-services-registration.d.ts

@@ -0,0 +1,5 @@
+/** Set when the user has completed challenge-response registration (ISO timestamp). */
+export declare const registrationStatusPvar: import("@peers-app/peers-sdk").PersistentVar<string>;
+export declare const servicesTokenPvar: import("@peers-app/peers-sdk").PersistentVar<string>;
+/** Store JWT and local "registered" flag after a successful `registerWithPeersServices` call. */
+export declare function persistPeersServicesRegistration(token: string): void;

package/dist/peers-services-registration.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.servicesTokenPvar = exports.registrationStatusPvar = void 0;
+exports.persistPeersServicesRegistration = persistPeersServicesRegistration;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+/** Set when the user has completed challenge-response registration (ISO timestamp). */
+exports.registrationStatusPvar = (0, peers_sdk_1.userVar)("PEERS_SERVICES_REGISTERED", {
+    defaultValue: "",
+});
+exports.servicesTokenPvar = (0, peers_sdk_1.userVar)("PEERS_SERVICES_TOKEN", {
+    isSecret: true,
+    defaultValue: "",
+});
+/** Store JWT and local "registered" flag after a successful `registerWithPeersServices` call. */
+function persistPeersServicesRegistration(token) {
+    (0, exports.servicesTokenPvar)(token);
+    (0, exports.registrationStatusPvar)(new Date().toISOString());
+}

package/dist/screens/account/account-screen.js

@@ -6,13 +6,7 @@ const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = require("react");
 const tooltip_1 = require("../../components/tooltip");
 const hooks_1 = require("../../hooks");
-const registrationStatusPvar = (0, peers_sdk_1.userVar)("PEERS_SERVICES_REGISTERED", {
-    defaultValue: "",
-});
-const servicesTokenPvar = (0, peers_sdk_1.userVar)("PEERS_SERVICES_TOKEN", {
-    isSecret: true,
-    defaultValue: "",
-});
+const peers_services_registration_1 = require("../../peers-services-registration");
 const INFO_TEXT = `### What does registering do?
 
 Registering your account links your **public key** with the Peers cloud service. This enables cloud-powered features like:
@@ -30,7 +24,7 @@ Your **secret key never leaves your device**. Only your public key is shared wit
 
 No. Peers works fully in local/peer-to-peer mode without registration. Cloud features simply won't be available until you register.`;
 function AccountScreen() {
-    const [registrationStatus] = (0, hooks_1.useObservable)(registrationStatusPvar);
+    const [registrationStatus] = (0, hooks_1.useObservable)(peers_services_registration_1.registrationStatusPvar);
     const [isRegistering, setIsRegistering] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
     const [success, setSuccess] = (0, react_1.useState)(null);
@@ -41,8 +35,7 @@ function AccountScreen() {
         setSuccess(null);
         try {
             const token = await peers_sdk_1.rpcServerCalls.registerWithPeersServices();
-            servicesTokenPvar(token);
-            registrationStatusPvar(new Date().toISOString());
+            (0, peers_services_registration_1.persistPeersServicesRegistration)(token);
             setSuccess("Account registered successfully.");
         }
         catch (err) {
@@ -52,9 +45,9 @@ function AccountScreen() {
             setIsRegistering(false);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", style: { maxWidth: 600 }, children: [(0, jsx_runtime_1.jsxs)("h4", { className: "mb-3 d-flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-circle" }), "Account"] }), error && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger alert-dismissible", role: "alert", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-exclamation-triangle me-2" }), error, (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn-close", onClick: () => setError(null), "aria-label": "Close" })] })), success && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-success alert-dismissible", role: "alert", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle me-2" }), success, (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn-close", onClick: () => setSuccess(null), "aria-label": "Close" })] })), (0, jsx_runtime_1.jsx)("div", { className: "card", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("h5", { className: "card-title d-flex align-items-center gap-2", children: ["Peers Services Registration", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: INFO_TEXT })] }), isRegistered ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle-fill text-success", style: { fontSize: "1.2em" } }), (0, jsx_runtime_1.jsx)("span", { children: "Registered" })] }), (0, jsx_runtime_1.jsxs)("small", { className: "text-muted", children: ["Registered on", " ", new Date(registrationStatus).toLocaleDateString(undefined, {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", style: { maxWidth: 600 }, children: [(0, jsx_runtime_1.jsxs)("h4", { className: "mb-3 d-flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-circle" }), "Account"] }), error && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger alert-dismissible", role: "alert", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-exclamation-triangle me-2" }), error, (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn-close", onClick: () => setError(null), "aria-label": "Close" })] })), success && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-success alert-dismissible", role: "alert", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle me-2" }), success, (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn-close", onClick: () => setSuccess(null), "aria-label": "Close" })] })), (0, jsx_runtime_1.jsx)("div", { className: "card", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("h5", { className: "card-title d-flex align-items-center gap-2", children: ["Peers Services Registration", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: INFO_TEXT })] }), isRegistered ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle-fill text-success", style: { fontSize: "1.2em" } }), (0, jsx_runtime_1.jsx)("span", { children: "Registered" })] }), (0, jsx_runtime_1.jsxs)("small", { className: "text-muted d-block mb-3", children: ["Registered on", " ", new Date(registrationStatus).toLocaleDateString(undefined, {
                                             year: "numeric",
                                             month: "long",
                                             day: "numeric",
-                                        })] })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-3", children: "Register your account to enable cloud-powered features like the AI assistant." }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary", onClick: handleRegister, disabled: isRegistering, children: isRegistering ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-2" }), "Registering..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-cloud-upload me-2" }), "Register Account"] })) })] }))] }) })] }));
+                                        })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary btn-sm", onClick: handleRegister, disabled: isRegistering, children: isRegistering ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-2" }), "Refreshing..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-arrow-clockwise me-2" }), "Refresh Token"] })) })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-3", children: "Register your account to enable cloud-powered features like the AI assistant." }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary", onClick: handleRegister, disabled: isRegistering, children: isRegistering ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-2" }), "Registering..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-cloud-upload me-2" }), "Register Account"] })) })] }))] }) })] }));
 }

package/dist/screens/setup-user.js

@@ -31,11 +31,7 @@ const SetupUser = () => {
                 .catch((err) => {
                 console.error("Error auto-installing peers-core:", err);
             });
-            // Register with peers-services
-            await peers_sdk_1.rpcServerCalls.registerWithPeersServices().catch((err) => {
-                console.warn("Auto-registration with peers-services deferred:", err);
-            });
-            // Success - reload the app
+            // Success - reload the app (peers-services registration runs after Welcome modal)
             window.location.reload();
         }
         catch (err) {

package/dist/screens/welcome-modal.js

@@ -5,6 +5,16 @@ 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 peers_services_registration_1 = require("../peers-services-registration");
+async function tryRegisterPeersServicesAfterWelcome() {
+    try {
+        const token = await peers_sdk_1.rpcServerCalls.registerWithPeersServices();
+        (0, peers_services_registration_1.persistPeersServicesRegistration)(token);
+    }
+    catch (err) {
+        console.warn("Peers services registration after welcome modal:", err);
+    }
+}
 function WelcomeModal({ colorMode, onClose }) {
     const [displayName, setDisplayName] = (0, react_1.useState)("");
     const [deviceName, setDeviceName] = (0, react_1.useState)("");
@@ -60,6 +70,7 @@ function WelcomeModal({ colorMode, onClose }) {
                 device.name = deviceName.trim();
                 await devicesTable.save(device);
             }
+            await tryRegisterPeersServicesAfterWelcome();
             // Mark the welcome modal as shown
             (0, peers_sdk_1.hasShownWelcomeModal)(true);
             onClose();
@@ -71,6 +82,7 @@ function WelcomeModal({ colorMode, onClose }) {
         }
     };
     const handleSkip = async () => {
+        await tryRegisterPeersServicesAfterWelcome();
         // Mark as shown even if skipped
         (0, peers_sdk_1.hasShownWelcomeModal)(true);
         onClose();

package/package.json

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

package/src/peers-services-registration.ts

@@ -0,0 +1,17 @@
+import { userVar } from "@peers-app/peers-sdk";
+
+/** Set when the user has completed challenge-response registration (ISO timestamp). */
+export const registrationStatusPvar = userVar<string>("PEERS_SERVICES_REGISTERED", {
+  defaultValue: "",
+});
+
+export const servicesTokenPvar = userVar<string>("PEERS_SERVICES_TOKEN", {
+  isSecret: true,
+  defaultValue: "",
+});
+
+/** Store JWT and local "registered" flag after a successful `registerWithPeersServices` call. */
+export function persistPeersServicesRegistration(token: string): void {
+  servicesTokenPvar(token);
+  registrationStatusPvar(new Date().toISOString());
+}

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

@@ -1,16 +1,11 @@
-import { rpcServerCalls, userVar } from "@peers-app/peers-sdk";
+import { rpcServerCalls } from "@peers-app/peers-sdk";
 import { useState } from "react";
 import { Tooltip } from "../../components/tooltip";
 import { useObservable } from "../../hooks";
-
-const registrationStatusPvar = userVar<string>("PEERS_SERVICES_REGISTERED", {
-  defaultValue: "",
-});
-
-const servicesTokenPvar = userVar<string>("PEERS_SERVICES_TOKEN", {
-  isSecret: true,
-  defaultValue: "",
-});
+import {
+  persistPeersServicesRegistration,
+  registrationStatusPvar,
+} from "../../peers-services-registration";
 
 const INFO_TEXT = `### What does registering do?
 
@@ -44,8 +39,7 @@ export function AccountScreen() {
 
     try {
       const token = await rpcServerCalls.registerWithPeersServices();
-      servicesTokenPvar(token);
-      registrationStatusPvar(new Date().toISOString());
+      persistPeersServicesRegistration(token);
       setSuccess("Account registered successfully.");
     } catch (err) {
       setError(`Registration failed: ${String(err)}`);
@@ -100,7 +94,7 @@ export function AccountScreen() {
                 <i className="bi bi-check-circle-fill text-success" style={{ fontSize: "1.2em" }} />
                 <span>Registered</span>
               </div>
-              <small className="text-muted">
+              <small className="text-muted d-block mb-3">
                 Registered on{" "}
                 {new Date(registrationStatus as string).toLocaleDateString(undefined, {
                   year: "numeric",
@@ -108,6 +102,24 @@ export function AccountScreen() {
                   day: "numeric",
                 })}
               </small>
+              <button
+                type="button"
+                className="btn btn-outline-secondary btn-sm"
+                onClick={handleRegister}
+                disabled={isRegistering}
+              >
+                {isRegistering ? (
+                  <>
+                    <span className="spinner-border spinner-border-sm me-2" />
+                    Refreshing...
+                  </>
+                ) : (
+                  <>
+                    <i className="bi bi-arrow-clockwise me-2" />
+                    Refresh Token
+                  </>
+                )}
+              </button>
             </div>
           ) : (
             <div>

package/src/screens/setup-user.tsx

@@ -46,12 +46,7 @@ export const SetupUser = () => {
           console.error("Error auto-installing peers-core:", err);
         });
 
-      // Register with peers-services
-      await rpcServerCalls.registerWithPeersServices().catch((err: unknown) => {
-        console.warn("Auto-registration with peers-services deferred:", err);
-      });
-
-      // Success - reload the app
+      // Success - reload the app (peers-services registration runs after Welcome modal)
       window.location.reload();
     } catch (err) {
       setError(`Error creating new user: ${String(err).replaceAll("\n", " ")}`);

package/src/screens/welcome-modal.tsx

@@ -4,6 +4,7 @@ import {
   getUserContext,
   hasShownWelcomeModal,
   type IDevice,
+  rpcServerCalls,
   TrustLevel,
   thisDeviceId,
   Users,
@@ -11,12 +12,22 @@ import {
 import type React from "react";
 import { useEffect, useState } from "react";
 import { useObservable, usePromise } from "../hooks";
+import { persistPeersServicesRegistration } from "../peers-services-registration";
 
 interface WelcomeModalProps {
   colorMode: string;
   onClose: () => void;
 }
 
+async function tryRegisterPeersServicesAfterWelcome(): Promise<void> {
+  try {
+    const token = await rpcServerCalls.registerWithPeersServices();
+    persistPeersServicesRegistration(token);
+  } catch (err: unknown) {
+    console.warn("Peers services registration after welcome modal:", err);
+  }
+}
+
 export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
   const [displayName, setDisplayName] = useState("");
   const [deviceName, setDeviceName] = useState("");
@@ -79,6 +90,8 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
         await devicesTable.save(device);
       }
 
+      await tryRegisterPeersServicesAfterWelcome();
+
       // Mark the welcome modal as shown
       hasShownWelcomeModal(true);
 
@@ -91,6 +104,7 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
   };
 
   const handleSkip = async () => {
+    await tryRegisterPeersServicesAfterWelcome();
     // Mark as shown even if skipped
     hasShownWelcomeModal(true);
     onClose();