@peers-app/peers-ui 0.7.40 → 0.8.1

package/src/screens/contacts/index.ts

@@ -1,6 +1,8 @@
 // Import all contact screen components to ensure they register their routes
 import './contact-list';
 import './contact-details';
+import './user-connect';
 
 export * from "./contact-list";
-export * from "./contact-details";
+export * from "./contact-details";
+export * from "./user-connect";

package/src/screens/contacts/user-connect.tsx

@@ -0,0 +1,452 @@
+import { 
+  formatConnectionCode, 
+  generateConnectionCode, 
+  generateConfirmationHash,
+  getMe,
+  getUserContext, 
+  IUser,
+  IUserConnectInfo,
+  setUserTrustLevel, 
+  TrustLevel, 
+  userConnectCodeOffer, 
+  userConnectCodeAnswer, 
+  userConnectStatus,
+  Users, 
+  Devices
+} from "@peers-app/peers-sdk";
+import React, { useState, useEffect, useCallback } from 'react';
+import { mainContentPath } from '../../globals';
+import { useObservable } from '../../hooks';
+import { registerInternalPeersUI } from '../../ui-router/ui-loader';
+
+type ConnectionMode = 'select' | 'initiate' | 'respond';
+type ConnectionStatus = 'idle' | 'waiting' | 'success' | 'error';
+
+interface ConnectionResult {
+  remoteUser: IUser;
+  confirmationHash: string;
+}
+
+export function UserConnect() {
+  const [mode, setMode] = useState<ConnectionMode>('select');
+  const [status, setStatus] = useState<ConnectionStatus>('idle');
+  const [connectionCode, setConnectionCode] = useState<string>('');
+  const [inputCode, setInputCode] = useState<string>('');
+  const [result, setResult] = useState<ConnectionResult | null>(null);
+  const [error, setError] = useState<string>('');
+  const [copied, setCopied] = useState(false);
+
+  // Subscribe to userConnectStatus from the device layer
+  const [connectStatus] = useObservable(userConnectStatus);
+
+  // Also set up a direct subscription after loading is complete
+  useEffect(() => {
+    let disposed = false;
+    let subscription: { dispose: () => void } | undefined;
+
+    userConnectStatus.loadingPromise.then(() => {
+      if (disposed) return;
+      subscription = userConnectStatus.subscribe(() => {
+        // Force a re-render by checking the current value
+        const currentStatus = userConnectStatus();
+        if (currentStatus && typeof currentStatus === 'string') {
+          handleConnectStatusChange(currentStatus);
+        }
+      });
+    });
+
+    return () => {
+      disposed = true;
+      subscription?.dispose();
+    };
+  }, []);
+
+  // Handle connect status changes
+  const handleConnectStatusChange = useCallback(async (connectStatusValue: string) => {
+    if (!connectStatusValue || status === 'success') return;
+
+    if (connectStatusValue.startsWith('Error:')) {
+      // Error status
+      setError(connectStatusValue.replace('Error: ', ''));
+      setStatus('error');
+    } else if (connectStatusValue.length > 0) {
+      // Success - connectStatus is the remote userId
+      const remoteUserId = connectStatusValue;
+      
+      try {
+        const userContext = await getUserContext();
+        const me = await getMe();
+        const remoteUser = await Users(userContext.userDataContext).get(remoteUserId);
+        
+        if (!remoteUser) {
+          setError('Could not find connected user');
+          setStatus('error');
+          return;
+        }
+
+        const remoteDevice = await Devices(userContext.userDataContext).findOne({ userId: remoteUserId });
+        if (!remoteDevice) {
+          setError('Could not find connected device but connection was successful');
+          setStatus('error');
+          return;
+        }
+
+        // Build user connect info for confirmation hash
+        const myInfo: IUserConnectInfo = {
+          userId: me.userId,
+          publicKey: me.publicKey,
+          publicBoxKey: me.publicBoxKey,
+          deviceId: userContext.deviceId(),
+        };
+        const remoteInfo: IUserConnectInfo = {
+          userId: remoteUser.userId,
+          publicKey: remoteUser.publicKey,
+          publicBoxKey: remoteUser.publicBoxKey,
+          deviceId: remoteDevice.deviceId,
+        };
+
+        const confirmationHash = generateConfirmationHash(myInfo, remoteInfo);
+        
+        setResult({ remoteUser, confirmationHash });
+        setStatus('success');
+        
+        // Clear the codes
+        userConnectCodeOffer('');
+        userConnectCodeAnswer('');
+      } catch (err: any) {
+        setError(err.message || 'Failed to complete connection');
+        setStatus('error');
+      }
+    }
+  }, [status]);
+
+  // React to userConnectStatus changes from useObservable
+  useEffect(() => {
+    if (connectStatus && typeof connectStatus === 'string') {
+      handleConnectStatusChange(connectStatus);
+    }
+  }, [connectStatus, handleConnectStatusChange]);
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => {
+      if (mode === 'initiate' && status === 'waiting') {
+        userConnectCodeOffer('');
+        userConnectCodeAnswer('');
+      }
+    };
+  }, [mode, status]);
+
+  const handleInitiate = useCallback(async () => {
+    setMode('initiate');
+    setStatus('waiting');
+    setError('');
+    userConnectStatus(''); // Clear any previous status
+
+    // Generate the connection code
+    const code = generateConnectionCode();
+    userConnectCodeOffer(code.code);
+    const formattedCode = formatConnectionCode(code.code);
+    setConnectionCode(formattedCode);
+  }, []);
+
+  const handleRespond = useCallback(async () => {
+    if (inputCode.replace(/[^0-9A-Za-z]/g, '').length !== 12) {
+      setError('Please enter a valid 12-character connection code');
+      return;
+    }
+    
+    setStatus('waiting');
+    setError('');
+    userConnectStatus(''); // Clear any previous status
+    userConnectCodeAnswer(inputCode);
+  }, [inputCode]);
+
+  const handleCancel = useCallback(async () => {
+    userConnectCodeOffer('');
+    userConnectCodeAnswer('');
+    userConnectStatus('');
+    setMode('select');
+    setStatus('idle');
+    setConnectionCode('');
+    setError('');
+  }, []);
+
+  const handleReset = useCallback(() => {
+    userConnectCodeOffer('');
+    userConnectCodeAnswer('');
+    userConnectStatus('');
+    setMode('select');
+    setStatus('idle');
+    setConnectionCode('');
+    setInputCode('');
+    setResult(null);
+    setError('');
+    setCopied(false);
+  }, []);
+
+  const handleSaveContact = useCallback(async () => {
+    if (!result) return;
+
+    try {
+      const userContext = await getUserContext();
+      
+      // Contact is already saved by the device layer, just set trust level
+      await setUserTrustLevel(result.remoteUser.userId, TrustLevel.Trusted, userContext.userDataContext);
+
+      // Navigate to contact details
+      mainContentPath(`contacts/${result.remoteUser.userId}`);
+    } catch (err: any) {
+      setError(err.message || 'Failed to save contact');
+    }
+  }, [result]);
+
+  // Copy connection code to clipboard
+  const handleCopyCode = useCallback(async () => {
+    if (!connectionCode) return;
+    try {
+      await navigator.clipboard.writeText(connectionCode);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      // Fallback for older browsers
+      const textArea = document.createElement('textarea');
+      textArea.value = connectionCode;
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textArea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  }, [connectionCode]);
+
+  // Format input code as user types
+  const handleCodeInput = (value: string) => {
+    // Remove non-alphanumeric characters
+    const cleaned = value.toUpperCase().replace(/[^0-9A-Z]/g, '');
+    
+    // Format as XXXX-YYYY-ZZZZ
+    let formatted = '';
+    for (let i = 0; i < cleaned.length && i < 12; i++) {
+      if (i === 4 || i === 8) formatted += '-';
+      formatted += cleaned[i];
+    }
+    
+    setInputCode(formatted);
+  };
+
+  return (
+    <div className="container-fluid p-3">
+      <div className="d-flex justify-content-between align-items-center mb-4">
+        <h4>
+          <i className="bi-person-plus-fill me-2" />
+          Connect to New User
+        </h4>
+        {mode !== 'select' && (
+          <button className="btn btn-outline-secondary btn-sm" onClick={handleReset}>
+            <i className="bi-arrow-left me-1" />
+            Back
+          </button>
+        )}
+      </div>
+
+      {/* Mode Selection */}
+      {mode === 'select' && (
+        <div className="row g-3">
+          <div className="col-md-6">
+            <div 
+              className="card h-100 border-primary" 
+              style={{ cursor: 'pointer' }}
+              onClick={handleInitiate}
+            >
+              <div className="card-body text-center p-4">
+                <i className="bi-qr-code display-4 text-primary mb-3" />
+                <h5 className="card-title">Create Connection Code</h5>
+                <p className="card-text text-muted">
+                  Generate a code to share with someone who wants to connect with you
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="col-md-6">
+            <div 
+              className="card h-100 border-success" 
+              style={{ cursor: 'pointer' }}
+              onClick={() => setMode('respond')}
+            >
+              <div className="card-body text-center p-4">
+                <i className="bi-keyboard display-4 text-success mb-3" />
+                <h5 className="card-title">Enter Connection Code</h5>
+                <p className="card-text text-muted">
+                  Enter a code that someone shared with you to connect
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Initiate Mode - Show Generated Code */}
+      {mode === 'initiate' && status === 'waiting' && (
+        <div className="text-center">
+          <div className="mb-4">
+            <p className="text-muted">Share this code with the person you want to connect with:</p>
+          </div>
+          
+          <div className="mb-4" style={{ maxWidth: '400px', margin: '0 auto' }}>
+            <div className="input-group">
+              <input
+                type="text"
+                className="form-control form-control-lg text-center font-monospace"
+                value={connectionCode || 'XXXX-YYYY-ZZZZ'}
+                readOnly
+                style={{ letterSpacing: '0.15em', fontSize: '1.5rem' }}
+              />
+              <button 
+                className="btn btn-outline-primary" 
+                onClick={handleCopyCode}
+                title="Copy to clipboard"
+              >
+                <i className={copied ? "bi-check-lg" : "bi-clipboard"} />
+              </button>
+            </div>
+            {copied && (
+              <small className="text-success mt-1 d-block">Copied!</small>
+            )}
+          </div>
+
+          <div className="mb-4">
+            <div className="spinner-border spinner-border-sm text-primary me-2" role="status" />
+            <span className="text-muted">Waiting for connection...</span>
+          </div>
+
+          <p className="text-muted small">
+            This code will expire in 10 minutes
+          </p>
+
+          <button className="btn btn-outline-secondary" onClick={handleCancel}>
+            Cancel
+          </button>
+        </div>
+      )}
+
+      {/* Respond Mode - Enter Code */}
+      {mode === 'respond' && status !== 'success' && (
+        <div className="text-center">
+          <div className="mb-4">
+            <p className="text-muted">Enter the connection code shared with you:</p>
+          </div>
+
+          <div className="mb-4" style={{ maxWidth: '400px', margin: '0 auto' }}>
+            <input
+              type="text"
+              className="form-control form-control-lg text-center font-monospace"
+              placeholder="XXXX-YYYY-ZZZZ"
+              value={inputCode}
+              onChange={(e) => handleCodeInput(e.target.value)}
+              maxLength={14}
+              style={{ letterSpacing: '0.15em', fontSize: '1.5rem' }}
+              autoFocus
+            />
+          </div>
+
+          {error && (
+            <div className="alert alert-danger" style={{ maxWidth: '400px', margin: '0 auto 1rem' }}>
+              {error}
+            </div>
+          )}
+
+          <button 
+            className="btn btn-primary btn-lg"
+            onClick={handleRespond}
+            disabled={status === 'waiting' || inputCode.replace(/[^0-9A-Z]/gi, '').length !== 12}
+          >
+            {status === 'waiting' ? (
+              <>
+                <span className="spinner-border spinner-border-sm me-2" role="status" />
+                Connecting...
+              </>
+            ) : (
+              <>
+                <i className="bi-link-45deg me-2" />
+                Connect
+              </>
+            )}
+          </button>
+        </div>
+      )}
+
+      {/* Success State */}
+      {status === 'success' && result && (
+        <div className="text-center">
+          <div className="mb-4">
+            <i className="bi-check-circle-fill text-success display-3" />
+          </div>
+          
+          <h5 className="mb-4">Connection Successful!</h5>
+
+          <div className="card mb-4" style={{ maxWidth: '400px', margin: '0 auto' }}>
+            <div className="card-body">
+              <p className="text-muted mb-2">Verify with the other person that you both see:</p>
+              <h3 className="font-monospace text-primary mb-3" style={{ letterSpacing: '0.2em' }}>
+                {result.confirmationHash}
+              </h3>
+              
+              <hr />
+              
+              <div className="text-start">
+                <small className="text-muted">Name:</small>
+                <p className="mb-2">{result.remoteUser.name}</p>
+                
+                <small className="text-muted">User ID:</small>
+                <p className="font-monospace small mb-0">{result.remoteUser.userId}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="d-flex gap-2 justify-content-center">
+            <button className="btn btn-primary" onClick={handleSaveContact}>
+              <i className="bi-check-lg me-2" />
+              Trust & View Contact
+            </button>
+            <button className="btn btn-outline-secondary" onClick={handleReset}>
+              Connect Another
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Error State */}
+      {status === 'error' && (
+        <div className="text-center">
+          <div className="mb-4">
+            <i className="bi-x-circle-fill text-danger display-3" />
+          </div>
+          
+          <h5 className="mb-4">Connection Failed</h5>
+
+          <div className="alert alert-danger" style={{ maxWidth: '400px', margin: '0 auto 1rem' }}>
+            {error}
+          </div>
+
+          <button className="btn btn-primary" onClick={handleReset}>
+            Try Again
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+registerInternalPeersUI({
+  peersUIId: '000user00connect0screen01',
+  component: UserConnect,
+  routes: [
+    {
+      isMatch: (props, context) => context.path === 'contacts/connect',
+      uiCategory: 'screen',
+      priority: 3
+    }
+  ]
+});

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

@@ -3,6 +3,25 @@ import { TrustLevel } from '@peers-app/peers-sdk';
 import { LoadingIndicator } from '../../components/loading-indicator';
 import { TrustLevelBadge } from '../../components/trust-level-badge';
 
+/** 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`;
+}
+
 // TypeScript type definitions (matching backend)
 interface IDeviceDetails {
   deviceId: string;
@@ -30,6 +49,11 @@ interface IDeviceDetails {
       isPreferred: boolean;
     };
   };
+  // Throughput stats
+  bytesSent?: number;
+  bytesReceived?: number;
+  sendRateMBps?: number;
+  receiveRateMBps?: number;
 }
 
 interface IDeviceDetailsModalProps {
@@ -190,6 +214,37 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
                 </div>
               </div>
 
+              {/* Throughput Stats */}
+              <div className="mb-4">
+                <h6 className="border-bottom pb-2 mb-3">Throughput</h6>
+                <div className="row">
+                  <div className="col-md-6 mb-3">
+                    <strong>Send Rate:</strong>
+                    <br />
+                    <span className="text-success">
+                      ↑ {formatRate(device.sendRateMBps)}
+                    </span>
+                  </div>
+                  <div className="col-md-6 mb-3">
+                    <strong>Receive Rate:</strong>
+                    <br />
+                    <span className="text-primary">
+                      ↓ {formatRate(device.receiveRateMBps)}
+                    </span>
+                  </div>
+                  <div className="col-md-6 mb-3">
+                    <strong>Total Sent:</strong>
+                    <br />
+                    <span>{formatBytes(device.bytesSent || 0)}</span>
+                  </div>
+                  <div className="col-md-6 mb-3">
+                    <strong>Total Received:</strong>
+                    <br />
+                    <span>{formatBytes(device.bytesReceived || 0)}</span>
+                  </div>
+                </div>
+              </div>
+
               {/* Shared Groups */}
               {device.sharedGroups.length > 0 && (
                 <div className="mb-4">