@peers-app/peers-ui 0.25.2 → 0.25.4

package/src/screens/invites/pending-invites-list.tsx

@@ -8,26 +8,26 @@ import {
 import { useCallback, useEffect, useState } from "react";
 import { inviteTools } from "./invites-ipc";
 
-/** Props for {@link PendingInvitesList}. */
-export interface PendingInvitesListProps {
-  /** Only show rows of this type. */
-  type?: IInvite["type"];
-  /** Only show rows for this group. */
-  groupId?: string;
-  /** Statuses to include; defaults to pending only. */
-  statuses?: InviteStatus[];
-  /** Hide the section entirely when there is nothing to show. */
-  hideWhenEmpty?: boolean;
-  title?: string;
+/** Filtered invite rows plus whether any non-pending row exists for the same type and group. */
+export interface IInviteRowQuery {
+  /** Rows matching the status filter, newest first. */
+  rows: IInvite[];
+  /** True when at least one matching invite is not pending. */
+  hasHistory: boolean;
 }
 
-/** Subscribe to the personal `Invites` table and return rows matching the filter, newest first. */
+/**
+ * Subscribe to the personal `Invites` table.
+ *
+ * @param filter Type, group, and statuses to include. Statuses default to pending.
+ * @returns Matching rows and whether any non-pending row exists, or `undefined` while loading.
+ */
 export function useInviteRows(filter: {
   type?: IInvite["type"];
   groupId?: string;
   statuses?: InviteStatus[];
-}): IInvite[] | undefined {
-  const [rows, setRows] = useState<IInvite[] | undefined>(undefined);
+}): IInviteRowQuery | undefined {
+  const [query, setQuery] = useState<IInviteRowQuery | undefined>(undefined);
   const statuses = filter.statuses ?? ["pending"];
   const statusKey = statuses.join(",");
 
@@ -39,11 +39,12 @@ export function useInviteRows(filter: {
       ...(filter.groupId ? { groupId: filter.groupId } : {}),
     });
     const wanted = new Set(statusKey.split(","));
-    setRows(
-      all
+    setQuery({
+      rows: all
         .filter((row) => wanted.has(row.status))
         .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()),
-    );
+      hasHistory: all.some((row) => row.status !== "pending"),
+    });
   }, [filter.type, filter.groupId, statusKey]);
 
   useEffect(() => {
@@ -65,7 +66,7 @@ export function useInviteRows(filter: {
     };
   }, [refresh]);
 
-  return rows;
+  return query;
 }
 
 function counterpartLabel(row: IInvite): string {
@@ -77,8 +78,20 @@ export function describeInviteRow(row: IInvite): { title: string; detail: string
   const who = counterpartLabel(row);
   const role = row.role !== undefined ? getRoleLabel(row.role) : undefined;
   const group = row.groupName ?? "a group";
+  if (row.type === "device") {
+    return {
+      title: row.direction === "in" ? `Device request from ${who}` : `Device invite for ${who}`,
+      detail: "Device admission actions are not available yet.",
+    };
+  }
   if (row.type === "contact") {
     if (row.direction === "in") {
+      if (row.recipientUserId) {
+        return {
+          title: `Connection request to ${who}`,
+          detail: "Waiting for them to confirm.",
+        };
+      }
       return { title: `${who} wants to connect`, detail: "Accept to add them as a contact." };
     }
     if (row.counterpart) {
@@ -90,13 +103,25 @@ export function describeInviteRow(row: IInvite): { title: string; detail: string
     };
   }
   if (row.direction === "in") {
+    if (row.recipientUserId) {
+      if (row.mode === "open") {
+        return {
+          title: `Joining ${group}`,
+          detail: "Completing automatically; no approval is required.",
+        };
+      }
+      return { title: `Request to join ${group}`, detail: `Waiting for ${who} to approve.` };
+    }
     if (row.mode === "direct") {
       return {
         title: `${who} invited you to ${group}`,
         detail: role ? `You would join as ${role}.` : "",
       };
     }
-    return { title: `Joining ${group}`, detail: `Waiting for ${who} to approve.` };
+    return {
+      title: `${who} wants to join ${group}`,
+      detail: role ? `Requested as ${role}. Approve or deny.` : "Approve or deny.",
+    };
   }
   if (row.mode === "direct") {
     return { title: `Invited ${who} to ${group}`, detail: "Waiting for them to accept." };
@@ -113,26 +138,55 @@ export function describeInviteRow(row: IInvite): { title: string; detail: string
   };
 }
 
-type RowAction = "accept" | "decline" | "approve" | "deny" | "revoke";
+/** Which Activity bucket a row belongs in. */
+export type InviteBucket = "attention" | "waiting" | "history";
 
-function actionsFor(row: IInvite): RowAction[] {
+/**
+ * Group an invite by what the signed-in user can do with it.
+ *
+ * Pending rows that need a decision are `attention`. Pending rows waiting on
+ * someone else, including links the user issued, are `waiting`.
+ *
+ * @param row - Invite row from the personal Invites table.
+ */
+export function classifyInvite(row: IInvite): InviteBucket {
   if (row.status !== "pending") {
+    return "history";
+  }
+  return actionsForInvite(row).some((action) => action !== "revoke") ? "attention" : "waiting";
+}
+
+/** Action that the local user can take on an Activity row. */
+export type InviteRowAction = "accept" | "decline" | "approve" | "deny" | "revoke";
+
+/**
+ * Return actions that are valid from the local user's perspective.
+ *
+ * Inbound rows with `recipientUserId` were initiated locally and are waiting
+ * for that recipient. Actionable profile requests and join requests omit it.
+ */
+export function actionsForInvite(row: IInvite): InviteRowAction[] {
+  if (row.status !== "pending" || row.type === "device") {
+    return [];
+  }
+  if (row.direction === "out") {
+    return ["revoke"];
+  }
+  if (row.recipientUserId) {
     return [];
   }
   if (row.direction === "in") {
-    // Inbound rows I can act on: contact requests and direct group invites.
     if (row.type === "contact" || row.mode === "direct") {
       return ["accept", "decline"];
     }
-    return []; // my own outstanding join request; nothing to do but wait
-  }
-  if (row.counterpart && row.type === "group" && row.mode !== "direct") {
-    return ["approve", "deny"];
+    if (row.type === "group" && row.mode === "approve" && row.counterpart) {
+      return ["approve", "deny"];
+    }
   }
-  return ["revoke"];
+  return [];
 }
 
-const ACTION_LABELS: Record<RowAction, { text: string; className: string }> = {
+const ACTION_LABELS: Record<InviteRowAction, { text: string; className: string }> = {
   accept: { text: "Accept", className: "btn-primary" },
   decline: { text: "Decline", className: "btn-outline-secondary" },
   approve: { text: "Approve", className: "btn-primary" },
@@ -140,12 +194,13 @@ const ACTION_LABELS: Record<RowAction, { text: string; className: string }> = {
   revoke: { text: "Revoke", className: "btn-outline-danger" },
 };
 
-function InviteRow({ row }: { row: IInvite }) {
-  const [busy, setBusy] = useState<RowAction | undefined>(undefined);
+/** One invite row and the actions its direction and status allow. */
+export function InviteRow({ row }: { row: IInvite }) {
+  const [busy, setBusy] = useState<InviteRowAction | undefined>(undefined);
   const [error, setError] = useState("");
   const { title, detail } = describeInviteRow(row);
 
-  const run = async (action: RowAction) => {
+  const run = async (action: InviteRowAction) => {
     setBusy(action);
     setError("");
     try {
@@ -167,17 +222,22 @@ function InviteRow({ row }: { row: IInvite }) {
     <div className="list-group-item">
       <div className="d-flex justify-content-between align-items-center gap-2 flex-wrap">
         <div className="flex-grow-1">
-          <div className="fw-semibold">{title}</div>
+          <div className="fw-semibold">
+            <span className="badge text-bg-light border me-2 text-capitalize">{row.type}</span>
+            {title}
+          </div>
           {detail ? <small className="text-muted d-block">{detail}</small> : null}
           {row.deliveryState === "queued" ? (
-            <small className="text-warning d-block">Queued until they are reachable</small>
+            <small className="text-warning d-block">
+              Waiting for a route; Peers will retry automatically
+            </small>
           ) : null}
           {row.status !== "pending" ? (
             <small className="text-muted d-block text-capitalize">{row.status}</small>
           ) : null}
         </div>
         <div className="d-flex gap-1">
-          {actionsFor(row).map((action) => (
+          {actionsForInvite(row).map((action) => (
             <button
               key={action}
               type="button"
@@ -194,31 +254,3 @@ function InviteRow({ row }: { row: IInvite }) {
     </div>
   );
 }
-
-/**
- * Live list of invite rows with the actions each one supports. Subscribes to the `Invites`
- * table directly, so it updates when replies arrive on any of the user's devices.
- */
-export function PendingInvitesList(props: PendingInvitesListProps) {
-  const rows = useInviteRows(props);
-  if (!rows) {
-    return null;
-  }
-  if (rows.length === 0 && props.hideWhenEmpty) {
-    return null;
-  }
-  return (
-    <section className="mb-3">
-      {props.title ? <h6 className="mb-2">{props.title}</h6> : null}
-      {rows.length === 0 ? (
-        <p className="text-muted small mb-0">No pending invites.</p>
-      ) : (
-        <div className="list-group">
-          {rows.map((row) => (
-            <InviteRow key={row.inviteId} row={row} />
-          ))}
-        </div>
-      )}
-    </section>
-  );
-}

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