@peers-app/peers-ui 0.14.0 → 0.15.0

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

@@ -1,13 +1,14 @@
-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 { registerInternalPeersUI } from '../../ui-router/ui-loader';
-import { isDesktop } from '../../globals';
-import { DeviceDetailsModal } from './device-details-modal';
-import { GroupDetailsModal } from './group-details-modal';
-import { UsageGraph } from './usage-graph';
-import { ConnectionTroubleshooter } from './connection-troubleshooter';
+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 { isDesktop } from "../../globals";
+import { registerInternalPeersUI } from "../../ui-router/ui-loader";
+import { ConnectionTroubleshooter } from "./connection-troubleshooter";
+import { DeviceDetailsModal } from "./device-details-modal";
+import { GroupDetailsModal } from "./group-details-modal";
+import { getNetworkViewerApi } from "./network-viewer-ipc";
+import { UsageGraph } from "./usage-graph";
 
 /** Format bytes to human-readable string (KB, MB, GB) */
 function formatBytes(bytes: number): string {
@@ -19,7 +20,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;
@@ -54,10 +55,10 @@ interface IConnectionInfo {
   deviceName?: string;
   userTrustLevel: number;
   deviceTrustLevel: 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[];
   latencyMs: number;
   errorRate: number;
@@ -110,12 +111,12 @@ export function NetworkViewerList() {
   const [connecting, setConnecting] = useState<Set<string>>(new Set());
   const [showTroubleshooter, setShowTroubleshooter] = useState(false);
 
-  const loadData = async () => {
+  const loadData = useCallback(async () => {
     try {
-      if (!isDesktop) return;
-      const api = (window as any).electronAPI?.networkViewer;
+      if (!isDesktop()) return;
+      const api = getNetworkViewerApi();
       if (!api) {
-        console.warn('Network Viewer API not available');
+        console.warn("Network Viewer API not available");
         return;
       }
 
@@ -123,48 +124,48 @@ export function NetworkViewerList() {
         api.getOverview(),
         api.getConnections(),
         api.getGroupSyncStatus(),
-        api.getDisconnectedDevices()
+        api.getDisconnectedDevices(),
       ]);
 
-      setOverview(overviewData);
-      setConnections(connectionsData);
-      setGroupSyncInfo(groupSyncData);
-      setDisconnectedDevices(disconnectedData);
+      setOverview(overviewData as INetworkOverview);
+      setConnections(connectionsData as IConnectionInfo[]);
+      setGroupSyncInfo(groupSyncData as IGroupSyncInfo[]);
+      setDisconnectedDevices(disconnectedData as IDisconnectedDevice[]);
     } 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 as any).electronAPI?.networkViewer;
+      const api = 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: string) => {
-    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) {
         await api.disconnectDevice(deviceId);
         await loadData();
       }
     } catch (error) {
-      console.error('Error disconnecting device:', error);
+      console.error("Error disconnecting device:", error);
     }
   };
 
@@ -174,9 +175,9 @@ export function NetworkViewerList() {
 
   const handleConnectToDevice = async (deviceId: string) => {
     try {
-      const api = (window as any).electronAPI?.networkViewer;
+      const api = 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
@@ -186,10 +187,10 @@ export 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;
@@ -199,7 +200,7 @@ export function NetworkViewerList() {
 
   const handleDeleteDevice = async (deviceId: string) => {
     try {
-      const api = (window as any).electronAPI?.networkViewer;
+      const api = getNetworkViewerApi();
       if (api) {
         const result = await api.deleteDevice(deviceId);
         if (result.success) {
@@ -210,8 +211,8 @@ export function NetworkViewerList() {
         }
       }
     } catch (error) {
-      console.error('Error deleting device:', error);
-      alert('Error deleting device');
+      console.error("Error deleting device:", error);
+      alert("Error deleting device");
     }
   };
 
@@ -220,13 +221,13 @@ export function NetworkViewerList() {
     // Auto-refresh every 5 seconds
     const interval = setInterval(loadData, 5000);
     return () => clearInterval(interval);
-  }, []);
+  }, [loadData]);
 
   if (loading) {
     return <LoadingIndicator />;
   }
 
-  if (!isDesktop) {
+  if (!isDesktop()) {
     return (
       <div className="container-fluid p-4">
         <div className="alert alert-info">
@@ -239,9 +240,7 @@ export function NetworkViewerList() {
   if (!overview) {
     return (
       <div className="container-fluid p-4">
-        <div className="alert alert-warning">
-          Unable to load network information.
-        </div>
+        <div className="alert alert-warning">Unable to load network information.</div>
       </div>
     );
   }
@@ -263,13 +262,9 @@ export function NetworkViewerList() {
             <i className="bi bi-stethoscope me-1"></i>
             Troubleshoot
           </button>
-          <button
-            className="btn btn-sm btn-primary"
-            onClick={handleRefresh}
-            disabled={refreshing}
-          >
-            <i className={`bi bi-arrow-clockwise ${refreshing ? 'spin' : ''}`}></i>
-            {refreshing ? ' Refreshing...' : ' Refresh'}
+          <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>
@@ -280,11 +275,11 @@ export function NetworkViewerList() {
           <h5 className="card-title">Local Device</h5>
           <div className="row">
             <div className="col-md-6">
-              <strong>Device ID:</strong>{' '}
+              <strong>Device ID:</strong>{" "}
               <code className="text-muted small">{overview.localDeviceId}</code>
             </div>
             <div className="col-md-6">
-              <strong>User ID:</strong>{' '}
+              <strong>User ID:</strong>{" "}
               <code className="text-muted small">{overview.localUserId}</code>
             </div>
           </div>
@@ -293,25 +288,24 @@ export function NetworkViewerList() {
 
       {/* 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" style={{ height: "100%" }}>
             <div className="card-body p-2">
               <UsageGraph
                 label="Connections"
                 fetchUsage={async () => {
-                  const api = (window as any).electronAPI?.networkViewer;
+                  const api = getNetworkViewerApi();
                   if (!api) return 0;
-                  const data = await api.getOverview();
+                  const data = (await api.getOverview()) as INetworkOverview;
                   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)' },
+                  { 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}
@@ -320,54 +314,54 @@ export function NetworkViewerList() {
             </div>
           </div>
         </div>
-        
+
         <div className="col-md-4">
-          <div className="card" style={{ height: "100%"}}>
+          <div className="card" style={{ height: "100%" }}>
             <div className="card-body p-2">
               <UsageGraph
                 label="CPU"
                 fetchUsage={async () => {
-                  const api = (window as any).electronAPI?.networkViewer;
+                  const api = getNetworkViewerApi();
                   if (!api) return 0;
-                  const data = await api.getOverview();
+                  const data = (await api.getOverview()) as INetworkOverview;
                   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)' }
+                  { 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" style={{ height: "100%" }}>
             <div className="card-body p-2">
               <UsageGraph
                 label="Memory"
                 fetchUsage={async () => {
-                  const api = (window as any).electronAPI?.networkViewer;
+                  const api = getNetworkViewerApi();
                   if (!api) return 0;
-                  const data = await api.getOverview();
+                  const data = (await api.getOverview()) as INetworkOverview;
                   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)' }
+                  { 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>      
+      </div>
 
       {/* Connections List */}
       <div className="card mb-4">
@@ -396,36 +390,38 @@ export function NetworkViewerList() {
                   </tr>
                 </thead>
                 <tbody>
-                  {connections.map(conn => {
+                  {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>
+                      <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'
@@ -434,66 +430,79 @@ export function NetworkViewerList() {
                           {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>
+                        <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>
+                        <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>
@@ -522,7 +531,7 @@ export function NetworkViewerList() {
                   </tr>
                 </thead>
                 <tbody>
-                  {groupSyncInfo.map(group => (
+                  {groupSyncInfo.map((group) => (
                     <tr key={group.groupId}>
                       <td>
                         <strong>{group.groupName}</strong>
@@ -533,33 +542,48 @@ export function NetworkViewerList() {
                         {group.connectedDevices.length > 0 ? (
                           <div>
                             <span className="badge bg-success mb-1">
-                              {group.connectedDevices.length} device{group.connectedDevices.length !== 1 ? 's' : ''}
+                              {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>}
+                                    {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'
-                                    }`}>
+                                    <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'
-                                    }`}>
+                                    <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: {new Date(device.timestampLastApplied).toLocaleString()}
                                     </span>
                                   </div>
-                                  {idx < group.connectedDevices.length - 1 && <hr className="my-2" />}
+                                  {idx < group.connectedDevices.length - 1 && (
+                                    <hr className="my-2" />
+                                  )}
                                 </div>
                               ))}
                             </div>
@@ -575,9 +599,11 @@ export function NetworkViewerList() {
                               {group.preferredDeviceIds.length} preferred
                             </span>
                             <div>
-                              {group.preferredDeviceIds.map(deviceId => (
+                              {group.preferredDeviceIds.map((deviceId) => (
                                 <div key={deviceId}>
-                                  <small><code className="text-muted">{deviceId}</code></small>
+                                  <small>
+                                    <code className="text-muted">{deviceId}</code>
+                                  </small>
                                 </div>
                               ))}
                             </div>
@@ -590,7 +616,7 @@ export function NetworkViewerList() {
                         <small>
                           {group.lastSyncTimestamp > 0
                             ? new Date(group.lastSyncTimestamp).toLocaleString()
-                            : 'Never'}
+                            : "Never"}
                         </small>
                       </td>
                       <td>
@@ -634,60 +660,62 @@ export function NetworkViewerList() {
                 <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) ? (
+                    .map((device) => (
+                      <tr key={device.deviceId}>
+                        <td>
+                          {device.userName || device.userId}
+                          {!device.userName && (
                             <>
-                              <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
+                              <br />
+                              <small className="text-muted">{device.userId}</small>
                             </>
                           )}
-                        </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>
-                  ))}
+                        </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>
@@ -706,23 +734,20 @@ export function NetworkViewerList() {
 
       {/* Group Details Modal */}
       {selectedGroupId && (
-        <GroupDetailsModal
-          groupId={selectedGroupId}
-          onClose={() => setSelectedGroupId(null)}
-        />
+        <GroupDetailsModal groupId={selectedGroupId} onClose={() => setSelectedGroupId(null)} />
       )}
     </div>
   );
 }
 
 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,
+    },
+  ],
 });