feat: Add security dashboard and Firebase integration

- Add Security tab to session details modal
- Display real-time tracking data from Firebase
- Show participant activity with IP, location, device info
- Display VPN/proxy detection flags
- Show security alerts and warnings
- Store all tracking data in Firebase per session
- Alert users when VPN is detected on join
- Add comprehensive security analytics dashboard

The security data is now:
1. Stored in Firebase under sessions/{code}/tracking/
2. Visible in the Security tab of session details
3. Used to restrict duplicate logins from different IPs
4. Shows VPN usage, location, device fingerprinting

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: Archith

api/track-session.js

@@ -253,9 +253,12 @@ export default async function handler(req, res) {
 
     trackingData.securityFlags = securityFlags;
 
-    // Store in database (you'll need to set up Firebase Admin SDK)
-    // For now, we'll just return the data
-    // In production, store this in Firebase under sessions/${sessionCode}/tracking/${timestamp}
+    // Store in Firebase
+    // Store tracking data in Firebase
+    const trackingRef = `sessions/${sessionCode}/tracking/${Date.now()}_${userId}`;
+    // This would require Firebase Admin SDK setup on Vercel
+    // For now, we'll send it back to the client to store
+    trackingData.firebasePath = trackingRef;
 
     // Return response
     res.status(200).json({

index.html

@@ -374,6 +374,7 @@ <h3>Session: <span id="detail-session-code"></span></h3>
             <button class="detail-tab active" data-tab="notes">📝 Notes</button>
             <button class="detail-tab" data-tab="code">💻 Code</button>
             <button class="detail-tab" data-tab="info">ℹ️ Info</button>
+            <button class="detail-tab" data-tab="security">🔒 Security</button>
           </div>
 
           <div class="tab-content" id="notes-tab" style="display: block;">
@@ -406,6 +407,41 @@ <h3>Session: <span id="detail-session-code"></span></h3>
               <p><strong>Status:</strong> <span id="display-status"></span></p>
             </div>
           </div>
+          
+          <div class="tab-content" id="security-tab" style="display: none;">
+            <div class="security-info-display">
+              <h4>🔍 Session Security & Tracking</h4>
+              <div id="security-tracking-data">
+                <p class="loading-message">Loading security data...</p>
+              </div>
+              
+              <h4>👥 Participant Activity</h4>
+              <div id="participant-activity">
+                <table class="security-table">
+                  <thead>
+                    <tr>
+                      <th>User</th>
+                      <th>Type</th>
+                      <th>Location</th>
+                      <th>Device</th>
+                      <th>IP Hash</th>
+                      <th>Flags</th>
+                    </tr>
+                  </thead>
+                  <tbody id="participant-activity-body">
+                    <!-- Will be populated dynamically -->
+                  </tbody>
+                </table>
+              </div>
+              
+              <h4>⚠️ Security Alerts</h4>
+              <div id="security-alerts">
+                <ul id="security-alerts-list">
+                  <!-- Will be populated dynamically -->
+                </ul>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

scripts/app.js

@@ -1325,7 +1325,15 @@
         this.classList.add('active');
         const tabName = this.getAttribute('data-tab');
         const tabContent = document.getElementById(`${tabName}-tab`);
-        if (tabContent) tabContent.style.display = 'block';
+        if (tabContent) {
+          tabContent.style.display = 'block';
+          
+          // If security tab, load tracking data
+          if (tabName === 'security' && window.SessionTracking) {
+            const sessionCode = document.getElementById('detail-session-code').textContent;
+            window.SessionTracking.displaySecurityTab(sessionCode);
+          }
+        }
       });
     });
 

scripts/session-tracking.js

@@ -35,9 +35,24 @@
         if (data.success) {
           console.log('Session tracked:', data.tracked);
 
+          // Store tracking data in Firebase
+          if (data.fullData && window.firebase) {
+            const trackingPath = data.fullData.firebasePath || `sessions/${sessionCode}/tracking/${Date.now()}_${userId}`;
+            try {
+              await firebase.database().ref(trackingPath).set(data.fullData);
+              console.log('Tracking data stored in Firebase');
+            } catch (fbError) {
+              console.error('Failed to store tracking in Firebase:', fbError);
+            }
+          }
+          
           // Show security warnings if any
           if (data.tracked.vpnDetected) {
             console.warn('VPN/Proxy detected');
+            // Show alert to user if VPN is detected
+            if (eventType === 'join') {
+              alert('⚠️ VPN/Proxy detected. Your session is being monitored for security.');
+            }
           }
 
           if (data.tracked.securityFlags > 0) {
@@ -168,19 +183,126 @@
     // Get tracking summary for a session
     async getSessionTracking(sessionCode) {
       try {
-        // This would fetch from Firebase or your database
-        // For now, return mock data
+        if (!window.firebase) {
+          return null;
+        }
+
+        // Fetch tracking data from Firebase
+        const trackingRef = firebase.database().ref(`sessions/${sessionCode}/tracking`);
+        const snapshot = await trackingRef.once('value');
+        const trackingData = snapshot.val() || {};
+
+        // Process tracking entries
+        const entries = Object.values(trackingData);
+        const participants = new Map();
+        const securityAlerts = [];
+        let vpnCount = 0;
+
+        entries.forEach(entry => {
+          // Group by user
+          if (!participants.has(entry.userId)) {
+            participants.set(entry.userId, {
+              userName: entry.userName,
+              userId: entry.userId,
+              type: entry.metadata?.userType || 'unknown',
+              location: entry.location ? `${entry.location.city}, ${entry.location.country}` : 'Unknown',
+              device: entry.device.browser + ' on ' + entry.device.os,
+              ipHash: entry.ip,
+              vpn: entry.vpn.isVPN,
+              flags: entry.securityFlags || [],
+              joinTime: entry.timestamp,
+              lastSeen: entry.timestamp
+            });
+
+            if (entry.vpn.isVPN) {
+              vpnCount++;
+            }
+          } else {
+            // Update last seen
+            const participant = participants.get(entry.userId);
+            participant.lastSeen = Math.max(participant.lastSeen, entry.timestamp);
+          }
+
+          // Collect security alerts
+          if (entry.securityFlags && entry.securityFlags.length > 0) {
+            entry.securityFlags.forEach(flag => {
+              securityAlerts.push({
+                ...flag,
+                userName: entry.userName,
+                timestamp: entry.timestamp
+              });
+            });
+          }
+        });
+
         return {
-          totalParticipants: 0,
-          vpnUsers: 0,
-          locations: [],
-          devices: [],
-          securityFlags: []
+          totalParticipants: participants.size,
+          vpnUsers: vpnCount,
+          participants: Array.from(participants.values()),
+          securityAlerts: securityAlerts.sort((a, b) => b.timestamp - a.timestamp),
+          rawData: entries
         };
       } catch (error) {
         console.error('Failed to get session tracking:', error);
         return null;
       }
+    },
+
+    // Display tracking data in the security tab
+    displaySecurityTab(sessionCode) {
+      this.getSessionTracking(sessionCode).then(data => {
+        if (!data) {
+          document.getElementById('security-tracking-data').innerHTML = 
+            '<p class="loading-message">No tracking data available</p>';
+          return;
+        }
+
+        // Update summary
+        document.getElementById('security-tracking-data').innerHTML = `
+          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
+            <div style="background: rgba(0,255,0,0.1); padding: 10px; border-radius: 5px;">
+              <strong>Total Participants:</strong> ${data.totalParticipants}
+            </div>
+            <div style="background: ${data.vpnUsers > 0 ? 'rgba(255,0,0,0.1)' : 'rgba(0,255,0,0.1)'}; padding: 10px; border-radius: 5px;">
+              <strong>VPN Users:</strong> ${data.vpnUsers}
+            </div>
+            <div style="background: ${data.securityAlerts.length > 0 ? 'rgba(255,255,0,0.1)' : 'rgba(0,255,0,0.1)'}; padding: 10px; border-radius: 5px;">
+              <strong>Security Alerts:</strong> ${data.securityAlerts.length}
+            </div>
+          </div>
+        `;
+
+        // Update participants table
+        const tbody = document.getElementById('participant-activity-body');
+        tbody.innerHTML = data.participants.map(p => `
+          <tr>
+            <td>${p.userName}</td>
+            <td>${p.type}</td>
+            <td>${p.location}</td>
+            <td>${p.device}</td>
+            <td style="font-family: monospace; font-size: 10px;">${p.ipHash.substring(0, 8)}...</td>
+            <td>
+              ${p.vpn ? '<span class="security-flag vpn">VPN</span>' : ''}
+              ${p.flags.length > 0 ? p.flags.map(f => 
+                `<span class="security-flag ${f.severity}">${f.type.replace(/_/g, ' ')}</span>`
+              ).join('') : '<span style="color: #00ff00;">✓ Clean</span>'}
+            </td>
+          </tr>
+        `).join('');
+
+        // Update security alerts
+        const alertsList = document.getElementById('security-alerts-list');
+        if (data.securityAlerts.length === 0) {
+          alertsList.innerHTML = '<li class="info">No security alerts detected</li>';
+        } else {
+          alertsList.innerHTML = data.securityAlerts.map(alert => `
+            <li class="${alert.severity}">
+              <strong>${alert.userName}:</strong> ${alert.detail}
+              <br><small>${new Date(alert.timestamp).toLocaleString()}</small>
+            </li>
+          `).join('');
+        }
+      });
     }
   };
 

styles/main.css

@@ -2995,3 +2995,103 @@ a.powered-by-firepad {
     font-size: 8px;
   }
 }
+
+/* Security Tab Styles */
+.security-info-display {
+  padding: 20px;
+  color: #fff;
+}
+
+.security-info-display h4 {
+  margin: 20px 0 10px;
+  color: #00ff00;
+  border-bottom: 1px solid #444;
+  padding-bottom: 5px;
+}
+
+.security-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 10px 0;
+}
+
+.security-table th {
+  background: rgba(0, 255, 0, 0.1);
+  color: #00ff00;
+  padding: 10px;
+  text-align: left;
+  border: 1px solid #444;
+  font-size: 12px;
+}
+
+.security-table td {
+  padding: 8px;
+  border: 1px solid #444;
+  color: #fff;
+  font-size: 11px;
+}
+
+.security-table tbody tr:hover {
+  background: rgba(0, 255, 0, 0.05);
+}
+
+#security-alerts-list {
+  list-style: none;
+  padding: 0;
+}
+
+#security-alerts-list li {
+  background: rgba(255, 0, 0, 0.1);
+  border-left: 3px solid #ff0000;
+  padding: 10px;
+  margin: 5px 0;
+  color: #ffaaaa;
+}
+
+#security-alerts-list li.warning {
+  background: rgba(255, 255, 0, 0.1);
+  border-left-color: #ffff00;
+  color: #ffffaa;
+}
+
+#security-alerts-list li.info {
+  background: rgba(0, 100, 255, 0.1);
+  border-left-color: #0064ff;
+  color: #aaccff;
+}
+
+.loading-message {
+  color: #888;
+  font-style: italic;
+  text-align: center;
+  padding: 20px;
+}
+
+.security-flag {
+  display: inline-block;
+  padding: 2px 6px;
+  margin: 0 2px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: bold;
+}
+
+.security-flag.vpn {
+  background: #ff4444;
+  color: white;
+}
+
+.security-flag.proxy {
+  background: #ff8800;
+  color: white;
+}
+
+.security-flag.datacenter {
+  background: #ffaa00;
+  color: black;
+}
+
+.security-flag.suspicious {
+  background: #ff0000;
+  color: white;
+}