feat(security,ui): self-host React deps, Tailwind, fonts; strict CSP; local QR; better selection state

Replace CDN React/ReactDOM/Babel with local libs; remove Babel and inline scripts
Build Tailwind locally, add safelist; switch to assets/tailwind.css
Self-host Font Awesome and Inter (CSS + woff2); remove external font CDNs
Implement strict CSP (no unsafe-inline/eval; scripts/styles/fonts from self)
Extract inline handlers; move PWA scripts to external files
Add local QR code generation (qrcode lib) and remove api.qrserver.com
Improve SessionTypeSelector visual selection (highlighted background and ring)
Keep PWA working with service worker and offline assets
Refs: CSP hardening, offline-first, no external dependencies

src/components/ui/LightningPayment.jsx

@@ -39,8 +39,14 @@ const IntegratedLightningPayment = ({ sessionType, onSuccess, onCancel, paymentM
             setPaymentStatus('created');
 
             if (createdInvoice.paymentRequest) {
-                const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(createdInvoice.paymentRequest)}`;
-                setQrCodeUrl(qrUrl);
+                try {
+                    const dataUrl = await window.generateQRCode(createdInvoice.paymentRequest, { size: 300, margin: 2, errorCorrectionLevel: 'M' });
+                    setQrCodeUrl(dataUrl);
+                } catch (e) {
+                    console.warn('QR local generation failed, showing placeholder');
+                    const dataUrl = await window.generateQRCode(createdInvoice.paymentRequest, { size: 300 });
+                    setQrCodeUrl(dataUrl);
+                }
             }
 
         } catch (err) {

src/components/ui/PaymentModal.jsx

@@ -211,8 +211,14 @@ const PaymentModal = ({ isOpen, onClose, sessionManager, onSessionPurchased }) =
             setInvoice(createdInvoice);
             setPaymentStatus('created');
 
-            const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(createdInvoice.paymentRequest)}`;
-            setQrCodeUrl(qrUrl);
+            try {
+                const dataUrl = await window.generateQRCode(createdInvoice.paymentRequest, { size: 300, margin: 2, errorCorrectionLevel: 'M' });
+                setQrCodeUrl(dataUrl);
+            } catch (e) {
+                console.warn('QR local generation failed, showing placeholder');
+                const dataUrl = await window.generateQRCode(createdInvoice.paymentRequest, { size: 300 });
+                setQrCodeUrl(dataUrl);
+            }
 
             const expirationTime = 15 * 60 * 1000;
             setTimeLeft(expirationTime);

src/components/ui/SessionTypeSelector.jsx

@@ -179,9 +179,11 @@ const SessionTypeSelector = ({ onSelectType, onCancel, sessionManager }) => {
                 return React.createElement('div', {
                     key: type.id,
                     onClick: () => !isDisabled && handleTypeSelect(type.id),
-                    className: `relative card-minimal rounded-lg p-5 border-2 transition-all ${
-                        selectedType === type.id ? 'border-orange-500 bg-orange-500/10' : 'border-gray-600 hover:border-orange-400'
-                    } ${type.popular ? 'ring-2 ring-orange-500/30' : ''} ${
+                    className: `relative card-minimal ${selectedType === type.id ? 'card-minimal--selected' : ''} rounded-lg p-5 border-2 transition-all ${
+                        selectedType === type.id
+                            ? 'border-orange-500 bg-orange-500/15 ring-2 ring-orange-400 ring-offset-2 ring-offset-black/30'
+                            : 'border-gray-600 hover:border-orange-400'
+                    } ${type.popular && selectedType !== type.id ? 'ring-2 ring-orange-500/30' : ''} ${
                         isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
                     }`
                 }, [

src/network/EnhancedSecureWebRTCManager.js

@@ -1580,10 +1580,7 @@ this._secureLog('info', '🔒 Enhanced Mutex system fully initialized and valida
             this._originalConsole?.error?.('🚨 CRITICAL: Logging system disabled due to security violations');
         }
     }
-    /**
-     *   Shim to redirect arbitrary console.log calls to _secureLog('info', ...)
-     * Fixed syntax errors and improved error handling
-     */
+
     _secureLogShim(...args) {
         try {
             // Validate arguments array
@@ -1622,10 +1619,7 @@ this._secureLog('info', '🔒 Enhanced Mutex system fully initialized and valida
             }
         }
     }
-    /**
-     *   Redirects global console.log to this instance's secure logger
-     * Improved error handling and validation
-     */
+
     /**
      *   Setup own logger without touching global console
      */
@@ -3378,13 +3372,10 @@ this._secureLog('info', '🔒 Enhanced Mutex system fully initialized and valida
 
             const enc = new TextEncoder();
 
-            // Соль связываем с обоими DTLS-fingerprints (в отсортированном порядке),
-            // чтобы SAS «привязался» к реальному транспорту и его сертификатам
             const salt = enc.encode(
                 'webrtc-sas|' + [localFP, remoteFP].sort().join('|')
             );
 
-            // Подготавливаем keyMaterialRaw для использования
             let keyBuffer;
             if (keyMaterialRaw instanceof ArrayBuffer) {
                 keyBuffer = keyMaterialRaw;
@@ -3420,9 +3411,8 @@ this._secureLog('info', '🔒 Enhanced Mutex system fully initialized and valida
             );
 
             const dv = new DataView(bits);
-            // Смешиваем оба 32-битных слова и получаем 7-значный код
             const n = (dv.getUint32(0) ^ dv.getUint32(4)) >>> 0;
-            const sasCode = String(n % 10_000_000).padStart(7, '0'); // 7 символов
+            const sasCode = String(n % 10_000_000).padStart(7, '0'); 
 
             console.log('🎯 _computeSAS computed code:', sasCode, '(type:', typeof sasCode, ')');
 
@@ -6947,14 +6937,7 @@ async processMessage(data) {
             } else if (state === 'failed') {
                 // Do not auto-reconnect to avoid closing the session on errors
                 this.onStatusChange('disconnected');
-                // if (!this.intentionalDisconnect && this.connectionAttempts < this.maxConnectionAttempts) {
-                //     this.connectionAttempts++;
-                //     setTimeout(() => this.retryConnection(), 2000);
-                // } else {
-                //     this.onStatusChange('disconnected');
-                //     // Do not call cleanupConnection automatically for 'failed'
-                //     // to avoid closing the session on connection errors
-                // }
+
             } else {
                 this.onStatusChange(state);
             }
@@ -9100,11 +9083,7 @@ async processMessage(data) {
                     this.ecdsaKeyPair.privateKey,
                     'ECDSA'
                 );
-                
-                // CRITICAL: Strict validation of exported data with hard disconnect on failure
-                // - Any validation failure in critical security path must abort connection
-                // - No fallback allowed for cryptographic validation
-                // - Prevent bypass of security checks through syntax/validation errors
+
                 
                 if (!ecdhPublicKeyData || typeof ecdhPublicKeyData !== 'object') {
                     this._secureLog('error', 'CRITICAL: ECDH key export failed - invalid object structure', { operationId });

src/pwa/pwa-manager.js

@@ -1063,7 +1063,7 @@ class PWAOfflineManager {
 // Singleton pattern
 let instance = null;
 
-const PWAOfflineManager = {
+const PWAOfflineManagerAPI = {
     getInstance() {
         if (!instance) {
             instance = new PWAOfflineManager();
@@ -1078,9 +1078,9 @@ const PWAOfflineManager = {
 
 // Export for module use
 if (typeof module !== 'undefined' && module.exports) {
-    module.exports = PWAOfflineManager;
+    module.exports = PWAOfflineManagerAPI;
 } else if (typeof window !== 'undefined' && !window.PWAOfflineManager) {
-    window.PWAOfflineManager = PWAOfflineManager;
+    window.PWAOfflineManager = PWAOfflineManagerAPI;
 }
 
 // Auto-initialize when DOM is ready
@@ -1088,12 +1088,12 @@ if (typeof window !== 'undefined' && !window.pwaOfflineManager) {
     if (document.readyState === 'loading') {
         document.addEventListener('DOMContentLoaded', () => {
             if (!window.pwaOfflineManager) {
-                window.pwaOfflineManager = PWAOfflineManager.init();
+                window.pwaOfflineManager = PWAOfflineManagerAPI.init();
             }
         });
     } else {
         if (!window.pwaOfflineManager) {
-            window.pwaOfflineManager = PWAOfflineManager.init();
+            window.pwaOfflineManager = PWAOfflineManagerAPI.init();
         }
     }
 }

src/scripts/app-boot.js

@@ -0,0 +1,34 @@
+import { EnhancedSecureCryptoUtils } from '../crypto/EnhancedSecureCryptoUtils.js';
+import { EnhancedSecureWebRTCManager } from '../network/EnhancedSecureWebRTCManager.js';
+import { PayPerSessionManager } from '../session/PayPerSessionManager.js';
+import { EnhancedSecureFileTransfer } from '../transfer/EnhancedSecureFileTransfer.js';
+
+// Import UI components (side-effect: they attach themselves to window.*)
+import '../components/ui/SessionTimer.jsx';
+import '../components/ui/Header.jsx';
+import '../components/ui/SessionTypeSelector.jsx';
+import '../components/ui/LightningPayment.jsx';
+import '../components/ui/PaymentModal.jsx';
+import '../components/ui/DownloadApps.jsx';
+import '../components/ui/FileTransfer.jsx';
+
+// Expose to global for legacy usage inside app code
+window.EnhancedSecureCryptoUtils = EnhancedSecureCryptoUtils;
+window.EnhancedSecureWebRTCManager = EnhancedSecureWebRTCManager;
+window.PayPerSessionManager = PayPerSessionManager;
+window.EnhancedSecureFileTransfer = EnhancedSecureFileTransfer;
+
+// Mount application once DOM and modules are ready
+const start = () => {
+  if (typeof window.initializeApp === 'function') {
+    window.initializeApp();
+  } else if (window.DEBUG_MODE) {
+    console.error('initializeApp is not defined on window');
+  }
+};
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', start);
+} else {
+  start();
+}

src/scripts/bootstrap-modules.js

@@ -0,0 +1,50 @@
+// Temporary bootstrap that still uses eval for JSX components fetched as text.
+// Next step is to replace this with proper ESM imports of prebuilt JS.
+(async () => {
+  try {
+    const timestamp = Date.now();
+    const [cryptoModule, webrtcModule, paymentModule, fileTransferModule] = await Promise.all([
+      import(`../crypto/EnhancedSecureCryptoUtils.js?v=${timestamp}`),
+      import(`../network/EnhancedSecureWebRTCManager.js?v=${timestamp}`),
+      import(`../session/PayPerSessionManager.js?v=${timestamp}`),
+      import(`../transfer/EnhancedSecureFileTransfer.js?v=${timestamp}`),
+    ]);
+
+    const { EnhancedSecureCryptoUtils } = cryptoModule;
+    window.EnhancedSecureCryptoUtils = EnhancedSecureCryptoUtils;
+    const { EnhancedSecureWebRTCManager } = webrtcModule;
+    window.EnhancedSecureWebRTCManager = EnhancedSecureWebRTCManager;
+    const { PayPerSessionManager } = paymentModule;
+    window.PayPerSessionManager = PayPerSessionManager;
+    const { EnhancedSecureFileTransfer } = fileTransferModule;
+    window.EnhancedSecureFileTransfer = EnhancedSecureFileTransfer;
+
+    async function loadReactComponent(path) {
+      const response = await fetch(`${path}?v=${timestamp}`);
+      if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      const code = await response.text();
+      // eslint-disable-next-line no-eval
+      eval(code);
+    }
+
+    await Promise.all([
+      loadReactComponent('../components/ui/SessionTimer.jsx'),
+      loadReactComponent('../components/ui/Header.jsx'),
+      loadReactComponent('../components/ui/SessionTypeSelector.jsx'),
+      loadReactComponent('../components/ui/LightningPayment.jsx'),
+      loadReactComponent('../components/ui/PaymentModal.jsx'),
+      loadReactComponent('../components/ui/DownloadApps.jsx'),
+      loadReactComponent('../components/ui/FileTransfer.jsx'),
+    ]);
+
+    if (typeof window.initializeApp === 'function') {
+      window.initializeApp();
+    } else {
+      console.error('❌ Function initializeApp not found');
+    }
+  } catch (error) {
+    console.error('❌ Module loading error:', error);
+  }
+})();
+
+

src/scripts/fa-check.js

@@ -0,0 +1,47 @@
+// Global logging and function settings
+window.DEBUG_MODE = true;
+
+// Fake function settings (for stability)
+window.DISABLE_FAKE_TRAFFIC = false; // Set true to disable fake messages
+window.DISABLE_DECOY_CHANNELS = false; // Set true to disable decoy channels
+
+// Enhanced icon loading fallback
+document.addEventListener('DOMContentLoaded', function () {
+  // Check if Font Awesome loaded properly
+  function checkFontAwesome() {
+    const testIcon = document.createElement('i');
+    testIcon.className = 'fas fa-shield-halved';
+    testIcon.style.position = 'absolute';
+    testIcon.style.left = '-9999px';
+    testIcon.style.visibility = 'hidden';
+    document.body.appendChild(testIcon);
+
+    const computedStyle = window.getComputedStyle(testIcon, '::before');
+    const content = computedStyle.content;
+    const fontFamily = computedStyle.fontFamily;
+
+    document.body.removeChild(testIcon);
+
+    if (!content || content === 'none' || content === 'normal' || (!fontFamily.includes('Font Awesome') && !fontFamily.includes('fa-solid'))) {
+      console.warn('Font Awesome not loaded properly, using fallback icons');
+      document.body.classList.add('fa-fallback');
+      return false;
+    }
+
+    if (window.DEBUG_MODE) {
+      console.log('Font Awesome loaded successfully');
+    }
+    return true;
+  }
+
+  if (!checkFontAwesome()) {
+    setTimeout(function () {
+      if (!checkFontAwesome()) {
+        console.warn('Font Awesome still not loaded, using fallback icons');
+        document.body.classList.add('fa-fallback');
+      }
+    }, 2000);
+  }
+});
+
+

src/scripts/pwa-globals.js

@@ -0,0 +1,83 @@
+window.forceUpdateHeader = (timeLeft, sessionType) => {
+  const event = new CustomEvent('force-header-update', {
+    detail: { timeLeft, sessionType, timestamp: Date.now() },
+  });
+  document.dispatchEvent(event);
+  if (window.sessionManager && window.sessionManager.forceUpdateTimer) {
+    window.sessionManager.forceUpdateTimer();
+  }
+};
+
+window.updateSessionTimer = (timeLeft, sessionType) => {
+  document.dispatchEvent(
+    new CustomEvent('session-timer-update', {
+      detail: { timeLeft, sessionType },
+    }),
+  );
+};
+
+document.addEventListener('session-activated', (event) => {
+  if (window.updateSessionTimer) {
+    window.updateSessionTimer(event.detail.timeLeft, event.detail.sessionType);
+  }
+  if (window.forceUpdateHeader) {
+    window.forceUpdateHeader(event.detail.timeLeft, event.detail.sessionType);
+  }
+  if (window.webrtcManager && window.webrtcManager.handleSessionActivation) {
+    if (window.DEBUG_MODE) {
+      console.log('🔐 Notifying WebRTC Manager about session activation');
+    }
+    window.webrtcManager.handleSessionActivation({
+      sessionId: event.detail.sessionId,
+      sessionType: event.detail.sessionType,
+      timeLeft: event.detail.timeLeft,
+      isDemo: event.detail.isDemo,
+      sessionManager: window.sessionManager,
+    });
+  }
+});
+
+if (window.DEBUG_MODE) {
+  console.log('✅ Global timer management functions loaded');
+}
+
+// Inline onclick replacement for update notification button
+function attachUpdateNotificationHandlers(container) {
+  const btn = container.querySelector('[data-action="reload"]');
+  if (btn) {
+    btn.addEventListener('click', () => window.location.reload());
+  }
+  const dismissBtn = container.querySelector('[data-action="dismiss-notification"]');
+  if (dismissBtn) {
+    dismissBtn.addEventListener('click', () => {
+      const host = dismissBtn.closest('div');
+      if (host && host.parentElement) host.parentElement.remove();
+    });
+  }
+}
+
+window.showUpdateNotification = function showUpdateNotification() {
+  if (window.DEBUG_MODE) console.log('🆕 Showing update notification for PWA');
+  const notification = document.createElement('div');
+  notification.className = 'fixed top-4 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white p-4 rounded-lg shadow-lg z-50 max-w-sm';
+  notification.innerHTML = `
+        <div class="flex items-center space-x-3">
+            <i class="fas fa-download text-lg"></i>
+            <div class="flex-1">
+                <div class="font-medium">Update Available</div>
+                <div class="text-sm opacity-90">SecureBit.chat v4.02.985 - ECDH + DTLS + SAS is ready</div>
+            </div>
+            <button data-action="reload" class="bg-white/20 hover:bg-white/30 px-3 py-1 rounded text-sm font-medium transition-colors">
+                Update
+            </button>
+        </div>`;
+  document.body.appendChild(notification);
+  attachUpdateNotificationHandlers(notification);
+  setTimeout(() => {
+    if (notification.parentElement) notification.remove();
+  }, 30000);
+};
+
+window.showServiceWorkerError = function showServiceWorkerError(error) {
+  console.warn('⚠️ Service Worker error:', error);
+};

src/scripts/pwa-register.js

@@ -0,0 +1,112 @@
+// PWA Service Worker Registration
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', async () => {
+    try {
+      const registration = await navigator.serviceWorker.register('./sw.js', {
+        scope: './',
+      });
+
+      console.log('✅ PWA: Service Worker registered successfully');
+      console.log('📡 SW Scope:', registration.scope);
+
+      // Store registration for use in other modules
+      window.swRegistration = registration;
+
+      // Listen for updates
+      registration.addEventListener('updatefound', () => {
+        console.log('🔄 PWA: Service Worker update found');
+        const newWorker = registration.installing;
+
+        newWorker.addEventListener('statechange', () => {
+          if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+            console.log('🆕 PWA: New version available');
+
+            const isPWAInstalled =
+              window.matchMedia('(display-mode: standalone)').matches ||
+              window.navigator.standalone === true ||
+              (window.pwaInstallPrompt && window.pwaInstallPrompt.isInstalled);
+
+            if (isPWAInstalled) {
+              // If this is PWA, show update notification
+              if (typeof window.showUpdateNotification === 'function') {
+                window.showUpdateNotification();
+              }
+            } else {
+              // If this is browser, show install prompt
+              if (window.pwaInstallPrompt && !window.pwaInstallPrompt.isInstalled) {
+                setTimeout(() => {
+                  window.pwaInstallPrompt.showInstallOptions();
+                }, 2000);
+              }
+            }
+          }
+        });
+      });
+    } catch (error) {
+      console.error('❌ PWA: Service Worker registration failed:', error);
+      if (window.DEBUG_MODE) {
+        setTimeout(() => {
+          if (typeof window.showServiceWorkerError === 'function') {
+            window.showServiceWorkerError(error);
+          }
+        }, 2000);
+      }
+    }
+  });
+}
+
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.ready.then((registration) => {
+    console.log('🎯 PWA: Service Worker ready');
+
+    const isPWAInstalled =
+      window.matchMedia('(display-mode: standalone)').matches ||
+      window.navigator.standalone === true;
+
+    console.log('🔍 PWA Installation Status:', {
+      isStandalone: isPWAInstalled,
+      displayMode: window.matchMedia('(display-mode: standalone)').matches,
+      iosStandalone: window.navigator.standalone === true,
+    });
+
+    if (window.pwaInstallPrompt && window.pwaInstallPrompt.setServiceWorkerRegistration) {
+      window.pwaInstallPrompt.setServiceWorkerRegistration(registration);
+      if (isPWAInstalled && !window.pwaInstallPrompt.isInstalled) {
+        console.log('✅ PWA already installed, updating status');
+        window.pwaInstallPrompt.isInstalled = true;
+        window.pwaInstallPrompt.hideInstallPrompts();
+      }
+    }
+
+    if (window.pwaOfflineManager && window.pwaOfflineManager.setServiceWorkerRegistration) {
+      window.pwaOfflineManager.setServiceWorkerRegistration(registration);
+    }
+  });
+
+  // Listen to Service Worker messages
+  navigator.serviceWorker.addEventListener('message', (event) => {
+    console.log('📨 Message from Service Worker:', event.data);
+    if (event.data && event.data.type === 'SW_ACTIVATED') {
+      console.log('🔄 Service Worker activated, checking for updates...');
+
+      const isPWAInstalled =
+        window.matchMedia('(display-mode: standalone)').matches ||
+        window.navigator.standalone === true ||
+        (window.pwaInstallPrompt && window.pwaInstallPrompt.isInstalled);
+
+      if (isPWAInstalled) {
+        setTimeout(() => {
+          if (typeof window.showUpdateNotification === 'function') {
+            window.showUpdateNotification();
+          }
+        }, 1000);
+      } else {
+        if (window.pwaInstallPrompt && !window.pwaInstallPrompt.isInstalled) {
+          setTimeout(() => {
+            window.pwaInstallPrompt.showInstallOptions();
+          }, 2000);
+        }
+      }
+    }
+  });
+}

src/scripts/qr-local.js

@@ -0,0 +1,13 @@
+// Local QR generator adapter (no external CDNs)
+// Exposes: window.generateQRCode(text, { size?: number, margin?: number, errorCorrectionLevel?: 'L'|'M'|'Q'|'H' })
+
+import * as QRCode from 'qrcode';
+
+async function generateQRCode(text, opts = {}) {
+  const size = opts.size || 300;
+  const margin = opts.margin ?? 2;
+  const errorCorrectionLevel = opts.errorCorrectionLevel || 'M';
+  return await QRCode.toDataURL(text, { width: size, margin, errorCorrectionLevel });
+}
+
+window.generateQRCode = generateQRCode;

src/styles/components.css

@@ -201,6 +201,12 @@ main {
     border: 1px solid rgba(75, 85, 99, 0.2);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 }
+/* Selected state override (higher precedence than Tailwind bg-*) */
+.card-minimal--selected {
+    background: rgba(249, 115, 22, 0.15) !important; /* orange-500 @ 0.15 */
+    border-color: rgba(249, 115, 22, 1) !important;   /* border-orange-500 */
+    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3) !important; /* soft ring */
+}
 /* .card-minimal:hover {
     border-color: rgba(249, 115, 22, 0.3);
     transform: translateY(-1px);

src/styles/tw-input.css

@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+