@peers-app/peers-ui 0.27.3 → 0.27.4

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

@@ -1,708 +0,0 @@
-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 { useObservable } from "../../hooks";
-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 {
-  getNetworkControlConsumer,
-  getNetworkDiagnosticsConsumer,
-  getNetworkViewerPlatformApi,
-} from "./network-viewer-ipc";
-import { networkViewerSection } from "./network-viewer-section";
-import { SyncRecoveryScreen } from "./sync-recovery";
-import { UsageGraph } from "./usage-graph";
-
-/** Format bytes to human-readable string (KB, MB, GB) */
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
-  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
-}
-
-/** 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";
-  // Show KB/s if less than 0.1 MB/s (100 KB/s)
-  if (mbps < 0.1) {
-    const kbps = mbps * 1024;
-    return `${kbps.toFixed(1)} KB/s`;
-  }
-  return `${mbps.toFixed(2)} MB/s`;
-}
-
-/**
- * Network Viewer screen.
- *
- * Shows connections, group sync, and disconnected devices, and hosts the
- * Sync Recovery pane selected from the network status indicator.
- */
-export function NetworkViewerList() {
-  const [overview, setOverview] = useState<INetworkOverview | null>(null);
-  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);
-  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
-  const [connecting, setConnecting] = useState<Set<string>>(new Set());
-  const [showTroubleshooter, setShowTroubleshooter] = useState(false);
-  const [viewerSection] = useObservable(networkViewerSection);
-
-  const loadData = useCallback(async () => {
-    try {
-      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);
-      setConnections(connectionsData);
-      setGroupSyncInfo(groupSyncData);
-      setDisconnectedDevices(disconnectedData);
-    } catch (error) {
-      console.error("Error loading network data:", error);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  const handleRefresh = async () => {
-    setRefreshing(true);
-    try {
-      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);
-    } finally {
-      setRefreshing(false);
-    }
-  };
-
-  const handleDisconnect = async (deviceId: string) => {
-    if (!confirm("Are you sure you want to disconnect from this device?")) {
-      return;
-    }
-
-    try {
-      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);
-    }
-  };
-
-  const handleViewDetails = (deviceId: string) => {
-    setSelectedDeviceId(deviceId);
-  };
-
-  const handleConnectToDevice = async (deviceId: string) => {
-    try {
-      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);
-      alert("Error connecting to device");
-    } finally {
-      setConnecting((prev) => {
-        const newSet = new Set(prev);
-        newSet.delete(deviceId);
-        return newSet;
-      });
-    }
-  };
-
-  const handleDeleteDevice = async (deviceId: string) => {
-    try {
-      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);
-      alert("Error deleting device");
-    }
-  };
-
-  useEffect(() => {
-    loadData();
-    // Auto-refresh every 5 seconds
-    const interval = setInterval(loadData, 5000);
-    return () => clearInterval(interval);
-  }, [loadData]);
-
-  useEffect(() => {
-    if (viewerSection === "sync-recovery") {
-      setShowTroubleshooter(false);
-    }
-  }, [viewerSection]);
-
-  if (viewerSection === "sync-recovery") {
-    return <SyncRecoveryScreen onBack={() => networkViewerSection("main")} />;
-  }
-
-  if (loading) {
-    return <LoadingIndicator />;
-  }
-
-  if (!overview) {
-    return (
-      <div className="container-fluid p-4">
-        <div className="alert alert-warning">Unable to load network information.</div>
-      </div>
-    );
-  }
-
-  if (showTroubleshooter) {
-    return <ConnectionTroubleshooter onBack={() => setShowTroubleshooter(false)} />;
-  }
-
-  return (
-    <div className="container-fluid p-4">
-      <div className="d-flex justify-content-between align-items-center mb-4">
-        <h2>Network Viewer</h2>
-        <div className="d-flex gap-2">
-          {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-outline-secondary"
-            onClick={() => networkViewerSection("sync-recovery")}
-            title="Records that could not be materialized"
-          >
-            Sync recovery
-          </button>
-          <button className="btn btn-sm btn-primary" onClick={handleRefresh} disabled={refreshing}>
-            <i className={`bi bi-arrow-clockwise ${refreshing ? "spin" : ""}`}></i>
-            {refreshing ? " Refreshing..." : " Refresh"}
-          </button>
-        </div>
-      </div>
-
-      {/* Device Identifiers */}
-      <div className="card mb-2">
-        <div className="card-body">
-          <h5 className="card-title">Local Device</h5>
-          <div className="row">
-            <div className="col-md-6">
-              <strong>Device ID:</strong>{" "}
-              <code className="text-muted small">{overview.localDeviceId}</code>
-            </div>
-            <div className="col-md-6">
-              <strong>User ID:</strong>{" "}
-              <code className="text-muted small">{overview.localUserId}</code>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Device info - group count, connection, cpu, memory */}
-      <div className="row mb-4">
-        <div className="col-md-4">
-          <div className="card" style={{ height: "100%" }}>
-            <div className="card-body p-2">
-              <UsageGraph
-                label="Connections"
-                fetchUsage={async () => {
-                  const diagnostics = await getNetworkDiagnosticsConsumer();
-                  const { overview: currentOverview } = await diagnostics.tools.getOverview();
-                  return currentOverview.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)}`}
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="col-md-4">
-          <div className="card" style={{ height: "100%" }}>
-            <div className="card-body p-2">
-              <UsageGraph
-                label="CPU"
-                fetchUsage={async () => {
-                  const diagnostics = await getNetworkDiagnosticsConsumer();
-                  const { overview: currentOverview } = await diagnostics.tools.getOverview();
-                  return currentOverview.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)" },
-                ]}
-              />
-            </div>
-          </div>
-        </div>
-        <div className="col-md-4">
-          <div className="card" style={{ height: "100%" }}>
-            <div className="card-body p-2">
-              <UsageGraph
-                label="Memory"
-                fetchUsage={async () => {
-                  const diagnostics = await getNetworkDiagnosticsConsumer();
-                  const { overview: currentOverview } = await diagnostics.tools.getOverview();
-                  return currentOverview.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)" },
-                ]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Connections List */}
-      <div className="card mb-4">
-        <div className="card-body">
-          <h5 className="card-title">Active Connections</h5>
-          {connections.length === 0 ? (
-            <p className="text-muted">No active connections</p>
-          ) : (
-            <div className="table-responsive">
-              <table className="table table-hover">
-                <thead>
-                  <tr>
-                    <th>User</th>
-                    <th>User Trust</th>
-                    <th>Device Trust</th>
-                    <th>Device</th>
-                    {/* <th>Path Type</th> */}
-                    <th>Handshake</th>
-                    <th>Connection Address</th>
-                    <th>Shared Groups</th>
-                    <th>Latency</th>
-                    <th>Error Rate</th>
-                    <th>Throughput</th>
-                    {/* <th>State</th> */}
-                    <th>Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {connections.map((conn) => {
-                    return (
-                      <tr key={conn.deviceId}>
-                        <td>
-                          {conn.userName || conn.userId}
-                          {!conn.userName && (
-                            <>
-                              <br />
-                              <small className="text-muted">{conn.userId}</small>
-                            </>
-                          )}
-                        </td>
-                        <td>
-                          <TrustLevelBadge level={conn.userTrustLevel || TrustLevel.Unknown} />
-                        </td>
-                        <td>
-                          <TrustLevelBadge level={conn.deviceTrustLevel || TrustLevel.Unknown} />
-                        </td>
-                        <td>
-                          {conn.deviceName ? (
-                            <>
-                              <span className="small">{conn.deviceName}</span>
-                              <br />
-                              <code className="text-muted small" style={{ fontSize: ".7em" }}>
-                                {conn.deviceId}
-                              </code>
-                            </>
-                          ) : (
-                            <code className="text-muted small">{conn.deviceId}</code>
-                          )}
-                        </td>
-                        {/* <td>
-                        <span
-                          className={`badge bg-${
-                            conn.pathType === 'direct' ? 'success' : 'info'
-                          }`}
-                        >
-                          {conn.pathType}
-                        </span>
-                      </td> */}
-                        <td>
-                          <span className={`badge bg-${conn.isServer ? "secondary" : "primary"}`}>
-                            {conn.isServer ? "Receiver" : "Initiator"}
-                          </span>
-                        </td>
-                        <td>
-                          {conn.connectionAddress ? (
-                            <small className="text-muted">{conn.connectionAddress}</small>
-                          ) : (
-                            <span className="text-muted">-</span>
-                          )}
-                        </td>
-                        <td>{conn.sharedGroups.length}</td>
-                        <td>
-                          <span
-                            className={`badge bg-${
-                              conn.latencyMs < 200
-                                ? "success"
-                                : conn.latencyMs < 600
-                                  ? "warning"
-                                  : "danger"
-                            }`}
-                          >
-                            {Math.round(conn.latencyMs)}ms
-                          </span>
-                        </td>
-                        <td>
-                          <span
-                            className={`badge bg-${
-                              conn.errorRate < 0.05
-                                ? "success"
-                                : conn.errorRate < 0.2
-                                  ? "warning"
-                                  : "danger"
-                            }`}
-                          >
-                            {(conn.errorRate * 100).toFixed(1)}%
-                          </span>
-                        </td>
-                        <td>
-                          <small>
-                            <span className="text-success">↑{formatRate(conn.sendRateMBps)}</span>
-                            {" / "}
-                            <span className="text-primary">
-                              ↓{formatRate(conn.receiveRateMBps)}
-                            </span>
-                          </small>
-                          <br />
-                          <small className="text-muted">
-                            {formatBytes(conn.bytesSent || 0)} /{" "}
-                            {formatBytes(conn.bytesReceived || 0)}
-                          </small>
-                        </td>
-                        {/* <td>
-                        <span className="badge bg-success">{conn.connectionState}</span>
-                      </td> */}
-                        <td>
-                          <button
-                            className="btn btn-sm btn-outline-primary me-2"
-                            onClick={() => handleViewDetails(conn.deviceId)}
-                            title="View Details"
-                          >
-                            <i className="bi bi-info-circle"></i>
-                          </button>
-                          <button
-                            className="btn btn-sm btn-outline-danger"
-                            onClick={() => handleDisconnect(conn.deviceId)}
-                            title="Disconnect"
-                          >
-                            <i className="bi bi-x-circle"></i>
-                          </button>
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Group Sync Status */}
-      <div className="card mb-4">
-        <div className="card-body">
-          <h5 className="card-title">Group Sync Status</h5>
-          {groupSyncInfo.length === 0 ? (
-            <p className="text-muted">No groups found</p>
-          ) : (
-            <div className="table-responsive">
-              <table className="table table-hover">
-                <thead>
-                  <tr>
-                    <th>Group Name</th>
-                    <th>Connected Devices</th>
-                    <th>Preferred Devices</th>
-                    <th>Last Sync</th>
-                    <th>Total Members</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {groupSyncInfo.map((group) => (
-                    <tr key={group.groupId}>
-                      <td>
-                        <strong>{group.groupName}</strong>
-                        <br />
-                        <code className="text-muted small">{group.groupId}</code>
-                      </td>
-                      <td>
-                        {group.connectedDevices.length > 0 ? (
-                          <div>
-                            <span className="badge bg-success mb-1">
-                              {group.connectedDevices.length} device
-                              {group.connectedDevices.length !== 1 ? "s" : ""}
-                            </span>
-                            <div className="mt-2">
-                              {group.connectedDevices.map((device, idx) => (
-                                <div key={device.deviceId} className="mb-2">
-                                  <small>
-                                    <code className="text-muted">{device.deviceId}</code>
-                                    {device.closed && (
-                                      <span className="badge bg-danger ms-2">Closed</span>
-                                    )}
-                                  </small>
-                                  <div className="d-flex gap-2 mt-1">
-                                    <span
-                                      className={`badge bg-${
-                                        device.latencyMs < 200
-                                          ? "success"
-                                          : device.latencyMs < 600
-                                            ? "warning"
-                                            : "danger"
-                                      }`}
-                                    >
-                                      {Math.round(device.latencyMs)}ms
-                                    </span>
-                                    <span
-                                      className={`badge bg-${
-                                        device.errorRate < 0.05
-                                          ? "success"
-                                          : device.errorRate < 0.2
-                                            ? "warning"
-                                            : "danger"
-                                      }`}
-                                    >
-                                      {(device.errorRate * 100).toFixed(1)}% errors
-                                    </span>
-                                    <span className="badge bg-info">
-                                      Last:{" "}
-                                      {device.timestampLastApplied
-                                        ? new Date(device.timestampLastApplied).toLocaleString()
-                                        : "Never"}
-                                    </span>
-                                  </div>
-                                  {idx < group.connectedDevices.length - 1 && (
-                                    <hr className="my-2" />
-                                  )}
-                                </div>
-                              ))}
-                            </div>
-                          </div>
-                        ) : (
-                          <span className="text-muted">No connected devices</span>
-                        )}
-                      </td>
-                      <td>
-                        {group.preferredDeviceIds.length > 0 ? (
-                          <div>
-                            <span className="badge bg-primary mb-2">
-                              {group.preferredDeviceIds.length} preferred
-                            </span>
-                            <div>
-                              {group.preferredDeviceIds.map((deviceId) => (
-                                <div key={deviceId}>
-                                  <small>
-                                    <code className="text-muted">{deviceId}</code>
-                                  </small>
-                                </div>
-                              ))}
-                            </div>
-                          </div>
-                        ) : (
-                          <span className="text-muted">None</span>
-                        )}
-                      </td>
-                      <td>
-                        <small>
-                          {group.lastSyncTimestamp > 0
-                            ? new Date(group.lastSyncTimestamp).toLocaleString()
-                            : "Never"}
-                        </small>
-                      </td>
-                      <td>
-                        <button
-                          className="btn btn-sm btn-outline-primary"
-                          onClick={() => setSelectedGroupId(group.groupId)}
-                          title="View Group Details"
-                        >
-                          {group.totalMembers}
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Disconnected Devices */}
-      <div className="card">
-        <div className="card-body">
-          <h5 className="card-title">Disconnected Devices</h5>
-          {disconnectedDevices.length === 0 ? (
-            <p className="text-muted">No known disconnected devices</p>
-          ) : (
-            <div className="table-responsive">
-              <table className="table table-hover">
-                <thead>
-                  <tr>
-                    <th>User</th>
-                    <th>Trust Level</th>
-                    <th>Device ID</th>
-                    <th>Device Name</th>
-                    <th>First Seen</th>
-                    <th>Last Seen</th>
-                    <th>Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {disconnectedDevices
-                    .sort((a, b) => new Date(b.lastSeen).getTime() - new Date(a.lastSeen).getTime())
-                    .map((device) => (
-                      <tr key={device.deviceId}>
-                        <td>
-                          {device.userName || device.userId}
-                          {!device.userName && (
-                            <>
-                              <br />
-                              <small className="text-muted">{device.userId}</small>
-                            </>
-                          )}
-                        </td>
-                        <td>
-                          <TrustLevelBadge level={device.trustLevel || TrustLevel.Unknown} />
-                        </td>
-                        <td>
-                          <code className="text-muted small">{device.deviceId}</code>
-                        </td>
-                        <td>{device.name || <span className="text-muted">-</span>}</td>
-                        <td>
-                          <small>{new Date(device.firstSeen).toLocaleString()}</small>
-                        </td>
-                        <td>
-                          <small>{new Date(device.lastSeen).toLocaleString()}</small>
-                        </td>
-                        <td>
-                          <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) ? (
-                              <>
-                                <span
-                                  className="spinner-border spinner-border-sm me-1"
-                                  role="status"
-                                  aria-hidden="true"
-                                ></span>
-                                Connecting...
-                              </>
-                            ) : (
-                              <>
-                                <i className="bi bi-arrow-right-circle"></i> Connect
-                              </>
-                            )}
-                          </button>
-                          <button
-                            className="btn btn-sm btn-outline-danger"
-                            onClick={() => handleDeleteDevice(device.deviceId)}
-                            title="Forget this device"
-                          >
-                            <i className="bi bi-trash"></i>
-                          </button>
-                        </td>
-                      </tr>
-                    ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Device Details Modal */}
-      {selectedDeviceId && (
-        <DeviceDetailsModal
-          deviceId={selectedDeviceId}
-          onClose={() => setSelectedDeviceId(null)}
-          onDisconnect={loadData}
-        />
-      )}
-
-      {/* Group Details Modal */}
-      {selectedGroupId && (
-        <GroupDetailsModal groupId={selectedGroupId} onClose={() => setSelectedGroupId(null)} />
-      )}
-    </div>
-  );
-}
-
-registerInternalPeersUI({
-  peersUIId: "network-viewer-list-ui",
-  component: NetworkViewerList,
-  routes: [
-    {
-      isMatch: (_props, context) => context.path === "network-viewer",
-      uiCategory: "screen",
-      priority: 2,
-    },
-  ],
-});