@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/screens/network-viewer/network-viewer.d.ts

@@ -1,2 +1 @@
-import React from 'react';
-export declare function NetworkViewerList(): React.JSX.Element;
+export declare function NetworkViewerList(): import("react/jsx-runtime").JSX.Element;

package/dist/screens/network-viewer/network-viewer.js

@@ -1,49 +1,18 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NetworkViewerList = NetworkViewerList;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
 const loading_indicator_1 = require("../../components/loading-indicator");
 const trust_level_badge_1 = require("../../components/trust-level-badge");
-const ui_loader_1 = require("../../ui-router/ui-loader");
 const globals_1 = require("../../globals");
+const ui_loader_1 = require("../../ui-router/ui-loader");
+const connection_troubleshooter_1 = require("./connection-troubleshooter");
 const device_details_modal_1 = require("./device-details-modal");
 const group_details_modal_1 = require("./group-details-modal");
+const network_viewer_ipc_1 = require("./network-viewer-ipc");
 const usage_graph_1 = require("./usage-graph");
-const connection_troubleshooter_1 = require("./connection-troubleshooter");
 /** Format bytes to human-readable string (KB, MB, GB) */
 function formatBytes(bytes) {
     if (bytes < 1024)
@@ -57,7 +26,7 @@ function formatBytes(bytes) {
 /** Format transfer rate to human-readable string (KB/s or MB/s) */
 function formatRate(mbps) {
     if (mbps === undefined || mbps === 0)
-        return '0 KB/s';
+        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;
@@ -76,20 +45,20 @@ function NetworkViewerList() {
     const [selectedGroupId, setSelectedGroupId] = (0, react_1.useState)(null);
     const [connecting, setConnecting] = (0, react_1.useState)(new Set());
     const [showTroubleshooter, setShowTroubleshooter] = (0, react_1.useState)(false);
-    const loadData = async () => {
+    const loadData = (0, react_1.useCallback)(async () => {
         try {
-            if (!globals_1.isDesktop)
+            if (!(0, globals_1.isDesktop)())
                 return;
-            const api = window.electronAPI?.networkViewer;
+            const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
             if (!api) {
-                console.warn('Network Viewer API not available');
+                console.warn("Network Viewer API not available");
                 return;
             }
             const [overviewData, connectionsData, groupSyncData, disconnectedData] = await Promise.all([
                 api.getOverview(),
                 api.getConnections(),
                 api.getGroupSyncStatus(),
-                api.getDisconnectedDevices()
+                api.getDisconnectedDevices(),
             ]);
             setOverview(overviewData);
             setConnections(connectionsData);
@@ -97,41 +66,41 @@ function NetworkViewerList() {
             setDisconnectedDevices(disconnectedData);
         }
         catch (error) {
-            console.error('Error loading network data:', error);
+            console.error("Error loading network data:", error);
         }
         finally {
             setLoading(false);
         }
-    };
+    }, []);
     const handleRefresh = async () => {
         setRefreshing(true);
         try {
-            const api = window.electronAPI?.networkViewer;
+            const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
             if (api) {
                 await api.refreshNetworkInfo();
                 await loadData();
             }
         }
         catch (error) {
-            console.error('Error refreshing network info:', error);
+            console.error("Error refreshing network info:", error);
         }
         finally {
             setRefreshing(false);
         }
     };
     const handleDisconnect = async (deviceId) => {
-        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.electronAPI?.networkViewer;
+            const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
             if (api) {
                 await api.disconnectDevice(deviceId);
                 await loadData();
             }
         }
         catch (error) {
-            console.error('Error disconnecting device:', error);
+            console.error("Error disconnecting device:", error);
         }
     };
     const handleViewDetails = (deviceId) => {
@@ -139,9 +108,9 @@ function NetworkViewerList() {
     };
     const handleConnectToDevice = async (deviceId) => {
         try {
-            const api = window.electronAPI?.networkViewer;
+            const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
             if (api) {
-                setConnecting(prev => new Set(prev).add(deviceId));
+                setConnecting((prev) => new Set(prev).add(deviceId));
                 const result = await api.connectToDevice(deviceId);
                 if (result.success) {
                     // Refresh data to see if connection was established
@@ -153,11 +122,11 @@ function NetworkViewerList() {
             }
         }
         catch (error) {
-            console.error('Error connecting to device:', error);
-            alert('Error connecting to device');
+            console.error("Error connecting to device:", error);
+            alert("Error connecting to device");
         }
         finally {
-            setConnecting(prev => {
+            setConnecting((prev) => {
                 const newSet = new Set(prev);
                 newSet.delete(deviceId);
                 return newSet;
@@ -166,7 +135,7 @@ function NetworkViewerList() {
     };
     const handleDeleteDevice = async (deviceId) => {
         try {
-            const api = window.electronAPI?.networkViewer;
+            const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
             if (api) {
                 const result = await api.deleteDevice(deviceId);
                 if (result.success) {
@@ -179,8 +148,8 @@ function NetworkViewerList() {
             }
         }
         catch (error) {
-            console.error('Error deleting device:', error);
-            alert('Error deleting device');
+            console.error("Error deleting device:", error);
+            alert("Error deleting device");
         }
     };
     (0, react_1.useEffect)(() => {
@@ -188,255 +157,81 @@ function NetworkViewerList() {
         // Auto-refresh every 5 seconds
         const interval = setInterval(loadData, 5000);
         return () => clearInterval(interval);
-    }, []);
+    }, [loadData]);
     if (loading) {
-        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+        return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
     }
-    if (!globals_1.isDesktop) {
-        return (react_1.default.createElement("div", { className: "container-fluid p-4" },
-            react_1.default.createElement("div", { className: "alert alert-info" }, "Network Viewer is only available in the desktop application.")));
+    if (!(0, globals_1.isDesktop)()) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid p-4", children: (0, jsx_runtime_1.jsx)("div", { className: "alert alert-info", children: "Network Viewer is only available in the desktop application." }) }));
     }
     if (!overview) {
-        return (react_1.default.createElement("div", { className: "container-fluid p-4" },
-            react_1.default.createElement("div", { className: "alert alert-warning" }, "Unable to load network information.")));
+        return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid p-4", children: (0, jsx_runtime_1.jsx)("div", { className: "alert alert-warning", children: "Unable to load network information." }) }));
     }
     if (showTroubleshooter) {
-        return react_1.default.createElement(connection_troubleshooter_1.ConnectionTroubleshooter, { onBack: () => setShowTroubleshooter(false) });
+        return (0, jsx_runtime_1.jsx)(connection_troubleshooter_1.ConnectionTroubleshooter, { onBack: () => setShowTroubleshooter(false) });
     }
-    return (react_1.default.createElement("div", { className: "container-fluid p-4" },
-        react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center mb-4" },
-            react_1.default.createElement("h2", null, "Network Viewer"),
-            react_1.default.createElement("div", { className: "d-flex gap-2" },
-                react_1.default.createElement("button", { className: "btn btn-sm btn-outline-warning", onClick: () => setShowTroubleshooter(true), title: "Run connection diagnostics" },
-                    react_1.default.createElement("i", { className: "bi bi-stethoscope me-1" }),
-                    "Troubleshoot"),
-                react_1.default.createElement("button", { className: "btn btn-sm btn-primary", onClick: handleRefresh, disabled: refreshing },
-                    react_1.default.createElement("i", { className: `bi bi-arrow-clockwise ${refreshing ? 'spin' : ''}` }),
-                    refreshing ? ' Refreshing...' : ' Refresh'))),
-        react_1.default.createElement("div", { className: "card mb-2" },
-            react_1.default.createElement("div", { className: "card-body" },
-                react_1.default.createElement("h5", { className: "card-title" }, "Local Device"),
-                react_1.default.createElement("div", { className: "row" },
-                    react_1.default.createElement("div", { className: "col-md-6" },
-                        react_1.default.createElement("strong", null, "Device ID:"),
-                        ' ',
-                        react_1.default.createElement("code", { className: "text-muted small" }, overview.localDeviceId)),
-                    react_1.default.createElement("div", { className: "col-md-6" },
-                        react_1.default.createElement("strong", null, "User ID:"),
-                        ' ',
-                        react_1.default.createElement("code", { className: "text-muted small" }, overview.localUserId))))),
-        react_1.default.createElement("div", { className: "row mb-4" },
-            react_1.default.createElement("div", { className: "col-md-4" },
-                react_1.default.createElement("div", { className: "card", style: { height: "100%" } },
-                    react_1.default.createElement("div", { className: "card-body p-2" },
-                        react_1.default.createElement(usage_graph_1.UsageGraph, { label: "Connections", fetchUsage: async () => {
-                                const api = window.electronAPI?.networkViewer;
-                                if (!api)
-                                    return 0;
-                                const data = await api.getOverview();
-                                return data.totalConnections;
-                            }, durationMinutes: 5, updateInterval: 5000, color: "rgba(111, 66, 193, 1)", colorZones: [
-                                { maxValue: 1, color: 'rgba(220, 53, 69, 1)' },
-                                { maxValue: 2, color: 'rgba(255, 193, 7, 1)' },
-                                { maxValue: overview?.maxConnections || 30, color: 'rgba(111, 66, 193, 1)' },
-                            ], minValue: 0, maxValue: overview?.maxConnections || 30, formatOverlayText: (value) => `Connections: ${Math.round(value)}` })))),
-            react_1.default.createElement("div", { className: "col-md-4" },
-                react_1.default.createElement("div", { className: "card", style: { height: "100%" } },
-                    react_1.default.createElement("div", { className: "card-body p-2" },
-                        react_1.default.createElement(usage_graph_1.UsageGraph, { label: "CPU", fetchUsage: async () => {
-                                const api = window.electronAPI?.networkViewer;
-                                if (!api)
-                                    return 0;
-                                const data = await api.getOverview();
-                                return data.cpuPercent;
-                            }, durationMinutes: 5, updateInterval: 5000, color: "rgba(13, 110, 253, 1)", colorZones: [
-                                { maxValue: 60, color: 'rgba(13, 110, 253, 1)' },
-                                { maxValue: 80, color: 'rgba(255, 193, 7, 1)' },
-                                { maxValue: Infinity, color: 'rgba(220, 53, 69, 1)' }
-                            ] })))),
-            react_1.default.createElement("div", { className: "col-md-4" },
-                react_1.default.createElement("div", { className: "card", style: { height: "100%" } },
-                    react_1.default.createElement("div", { className: "card-body p-2" },
-                        react_1.default.createElement(usage_graph_1.UsageGraph, { label: "Memory", fetchUsage: async () => {
-                                const api = window.electronAPI?.networkViewer;
-                                if (!api)
-                                    return 0;
-                                const data = await api.getOverview();
-                                return data.memPercent;
-                            }, durationMinutes: 5, updateInterval: 5000, color: "rgba(25, 135, 84, 1)", colorZones: [
-                                { maxValue: 60, color: 'rgba(25, 135, 84, 1)' },
-                                { maxValue: 80, color: 'rgba(255, 193, 7, 1)' },
-                                { maxValue: Infinity, color: 'rgba(220, 53, 69, 1)' }
-                            ] }))))),
-        react_1.default.createElement("div", { className: "card mb-4" },
-            react_1.default.createElement("div", { className: "card-body" },
-                react_1.default.createElement("h5", { className: "card-title" }, "Active Connections"),
-                connections.length === 0 ? (react_1.default.createElement("p", { className: "text-muted" }, "No active connections")) : (react_1.default.createElement("div", { className: "table-responsive" },
-                    react_1.default.createElement("table", { className: "table table-hover" },
-                        react_1.default.createElement("thead", null,
-                            react_1.default.createElement("tr", null,
-                                react_1.default.createElement("th", null, "User"),
-                                react_1.default.createElement("th", null, "User Trust"),
-                                react_1.default.createElement("th", null, "Device Trust"),
-                                react_1.default.createElement("th", null, "Device"),
-                                react_1.default.createElement("th", null, "Handshake"),
-                                react_1.default.createElement("th", null, "Connection Address"),
-                                react_1.default.createElement("th", null, "Shared Groups"),
-                                react_1.default.createElement("th", null, "Latency"),
-                                react_1.default.createElement("th", null, "Error Rate"),
-                                react_1.default.createElement("th", null, "Throughput"),
-                                react_1.default.createElement("th", null, "Actions"))),
-                        react_1.default.createElement("tbody", null, connections.map(conn => {
-                            return (react_1.default.createElement("tr", { key: conn.deviceId },
-                                react_1.default.createElement("td", null,
-                                    conn.userName || conn.userId,
-                                    !conn.userName && (react_1.default.createElement(react_1.default.Fragment, null,
-                                        react_1.default.createElement("br", null),
-                                        react_1.default.createElement("small", { className: "text-muted" }, conn.userId)))),
-                                react_1.default.createElement("td", null,
-                                    react_1.default.createElement(trust_level_badge_1.TrustLevelBadge, { level: conn.userTrustLevel || peers_sdk_1.TrustLevel.Unknown })),
-                                react_1.default.createElement("td", null,
-                                    react_1.default.createElement(trust_level_badge_1.TrustLevelBadge, { level: conn.deviceTrustLevel || peers_sdk_1.TrustLevel.Unknown })),
-                                react_1.default.createElement("td", null, conn.deviceName ? (react_1.default.createElement(react_1.default.Fragment, null,
-                                    react_1.default.createElement("span", { className: "small" }, conn.deviceName),
-                                    react_1.default.createElement("br", null),
-                                    react_1.default.createElement("code", { className: "text-muted small", style: { fontSize: '.7em' } }, conn.deviceId))) : (react_1.default.createElement("code", { className: "text-muted small" }, conn.deviceId))),
-                                react_1.default.createElement("td", null,
-                                    react_1.default.createElement("span", { className: `badge bg-${conn.isServer ? 'secondary' : 'primary'}` }, conn.isServer ? 'Receiver' : 'Initiator')),
-                                react_1.default.createElement("td", null, conn.connectionAddress ? (react_1.default.createElement("small", { className: "text-muted" }, conn.connectionAddress)) : (react_1.default.createElement("span", { className: "text-muted" }, "-"))),
-                                react_1.default.createElement("td", null, conn.sharedGroups.length),
-                                react_1.default.createElement("td", null,
-                                    react_1.default.createElement("span", { className: `badge bg-${conn.latencyMs < 200 ? 'success' :
-                                            conn.latencyMs < 600 ? 'warning' : 'danger'}` },
-                                        Math.round(conn.latencyMs),
-                                        "ms")),
-                                react_1.default.createElement("td", null,
-                                    react_1.default.createElement("span", { className: `badge bg-${conn.errorRate < 0.05 ? 'success' :
-                                            conn.errorRate < 0.2 ? 'warning' : 'danger'}` },
-                                        (conn.errorRate * 100).toFixed(1),
-                                        "%")),
-                                react_1.default.createElement("td", null,
-                                    react_1.default.createElement("small", null,
-                                        react_1.default.createElement("span", { className: "text-success" },
-                                            "\u2191",
-                                            formatRate(conn.sendRateMBps)),
-                                        ' / ',
-                                        react_1.default.createElement("span", { className: "text-primary" },
-                                            "\u2193",
-                                            formatRate(conn.receiveRateMBps))),
-                                    react_1.default.createElement("br", null),
-                                    react_1.default.createElement("small", { className: "text-muted" },
-                                        formatBytes(conn.bytesSent || 0),
-                                        " / ",
-                                        formatBytes(conn.bytesReceived || 0))),
-                                react_1.default.createElement("td", null,
-                                    react_1.default.createElement("button", { className: "btn btn-sm btn-outline-primary me-2", onClick: () => handleViewDetails(conn.deviceId), title: "View Details" },
-                                        react_1.default.createElement("i", { className: "bi bi-info-circle" })),
-                                    react_1.default.createElement("button", { className: "btn btn-sm btn-outline-danger", onClick: () => handleDisconnect(conn.deviceId), title: "Disconnect" },
-                                        react_1.default.createElement("i", { className: "bi bi-x-circle" })))));
-                        }))))))),
-        react_1.default.createElement("div", { className: "card mb-4" },
-            react_1.default.createElement("div", { className: "card-body" },
-                react_1.default.createElement("h5", { className: "card-title" }, "Group Sync Status"),
-                groupSyncInfo.length === 0 ? (react_1.default.createElement("p", { className: "text-muted" }, "No groups found")) : (react_1.default.createElement("div", { className: "table-responsive" },
-                    react_1.default.createElement("table", { className: "table table-hover" },
-                        react_1.default.createElement("thead", null,
-                            react_1.default.createElement("tr", null,
-                                react_1.default.createElement("th", null, "Group Name"),
-                                react_1.default.createElement("th", null, "Connected Devices"),
-                                react_1.default.createElement("th", null, "Preferred Devices"),
-                                react_1.default.createElement("th", null, "Last Sync"),
-                                react_1.default.createElement("th", null, "Total Members"))),
-                        react_1.default.createElement("tbody", null, groupSyncInfo.map(group => (react_1.default.createElement("tr", { key: group.groupId },
-                            react_1.default.createElement("td", null,
-                                react_1.default.createElement("strong", null, group.groupName),
-                                react_1.default.createElement("br", null),
-                                react_1.default.createElement("code", { className: "text-muted small" }, group.groupId)),
-                            react_1.default.createElement("td", null, group.connectedDevices.length > 0 ? (react_1.default.createElement("div", null,
-                                react_1.default.createElement("span", { className: "badge bg-success mb-1" },
-                                    group.connectedDevices.length,
-                                    " device",
-                                    group.connectedDevices.length !== 1 ? 's' : ''),
-                                react_1.default.createElement("div", { className: "mt-2" }, group.connectedDevices.map((device, idx) => (react_1.default.createElement("div", { key: device.deviceId, className: "mb-2" },
-                                    react_1.default.createElement("small", null,
-                                        react_1.default.createElement("code", { className: "text-muted" }, device.deviceId),
-                                        device.closed && react_1.default.createElement("span", { className: "badge bg-danger ms-2" }, "Closed")),
-                                    react_1.default.createElement("div", { className: "d-flex gap-2 mt-1" },
-                                        react_1.default.createElement("span", { className: `badge bg-${device.latencyMs < 200 ? 'success' :
-                                                device.latencyMs < 600 ? 'warning' : 'danger'}` },
-                                            Math.round(device.latencyMs),
-                                            "ms"),
-                                        react_1.default.createElement("span", { className: `badge bg-${device.errorRate < 0.05 ? 'success' :
-                                                device.errorRate < 0.2 ? 'warning' : 'danger'}` },
-                                            (device.errorRate * 100).toFixed(1),
-                                            "% errors"),
-                                        react_1.default.createElement("span", { className: "badge bg-info" },
-                                            "Last: ",
-                                            new Date(device.timestampLastApplied).toLocaleString())),
-                                    idx < group.connectedDevices.length - 1 && react_1.default.createElement("hr", { className: "my-2" }))))))) : (react_1.default.createElement("span", { className: "text-muted" }, "No connected devices"))),
-                            react_1.default.createElement("td", null, group.preferredDeviceIds.length > 0 ? (react_1.default.createElement("div", null,
-                                react_1.default.createElement("span", { className: "badge bg-primary mb-2" },
-                                    group.preferredDeviceIds.length,
-                                    " preferred"),
-                                react_1.default.createElement("div", null, group.preferredDeviceIds.map(deviceId => (react_1.default.createElement("div", { key: deviceId },
-                                    react_1.default.createElement("small", null,
-                                        react_1.default.createElement("code", { className: "text-muted" }, deviceId)))))))) : (react_1.default.createElement("span", { className: "text-muted" }, "None"))),
-                            react_1.default.createElement("td", null,
-                                react_1.default.createElement("small", null, group.lastSyncTimestamp > 0
-                                    ? new Date(group.lastSyncTimestamp).toLocaleString()
-                                    : 'Never')),
-                            react_1.default.createElement("td", null,
-                                react_1.default.createElement("button", { className: "btn btn-sm btn-outline-primary", onClick: () => setSelectedGroupId(group.groupId), title: "View Group Details" }, group.totalMembers))))))))))),
-        react_1.default.createElement("div", { className: "card" },
-            react_1.default.createElement("div", { className: "card-body" },
-                react_1.default.createElement("h5", { className: "card-title" }, "Disconnected Devices"),
-                disconnectedDevices.length === 0 ? (react_1.default.createElement("p", { className: "text-muted" }, "No known disconnected devices")) : (react_1.default.createElement("div", { className: "table-responsive" },
-                    react_1.default.createElement("table", { className: "table table-hover" },
-                        react_1.default.createElement("thead", null,
-                            react_1.default.createElement("tr", null,
-                                react_1.default.createElement("th", null, "User"),
-                                react_1.default.createElement("th", null, "Trust Level"),
-                                react_1.default.createElement("th", null, "Device ID"),
-                                react_1.default.createElement("th", null, "Device Name"),
-                                react_1.default.createElement("th", null, "First Seen"),
-                                react_1.default.createElement("th", null, "Last Seen"),
-                                react_1.default.createElement("th", null, "Actions"))),
-                        react_1.default.createElement("tbody", null, disconnectedDevices
-                            .sort((a, b) => new Date(b.lastSeen).getTime() - new Date(a.lastSeen).getTime())
-                            .map(device => (react_1.default.createElement("tr", { key: device.deviceId },
-                            react_1.default.createElement("td", null,
-                                device.userName || device.userId,
-                                !device.userName && (react_1.default.createElement(react_1.default.Fragment, null,
-                                    react_1.default.createElement("br", null),
-                                    react_1.default.createElement("small", { className: "text-muted" }, device.userId)))),
-                            react_1.default.createElement("td", null,
-                                react_1.default.createElement(trust_level_badge_1.TrustLevelBadge, { level: device.trustLevel || peers_sdk_1.TrustLevel.Unknown })),
-                            react_1.default.createElement("td", null,
-                                react_1.default.createElement("code", { className: "text-muted small" }, device.deviceId)),
-                            react_1.default.createElement("td", null, device.name || react_1.default.createElement("span", { className: "text-muted" }, "-")),
-                            react_1.default.createElement("td", null,
-                                react_1.default.createElement("small", null, new Date(device.firstSeen).toLocaleString())),
-                            react_1.default.createElement("td", null,
-                                react_1.default.createElement("small", null, new Date(device.lastSeen).toLocaleString())),
-                            react_1.default.createElement("td", null,
-                                react_1.default.createElement("button", { className: "btn btn-sm btn-outline-success me-2", onClick: () => handleConnectToDevice(device.deviceId), disabled: connecting.has(device.deviceId), title: "Connect to device" }, connecting.has(device.deviceId) ? (react_1.default.createElement(react_1.default.Fragment, null,
-                                    react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }),
-                                    "Connecting...")) : (react_1.default.createElement(react_1.default.Fragment, null,
-                                    react_1.default.createElement("i", { className: "bi bi-arrow-right-circle" }),
-                                    " Connect"))),
-                                react_1.default.createElement("button", { className: "btn btn-sm btn-outline-danger", onClick: () => handleDeleteDevice(device.deviceId), title: "Forget this device" },
-                                    react_1.default.createElement("i", { className: "bi bi-trash" })))))))))))),
-        selectedDeviceId && (react_1.default.createElement(device_details_modal_1.DeviceDetailsModal, { deviceId: selectedDeviceId, onClose: () => setSelectedDeviceId(null), onDisconnect: loadData })),
-        selectedGroupId && (react_1.default.createElement(group_details_modal_1.GroupDetailsModal, { groupId: selectedGroupId, onClose: () => setSelectedGroupId(null) }))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-4", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Network Viewer" }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-warning", onClick: () => setShowTroubleshooter(true), title: "Run connection diagnostics", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-stethoscope me-1" }), "Troubleshoot"] }), (0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-primary", onClick: handleRefresh, disabled: refreshing, children: [(0, jsx_runtime_1.jsx)("i", { className: `bi bi-arrow-clockwise ${refreshing ? "spin" : ""}` }), refreshing ? " Refreshing..." : " Refresh"] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "card mb-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Local Device" }), (0, jsx_runtime_1.jsxs)("div", { className: "row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-6", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Device ID:" }), " ", (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: overview.localDeviceId })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6", children: [(0, jsx_runtime_1.jsx)("strong", { children: "User ID:" }), " ", (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: overview.localUserId })] })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "row mb-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-md-4", children: (0, jsx_runtime_1.jsx)("div", { className: "card", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card-body p-2", children: (0, jsx_runtime_1.jsx)(usage_graph_1.UsageGraph, { label: "Connections", fetchUsage: async () => {
+                                        const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
+                                        if (!api)
+                                            return 0;
+                                        const data = (await api.getOverview());
+                                        return data.totalConnections;
+                                    }, durationMinutes: 5, updateInterval: 5000, color: "rgba(111, 66, 193, 1)", colorZones: [
+                                        { maxValue: 1, color: "rgba(220, 53, 69, 1)" },
+                                        { maxValue: 2, color: "rgba(255, 193, 7, 1)" },
+                                        { maxValue: overview?.maxConnections || 30, color: "rgba(111, 66, 193, 1)" },
+                                    ], minValue: 0, maxValue: overview?.maxConnections || 30, formatOverlayText: (value) => `Connections: ${Math.round(value)}` }) }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "col-md-4", children: (0, jsx_runtime_1.jsx)("div", { className: "card", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card-body p-2", children: (0, jsx_runtime_1.jsx)(usage_graph_1.UsageGraph, { label: "CPU", fetchUsage: async () => {
+                                        const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
+                                        if (!api)
+                                            return 0;
+                                        const data = (await api.getOverview());
+                                        return data.cpuPercent;
+                                    }, durationMinutes: 5, updateInterval: 5000, color: "rgba(13, 110, 253, 1)", colorZones: [
+                                        { maxValue: 60, color: "rgba(13, 110, 253, 1)" },
+                                        { maxValue: 80, color: "rgba(255, 193, 7, 1)" },
+                                        { maxValue: Infinity, color: "rgba(220, 53, 69, 1)" },
+                                    ] }) }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "col-md-4", children: (0, jsx_runtime_1.jsx)("div", { className: "card", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card-body p-2", children: (0, jsx_runtime_1.jsx)(usage_graph_1.UsageGraph, { label: "Memory", fetchUsage: async () => {
+                                        const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
+                                        if (!api)
+                                            return 0;
+                                        const data = (await api.getOverview());
+                                        return data.memPercent;
+                                    }, durationMinutes: 5, updateInterval: 5000, color: "rgba(25, 135, 84, 1)", colorZones: [
+                                        { maxValue: 60, color: "rgba(25, 135, 84, 1)" },
+                                        { maxValue: 80, color: "rgba(255, 193, 7, 1)" },
+                                        { maxValue: Infinity, color: "rgba(220, 53, 69, 1)" },
+                                    ] }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "card mb-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Active Connections" }), connections.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "No active connections" })) : ((0, jsx_runtime_1.jsx)("div", { className: "table-responsive", children: (0, jsx_runtime_1.jsxs)("table", { className: "table table-hover", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "User" }), (0, jsx_runtime_1.jsx)("th", { children: "User Trust" }), (0, jsx_runtime_1.jsx)("th", { children: "Device Trust" }), (0, jsx_runtime_1.jsx)("th", { children: "Device" }), (0, jsx_runtime_1.jsx)("th", { children: "Handshake" }), (0, jsx_runtime_1.jsx)("th", { children: "Connection Address" }), (0, jsx_runtime_1.jsx)("th", { children: "Shared Groups" }), (0, jsx_runtime_1.jsx)("th", { children: "Latency" }), (0, jsx_runtime_1.jsx)("th", { children: "Error Rate" }), (0, jsx_runtime_1.jsx)("th", { children: "Throughput" }), (0, jsx_runtime_1.jsx)("th", { children: "Actions" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: connections.map((conn) => {
+                                            return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsxs)("td", { children: [conn.userName || conn.userId, !conn.userName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: conn.userId })] }))] }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(trust_level_badge_1.TrustLevelBadge, { level: conn.userTrustLevel || peers_sdk_1.TrustLevel.Unknown }) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(trust_level_badge_1.TrustLevelBadge, { level: conn.deviceTrustLevel || peers_sdk_1.TrustLevel.Unknown }) }), (0, jsx_runtime_1.jsx)("td", { children: conn.deviceName ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "small", children: conn.deviceName }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", style: { fontSize: ".7em" }, children: conn.deviceId })] })) : ((0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: conn.deviceId })) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("span", { className: `badge bg-${conn.isServer ? "secondary" : "primary"}`, children: conn.isServer ? "Receiver" : "Initiator" }) }), (0, jsx_runtime_1.jsx)("td", { children: conn.connectionAddress ? ((0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: conn.connectionAddress })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "-" })) }), (0, jsx_runtime_1.jsx)("td", { children: conn.sharedGroups.length }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsxs)("span", { className: `badge bg-${conn.latencyMs < 200
+                                                                ? "success"
+                                                                : conn.latencyMs < 600
+                                                                    ? "warning"
+                                                                    : "danger"}`, children: [Math.round(conn.latencyMs), "ms"] }) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsxs)("span", { className: `badge bg-${conn.errorRate < 0.05
+                                                                ? "success"
+                                                                : conn.errorRate < 0.2
+                                                                    ? "warning"
+                                                                    : "danger"}`, children: [(conn.errorRate * 100).toFixed(1), "%"] }) }), (0, jsx_runtime_1.jsxs)("td", { children: [(0, jsx_runtime_1.jsxs)("small", { children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-success", children: ["\u2191", formatRate(conn.sendRateMBps)] }), " / ", (0, jsx_runtime_1.jsxs)("span", { className: "text-primary", children: ["\u2193", formatRate(conn.receiveRateMBps)] })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("small", { className: "text-muted", children: [formatBytes(conn.bytesSent || 0), " /", " ", formatBytes(conn.bytesReceived || 0)] })] }), (0, jsx_runtime_1.jsxs)("td", { children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-outline-primary me-2", onClick: () => handleViewDetails(conn.deviceId), title: "View Details", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-info-circle" }) }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-outline-danger", onClick: () => handleDisconnect(conn.deviceId), title: "Disconnect", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-x-circle" }) })] })] }, conn.deviceId));
+                                        }) })] }) }))] }) }), (0, jsx_runtime_1.jsx)("div", { className: "card mb-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Group Sync Status" }), groupSyncInfo.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "No groups found" })) : ((0, jsx_runtime_1.jsx)("div", { className: "table-responsive", children: (0, jsx_runtime_1.jsxs)("table", { className: "table table-hover", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Group Name" }), (0, jsx_runtime_1.jsx)("th", { children: "Connected Devices" }), (0, jsx_runtime_1.jsx)("th", { children: "Preferred Devices" }), (0, jsx_runtime_1.jsx)("th", { children: "Last Sync" }), (0, jsx_runtime_1.jsx)("th", { children: "Total Members" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: groupSyncInfo.map((group) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsxs)("td", { children: [(0, jsx_runtime_1.jsx)("strong", { children: group.groupName }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: group.groupId })] }), (0, jsx_runtime_1.jsx)("td", { children: group.connectedDevices.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("span", { className: "badge bg-success mb-1", children: [group.connectedDevices.length, " device", group.connectedDevices.length !== 1 ? "s" : ""] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2", children: group.connectedDevices.map((device, idx) => ((0, jsx_runtime_1.jsxs)("div", { className: "mb-2", children: [(0, jsx_runtime_1.jsxs)("small", { children: [(0, jsx_runtime_1.jsx)("code", { className: "text-muted", children: device.deviceId }), device.closed && ((0, jsx_runtime_1.jsx)("span", { className: "badge bg-danger ms-2", children: "Closed" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 mt-1", children: [(0, jsx_runtime_1.jsxs)("span", { className: `badge bg-${device.latencyMs < 200
+                                                                                        ? "success"
+                                                                                        : device.latencyMs < 600
+                                                                                            ? "warning"
+                                                                                            : "danger"}`, children: [Math.round(device.latencyMs), "ms"] }), (0, jsx_runtime_1.jsxs)("span", { className: `badge bg-${device.errorRate < 0.05
+                                                                                        ? "success"
+                                                                                        : device.errorRate < 0.2
+                                                                                            ? "warning"
+                                                                                            : "danger"}`, children: [(device.errorRate * 100).toFixed(1), "% errors"] }), (0, jsx_runtime_1.jsxs)("span", { className: "badge bg-info", children: ["Last: ", new Date(device.timestampLastApplied).toLocaleString()] })] }), idx < group.connectedDevices.length - 1 && ((0, jsx_runtime_1.jsx)("hr", { className: "my-2" }))] }, device.deviceId))) })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "No connected devices" })) }), (0, jsx_runtime_1.jsx)("td", { children: group.preferredDeviceIds.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("span", { className: "badge bg-primary mb-2", children: [group.preferredDeviceIds.length, " preferred"] }), (0, jsx_runtime_1.jsx)("div", { children: group.preferredDeviceIds.map((deviceId) => ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("small", { children: (0, jsx_runtime_1.jsx)("code", { className: "text-muted", children: deviceId }) }) }, deviceId))) })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "None" })) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("small", { children: group.lastSyncTimestamp > 0
+                                                            ? new Date(group.lastSyncTimestamp).toLocaleString()
+                                                            : "Never" }) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-outline-primary", onClick: () => setSelectedGroupId(group.groupId), title: "View Group Details", children: group.totalMembers }) })] }, group.groupId))) })] }) }))] }) }), (0, jsx_runtime_1.jsx)("div", { className: "card", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Disconnected Devices" }), disconnectedDevices.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "No known disconnected devices" })) : ((0, jsx_runtime_1.jsx)("div", { className: "table-responsive", children: (0, jsx_runtime_1.jsxs)("table", { className: "table table-hover", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "User" }), (0, jsx_runtime_1.jsx)("th", { children: "Trust Level" }), (0, jsx_runtime_1.jsx)("th", { children: "Device ID" }), (0, jsx_runtime_1.jsx)("th", { children: "Device Name" }), (0, jsx_runtime_1.jsx)("th", { children: "First Seen" }), (0, jsx_runtime_1.jsx)("th", { children: "Last Seen" }), (0, jsx_runtime_1.jsx)("th", { children: "Actions" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: disconnectedDevices
+                                            .sort((a, b) => new Date(b.lastSeen).getTime() - new Date(a.lastSeen).getTime())
+                                            .map((device) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsxs)("td", { children: [device.userName || device.userId, !device.userName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: device.userId })] }))] }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(trust_level_badge_1.TrustLevelBadge, { level: device.trustLevel || peers_sdk_1.TrustLevel.Unknown }) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: device.deviceId }) }), (0, jsx_runtime_1.jsx)("td", { children: device.name || (0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "-" }) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("small", { children: new Date(device.firstSeen).toLocaleString() }) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("small", { children: new Date(device.lastSeen).toLocaleString() }) }), (0, jsx_runtime_1.jsxs)("td", { children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-outline-success me-2", onClick: () => handleConnectToDevice(device.deviceId), disabled: connecting.has(device.deviceId), title: "Connect to device", children: connecting.has(device.deviceId) ? ((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" }), "Connecting..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-arrow-right-circle" }), " Connect"] })) }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-outline-danger", onClick: () => handleDeleteDevice(device.deviceId), title: "Forget this device", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-trash" }) })] })] }, device.deviceId))) })] }) }))] }) }), selectedDeviceId && ((0, jsx_runtime_1.jsx)(device_details_modal_1.DeviceDetailsModal, { deviceId: selectedDeviceId, onClose: () => setSelectedDeviceId(null), onDisconnect: loadData })), selectedGroupId && ((0, jsx_runtime_1.jsx)(group_details_modal_1.GroupDetailsModal, { groupId: selectedGroupId, onClose: () => setSelectedGroupId(null) }))] }));
 }
 (0, ui_loader_1.registerInternalPeersUI)({
-    peersUIId: 'network-viewer-list-ui',
+    peersUIId: "network-viewer-list-ui",
     component: NetworkViewerList,
     routes: [
         {
-            isMatch: (_props, context) => context.path === 'network-viewer',
-            uiCategory: 'screen',
-            priority: 2
-        }
-    ]
+            isMatch: (_props, context) => context.path === "network-viewer",
+            uiCategory: "screen",
+            priority: 2,
+        },
+    ],
 });

package/dist/screens/network-viewer/usage-graph.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface IColorZone {
     /**
      * Maximum value for this zone (exclusive). Use Infinity for the last zone.
@@ -57,5 +56,5 @@ interface IUsageGraphProps {
      */
     colorZones?: IColorZone[];
 }
-export declare function UsageGraph({ fetchUsage, label, durationMinutes, updateInterval, minHeight, color, overlayTextColor, minValue, maxValue, formatOverlayText, colorZones }: IUsageGraphProps): React.JSX.Element;
+export declare function UsageGraph({ fetchUsage, label, durationMinutes, updateInterval, minHeight, color, overlayTextColor, minValue, maxValue, formatOverlayText, colorZones, }: IUsageGraphProps): import("react/jsx-runtime").JSX.Element;
 export {};