@peers-app/peers-ui 0.16.0 → 0.16.2

package/dist/components/router.js

@@ -37,6 +37,7 @@ exports.Router = Router;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const globals = __importStar(require("../globals"));
 const hooks_1 = require("../hooks");
+const account_screen_1 = require("../screens/account/account-screen");
 const assistant_details_1 = require("../screens/assistants/assistant-details");
 const assistant_list_1 = require("../screens/assistants/assistant-list");
 const package_details_1 = require("../screens/packages/package-details");
@@ -87,6 +88,9 @@ function Router({ path: providedPath } = {}) {
         if (path === "settings" || path === "profile") {
             return (0, jsx_runtime_1.jsx)(settings_page_1.SettingsPage, {});
         }
+        if (path === "account") {
+            return (0, jsx_runtime_1.jsx)(account_screen_1.AccountScreen, {});
+        }
         if (path === "threads" || path === "") {
             return (0, jsx_runtime_1.jsx)(channel_view_1.ChannelMessages, {});
         }

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.d.ts

@@ -0,0 +1 @@
+export declare function AccountScreen(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountScreen = AccountScreen;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 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:
+
+- **AI Assistant** - use the built-in assistant powered by hosted LLM inference
+- **Cloud relay** - improved connectivity between your devices
+- **Future services** - new cloud features as they become available
+
+### Is it safe?
+
+Registration uses a **cryptographic challenge-response** to prove you own your secret key.
+Your **secret key never leaves your device**. Only your public key is shared with the server.
+
+### Do I have to register?
+
+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)(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);
+    const isRegistered = !!registrationStatus;
+    const handleRegister = async () => {
+        setIsRegistering(true);
+        setError(null);
+        setSuccess(null);
+        try {
+            const token = await peers_sdk_1.rpcServerCalls.registerWithPeersServices();
+            (0, peers_services_registration_1.persistPeersServicesRegistration)(token);
+            setSuccess("Account registered successfully.");
+        }
+        catch (err) {
+            setError(`Registration failed: ${String(err)}`);
+        }
+        finally {
+            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, {
+                                            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"] })) })] }))] }) })] }));
+}

package/dist/screens/setup-user.js

@@ -31,7 +31,7 @@ const SetupUser = () => {
                 .catch((err) => {
                 console.error("Error auto-installing peers-core:", 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/dist/system-apps/account.app.d.ts

@@ -0,0 +1,2 @@
+import type { IAppNav } from "@peers-app/peers-sdk";
+export declare const accountApp: IAppNav;

package/dist/system-apps/account.app.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.accountApp = void 0;
+exports.accountApp = {
+    name: "Account",
+    iconClassName: "bi-person-circle",
+    navigationPath: "account",
+};

package/dist/system-apps/index.d.ts

@@ -1,4 +1,5 @@
 import type { IAppNav, IPackage } from "@peers-app/peers-sdk";
+export { accountApp } from "./account.app";
 export { assistantsApp } from "./assistants.app";
 export { consoleLogsApp } from "./console-logs.app";
 export { contactsApp } from "./contacts.app";

package/dist/system-apps/index.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.systemPackage = exports.systemApps = exports.workflowsApp = exports.variablesApp = exports.typesApp = exports.toolsApp = exports.threadsApp = exports.settingsApp = exports.searchApp = exports.packagesApp = exports.networkViewerApp = exports.mobileSettingsApp = exports.joinGroupApp = exports.groupsApp = exports.dataExplorerApp = exports.contactsApp = exports.consoleLogsApp = exports.assistantsApp = void 0;
+exports.systemPackage = exports.systemApps = exports.workflowsApp = exports.variablesApp = exports.typesApp = exports.toolsApp = exports.threadsApp = exports.settingsApp = exports.searchApp = exports.packagesApp = exports.networkViewerApp = exports.mobileSettingsApp = exports.joinGroupApp = exports.groupsApp = exports.dataExplorerApp = exports.contactsApp = exports.consoleLogsApp = exports.assistantsApp = exports.accountApp = void 0;
+var account_app_1 = require("./account.app");
+Object.defineProperty(exports, "accountApp", { enumerable: true, get: function () { return account_app_1.accountApp; } });
 var assistants_app_1 = require("./assistants.app");
 Object.defineProperty(exports, "assistantsApp", { enumerable: true, get: function () { return assistants_app_1.assistantsApp; } });
 var console_logs_app_1 = require("./console-logs.app");
@@ -34,6 +36,7 @@ var variables_app_1 = require("./variables.app");
 Object.defineProperty(exports, "variablesApp", { enumerable: true, get: function () { return variables_app_1.variablesApp; } });
 var workflows_app_1 = require("./workflows.app");
 Object.defineProperty(exports, "workflowsApp", { enumerable: true, get: function () { return workflows_app_1.workflowsApp; } });
+const account_app_2 = require("./account.app");
 const assistants_app_2 = require("./assistants.app");
 const console_logs_app_2 = require("./console-logs.app");
 const contacts_app_2 = require("./contacts.app");
@@ -75,6 +78,7 @@ exports.systemApps = [
     groups_app_2.groupsApp,
     join_group_app_2.joinGroupApp,
     // User & Settings Apps
+    account_app_2.accountApp,
     settings_app_2.settingsApp,
     // Mobile Settings (only in React Native)
     ...(isReactNative() ? [mobile_settings_app_2.mobileSettingsApp] : []),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "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.0",
+    "@peers-app/peers-sdk": "^0.16.2",
     "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.0",
+    "@peers-app/peers-sdk": "0.16.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/components/router.tsx

@@ -1,5 +1,6 @@
 import * as globals from "../globals";
 import { useObservable } from "../hooks";
+import { AccountScreen } from "../screens/account/account-screen";
 import { AssistantDetails } from "../screens/assistants/assistant-details";
 import { AssistantList } from "../screens/assistants/assistant-list";
 import { PackageDetails } from "../screens/packages/package-details";
@@ -54,6 +55,9 @@ export function Router({ path: providedPath }: { path?: string } = {}) {
     if (path === "settings" || path === "profile") {
       return <SettingsPage />;
     }
+    if (path === "account") {
+      return <AccountScreen />;
+    }
     if (path === "threads" || path === "") {
       return <ChannelMessages />;
     }

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

@@ -0,0 +1,135 @@
+import { rpcServerCalls } from "@peers-app/peers-sdk";
+import { useState } from "react";
+import { Tooltip } from "../../components/tooltip";
+import { useObservable } from "../../hooks";
+import {
+  persistPeersServicesRegistration,
+  registrationStatusPvar,
+} from "../../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:
+
+- **AI Assistant** - use the built-in assistant powered by hosted LLM inference
+- **Cloud relay** - improved connectivity between your devices
+- **Future services** - new cloud features as they become available
+
+### Is it safe?
+
+Registration uses a **cryptographic challenge-response** to prove you own your secret key.
+Your **secret key never leaves your device**. Only your public key is shared with the server.
+
+### Do I have to register?
+
+No. Peers works fully in local/peer-to-peer mode without registration. Cloud features simply won't be available until you register.`;
+
+export function AccountScreen() {
+  const [registrationStatus] = useObservable(registrationStatusPvar);
+  const [isRegistering, setIsRegistering] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const isRegistered = !!registrationStatus;
+
+  const handleRegister = async () => {
+    setIsRegistering(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      const token = await rpcServerCalls.registerWithPeersServices();
+      persistPeersServicesRegistration(token);
+      setSuccess("Account registered successfully.");
+    } catch (err) {
+      setError(`Registration failed: ${String(err)}`);
+    } finally {
+      setIsRegistering(false);
+    }
+  };
+
+  return (
+    <div className="container-fluid p-3" style={{ maxWidth: 600 }}>
+      <h4 className="mb-3 d-flex align-items-center gap-2">
+        <i className="bi bi-person-circle" />
+        Account
+      </h4>
+
+      {error && (
+        <div className="alert alert-danger alert-dismissible" role="alert">
+          <i className="bi bi-exclamation-triangle me-2" />
+          {error}
+          <button
+            type="button"
+            className="btn-close"
+            onClick={() => setError(null)}
+            aria-label="Close"
+          />
+        </div>
+      )}
+
+      {success && (
+        <div className="alert alert-success alert-dismissible" role="alert">
+          <i className="bi bi-check-circle me-2" />
+          {success}
+          <button
+            type="button"
+            className="btn-close"
+            onClick={() => setSuccess(null)}
+            aria-label="Close"
+          />
+        </div>
+      )}
+
+      <div className="card">
+        <div className="card-body">
+          <h5 className="card-title d-flex align-items-center gap-2">
+            Peers Services Registration
+            <Tooltip markdownContent={INFO_TEXT} />
+          </h5>
+
+          {isRegistered ? (
+            <div>
+              <div className="d-flex align-items-center gap-2 mb-2">
+                <i className="bi bi-check-circle-fill text-success" style={{ fontSize: "1.2em" }} />
+                <span>Registered</span>
+              </div>
+              <small className="text-muted">
+                Registered on{" "}
+                {new Date(registrationStatus as string).toLocaleDateString(undefined, {
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })}
+              </small>
+            </div>
+          ) : (
+            <div>
+              <p className="text-muted mb-3">
+                Register your account to enable cloud-powered features like the AI assistant.
+              </p>
+              <button
+                type="button"
+                className="btn btn-primary"
+                onClick={handleRegister}
+                disabled={isRegistering}
+              >
+                {isRegistering ? (
+                  <>
+                    <span className="spinner-border spinner-border-sm me-2" />
+                    Registering...
+                  </>
+                ) : (
+                  <>
+                    <i className="bi bi-cloud-upload me-2" />
+                    Register Account
+                  </>
+                )}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/screens/setup-user.tsx

@@ -46,7 +46,7 @@ export const SetupUser = () => {
           console.error("Error auto-installing peers-core:", 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();

package/src/system-apps/account.app.ts

@@ -0,0 +1,7 @@
+import type { IAppNav } from "@peers-app/peers-sdk";
+
+export const accountApp: IAppNav = {
+  name: "Account",
+  iconClassName: "bi-person-circle",
+  navigationPath: "account",
+};

package/src/system-apps/index.ts

@@ -1,5 +1,6 @@
 import type { IAppNav, IPackage } from "@peers-app/peers-sdk";
 
+export { accountApp } from "./account.app";
 export { assistantsApp } from "./assistants.app";
 export { consoleLogsApp } from "./console-logs.app";
 export { contactsApp } from "./contacts.app";
@@ -18,6 +19,7 @@ export { typesApp } from "./types.app";
 export { variablesApp } from "./variables.app";
 export { workflowsApp } from "./workflows.app";
 
+import { accountApp } from "./account.app";
 import { assistantsApp } from "./assistants.app";
 import { consoleLogsApp } from "./console-logs.app";
 import { contactsApp } from "./contacts.app";
@@ -64,6 +66,7 @@ export const systemApps: IAppNav[] = [
   joinGroupApp,
 
   // User & Settings Apps
+  accountApp,
   settingsApp,
   // Mobile Settings (only in React Native)
   ...(isReactNative() ? [mobileSettingsApp] : []),