@peers-app/peers-ui 0.25.2 → 0.25.4

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();

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

@@ -1,6 +1,7 @@
 import type { INetworkConnectionInfo, INetworkStatusSummary } from "@peers-app/peers-sdk";
 import moment from "moment";
 import { useEffect, useId, useRef, useState } from "react";
+import { IDENTITY_ACCEPT_PATH, IDENTITY_ACCOUNT_PATH } from "../screens/identity/identity-routes";
 import { getNetworkDiagnosticsConsumer } from "../screens/network-viewer/network-viewer-ipc";
 import { goToTabPath } from "./tabs-state";
 import { type INetworkStatusViewState, useNetworkStatus } from "./use-network-status";
@@ -311,12 +312,16 @@ function NetworkStatusDetails({
   status,
   unavailable,
   connectionsLoadState,
+  onUseInvite,
+  onOpenIdentity,
   onOpenViewer,
 }: {
   detailsId: string;
   status?: INetworkStatusSummary;
   unavailable: boolean;
   connectionsLoadState: ConnectionsLoadState;
+  onUseInvite: () => void;
+  onOpenIdentity: () => void;
   onOpenViewer: () => void;
 }) {
   return (
@@ -328,6 +333,24 @@ function NetworkStatusDetails({
       style={{ top: "100%", width: "320px", zIndex: 1100 }}
     >
       <div className="card-body p-3">
+        <div className="d-flex gap-2 mb-3">
+          <button
+            type="button"
+            className="btn btn-sm btn-outline-primary flex-fill"
+            onClick={onUseInvite}
+          >
+            <i className="bi bi-qr-code me-1" aria-hidden="true" />
+            Use Invite
+          </button>
+          <button
+            type="button"
+            className="btn btn-sm btn-outline-primary flex-fill"
+            onClick={onOpenIdentity}
+          >
+            <i className="bi bi-person-badge me-1" aria-hidden="true" />
+            Identity
+          </button>
+        </div>
         <h6 className="card-title mb-2">Network status</h6>
         {unavailable || !status ? (
           <p className="small text-muted mb-3">
@@ -559,6 +582,14 @@ export function NetworkStatusIndicator({ compact = false }: { compact?: boolean
           status={viewState.status}
           unavailable={viewState.availability !== "ready"}
           connectionsLoadState={connectionsLoadState}
+          onUseInvite={() => {
+            setOpen(false);
+            goToTabPath(IDENTITY_ACCEPT_PATH);
+          }}
+          onOpenIdentity={() => {
+            setOpen(false);
+            goToTabPath(IDENTITY_ACCOUNT_PATH);
+          }}
           onOpenViewer={() => {
             setOpen(false);
             goToTabPath("network-viewer");

package/src/tabs-layout/tabs-layout.tsx

@@ -10,6 +10,7 @@ import { GroupSwitcher } from "../components/group-switcher";
 import { Router } from "../components/router";
 import { isDesktop } from "../globals";
 import { useObservable } from "../hooks";
+import { isIdentityPath } from "../screens/identity/identity-routes";
 import { colorMode } from "../screens/settings/color-mode-dropdown";
 import { systemPackage } from "../system-apps";
 import { allPackages } from "../ui-router/routes-loader";
@@ -546,9 +547,14 @@ const TabContentRenderer = React.memo(
     // System apps use the main Router (which reads from mainContentPath)
     // Package apps use UIRouter with explicit path
     const isSystemApp = tab.packageId === "system-apps";
+    const identityApp = isSystemApp && isIdentityPath(tab.path);
 
     return (
-      <div className={`h-100 overflow-auto ${isMobile ? "p-2" : "p-3"}`}>
+      <div
+        className={`h-100 ${identityApp ? "overflow-hidden" : "overflow-auto"} ${
+          identityApp ? "" : isMobile ? "p-2" : "p-3"
+        }`}
+      >
         {isSystemApp ? (
           <Router path={tab.path} />
         ) : (

package/src/tabs-layout/tabs-state.test.ts

@@ -0,0 +1,152 @@
+jest.mock("../globals", () => {
+  const { observable } =
+    jest.requireActual<typeof import("@peers-app/peers-sdk")>("@peers-app/peers-sdk");
+  return { _mainContentPath: observable("") };
+});
+
+jest.mock("../ui-router/routes-loader", () => {
+  const { observable } =
+    jest.requireActual<typeof import("@peers-app/peers-sdk")>("@peers-app/peers-sdk");
+  return { allPackages: observable([]) };
+});
+
+jest.mock("@peers-app/peers-sdk", () => {
+  const actual = jest.requireActual<typeof import("@peers-app/peers-sdk")>("@peers-app/peers-sdk");
+  let nextId = 0;
+  const deviceVars = new Map<string, ReturnType<typeof actual.observable>>();
+  const userVars = new Map<string, ReturnType<typeof actual.observable>>();
+
+  function stored<T>(
+    map: Map<string, ReturnType<typeof actual.observable>>,
+    id: string,
+    initial: T,
+  ) {
+    const existing = map.get(id);
+    if (existing) {
+      return existing;
+    }
+    const value = actual.observable(initial);
+    Object.assign(value, { loadingPromise: Promise.resolve() });
+    map.set(id, value);
+    return value;
+  }
+
+  return {
+    ...actual,
+    newid: () => `tab${++nextId}`,
+    groupDeviceVar: (id: string, options?: { defaultValue?: unknown }) =>
+      stored(deviceVars, id, options?.defaultValue),
+    groupUserVar: (id: string, options?: { defaultValue?: unknown }) =>
+      stored(userVars, id, options?.defaultValue),
+  };
+});
+
+import { _mainContentPath } from "../globals";
+import {
+  activeTabId,
+  activeTabs,
+  goToTabPath,
+  launcherApp,
+  migrateRecentPath,
+  navigateTo,
+  recentlyUsedApps,
+  restoreNavigationState,
+  type TabState,
+} from "./tabs-state";
+
+const PERSON_ID = "abcdefghijklmnopqrstuvwxy";
+
+function tab(partial: Partial<TabState> & Pick<TabState, "tabId" | "path">): TabState {
+  return {
+    packageId: "system-apps",
+    title: partial.path,
+    iconClassName: "bi-circle",
+    ...partial,
+  };
+}
+
+describe("restoreNavigationState", () => {
+  it("merges legacy identity tabs into the active Identity tab", () => {
+    const restored = restoreNavigationState(
+      [
+        launcherApp,
+        tab({ tabId: "people", path: "contacts", title: "Contacts" }),
+        tab({ tabId: "groups", path: `groups/${PERSON_ID}`, title: "Groups" }),
+        tab({ tabId: "devices", path: "devices?action=pair", title: "Devices" }),
+        tab({ tabId: "account", path: "account", title: "Account" }),
+      ],
+      "groups",
+    );
+
+    expect(restored.tabs.map((entry) => entry.path)).toEqual(["", `identity/groups/${PERSON_ID}`]);
+    expect(restored.activeId).toBe("groups");
+    expect(restored.tabs[1]?.title).toBe("Identity");
+    expect(migrateRecentPath("contacts")).toBe("identity");
+    expect(migrateRecentPath("invites/accept")).toBe("identity");
+    expect(migrateRecentPath("account")).toBe("identity");
+  });
+});
+
+describe("navigateTo", () => {
+  beforeEach(async () => {
+    await activeTabs.loadingPromise;
+    activeTabs([launcherApp, tab({ tabId: "threads", path: "threads", title: "Threads" })]);
+    activeTabId("threads");
+    recentlyUsedApps([]);
+    _mainContentPath("threads");
+  });
+
+  it("updates the same app in place and preserves the query", () => {
+    navigateTo("threads/thread-1?draft=1");
+
+    expect(activeTabs()).toHaveLength(2);
+    expect(activeTabs().find((entry) => entry.tabId === "threads")?.path).toBe(
+      "threads/thread-1?draft=1",
+    );
+    expect(activeTabId()).toBe("threads");
+    expect(_mainContentPath()).toBe("threads/thread-1?draft=1");
+  });
+
+  it("opens another app without duplicating an existing tab", () => {
+    navigateTo(`contacts/${PERSON_ID}`);
+    const identityId = activeTabId();
+    activeTabId("threads");
+    navigateTo("identity/devices?foo=bar");
+
+    const identityTabs = activeTabs().filter((entry) => entry.path.startsWith("identity"));
+    expect(identityTabs).toHaveLength(1);
+    expect(identityTabs[0]?.path).toBe("identity/devices?foo=bar");
+    expect(activeTabId()).toBe(identityId);
+    expect(activeTabs().some((entry) => entry.tabId === "threads")).toBe(true);
+  });
+
+  it("opens the account alias inside the Identity tab", () => {
+    navigateTo("account");
+    const identityId = activeTabId();
+
+    expect(_mainContentPath()).toBe("identity/account");
+    navigateTo("identity/people");
+
+    expect(activeTabId()).toBe(identityId);
+    expect(activeTabs().filter((entry) => entry.path.startsWith("identity"))).toHaveLength(1);
+    expect(_mainContentPath()).toBe("identity/people");
+  });
+
+  it("rewrites invite acceptance onto the open Identity tab", () => {
+    navigateTo("identity/people");
+    const identityId = activeTabId();
+    navigateTo("invites/accept");
+
+    expect(activeTabId()).toBe(identityId);
+    expect(activeTabs().filter((entry) => entry.path.startsWith("identity"))).toHaveLength(1);
+    expect(_mainContentPath()).toBe("identity/activity/accept");
+  });
+
+  it("keeps the current section when the app root is opened again", () => {
+    navigateTo("identity/devices/pair");
+    goToTabPath("identity");
+
+    expect(_mainContentPath()).toBe("identity/devices/pair");
+    expect(recentlyUsedApps()).toEqual(["identity"]);
+  });
+});