@peers-app/peers-ui 0.21.2 → 0.21.3

package/src/screens/network-viewer/network-viewer-ipc.test.ts

@@ -0,0 +1,70 @@
+import {
+  CONTRACT_REQUEST_CHANNEL,
+  inProcessTransportPair,
+  newid,
+  registerHostContractTransport,
+} from "@peers-app/peers-sdk";
+import { getNetworkControlConsumer, getNetworkDiagnosticsConsumer } from "./network-viewer-ipc";
+
+function setupHost(label: string) {
+  const [consumerTransport, providerTransport] = inProcessTransportPair();
+  providerTransport.on(CONTRACT_REQUEST_CHANNEL, (call) => {
+    if (call.member === "observable" && call.name === "status" && call.operation === "get") {
+      return {
+        state: "offline",
+        connectionCount: 0,
+        syncingContextCount: 0,
+        errorCount: 0,
+        errors: [],
+      };
+    }
+    if (call.member === "tool" && call.name === "getOverview") {
+      return { overview: { localDeviceId: label } };
+    }
+    if (call.member === "tool" && call.name === "refreshNetworkInfo") {
+      return { success: true, message: label };
+    }
+    return undefined;
+  });
+  return {
+    dispose: registerHostContractTransport(consumerTransport),
+  };
+}
+
+describe("Network Viewer host consumers", () => {
+  it("caches consumers for one transport and recreates them after replacement", async () => {
+    const firstHost = setupHost(newid());
+    const firstDiagnostics = await getNetworkDiagnosticsConsumer();
+    expect(await getNetworkDiagnosticsConsumer()).toBe(firstDiagnostics);
+
+    const secondLabel = newid();
+    const secondHost = setupHost(secondLabel);
+    const secondDiagnostics = await getNetworkDiagnosticsConsumer();
+    const control = await getNetworkControlConsumer();
+
+    expect(secondDiagnostics).not.toBe(firstDiagnostics);
+    await expect(firstDiagnostics.tools.getOverview()).rejects.toThrow("disposed");
+    await expect(control.tools.refreshNetworkInfo()).resolves.toEqual({
+      success: true,
+      message: secondLabel,
+    });
+
+    secondHost.dispose();
+    firstHost.dispose();
+  });
+
+  it("shares one consumer pair across concurrent callers", async () => {
+    const host = setupHost(newid());
+    const [first, second, third] = await Promise.all([
+      getNetworkDiagnosticsConsumer(),
+      getNetworkDiagnosticsConsumer(),
+      getNetworkControlConsumer(),
+    ]);
+
+    expect(second).toBe(first);
+    const cachedControl = await getNetworkControlConsumer();
+    expect(third).toBe(cachedControl);
+
+    host.dispose();
+  });
+});

package/src/screens/network-viewer/network-viewer-ipc.ts

@@ -1,46 +1,113 @@
-import type { IConsoleLog } from "@peers-app/peers-sdk";
-
-/** Filters and bounds accepted by the desktop remote-log diagnostic endpoint. */
-export type RemoteLogsQuery = {
-  sinceTimestamp?: number;
-  level?: IConsoleLog["level"];
-  process?: string;
-  search?: string;
-  pageSize?: number;
-  timeoutMs?: number;
-};
+import {
+  createContractConsumer,
+  getHostContractTransport,
+  getNetworkControlContractDefinition,
+  getNetworkDiagnosticsContractDefinition,
+  type IContractTransport,
+  type INetworkControlConsumer,
+  type INetworkDiagnosticsConsumer,
+  subscribeHostContractTransport,
+  waitForHostContractTransport,
+} from "@peers-app/peers-sdk";
 
-/** Result of reading a directly connected, provider-authorized device's console-log table. */
-export type RemoteLogsResult = {
-  deviceId: string;
-  truncated: boolean;
-  logs: IConsoleLog[];
-  queriedAt: number;
-};
+/** Default wait for the host transport before treating diagnostics as unavailable. */
+const HOST_TRANSPORT_TIMEOUT_MS = 10_000;
 
-/** Electron preload APIs used by the Network Viewer screen. */
-export type NetworkViewerElectronApi = {
-  getOverview: () => Promise<unknown>;
-  getConnections: () => Promise<unknown>;
-  /** No-arg: all groups; with id: single group. */
-  getGroupSyncStatus: (groupId?: string) => Promise<unknown>;
-  getDisconnectedDevices: () => Promise<unknown>;
-  refreshNetworkInfo: () => Promise<void>;
-  disconnectDevice: (deviceId: string) => Promise<void>;
-  connectToDevice: (deviceId: string) => Promise<{ success: boolean; message?: string }>;
-  deleteDevice: (deviceId: string) => Promise<{ success: boolean; message?: string }>;
-  getDeviceDetails: (deviceId: string) => Promise<unknown>;
-  getGroupDetails: (groupId: string) => Promise<unknown>;
-  getRemoteLogs: (deviceId: string, query?: RemoteLogsQuery) => Promise<RemoteLogsResult>;
+/** Electron-only capabilities intentionally excluded from portable network contracts. */
+export type NetworkViewerPlatformApi = {
   downloadRemoteDatabase?: (groupId: string, deviceId: string) => Promise<unknown>;
   runDiagnostics: () => Promise<unknown>;
 };
 
 type WindowWithNetworkViewer = Window & {
-  electronAPI?: { networkViewer?: NetworkViewerElectronApi };
+  electronAPI?: { networkViewer?: NetworkViewerPlatformApi };
 };
 
-/** Return the context-isolated desktop diagnostics bridge when running in Electron. */
-export function getNetworkViewerApi(): NetworkViewerElectronApi | undefined {
+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 },
+);
+
+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 a typed control consumer bound to the current local host transport. */
+export async function getNetworkControlConsumer(): Promise<INetworkControlConsumer> {
+  return (await getConsumers()).control;
+}
+
+/** Return the context-isolated desktop-only capability bridge, when available. */
+export function getNetworkViewerPlatformApi(): NetworkViewerPlatformApi | undefined {
   return (window as WindowWithNetworkViewer).electronAPI?.networkViewer;
 }

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

@@ -1,13 +1,22 @@
-import { TrustLevel } from "@peers-app/peers-sdk";
+import {
+  type INetworkConnectionInfo,
+  type INetworkDisconnectedDevice,
+  type INetworkGroupSyncInfo,
+  type INetworkOverview,
+  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 { isDesktop } from "../../globals";
 import { registerInternalPeersUI } from "../../ui-router/ui-loader";
 import { ConnectionTroubleshooter } from "./connection-troubleshooter";
 import { DeviceDetailsModal } from "./device-details-modal";
 import { GroupDetailsModal } from "./group-details-modal";
-import { getNetworkViewerApi } from "./network-viewer-ipc";
+import {
+  getNetworkControlConsumer,
+  getNetworkDiagnosticsConsumer,
+  getNetworkViewerPlatformApi,
+} from "./network-viewer-ipc";
 import { UsageGraph } from "./usage-graph";
 
 /** Format bytes to human-readable string (KB, MB, GB) */
@@ -29,81 +38,11 @@ function formatRate(mbps: number | undefined): string {
   return `${mbps.toFixed(2)} MB/s`;
 }
 
-// TypeScript type definitions (matching backend)
-interface INetworkOverview {
-  localDeviceId: string;
-  localUserId: string;
-  totalConnections: number;
-  availableSlots: number;
-  maxConnections: number;
-  cpuPercent: number;
-  memPercent: number;
-  groups: IGroupSummary[];
-}
-
-interface IGroupSummary {
-  groupId: string;
-  groupName: string;
-  connectedDevices: number;
-  totalMembers: number;
-}
-
-interface IConnectionInfo {
-  deviceId: string;
-  userId: string;
-  userName?: string;
-  deviceName?: string;
-  userTrustLevel: number;
-  deviceTrustLevel: number;
-  connectionState: "connected" | "syncing" | "idle";
-  sharedGroups: string[];
-  roles: Record<string, unknown>;
-  pathType: "direct" | "indirect" | "unknown";
-  throughDeviceIds?: string[];
-  latencyMs: number;
-  errorRate: number;
-  isServer: boolean;
-  connectionAddress?: string;
-  // Throughput stats
-  bytesSent?: number;
-  bytesReceived?: number;
-  sendRateMBps?: number;
-  receiveRateMBps?: number;
-}
-
-interface IDeviceConnection {
-  deviceId: string;
-  latencyMs: number;
-  errorRate: number;
-  timestampLastApplied: number;
-  closed?: boolean;
-}
-
-interface IGroupSyncInfo {
-  groupId: string;
-  groupName: string;
-  connectedDevices: IDeviceConnection[];
-  preferredDeviceIds: string[];
-  lastSyncTimestamp: number;
-  totalMembers: number;
-}
-
-interface IDisconnectedDevice {
-  deviceId: string;
-  userId: string;
-  userName?: string;
-  trustLevel: number;
-  firstSeen: Date;
-  lastSeen: Date;
-  name?: string;
-  serverUrl?: string;
-}
-
 export function NetworkViewerList() {
   const [overview, setOverview] = useState<INetworkOverview | null>(null);
-  const [connections, setConnections] = useState<IConnectionInfo[]>([]);
-  const [groupSyncInfo, setGroupSyncInfo] = useState<IGroupSyncInfo[]>([]);
-  const [disconnectedDevices, setDisconnectedDevices] = useState<IDisconnectedDevice[]>([]);
+  const [connections, setConnections] = useState<INetworkConnectionInfo[]>([]);
+  const [groupSyncInfo, setGroupSyncInfo] = useState<INetworkGroupSyncInfo[]>([]);
+  const [disconnectedDevices, setDisconnectedDevices] = useState<INetworkDisconnectedDevice[]>([]);
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null);
@@ -113,24 +52,23 @@ export function NetworkViewerList() {
 
   const loadData = useCallback(async () => {
     try {
-      if (!isDesktop()) return;
-      const api = getNetworkViewerApi();
-      if (!api) {
-        console.warn("Network Viewer API not available");
-        return;
-      }
-
-      const [overviewData, connectionsData, groupSyncData, disconnectedData] = await Promise.all([
-        api.getOverview(),
-        api.getConnections(),
-        api.getGroupSyncStatus(),
-        api.getDisconnectedDevices(),
+      const diagnostics = await getNetworkDiagnosticsConsumer();
+      const [
+        { overview: overviewData },
+        { connections: connectionsData },
+        { groups: groupSyncData },
+        { devices: disconnectedData },
+      ] = await Promise.all([
+        diagnostics.tools.getOverview(),
+        diagnostics.tools.getConnections(),
+        diagnostics.tools.getGroupSyncStatus(),
+        diagnostics.tools.getDisconnectedDevices(),
       ]);
 
-      setOverview(overviewData as INetworkOverview);
-      setConnections(connectionsData as IConnectionInfo[]);
-      setGroupSyncInfo(groupSyncData as IGroupSyncInfo[]);
-      setDisconnectedDevices(disconnectedData as IDisconnectedDevice[]);
+      setOverview(overviewData);
+      setConnections(connectionsData);
+      setGroupSyncInfo(groupSyncData);
+      setDisconnectedDevices(disconnectedData);
     } catch (error) {
       console.error("Error loading network data:", error);
     } finally {
@@ -141,10 +79,12 @@ export function NetworkViewerList() {
   const handleRefresh = async () => {
     setRefreshing(true);
     try {
-      const api = getNetworkViewerApi();
-      if (api) {
-        await api.refreshNetworkInfo();
+      const control = await getNetworkControlConsumer();
+      const result = await control.tools.refreshNetworkInfo();
+      if (result.success) {
         await loadData();
+      } else {
+        alert(result.message);
       }
     } catch (error) {
       console.error("Error refreshing network info:", error);
@@ -159,10 +99,12 @@ export function NetworkViewerList() {
     }
 
     try {
-      const api = getNetworkViewerApi();
-      if (api) {
-        await api.disconnectDevice(deviceId);
+      const control = await getNetworkControlConsumer();
+      const result = await control.tools.disconnectDevice({ deviceId });
+      if (result.success) {
         await loadData();
+      } else {
+        alert(result.message);
       }
     } catch (error) {
       console.error("Error disconnecting device:", error);
@@ -175,16 +117,13 @@ export function NetworkViewerList() {
 
   const handleConnectToDevice = async (deviceId: string) => {
     try {
-      const api = getNetworkViewerApi();
-      if (api) {
-        setConnecting((prev) => new Set(prev).add(deviceId));
-        const result = await api.connectToDevice(deviceId);
-        if (result.success) {
-          // Refresh data to see if connection was established
-          await loadData();
-        } else {
-          alert(`Failed to connect: ${result.message}`);
-        }
+      const control = await getNetworkControlConsumer();
+      setConnecting((prev) => new Set(prev).add(deviceId));
+      const result = await control.tools.connectToDevice({ deviceId });
+      if (result.success) {
+        await loadData();
+      } else {
+        alert(`Failed to connect: ${result.message}`);
       }
     } catch (error) {
       console.error("Error connecting to device:", error);
@@ -200,15 +139,12 @@ export function NetworkViewerList() {
 
   const handleDeleteDevice = async (deviceId: string) => {
     try {
-      const api = getNetworkViewerApi();
-      if (api) {
-        const result = await api.deleteDevice(deviceId);
-        if (result.success) {
-          // Refresh data to remove the device from the list
-          await loadData();
-        } else {
-          alert(`Failed to delete device: ${result.message}`);
-        }
+      const control = await getNetworkControlConsumer();
+      const result = await control.tools.deleteDevice({ deviceId });
+      if (result.success) {
+        await loadData();
+      } else {
+        alert(`Failed to delete device: ${result.message}`);
       }
     } catch (error) {
       console.error("Error deleting device:", error);
@@ -227,16 +163,6 @@ export function NetworkViewerList() {
     return <LoadingIndicator />;
   }
 
-  if (!isDesktop()) {
-    return (
-      <div className="container-fluid p-4">
-        <div className="alert alert-info">
-          Network Viewer is only available in the desktop application.
-        </div>
-      </div>
-    );
-  }
-
   if (!overview) {
     return (
       <div className="container-fluid p-4">
@@ -254,14 +180,16 @@ export function NetworkViewerList() {
       <div className="d-flex justify-content-between align-items-center mb-4">
         <h2>Network Viewer</h2>
         <div className="d-flex gap-2">
-          <button
-            className="btn btn-sm btn-outline-warning"
-            onClick={() => setShowTroubleshooter(true)}
-            title="Run connection diagnostics"
-          >
-            <i className="bi bi-stethoscope me-1"></i>
-            Troubleshoot
-          </button>
+          {getNetworkViewerPlatformApi()?.runDiagnostics && (
+            <button
+              className="btn btn-sm btn-outline-warning"
+              onClick={() => setShowTroubleshooter(true)}
+              title="Run connection diagnostics"
+            >
+              <i className="bi bi-stethoscope me-1"></i>
+              Troubleshoot
+            </button>
+          )}
           <button className="btn btn-sm btn-primary" onClick={handleRefresh} disabled={refreshing}>
             <i className={`bi bi-arrow-clockwise ${refreshing ? "spin" : ""}`}></i>
             {refreshing ? " Refreshing..." : " Refresh"}
@@ -294,10 +222,9 @@ export function NetworkViewerList() {
               <UsageGraph
                 label="Connections"
                 fetchUsage={async () => {
-                  const api = getNetworkViewerApi();
-                  if (!api) return 0;
-                  const data = (await api.getOverview()) as INetworkOverview;
-                  return data.totalConnections;
+                  const diagnostics = await getNetworkDiagnosticsConsumer();
+                  const { overview: currentOverview } = await diagnostics.tools.getOverview();
+                  return currentOverview.totalConnections;
                 }}
                 durationMinutes={5}
                 updateInterval={5000}
@@ -321,10 +248,9 @@ export function NetworkViewerList() {
               <UsageGraph
                 label="CPU"
                 fetchUsage={async () => {
-                  const api = getNetworkViewerApi();
-                  if (!api) return 0;
-                  const data = (await api.getOverview()) as INetworkOverview;
-                  return data.cpuPercent;
+                  const diagnostics = await getNetworkDiagnosticsConsumer();
+                  const { overview: currentOverview } = await diagnostics.tools.getOverview();
+                  return currentOverview.cpuPercent;
                 }}
                 durationMinutes={5}
                 updateInterval={5000}
@@ -344,10 +270,9 @@ export function NetworkViewerList() {
               <UsageGraph
                 label="Memory"
                 fetchUsage={async () => {
-                  const api = getNetworkViewerApi();
-                  if (!api) return 0;
-                  const data = (await api.getOverview()) as INetworkOverview;
-                  return data.memPercent;
+                  const diagnostics = await getNetworkDiagnosticsConsumer();
+                  const { overview: currentOverview } = await diagnostics.tools.getOverview();
+                  return currentOverview.memPercent;
                 }}
                 durationMinutes={5}
                 updateInterval={5000}
@@ -578,7 +503,10 @@ export function NetworkViewerList() {
                                       {(device.errorRate * 100).toFixed(1)}% errors
                                     </span>
                                     <span className="badge bg-info">
-                                      Last: {new Date(device.timestampLastApplied).toLocaleString()}
+                                      Last:{" "}
+                                      {device.timestampLastApplied
+                                        ? new Date(device.timestampLastApplied).toLocaleString()
+                                        : "Never"}
                                     </span>
                                   </div>
                                   {idx < group.connectedDevices.length - 1 && (

package/src/screens/network-viewer/remote-logs-panel.tsx

@@ -1,6 +1,6 @@
-import type { IConsoleLog } from "@peers-app/peers-sdk";
+import type { IConsoleLog, INetworkRemoteLogsResult } from "@peers-app/peers-sdk";
 import { useCallback, useState } from "react";
-import { getNetworkViewerApi, type RemoteLogsResult } from "./network-viewer-ipc";
+import { getNetworkDiagnosticsConsumer } from "./network-viewer-ipc";
 
 interface RemoteLogsPanelProps {
   deviceId: string;
@@ -34,7 +34,7 @@ function RemoteLogRow({ log }: { log: IConsoleLog }) {
 
 /** Read-only System Logs contract panel for a directly connected, provider-authorized device. */
 export function RemoteLogsPanel({ deviceId }: RemoteLogsPanelProps) {
-  const [result, setResult] = useState<RemoteLogsResult | null>(null);
+  const [result, setResult] = useState<INetworkRemoteLogsResult | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string>();
   const [processName, setProcessName] = useState("");
@@ -43,12 +43,6 @@ export function RemoteLogsPanel({ deviceId }: RemoteLogsPanelProps) {
   const [minutes, setMinutes] = useState("60");
 
   const loadLogs = useCallback(async () => {
-    const api = getNetworkViewerApi();
-    if (!api) {
-      setError("Network Viewer API is unavailable");
-      return;
-    }
-
     setLoading(true);
     setError(undefined);
     try {
@@ -57,13 +51,17 @@ export function RemoteLogsPanel({ deviceId }: RemoteLogsPanelProps) {
         Number.isFinite(minutesNumber) && minutesNumber > 0
           ? Date.now() - minutesNumber * 60_000
           : undefined;
-      const response = await api.getRemoteLogs(deviceId, {
-        sinceTimestamp,
-        level: level ? (level as IConsoleLog["level"]) : undefined,
-        process: processName || undefined,
-        search: search || undefined,
-        pageSize: 100,
-        timeoutMs: 10_000,
+      const diagnostics = await getNetworkDiagnosticsConsumer();
+      const response = await diagnostics.tools.queryRemoteLogs({
+        deviceId,
+        query: {
+          sinceTimestamp,
+          level: level ? (level as IConsoleLog["level"]) : undefined,
+          process: processName || undefined,
+          search: search || undefined,
+          pageSize: 100,
+          timeoutMs: 10_000,
+        },
       });
       setResult(response);
     } catch (cause) {