@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/screens/network-viewer/cpu-usage-graph.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import { useEffect, useRef, useState } from "react";
 
 interface ICpuDataPoint {
   timestamp: number;
@@ -28,7 +28,7 @@ export function CpuUsageGraph({
   fetchCpuUsage,
   durationMinutes = 5,
   updateInterval = 5000,
-  minHeight = 80
+  minHeight = 80,
 }: ICpuUsageGraphProps) {
   const [dataPoints, setDataPoints] = useState<ICpuDataPoint[]>([]);
   const [currentCpu, setCurrentCpu] = useState<number>(0);
@@ -72,7 +72,7 @@ export function CpuUsageGraph({
         setDataPoints((prev) => {
           const newPoint: ICpuDataPoint = {
             timestamp: Date.now(),
-            value: cpuValue
+            value: cpuValue,
           };
 
           const updated = [...prev, newPoint];
@@ -85,7 +85,7 @@ export function CpuUsageGraph({
           return updated;
         });
       } catch (error) {
-        console.error('Error fetching CPU usage:', error);
+        console.error("Error fetching CPU usage:", error);
       }
     };
 
@@ -104,7 +104,7 @@ export function CpuUsageGraph({
 
   // Calculate SVG path
   const getLinePath = (): string => {
-    if (dataPoints.length < 2) return '';
+    if (dataPoints.length < 2) return "";
 
     const paddingLeft = 25;
     const paddingRight = 10;
@@ -129,12 +129,14 @@ export function CpuUsageGraph({
     });
 
     // Create SVG path
-    const pathData = points.map((point, idx) => {
-      if (idx === 0) {
-        return `M ${point.x} ${point.y}`;
-      }
-      return `L ${point.x} ${point.y}`;
-    }).join(' ');
+    const pathData = points
+      .map((point, idx) => {
+        if (idx === 0) {
+          return `M ${point.x} ${point.y}`;
+        }
+        return `L ${point.x} ${point.y}`;
+      })
+      .join(" ");
 
     return pathData;
   };
@@ -142,7 +144,7 @@ export function CpuUsageGraph({
   // Get gradient path for fill
   const getGradientPath = (): string => {
     const linePath = getLinePath();
-    if (!linePath) return '';
+    if (!linePath) return "";
 
     const paddingLeft = 25;
     const paddingRight = 10;
@@ -159,16 +161,23 @@ export function CpuUsageGraph({
     <div
       ref={containerRef}
       className="cpu-usage-graph"
-      style={{ margin: 0, padding: 0, position: 'relative', width: '100%', height: '100%', minHeight: `${minHeight}px` }}
+      style={{
+        margin: 0,
+        padding: 0,
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        minHeight: `${minHeight}px`,
+      }}
     >
       <svg
         width={width}
         height={height}
         style={{
-          border: '1px solid rgba(128, 128, 128, 0.2)',
-          borderRadius: '4px',
-          backgroundColor: 'rgba(0, 0, 0, 0.02)',
-          display: 'block'
+          border: "1px solid rgba(128, 128, 128, 0.2)",
+          borderRadius: "4px",
+          backgroundColor: "rgba(0, 0, 0, 0.02)",
+          display: "block",
         }}
       >
         <defs>
@@ -210,12 +219,7 @@ export function CpuUsageGraph({
         })}
 
         {/* Fill area under the line */}
-        {gradientPath && (
-          <path
-            d={gradientPath}
-            fill="url(#cpuGradient)"
-          />
-        )}
+        {gradientPath && <path d={gradientPath} fill="url(#cpuGradient)" />}
 
         {/* Line */}
         {linePath && (
@@ -248,15 +252,7 @@ export function CpuUsageGraph({
           if (idx !== dataPoints.length - 1) return null;
 
           return (
-            <circle
-              key={idx}
-              cx={x}
-              cy={y}
-              r="3"
-              fill="#0d6efd"
-              stroke="white"
-              strokeWidth="1.5"
-            />
+            <circle key={idx} cx={x} cy={y} r="3" fill="#0d6efd" stroke="white" strokeWidth="1.5" />
           );
         })}
 
@@ -277,17 +273,17 @@ export function CpuUsageGraph({
       {/* Centered CPU percentage overlay */}
       <div
         style={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          fontSize: '2rem',
-          fontWeight: 'bold',
-          color: 'rgba(255, 255, 255, 0.7)',
-          pointerEvents: 'none',
-          userSelect: 'none',
-          textAlign: 'center',
-          lineHeight: '1.2'
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          fontSize: "2rem",
+          fontWeight: "bold",
+          color: "rgba(255, 255, 255, 0.7)",
+          pointerEvents: "none",
+          userSelect: "none",
+          textAlign: "center",
+          lineHeight: "1.2",
         }}
       >
         CPU &nbsp;

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

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react';
-import { TrustLevel } from '@peers-app/peers-sdk';
-import { LoadingIndicator } from '../../components/loading-indicator';
-import { TrustLevelBadge } from '../../components/trust-level-badge';
+import { 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";
 
 /** Format bytes to human-readable string (KB, MB, GB) */
 function formatBytes(bytes: number): string {
@@ -13,7 +14,7 @@ function formatBytes(bytes: number): string {
 
 /** Format transfer rate to human-readable string (KB/s or MB/s) */
 function formatRate(mbps: number | undefined): string {
-  if (mbps === undefined || mbps === 0) return '0 KB/s';
+  if (mbps === undefined || mbps === 0) return "0 KB/s";
   // Show KB/s if less than 0.1 MB/s (100 KB/s)
   if (mbps < 0.1) {
     const kbps = mbps * 1024;
@@ -29,14 +30,14 @@ interface IDeviceDetails {
   userName?: string;
   deviceName?: string;
   trustLevel: number;
-  connectionState: 'connected' | 'syncing' | 'idle';
+  connectionState: "connected" | "syncing" | "idle";
   sharedGroups: string[];
-  roles: { [groupId: string]: any };
-  pathType: 'direct' | 'indirect' | 'unknown';
+  roles: Record<string, unknown>;
+  pathType: "direct" | "indirect" | "unknown";
   throughDeviceIds?: string[];
   networkInfo?: {
     deviceId: string;
-    connections: any[];
+    connections: Array<{ deviceId: string; userId: string }>;
     preferredDeviceIds: string[];
     connectionSlotsAvailable: number;
     cpuPercent: number;
@@ -67,15 +68,18 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
   const [loading, setLoading] = useState(true);
   const [notFound, setNotFound] = useState(false);
 
-  const loadData = async () => {
+  const loadData = useCallback(async () => {
     try {
-      const api = (window as any).electronAPI?.networkViewer;
+      const api = getNetworkViewerApi();
       if (!api) {
-        console.warn('Network Viewer API not available');
+        console.warn("Network Viewer API not available");
         return;
       }
 
-      const deviceData = await api.getDeviceDetails(deviceId);
+      const deviceData = (await api.getDeviceDetails(deviceId)) as
+        | IDeviceDetails
+        | null
+        | undefined;
 
       if (!deviceData) {
         setNotFound(true);
@@ -84,20 +88,20 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
         setNotFound(false);
       }
     } catch (error) {
-      console.error('Error loading device details:', error);
+      console.error("Error loading device details:", error);
       setNotFound(true);
     } finally {
       setLoading(false);
     }
-  };
+  }, [deviceId]);
 
   const handleDisconnect = async () => {
-    if (!confirm('Are you sure you want to disconnect from this device?')) {
+    if (!confirm("Are you sure you want to disconnect from this device?")) {
       return;
     }
 
     try {
-      const api = (window as any).electronAPI?.networkViewer;
+      const api = getNetworkViewerApi();
       if (api && deviceId) {
         await api.disconnectDevice(deviceId);
         if (onDisconnect) {
@@ -106,7 +110,7 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
         onClose();
       }
     } catch (error) {
-      console.error('Error disconnecting device:', error);
+      console.error("Error disconnecting device:", error);
     }
   };
 
@@ -115,24 +119,30 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
     // Auto-refresh every 5 seconds
     const interval = setInterval(loadData, 5000);
     return () => clearInterval(interval);
-  }, [deviceId]);
+  }, [loadData]);
 
   return (
     <div
       className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-start justify-content-center"
-      style={{ backgroundColor: 'rgba(0,0,0,0.5)', zIndex: 1050, overflowY: 'auto', paddingTop: '2rem', paddingBottom: '2rem' }}
+      style={{
+        backgroundColor: "rgba(0,0,0,0.5)",
+        zIndex: 1050,
+        overflowY: "auto",
+        paddingTop: "2rem",
+        paddingBottom: "2rem",
+      }}
       onClick={onClose}
     >
       <div
         className="card"
-        style={{ maxWidth: '900px', width: '90%', maxHeight: '90vh' }}
+        style={{ maxWidth: "900px", width: "90%", maxHeight: "90vh" }}
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
         <div className="card-header d-flex justify-content-between align-items-center">
           <div>
             <h5 className="mb-0">
-              {loading ? 'Loading...' : device?.userName || device?.userId || 'Device Details'}
+              {loading ? "Loading..." : device?.userName || device?.userId || "Device Details"}
             </h5>
             {device?.userName && (
               <small className="text-muted">
@@ -142,10 +152,7 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
           </div>
           <div>
             {device && (
-              <button
-                className="btn btn-sm btn-danger me-2"
-                onClick={handleDisconnect}
-              >
+              <button className="btn btn-sm btn-danger me-2" onClick={handleDisconnect}>
                 <i className="bi bi-x-circle"></i> Disconnect
               </button>
             )}
@@ -154,7 +161,7 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
         </div>
 
         {/* Body */}
-        <div className="card-body" style={{ overflowY: 'auto', maxHeight: 'calc(90vh - 120px)' }}>
+        <div className="card-body" style={{ overflowY: "auto", maxHeight: "calc(90vh - 120px)" }}>
           {loading && <LoadingIndicator />}
 
           {!loading && (notFound || !device) && (
@@ -195,9 +202,7 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
                     <strong>Path Type:</strong>
                     <br />
                     <span
-                      className={`badge bg-${
-                        device.pathType === 'direct' ? 'success' : 'info'
-                      }`}
+                      className={`badge bg-${device.pathType === "direct" ? "success" : "info"}`}
                     >
                       {device.pathType}
                     </span>
@@ -206,9 +211,7 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
                     <div className="col-md-12 mb-3">
                       <strong>Path:</strong>
                       <br />
-                      <small className="text-muted">
-                        {device.throughDeviceIds.join(' → ')}
-                      </small>
+                      <small className="text-muted">{device.throughDeviceIds.join(" → ")}</small>
                     </div>
                   )}
                 </div>
@@ -221,16 +224,12 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
                   <div className="col-md-6 mb-3">
                     <strong>Send Rate:</strong>
                     <br />
-                    <span className="text-success">
-                      ↑ {formatRate(device.sendRateMBps)}
-                    </span>
+                    <span className="text-success">↑ {formatRate(device.sendRateMBps)}</span>
                   </div>
                   <div className="col-md-6 mb-3">
                     <strong>Receive Rate:</strong>
                     <br />
-                    <span className="text-primary">
-                      ↓ {formatRate(device.receiveRateMBps)}
-                    </span>
+                    <span className="text-primary">↓ {formatRate(device.receiveRateMBps)}</span>
                   </div>
                   <div className="col-md-6 mb-3">
                     <strong>Total Sent:</strong>
@@ -269,19 +268,15 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
                               <td>
                                 <code className="text-muted small">{groupId}</code>
                               </td>
-                              <td>{role || 'N/A'}</td>
+                              <td>{role != null ? String(role) : "N/A"}</td>
                               <td>
                                 {syncStats ? (
                                   <>
                                     {syncStats.isPreferred && (
-                                      <span className="badge bg-primary me-2">
-                                        Preferred
-                                      </span>
+                                      <span className="badge bg-primary me-2">Preferred</span>
                                     )}
                                     <small className="text-muted">
-                                      {new Date(
-                                        syncStats.lastSyncTime
-                                      ).toLocaleString()}
+                                      {new Date(syncStats.lastSyncTime).toLocaleString()}
                                     </small>
                                   </>
                                 ) : (
@@ -305,23 +300,17 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
                     <div className="col-md-3 mb-3">
                       <strong>CPU Usage:</strong>
                       <br />
-                      <span className="h5">
-                        {device.networkInfo.cpuPercent.toFixed(1)}%
-                      </span>
+                      <span className="h5">{device.networkInfo.cpuPercent.toFixed(1)}%</span>
                     </div>
                     <div className="col-md-3 mb-3">
                       <strong>Memory Usage:</strong>
                       <br />
-                      <span className="h5">
-                        {device.networkInfo.memPercent.toFixed(1)}%
-                      </span>
+                      <span className="h5">{device.networkInfo.memPercent.toFixed(1)}%</span>
                     </div>
                     <div className="col-md-3 mb-3">
                       <strong>Connection Slots:</strong>
                       <br />
-                      <span className="h5">
-                        {device.networkInfo.connectionSlotsAvailable}
-                      </span>
+                      <span className="h5">{device.networkInfo.connectionSlotsAvailable}</span>
                     </div>
                     <div className="col-md-3 mb-3">
                       <strong>Total Connections:</strong>
@@ -345,9 +334,7 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
 
                   {device.networkInfo.connections.length > 0 && (
                     <div>
-                      <strong>
-                        Remote Connections ({device.networkInfo.connections.length}):
-                      </strong>
+                      <strong>Remote Connections ({device.networkInfo.connections.length}):</strong>
                       <div className="table-responsive mt-2">
                         <table className="table table-sm table-hover">
                           <thead>
@@ -357,7 +344,7 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
                             </tr>
                           </thead>
                           <tbody>
-                            {device.networkInfo.connections.map((conn: any, idx: number) => (
+                            {device.networkInfo.connections.map((conn, idx: number) => (
                               <tr key={idx}>
                                 <td>
                                   <code className="text-muted small">{conn.deviceId}</code>