@peers-app/peers-ui 0.25.2 → 0.25.4

package/src/screens/device-pairing/device-pairing.tsx

@@ -1,12 +1,8 @@
-import {
-  copyToClipboard,
-  type DevicePairingState,
-  parsePairingCode,
-  rpcServerCalls,
-} from "@peers-app/peers-sdk";
+import { copyToClipboard, type DevicePairingState, parsePairingCode } from "@peers-app/peers-sdk";
 import { useEffect, useRef, useState } from "react";
 import QRCode from "react-qr-code";
 import { canScanQr, QrScanner } from "../../components/qr-scanner";
+import { identityTools } from "./identity-ipc";
 import { useDevicePairingState } from "./use-device-pairing-state";
 
 function isPairingCode(text: string): boolean {
@@ -165,8 +161,8 @@ function usePairingSessionLifecycle(state: DevicePairingState) {
       mounted.current = false;
       const activeSessionId = sessionId.current;
       if (activeSessionId && !["idle", ...TERMINAL_PHASES].includes(phase.current)) {
-        void rpcServerCalls
-          .devicePairingCancel({ sessionId: activeSessionId })
+        void identityTools()
+          .then((tools) => tools.cancel({ sessionId: activeSessionId }))
           .catch(() => undefined);
       }
     };
@@ -189,10 +185,11 @@ function useCeremonyActions(
     }
     setApproving(true);
     try {
+      const tools = await identityTools();
       if (action === "approve") {
-        await rpcServerCalls.devicePairingApprove({ sessionId });
+        await tools.approve({ sessionId });
       } else {
-        await rpcServerCalls.devicePairingReject({ sessionId });
+        await tools.reject({ sessionId });
       }
     } catch {
       setLocalError("Could not update the pairing ceremony.");
@@ -205,7 +202,9 @@ function useCeremonyActions(
     const sessionId = lifecycle.sessionId.current;
     lifecycle.phase.current = "idle";
     if (sessionId) {
-      await rpcServerCalls.devicePairingCancel({ sessionId }).catch(() => undefined);
+      await identityTools()
+        .then((tools) => tools.cancel({ sessionId }))
+        .catch(() => undefined);
     }
     onLeave();
   };
@@ -234,13 +233,12 @@ export function SourceDevicePairing(props: { onClose: () => void }) {
     setLocalError("");
     setStarting(true);
     try {
-      const result = await rpcServerCalls.devicePairingStartSource({ code: rawCode.trim() });
+      const tools = await identityTools();
+      const result = await tools.startSource({ code: rawCode.trim() });
       lifecycle.sessionId.current = result.sessionId;
       lifecycle.phase.current = result.phase;
       if (!lifecycle.mounted.current && result.sessionId) {
-        await rpcServerCalls
-          .devicePairingCancel({ sessionId: result.sessionId })
-          .catch(() => undefined);
+        await tools.cancel({ sessionId: result.sessionId }).catch(() => undefined);
       }
     } catch {
       setLocalError("That code was not recognized or the new device is no longer waiting.");
@@ -373,8 +371,8 @@ function ShowingCode(props: { state: DevicePairingState; onCancel: () => void })
     <div className="text-center" style={{ maxWidth: 480, margin: "0 auto" }}>
       <h3>Sign in from another device</h3>
       <p className="text-muted">
-        On a device already signed in to Peers, open Settings → <strong>Add another device</strong>{" "}
-        and type this code or scan it.
+        On a device already signed in to Peers, open{" "}
+        <strong>Identity → Devices → Add a device</strong> and type this code or scan it.
       </p>
       {props.state.notice ? <div className="alert alert-warning">{props.state.notice}</div> : null}
       <output
@@ -418,15 +416,13 @@ export function DestinationDevicePairing(props: { onBack: () => void }) {
       return;
     }
     started.current = true;
-    void rpcServerCalls
-      .devicePairingStartDestination({ deviceType: detectDeviceType() })
-      .then(async (result) => {
+    void identityTools()
+      .then(async (tools) => {
+        const result = await tools.startDestination({ deviceType: detectDeviceType() });
         lifecycle.sessionId.current = result.sessionId;
         lifecycle.phase.current = result.phase;
         if (!lifecycle.mounted.current && result.sessionId) {
-          await rpcServerCalls
-            .devicePairingCancel({ sessionId: result.sessionId })
-            .catch(() => undefined);
+          await tools.cancel({ sessionId: result.sessionId }).catch(() => undefined);
         }
       })
       .catch(() => setLocalError("Could not reach the pairing service. Check your connection."));

package/src/screens/device-pairing/identity-ipc.ts

@@ -0,0 +1,25 @@
+import {
+  getIdentityContractDefinition,
+  hostContractConsumer,
+  type IHostContractConsumer,
+  type IIdentityConsumer,
+} from "@peers-app/peers-sdk";
+
+/**
+ * Cached local-host consumer for System Identity.
+ *
+ * Pairing and session tools resolve before sign-in, so this handle passes no data context.
+ */
+export const identityContract: IHostContractConsumer<IIdentityConsumer> = hostContractConsumer(
+  getIdentityContractDefinition(),
+);
+
+/** Return the typed local-host consumer for System Identity. */
+export async function getIdentityConsumer(): Promise<IIdentityConsumer> {
+  return identityContract.get();
+}
+
+/** Shorthand for `(await getIdentityConsumer()).tools`. */
+export async function identityTools(): Promise<IIdentityConsumer["tools"]> {
+  return (await getIdentityConsumer()).tools;
+}

package/src/screens/device-pairing/use-device-pairing-state.ts

@@ -1,38 +1,15 @@
-import {
-  DEVICE_PAIRING_STATE_EVENT,
-  type DevicePairingState,
-  devicePairingStateSchema,
-  rpcServerCalls,
-  subscribe,
-} from "@peers-app/peers-sdk";
-import { useEffect, useState } from "react";
+import type { DevicePairingState } from "@peers-app/peers-sdk";
+import { useObservable } from "../../hooks";
+import { useHostContract } from "../../hooks/use-host-contract";
+import { identityContract } from "./identity-ipc";
 
 const IDLE_PAIRING_STATE: DevicePairingState = { phase: "idle" };
 
-/** Subscribes to renderer-safe host pairing state and loads its current snapshot. */
+/** Subscribe to the host pairing ceremony. Idle until the identity consumer is ready. */
 export function useDevicePairingState(): DevicePairingState {
-  const [state, setState] = useState<DevicePairingState>(IDLE_PAIRING_STATE);
-
-  useEffect(() => {
-    let active = true;
-    const subscription = subscribe<DevicePairingState>(DEVICE_PAIRING_STATE_EVENT, (event) => {
-      if (active) {
-        setState(devicePairingStateSchema.parse(event.data));
-      }
-    });
-    void rpcServerCalls
-      .devicePairingGetState()
-      .then((value) => {
-        if (active) {
-          setState(devicePairingStateSchema.parse(value));
-        }
-      })
-      .catch(() => undefined);
-    return () => {
-      active = false;
-      subscription.unsubscribe();
-    };
-  }, []);
-
-  return state;
+  const { consumer } = useHostContract(identityContract);
+  const [state] = useObservable<DevicePairingState>(
+    consumer?.observables.state ?? IDLE_PAIRING_STATE,
+  );
+  return state ?? IDLE_PAIRING_STATE;
 }

package/src/screens/devices/devices-list.test.tsx

@@ -0,0 +1,68 @@
+import { type IDevice, TrustLevel } from "@peers-app/peers-sdk";
+import { render, screen } from "@testing-library/react";
+import { DeviceRow, devicesForUser } from "./devices-list";
+
+jest.mock("../../globals", () => ({
+  mainContentPath: jest.fn(),
+}));
+
+jest.mock("../../hooks", () => ({
+  useObservable: jest.fn(),
+  useObservableState: jest.fn(),
+  usePromise: jest.fn(),
+}));
+
+jest.mock("../device-pairing", () => ({
+  SourceDevicePairing: () => null,
+}));
+
+jest.mock("../invites/activity-view", () => ({
+  PendingWorkLink: () => null,
+}));
+
+jest.mock("../network-viewer/network-viewer-ipc", () => ({
+  getNetworkControlConsumer: jest.fn(),
+  getNetworkDiagnosticsConsumer: jest.fn(),
+}));
+
+function device(deviceId: string, userId: string, name: string): IDevice {
+  return {
+    deviceId,
+    userId,
+    name,
+    firstSeen: new Date("2026-01-01T00:00:00Z"),
+    lastSeen: new Date(),
+    trustLevel: TrustLevel.Trusted,
+  };
+}
+
+describe("Devices identity list", () => {
+  it("filters out devices owned by other users", () => {
+    const mine = device("abcdefghijklmnopqrstuvwxy", "mine000000000000000000001", "Laptop");
+    const theirs = device("zyxwvutsrqponmlkjihgfedcb", "theirs000000000000000001", "Other");
+
+    expect(devicesForUser([mine, theirs], mine.userId)).toEqual([mine]);
+  });
+
+  it("shows the current-device and connection context without a destructive row action", () => {
+    const mine = device("abcdefghijklmnopqrstuvwxy", "mine000000000000000000001", "Laptop");
+    render(
+      <DeviceRow
+        device={mine}
+        isThisDevice
+        connection={
+          {
+            deviceId: mine.deviceId,
+            connectionState: "connected",
+            pathType: "direct",
+          } as never
+        }
+      />,
+    );
+
+    expect(screen.getByText("Laptop")).toBeInTheDocument();
+    expect(screen.getByText("This device")).toBeInTheDocument();
+    expect(screen.getByText("Online")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /Forget/i })).not.toBeInTheDocument();
+  });
+});

package/src/screens/devices/devices-list.tsx

@@ -0,0 +1,361 @@
+import {
+  Devices,
+  DISPLAY_NAME_MAX_LENGTH,
+  getUserContext,
+  type IDevice,
+  type INetworkConnectionInfo,
+  TrustLevel,
+  thisDeviceId,
+} from "@peers-app/peers-sdk";
+import { useEffect, useState } from "react";
+import { Input } from "../../components/input";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { mainContentPath } from "../../globals";
+import { useObservable, useObservableState, usePromise } from "../../hooks";
+import { SourceDevicePairing } from "../device-pairing";
+import { IDENTITY_DEVICES_PATH, IDENTITY_PAIR_PATH } from "../identity/identity-routes";
+import { PendingWorkLink } from "../invites/activity-view";
+import {
+  getNetworkControlConsumer,
+  getNetworkDiagnosticsConsumer,
+} from "../network-viewer/network-viewer-ipc";
+
+function trustLabel(level: TrustLevel): string {
+  return TrustLevel[level] ?? String(level);
+}
+
+function connectionLabel(connection: INetworkConnectionInfo | undefined): string {
+  if (!connection) {
+    return "Offline";
+  }
+  const path =
+    connection.pathType === "direct"
+      ? "direct"
+      : connection.pathType === "indirect"
+        ? "indirect"
+        : "unknown path";
+  return `${connection.connectionState} · ${path}`;
+}
+
+/** Compact, fully clickable row for one of the signed-in user's devices. */
+export function DeviceRow(props: {
+  device: IDevice;
+  connection?: INetworkConnectionInfo;
+  isThisDevice: boolean;
+}) {
+  const connected = props.connection !== undefined;
+  return (
+    <a
+      href={`#${IDENTITY_DEVICES_PATH}/${props.device.deviceId}`}
+      className="list-group-item list-group-item-action d-flex align-items-center gap-3 py-3"
+    >
+      <span
+        className="rounded-3 bg-body-secondary d-inline-flex align-items-center justify-content-center flex-shrink-0"
+        style={{ width: 44, height: 44 }}
+        aria-hidden="true"
+      >
+        <i className={`bi ${props.isThisDevice ? "bi-laptop-fill" : "bi-laptop"}`} />
+      </span>
+      <span className="flex-grow-1 overflow-hidden">
+        <span className="d-flex align-items-center gap-2 flex-wrap">
+          <span className="fw-semibold text-truncate">
+            {props.device.name || props.device.reportedName || "Unnamed device"}
+          </span>
+          {props.isThisDevice ? <span className="badge text-bg-primary">This device</span> : null}
+        </span>
+        <span className="small text-muted d-block">
+          {props.device.lastSeen ? `Seen ${relativeTime(props.device.lastSeen)}` : "Never seen"}
+        </span>
+      </span>
+      <span className={`badge ${connected ? "text-bg-success" : "text-bg-secondary"}`}>
+        {connected ? "Online" : "Offline"}
+      </span>
+      {connected && props.connection?.pathType ? (
+        <span className="badge text-bg-light border text-capitalize">
+          {props.connection.pathType}
+        </span>
+      ) : null}
+      <i className="bi bi-chevron-right text-muted" aria-hidden="true" />
+    </a>
+  );
+}
+
+function ThisDeviceCard(props: { device: IDevice }) {
+  const name = useObservableState(props.device.name ?? "");
+  const [nameValue] = useObservable(name);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    name(props.device.name ?? "");
+  }, [name, props.device.deviceId, props.device.name]);
+
+  const save = async () => {
+    setSaving(true);
+    try {
+      const userContext = await getUserContext();
+      const table = Devices(userContext.userDataContext);
+      const next = { ...props.device, name: nameValue.trim() || undefined };
+      await table.save(next);
+    } catch (err) {
+      alert(`Could not save this device: ${(err as Error).message}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const dirty = (nameValue ?? "") !== (props.device.name ?? "");
+
+  return (
+    <div className="card mb-3">
+      <div className="card-body">
+        <h6 className="card-title">This device</h6>
+        <label className="form-label small" htmlFor="this-device-name">
+          Name
+        </label>
+        <div className="input-group">
+          <Input
+            id="this-device-name"
+            value={name}
+            className="form-control"
+            maxLength={DISPLAY_NAME_MAX_LENGTH}
+            placeholder="e.g. My laptop"
+          />
+          <button
+            type="button"
+            className="btn btn-primary"
+            disabled={!dirty || saving}
+            onClick={() => void save()}
+          >
+            Save
+          </button>
+        </div>
+        <div className="small text-muted mt-2">
+          {trustLabel(props.device.trustLevel)} · {props.device.deviceId}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Which devices surface the Identity shell is showing. */
+export type DevicesSectionMode = "list" | "pair" | "detail";
+
+/**
+ * Devices section of Identity: the account's devices, pairing, or one device.
+ */
+export function DevicesSection(props: { mode?: DevicesSectionMode; deviceId?: string }) {
+  const mode = props.mode ?? "list";
+  const userContext = usePromise(getUserContext);
+  const [thisId] = useObservable(thisDeviceId);
+  const [devices, setDevices] = useState<IDevice[] | undefined>();
+  const [connections, setConnections] = useState<INetworkConnectionInfo[]>([]);
+
+  useEffect(() => {
+    if (!userContext) {
+      return;
+    }
+    let disposed = false;
+    const table = Devices(userContext.userDataContext);
+    const load = async () => {
+      const rows = await table.list();
+      if (!disposed) {
+        setDevices(rows);
+      }
+    };
+    void load();
+    const subscription = table.dataChanged.subscribe(() => {
+      void load();
+    });
+    return () => {
+      disposed = true;
+      subscription.unsubscribe();
+    };
+  }, [userContext]);
+
+  useEffect(() => {
+    let disposed = false;
+    const load = async () => {
+      try {
+        const diagnostics = await getNetworkDiagnosticsConsumer();
+        const result = await diagnostics.tools.getConnections();
+        if (!disposed) {
+          setConnections(result.connections);
+        }
+      } catch {
+        if (!disposed) {
+          setConnections([]);
+        }
+      }
+    };
+    void load();
+    const timer = window.setInterval(() => void load(), 5000);
+    return () => {
+      disposed = true;
+      window.clearInterval(timer);
+    };
+  }, []);
+
+  if (!userContext || !devices) {
+    return <LoadingIndicator />;
+  }
+
+  const byId = new Map(connections.map((connection) => [connection.deviceId, connection]));
+  const accountDevices = devicesForUser(devices, userContext.userId);
+  const mine = accountDevices.find((device) => device.deviceId === thisId);
+  const others = accountDevices
+    .filter((device) => device.deviceId !== thisId)
+    .sort((a, b) => (a.name ?? "").localeCompare(b.name ?? ""));
+
+  if (mode === "pair") {
+    return (
+      <div className="container-fluid p-3" style={{ maxWidth: 720 }}>
+        <a href={`#${IDENTITY_DEVICES_PATH}`} className="btn btn-link btn-sm px-0 mb-2">
+          Back to devices
+        </a>
+        <SourceDevicePairing onClose={() => mainContentPath(IDENTITY_DEVICES_PATH)} />
+      </div>
+    );
+  }
+
+  if (mode === "detail") {
+    const device = accountDevices.find((entry) => entry.deviceId === props.deviceId);
+    if (!device) {
+      return (
+        <div className="container-fluid p-3">
+          <a href={`#${IDENTITY_DEVICES_PATH}`}>Back to devices</a>
+          <p className="mt-3 text-muted">That device is not on this account.</p>
+        </div>
+      );
+    }
+    return (
+      <DeviceDetail
+        device={device}
+        connection={byId.get(device.deviceId)}
+        isThisDevice={device.deviceId === thisId}
+      />
+    );
+  }
+
+  return (
+    <div className="container-xxl p-3">
+      <div className="mb-3">
+        <h4 className="mb-1">
+          <i className="bi bi-laptop me-2" />
+          My devices
+        </h4>
+        <div className="small text-muted">
+          Installations signed in to this account. Connection diagnostics stay in{" "}
+          <a href="#network-viewer">Network Viewer</a>.
+        </div>
+      </div>
+      <PendingWorkLink type="device" />
+      <div className="list-group">
+        {mine ? (
+          <DeviceRow device={mine} connection={byId.get(mine.deviceId)} isThisDevice />
+        ) : null}
+        {others.map((device) => (
+          <DeviceRow
+            key={device.deviceId}
+            device={device}
+            connection={byId.get(device.deviceId)}
+            isThisDevice={false}
+          />
+        ))}
+      </div>
+      {!mine && others.length === 0 ? (
+        <div className="border rounded p-4 text-center">
+          <i className="bi bi-laptop fs-2 text-muted" />
+          <h6 className="mt-2">No devices are registered yet</h6>
+          <a href={`#${IDENTITY_PAIR_PATH}`} className="btn btn-primary btn-sm">
+            Add a device
+          </a>
+        </div>
+      ) : null}
+      {mine && others.length === 0 ? (
+        <p className="small text-muted mt-3">
+          This is your only device. Use <a href={`#${IDENTITY_PAIR_PATH}`}>Add device</a> to sign in
+          somewhere else.
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function DeviceDetail(props: {
+  device: IDevice;
+  connection?: INetworkConnectionInfo;
+  isThisDevice: boolean;
+}) {
+  return (
+    <div className="container-xxl p-3">
+      <a href={`#${IDENTITY_DEVICES_PATH}`} className="btn btn-link btn-sm px-0 mb-2">
+        Back to devices
+      </a>
+      <h4 className="mb-3">{props.device.name || "Unnamed device"}</h4>
+      {props.isThisDevice ? <ThisDeviceCard device={props.device} /> : null}
+      <dl className="row small mb-3">
+        <dt className="col-sm-4">Trust</dt>
+        <dd className="col-sm-8">{trustLabel(props.device.trustLevel)}</dd>
+        <dt className="col-sm-4">Connection</dt>
+        <dd className="col-sm-8">{connectionLabel(props.connection)}</dd>
+        <dt className="col-sm-4">Last seen</dt>
+        <dd className="col-sm-8">
+          {props.device.lastSeen ? new Date(props.device.lastSeen).toLocaleString() : "Unknown"}
+        </dd>
+        <dt className="col-sm-4">Device ID</dt>
+        <dd className="col-sm-8 text-break">{props.device.deviceId}</dd>
+      </dl>
+      <a href="#network-viewer" className="btn btn-outline-secondary btn-sm me-2">
+        Open Network Viewer
+      </a>
+      {props.isThisDevice ? null : (
+        <button
+          type="button"
+          className="btn btn-outline-danger btn-sm"
+          onClick={() => void forgetDevice(props.device)}
+        >
+          Forget
+        </button>
+      )}
+    </div>
+  );
+}
+
+async function forgetDevice(device: IDevice) {
+  const confirmed = confirm(`Forget ${device.name || device.deviceId}?`);
+  if (!confirmed) {
+    return;
+  }
+  const control = await getNetworkControlConsumer();
+  const result = await control.tools.deleteDevice({ deviceId: device.deviceId });
+  if (!result.success) {
+    alert(result.message);
+    return;
+  }
+  mainContentPath(IDENTITY_DEVICES_PATH);
+}
+
+/** Keep only devices whose signed-in owner is the requested user. */
+export function devicesForUser(devices: IDevice[], userId: string): IDevice[] {
+  return devices.filter((device) => device.userId === userId);
+}
+
+function relativeTime(value: Date): string {
+  const elapsedMs = Math.max(0, Date.now() - new Date(value).getTime());
+  const minutes = Math.floor(elapsedMs / 60_000);
+  if (minutes < 1) {
+    return "just now";
+  }
+  if (minutes < 60) {
+    return `${minutes}m ago`;
+  }
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {
+    return `${hours}h ago`;
+  }
+  const days = Math.floor(hours / 24);
+  if (days < 30) {
+    return `${days}d ago`;
+  }
+  return new Date(value).toLocaleDateString();
+}

package/src/screens/devices/index.ts

@@ -0,0 +1 @@
+export { DevicesSection } from "./devices-list";