`a311f13`

chrome ext, enhancements

Authored by

espadonne 6 months ago

SHA: a311f1334058fdfb635ccc310fb7347a4c6058ec
Parents: 1e4e26d
Tree: 2311a6e

8 changed files

Status	File	+
A	`dashboard/dashboard.js`	825
A	`dashboard/index.html`	243
A	`dashboard/styles.css`	673
A	`extension-chrome/background/pattern-learning.js`	505
A	`extension-chrome/background/screenshot-manager.js`	408
A	`extension-chrome/background/service-worker.js`	393
A	`extension-chrome/background/unified-handler-v3.js`	293
A	`extension-chrome/manifest.json`	80

dashboard/dashboard.jsadded

 +// LooseCannon Analytics Dashboard JavaScript
 +// Real-time monitoring and control interface
++
 +class LooseCannonDashboard {
 +  constructor() {
 +    this.serverUrl = 'http://localhost:8765';
 +    this.ws = null;
 +    this.charts = {};
 +    this.updateInterval = null;
 +    this.startTime = Date.now();
 +    this.data = {
 +      messages: [],
 +      scammers: [],
 +      conversations: new Map(),
 +      patterns: [],
 +      screenshots: []
 +    };
 +    this.init();
 +  }
++
 +  async init() {
 +    await this.checkServerConnection();
 +    this.initializeCharts();
 +    this.setupEventListeners();
 +    this.connectWebSocket();
 +    this.startRealtimeUpdates();
 +    this.loadInitialData();
 +  }
++
 +  async checkServerConnection() {
 +    const statusElement = document.getElementById('serverStatus');
++
 +    try {
 +      const response = await fetch(`${this.serverUrl}/status`);
 +      if (response.ok) {
 +        statusElement.classList.add('connected');
 +        console.log('Server connected');
 +      } else {
 +        throw new Error('Server not responding');
 +      }
 +    } catch (error) {
 +      console.error('Server connection failed:', error);
 +      statusElement.classList.remove('connected');
 +      this.showNotification('Server offline - some features unavailable', 'error');
 +    }
 +  }
++
 +  connectWebSocket() {
 +    // WebSocket for real-time updates
 +    this.ws = new WebSocket('ws://localhost:8766');
++
 +    this.ws.onopen = () => {
 +      console.log('WebSocket connected');
 +      this.showNotification('Connected to real-time feed', 'success');
 +    };
++
 +    this.ws.onmessage = (event) => {
 +      const data = JSON.parse(event.data);
 +      this.handleRealtimeUpdate(data);
 +    };
++
 +    this.ws.onerror = (error) => {
 +      console.error('WebSocket error:', error);
 +    };
++
 +    this.ws.onclose = () => {
 +      console.log('WebSocket disconnected, reconnecting...');
 +      setTimeout(() => this.connectWebSocket(), 5000);
 +    };
 +  }
++
 +  handleRealtimeUpdate(data) {
 +    switch (data.type) {
 +      case 'MESSAGE':
 +        this.addActivityItem(data);
 +        this.updateMessageStats(data);
 +        break;
++
 +      case 'SCAMMER_DETECTED':
 +        this.handleScammerDetection(data);
 +        break;
++
 +      case 'SESSION_UPDATE':
 +        this.updateActiveSessions(data);
 +        break;
++
 +      case 'SCREENSHOT':
 +        this.addScreenshot(data);
 +        break;
++
 +      case 'PATTERN_LEARNED':
 +        this.addPattern(data);
 +        break;
 +    }
++
 +    this.updateCharts();
 +  }
++
 +  initializeCharts() {
 +    const chartOptions = {
 +      responsive: true,
 +      maintainAspectRatio: false,
 +      plugins: {
 +        legend: {
 +          labels: {
 +            color: '#e0e0e0'
 +          }
 +        }
 +      },
 +      scales: {
 +        y: {
 +          grid: {
 +            color: '#333'
 +          },
 +          ticks: {
 +            color: '#888'
 +          }
 +        },
 +        x: {
 +          grid: {
 +            color: '#333'
 +          },
 +          ticks: {
 +            color: '#888'
 +          }
 +        }
 +      }
 +    };
++
 +    // Volume Chart
 +    this.charts.volume = new Chart(document.getElementById('volumeChart'), {
 +      type: 'line',
 +      data: {
 +        labels: this.generateTimeLabels(24),
 +        datasets: [{
 +          label: 'Messages',
 +          data: new Array(24).fill(0),
 +          borderColor: '#667eea',
 +          backgroundColor: 'rgba(102, 126, 234, 0.1)',
 +          tension: 0.4
 +        }]
 +      },
 +      options: chartOptions
 +    });
++
 +    // Detection Chart
 +    this.charts.detection = new Chart(document.getElementById('detectionChart'), {
 +      type: 'bar',
 +      data: {
 +        labels: ['Low', 'Medium', 'High', 'Critical'],
 +        datasets: [{
 +          label: 'Detections',
 +          data: [0, 0, 0, 0],
 +          backgroundColor: ['#10b981', '#f59e0b', '#ef4444', '#7c3aed']
 +        }]
 +      },
 +      options: chartOptions
 +    });
++
 +    // Platform Chart
 +    this.charts.platform = new Chart(document.getElementById('platformChart'), {
 +      type: 'doughnut',
 +      data: {
 +        labels: ['WhatsApp', 'Telegram', 'Messenger'],
 +        datasets: [{
 +          data: [0, 0, 0],
 +          backgroundColor: ['#25d366', '#0088cc', '#0084ff']
 +        }]
 +      },
 +      options: {
 +        ...chartOptions,
 +        plugins: {
 +          legend: {
 +            position: 'bottom',
 +            labels: {
 +              color: '#e0e0e0'
 +            }
 +          }
 +        }
 +      }
 +    });
++
 +    // Response Time Chart
 +    this.charts.response = new Chart(document.getElementById('responseChart'), {
 +      type: 'line',
 +      data: {
 +        labels: this.generateTimeLabels(60, 'minutes'),
 +        datasets: [{
 +          label: 'Response Time (ms)',
 +          data: new Array(60).fill(0),
 +          borderColor: '#3b82f6',
 +          backgroundColor: 'rgba(59, 130, 246, 0.1)',
 +          tension: 0.4
 +        }]
 +      },
 +      options: chartOptions
 +    });
 +  }
++
 +  generateTimeLabels(count, unit = 'hours') {
 +    const labels = [];
 +    for (let i = count - 1; i >= 0; i--) {
 +      if (unit === 'hours') {
 +        labels.push(`${i}h`);
 +      } else {
 +        labels.push(`${i}m`);
 +      }
 +    }
 +    return labels;
 +  }
++
 +  updateCharts() {
 +    // Update volume chart with message counts
 +    const volumeData = this.calculateVolumeData();
 +    this.charts.volume.data.datasets[0].data = volumeData;
 +    this.charts.volume.update();
++
 +    // Update detection chart
 +    const detectionData = this.calculateDetectionData();
 +    this.charts.detection.data.datasets[0].data = detectionData;
 +    this.charts.detection.update();
++
 +    // Update platform distribution
 +    const platformData = this.calculatePlatformData();
 +    this.charts.platform.data.datasets[0].data = platformData;
 +    this.charts.platform.update();
++
 +    // Update response times
 +    const responseData = this.calculateResponseData();
 +    this.charts.response.data.datasets[0].data = responseData;
 +    this.charts.response.update();
 +  }
++
 +  calculateVolumeData() {
 +    // Group messages by hour
 +    const hourCounts = new Array(24).fill(0);
 +    const now = Date.now();
++
 +    this.data.messages.forEach(msg => {
 +      const age = (now - msg.timestamp) / (1000 * 60 * 60);
 +      if (age < 24) {
 +        const hour = Math.floor(age);
 +        hourCounts[23 - hour]++;
 +      }
 +    });
++
 +    return hourCounts;
 +  }
++
 +  calculateDetectionData() {
 +    const counts = [0, 0, 0, 0]; // Low, Medium, High, Critical
++
 +    this.data.scammers.forEach(scammer => {
 +      if (scammer.score < 0.3) counts[0]++;
 +      else if (scammer.score < 0.6) counts[1]++;
 +      else if (scammer.score < 0.9) counts[2]++;
 +      else counts[3]++;
 +    });
++
 +    return counts;
 +  }
++
 +  calculatePlatformData() {
 +    const counts = { whatsapp: 0, telegram: 0, messenger: 0 };
++
 +    this.data.conversations.forEach(conv => {
 +      counts[conv.platform] = (counts[conv.platform] || 0) + 1;
 +    });
++
 +    return [counts.whatsapp, counts.telegram, counts.messenger];
 +  }
++
 +  calculateResponseData() {
 +    // Return last 60 response time measurements
 +    return this.data.messages
 +      .slice(-60)
 +      .map(msg => msg.responseTime || 0);
 +  }
++
 +  addActivityItem(data) {
 +    const feed = document.getElementById('activityFeed');
 +    const item = document.createElement('div');
 +    item.className = 'activity-item';
++
 +    if (data.scammerScore > 0.7) {
 +      item.classList.add('scammer');
 +    }
++
 +    const time = new Date(data.timestamp).toLocaleTimeString();
++
 +    item.innerHTML = `
 +      <span class="activity-time">${time}</span>
 +      <span class="activity-message">${data.message || 'New activity'}</span>
 +    `;
++
 +    feed.insertBefore(item, feed.firstChild);
++
 +    // Keep only last 50 items
 +    while (feed.children.length > 50) {
 +      feed.removeChild(feed.lastChild);
 +    }
 +  }
++
 +  updateMessageStats(data) {
 +    this.data.messages.push(data);
++
 +    // Update counters
 +    document.getElementById('totalMessages').textContent = this.data.messages.length;
++
 +    // Calculate and show trend
 +    const trend = this.calculateTrend('messages');
 +    const trendElement = document.getElementById('messageTrend');
 +    trendElement.textContent = `${trend > 0 ? '+' : ''}${trend}%`;
 +    trendElement.className = trend >= 0 ? 'stat-trend' : 'stat-trend negative';
 +  }
++
 +  handleScammerDetection(data) {
 +    this.data.scammers.push(data);
++
 +    // Update counter
 +    document.getElementById('scammersDetected').textContent = this.data.scammers.length;
++
 +    // Add special notification
 +    this.showNotification(`Scammer detected! Confidence: ${(data.score * 100).toFixed(0)}%`, 'warning');
++
 +    // Flash the stat card
 +    const card = document.querySelector('.stat-card.danger');
 +    card.style.animation = 'pulse 0.5s';
 +    setTimeout(() => {
 +      card.style.animation = '';
 +    }, 500);
++
 +    // Add to activity feed
 +    this.addActivityItem({
 +      ...data,
 +      message: `Scammer detected on ${data.platform} (${(data.score * 100).toFixed(0)}% confidence)`
 +    });
 +  }
++
 +  updateActiveSessions(data) {
 +    document.getElementById('activeSessions').textContent = data.count || 0;
 +  }
++
 +  addScreenshot(data) {
 +    const grid = document.getElementById('evidenceGrid');
++
 +    // Remove placeholder if exists
 +    const placeholder = grid.querySelector('.evidence-placeholder');
 +    if (placeholder) {
 +      placeholder.remove();
 +    }
++
 +    const item = document.createElement('div');
 +    item.className = 'evidence-item';
 +    item.innerHTML = `
 +      <img src="${data.thumbnail}" alt="Evidence">
 +      <div class="evidence-meta">
 +        ${data.platform} - ${new Date(data.timestamp).toLocaleString()}
 +      </div>
 +    `;
++
 +    grid.insertBefore(item, grid.firstChild);
++
 +    // Keep only last 12 screenshots
 +    while (grid.children.length > 12) {
 +      grid.removeChild(grid.lastChild);
 +    }
++
 +    this.data.screenshots.push(data);
 +  }
++
 +  addPattern(data) {
 +    this.data.patterns.push(data);
++
 +    // Update pattern stats
 +    document.getElementById('totalPatterns').textContent = this.data.patterns.length;
 +    document.getElementById('patternAccuracy').textContent =
 +      `${(this.calculatePatternAccuracy() * 100).toFixed(0)}%`;
++
 +    // Update patterns list
 +    const list = document.getElementById('patternsList');
 +    const item = document.createElement('div');
 +    item.className = 'pattern-item';
 +    item.innerHTML = `
 +      <span class="pattern-type">${data.type}</span>
 +      <span class="pattern-count">${data.occurrences} occurrences</span>
 +    `;
++
 +    list.insertBefore(item, list.firstChild);
++
 +    // Keep only last 10 patterns
 +    while (list.children.length > 10) {
 +      list.removeChild(list.lastChild);
 +    }
 +  }
++
 +  calculatePatternAccuracy() {
 +    if (this.data.patterns.length === 0) return 0;
++
 +    const correct = this.data.patterns.filter(p => p.verified).length;
 +    return correct / this.data.patterns.length;
 +  }
++
 +  calculateTrend(metric) {
 +    // Simple trend calculation (current hour vs previous hour)
 +    const now = Date.now();
 +    const hourAgo = now - (60 * 60 * 1000);
++
 +    let current = 0;
 +    let previous = 0;
++
 +    if (metric === 'messages') {
 +      this.data.messages.forEach(msg => {
 +        if (msg.timestamp > hourAgo) current++;
 +        else if (msg.timestamp > (hourAgo - 60 * 60 * 1000)) previous++;
 +      });
 +    }
++
 +    if (previous === 0) return current > 0 ? 100 : 0;
 +    return Math.round(((current - previous) / previous) * 100);
 +  }
++
 +  setupEventListeners() {
 +    // Export button
 +    document.getElementById('exportBtn').addEventListener('click', () => {
 +      this.exportData();
 +    });
++
 +    // Emergency stop
 +    document.getElementById('emergencyStop').addEventListener('click', () => {
 +      this.emergencyStop();
 +    });
++
 +    // Clear data
 +    document.getElementById('clearDataBtn').addEventListener('click', () => {
 +      this.clearOldData();
 +    });
++
 +    // Sync patterns
 +    document.getElementById('syncBtn').addEventListener('click', () => {
 +      this.syncPatterns();
 +    });
++
 +    // Personality builder
 +    document.getElementById('personalityBtn').addEventListener('click', () => {
 +      this.openPersonalityBuilder();
 +    });
++
 +    // Conversation replay
 +    document.getElementById('replayBtn').addEventListener('click', () => {
 +      this.openConversationReplay();
 +    });
++
 +    // Modal controls
 +    document.getElementById('modalClose').addEventListener('click', () => {
 +      document.getElementById('personalityModal').classList.remove('active');
 +    });
++
 +    document.getElementById('replayClose').addEventListener('click', () => {
 +      document.getElementById('replayModal').classList.remove('active');
 +    });
++
 +    // Personality form
 +    document.getElementById('personalityForm').addEventListener('submit', (e) => {
 +      e.preventDefault();
 +      this.savePersonality();
 +    });
++
 +    // Test personality
 +    document.getElementById('testPersonality').addEventListener('click', () => {
 +      this.testPersonality();
 +    });
++
 +    // Temperature slider
 +    document.getElementById('temperature').addEventListener('input', (e) => {
 +      document.getElementById('tempValue').textContent = e.target.value;
 +    });
 +  }
++
 +  async exportData() {
 +    try {
 +      const data = {
 +        timestamp: new Date().toISOString(),
 +        messages: this.data.messages,
 +        scammers: this.data.scammers,
 +        patterns: this.data.patterns,
 +        screenshots: this.data.screenshots.map(s => s.id),
 +        conversations: Array.from(this.data.conversations.values())
 +      };
++
 +      const blob = new Blob([JSON.stringify(data, null, 2)], {
 +        type: 'application/json'
 +      });
++
 +      const url = URL.createObjectURL(blob);
 +      const a = document.createElement('a');
 +      a.href = url;
 +      a.download = `loosecannon-export-${Date.now()}.json`;
 +      a.click();
++
 +      this.showNotification('Data exported successfully', 'success');
 +    } catch (error) {
 +      console.error('Export error:', error);
 +      this.showNotification('Export failed', 'error');
 +    }
 +  }
++
 +  async emergencyStop() {
 +    if (!confirm('This will stop ALL active LooseCannon sessions. Continue?')) {
 +      return;
 +    }
++
 +    try {
 +      const response = await fetch(`${this.serverUrl}/emergency-stop`, {
 +        method: 'POST'
 +      });
++
 +      if (response.ok) {
 +        this.showNotification('Emergency stop activated', 'warning');
++
 +        // Clear active sessions display
 +        document.getElementById('activeSessions').textContent = '0';
++
 +        // Send stop command via WebSocket
 +        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
 +          this.ws.send(JSON.stringify({ type: 'EMERGENCY_STOP' }));
 +        }
 +      }
 +    } catch (error) {
 +      console.error('Emergency stop error:', error);
 +    }
 +  }
++
 +  async clearOldData() {
 +    if (!confirm('Clear data older than 24 hours?')) {
 +      return;
 +    }
++
 +    const cutoff = Date.now() - (24 * 60 * 60 * 1000);
++
 +    // Filter data
 +    this.data.messages = this.data.messages.filter(m => m.timestamp > cutoff);
 +    this.data.scammers = this.data.scammers.filter(s => s.timestamp > cutoff);
 +    this.data.screenshots = this.data.screenshots.filter(s => s.timestamp > cutoff);
++
 +    // Update displays
 +    this.updateCharts();
 +    this.showNotification('Old data cleared', 'success');
 +  }
++
 +  async syncPatterns() {
 +    try {
 +      const response = await fetch(`${this.serverUrl}/patterns/sync`, {
 +        method: 'GET'
 +      });
++
 +      if (response.ok) {
 +        const patterns = await response.json();
++
 +        // Merge with local patterns
 +        patterns.forEach(pattern => {
 +          if (!this.data.patterns.find(p => p.id === pattern.id)) {
 +            this.addPattern(pattern);
 +          }
 +        });
++
 +        this.showNotification(`Synced ${patterns.length} patterns`, 'success');
 +      }
 +    } catch (error) {
 +      console.error('Pattern sync error:', error);
 +      this.showNotification('Pattern sync failed', 'error');
 +    }
 +  }
++
 +  openPersonalityBuilder() {
 +    document.getElementById('personalityModal').classList.add('active');
 +  }
++
 +  async savePersonality() {
 +    const personality = {
 +      id: document.getElementById('personalityName').value.toLowerCase().replace(/\s+/g, '-'),
 +      name: document.getElementById('personalityName').value,
 +      systemPrompt: document.getElementById('systemPrompt').value,
 +      temperature: parseFloat(document.getElementById('temperature').value),
 +      examples: document.getElementById('examples').value.split('\n').filter(e => e.trim())
 +    };
++
 +    try {
 +      const response = await fetch(`${this.serverUrl}/personalities`, {
 +        method: 'POST',
 +        headers: { 'Content-Type': 'application/json' },
 +        body: JSON.stringify(personality)
 +      });
++
 +      if (response.ok) {
 +        this.showNotification('Personality saved successfully', 'success');
 +        document.getElementById('personalityModal').classList.remove('active');
 +        document.getElementById('personalityForm').reset();
 +      }
 +    } catch (error) {
 +      console.error('Save personality error:', error);
 +      this.showNotification('Failed to save personality', 'error');
 +    }
 +  }
++
 +  async testPersonality() {
 +    const testPrompt = "Hello, I have an important message about your account.";
 +    const systemPrompt = document.getElementById('systemPrompt').value;
 +    const temperature = parseFloat(document.getElementById('temperature').value);
++
 +    try {
 +      const response = await fetch(`${this.serverUrl}/test-personality`, {
 +        method: 'POST',
 +        headers: { 'Content-Type': 'application/json' },
 +        body: JSON.stringify({
 +          systemPrompt,
 +          temperature,
 +          message: testPrompt
 +        })
 +      });
++
 +      if (response.ok) {
 +        const result = await response.json();
 +        document.getElementById('testOutput').innerHTML = `
 +          <strong>Test Input:</strong> "${testPrompt}"<br>
 +          <strong>Response:</strong> "${result.response}"
 +        `;
 +      }
 +    } catch (error) {
 +      console.error('Test personality error:', error);
 +      document.getElementById('testOutput').innerHTML = 'Test failed';
 +    }
 +  }
++
 +  openConversationReplay() {
 +    document.getElementById('replayModal').classList.add('active');
 +    this.loadConversations();
 +  }
++
 +  async loadConversations() {
 +    const select = document.getElementById('conversationSelect');
 +    select.innerHTML = '<option>Select a conversation...</option>';
++
 +    this.data.conversations.forEach((conv, id) => {
 +      const option = document.createElement('option');
 +      option.value = id;
 +      option.textContent = `${conv.platform} - ${conv.chatId} (${conv.messages.length} messages)`;
 +      select.appendChild(option);
 +    });
 +  }
++
 +  startRealtimeUpdates() {
 +    // Update uptime
 +    setInterval(() => {
 +      const uptime = Date.now() - this.startTime;
 +      const hours = Math.floor(uptime / (1000 * 60 * 60));
 +      const minutes = Math.floor((uptime % (1000 * 60 * 60)) / (1000 * 60));
 +      document.getElementById('uptime').textContent = `${hours}h ${minutes}m`;
 +    }, 60000);
++
 +    // Update last updated
 +    setInterval(() => {
 +      document.getElementById('lastUpdated').textContent = new Date().toLocaleTimeString();
 +    }, 1000);
++
 +    // Update response time
 +    setInterval(() => {
 +      const avgResponse = this.calculateAverageResponseTime();
 +      document.getElementById('responseTime').textContent = `${avgResponse}ms`;
 +    }, 5000);
 +  }
++
 +  calculateAverageResponseTime() {
 +    if (this.data.messages.length === 0) return 0;
++
 +    const recent = this.data.messages.slice(-20);
 +    const sum = recent.reduce((acc, msg) => acc + (msg.responseTime || 0), 0);
 +    return Math.round(sum / recent.length);
 +  }
++
 +  async loadInitialData() {
 +    try {
 +      // Load analytics
 +      const analyticsResponse = await fetch(`${this.serverUrl}/analytics`);
 +      if (analyticsResponse.ok) {
 +        const analytics = await analyticsResponse.json();
 +        document.getElementById('totalMessages').textContent = analytics.totalMessages || 0;
 +        document.getElementById('scammersDetected').textContent = analytics.scammersDetected || 0;
 +      }
++
 +      // Load active conversations
 +      const conversationsResponse = await fetch(`${this.serverUrl}/conversations/active`);
 +      if (conversationsResponse.ok) {
 +        const conversations = await conversationsResponse.json();
 +        this.updateConversationCards(conversations);
 +      }
++
 +      // Load patterns
 +      const patternsResponse = await fetch(`${this.serverUrl}/patterns`);
 +      if (patternsResponse.ok) {
 +        const patterns = await patternsResponse.json();
 +        patterns.forEach(pattern => this.addPattern(pattern));
 +      }
 +    } catch (error) {
 +      console.error('Error loading initial data:', error);
 +    }
 +  }
++
 +  updateConversationCards(conversations) {
 +    const grid = document.getElementById('conversationsGrid');
 +    grid.innerHTML = '';
++
 +    if (conversations.length === 0) {
 +      grid.innerHTML = `
 +        <div class="conversation-card">
 +          <div class="conversation-header">
 +            <span class="conversation-id">No active conversations</span>
 +          </div>
 +        </div>
 +      `;
 +      return;
 +    }
++
 +    conversations.forEach(conv => {
 +      this.data.conversations.set(conv.id, conv);
++
 +      const card = document.createElement('div');
 +      card.className = 'conversation-card';
 +      card.innerHTML = `
 +        <div class="conversation-header">
 +          <span class="platform-badge ${conv.platform}">${conv.platform}</span>
 +          <span class="conversation-id">${conv.chatId}</span>
 +        </div>
 +        <div class="conversation-stats">
 +          <span>Messages: ${conv.messageCount}</span>
 +          <span>Score: ${conv.scammerScore.toFixed(2)}</span>
 +          <span>Duration: ${Math.round(conv.duration / 60000)}m</span>
 +        </div>
 +      `;
++
 +      card.addEventListener('click', () => {
 +        this.viewConversation(conv.id);
 +      });
++
 +      grid.appendChild(card);
 +    });
++
 +    document.getElementById('activeSessions').textContent = conversations.length;
 +  }
++
 +  viewConversation(conversationId) {
 +    const conv = this.data.conversations.get(conversationId);
 +    if (!conv) return;
++
 +    // Open replay modal with this conversation
 +    document.getElementById('replayModal').classList.add('active');
 +    document.getElementById('conversationSelect').value = conversationId;
 +    this.loadConversationMessages(conversationId);
 +  }
++
 +  loadConversationMessages(conversationId) {
 +    const conv = this.data.conversations.get(conversationId);
 +    if (!conv) return;
++
 +    const container = document.getElementById('replayMessages');
 +    container.innerHTML = '';
++
 +    conv.messages.forEach(msg => {
 +      const msgDiv = document.createElement('div');
 +      msgDiv.className = `replay-message ${msg.sender}`;
 +      msgDiv.innerHTML = `
 +        <div class="message-time">${new Date(msg.timestamp).toLocaleTimeString()}</div>
 +        <div class="message-content">${msg.content}</div>
 +      `;
 +      container.appendChild(msgDiv);
 +    });
++
 +    // Update stats
 +    document.getElementById('replayStats').innerHTML = `
 +      <span>Messages: ${conv.messages.length}</span>
 +      <span>Duration: ${Math.round(conv.duration / 60000)}m</span>
 +      <span>Scammer Score: ${conv.scammerScore.toFixed(2)}</span>
 +    `;
 +  }
++
 +  showNotification(message, type = 'info') {
 +    // Create notification element
 +    const notification = document.createElement('div');
 +    notification.className = `notification ${type}`;
 +    notification.textContent = message;
 +    notification.style.cssText = `
 +      position: fixed;
 +      top: 80px;
 +      right: 20px;
 +      padding: 1rem 1.5rem;
 +      border-radius: 8px;
 +      z-index: 2000;
 +      animation: slideIn 0.3s ease;
 +    `;
++
 +    // Style based on type
 +    const colors = {
 +      info: '#3b82f6',
 +      success: '#10b981',
 +      warning: '#f59e0b',
 +      error: '#ef4444'
 +    };
++
 +    notification.style.background = colors[type] || colors.info;
 +    notification.style.color = 'white';
++
 +    document.body.appendChild(notification);
++
 +    // Auto remove after 5 seconds
 +    setTimeout(() => {
 +      notification.style.animation = 'slideOut 0.3s ease';
 +      setTimeout(() => notification.remove(), 300);
 +    }, 5000);
 +  }
 +}
++
 +// Initialize dashboard when DOM is ready
 +document.addEventListener('DOMContentLoaded', () => {
 +  window.dashboard = new LooseCannonDashboard();
 +});

dashboard/index.htmladded

 +<!DOCTYPE html>
 +<html lang="en">
 +<head>
 +  <meta charset="UTF-8">
 +  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +  <title>LooseCannon Analytics Dashboard</title>
 +  <link rel="stylesheet" href="styles.css">
 +  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
 +</head>
 +<body>
 +  <div class="dashboard">
 +    <!-- Header -->
 +    <header class="dashboard-header">
 +      <div class="header-content">
 +        <h1>LooseCannon Command Center</h1>
 +        <div class="server-status">
 +          <span class="status-indicator" id="serverStatus"></span>
 +          <span>Server: <span id="serverUrl">localhost:8765</span></span>
 +        </div>
 +      </div>
 +    </header>
++
 +    <!-- Main Grid -->
 +    <main class="dashboard-main">
 +      <!-- Stats Cards -->
 +      <section class="stats-grid">
 +        <div class="stat-card">
 +          <div class="stat-value" id="totalMessages">0</div>
 +          <div class="stat-label">Messages Processed</div>
 +          <div class="stat-trend" id="messageTrend">+0%</div>
 +        </div>
++
 +        <div class="stat-card danger">
 +          <div class="stat-value" id="scammersDetected">0</div>
 +          <div class="stat-label">Scammers Detected</div>
 +          <div class="stat-trend" id="scammerTrend">+0%</div>
 +        </div>
++
 +        <div class="stat-card success">
 +          <div class="stat-value" id="activeSessions">0</div>
 +          <div class="stat-label">Active Sessions</div>
 +          <div class="stat-indicator">
 +            <span class="pulse"></span>
 +            Live
 +          </div>
 +        </div>
++
 +        <div class="stat-card info">
 +          <div class="stat-value" id="responseTime">0ms</div>
 +          <div class="stat-label">Avg Response Time</div>
 +          <div class="stat-trend" id="responseTrend">↓ 0%</div>
 +        </div>
 +      </section>
++
 +      <!-- Real-time Activity Feed -->
 +      <section class="activity-section">
 +        <h2>Live Activity</h2>
 +        <div class="activity-feed" id="activityFeed">
 +          <div class="activity-item">
 +            <span class="activity-time">Waiting for activity...</span>
 +            <span class="activity-message">System ready</span>
 +          </div>
 +        </div>
 +      </section>
++
 +      <!-- Charts Section -->
 +      <section class="charts-section">
 +        <div class="chart-container">
 +          <h3>Message Volume (24h)</h3>
 +          <canvas id="volumeChart"></canvas>
 +        </div>
++
 +        <div class="chart-container">
 +          <h3>Scammer Detection Rate</h3>
 +          <canvas id="detectionChart"></canvas>
 +        </div>
++
 +        <div class="chart-container">
 +          <h3>Platform Distribution</h3>
 +          <canvas id="platformChart"></canvas>
 +        </div>
++
 +        <div class="chart-container">
 +          <h3>Response Times</h3>
 +          <canvas id="responseChart"></canvas>
 +        </div>
 +      </section>
++
 +      <!-- Active Conversations -->
 +      <section class="conversations-section">
 +        <h2>Active Conversations</h2>
 +        <div class="conversations-grid" id="conversationsGrid">
 +          <div class="conversation-card">
 +            <div class="conversation-header">
 +              <span class="platform-badge whatsapp">WhatsApp</span>
 +              <span class="conversation-id">No active conversations</span>
 +            </div>
 +            <div class="conversation-stats">
 +              <span>Messages: 0</span>
 +              <span>Score: 0.0</span>
 +              <span>Duration: 0m</span>
 +            </div>
 +          </div>
 +        </div>
 +      </section>
++
 +      <!-- Screenshot Evidence -->
 +      <section class="evidence-section">
 +        <h2>Recent Evidence</h2>
 +        <div class="evidence-grid" id="evidenceGrid">
 +          <div class="evidence-placeholder">
 +            No screenshots captured yet
 +          </div>
 +        </div>
 +      </section>
++
 +      <!-- Pattern Learning -->
 +      <section class="patterns-section">
 +        <h2>Learned Patterns</h2>
 +        <div class="patterns-container">
 +          <div class="pattern-stats">
 +            <div class="pattern-stat">
 +              <span class="pattern-value" id="totalPatterns">0</span>
 +              <span class="pattern-label">Patterns Identified</span>
 +            </div>
 +            <div class="pattern-stat">
 +              <span class="pattern-value" id="patternAccuracy">0%</span>
 +              <span class="pattern-label">Detection Accuracy</span>
 +            </div>
 +          </div>
 +          <div class="patterns-list" id="patternsList">
 +            <div class="pattern-item">
 +              <span class="pattern-type">No patterns learned yet</span>
 +              <span class="pattern-count">0 occurrences</span>
 +            </div>
 +          </div>
 +        </div>
 +      </section>
++
 +      <!-- Controls -->
 +      <section class="controls-section">
 +        <h2>System Controls</h2>
 +        <div class="controls-grid">
 +          <button class="control-btn primary" id="exportBtn">
 +            Export Data
 +          </button>
 +          <button class="control-btn danger" id="emergencyStop">
 +            Emergency Stop All
 +          </button>
 +          <button class="control-btn" id="clearDataBtn">
 +            Clear Old Data
 +          </button>
 +          <button class="control-btn" id="syncBtn">
 +            Sync Patterns
 +          </button>
 +          <button class="control-btn success" id="personalityBtn">
 +            Personality Builder
 +          </button>
 +          <button class="control-btn info" id="replayBtn">
 +            Conversation Replay
 +          </button>
 +        </div>
 +      </section>
 +    </main>
++
 +    <!-- Footer -->
 +    <footer class="dashboard-footer">
 +      <div class="footer-content">
 +        <span>LooseCannon v0.3.0</span>
 +        <span>Uptime: <span id="uptime">0h 0m</span></span>
 +        <span>Last Updated: <span id="lastUpdated">Never</span></span>
 +      </div>
 +    </footer>
 +  </div>
++
 +  <!-- Personality Builder Modal -->
 +  <div class="modal" id="personalityModal">
 +    <div class="modal-content">
 +      <div class="modal-header">
 +        <h2>Personality Builder</h2>
 +        <button class="modal-close" id="modalClose">&times;</button>
 +      </div>
 +      <div class="modal-body">
 +        <form id="personalityForm">
 +          <div class="form-group">
 +            <label>Personality Name</label>
 +            <input type="text" id="personalityName" placeholder="e.g., Overly Helpful">
 +          </div>
 +          <div class="form-group">
 +            <label>System Prompt</label>
 +            <textarea id="systemPrompt" rows="6" placeholder="Describe the personality traits and behavior..."></textarea>
 +          </div>
 +          <div class="form-group">
 +            <label>Temperature (0.1 - 1.0)</label>
 +            <input type="range" id="temperature" min="0.1" max="1" step="0.1" value="0.8">
 +            <span id="tempValue">0.8</span>
 +          </div>
 +          <div class="form-group">
 +            <label>Example Responses</label>
 +            <textarea id="examples" rows="4" placeholder="One example per line..."></textarea>
 +          </div>
 +          <div class="form-buttons">
 +            <button type="button" class="btn secondary" id="testPersonality">Test</button>
 +            <button type="submit" class="btn primary">Save Personality</button>
 +          </div>
 +        </form>
 +        <div class="test-output" id="testOutput"></div>
 +      </div>
 +    </div>
 +  </div>
++
 +  <!-- Conversation Replay Modal -->
 +  <div class="modal" id="replayModal">
 +    <div class="modal-content">
 +      <div class="modal-header">
 +        <h2>Conversation Replay</h2>
 +        <button class="modal-close" id="replayClose">&times;</button>
 +      </div>
 +      <div class="modal-body">
 +        <select id="conversationSelect">
 +          <option>Select a conversation...</option>
 +        </select>
 +        <div class="replay-container" id="replayContainer">
 +          <div class="replay-controls">
 +            <button id="playBtn">▶ Play</button>
 +            <button id="pauseBtn">⏸ Pause</button>
 +            <button id="speedBtn">Speed: 1x</button>
 +            <input type="range" id="replayProgress" min="0" max="100" value="0">
 +          </div>
 +          <div class="replay-messages" id="replayMessages"></div>
 +          <div class="replay-stats" id="replayStats">
 +            <span>Messages: 0</span>
 +            <span>Duration: 0m</span>
 +            <span>Scammer Score: 0.0</span>
 +          </div>
 +        </div>
 +      </div>
 +    </div>
 +  </div>
++
 +  <script src="dashboard.js" type="module"></script>
 +</body>
 +</html>

dashboard/styles.cssadded

 +/* LooseCannon Analytics Dashboard Styles */
++
 +:root {
 +  --bg-primary: #0f0f0f;
 +  --bg-secondary: #1a1a1a;
 +  --bg-card: #242424;
 +  --text-primary: #e0e0e0;
 +  --text-secondary: #888;
 +  --accent: #667eea;
 +  --success: #10b981;
 +  --danger: #ef4444;
 +  --warning: #f59e0b;
 +  --info: #3b82f6;
 +  --border: #333;
 +}
++
 +* {
 +  margin: 0;
 +  padding: 0;
 +  box-sizing: border-box;
 +}
++
 +body {
 +  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
 +  background: var(--bg-primary);
 +  color: var(--text-primary);
 +  line-height: 1.6;
 +}
++
 +/* Dashboard Layout */
 +.dashboard {
 +  min-height: 100vh;
 +  display: flex;
 +  flex-direction: column;
 +}
++
 +/* Header */
 +.dashboard-header {
 +  background: var(--bg-secondary);
 +  border-bottom: 1px solid var(--border);
 +  padding: 1.5rem 2rem;
 +  position: sticky;
 +  top: 0;
 +  z-index: 100;
 +}
++
 +.header-content {
 +  display: flex;
 +  justify-content: space-between;
 +  align-items: center;
 +  max-width: 1400px;
 +  margin: 0 auto;
 +}
++
 +.dashboard-header h1 {
 +  font-size: 1.8rem;
 +  font-weight: 600;
 +  background: linear-gradient(135deg, var(--accent), #764ba2);
 +  -webkit-background-clip: text;
 +  -webkit-text-fill-color: transparent;
 +}
++
 +.server-status {
 +  display: flex;
 +  align-items: center;
 +  gap: 0.5rem;
 +  font-size: 0.9rem;
 +  color: var(--text-secondary);
 +}
++
 +.status-indicator {
 +  width: 10px;
 +  height: 10px;
 +  border-radius: 50%;
 +  background: var(--danger);
 +  animation: pulse 2s infinite;
 +}
++
 +.status-indicator.connected {
 +  background: var(--success);
 +}
++
 +/* Main Content */
 +.dashboard-main {
 +  flex: 1;
 +  padding: 2rem;
 +  max-width: 1400px;
 +  margin: 0 auto;
 +  width: 100%;
 +}
++
 +/* Stats Grid */
 +.stats-grid {
 +  display: grid;
 +  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 +  gap: 1.5rem;
 +  margin-bottom: 2rem;
 +}
++
 +.stat-card {
 +  background: var(--bg-card);
 +  border: 1px solid var(--border);
 +  border-radius: 12px;
 +  padding: 1.5rem;
 +  transition: transform 0.2s, border-color 0.2s;
 +}
++
 +.stat-card:hover {
 +  transform: translateY(-2px);
 +  border-color: var(--accent);
 +}
++
 +.stat-card.danger {
 +  border-color: var(--danger);
 +}
++
 +.stat-card.success {
 +  border-color: var(--success);
 +}
++
 +.stat-card.info {
 +  border-color: var(--info);
 +}
++
 +.stat-value {
 +  font-size: 2.5rem;
 +  font-weight: bold;
 +  margin-bottom: 0.5rem;
 +}
++
 +.stat-label {
 +  color: var(--text-secondary);
 +  font-size: 0.9rem;
 +  text-transform: uppercase;
 +  letter-spacing: 1px;
 +}
++
 +.stat-trend {
 +  margin-top: 0.5rem;
 +  font-size: 0.85rem;
 +  color: var(--success);
 +}
++
 +.stat-trend.negative {
 +  color: var(--danger);
 +}
++
 +.stat-indicator {
 +  display: flex;
 +  align-items: center;
 +  gap: 0.5rem;
 +  margin-top: 0.5rem;
 +  font-size: 0.85rem;
 +}
++
 +.pulse {
 +  width: 8px;
 +  height: 8px;
 +  background: var(--success);
 +  border-radius: 50%;
 +  animation: pulse 1.5s infinite;
 +}
++
 +/* Activity Feed */
 +.activity-section {
 +  background: var(--bg-card);
 +  border: 1px solid var(--border);
 +  border-radius: 12px;
 +  padding: 1.5rem;
 +  margin-bottom: 2rem;
 +}
++
 +.activity-section h2 {
 +  margin-bottom: 1rem;
 +  font-size: 1.2rem;
 +  color: var(--text-primary);
 +}
++
 +.activity-feed {
 +  max-height: 300px;
 +  overflow-y: auto;
 +  space-y: 0.5rem;
 +}
++
 +.activity-item {
 +  display: flex;
 +  gap: 1rem;
 +  padding: 0.75rem;
 +  background: var(--bg-secondary);
 +  border-radius: 8px;
 +  margin-bottom: 0.5rem;
 +  font-size: 0.9rem;
 +}
++
 +.activity-time {
 +  color: var(--text-secondary);
 +  min-width: 80px;
 +}
++
 +.activity-message {
 +  flex: 1;
 +}
++
 +.activity-item.scammer {
 +  border-left: 3px solid var(--danger);
 +}
++
 +.activity-item.success {
 +  border-left: 3px solid var(--success);
 +}
++
 +/* Charts Section */
 +.charts-section {
 +  display: grid;
 +  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
 +  gap: 1.5rem;
 +  margin-bottom: 2rem;
 +}
++
 +.chart-container {
 +  background: var(--bg-card);
 +  border: 1px solid var(--border);
 +  border-radius: 12px;
 +  padding: 1.5rem;
 +}
++
 +.chart-container h3 {
 +  margin-bottom: 1rem;
 +  font-size: 1rem;
 +  color: var(--text-primary);
 +}
++
 +.chart-container canvas {
 +  max-height: 250px;
 +}
++
 +/* Conversations */
 +.conversations-section {
 +  background: var(--bg-card);
 +  border: 1px solid var(--border);
 +  border-radius: 12px;
 +  padding: 1.5rem;
 +  margin-bottom: 2rem;
 +}
++
 +.conversations-section h2 {
 +  margin-bottom: 1rem;
 +  font-size: 1.2rem;
 +}
++
 +.conversations-grid {
 +  display: grid;
 +  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 +  gap: 1rem;
 +}
++
 +.conversation-card {
 +  background: var(--bg-secondary);
 +  border: 1px solid var(--border);
 +  border-radius: 8px;
 +  padding: 1rem;
 +  transition: border-color 0.2s;
 +}
++
 +.conversation-card:hover {
 +  border-color: var(--accent);
 +  cursor: pointer;
 +}
++
 +.conversation-header {
 +  display: flex;
 +  justify-content: space-between;
 +  align-items: center;
 +  margin-bottom: 0.75rem;
 +}
++
 +.platform-badge {
 +  padding: 0.25rem 0.5rem;
 +  border-radius: 4px;
 +  font-size: 0.75rem;
 +  text-transform: uppercase;
 +  font-weight: bold;
 +}
++
 +.platform-badge.whatsapp {
 +  background: #25d366;
 +  color: white;
 +}
++
 +.platform-badge.telegram {
 +  background: #0088cc;
 +  color: white;
 +}
++
 +.platform-badge.messenger {
 +  background: #0084ff;
 +  color: white;
 +}
++
 +.conversation-id {
 +  font-size: 0.85rem;
 +  color: var(--text-secondary);
 +}
++
 +.conversation-stats {
 +  display: flex;
 +  gap: 1rem;
 +  font-size: 0.85rem;
 +  color: var(--text-secondary);
 +}
++
 +/* Evidence Section */
 +.evidence-section {
 +  background: var(--bg-card);
 +  border: 1px solid var(--border);
 +  border-radius: 12px;
 +  padding: 1.5rem;
 +  margin-bottom: 2rem;
 +}
++
 +.evidence-section h2 {
 +  margin-bottom: 1rem;
 +}
++
 +.evidence-grid {
 +  display: grid;
 +  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 +  gap: 1rem;
 +}
++
 +.evidence-item {
 +  position: relative;
 +  border: 1px solid var(--border);
 +  border-radius: 8px;
 +  overflow: hidden;
 +  cursor: pointer;
 +  transition: transform 0.2s;
 +}
++
 +.evidence-item:hover {
 +  transform: scale(1.05);
 +}
++
 +.evidence-item img {
 +  width: 100%;
 +  height: 150px;
 +  object-fit: cover;
 +}
++
 +.evidence-meta {
 +  position: absolute;
 +  bottom: 0;
 +  left: 0;
 +  right: 0;
 +  background: rgba(0, 0, 0, 0.8);
 +  padding: 0.5rem;
 +  font-size: 0.75rem;
 +  color: white;
 +}
++
 +.evidence-placeholder {
 +  grid-column: 1 / -1;
 +  text-align: center;
 +  color: var(--text-secondary);
 +  padding: 2rem;
 +}
++
 +/* Patterns Section */
 +.patterns-section {
 +  background: var(--bg-card);
 +  border: 1px solid var(--border);
 +  border-radius: 12px;
 +  padding: 1.5rem;
 +  margin-bottom: 2rem;
 +}
++
 +.patterns-container {
 +  display: grid;
 +  grid-template-columns: 200px 1fr;
 +  gap: 2rem;
 +}
++
 +.pattern-stats {
 +  display: flex;
 +  flex-direction: column;
 +  gap: 1rem;
 +}
++
 +.pattern-stat {
 +  text-align: center;
 +  padding: 1rem;
 +  background: var(--bg-secondary);
 +  border-radius: 8px;
 +}
++
 +.pattern-value {
 +  display: block;
 +  font-size: 2rem;
 +  font-weight: bold;
 +  color: var(--accent);
 +}
++
 +.pattern-label {
 +  display: block;
 +  font-size: 0.8rem;
 +  color: var(--text-secondary);
 +  margin-top: 0.25rem;
 +}
++
 +.patterns-list {
 +  max-height: 200px;
 +  overflow-y: auto;
 +}
++
 +.pattern-item {
 +  display: flex;
 +  justify-content: space-between;
 +  padding: 0.75rem;
 +  background: var(--bg-secondary);
 +  border-radius: 6px;
 +  margin-bottom: 0.5rem;
 +}
++
 +.pattern-type {
 +  font-weight: 500;
 +}
++
 +.pattern-count {
 +  color: var(--text-secondary);
 +  font-size: 0.9rem;
 +}
++
 +/* Controls */
 +.controls-section {
 +  background: var(--bg-card);
 +  border: 1px solid var(--border);
 +  border-radius: 12px;
 +  padding: 1.5rem;
 +  margin-bottom: 2rem;
 +}
++
 +.controls-grid {
 +  display: grid;
 +  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 +  gap: 1rem;
 +}
++
 +.control-btn {
 +  padding: 0.75rem 1.5rem;
 +  border: 1px solid var(--border);
 +  border-radius: 8px;
 +  background: var(--bg-secondary);
 +  color: var(--text-primary);
 +  font-size: 0.9rem;
 +  cursor: pointer;
 +  transition: all 0.2s;
 +}
++
 +.control-btn:hover {
 +  transform: translateY(-2px);
 +  border-color: var(--accent);
 +}
++
 +.control-btn.primary {
 +  background: var(--accent);
 +  color: white;
 +  border-color: var(--accent);
 +}
++
 +.control-btn.danger {
 +  background: var(--danger);
 +  color: white;
 +  border-color: var(--danger);
 +}
++
 +.control-btn.success {
 +  background: var(--success);
 +  color: white;
 +  border-color: var(--success);
 +}
++
 +.control-btn.info {
 +  background: var(--info);
 +  color: white;
 +  border-color: var(--info);
 +}
++
 +/* Modal */
 +.modal {
 +  display: none;
 +  position: fixed;
 +  top: 0;
 +  left: 0;
 +  right: 0;
 +  bottom: 0;
 +  background: rgba(0, 0, 0, 0.8);
 +  z-index: 1000;
 +  align-items: center;
 +  justify-content: center;
 +}
++
 +.modal.active {
 +  display: flex;
 +}
++
 +.modal-content {
 +  background: var(--bg-card);
 +  border: 1px solid var(--border);
 +  border-radius: 12px;
 +  width: 90%;
 +  max-width: 600px;
 +  max-height: 80vh;
 +  overflow: auto;
 +}
++
 +.modal-header {
 +  display: flex;
 +  justify-content: space-between;
 +  align-items: center;
 +  padding: 1.5rem;
 +  border-bottom: 1px solid var(--border);
 +}
++
 +.modal-close {
 +  background: none;
 +  border: none;
 +  color: var(--text-secondary);
 +  font-size: 1.5rem;
 +  cursor: pointer;
 +}
++
 +.modal-body {
 +  padding: 1.5rem;
 +}
++
 +/* Forms */
 +.form-group {
 +  margin-bottom: 1.5rem;
 +}
++
 +.form-group label {
 +  display: block;
 +  margin-bottom: 0.5rem;
 +  color: var(--text-primary);
 +  font-size: 0.9rem;
 +}
++
 +.form-group input,
 +.form-group textarea,
 +.form-group select {
 +  width: 100%;
 +  padding: 0.75rem;
 +  background: var(--bg-secondary);
 +  border: 1px solid var(--border);
 +  border-radius: 6px;
 +  color: var(--text-primary);
 +  font-size: 0.9rem;
 +}
++
 +.form-group input:focus,
 +.form-group textarea:focus {
 +  outline: none;
 +  border-color: var(--accent);
 +}
++
 +.form-buttons {
 +  display: flex;
 +  gap: 1rem;
 +  justify-content: flex-end;
 +}
++
 +.btn {
 +  padding: 0.75rem 1.5rem;
 +  border: 1px solid var(--border);
 +  border-radius: 6px;
 +  background: var(--bg-secondary);
 +  color: var(--text-primary);
 +  cursor: pointer;
 +  transition: all 0.2s;
 +}
++
 +.btn.primary {
 +  background: var(--accent);
 +  color: white;
 +  border-color: var(--accent);
 +}
++
 +.btn.secondary {
 +  background: var(--bg-secondary);
 +  color: var(--text-primary);
 +}
++
 +/* Footer */
 +.dashboard-footer {
 +  background: var(--bg-secondary);
 +  border-top: 1px solid var(--border);
 +  padding: 1rem 2rem;
 +  margin-top: auto;
 +}
++
 +.footer-content {
 +  display: flex;
 +  justify-content: space-between;
 +  align-items: center;
 +  max-width: 1400px;
 +  margin: 0 auto;
 +  font-size: 0.85rem;
 +  color: var(--text-secondary);
 +}
++
 +/* Animations */
 +@keyframes pulse {
 +  0% {
 +    box-shadow: 0 0 0 0 currentColor;
 +    opacity: 1;
 +  }
 +  70% {
 +    box-shadow: 0 0 0 10px currentColor;
 +    opacity: 0;
 +  }
 +  100% {
 +    box-shadow: 0 0 0 0 currentColor;
 +    opacity: 0;
 +  }
 +}
++
 +/* Scrollbar */
 +::-webkit-scrollbar {
 +  width: 8px;
 +  height: 8px;
 +}
++
 +::-webkit-scrollbar-track {
 +  background: var(--bg-secondary);
 +}
++
 +::-webkit-scrollbar-thumb {
 +  background: var(--border);
 +  border-radius: 4px;
 +}
++
 +::-webkit-scrollbar-thumb:hover {
 +  background: var(--accent);
 +}
++
 +/* Responsive */
 +@media (max-width: 768px) {
 +  .dashboard-main {
 +    padding: 1rem;
 +  }
++
 +  .stats-grid {
 +    grid-template-columns: 1fr;
 +  }
++
 +  .charts-section {
 +    grid-template-columns: 1fr;
 +  }
++
 +  .conversations-grid {
 +    grid-template-columns: 1fr;
 +  }
++
 +  .patterns-container {
 +    grid-template-columns: 1fr;
 +  }
++
 +  .footer-content {
 +    flex-direction: column;
 +    gap: 0.5rem;
 +    text-align: center;
 +  }
 +}

extension-chrome/background/pattern-learning.jsadded

 +// Pattern Learning System for Scammer Detection
 +// Uses machine learning-inspired techniques to identify and learn scammer patterns
++
 +export class PatternLearning {
 +  constructor() {
 +    this.patterns = new Map();
 +    this.weights = new Map();
 +    this.threshold = 0.7;
 +    this.learningRate = 0.1;
 +    this.decayRate = 0.95;
 +    this.minConfidence = 0.6;
 +    this.init();
 +  }
++
 +  async init() {
 +    await this.loadPatterns();
 +    await this.loadWeights();
 +    this.startPeriodicTraining();
 +  }
++
 +  async loadPatterns() {
 +    const stored = await chrome.storage.local.get('learned_patterns');
 +    if (stored.learned_patterns) {
 +      stored.learned_patterns.forEach(pattern => {
 +        this.patterns.set(pattern.id, pattern);
 +      });
 +    }
++
 +    // Load default patterns
 +    this.loadDefaultPatterns();
 +  }
++
 +  loadDefaultPatterns() {
 +    const defaults = [
 +      {
 +        id: 'urgent_action',
 +        type: 'keyword_cluster',
 +        features: ['urgent', 'immediate', 'act now', 'expire', 'limited time'],
 +        weight: 0.8,
 +        confidence: 0.9
 +      },
 +      {
 +        id: 'money_request',
 +        type: 'keyword_cluster',
 +        features: ['send money', 'wire transfer', 'gift card', 'payment', 'fee'],
 +        weight: 0.9,
 +        confidence: 0.95
 +      },
 +      {
 +        id: 'personal_info',
 +        type: 'keyword_cluster',
 +        features: ['social security', 'password', 'account number', 'pin', 'verification code'],
 +        weight: 0.85,
 +        confidence: 0.9
 +      },
 +      {
 +        id: 'suspicious_link',
 +        type: 'url_pattern',
 +        features: ['bit.ly', 'tinyurl', 'short.link', 'click.here'],
 +        weight: 0.75,
 +        confidence: 0.8
 +      },
 +      {
 +        id: 'impersonation',
 +        type: 'keyword_cluster',
 +        features: ['official', 'authorized', 'representative', 'department', 'agency'],
 +        weight: 0.7,
 +        confidence: 0.75
 +      },
 +      {
 +        id: 'threat_language',
 +        type: 'keyword_cluster',
 +        features: ['suspended', 'terminated', 'legal action', 'arrest', 'prosecution'],
 +        weight: 0.85,
 +        confidence: 0.85
 +      }
 +    ];
++
 +    defaults.forEach(pattern => {
 +      if (!this.patterns.has(pattern.id)) {
 +        this.patterns.set(pattern.id, pattern);
 +        this.weights.set(pattern.id, pattern.weight);
 +      }
 +    });
 +  }
++
 +  async loadWeights() {
 +    const stored = await chrome.storage.local.get('pattern_weights');
 +    if (stored.pattern_weights) {
 +      Object.entries(stored.pattern_weights).forEach(([id, weight]) => {
 +        this.weights.set(id, weight);
 +      });
 +    }
 +  }
++
 +  async savePatterns() {
 +    const patterns = Array.from(this.patterns.values());
 +    await chrome.storage.local.set({ learned_patterns: patterns });
 +  }
++
 +  async saveWeights() {
 +    const weights = Object.fromEntries(this.weights);
 +    await chrome.storage.local.set({ pattern_weights: weights });
 +  }
++
 +  analyzeMessage(message, metadata = {}) {
 +    const analysis = {
 +      score: 0,
 +      matchedPatterns: [],
 +      features: [],
 +      confidence: 0,
 +      recommendation: 'monitor'
 +    };
++
 +    // Extract features from message
 +    const features = this.extractFeatures(message, metadata);
 +    analysis.features = features;
++
 +    // Check against learned patterns
 +    this.patterns.forEach((pattern, patternId) => {
 +      const match = this.matchPattern(features, pattern);
 +      if (match.score > this.minConfidence) {
 +        analysis.matchedPatterns.push({
 +          id: patternId,
 +          type: pattern.type,
 +          score: match.score,
 +          weight: this.weights.get(patternId) || 0.5
 +        });
 +      }
 +    });
++
 +    // Calculate overall score
 +    if (analysis.matchedPatterns.length > 0) {
 +      const weightedSum = analysis.matchedPatterns.reduce((sum, pattern) =>
 +        sum + (pattern.score * pattern.weight), 0
 +      );
 +      const totalWeight = analysis.matchedPatterns.reduce((sum, pattern) =>
 +        sum + pattern.weight, 0
 +      );
++
 +      analysis.score = weightedSum / totalWeight;
 +      analysis.confidence = this.calculateConfidence(analysis.matchedPatterns);
 +    }
++
 +    // Determine recommendation
 +    if (analysis.score > 0.9) {
 +      analysis.recommendation = 'block';
 +    } else if (analysis.score > 0.7) {
 +      analysis.recommendation = 'warn';
 +    } else if (analysis.score > 0.5) {
 +      analysis.recommendation = 'monitor_closely';
 +    }
++
 +    return analysis;
 +  }
++
 +  extractFeatures(message, metadata) {
 +    const features = {
 +      keywords: [],
 +      urls: [],
 +      patterns: [],
 +      metrics: {},
 +      behavioral: []
 +    };
++
 +    const text = message.content || message.text || '';
 +    const lowerText = text.toLowerCase();
++
 +    // Extract keywords
 +    features.keywords = this.extractKeywords(lowerText);
++
 +    // Extract URLs
 +    features.urls = this.extractUrls(text);
++
 +    // Extract patterns
 +    features.patterns = this.extractPatterns(text);
++
 +    // Calculate metrics
 +    features.metrics = {
 +      length: text.length,
 +      wordCount: text.split(/\s+/).length,
 +      uppercaseRatio: (text.match(/[A-Z]/g) || []).length / text.length,
 +      punctuationCount: (text.match(/[!?]/g) || []).length,
 +      numberCount: (text.match(/\d+/g) || []).length,
 +      dollarSignCount: (text.match(/\$/g) || []).length
 +    };
++
 +    // Behavioral features
 +    if (metadata.responseTime) {
 +      features.behavioral.push({
 +        type: 'response_speed',
 +        value: metadata.responseTime < 1000 ? 'instant' : 'normal'
 +      });
 +    }
++
 +    if (metadata.messageCount) {
 +      features.behavioral.push({
 +        type: 'message_frequency',
 +        value: metadata.messageCount > 10 ? 'high' : 'normal'
 +      });
 +    }
++
 +    return features;
 +  }
++
 +  extractKeywords(text) {
 +    const keywords = [];
 +    const commonScamWords = [
 +      'urgent', 'verify', 'suspended', 'confirm', 'prize', 'winner',
 +      'congratulations', 'claim', 'refund', 'irs', 'tax', 'arrest',
 +      'legal', 'bitcoin', 'investment', 'guaranteed', 'risk free'
 +    ];
++
 +    commonScamWords.forEach(word => {
 +      if (text.includes(word)) {
 +        keywords.push(word);
 +      }
 +    });
++
 +    return keywords;
 +  }
++
 +  extractUrls(text) {
 +    const urlRegex = /(https?:\/\/[^\s]+)/g;
 +    const urls = text.match(urlRegex) || [];
++
 +    return urls.map(url => ({
 +      url,
 +      shortened: this.isShortened(url),
 +      suspicious: this.isSuspiciousUrl(url)
 +    }));
 +  }
++
 +  isShortened(url) {
 +    const shorteners = ['bit.ly', 'tinyurl.com', 'short.link', 'ow.ly', 'goo.gl'];
 +    return shorteners.some(shortener => url.includes(shortener));
 +  }
++
 +  isSuspiciousUrl(url) {
 +    // Check for typosquatting and suspicious patterns
 +    const suspicious = [
 +      'amaz0n', 'payp4l', 'mircosoft', 'goggle',
 +      'faceb00k', 'app1e', 'netf1ix'
 +    ];
++
 +    return suspicious.some(pattern => url.toLowerCase().includes(pattern));
 +  }
++
 +  extractPatterns(text) {
 +    const patterns = [];
++
 +    // Phone number pattern
 +    if (/[\+]?[(]?[0-9]{1,4}[)]?[-\s\.]?[(]?[0-9]{1,4}[)]?[-\s\.]?[0-9]{1,5}[-\s\.]?[0-9]{1,5}/.test(text)) {
 +      patterns.push('phone_number');
 +    }
++
 +    // Email pattern
 +    if (/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/.test(text)) {
 +      patterns.push('email_address');
 +    }
++
 +    // Money amount pattern
 +    if (/\$[\d,]+(\.\d{2})?/.test(text)) {
 +      patterns.push('money_amount');
 +    }
++
 +    // Verification code pattern
 +    if (/\b\d{4,6}\b/.test(text) && text.includes('code')) {
 +      patterns.push('verification_code');
 +    }
++
 +    return patterns;
 +  }
++
 +  matchPattern(features, pattern) {
 +    let score = 0;
 +    let matches = 0;
++
 +    if (pattern.type === 'keyword_cluster') {
 +      // Check how many keywords from the pattern are in the message
 +      pattern.features.forEach(keyword => {
 +        if (features.keywords.includes(keyword.toLowerCase())) {
 +          matches++;
 +        }
 +      });
++
 +      score = matches / pattern.features.length;
 +    } else if (pattern.type === 'url_pattern') {
 +      // Check URLs
 +      features.urls.forEach(urlInfo => {
 +        pattern.features.forEach(urlPattern => {
 +          if (urlInfo.url.includes(urlPattern)) {
 +            matches++;
 +          }
 +        });
 +      });
++
 +      score = matches > 0 ? 1 : 0;
 +    } else if (pattern.type === 'behavioral') {
 +      // Check behavioral patterns
 +      features.behavioral.forEach(behavior => {
 +        if (pattern.features.includes(behavior.type)) {
 +          matches++;
 +        }
 +      });
++
 +      score = matches / pattern.features.length;
 +    }
++
 +    return { score, matches };
 +  }
++
 +  calculateConfidence(matchedPatterns) {
 +    if (matchedPatterns.length === 0) return 0;
++
 +    // Confidence increases with more pattern matches
 +    const baseConfidence = matchedPatterns.reduce((sum, p) => sum + p.score, 0) / matchedPatterns.length;
 +    const diversityBonus = Math.min(matchedPatterns.length * 0.1, 0.3);
++
 +    return Math.min(baseConfidence + diversityBonus, 1);
 +  }
++
 +  async addPattern(messageData, scammerScore) {
 +    const features = this.extractFeatures(messageData);
++
 +    // Only learn from high-confidence scammer messages
 +    if (scammerScore < this.threshold) return;
++
 +    // Update weights for matched patterns (reinforcement)
 +    const analysis = this.analyzeMessage(messageData);
 +    analysis.matchedPatterns.forEach(pattern => {
 +      const currentWeight = this.weights.get(pattern.id) || 0.5;
 +      const newWeight = currentWeight + (this.learningRate * (scammerScore - currentWeight));
 +      this.weights.set(pattern.id, Math.min(newWeight, 1));
 +    });
++
 +    // Check if this represents a new pattern
 +    const novelty = this.calculateNovelty(features);
 +    if (novelty > 0.3) {
 +      await this.createNewPattern(features, scammerScore);
 +    }
++
 +    // Save updated weights
 +    await this.saveWeights();
++
 +    // Notify dashboard
 +    this.notifyLearning(features, scammerScore);
 +  }
++
 +  calculateNovelty(features) {
 +    // Check how different these features are from existing patterns
 +    let maxSimilarity = 0;
++
 +    this.patterns.forEach(pattern => {
 +      const match = this.matchPattern(features, pattern);
 +      maxSimilarity = Math.max(maxSimilarity, match.score);
 +    });
++
 +    return 1 - maxSimilarity;
 +  }
++
 +  async createNewPattern(features, confidence) {
 +    const id = `learned_${Date.now()}`;
++
 +    const newPattern = {
 +      id,
 +      type: 'learned',
 +      features: {
 +        keywords: features.keywords.slice(0, 10),
 +        patterns: features.patterns,
 +        metrics: features.metrics
 +      },
 +      weight: confidence * 0.7, // Start with lower weight
 +      confidence,
 +      learnedAt: new Date().toISOString(),
 +      occurrences: 1
 +    };
++
 +    this.patterns.set(id, newPattern);
 +    this.weights.set(id, newPattern.weight);
++
 +    await this.savePatterns();
++
 +    console.log('[PatternLearning] New pattern learned:', id);
++
 +    return newPattern;
 +  }
++
 +  async updateFromServer(serverPatterns) {
 +    let updated = 0;
++
 +    serverPatterns.forEach(serverPattern => {
 +      const existing = this.patterns.get(serverPattern.id);
++
 +      if (!existing || serverPattern.confidence > existing.confidence) {
 +        this.patterns.set(serverPattern.id, serverPattern);
 +        this.weights.set(serverPattern.id, serverPattern.weight);
 +        updated++;
 +      }
 +    });
++
 +    if (updated > 0) {
 +      await this.savePatterns();
 +      await this.saveWeights();
 +      console.log(`[PatternLearning] Updated ${updated} patterns from server`);
 +    }
++
 +    return updated;
 +  }
++
 +  async getPatterns() {
 +    return Array.from(this.patterns.values()).map(pattern => ({
 +      ...pattern,
 +      weight: this.weights.get(pattern.id) || 0.5,
 +      effectiveness: this.calculateEffectiveness(pattern.id)
 +    }));
 +  }
++
 +  calculateEffectiveness(patternId) {
 +    // Track how effective each pattern is at detecting scammers
 +    // This would be based on true/false positive rates in production
 +    const weight = this.weights.get(patternId) || 0.5;
 +    const pattern = this.patterns.get(patternId);
++
 +    if (!pattern) return 0;
++
 +    // Simple effectiveness score based on weight and confidence
 +    return (weight * 0.7 + (pattern.confidence || 0.5) * 0.3);
 +  }
++
 +  startPeriodicTraining() {
 +    // Decay weights periodically to adapt to changing patterns
 +    setInterval(() => {
 +      this.decayWeights();
 +    }, 6 * 60 * 60 * 1000); // Every 6 hours
 +  }
++
 +  async decayWeights() {
 +    let decayed = 0;
++
 +    this.weights.forEach((weight, patternId) => {
 +      // Don't decay core patterns below minimum
 +      const pattern = this.patterns.get(patternId);
 +      const minWeight = pattern && pattern.type !== 'learned' ? 0.5 : 0.1;
++
 +      const newWeight = Math.max(weight * this.decayRate, minWeight);
 +      if (newWeight !== weight) {
 +        this.weights.set(patternId, newWeight);
 +        decayed++;
 +      }
 +    });
++
 +    if (decayed > 0) {
 +      await this.saveWeights();
 +      console.log(`[PatternLearning] Decayed ${decayed} pattern weights`);
 +    }
 +  }
++
 +  async exportPatterns() {
 +    const patterns = await this.getPatterns();
++
 +    return {
 +      version: '1.0',
 +      timestamp: new Date().toISOString(),
 +      patterns: patterns.sort((a, b) => b.effectiveness - a.effectiveness),
 +      statistics: {
 +        total: patterns.length,
 +        learned: patterns.filter(p => p.type === 'learned').length,
 +        averageConfidence: patterns.reduce((sum, p) => sum + (p.confidence || 0), 0) / patterns.length
 +      }
 +    };
 +  }
++
 +  notifyLearning(features, score) {
 +    // Notify dashboard about learning event
 +    chrome.runtime.sendMessage({
 +      type: 'DASHBOARD_UPDATE',
 +      data: {
 +        event: 'pattern_learned',
 +        features: features.keywords.slice(0, 5),
 +        score,
 +        timestamp: new Date().toISOString()
 +      }
 +    }).catch(() => {
 +      // Dashboard might not be open
 +    });
 +  }
++
 +  async resetLearning() {
 +    // Reset to default patterns only
 +    this.patterns.clear();
 +    this.weights.clear();
 +    this.loadDefaultPatterns();
++
 +    await this.savePatterns();
 +    await this.saveWeights();
++
 +    console.log('[PatternLearning] Reset to default patterns');
 +  }
 +}
++
 +// Export for use in service worker
 +if (typeof module !== 'undefined' && module.exports) {
 +  module.exports = PatternLearning;
 +}

extension-chrome/background/screenshot-manager.jsadded

 +// Screenshot Manager for Evidence Collection
 +// Captures and stores screenshots when scammers are detected
++
 +export class ScreenshotManager {
 +  constructor() {
 +    this.storage = 'screenshots';
 +    this.maxScreenshots = 100;
 +    this.compressionQuality = 0.8;
 +    this.init();
 +  }
++
 +  async init() {
 +    // Create storage structure if doesn't exist
 +    const stored = await chrome.storage.local.get(this.storage);
 +    if (!stored[this.storage]) {
 +      await chrome.storage.local.set({ [this.storage]: [] });
 +    }
 +  }
++
 +  async capture(tab, metadata = {}) {
 +    try {
 +      // Capture visible tab
 +      const dataUrl = await chrome.tabs.captureVisibleTab(tab.windowId, {
 +        format: 'jpeg',
 +        quality: Math.round(this.compressionQuality * 100)
 +      });
++
 +      // Generate unique ID
 +      const id = `screenshot_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
++
 +      // Create screenshot object
 +      const screenshot = {
 +        id,
 +        timestamp: new Date().toISOString(),
 +        url: tab.url,
 +        title: tab.title,
 +        platform: this.detectPlatform(tab.url),
 +        dataUrl: await this.compressImage(dataUrl),
 +        thumbnail: await this.createThumbnail(dataUrl),
 +        metadata: {
 +          ...metadata,
 +          tabId: tab.id,
 +          windowId: tab.windowId,
 +          incognito: tab.incognito
 +        }
 +      };
++
 +      // Store screenshot
 +      await this.store(screenshot);
++
 +      // Notify dashboard
 +      this.notifyDashboard(screenshot);
++
 +      return {
 +        success: true,
 +        id: screenshot.id,
 +        size: this.calculateSize(screenshot.dataUrl)
 +      };
 +    } catch (error) {
 +      console.error('[ScreenshotManager] Capture error:', error);
 +      return {
 +        success: false,
 +        error: error.message
 +      };
 +    }
 +  }
++
 +  detectPlatform(url) {
 +    if (url.includes('whatsapp.com')) return 'whatsapp';
 +    if (url.includes('telegram.org')) return 'telegram';
 +    if (url.includes('messenger.com')) return 'messenger';
 +    return 'unknown';
 +  }
++
 +  async compressImage(dataUrl) {
 +    return new Promise((resolve) => {
 +      const img = new Image();
 +      img.onload = () => {
 +        const canvas = document.createElement('canvas');
 +        const ctx = canvas.getContext('2d');
++
 +        // Set max dimensions
 +        const maxWidth = 1920;
 +        const maxHeight = 1080;
++
 +        let width = img.width;
 +        let height = img.height;
++
 +        // Calculate new dimensions
 +        if (width > maxWidth || height > maxHeight) {
 +          const ratio = Math.min(maxWidth / width, maxHeight / height);
 +          width *= ratio;
 +          height *= ratio;
 +        }
++
 +        canvas.width = width;
 +        canvas.height = height;
++
 +        // Draw and compress
 +        ctx.drawImage(img, 0, 0, width, height);
 +        resolve(canvas.toDataURL('image/jpeg', this.compressionQuality));
 +      };
++
 +      img.src = dataUrl;
 +    });
 +  }
++
 +  async createThumbnail(dataUrl) {
 +    return new Promise((resolve) => {
 +      const img = new Image();
 +      img.onload = () => {
 +        const canvas = document.createElement('canvas');
 +        const ctx = canvas.getContext('2d');
++
 +        // Thumbnail dimensions
 +        const thumbWidth = 320;
 +        const thumbHeight = 180;
++
 +        canvas.width = thumbWidth;
 +        canvas.height = thumbHeight;
++
 +        // Draw thumbnail
 +        ctx.drawImage(img, 0, 0, thumbWidth, thumbHeight);
 +        resolve(canvas.toDataURL('image/jpeg', 0.6));
 +      };
++
 +      img.src = dataUrl;
 +    });
 +  }
++
 +  calculateSize(dataUrl) {
 +    // Estimate size in bytes
 +    const base64Length = dataUrl.length - 'data:image/jpeg;base64,'.length;
 +    const sizeInBytes = base64Length * 0.75;
 +    return Math.round(sizeInBytes / 1024); // Return in KB
 +  }
++
 +  async store(screenshot) {
 +    const stored = await chrome.storage.local.get(this.storage);
 +    let screenshots = stored[this.storage] || [];
++
 +    // Add new screenshot
 +    screenshots.unshift(screenshot);
++
 +    // Enforce max limit
 +    if (screenshots.length > this.maxScreenshots) {
 +      screenshots = screenshots.slice(0, this.maxScreenshots);
 +    }
++
 +    // Update storage
 +    await chrome.storage.local.set({ [this.storage]: screenshots });
++
 +    // Also store metadata separately for quick access
 +    await this.storeMetadata(screenshot);
++
 +    return screenshot;
 +  }
++
 +  async storeMetadata(screenshot) {
 +    const metaKey = `${this.storage}_metadata`;
 +    const stored = await chrome.storage.local.get(metaKey);
 +    let metadata = stored[metaKey] || [];
++
 +    metadata.unshift({
 +      id: screenshot.id,
 +      timestamp: screenshot.timestamp,
 +      platform: screenshot.platform,
 +      url: screenshot.url,
 +      scammerScore: screenshot.metadata.scammerScore || 0
 +    });
++
 +    // Keep only last 500 metadata entries
 +    if (metadata.length > 500) {
 +      metadata = metadata.slice(0, 500);
 +    }
++
 +    await chrome.storage.local.set({ [metaKey]: metadata });
 +  }
++
 +  async get(id) {
 +    const stored = await chrome.storage.local.get(this.storage);
 +    const screenshots = stored[this.storage] || [];
 +    return screenshots.find(s => s.id === id);
 +  }
++
 +  async getAll(options = {}) {
 +    const stored = await chrome.storage.local.get(this.storage);
 +    let screenshots = stored[this.storage] || [];
++
 +    // Apply filters
 +    if (options.platform) {
 +      screenshots = screenshots.filter(s => s.platform === options.platform);
 +    }
++
 +    if (options.startDate) {
 +      screenshots = screenshots.filter(s =>
 +        new Date(s.timestamp) >= new Date(options.startDate)
 +      );
 +    }
++
 +    if (options.endDate) {
 +      screenshots = screenshots.filter(s =>
 +        new Date(s.timestamp) <= new Date(options.endDate)
 +      );
 +    }
++
 +    if (options.limit) {
 +      screenshots = screenshots.slice(0, options.limit);
 +    }
++
 +    return screenshots;
 +  }
++
 +  async getMetadata() {
 +    const metaKey = `${this.storage}_metadata`;
 +    const stored = await chrome.storage.local.get(metaKey);
 +    return stored[metaKey] || [];
 +  }
++
 +  async delete(id) {
 +    const stored = await chrome.storage.local.get(this.storage);
 +    let screenshots = stored[this.storage] || [];
++
 +    screenshots = screenshots.filter(s => s.id !== id);
 +    await chrome.storage.local.set({ [this.storage]: screenshots });
++
 +    // Also remove from metadata
 +    const metaKey = `${this.storage}_metadata`;
 +    const metaStored = await chrome.storage.local.get(metaKey);
 +    let metadata = metaStored[metaKey] || [];
 +    metadata = metadata.filter(m => m.id !== id);
 +    await chrome.storage.local.set({ [metaKey]: metadata });
++
 +    return { success: true };
 +  }
++
 +  async cleanup(maxAge = 24 * 60 * 60 * 1000) {
 +    const stored = await chrome.storage.local.get(this.storage);
 +    let screenshots = stored[this.storage] || [];
++
 +    const cutoff = Date.now() - maxAge;
 +    const before = screenshots.length;
++
 +    screenshots = screenshots.filter(s =>
 +      new Date(s.timestamp).getTime() > cutoff
 +    );
++
 +    await chrome.storage.local.set({ [this.storage]: screenshots });
++
 +    const deleted = before - screenshots.length;
 +    console.log(`[ScreenshotManager] Cleaned up ${deleted} old screenshots`);
++
 +    return { deleted };
 +  }
++
 +  async export(ids = null) {
 +    const stored = await chrome.storage.local.get(this.storage);
 +    let screenshots = stored[this.storage] || [];
++
 +    if (ids) {
 +      screenshots = screenshots.filter(s => ids.includes(s.id));
 +    }
++
 +    // Create export data
 +    const exportData = {
 +      version: '1.0',
 +      timestamp: new Date().toISOString(),
 +      count: screenshots.length,
 +      screenshots: screenshots.map(s => ({
 +        id: s.id,
 +        timestamp: s.timestamp,
 +        platform: s.platform,
 +        url: s.url,
 +        metadata: s.metadata,
 +        thumbnail: s.thumbnail // Include thumbnail only
 +      }))
 +    };
++
 +    return exportData;
 +  }
++
 +  async getStatistics() {
 +    const stored = await chrome.storage.local.get(this.storage);
 +    const screenshots = stored[this.storage] || [];
++
 +    const stats = {
 +      total: screenshots.length,
 +      byPlatform: {},
 +      byDay: {},
 +      totalSize: 0,
 +      oldestTimestamp: null,
 +      newestTimestamp: null
 +    };
++
 +    screenshots.forEach(s => {
 +      // By platform
 +      stats.byPlatform[s.platform] = (stats.byPlatform[s.platform] || 0) + 1;
++
 +      // By day
 +      const day = new Date(s.timestamp).toDateString();
 +      stats.byDay[day] = (stats.byDay[day] || 0) + 1;
++
 +      // Size
 +      stats.totalSize += this.calculateSize(s.dataUrl);
++
 +      // Timestamps
 +      const timestamp = new Date(s.timestamp).getTime();
 +      if (!stats.oldestTimestamp || timestamp < stats.oldestTimestamp) {
 +        stats.oldestTimestamp = s.timestamp;
 +      }
 +      if (!stats.newestTimestamp || timestamp > stats.newestTimestamp) {
 +        stats.newestTimestamp = s.timestamp;
 +      }
 +    });
++
 +    return stats;
 +  }
++
 +  notifyDashboard(screenshot) {
 +    // Send to dashboard if open
 +    chrome.runtime.sendMessage({
 +      type: 'DASHBOARD_UPDATE',
 +      data: {
 +        event: 'screenshot_captured',
 +        screenshot: {
 +          id: screenshot.id,
 +          timestamp: screenshot.timestamp,
 +          platform: screenshot.platform,
 +          thumbnail: screenshot.thumbnail
 +        }
 +      }
 +    }).catch(() => {
 +      // Dashboard might not be open
 +    });
 +  }
++
 +  async annotate(id, annotations) {
 +    const screenshot = await this.get(id);
 +    if (!screenshot) {
 +      throw new Error('Screenshot not found');
 +    }
++
 +    // Add annotations
 +    screenshot.annotations = {
 +      ...screenshot.annotations,
 +      ...annotations,
 +      updatedAt: new Date().toISOString()
 +    };
++
 +    // Update storage
 +    const stored = await chrome.storage.local.get(this.storage);
 +    let screenshots = stored[this.storage] || [];
++
 +    const index = screenshots.findIndex(s => s.id === id);
 +    if (index !== -1) {
 +      screenshots[index] = screenshot;
 +      await chrome.storage.local.set({ [this.storage]: screenshots });
 +    }
++
 +    return screenshot;
 +  }
++
 +  async createEvidence Report(screenshotIds, conversationId) {
 +    const screenshots = await this.getAll();
 +    const selected = screenshots.filter(s => screenshotIds.includes(s.id));
++
 +    const report = {
 +      id: `report_${Date.now()}`,
 +      timestamp: new Date().toISOString(),
 +      conversationId,
 +      screenshots: selected.map(s => ({
 +        id: s.id,
 +        timestamp: s.timestamp,
 +        platform: s.platform,
 +        url: s.url,
 +        annotations: s.annotations
 +      })),
 +      summary: {
 +        totalScreenshots: selected.length,
 +        platforms: [...new Set(selected.map(s => s.platform))],
 +        timeRange: {
 +          start: selected[selected.length - 1]?.timestamp,
 +          end: selected[0]?.timestamp
 +        }
 +      }
 +    };
++
 +    // Store report
 +    const reportKey = 'evidence_reports';
 +    const stored = await chrome.storage.local.get(reportKey);
 +    let reports = stored[reportKey] || [];
 +    reports.unshift(report);
++
 +    // Keep only last 50 reports
 +    if (reports.length > 50) {
 +      reports = reports.slice(0, 50);
 +    }
++
 +    await chrome.storage.local.set({ [reportKey]: reports });
++
 +    return report;
 +  }
 +}
++
 +// Export for use in service worker
 +if (typeof module !== 'undefined' && module.exports) {
 +  module.exports = ScreenshotManager;
 +}

extension-chrome/background/service-worker.jsadded

 +// Chrome Service Worker for LooseCannon (Manifest V3)
 +console.log('[LooseCannon] Chrome Service Worker initialized');
++
 +// Import modules
 +import { UnifiedMessageHandler } from './unified-handler-v3.js';
 +import { ScreenshotManager } from './screenshot-manager.js';
 +import { PatternLearning } from './pattern-learning.js';
++
 +class LooseCannonServiceWorker {
 +  constructor() {
 +    this.messageHandler = new UnifiedMessageHandler();
 +    this.screenshotManager = new ScreenshotManager();
 +    this.patternLearning = new PatternLearning();
 +    this.serverUrl = 'http://localhost:8765';
 +    this.analytics = {
 +      sessionsStarted: 0,
 +      messagesProcessed: 0,
 +      scammersDetected: 0,
 +      screenshotsCaptured: 0
 +    };
 +    this.init();
 +  }
++
 +  init() {
 +    this.setupListeners();
 +    this.setupAlarms();
 +    this.connectToServer();
 +    this.loadAnalytics();
 +  }
++
 +  setupListeners() {
 +    // Message listener for content scripts and popup
 +    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 +      console.log('[ServiceWorker] Received message:', message.type);
++
 +      // Handle async operations properly in Manifest V3
 +      this.handleMessage(message, sender).then(sendResponse);
 +      return true; // Keep channel open for async response
 +    });
++
 +    // Tab events for tracking
 +    chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
 +      if (changeInfo.status === 'complete') {
 +        this.checkForSupportedSite(tab);
 +      }
 +    });
++
 +    // Extension install/update events
 +    chrome.runtime.onInstalled.addListener((details) => {
 +      if (details.reason === 'install') {
 +        this.onFirstInstall();
 +      } else if (details.reason === 'update') {
 +        this.onUpdate(details.previousVersion);
 +      }
 +    });
++
 +    // Alarm listener for periodic tasks
 +    chrome.alarms.onAlarm.addListener((alarm) => {
 +      this.handleAlarm(alarm);
 +    });
 +  }
++
 +  async handleMessage(message, sender) {
 +    try {
 +      switch (message.type) {
 +        case 'NEW_MESSAGE':
 +          return await this.handleNewMessage(message.data, sender);
++
 +        case 'CAPTURE_SCREENSHOT':
 +          return await this.captureScreenshot(sender.tab);
++
 +        case 'GET_ANALYTICS':
 +          return await this.getAnalytics();
++
 +        case 'EXPORT_DATA':
 +          return await this.exportData(message.data);
++
 +        case 'LEARN_PATTERN':
 +          return await this.learnPattern(message.data);
++
 +        case 'GET_SERVER_STATUS':
 +          return await this.checkServerStatus();
++
 +        case 'TOGGLE_ACTIVE':
 +          return await this.handleToggleActive(message.data, sender);
++
 +        default:
 +          return { error: 'Unknown message type' };
 +      }
 +    } catch (error) {
 +      console.error('[ServiceWorker] Error handling message:', error);
 +      return { error: error.message };
 +    }
 +  }
++
 +  async handleNewMessage(data, sender) {
 +    this.analytics.messagesProcessed++;
++
 +    // Add Chrome-specific tab info
 +    data.tabId = sender.tab.id;
 +    data.url = sender.url;
++
 +    // Process through unified handler
 +    const response = await this.messageHandler.processMessage(data);
++
 +    // If scammer detected, capture screenshot
 +    if (response.scammerScore > 0.7) {
 +      this.analytics.scammersDetected++;
++
 +      // Capture evidence
 +      const screenshot = await this.captureScreenshot(sender.tab);
 +      if (screenshot.success) {
 +        response.evidenceId = screenshot.id;
 +      }
++
 +      // Learn from pattern
 +      await this.patternLearning.addPattern(data, response.scammerScore);
 +    }
++
 +    // Update analytics
 +    await this.saveAnalytics();
++
 +    return response;
 +  }
++
 +  async captureScreenshot(tab) {
 +    if (!tab) return { success: false, error: 'No tab provided' };
++
 +    try {
 +      // Chrome-specific screenshot API
 +      const dataUrl = await chrome.tabs.captureVisibleTab(tab.windowId, {
 +        format: 'png',
 +        quality: 90
 +      });
++
 +      // Store screenshot
 +      const screenshot = await this.screenshotManager.store({
 +        dataUrl,
 +        tabId: tab.id,
 +        url: tab.url,
 +        timestamp: new Date().toISOString()
 +      });
++
 +      this.analytics.screenshotsCaptured++;
++
 +      return {
 +        success: true,
 +        id: screenshot.id,
 +        size: screenshot.size
 +      };
 +    } catch (error) {
 +      console.error('[ServiceWorker] Screenshot error:', error);
 +      return { success: false, error: error.message };
 +    }
 +  }
++
 +  async checkForSupportedSite(tab) {
 +    const supportedSites = [
 +      'web.whatsapp.com',
 +      'web.telegram.org',
 +      'messenger.com'
 +    ];
++
 +    const isSupported = supportedSites.some(site => tab.url?.includes(site));
++
 +    if (isSupported) {
 +      // Show page action or badge
 +      chrome.action.setBadgeText({
 +        text: 'LC',
 +        tabId: tab.id
 +      });
++
 +      chrome.action.setBadgeBackgroundColor({
 +        color: '#4CAF50',
 +        tabId: tab.id
 +      });
 +    }
 +  }
++
 +  setupAlarms() {
 +    // Set up periodic tasks
 +    chrome.alarms.create('analyticsSync', { periodInMinutes: 5 });
 +    chrome.alarms.create('patternSync', { periodInMinutes: 30 });
 +    chrome.alarms.create('cleanup', { periodInMinutes: 60 });
 +  }
++
 +  async handleAlarm(alarm) {
 +    switch (alarm.name) {
 +      case 'analyticsSync':
 +        await this.syncAnalytics();
 +        break;
++
 +      case 'patternSync':
 +        await this.syncPatterns();
 +        break;
++
 +      case 'cleanup':
 +        await this.cleanup();
 +        break;
 +    }
 +  }
++
 +  async syncAnalytics() {
 +    try {
 +      // Send analytics to server
 +      const response = await fetch(`${this.serverUrl}/analytics/sync`, {
 +        method: 'POST',
 +        headers: { 'Content-Type': 'application/json' },
 +        body: JSON.stringify({
 +          analytics: this.analytics,
 +          timestamp: new Date().toISOString()
 +        })
 +      });
++
 +      if (response.ok) {
 +        console.log('[ServiceWorker] Analytics synced');
 +      }
 +    } catch (error) {
 +      console.error('[ServiceWorker] Analytics sync failed:', error);
 +    }
 +  }
++
 +  async syncPatterns() {
 +    try {
 +      const patterns = await this.patternLearning.getPatterns();
++
 +      // Send learned patterns to server
 +      const response = await fetch(`${this.serverUrl}/patterns/sync`, {
 +        method: 'POST',
 +        headers: { 'Content-Type': 'application/json' },
 +        body: JSON.stringify({ patterns })
 +      });
++
 +      if (response.ok) {
 +        const serverPatterns = await response.json();
 +        await this.patternLearning.updateFromServer(serverPatterns);
 +        console.log('[ServiceWorker] Patterns synced');
 +      }
 +    } catch (error) {
 +      console.error('[ServiceWorker] Pattern sync failed:', error);
 +    }
 +  }
++
 +  async cleanup() {
 +    // Clean up old screenshots
 +    await this.screenshotManager.cleanup(24 * 60 * 60 * 1000); // 24 hours
++
 +    // Clean up old conversation data
 +    const storage = await chrome.storage.local.get();
 +    const now = Date.now();
 +    const maxAge = 7 * 24 * 60 * 60 * 1000; // 7 days
++
 +    for (const key in storage) {
 +      if (key.startsWith('conversation_')) {
 +        const data = storage[key];
 +        if (data.timestamp && (now - new Date(data.timestamp).getTime() > maxAge)) {
 +          await chrome.storage.local.remove(key);
 +        }
 +      }
 +    }
++
 +    console.log('[ServiceWorker] Cleanup completed');
 +  }
++
 +  async connectToServer() {
 +    try {
 +      const response = await fetch(`${this.serverUrl}/status`);
 +      if (response.ok) {
 +        console.log('[ServiceWorker] Server connected');
 +        chrome.action.setTitle({ title: 'LooseCannon - Connected' });
 +      } else {
 +        throw new Error('Server not responding');
 +      }
 +    } catch (error) {
 +      console.error('[ServiceWorker] Server connection failed:', error);
 +      chrome.action.setTitle({ title: 'LooseCannon - Server Offline' });
++
 +      // Retry in 30 seconds
 +      setTimeout(() => this.connectToServer(), 30000);
 +    }
 +  }
++
 +  async getAnalytics() {
 +    const stored = await chrome.storage.local.get('analytics');
 +    return {
 +      ...this.analytics,
 +      ...stored.analytics,
 +      uptime: Date.now() - this.startTime
 +    };
 +  }
++
 +  async saveAnalytics() {
 +    await chrome.storage.local.set({ analytics: this.analytics });
 +  }
++
 +  async loadAnalytics() {
 +    const stored = await chrome.storage.local.get('analytics');
 +    if (stored.analytics) {
 +      this.analytics = { ...this.analytics, ...stored.analytics };
 +    }
 +    this.startTime = Date.now();
 +  }
++
 +  async exportData(options = {}) {
 +    const data = {
 +      version: '0.3.0',
 +      timestamp: new Date().toISOString(),
 +      analytics: this.analytics,
 +      patterns: await this.patternLearning.getPatterns(),
 +      screenshots: await this.screenshotManager.getAll()
 +    };
++
 +    if (options.includeConversations) {
 +      const storage = await chrome.storage.local.get();
 +      data.conversations = Object.entries(storage)
 +        .filter(([key]) => key.startsWith('conversation_'))
 +        .map(([key, value]) => value);
 +    }
++
 +    // Create download
 +    const blob = new Blob([JSON.stringify(data, null, 2)], {
 +      type: 'application/json'
 +    });
++
 +    const url = URL.createObjectURL(blob);
 +    const filename = `loosecannon-export-${Date.now()}.json`;
++
 +    await chrome.downloads.download({
 +      url,
 +      filename,
 +      saveAs: true
 +    });
++
 +    return { success: true, filename };
 +  }
++
 +  async handleToggleActive(data, sender) {
 +    this.analytics.sessionsStarted++;
 +    await this.saveAnalytics();
++
 +    // Notify dashboard if open
 +    chrome.runtime.sendMessage({
 +      type: 'DASHBOARD_UPDATE',
 +      data: {
 +        event: 'session_toggle',
 +        active: data.isActive,
 +        platform: data.platform,
 +        tabId: sender.tab?.id
 +      }
 +    }).catch(() => {
 +      // Dashboard might not be open
 +    });
++
 +    return { success: true };
 +  }
++
 +  async checkServerStatus() {
 +    try {
 +      const response = await fetch(`${this.serverUrl}/status`);
 +      const data = await response.json();
 +      return { connected: true, ...data };
 +    } catch (error) {
 +      return { connected: false, error: error.message };
 +    }
 +  }
++
 +  onFirstInstall() {
 +    // Open welcome page
 +    chrome.tabs.create({
 +      url: chrome.runtime.getURL('dashboard/welcome.html')
 +    });
 +  }
++
 +  onUpdate(previousVersion) {
 +    console.log(`[ServiceWorker] Updated from ${previousVersion} to 0.3.0`);
++
 +    // Show update notification
 +    chrome.notifications.create({
 +      type: 'basic',
 +      iconUrl: 'icons/icon-128.png',
 +      title: 'LooseCannon Updated',
 +      message: 'New features: Chrome support, Analytics Dashboard, and more!'
 +    });
 +  }
 +}
++
 +// Initialize service worker
 +const serviceWorker = new LooseCannonServiceWorker();
++
 +// Export for testing
 +if (typeof module !== 'undefined' && module.exports) {
 +  module.exports = LooseCannonServiceWorker;
 +}

extension-chrome/background/unified-handler-v3.jsadded

 +// Unified Message Handler for Chrome Manifest V3
 +// Handles messages from all supported platforms
++
 +export class UnifiedMessageHandler {
 +  constructor() {
 +    this.serverUrl = 'http://localhost:8765';
 +    this.activeConversations = new Map();
 +    this.responseQueue = [];
 +    this.isProcessing = false;
 +    this.settings = {
 +      autoActivateOnScammer: true,
 +      scammerThreshold: 0.7,
 +      maxResponseDelay: 15000,
 +      minResponseDelay: 2000,
 +      personalityRotation: false
 +    };
 +  }
++
 +  async processMessage(data) {
 +    try {
 +      // Add to conversation on server
 +      const contextResponse = await fetch(`${this.serverUrl}/conversation/add`, {
 +        method: 'POST',
 +        headers: { 'Content-Type': 'application/json' },
 +        body: JSON.stringify({
 +          chatId: data.chatId,
 +          platform: data.platform || this.detectPlatform(data.url),
 +          message: data
 +        })
 +      });
++
 +      const context = await contextResponse.json();
++
 +      // Check for auto-activation
 +      if (this.settings.autoActivateOnScammer &&
 +          context.scammerScore > this.settings.scammerThreshold &&
 +          !this.isConversationActive(data.chatId, data.platform)) {
++
 +        this.activateConversation(data.chatId, data.platform, data.tabId);
++
 +        // Notify content script
 +        chrome.tabs.sendMessage(data.tabId, {
 +          type: 'SCAMMER_DETECTED',
 +          data: {
 +            score: context.scammerScore,
 +            autoActivated: true
 +          }
 +        });
 +      }
++
 +      // Only generate response if active
 +      if (!this.isConversationActive(data.chatId, data.platform)) {
 +        return {
 +          processed: false,
 +          reason: 'Conversation not active',
 +          scammerScore: context.scammerScore
 +        };
 +      }
++
 +      // Get response suggestions
 +      const suggestionsResponse = await fetch(`${this.serverUrl}/suggestions`, {
 +        method: 'POST',
 +        headers: { 'Content-Type': 'application/json' },
 +        body: JSON.stringify({
 +          chatId: data.chatId,
 +          platform: data.platform,
 +          context
 +        })
 +      });
++
 +      const suggestions = await suggestionsResponse.json();
++
 +      // Select personality
 +      const personality = await this.selectPersonality(data.chatId, context);
++
 +      // Generate response
 +      const generateResponse = await fetch(`${this.serverUrl}/generate`, {
 +        method: 'POST',
 +        headers: { 'Content-Type': 'application/json' },
 +        body: JSON.stringify({
 +          message: data.content || data.text,
 +          personality,
 +          chatId: data.chatId,
 +          platform: data.platform || this.detectPlatform(data.url),
 +          context,
 +          suggestions,
 +          timestamp: data.timestamp
 +        })
 +      });
++
 +      const result = await generateResponse.json();
++
 +      // Calculate delay
 +      const delay = this.calculateResponseDelay(result.reply, context);
++
 +      // Queue response
 +      await this.queueResponse({
 +        tabId: data.tabId,
 +        platform: data.platform || this.detectPlatform(data.url),
 +        chatId: data.chatId,
 +        reply: result.reply,
 +        delay,
 +        personality
 +      });
++
 +      return {
 +        queued: true,
 +        reply: result.reply,
 +        delay,
 +        personality,
 +        scammerScore: context.scammerScore
 +      };
++
 +    } catch (error) {
 +      console.error('[UnifiedHandler] Error:', error);
++
 +      const fallback = this.getFallbackResponse(data.platform);
 +      return {
 +        reply: fallback,
 +        delay: 3000,
 +        error: error.message
 +      };
 +    }
 +  }
++
 +  detectPlatform(url) {
 +    if (!url) return 'unknown';
++
 +    if (url.includes('whatsapp.com')) return 'whatsapp';
 +    if (url.includes('telegram.org')) return 'telegram';
 +    if (url.includes('messenger.com')) return 'messenger';
++
 +    return 'unknown';
 +  }
++
 +  async selectPersonality(chatId, context) {
 +    if (!this.settings.personalityRotation) {
 +      return context.personality || 'default';
 +    }
++
 +    // Load available personalities
 +    const stored = await chrome.storage.local.get('personalities');
 +    const personalities = stored.personalities || ['default'];
++
 +    // Rotate based on message count
 +    const messageCount = context.messageCount || 0;
 +    const index = Math.floor(messageCount / 5) % personalities.length;
++
 +    return personalities[index];
 +  }
++
 +  calculateResponseDelay(text, context) {
 +    const wordCount = text.split(' ').length;
 +    const baseDelay = this.settings.minResponseDelay;
 +    const perWordDelay = 150;
++
 +    let delay = baseDelay + (wordCount * perWordDelay);
++
 +    // Adjust based on context
 +    if (context.conversationTone === 'urgent') {
 +      delay *= 1.5; // Be slower for urgent scammers
 +    }
++
 +    // Add random variation
 +    const variation = 0.3;
 +    const randomFactor = 1 + (Math.random() * 2 * variation - variation);
 +    delay *= randomFactor;
++
 +    return Math.min(delay, this.settings.maxResponseDelay);
 +  }
++
 +  async queueResponse(response) {
 +    this.responseQueue.push({
 +      ...response,
 +      queuedAt: Date.now()
 +    });
++
 +    if (!this.isProcessing) {
 +      this.processQueue();
 +    }
 +  }
++
 +  async processQueue() {
 +    if (this.responseQueue.length === 0) {
 +      this.isProcessing = false;
 +      return;
 +    }
++
 +    this.isProcessing = true;
 +    const response = this.responseQueue.shift();
++
 +    // Calculate remaining delay
 +    const elapsed = Date.now() - response.queuedAt;
 +    const remainingDelay = Math.max(0, response.delay - elapsed);
++
 +    // Wait
 +    await this.sleep(remainingDelay);
++
 +    // Send response
 +    try {
 +      await chrome.tabs.sendMessage(response.tabId, {
 +        type: 'SEND_MESSAGE',
 +        data: {
 +          text: response.reply,
 +          delay: 0
 +        }
 +      });
++
 +      console.log(`[UnifiedHandler] Sent response to ${response.platform}:${response.chatId}`);
 +    } catch (error) {
 +      console.error('[UnifiedHandler] Failed to send response:', error);
 +    }
++
 +    // Process next
 +    this.processQueue();
 +  }
++
 +  activateConversation(chatId, platform, tabId) {
 +    const key = `${platform}:${chatId}`;
 +    this.activeConversations.set(key, {
 +      chatId,
 +      platform,
 +      tabId,
 +      activatedAt: Date.now(),
 +      messageCount: 0
 +    });
++
 +    console.log(`[UnifiedHandler] Activated ${key}`);
 +  }
++
 +  deactivateConversation(chatId, platform) {
 +    const key = `${platform}:${chatId}`;
 +    this.activeConversations.delete(key);
 +    console.log(`[UnifiedHandler] Deactivated ${key}`);
 +  }
++
 +  isConversationActive(chatId, platform) {
 +    const key = `${platform}:${chatId}`;
 +    return this.activeConversations.has(key);
 +  }
++
 +  getFallbackResponse(platform) {
 +    const fallbacks = {
 +      whatsapp: [
 +        "Sorry, what was that? My WhatsApp is acting strange.",
 +        "Can you repeat? The message came through garbled.",
 +        "Hold on, my phone is being slow..."
 +      ],
 +      telegram: [
 +        "Telegram is glitching for me, one second...",
 +        "Strange, I'm getting errors. What did you say?",
 +        "My Telegram is updating, please wait..."
 +      ],
 +      messenger: [
 +        "Facebook is being weird, can you resend?",
 +        "Messenger crashed, what were you saying?",
 +        "Sorry, Facebook is slow today..."
 +      ],
 +      default: [
 +        "I didn't catch that, can you repeat?",
 +        "Sorry, technical difficulties...",
 +        "One moment please..."
 +      ]
 +    };
++
 +    const platformFallbacks = fallbacks[platform] || fallbacks.default;
 +    return platformFallbacks[Math.floor(Math.random() * platformFallbacks.length)];
 +  }
++
 +  async getStatistics() {
 +    const stats = {
 +      activeConversations: this.activeConversations.size,
 +      queuedResponses: this.responseQueue.length,
 +      platformBreakdown: {}
 +    };
++
 +    this.activeConversations.forEach(conv => {
 +      stats.platformBreakdown[conv.platform] =
 +        (stats.platformBreakdown[conv.platform] || 0) + 1;
 +    });
++
 +    return stats;
 +  }
++
 +  sleep(ms) {
 +    return new Promise(resolve => setTimeout(resolve, ms));
 +  }
 +}
++
 +// Export for use in service worker
 +if (typeof module !== 'undefined' && module.exports) {
 +  module.exports = UnifiedMessageHandler;
 +}

extension-chrome/manifest.jsonadded

 +{
 +  "manifest_version": 3,
 +  "name": "LooseCannon",
 +  "version": "0.3.0",
 +  "description": "Automated scambaiting assistant - Now with Chrome support",
++
 +  "permissions": [
 +    "storage",
 +    "tabs",
 +    "scripting",
 +    "webRequest",
 +    "declarativeNetRequest"
 +  ],
++
 +  "host_permissions": [
 +    "*://web.whatsapp.com/*",
 +    "*://web.telegram.org/*",
 +    "*://webk.telegram.org/*",
 +    "*://webz.telegram.org/*",
 +    "*://www.messenger.com/*",
 +    "*://messenger.com/*",
 +    "http://localhost:8765/*"
 +  ],
++
 +  "background": {
 +    "service_worker": "background/service-worker.js",
 +    "type": "module"
 +  },
++
 +  "content_scripts": [
 +    {
 +      "matches": ["*://web.whatsapp.com/*"],
 +      "js": ["content-scripts/whatsapp-enhanced.js"],
 +      "css": ["content-scripts/whatsapp.css"],
 +      "run_at": "document_idle"
 +    },
 +    {
 +      "matches": [
 +        "*://web.telegram.org/*",
 +        "*://webk.telegram.org/*",
 +        "*://webz.telegram.org/*"
 +      ],
 +      "js": ["content-scripts/telegram.js"],
 +      "run_at": "document_idle"
 +    },
 +    {
 +      "matches": [
 +        "*://www.messenger.com/*",
 +        "*://messenger.com/*"
 +      ],
 +      "js": ["content-scripts/messenger.js"],
 +      "run_at": "document_idle"
 +    }
 +  ],
++
 +  "action": {
 +    "default_popup": "popup/popup.html",
 +    "default_icon": {
 +      "16": "icons/icon-16.png",
 +      "48": "icons/icon-48.png",
 +      "128": "icons/icon-128.png"
 +    }
 +  },
++
 +  "icons": {
 +    "16": "icons/icon-16.png",
 +    "48": "icons/icon-48.png",
 +    "128": "icons/icon-128.png"
 +  },
++
 +  "web_accessible_resources": [
 +    {
 +      "resources": [
 +        "icons/*",
 +        "content-scripts/*.css"
 +      ],
 +      "matches": ["<all_urls>"]
 +    }
 +  ]
 +}