@peers-app/peers-ui 0.25.1 → 0.25.3

package/src/screens/network-viewer/network-viewer-ipc.ts

@@ -1,18 +1,11 @@
 import {
-  createContractConsumer,
-  getHostContractTransport,
   getNetworkControlContractDefinition,
   getNetworkDiagnosticsContractDefinition,
-  type IContractTransport,
+  hostContractConsumer,
   type INetworkControlConsumer,
   type INetworkDiagnosticsConsumer,
-  subscribeHostContractTransport,
-  waitForHostContractTransport,
 } from "@peers-app/peers-sdk";
 
-/** Default wait for the host transport before treating diagnostics as unavailable. */
-const HOST_TRANSPORT_TIMEOUT_MS = 10_000;
-
 /** Electron-only capabilities intentionally excluded from portable network contracts. */
 export type NetworkViewerPlatformApi = {
   downloadRemoteDatabase?: (groupId: string, deviceId: string) => Promise<unknown>;
@@ -23,88 +16,21 @@ type WindowWithNetworkViewer = Window & {
   electronAPI?: { networkViewer?: NetworkViewerPlatformApi };
 };
 
-interface INetworkViewerConsumers {
-  transport: IContractTransport;
-  diagnostics: INetworkDiagnosticsConsumer;
-  control: INetworkControlConsumer;
-}
-
-let cachedConsumers: INetworkViewerConsumers | undefined;
-let pendingConsumers: Promise<INetworkViewerConsumers> | undefined;
-
-function disposeCachedConsumers(): void {
-  cachedConsumers?.diagnostics.dispose();
-  cachedConsumers?.control.dispose();
-  cachedConsumers = undefined;
-}
-
-subscribeHostContractTransport(
-  (transport) => {
-    if (cachedConsumers && cachedConsumers.transport !== transport) {
-      disposeCachedConsumers();
-    }
-  },
-  { emitCurrent: false },
+const diagnostics = hostContractConsumer<INetworkDiagnosticsConsumer>(
+  getNetworkDiagnosticsContractDefinition(),
+);
+const control = hostContractConsumer<INetworkControlConsumer>(
+  getNetworkControlContractDefinition(),
 );
-
-async function loadConsumers(transport: IContractTransport): Promise<INetworkViewerConsumers> {
-  disposeCachedConsumers();
-  const diagnostics = createContractConsumer(
-    getNetworkDiagnosticsContractDefinition(),
-    transport,
-  ) as unknown as INetworkDiagnosticsConsumer;
-  const control = createContractConsumer(
-    getNetworkControlContractDefinition(),
-    transport,
-  ) as unknown as INetworkControlConsumer;
-  try {
-    await diagnostics.loadingPromise;
-    if (getHostContractTransport() !== transport) {
-      diagnostics.dispose();
-      control.dispose();
-      // Clear before recursing so getConsumers can start a fresh in-flight memo for the
-      // current transport, and so this promise's finally does not wipe that newer memo.
-      pendingConsumers = undefined;
-      return getConsumers();
-    }
-    cachedConsumers = { transport, diagnostics, control };
-    return cachedConsumers;
-  } catch (error) {
-    diagnostics.dispose();
-    control.dispose();
-    throw error;
-  }
-}
-
-async function getConsumers(): Promise<INetworkViewerConsumers> {
-  const transport =
-    getHostContractTransport() ??
-    (await waitForHostContractTransport({ timeoutMs: HOST_TRANSPORT_TIMEOUT_MS }));
-  if (cachedConsumers?.transport === transport) {
-    return cachedConsumers;
-  }
-  if (pendingConsumers) {
-    return pendingConsumers;
-  }
-  const loadPromise = loadConsumers(transport);
-  pendingConsumers = loadPromise;
-  try {
-    return await loadPromise;
-  } finally {
-    if (pendingConsumers === loadPromise) {
-      pendingConsumers = undefined;
-    }
-  }
-}
 
 /** Return a typed diagnostics consumer bound to the current local host transport. */
 export async function getNetworkDiagnosticsConsumer(): Promise<INetworkDiagnosticsConsumer> {
-  return (await getConsumers()).diagnostics;
+  return diagnostics.get();
 }
 
 /** Return a typed control consumer bound to the current local host transport. */
 export async function getNetworkControlConsumer(): Promise<INetworkControlConsumer> {
-  return (await getConsumers()).control;
+  return control.get();
 }
 
 /** Return the context-isolated desktop-only capability bridge, when available. */

package/src/screens/search/global-search.tsx

@@ -39,9 +39,10 @@ const searchConfigs: Array<{
   { config: assistantMentionConfig, category: "Assistants", navigationPath: "assistants" },
   { config: workflowMentionConfig, category: "Workflows", navigationPath: "workflows" },
   { config: valueTypeMentionConfig, category: "Types", navigationPath: "peer-types" },
-  { config: userMentionConfig, category: "Users", navigationPath: "contacts" },
+  { config: userMentionConfig, category: "People", navigationPath: "identity/people" },
 ];
 
+/** Search system apps and known entities, then navigate to their canonical routes. */
 export function GlobalSearch() {
   const [_colorMode] = useObservable(colorMode);
   const [packages] = useObservable(allPackages);

package/src/screens/settings/settings-page.tsx

@@ -1,14 +1,10 @@
 import {
   autoUpdatePeersCore,
-  Devices,
   DISPLAY_NAME_MAX_LENGTH,
   getUserContext,
-  type IDevice,
   packagesRootDir,
   reloadPackagesOnPageRefresh,
   rpcServerCalls,
-  TrustLevel,
-  thisDeviceId,
   Users,
 } from "@peers-app/peers-sdk";
 import type React from "react";
@@ -17,9 +13,10 @@ import { Input } from "../../components/input";
 import { Tabs } from "../../components/tabs";
 import { Tooltip } from "../../components/tooltip";
 import * as globals from "../../globals";
-import { useObservable, useObservableState, usePromise } from "../../hooks";
+import { useObservable, usePromise } from "../../hooks";
 import { LayoutPicker } from "../../root-layout/layout-picker";
-import { SourceDevicePairing } from "../device-pairing";
+import { identityTools } from "../device-pairing/identity-ipc";
+import { IDENTITY_ACCOUNT_PATH, IDENTITY_PAIR_PATH } from "../identity/identity-routes";
 import { ColorModeDropdown } from "./color-mode-dropdown";
 
 /** Electron file picker attaches a filesystem path on `File`. */
@@ -46,24 +43,29 @@ function getAppVersion() {
 /** Application settings organized by user, system, and developer concerns. */
 export const SettingsPage: React.FC = () => {
   return (
-    <div className="container-fluid">
-      <Tabs
-        tabs={[
-          {
-            name: "User",
-            content: <UserSettingsTab />,
-            active: true,
-          },
-          {
-            name: "Appearance",
-            content: <AppearanceSettingsTab />,
-          },
-          {
-            name: "Advanced",
-            content: <AdvancedSettingsTab />,
-          },
-        ]}
-      />
+    <div className="d-flex flex-column h-100 overflow-hidden" style={{ minHeight: 0 }}>
+      <div className="container-fluid flex-grow-1 overflow-auto" style={{ minHeight: 0 }}>
+        <Tabs
+          tabs={[
+            {
+              name: "User",
+              content: <UserSettingsTab />,
+              active: true,
+            },
+            {
+              name: "Appearance",
+              content: <AppearanceSettingsTab />,
+            },
+            {
+              name: "Advanced",
+              content: <AdvancedSettingsTab />,
+            },
+          ]}
+        />
+      </div>
+      <footer className="flex-shrink-0 border-top px-3 py-2 small text-muted">
+        Peers {getAppVersion()}
+      </footer>
     </div>
   );
 };
@@ -72,6 +74,7 @@ const UserSettingsTab: React.FC = () => {
   return (
     <>
       <ProfileSection />
+      <IdentityAccountSection />
       <AddDeviceSection />
       <LogoutSection />
     </>
@@ -109,31 +112,11 @@ const AdvancedSettingsTab: React.FC = () => {
 };
 
 const ProfileSection: React.FC = () => {
-  const [deviceId] = useObservable(thisDeviceId);
-  const deviceName = useObservableState<string>("");
-  const savedDeviceName = useObservableState<string>("");
-
   const me = usePromise(async () => {
     const userContext = await getUserContext();
     return Users(userContext.userDataContext).initDoc(globals.me);
   });
 
-  // Load device name
-  useEffect(() => {
-    const loadDevice = async () => {
-      if (!deviceId) return;
-      try {
-        const userContext = await getUserContext();
-        const device = await Devices(userContext.userDataContext).get(deviceId);
-        deviceName((device?.name || "").slice(0, DISPLAY_NAME_MAX_LENGTH));
-        savedDeviceName(device?.name || "");
-      } catch (err) {
-        console.error("Error loading device name:", err);
-      }
-    };
-    loadDevice();
-  }, [deviceId, deviceName, savedDeviceName]);
-
   const handleSave = async () => {
     try {
       // Save user profile (only when it actually changed). Pass me.toJS() — the
@@ -147,22 +130,6 @@ const ProfileSection: React.FC = () => {
         me.qs.name(updatedUser.name);
         me.q(0); // Reset change counter
       }
-
-      // Save device name if changed
-      if (deviceId && deviceName() !== savedDeviceName()) {
-        const userContext = await getUserContext();
-        const devicesTable = Devices(userContext.userDataContext);
-        const device: IDevice = (await devicesTable.get(deviceId)) || {
-          deviceId,
-          userId: userContext.userId,
-          firstSeen: new Date(),
-          lastSeen: new Date(),
-          trustLevel: TrustLevel.NewDevice,
-        };
-        device.name = deviceName() || undefined;
-        await devicesTable.save(device);
-        savedDeviceName(deviceName());
-      }
     } catch (err) {
       console.error("Error saving profile:", err);
       alert(`Failed to save: ${(err as Error).message}`);
@@ -171,103 +138,63 @@ const ProfileSection: React.FC = () => {
 
   // Subscribe to changes
   useObservable(me?.q);
-  useObservable(deviceName);
 
   if (!me) {
     return null;
   }
 
-  const hasChanges = !!me.q() || deviceName() !== savedDeviceName();
+  const hasChanges = !!me.q();
 
   return (
     <>
       <div className="d-flex align-items-center mb-3">
-        <h5 className="mb-0 me-auto">Settings</h5>
+        <h5 className="mb-0 me-auto">Profile</h5>
         <button className="btn btn-primary btn-sm" onClick={handleSave} disabled={!hasChanges}>
           Save
         </button>
       </div>
 
       <div className="mb-3">
-        <small className="form-label">Display Name:</small>
+        <label className="form-label small" htmlFor="settings-display-name">
+          Display name
+        </label>
         <Input
+          id="settings-display-name"
           value={me.qs.name}
           className="form-control"
           maxLength={DISPLAY_NAME_MAX_LENGTH}
           placeholder="Enter your name"
         />
       </div>
-
-      <div className="mb-3">
-        <small className="form-label">
-          Device Name:
-          <Tooltip markdownContent="Give this device a friendly name to identify it in your network." />
-        </small>
-        <Input
-          value={deviceName}
-          className="form-control"
-          maxLength={DISPLAY_NAME_MAX_LENGTH}
-          placeholder="e.g., My Laptop"
-        />
-      </div>
-
-      <div className="mb-3">
-        <small className="form-label">
-          User ID:
-          <Tooltip markdownContent="This uniquely identifies you to all other users." />
-        </small>
-        <Input value={me.userId} className="form-control" disabled />
-      </div>
-
-      <div className="row">
-        <div className="col-md-6 mb-3">
-          <small className="form-label">
-            Public Key:
-            <Tooltip markdownContent="This is your public key that other users will use to verify your signatures." />
-          </small>
-          <Input value={me.publicKey} className="form-control form-control-sm" disabled />
-        </div>
-        <div className="col-md-6 mb-3">
-          <small className="form-label">
-            Public Box Key:
-            <Tooltip markdownContent="This is the public key that other users can use to encrypt data so that only you can open it." />
-          </small>
-          <Input value={me.publicBoxKey} className="form-control form-control-sm" disabled />
-        </div>
-      </div>
-
-      <div className="mb-3">
-        <small className="form-label">
-          Device ID:
-          <Tooltip markdownContent="This uniquely identifies this device on Peers networks." />
-        </small>
-        <Input value={deviceId || ""} className="form-control form-control-sm" disabled />
-      </div>
-
-      <div className="mb-3">
-        <small className="form-label">App Version:</small>
-        <Input value={getAppVersion()} className="form-control form-control-sm" disabled />
-      </div>
     </>
   );
 };
 
+const IdentityAccountSection: React.FC = () => {
+  return (
+    <section className="mt-4 pt-3 border-top">
+      <h6>Identity account</h6>
+      <p className="small text-muted">
+        View account identifiers, security keys, this device’s ID, and Peers Services registration.
+      </p>
+      <a href={`#${IDENTITY_ACCOUNT_PATH}`} className="btn btn-outline-primary">
+        View Identity account
+      </a>
+    </section>
+  );
+};
+
 const AddDeviceSection: React.FC = () => {
-  const [open, setOpen] = useState(false);
   return (
     <section className="mt-4 pt-3 border-top">
       <h6>Add another device</h6>
       <p className="small text-muted">
-        On the new device choose “Sign in from another device”, then type the code it shows here and
-        approve. Account access is transferred only after you approve.
+        On the new device choose “Sign in from another device”, then type the code it shows on
+        Identity → Devices and approve. Account access is transferred only after you approve.
       </p>
-      {open ? (
-        <SourceDevicePairing onClose={() => setOpen(false)} />
-      ) : (
-        <button type="button" className="btn btn-outline-primary" onClick={() => setOpen(true)}>
-          Add another device
-        </button>
-      )}
+      <a href={`#${IDENTITY_PAIR_PATH}`} className="btn btn-outline-primary">
+        Add another device
+      </a>
     </section>
   );
 };
@@ -728,7 +655,7 @@ const LogoutSection: React.FC = () => {
               "Make sure you have your User ID and Secret Key saved securely, or you will lose access to your account.",
           );
           if (!confirmed) return;
-          await rpcServerCalls.logout();
+          await (await identityTools()).signOut();
         }}
       >
         Logout

package/src/screens/setup-user.tsx

@@ -4,12 +4,12 @@ import {
   newid,
   newKeys,
   openMessageWithPublicKey,
-  rpcServerCalls,
   signMessageWithSecretKey,
 } from "@peers-app/peers-sdk";
 import { useState } from "react";
 import { useObservable } from "../hooks";
 import { DestinationDevicePairing } from "./device-pairing";
+import { identityTools } from "./device-pairing/identity-ipc";
 import { colorMode } from "./settings/color-mode-dropdown";
 
 type SetupStep = "select-user-type" | "complete";
@@ -37,9 +37,9 @@ export const SetupUser = () => {
       const keys = newKeys();
       const _userId = newid();
 
-      // Call setUserIdAndSecretKey. This triggers device init, which installs
-      // peers-core into the personal context (S3-first, bundle fallback).
-      await rpcServerCalls.setUserIdAndSecretKey(_userId, keys.secretKey);
+      // signIn triggers device init, which installs peers-core into the personal
+      // context (S3-first, bundle fallback).
+      await (await identityTools()).signIn({ userId: _userId, secretKey: keys.secretKey });
 
       // Success - reload the app (peers-services registration runs after Welcome modal)
       window.location.reload();
@@ -76,8 +76,7 @@ export const SetupUser = () => {
         throw new Error("Secret key validation failed");
       }
 
-      // Call setUserIdAndSecretKey
-      await rpcServerCalls.setUserIdAndSecretKey(userId, keys.secretKey);
+      await (await identityTools()).signIn({ userId, secretKey: keys.secretKey });
 
       // Success - reload the app
       window.location.reload();

package/src/screens/tools/tool-access-ipc.ts

@@ -1,88 +1,27 @@
 import {
-  createContractConsumer,
-  getHostContractTransport,
   getToolAccessControlContractDefinition,
-  type IContractTransport,
+  hostContractConsumer,
+  type IHostContractConsumer,
   type IToolAccessControlConsumer,
-  subscribeHostContractTransport,
-  waitForHostContractTransport,
 } from "@peers-app/peers-sdk";
 
-const HOST_TRANSPORT_TIMEOUT_MS = 10_000;
-
-type CachedConsumer = {
-  transport: IContractTransport;
-  consumer: IToolAccessControlConsumer;
-};
-
-const cachedByContext = new Map<string, CachedConsumer>();
-const pendingByContext = new Map<string, Promise<IToolAccessControlConsumer>>();
-
-function disposeCachedConsumers(): void {
-  for (const cached of cachedByContext.values()) {
-    cached.consumer.dispose();
-  }
-  cachedByContext.clear();
-}
-
-subscribeHostContractTransport(
-  (transport) => {
-    if ([...cachedByContext.values()].some((cached) => cached.transport !== transport)) {
-      disposeCachedConsumers();
-      pendingByContext.clear();
-    }
-  },
-  { emitCurrent: false },
-);
-
-async function loadConsumer(
-  transport: IContractTransport,
-  dataContextId: string,
-): Promise<IToolAccessControlConsumer> {
-  cachedByContext.get(dataContextId)?.consumer.dispose();
-  cachedByContext.delete(dataContextId);
-  const consumer = createContractConsumer(getToolAccessControlContractDefinition(), transport, {
-    dataContextId,
-  }) as unknown as IToolAccessControlConsumer;
-  try {
-    await consumer.loadingPromise;
-    if (getHostContractTransport() !== transport) {
-      consumer.dispose();
-      pendingByContext.delete(dataContextId);
-      return getToolAccessControlConsumer(dataContextId);
-    }
-    cachedByContext.set(dataContextId, { transport, consumer });
-    return consumer;
-  } catch (error) {
-    consumer.dispose();
-    throw error;
-  }
-}
+const consumers = new Map<string, IHostContractConsumer<IToolAccessControlConsumer>>();
 
 /**
  * Return a typed local-host consumer for Tool Access Control in `dataContextId`.
+ *
+ * One consumer is cached per data context and rebuilt when the host transport changes.
  */
 export async function getToolAccessControlConsumer(
   dataContextId: string,
 ): Promise<IToolAccessControlConsumer> {
-  const transport =
-    getHostContractTransport() ??
-    (await waitForHostContractTransport({ timeoutMs: HOST_TRANSPORT_TIMEOUT_MS }));
-  const cached = cachedByContext.get(dataContextId);
-  if (cached?.transport === transport) {
-    return cached.consumer;
-  }
-  const pending = pendingByContext.get(dataContextId);
-  if (pending) {
-    return pending;
-  }
-  const loadPromise = loadConsumer(transport, dataContextId);
-  pendingByContext.set(dataContextId, loadPromise);
-  try {
-    return await loadPromise;
-  } finally {
-    if (pendingByContext.get(dataContextId) === loadPromise) {
-      pendingByContext.delete(dataContextId);
-    }
+  let handle = consumers.get(dataContextId);
+  if (!handle) {
+    handle = hostContractConsumer<IToolAccessControlConsumer>(
+      getToolAccessControlContractDefinition(),
+      { dataContextId: async () => dataContextId },
+    );
+    consumers.set(dataContextId, handle);
   }
+  return handle.get();
 }

package/src/screens/welcome-modal.tsx

@@ -5,7 +5,6 @@ import {
   getUserContext,
   hasShownWelcomeModal,
   type IDevice,
-  rpcServerCalls,
   TrustLevel,
   thisDeviceId,
   Users,
@@ -14,6 +13,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 import { useObservable, usePromise } from "../hooks";
 import { persistPeersServicesRegistration } from "../peers-services-registration";
+import { identityTools } from "./device-pairing/identity-ipc";
 
 interface WelcomeModalProps {
   colorMode: string;
@@ -22,8 +22,8 @@ interface WelcomeModalProps {
 
 async function tryRegisterPeersServicesAfterWelcome(): Promise<void> {
   try {
-    const token = await rpcServerCalls.registerWithPeersServices();
-    persistPeersServicesRegistration(token);
+    const { token } = await (await identityTools()).registerWithPeersServices();
+    await persistPeersServicesRegistration(token);
   } catch (err: unknown) {
     console.warn("Peers services registration after welcome modal:", err);
   }

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

@@ -0,0 +1,9 @@
+import type { IAppNav } from "@peers-app/peers-sdk";
+
+/** Identity system app: activity, people, groups, devices, and account. */
+export const identityApp: IAppNav = {
+  name: "Identity",
+  displayName: "Identity",
+  iconClassName: "bi-person-badge",
+  navigationPath: "identity",
+};

package/src/system-apps/index.ts

@@ -1,13 +1,10 @@
 import type { IAppNav } from "@peers-app/peers-sdk";
 import type { IPackageWithNavs } from "../ui-router/routes-loader";
 
-export { accountApp } from "./account.app";
 export { assistantsApp } from "./assistants.app";
 export { consoleLogsApp } from "./console-logs.app";
-export { contactsApp } from "./contacts.app";
 export { dataExplorerApp } from "./data-explorer.app";
-export { groupsApp } from "./groups.app";
-export { invitesApp } from "./invites.app";
+export { identityApp } from "./identity.app";
 export { mobileSettingsApp } from "./mobile-settings.app";
 export { networkViewerApp } from "./network-viewer.app";
 export { packagesApp } from "./packages.app";
@@ -20,13 +17,10 @@ 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";
 import { dataExplorerApp } from "./data-explorer.app";
-import { groupsApp } from "./groups.app";
-import { invitesApp } from "./invites.app";
+import { identityApp } from "./identity.app";
 import { mobileSettingsApp } from "./mobile-settings.app";
 import { networkViewerApp } from "./network-viewer.app";
 import { packagesApp } from "./packages.app";
@@ -62,12 +56,9 @@ export const systemApps: IAppNav[] = [
   workflowsApp,
   assistantsApp,
   packagesApp,
-  contactsApp,
-  groupsApp,
-  invitesApp,
+  identityApp,
 
   // User & Settings Apps
-  accountApp,
   settingsApp,
   // Mobile Settings (only in React Native)
   ...(isReactNative() ? [mobileSettingsApp] : []),

package/src/tabs-layout/network-status-indicator.test.tsx

@@ -2,6 +2,7 @@ import type { INetworkConnectionInfo, INetworkStatusSummary } from "@peers-app/p
 import { TrustLevel } from "@peers-app/peers-sdk";
 import { act, fireEvent, render, waitFor } from "@testing-library/react";
 import moment from "moment";
+import { IDENTITY_ACCEPT_PATH, IDENTITY_ACCOUNT_PATH } from "../screens/identity/identity-routes";
 import {
   connectionIdentityLabel,
   formatRelativeSyncTime,
@@ -496,6 +497,27 @@ describe("NetworkStatusIndicator", () => {
     });
   });
 
+  it("offers shortcuts to use an invite and open the Identity account", () => {
+    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+    const view = render(<NetworkStatusIndicator />);
+
+    fireEvent.click(view.getByRole("button", { name: /Network synced/ }));
+    expect(
+      view.getByRole("button", { name: "Use Invite" }).querySelector(".bi-qr-code"),
+    ).toBeTruthy();
+    expect(
+      view.getByRole("button", { name: "Identity" }).querySelector(".bi-person-badge"),
+    ).toBeTruthy();
+    fireEvent.click(view.getByRole("button", { name: "Use Invite" }));
+    expect(goToTabPath).toHaveBeenCalledWith(IDENTITY_ACCEPT_PATH);
+    expect(view.queryByRole("dialog", { name: "Network status details" })).toBeNull();
+
+    fireEvent.click(view.getByRole("button", { name: /Network synced/ }));
+    fireEvent.click(view.getByRole("button", { name: "Identity" }));
+    expect(goToTabPath).toHaveBeenCalledWith(IDENTITY_ACCOUNT_PATH);
+    expect(view.queryByRole("dialog", { name: "Network status details" })).toBeNull();
+  });
+
   it("updates on rerender and opens details before navigating to Network Viewer", async () => {
     const view = render(<NetworkStatusIndicator />);
     expect(view.getByRole("button", { name: /loading/ })).toBeTruthy();