@peers-app/peers-ui 0.25.1 → 0.25.3

package/dist/screens/contacts/index.js

@@ -14,8 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-// Import all contact screen components to ensure they register their routes
-require("./contact-list");
-require("./contact-details");
 __exportStar(require("./contact-details"), exports);
 __exportStar(require("./contact-list"), exports);

package/dist/screens/device-pairing/device-pairing.js

@@ -10,6 +10,7 @@ const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = require("react");
 const react_qr_code_1 = __importDefault(require("react-qr-code"));
 const qr_scanner_1 = require("../../components/qr-scanner");
+const identity_ipc_1 = require("./identity-ipc");
 const use_device_pairing_state_1 = require("./use-device-pairing-state");
 function isPairingCode(text) {
     try {
@@ -78,8 +79,8 @@ function usePairingSessionLifecycle(state) {
             mounted.current = false;
             const activeSessionId = sessionId.current;
             if (activeSessionId && !["idle", ...TERMINAL_PHASES].includes(phase.current)) {
-                void peers_sdk_1.rpcServerCalls
-                    .devicePairingCancel({ sessionId: activeSessionId })
+                void (0, identity_ipc_1.identityTools)()
+                    .then((tools) => tools.cancel({ sessionId: activeSessionId }))
                     .catch(() => undefined);
             }
         };
@@ -95,11 +96,12 @@ function useCeremonyActions(lifecycle, onLeave, setLocalError) {
         }
         setApproving(true);
         try {
+            const tools = await (0, identity_ipc_1.identityTools)();
             if (action === "approve") {
-                await peers_sdk_1.rpcServerCalls.devicePairingApprove({ sessionId });
+                await tools.approve({ sessionId });
             }
             else {
-                await peers_sdk_1.rpcServerCalls.devicePairingReject({ sessionId });
+                await tools.reject({ sessionId });
             }
         }
         catch {
@@ -113,7 +115,9 @@ function useCeremonyActions(lifecycle, onLeave, setLocalError) {
         const sessionId = lifecycle.sessionId.current;
         lifecycle.phase.current = "idle";
         if (sessionId) {
-            await peers_sdk_1.rpcServerCalls.devicePairingCancel({ sessionId }).catch(() => undefined);
+            await (0, identity_ipc_1.identityTools)()
+                .then((tools) => tools.cancel({ sessionId }))
+                .catch(() => undefined);
         }
         onLeave();
     };
@@ -138,13 +142,12 @@ function SourceDevicePairing(props) {
         setLocalError("");
         setStarting(true);
         try {
-            const result = await peers_sdk_1.rpcServerCalls.devicePairingStartSource({ code: rawCode.trim() });
+            const tools = await (0, identity_ipc_1.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 peers_sdk_1.rpcServerCalls
-                    .devicePairingCancel({ sessionId: result.sessionId })
-                    .catch(() => undefined);
+                await tools.cancel({ sessionId: result.sessionId }).catch(() => undefined);
             }
         }
         catch {
@@ -189,7 +192,7 @@ const DESTINATION_PROGRESS_MESSAGES = {
 };
 function ShowingCode(props) {
     const code = props.state.code ?? "";
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 480, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("h3", { children: "Sign in from another device" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-muted", children: ["On a device already signed in to Peers, open Settings \u2192 ", (0, jsx_runtime_1.jsx)("strong", { children: "Add another device" }), " ", "and type this code or scan it."] }), props.state.notice ? (0, jsx_runtime_1.jsx)("div", { className: "alert alert-warning", children: props.state.notice }) : null, (0, jsx_runtime_1.jsx)("output", { className: "d-block fs-3 font-monospace text-primary mb-3", style: { letterSpacing: "0.04em", wordBreak: "break-word" }, "aria-label": "Pairing code", children: code }), (0, jsx_runtime_1.jsx)("div", { className: "d-inline-block bg-white rounded p-3 mb-3", children: (0, jsx_runtime_1.jsx)(react_qr_code_1.default, { value: code, size: 200, "aria-label": "Pairing code QR" }) }), (0, jsx_runtime_1.jsxs)("p", { className: "small text-muted", children: ["Expires in ", formatCountdown(props.state.expiresAt)] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary", onClick: () => void (0, peers_sdk_1.copyToClipboard)(code), children: "Copy code" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onCancel, children: "Cancel" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 480, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("h3", { children: "Sign in from another device" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-muted", children: ["On a device already signed in to Peers, open", " ", (0, jsx_runtime_1.jsx)("strong", { children: "Identity \u2192 Devices \u2192 Add a device" }), " and type this code or scan it."] }), props.state.notice ? (0, jsx_runtime_1.jsx)("div", { className: "alert alert-warning", children: props.state.notice }) : null, (0, jsx_runtime_1.jsx)("output", { className: "d-block fs-3 font-monospace text-primary mb-3", style: { letterSpacing: "0.04em", wordBreak: "break-word" }, "aria-label": "Pairing code", children: code }), (0, jsx_runtime_1.jsx)("div", { className: "d-inline-block bg-white rounded p-3 mb-3", children: (0, jsx_runtime_1.jsx)(react_qr_code_1.default, { value: code, size: 200, "aria-label": "Pairing code QR" }) }), (0, jsx_runtime_1.jsxs)("p", { className: "small text-muted", children: ["Expires in ", formatCountdown(props.state.expiresAt)] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary", onClick: () => void (0, peers_sdk_1.copyToClipboard)(code), children: "Copy code" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onCancel, children: "Cancel" })] })] }));
 }
 /** Signed-out destination flow: shows a code and QR, then installs credentials after approval. */
 function DestinationDevicePairing(props) {
@@ -204,15 +207,13 @@ function DestinationDevicePairing(props) {
             return;
         }
         started.current = true;
-        void peers_sdk_1.rpcServerCalls
-            .devicePairingStartDestination({ deviceType: detectDeviceType() })
-            .then(async (result) => {
+        void (0, identity_ipc_1.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 peers_sdk_1.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/dist/screens/device-pairing/device-pairing.test.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = require("@testing-library/react");
 const device_pairing_1 = require("./device-pairing");
 const mockRpc = {
@@ -12,13 +11,9 @@ const mockRpc = {
     cancel: jest.fn(),
 };
 let mockPairingState = { phase: "idle" };
-peers_sdk_1.rpcServerCalls.devicePairingStartSource =
-    mockRpc.startSource;
-peers_sdk_1.rpcServerCalls.devicePairingStartDestination =
-    mockRpc.startDestination;
-peers_sdk_1.rpcServerCalls.devicePairingApprove = mockRpc.approve;
-peers_sdk_1.rpcServerCalls.devicePairingReject = mockRpc.reject;
-peers_sdk_1.rpcServerCalls.devicePairingCancel = mockRpc.cancel;
+jest.mock("./identity-ipc", () => ({
+    identityTools: async () => mockRpc,
+}));
 jest.mock("./use-device-pairing-state", () => ({
     useDevicePairingState: () => mockPairingState,
 }));
@@ -34,7 +29,7 @@ describe("device pairing UI lifecycle", () => {
             resolveStart = resolve;
         }));
         const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(device_pairing_1.DestinationDevicePairing, { onBack: jest.fn() }));
-        expect(mockRpc.startDestination).toHaveBeenCalledWith({ deviceType: "browser" });
+        await (0, react_1.waitFor)(() => expect(mockRpc.startDestination).toHaveBeenCalledWith({ deviceType: "browser" }));
         view.unmount();
         resolveStart({
             sessionId: "00mh0wlipkdbeaw8tests0001",

package/dist/screens/device-pairing/identity-ipc.d.ts

@@ -0,0 +1,11 @@
+import { 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 declare const identityContract: IHostContractConsumer<IIdentityConsumer>;
+/** Return the typed local-host consumer for System Identity. */
+export declare function getIdentityConsumer(): Promise<IIdentityConsumer>;
+/** Shorthand for `(await getIdentityConsumer()).tools`. */
+export declare function identityTools(): Promise<IIdentityConsumer["tools"]>;

package/dist/screens/device-pairing/identity-ipc.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.identityContract = void 0;
+exports.getIdentityConsumer = getIdentityConsumer;
+exports.identityTools = identityTools;
+const peers_sdk_1 = require("@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.
+ */
+exports.identityContract = (0, peers_sdk_1.hostContractConsumer)((0, peers_sdk_1.getIdentityContractDefinition)());
+/** Return the typed local-host consumer for System Identity. */
+async function getIdentityConsumer() {
+    return exports.identityContract.get();
+}
+/** Shorthand for `(await getIdentityConsumer()).tools`. */
+async function identityTools() {
+    return (await getIdentityConsumer()).tools;
+}

package/dist/screens/device-pairing/use-device-pairing-state.d.ts

@@ -1,3 +1,3 @@
-import { type DevicePairingState } from "@peers-app/peers-sdk";
-/** Subscribes to renderer-safe host pairing state and loads its current snapshot. */
+import type { DevicePairingState } from "@peers-app/peers-sdk";
+/** Subscribe to the host pairing ceremony. Idle until the identity consumer is ready. */
 export declare function useDevicePairingState(): DevicePairingState;

package/dist/screens/device-pairing/use-device-pairing-state.js

@@ -1,31 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDevicePairingState = useDevicePairingState;
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const use_host_contract_1 = require("../../hooks/use-host-contract");
+const identity_ipc_1 = require("./identity-ipc");
 const IDLE_PAIRING_STATE = { 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. */
 function useDevicePairingState() {
-    const [state, setState] = (0, react_1.useState)(IDLE_PAIRING_STATE);
-    (0, react_1.useEffect)(() => {
-        let active = true;
-        const subscription = (0, peers_sdk_1.subscribe)(peers_sdk_1.DEVICE_PAIRING_STATE_EVENT, (event) => {
-            if (active) {
-                setState(peers_sdk_1.devicePairingStateSchema.parse(event.data));
-            }
-        });
-        void peers_sdk_1.rpcServerCalls
-            .devicePairingGetState()
-            .then((value) => {
-            if (active) {
-                setState(peers_sdk_1.devicePairingStateSchema.parse(value));
-            }
-        })
-            .catch(() => undefined);
-        return () => {
-            active = false;
-            subscription.unsubscribe();
-        };
-    }, []);
-    return state;
+    const { consumer } = (0, use_host_contract_1.useHostContract)(identity_ipc_1.identityContract);
+    const [state] = (0, hooks_1.useObservable)(consumer?.observables.state ?? IDLE_PAIRING_STATE);
+    return state ?? IDLE_PAIRING_STATE;
 }

package/dist/screens/devices/devices-list.d.ts

@@ -0,0 +1,18 @@
+import { type IDevice, type INetworkConnectionInfo } from "@peers-app/peers-sdk";
+/** Compact, fully clickable row for one of the signed-in user's devices. */
+export declare function DeviceRow(props: {
+    device: IDevice;
+    connection?: INetworkConnectionInfo;
+    isThisDevice: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/** 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 declare function DevicesSection(props: {
+    mode?: DevicesSectionMode;
+    deviceId?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** Keep only devices whose signed-in owner is the requested user. */
+export declare function devicesForUser(devices: IDevice[], userId: string): IDevice[];

package/dist/screens/devices/devices-list.js

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeviceRow = DeviceRow;
+exports.DevicesSection = DevicesSection;
+exports.devicesForUser = devicesForUser;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
+const input_1 = require("../../components/input");
+const loading_indicator_1 = require("../../components/loading-indicator");
+const globals_1 = require("../../globals");
+const hooks_1 = require("../../hooks");
+const device_pairing_1 = require("../device-pairing");
+const identity_routes_1 = require("../identity/identity-routes");
+const activity_view_1 = require("../invites/activity-view");
+const network_viewer_ipc_1 = require("../network-viewer/network-viewer-ipc");
+function trustLabel(level) {
+    return peers_sdk_1.TrustLevel[level] ?? String(level);
+}
+function connectionLabel(connection) {
+    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. */
+function DeviceRow(props) {
+    const connected = props.connection !== undefined;
+    return ((0, jsx_runtime_1.jsxs)("a", { href: `#${identity_routes_1.IDENTITY_DEVICES_PATH}/${props.device.deviceId}`, className: "list-group-item list-group-item-action d-flex align-items-center gap-3 py-3", children: [(0, jsx_runtime_1.jsx)("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", children: (0, jsx_runtime_1.jsx)("i", { className: `bi ${props.isThisDevice ? "bi-laptop-fill" : "bi-laptop"}` }) }), (0, jsx_runtime_1.jsxs)("span", { className: "flex-grow-1 overflow-hidden", children: [(0, jsx_runtime_1.jsxs)("span", { className: "d-flex align-items-center gap-2 flex-wrap", children: [(0, jsx_runtime_1.jsx)("span", { className: "fw-semibold text-truncate", children: props.device.name || props.device.reportedName || "Unnamed device" }), props.isThisDevice ? (0, jsx_runtime_1.jsx)("span", { className: "badge text-bg-primary", children: "This device" }) : null] }), (0, jsx_runtime_1.jsx)("span", { className: "small text-muted d-block", children: props.device.lastSeen ? `Seen ${relativeTime(props.device.lastSeen)}` : "Never seen" })] }), (0, jsx_runtime_1.jsx)("span", { className: `badge ${connected ? "text-bg-success" : "text-bg-secondary"}`, children: connected ? "Online" : "Offline" }), connected && props.connection?.pathType ? ((0, jsx_runtime_1.jsx)("span", { className: "badge text-bg-light border text-capitalize", children: props.connection.pathType })) : null, (0, jsx_runtime_1.jsx)("i", { className: "bi bi-chevron-right text-muted", "aria-hidden": "true" })] }));
+}
+function ThisDeviceCard(props) {
+    const name = (0, hooks_1.useObservableState)(props.device.name ?? "");
+    const [nameValue] = (0, hooks_1.useObservable)(name);
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        name(props.device.name ?? "");
+    }, [name, props.device.deviceId, props.device.name]);
+    const save = async () => {
+        setSaving(true);
+        try {
+            const userContext = await (0, peers_sdk_1.getUserContext)();
+            const table = (0, peers_sdk_1.Devices)(userContext.userDataContext);
+            const next = { ...props.device, name: nameValue.trim() || undefined };
+            await table.save(next);
+        }
+        catch (err) {
+            alert(`Could not save this device: ${err.message}`);
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const dirty = (nameValue ?? "") !== (props.device.name ?? "");
+    return ((0, jsx_runtime_1.jsx)("div", { className: "card mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h6", { className: "card-title", children: "This device" }), (0, jsx_runtime_1.jsx)("label", { className: "form-label small", htmlFor: "this-device-name", children: "Name" }), (0, jsx_runtime_1.jsxs)("div", { className: "input-group", children: [(0, jsx_runtime_1.jsx)(input_1.Input, { id: "this-device-name", value: name, className: "form-control", maxLength: peers_sdk_1.DISPLAY_NAME_MAX_LENGTH, placeholder: "e.g. My laptop" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary", disabled: !dirty || saving, onClick: () => void save(), children: "Save" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "small text-muted mt-2", children: [trustLabel(props.device.trustLevel), " \u00B7 ", props.device.deviceId] })] }) }));
+}
+/**
+ * Devices section of Identity: the account's devices, pairing, or one device.
+ */
+function DevicesSection(props) {
+    const mode = props.mode ?? "list";
+    const userContext = (0, hooks_1.usePromise)(peers_sdk_1.getUserContext);
+    const [thisId] = (0, hooks_1.useObservable)(peers_sdk_1.thisDeviceId);
+    const [devices, setDevices] = (0, react_1.useState)();
+    const [connections, setConnections] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        if (!userContext) {
+            return;
+        }
+        let disposed = false;
+        const table = (0, peers_sdk_1.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]);
+    (0, react_1.useEffect)(() => {
+        let disposed = false;
+        const load = async () => {
+            try {
+                const diagnostics = await (0, network_viewer_ipc_1.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 (0, jsx_runtime_1.jsx)(loading_indicator_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", style: { maxWidth: 720 }, children: [(0, jsx_runtime_1.jsx)("a", { href: `#${identity_routes_1.IDENTITY_DEVICES_PATH}`, className: "btn btn-link btn-sm px-0 mb-2", children: "Back to devices" }), (0, jsx_runtime_1.jsx)(device_pairing_1.SourceDevicePairing, { onClose: () => (0, globals_1.mainContentPath)(identity_routes_1.IDENTITY_DEVICES_PATH) })] }));
+    }
+    if (mode === "detail") {
+        const device = accountDevices.find((entry) => entry.deviceId === props.deviceId);
+        if (!device) {
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", children: [(0, jsx_runtime_1.jsx)("a", { href: `#${identity_routes_1.IDENTITY_DEVICES_PATH}`, children: "Back to devices" }), (0, jsx_runtime_1.jsx)("p", { className: "mt-3 text-muted", children: "That device is not on this account." })] }));
+        }
+        return ((0, jsx_runtime_1.jsx)(DeviceDetail, { device: device, connection: byId.get(device.deviceId), isThisDevice: device.deviceId === thisId }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-xxl p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("h4", { className: "mb-1", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-laptop me-2" }), "My devices"] }), (0, jsx_runtime_1.jsxs)("div", { className: "small text-muted", children: ["Installations signed in to this account. Connection diagnostics stay in", " ", (0, jsx_runtime_1.jsx)("a", { href: "#network-viewer", children: "Network Viewer" }), "."] })] }), (0, jsx_runtime_1.jsx)(activity_view_1.PendingWorkLink, { type: "device" }), (0, jsx_runtime_1.jsxs)("div", { className: "list-group", children: [mine ? ((0, jsx_runtime_1.jsx)(DeviceRow, { device: mine, connection: byId.get(mine.deviceId), isThisDevice: true })) : null, others.map((device) => ((0, jsx_runtime_1.jsx)(DeviceRow, { device: device, connection: byId.get(device.deviceId), isThisDevice: false }, device.deviceId)))] }), !mine && others.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "border rounded p-4 text-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-laptop fs-2 text-muted" }), (0, jsx_runtime_1.jsx)("h6", { className: "mt-2", children: "No devices are registered yet" }), (0, jsx_runtime_1.jsx)("a", { href: `#${identity_routes_1.IDENTITY_PAIR_PATH}`, className: "btn btn-primary btn-sm", children: "Add a device" })] })) : null, mine && others.length === 0 ? ((0, jsx_runtime_1.jsxs)("p", { className: "small text-muted mt-3", children: ["This is your only device. Use ", (0, jsx_runtime_1.jsx)("a", { href: `#${identity_routes_1.IDENTITY_PAIR_PATH}`, children: "Add device" }), " to sign in somewhere else."] })) : null] }));
+}
+function DeviceDetail(props) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-xxl p-3", children: [(0, jsx_runtime_1.jsx)("a", { href: `#${identity_routes_1.IDENTITY_DEVICES_PATH}`, className: "btn btn-link btn-sm px-0 mb-2", children: "Back to devices" }), (0, jsx_runtime_1.jsx)("h4", { className: "mb-3", children: props.device.name || "Unnamed device" }), props.isThisDevice ? (0, jsx_runtime_1.jsx)(ThisDeviceCard, { device: props.device }) : null, (0, jsx_runtime_1.jsxs)("dl", { className: "row small mb-3", children: [(0, jsx_runtime_1.jsx)("dt", { className: "col-sm-4", children: "Trust" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-sm-8", children: trustLabel(props.device.trustLevel) }), (0, jsx_runtime_1.jsx)("dt", { className: "col-sm-4", children: "Connection" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-sm-8", children: connectionLabel(props.connection) }), (0, jsx_runtime_1.jsx)("dt", { className: "col-sm-4", children: "Last seen" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-sm-8", children: props.device.lastSeen ? new Date(props.device.lastSeen).toLocaleString() : "Unknown" }), (0, jsx_runtime_1.jsx)("dt", { className: "col-sm-4", children: "Device ID" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-sm-8 text-break", children: props.device.deviceId })] }), (0, jsx_runtime_1.jsx)("a", { href: "#network-viewer", className: "btn btn-outline-secondary btn-sm me-2", children: "Open Network Viewer" }), props.isThisDevice ? null : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-danger btn-sm", onClick: () => void forgetDevice(props.device), children: "Forget" }))] }));
+}
+async function forgetDevice(device) {
+    const confirmed = confirm(`Forget ${device.name || device.deviceId}?`);
+    if (!confirmed) {
+        return;
+    }
+    const control = await (0, network_viewer_ipc_1.getNetworkControlConsumer)();
+    const result = await control.tools.deleteDevice({ deviceId: device.deviceId });
+    if (!result.success) {
+        alert(result.message);
+        return;
+    }
+    (0, globals_1.mainContentPath)(identity_routes_1.IDENTITY_DEVICES_PATH);
+}
+/** Keep only devices whose signed-in owner is the requested user. */
+function devicesForUser(devices, userId) {
+    return devices.filter((device) => device.userId === userId);
+}
+function relativeTime(value) {
+    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/dist/screens/devices/devices-list.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/screens/devices/devices-list.test.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("@testing-library/react");
+const devices_list_1 = require("./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, userId, name) {
+    return {
+        deviceId,
+        userId,
+        name,
+        firstSeen: new Date("2026-01-01T00:00:00Z"),
+        lastSeen: new Date(),
+        trustLevel: peers_sdk_1.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((0, devices_list_1.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");
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(devices_list_1.DeviceRow, { device: mine, isThisDevice: true, connection: {
+                deviceId: mine.deviceId,
+                connectionState: "connected",
+                pathType: "direct",
+            } }));
+        expect(react_1.screen.getByText("Laptop")).toBeInTheDocument();
+        expect(react_1.screen.getByText("This device")).toBeInTheDocument();
+        expect(react_1.screen.getByText("Online")).toBeInTheDocument();
+        expect(react_1.screen.queryByRole("button", { name: /Forget/i })).not.toBeInTheDocument();
+    });
+});

package/dist/screens/devices/index.d.ts

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

package/dist/screens/devices/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DevicesSection = void 0;
+var devices_list_1 = require("./devices-list");
+Object.defineProperty(exports, "DevicesSection", { enumerable: true, get: function () { return devices_list_1.DevicesSection; } });

package/dist/screens/groups/group-details.d.ts

@@ -1,5 +1,6 @@
 interface IProps {
     groupId: string;
 }
+/** Edit group metadata and manage members and invitations inside Identity. */
 export declare const GroupDetails: (props: IProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/screens/groups/group-details.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GroupDetails = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = require("react");
 const checkbox_1 = require("../../components/checkbox");
 const input_1 = require("../../components/input");
 const loading_indicator_1 = require("../../components/loading-indicator");
@@ -11,9 +10,8 @@ const editor_inline_1 = require("../../components/markdown-editor/editor-inline"
 const save_button_1 = require("../../components/save-button");
 const tabs_1 = require("../../components/tabs");
 const hooks_1 = require("../../hooks");
-const tabs_state_1 = require("../../tabs-layout/tabs-state");
-const ui_loader_1 = require("../../ui-router/ui-loader");
 const group_members_1 = require("./group-members");
+/** Edit group metadata and manage members and invitations inside Identity. */
 const GroupDetails = (props) => {
     const group = (0, hooks_1.usePromise)(async () => {
         const userContext = await (0, peers_sdk_1.getUserContext)();
@@ -22,7 +20,6 @@ const GroupDetails = (props) => {
         if (!group) {
             throw new Error("Group not found");
         }
-        (0, tabs_state_1.updateActiveTabTitle)(group.name || "Group");
         const groupDoc = userGroupTable.initDoc(group);
         // saves go to both the group and user db
         groupDoc.save = async () => {
@@ -47,14 +44,14 @@ const GroupDetails = (props) => {
     if (!group) {
         return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h4", { children: (0, jsx_runtime_1.jsx)("i", { className: `${(0, peers_sdk_1.getIconClassName)((0, peers_sdk_1.Groups)())} me-2` }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-grow-1", children: (0, jsx_runtime_1.jsx)("h4", { children: (0, jsx_runtime_1.jsx)(input_1.Input, { className: "border border-0", style: { width: "100%", outline: "none", backgroundColor: "transparent" }, value: group.qs.name }, group.groupId) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2", children: [(0, jsx_runtime_1.jsx)(ShareButton, { groupId: props.groupId }), (0, jsx_runtime_1.jsx)(save_button_1.SaveButton, { doc: group }, group.groupId)] })] }), (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: [
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-xxl p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h4", { children: (0, jsx_runtime_1.jsx)("i", { className: `${(0, peers_sdk_1.getIconClassName)((0, peers_sdk_1.Groups)())} me-2` }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-grow-1", children: (0, jsx_runtime_1.jsx)("h4", { children: (0, jsx_runtime_1.jsx)(input_1.Input, { className: "border border-0", style: { width: "100%", outline: "none", backgroundColor: "transparent" }, value: group.qs.name }, group.groupId) }) }), (0, jsx_runtime_1.jsx)(save_button_1.SaveButton, { doc: group }, group.groupId)] }), (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: [
                     {
                         name: "Info",
-                        content: ((0, jsx_runtime_1.jsx)(tabs_1.ScreenTabBody, { children: (0, jsx_runtime_1.jsx)(GroupInfo, { group: group }) })),
+                        content: ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(GroupInfo, { group: group }) })),
                     },
                     {
                         name: "Members",
-                        content: ((0, jsx_runtime_1.jsx)(tabs_1.ScreenTabBody, { children: (0, jsx_runtime_1.jsx)(GroupMembersWrapper, { groupId: props.groupId }) })),
+                        content: ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(GroupMembersWrapper, { groupId: props.groupId }) })),
                     },
                 ] }, group.groupId)] }));
 };
@@ -64,65 +61,9 @@ const GroupInfo = (props) => {
     group.description = group.description || "";
     return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("small", { children: "Name:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: group.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Group name", title: "Group name" }), (0, jsx_runtime_1.jsx)("small", { children: "Icon Class Name:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: group.qs.iconClassName, className: "form-control mb-3 p-0 ps-2", placeholder: "bi-people-fill", title: "Icon class name (e.g., bi-people-fill, bi-house-fill, bi-star-fill)" }), (0, jsx_runtime_1.jsx)("small", { children: "Group ID:" }), (0, jsx_runtime_1.jsx)("div", { className: "form-control mb-3 p-2 bg-body-secondary text-body-secondary", style: { fontFamily: "monospace", fontSize: "0.9em" }, children: group.groupId }), (0, jsx_runtime_1.jsx)("div", { className: "d-flex flex-row", children: (0, jsx_runtime_1.jsxs)("div", { className: "ms-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label small mt-2 me-2", children: "Disabled:" }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "form-check-input mt-2", checked: group.qs.disabled })] }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("small", { className: "mt-2", children: "Description:" }), (0, jsx_runtime_1.jsx)(editor_inline_1.MarkdownEditorInline, { value: group.qs.description })] }));
 };
-const ShareButton = ({ groupId }) => {
-    const [isSharing, setIsSharing] = (0, react_1.useState)(false);
-    const [shareResult, setShareResult] = (0, react_1.useState)(null);
-    const handleShare = async () => {
-        setIsSharing(true);
-        setShareResult(null);
-        try {
-            // Generate the group share data
-            const groupShare = await (0, peers_sdk_1.generateGroupShare)(groupId);
-            // Convert to JSON
-            const groupShareJson = JSON.stringify(groupShare, null, 2);
-            // Copy to clipboard
-            const copied = await (0, peers_sdk_1.copyToClipboard)(groupShareJson);
-            if (copied) {
-                setShareResult({
-                    success: true,
-                    message: `Group share data copied to clipboard! (${groupShareJson.length} chars, ${groupShare.groupMembers.length} admin members)`,
-                });
-            }
-            else {
-                setShareResult({
-                    success: false,
-                    message: "Failed to copy to clipboard. Please copy manually from the modal.",
-                });
-            }
-        }
-        catch (error) {
-            setShareResult({
-                success: false,
-                message: `Error generating share: ${error instanceof Error ? error.message : String(error)}`,
-            });
-        }
-        finally {
-            setIsSharing(false);
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-secondary btn-sm", onClick: handleShare, disabled: isSharing, title: "Share group with admin members", children: isSharing ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }), "Sharing..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-share me-1" }), "Share"] })) }), shareResult && ((0, jsx_runtime_1.jsx)("div", { className: "position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center", style: { backgroundColor: "rgba(0,0,0,0.5)", zIndex: 1050 }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card", style: { maxWidth: "500px", width: "90%" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-header d-flex justify-content-between align-items-center", children: [(0, jsx_runtime_1.jsxs)("h6", { className: "mb-0", children: [(0, jsx_runtime_1.jsx)("i", { className: `bi-${shareResult.success ? "check-circle text-success" : "exclamation-triangle text-warning"} me-2` }), "Group Share ", shareResult.success ? "Ready" : "Error"] }), (0, jsx_runtime_1.jsx)("button", { className: "btn-close", onClick: () => setShareResult(null), "aria-label": "Close" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-3", children: shareResult.message }), (0, jsx_runtime_1.jsxs)("div", { className: "text-end", children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-secondary me-2", onClick: () => setShareResult(null), children: "Close" }), shareResult.success && ((0, jsx_runtime_1.jsx)("button", { className: "btn btn-primary", onClick: handleShare, children: "Copy Again" }))] })] })] }) }))] }));
-};
 const GroupMembersWrapper = (props) => {
     const userContext = (0, hooks_1.usePromise)(() => (0, peers_sdk_1.getUserContext)());
     if (!userContext)
         return null;
     return (0, jsx_runtime_1.jsx)(group_members_1.GroupMembersUI, { groupId: props.groupId, userContext: userContext });
 };
-(0, ui_loader_1.registerInternalPeersUI)({
-    peersUIId: "00group00details00component",
-    component: exports.GroupDetails,
-    routes: [
-        {
-            isMatch: (props, context) => {
-                const match = context.path.match(/^groups\/([a-zA-Z0-9]{25})$/);
-                if (match) {
-                    props.groupId = match[1];
-                    return true;
-                }
-                return false;
-            },
-            uiCategory: "screen",
-            priority: 2,
-        },
-    ],
-});

package/dist/screens/groups/group-invite-panel.js

@@ -5,9 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = require("react");
 const typeahead_1 = require("../../components/typeahead");
+const activity_view_1 = require("../invites/activity-view");
 const invite_share_1 = require("../invites/invite-share");
 const invites_ipc_1 = require("../invites/invites-ipc");
-const pending_invites_list_1 = require("../invites/pending-invites-list");
 const ROLE_OPTIONS = [
     { value: peers_sdk_1.GroupMemberRole.Reader, label: "Reader" },
     { value: peers_sdk_1.GroupMemberRole.Writer, label: "Writer" },
@@ -121,5 +121,5 @@ function ShareLinkCard(props) {
  */
 function GroupInvitePanel(props) {
     const [tab, setTab] = (0, react_1.useState)("contacts");
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "card mb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-header d-flex align-items-center gap-3", children: [(0, jsx_runtime_1.jsx)("h6", { className: "mb-0", children: "Invite people" }), (0, jsx_runtime_1.jsxs)("div", { className: "btn-group btn-group-sm ms-auto", role: "group", "aria-label": "Invite method", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: `btn ${tab === "contacts" ? "btn-primary" : "btn-outline-primary"}`, onClick: () => setTab("contacts"), children: "Contacts" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: `btn ${tab === "link" ? "btn-primary" : "btn-outline-primary"}`, onClick: () => setTab("link"), children: "Share a link" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "card-body", children: tab === "contacts" ? (0, jsx_runtime_1.jsx)(InviteContactsCard, { ...props }) : (0, jsx_runtime_1.jsx)(ShareLinkCard, { ...props }) })] }), (0, jsx_runtime_1.jsx)(pending_invites_list_1.PendingInvitesList, { type: "group", groupId: props.groupId, hideWhenEmpty: true, title: "Pending invites and join requests" })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "card mb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-header d-flex align-items-center gap-3", children: [(0, jsx_runtime_1.jsx)("h6", { className: "mb-0", children: "Invite people" }), (0, jsx_runtime_1.jsxs)("div", { className: "btn-group btn-group-sm ms-auto", role: "group", "aria-label": "Invite method", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: `btn ${tab === "contacts" ? "btn-primary" : "btn-outline-primary"}`, onClick: () => setTab("contacts"), children: "Contacts" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: `btn ${tab === "link" ? "btn-primary" : "btn-outline-primary"}`, onClick: () => setTab("link"), children: "Share a link" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "card-body", children: tab === "contacts" ? (0, jsx_runtime_1.jsx)(InviteContactsCard, { ...props }) : (0, jsx_runtime_1.jsx)(ShareLinkCard, { ...props }) })] }), (0, jsx_runtime_1.jsx)(activity_view_1.PendingWorkLink, { type: "group", groupId: props.groupId })] }));
 }