@peers-app/peers-ui 0.21.2 → 0.21.3

package/dist/tabs-layout/use-network-status.test.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("@testing-library/react");
+const network_viewer_ipc_1 = require("../screens/network-viewer/network-viewer-ipc");
+const use_network_status_1 = require("./use-network-status");
+jest.mock("../screens/network-viewer/network-viewer-ipc", () => ({
+    getNetworkDiagnosticsConsumer: jest.fn(),
+}));
+const mockGetDiagnostics = network_viewer_ipc_1.getNetworkDiagnosticsConsumer;
+function makeStatus(overrides = {}) {
+    return {
+        state: "offline",
+        connectionCount: 0,
+        syncingContextCount: 0,
+        errorCount: 0,
+        errors: [],
+        ...overrides,
+    };
+}
+describe("useNetworkStatus", () => {
+    it("streams status updates and reports host disconnection", async () => {
+        const status = (0, peers_sdk_1.observable)(makeStatus());
+        mockGetDiagnostics.mockResolvedValue({
+            observables: { status },
+        });
+        const [transport] = (0, peers_sdk_1.inProcessTransportPair)();
+        const disposeTransport = (0, peers_sdk_1.registerHostContractTransport)(transport);
+        const hook = (0, react_1.renderHook)(() => (0, use_network_status_1.useNetworkStatus)());
+        await (0, react_1.waitFor)(() => expect(hook.result.current.availability).toBe("ready"));
+        expect(hook.result.current.status?.state).toBe("offline");
+        (0, react_1.act)(() => {
+            status(makeStatus({ state: "syncing", connectionCount: 2, syncingContextCount: 1 }));
+        });
+        await (0, react_1.waitFor)(() => expect(hook.result.current.status?.state).toBe("syncing"));
+        (0, react_1.act)(() => {
+            disposeTransport();
+        });
+        await (0, react_1.waitFor)(() => expect(hook.result.current.availability).toBe("unavailable"));
+        hook.unmount();
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.21.2",
+  "version": "0.21.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -28,7 +28,7 @@
     "lint:fix": "biome check --write ."
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.21.2",
+    "@peers-app/peers-sdk": "^0.21.3",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -39,7 +39,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
     "@biomejs/biome": "2.3.11",
-    "@peers-app/peers-sdk": "0.21.2",
+    "@peers-app/peers-sdk": "0.21.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/screens/network-viewer/connection-troubleshooter.tsx

@@ -1,6 +1,6 @@
 import type React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { getNetworkViewerApi } from "./network-viewer-ipc";
+import { getNetworkViewerPlatformApi } from "./network-viewer-ipc";
 
 export interface IDiagnosticCheck {
   id: string;
@@ -106,7 +106,7 @@ export function ConnectionTroubleshooter({ onBack }: Props) {
     setChecks([]);
     setExpanded(new Set());
 
-    const api = getNetworkViewerApi();
+    const api = getNetworkViewerPlatformApi();
     if (!api) {
       setChecks([
         {

package/src/screens/network-viewer/device-details-modal.tsx

@@ -1,8 +1,8 @@
-import { TrustLevel } from "@peers-app/peers-sdk";
+import { type INetworkDeviceDetails, TrustLevel } from "@peers-app/peers-sdk";
 import { useCallback, useEffect, useState } from "react";
 import { LoadingIndicator } from "../../components/loading-indicator";
 import { TrustLevelBadge } from "../../components/trust-level-badge";
-import { getNetworkViewerApi } from "./network-viewer-ipc";
+import { getNetworkControlConsumer, getNetworkDiagnosticsConsumer } from "./network-viewer-ipc";
 import { RemoteLogsPanel } from "./remote-logs-panel";
 
 /** Format bytes to human-readable string (KB, MB, GB) */
@@ -24,41 +24,6 @@ function formatRate(mbps: number | undefined): string {
   return `${mbps.toFixed(2)} MB/s`;
 }
 
-// TypeScript type definitions (matching backend)
-interface IDeviceDetails {
-  deviceId: string;
-  userId: string;
-  userName?: string;
-  deviceName?: string;
-  trustLevel: number;
-  connectionState: "connected" | "syncing" | "idle";
-  canReadRemoteLogs: boolean;
-  sharedGroups: string[];
-  roles: Record<string, unknown>;
-  pathType: "direct" | "indirect" | "unknown";
-  throughDeviceIds?: string[];
-  networkInfo?: {
-    deviceId: string;
-    connections: Array<{ deviceId: string; userId: string }>;
-    preferredDeviceIds: string[];
-    connectionSlotsAvailable: number;
-    cpuPercent: number;
-    memPercent: number;
-    timestampLastApplied: number;
-  };
-  syncStatsByGroup: {
-    [groupId: string]: {
-      lastSyncTime: number;
-      isPreferred: boolean;
-    };
-  };
-  // Throughput stats
-  bytesSent?: number;
-  bytesReceived?: number;
-  sendRateMBps?: number;
-  receiveRateMBps?: number;
-}
-
 interface IDeviceDetailsModalProps {
   deviceId: string;
   onClose: () => void;
@@ -67,22 +32,14 @@ interface IDeviceDetailsModalProps {
 
 /** Show connection, sync, topology, and provider-authorized remote-log diagnostics for one device. */
 export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceDetailsModalProps) {
-  const [device, setDevice] = useState<IDeviceDetails | null>(null);
+  const [device, setDevice] = useState<INetworkDeviceDetails | null>(null);
   const [loading, setLoading] = useState(true);
   const [notFound, setNotFound] = useState(false);
 
   const loadData = useCallback(async () => {
     try {
-      const api = getNetworkViewerApi();
-      if (!api) {
-        console.warn("Network Viewer API not available");
-        return;
-      }
-
-      const deviceData = (await api.getDeviceDetails(deviceId)) as
-        | IDeviceDetails
-        | null
-        | undefined;
+      const diagnostics = await getNetworkDiagnosticsConsumer();
+      const { device: deviceData } = await diagnostics.tools.getDeviceDetails({ deviceId });
 
       if (!deviceData) {
         setNotFound(true);
@@ -104,14 +61,14 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
     }
 
     try {
-      const api = getNetworkViewerApi();
-      if (api && deviceId) {
-        await api.disconnectDevice(deviceId);
-        if (onDisconnect) {
-          onDisconnect();
-        }
-        onClose();
+      const control = await getNetworkControlConsumer();
+      const result = await control.tools.disconnectDevice({ deviceId });
+      if (!result.success) {
+        alert(result.message);
+        return;
       }
+      onDisconnect?.();
+      onClose();
     } catch (error) {
       console.error("Error disconnecting device:", error);
     }
@@ -197,9 +154,14 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
                     <span className="badge bg-success">{device.connectionState}</span>
                   </div>
                   <div className="col-md-6 mb-3">
-                    <strong>Trust Level:</strong>
+                    <strong>User Trust:</strong>
                     <br />
-                    <TrustLevelBadge level={device.trustLevel || TrustLevel.Unknown} />
+                    <TrustLevelBadge level={device.userTrustLevel || TrustLevel.Unknown} />
+                  </div>
+                  <div className="col-md-6 mb-3">
+                    <strong>Device Trust:</strong>
+                    <br />
+                    <TrustLevelBadge level={device.deviceTrustLevel || TrustLevel.Unknown} />
                   </div>
                   <div className="col-md-6 mb-3">
                     <strong>Path Type:</strong>
@@ -345,7 +307,6 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
                           <thead>
                             <tr>
                               <th>Device ID</th>
-                              <th>User ID</th>
                             </tr>
                           </thead>
                           <tbody>
@@ -354,9 +315,6 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
                                 <td>
                                   <code className="text-muted small">{conn.deviceId}</code>
                                 </td>
-                                <td>
-                                  <code className="text-muted small">{conn.userId}</code>
-                                </td>
                               </tr>
                             ))}
                           </tbody>

package/src/screens/network-viewer/group-details-modal.tsx

@@ -1,38 +1,16 @@
-import { TrustLevel } from "@peers-app/peers-sdk";
+import {
+  type INetworkGroupDetails,
+  type INetworkGroupSyncInfo,
+  TrustLevel,
+} from "@peers-app/peers-sdk";
 import { useCallback, useEffect, useState } from "react";
 import { LoadingIndicator } from "../../components/loading-indicator";
 import { TrustLevelBadge } from "../../components/trust-level-badge";
-import { getNetworkViewerApi } from "./network-viewer-ipc";
-
-// TypeScript type definitions (matching backend)
-interface IGroupDetails {
-  groupId: string;
-  groupName: string;
-  founderUserId: string;
-  founderUserName?: string;
-  members: {
-    userId: string;
-    userName?: string;
-    role: string;
-    trustLevel: TrustLevel;
-  }[];
-}
-
-interface IConnectedDevice {
-  deviceId: string;
-  latencyMs: number;
-  errorRate: number;
-  timestampLastApplied: number;
-}
-
-interface IGroupSyncInfo {
-  groupId: string;
-  groupName: string;
-  connectedDevices: IConnectedDevice[];
-  preferredDeviceIds: string[];
-  lastSyncTimestamp: number;
-  totalMembers: number;
-}
+import {
+  getNetworkControlConsumer,
+  getNetworkDiagnosticsConsumer,
+  getNetworkViewerPlatformApi,
+} from "./network-viewer-ipc";
 
 interface IGroupDetailsModalProps {
   groupId: string;
@@ -40,8 +18,8 @@ interface IGroupDetailsModalProps {
 }
 
 export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps) {
-  const [group, setGroup] = useState<IGroupDetails | null>(null);
-  const [syncInfo, setSyncInfo] = useState<IGroupSyncInfo | null>(null);
+  const [group, setGroup] = useState<INetworkGroupDetails | null>(null);
+  const [syncInfo, setSyncInfo] = useState<INetworkGroupSyncInfo | null>(null);
   const [loading, setLoading] = useState(true);
   const [notFound, setNotFound] = useState(false);
   const [downloading, setDownloading] = useState(false);
@@ -52,21 +30,26 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
     filePath?: string;
     size?: number;
   } | null>(null);
+  const [fullSyncing, setFullSyncing] = useState(false);
+  const [fullSyncResult, setFullSyncResult] = useState<{
+    success: boolean;
+    message: string;
+  } | null>(null);
+  const [syncingNow, setSyncingNow] = useState(false);
+  const [syncNowResult, setSyncNowResult] = useState<{
+    success: boolean;
+    message: string;
+  } | null>(null);
+  const platformApi = getNetworkViewerPlatformApi();
 
   const loadData = useCallback(async () => {
     try {
-      const api = getNetworkViewerApi();
-      if (!api) {
-        console.warn("Network Viewer API not available");
-        return;
-      }
-
-      const [groupData, syncDataUnknown] = await Promise.all([
-        api.getGroupDetails(groupId),
-        api.getGroupSyncStatus(groupId),
+      const diagnostics = await getNetworkDiagnosticsConsumer();
+      const [{ group: groupDetails }, { groups }] = await Promise.all([
+        diagnostics.tools.getGroupDetails({ groupId }),
+        diagnostics.tools.getGroupSyncStatus({ groupId }),
       ]);
 
-      const groupDetails = groupData as IGroupDetails | null | undefined;
       if (!groupDetails) {
         setNotFound(true);
       } else {
@@ -74,9 +57,8 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
         setNotFound(false);
       }
 
-      const syncData = syncDataUnknown as IGroupSyncInfo[] | undefined;
-      if (syncData && syncData.length > 0) {
-        setSyncInfo(syncData[0]);
+      if (groups.length > 0) {
+        setSyncInfo(groups[0]);
       }
     } catch (error) {
       console.error("Error loading group details:", error);
@@ -92,8 +74,7 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
       setDownloadProgress("Preparing download...");
       setDownloadResult(null);
 
-      const api = getNetworkViewerApi();
-      if (!api?.downloadRemoteDatabase) {
+      if (!platformApi?.downloadRemoteDatabase) {
         setDownloadResult({
           success: false,
           message: "Download API not available",
@@ -102,7 +83,7 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
       }
 
       setDownloadProgress("Downloading database...");
-      const result = (await api.downloadRemoteDatabase(groupId, deviceId)) as {
+      const result = (await platformApi.downloadRemoteDatabase(groupId, deviceId)) as {
         success: boolean;
         message: string;
         filePath?: string;
@@ -125,6 +106,53 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
     }
   };
 
+  const handleSyncNow = async () => {
+    setSyncingNow(true);
+    setSyncNowResult(null);
+    try {
+      const control = await getNetworkControlConsumer();
+      const result = await control.tools.syncGroupNow({ groupId });
+      setSyncNowResult(result);
+      if (result.success) {
+        await loadData();
+      }
+    } catch (error) {
+      setSyncNowResult({
+        success: false,
+        message: error instanceof Error ? error.message : String(error),
+      });
+    } finally {
+      setSyncingNow(false);
+    }
+  };
+
+  const handleFullSync = async () => {
+    if (
+      !confirm(
+        `Do a full sync for "${group?.groupName || groupId}"? This resets local change tracking for only this context and may transfer substantial data.`,
+      )
+    ) {
+      return;
+    }
+    setFullSyncing(true);
+    setFullSyncResult(null);
+    try {
+      const control = await getNetworkControlConsumer();
+      const result = await control.tools.resetChangeTracking({ dataContextId: groupId });
+      setFullSyncResult(result);
+      if (result.success) {
+        await loadData();
+      }
+    } catch (error) {
+      setFullSyncResult({
+        success: false,
+        message: error instanceof Error ? error.message : String(error),
+      });
+    } finally {
+      setFullSyncing(false);
+    }
+  };
+
   useEffect(() => {
     loadData();
   }, [loadData]);
@@ -239,98 +267,151 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
                 </div>
               )}
 
-              {/* Database Download Section */}
               <div className="mb-4">
                 <h6 className="border-bottom pb-2 mb-3">
-                  <i className="bi bi-download me-2"></i>
-                  Download Database (Fast Sync)
+                  <i className="bi bi-arrow-repeat me-2"></i>
+                  Synchronization
                 </h6>
                 <p className="text-muted small mb-3">
-                  Download the entire database from a connected device. This is useful for fast
-                  initial sync on a new device. The database will be saved as a backup file.
+                  <strong>Sync now</strong> notifies connected peers that this context may have
+                  changes. <strong>Do full sync</strong> resets change tracking for this context and
+                  rebuilds synchronization state; that may transfer substantial data and should be
+                  used only to repair suspected drift.
                 </p>
-
-                {syncInfo && syncInfo.connectedDevices.length > 0 ? (
-                  <div>
-                    <label className="form-label">Select a connected device:</label>
-                    <div className="d-flex flex-wrap gap-2">
-                      {syncInfo.connectedDevices.map((device) => (
-                        <button
-                          key={device.deviceId}
-                          className="btn btn-outline-primary btn-sm"
-                          onClick={() => handleDownloadDatabase(device.deviceId)}
-                          disabled={downloading}
-                        >
-                          {downloading ? (
-                            <>
-                              <span
-                                className="spinner-border spinner-border-sm me-1"
-                                role="status"
-                                aria-hidden="true"
-                              ></span>
-                              Downloading...
-                            </>
-                          ) : (
-                            <>
-                              <i className="bi bi-cloud-download me-1"></i>
-                              {device.deviceId.substring(0, 8)}...
-                              <span className="badge bg-secondary ms-1">
-                                {Math.round(device.latencyMs)}ms
-                              </span>
-                            </>
-                          )}
-                        </button>
-                      ))}
-                    </div>
-                  </div>
-                ) : (
-                  <div className="alert alert-info mb-0">
-                    <i className="bi bi-info-circle me-2"></i>
-                    No devices are currently connected to this group. Connect to a device first to
-                    download its database.
-                  </div>
-                )}
-
-                {downloadProgress && (
-                  <div className="mt-3">
-                    <div className="d-flex align-items-center">
-                      <span
-                        className="spinner-border spinner-border-sm me-2"
-                        role="status"
-                        aria-hidden="true"
-                      ></span>
-                      <span>{downloadProgress}</span>
-                    </div>
+                <div className="d-flex flex-wrap gap-2">
+                  <button
+                    type="button"
+                    className="btn btn-sm btn-outline-primary"
+                    onClick={() => void handleSyncNow()}
+                    disabled={syncingNow || fullSyncing}
+                  >
+                    {syncingNow ? "Sending sync notification..." : "Sync now"}
+                  </button>
+                  <button
+                    type="button"
+                    className="btn btn-sm btn-outline-warning"
+                    onClick={() => void handleFullSync()}
+                    disabled={fullSyncing || syncingNow}
+                  >
+                    {fullSyncing ? "Starting full sync..." : "Do full sync"}
+                  </button>
+                </div>
+                {syncNowResult && (
+                  <div
+                    className={`alert mt-3 mb-0 ${syncNowResult.success ? "alert-success" : "alert-danger"}`}
+                    role="status"
+                  >
+                    {syncNowResult.message}
                   </div>
                 )}
-
-                {downloadResult && (
+                {fullSyncResult && (
                   <div
-                    className={`alert mt-3 mb-0 ${downloadResult.success ? "alert-success" : "alert-danger"}`}
+                    className={`alert mt-3 mb-0 ${fullSyncResult.success ? "alert-success" : "alert-danger"}`}
+                    role="status"
                   >
-                    {downloadResult.success ? (
-                      <>
-                        <i className="bi bi-check-circle me-2"></i>
-                        <strong>Download complete!</strong>
-                        <br />
-                        <small>
-                          File: <code>{downloadResult.filePath}</code>
-                          <br />
-                          Size:{" "}
-                          {downloadResult.size
-                            ? `${(downloadResult.size / (1024 * 1024)).toFixed(2)} MB`
-                            : "Unknown"}
-                        </small>
-                      </>
-                    ) : (
-                      <>
-                        <i className="bi bi-exclamation-circle me-2"></i>
-                        <strong>Download failed:</strong> {downloadResult.message}
-                      </>
-                    )}
+                    {fullSyncResult.message}
                   </div>
                 )}
               </div>
+
+              {/* Database Download Section */}
+              {platformApi?.downloadRemoteDatabase ? (
+                <div className="mb-4">
+                  <h6 className="border-bottom pb-2 mb-3">
+                    <i className="bi bi-download me-2"></i>
+                    Download Database (Fast Sync)
+                  </h6>
+                  <p className="text-muted small mb-3">
+                    Download the entire database from a connected device. This is useful for fast
+                    initial sync on a new device. The database will be saved as a backup file.
+                  </p>
+
+                  {syncInfo && syncInfo.connectedDevices.length > 0 ? (
+                    <div>
+                      <label className="form-label">Select a connected device:</label>
+                      <div className="d-flex flex-wrap gap-2">
+                        {syncInfo.connectedDevices.map((device) => (
+                          <button
+                            key={device.deviceId}
+                            className="btn btn-outline-primary btn-sm"
+                            onClick={() => handleDownloadDatabase(device.deviceId)}
+                            disabled={downloading}
+                          >
+                            {downloading ? (
+                              <>
+                                <span
+                                  className="spinner-border spinner-border-sm me-1"
+                                  role="status"
+                                  aria-hidden="true"
+                                ></span>
+                                Downloading...
+                              </>
+                            ) : (
+                              <>
+                                <i className="bi bi-cloud-download me-1"></i>
+                                {device.deviceId.substring(0, 8)}...
+                                <span className="badge bg-secondary ms-1">
+                                  {Math.round(device.latencyMs)}ms
+                                </span>
+                              </>
+                            )}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="alert alert-info mb-0">
+                      <i className="bi bi-info-circle me-2"></i>
+                      No devices are currently connected to this group. Connect to a device first to
+                      download its database.
+                    </div>
+                  )}
+
+                  {downloadProgress && (
+                    <div className="mt-3">
+                      <div className="d-flex align-items-center">
+                        <span
+                          className="spinner-border spinner-border-sm me-2"
+                          role="status"
+                          aria-hidden="true"
+                        ></span>
+                        <span>{downloadProgress}</span>
+                      </div>
+                    </div>
+                  )}
+
+                  {downloadResult && (
+                    <div
+                      className={`alert mt-3 mb-0 ${downloadResult.success ? "alert-success" : "alert-danger"}`}
+                    >
+                      {downloadResult.success ? (
+                        <>
+                          <i className="bi bi-check-circle me-2"></i>
+                          <strong>Download complete!</strong>
+                          <br />
+                          <small>
+                            File: <code>{downloadResult.filePath}</code>
+                            <br />
+                            Size:{" "}
+                            {downloadResult.size
+                              ? `${(downloadResult.size / (1024 * 1024)).toFixed(2)} MB`
+                              : "Unknown"}
+                          </small>
+                        </>
+                      ) : (
+                        <>
+                          <i className="bi bi-exclamation-circle me-2"></i>
+                          <strong>Download failed:</strong> {downloadResult.message}
+                        </>
+                      )}
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <div className="alert alert-info mb-4">
+                  Raw database download is available only in the Electron desktop app.
+                </div>
+              )}
             </>
           )}
         </div>