Update

public/index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -55,6 +56,48 @@
       color: #fff;
     }
 
+    .status-stopped {
+      background: #e74c3c;
+      color: #fff;
+    }
+
+    .control-btn {
+      padding: 10px 24px;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 600;
+      border: none;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      margin-left: 12px;
+    }
+
+    .control-btn.start {
+      background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
+      color: #fff;
+    }
+
+    .control-btn.start:hover {
+      background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
+      transform: translateY(-1px);
+    }
+
+    .control-btn.stop {
+      background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
+      color: #fff;
+    }
+
+    .control-btn.stop:hover {
+      background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
+      transform: translateY(-1px);
+    }
+
+    .header-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
     .stats-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -270,6 +313,122 @@
       color: #666;
     }
 
+    .chat-item {
+      padding: 14px 20px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+      display: flex;
+      gap: 12px;
+      align-items: flex-start;
+    }
+
+    .chat-item:last-child {
+      border-bottom: none;
+    }
+
+    .chat-item.unread {
+      background: rgba(155, 89, 182, 0.1);
+    }
+
+    .chat-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      font-weight: 600;
+      color: #fff;
+      flex-shrink: 0;
+    }
+
+    .chat-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .chat-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 4px;
+    }
+
+    .chat-username {
+      font-weight: 600;
+      color: #ff6b6b;
+      font-size: 13px;
+    }
+
+    .chat-time {
+      font-size: 11px;
+      color: #666;
+    }
+
+    .chat-snippet {
+      font-size: 13px;
+      color: #999;
+      line-height: 1.4;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .chat-direction {
+      font-size: 10px;
+      color: #666;
+      margin-top: 4px;
+    }
+
+    .chat-direction.from-us {
+      color: #2ecc71;
+    }
+
+    .chat-direction.from-them {
+      color: #9b59b6;
+    }
+
+    .unread-badge {
+      background: #9b59b6;
+      color: #fff;
+      padding: 2px 8px;
+      border-radius: 10px;
+      font-size: 10px;
+      margin-left: 8px;
+    }
+
+    .refresh-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: #aaa;
+      padding: 6px 12px;
+      border-radius: 6px;
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      margin-left: auto;
+    }
+
+    .refresh-btn:hover {
+      background: rgba(255, 255, 255, 0.15);
+      color: #fff;
+    }
+
+    .panel-header-row {
+      display: flex;
+      align-items: center;
+      padding: 16px 20px;
+      background: rgba(0, 0, 0, 0.2);
+    }
+
+    .panel-header-row .panel-title {
+      font-weight: 600;
+      font-size: 14px;
+      text-transform: uppercase;
+      color: #aaa;
+    }
+
     ::-webkit-scrollbar {
       width: 8px;
     }
@@ -288,13 +447,16 @@
     }
   </style>
 </head>
+
 <body>
   <div class="container">
     <header>
       <h1>Reddit Bot Dashboard</h1>
-      <div id="status-badges">
-        <span class="status-badge status-running" id="running-badge">Running</span>
+      <div class="header-controls">
+        <span class="status-badge status-running" id="running-badge" style="display: none;">Running</span>
+        <span class="status-badge status-stopped" id="stopped-badge">Stopped</span>
         <span class="status-badge status-dry-run" id="dryrun-badge" style="display: none;">Dry Run</span>
+        <button class="control-btn start" id="control-btn" onclick="toggleBot()">Start Bot</button>
       </div>
     </header>
 
@@ -336,6 +498,18 @@
       </div>
     </div>
 
+    <div class="panels" style="margin-top: 20px;">
+      <div class="panel" style="grid-column: span 2;">
+        <div class="panel-header-row">
+          <span class="panel-title">Active Chats (Last 48 Hours)</span>
+          <button class="refresh-btn" onclick="fetchChats()" id="refresh-chats-btn">🔄 Refresh</button>
+        </div>
+        <div class="panel-content" id="chats-list" style="max-height: 500px;">
+          <div class="empty-state">Loading chats...</div>
+        </div>
+      </div>
+    </div>
+
     <div class="config-section">
       <div class="config-grid">
         <div class="config-item">
@@ -386,6 +560,23 @@
 
         document.getElementById('dryrun-badge').style.display = stats.dryRunMode ? 'inline' : 'none';
 
+        // Update running state
+        const runningBadge = document.getElementById('running-badge');
+        const stoppedBadge = document.getElementById('stopped-badge');
+        const controlBtn = document.getElementById('control-btn');
+
+        if (stats.isRunning) {
+          runningBadge.style.display = 'inline';
+          stoppedBadge.style.display = 'none';
+          controlBtn.textContent = 'Stop Bot';
+          controlBtn.className = 'control-btn stop';
+        } else {
+          runningBadge.style.display = 'none';
+          stoppedBadge.style.display = 'inline';
+          controlBtn.textContent = 'Start Bot';
+          controlBtn.className = 'control-btn start';
+        }
+
         document.getElementById('config-subreddits').innerHTML = stats.subreddits
           .map(s => `<span class="tag">r/${s}</span>`).join('');
         document.getElementById('config-genders').innerHTML = stats.targetGenders
@@ -435,18 +626,30 @@
           return;
         }
 
-        container.innerHTML = messages.map(msg => `
+        container.innerHTML = messages.map(msg => {
+          // Construct Reddit URL
+          // If we have subreddit, make a nice link. If not, fallback to shortlink.
+          const postUrl = msg.subreddit
+            ? `https://www.reddit.com/r/${escapeHtml(msg.subreddit)}/comments/${escapeHtml(msg.postId)}`
+            : `https://redd.it/${escapeHtml(msg.postId)}`;
+
+          const sourceLabel = msg.subreddit ? `r/${escapeHtml(msg.subreddit)}` : 'Post';
+
+          return `
           <div class="message-item">
             <div class="message-recipient">
               u/${escapeHtml(msg.recipient)}
               ${msg.gotResponse ? '<span class="response-badge">Got Response!</span>' : ''}
+              <a href="${postUrl}" target="_blank" style="float: right; color: #888; font-size: 11px; text-decoration: none; border: 1px solid #444; padding: 2px 6px; border-radius: 4px;">
+                ${sourceLabel} ↗
+              </a>
             </div>
             <div class="message-text">${escapeHtml(msg.message)}</div>
             <div class="message-meta">
               <span>${formatTime(msg.sentAt)}</span>
             </div>
           </div>
-        `).join('');
+        `}).join('');
 
       } catch (err) {
         console.error('Failed to fetch messages:', err);
@@ -469,13 +672,81 @@
       return div.innerHTML;
     }
 
+    async function toggleBot() {
+      const controlBtn = document.getElementById('control-btn');
+      const isCurrentlyRunning = controlBtn.classList.contains('stop');
+
+      try {
+        const endpoint = isCurrentlyRunning ? '/api/stop' : '/api/start';
+        const res = await fetch(endpoint, { method: 'POST' });
+        const result = await res.json();
+
+        if (result.success) {
+          // Immediately refresh stats to update UI
+          fetchStats();
+        }
+      } catch (err) {
+        console.error('Failed to toggle bot:', err);
+      }
+    }
+    async function fetchChats() {
+      const container = document.getElementById('chats-list');
+      const refreshBtn = document.getElementById('refresh-chats-btn');
+
+      try {
+        if (refreshBtn) {
+          refreshBtn.disabled = true;
+          refreshBtn.textContent = '⏳ Loading...';
+        }
+
+        const res = await fetch('/api/chats');
+        const chats = await res.json();
+
+        if (chats.length === 0) {
+          container.innerHTML = '<div class="empty-state">No active chats in the last 48 hours</div>';
+          return;
+        }
+
+        container.innerHTML = chats.map(chat => {
+          const chatUrl = chat.url || 'https://chat.reddit.com';
+          return `
+          <div class="chat-item ${chat.unread ? 'unread' : ''}">
+            <div class="chat-avatar">${chat.username.charAt(0).toUpperCase()}</div>
+            <div class="chat-content">
+              <div class="chat-header">
+                <a href="${chatUrl}" target="_blank" class="chat-username" style="text-decoration: none; cursor: pointer;">
+                  u/${escapeHtml(chat.username)} ↗
+                  ${chat.unread ? '<span class="unread-badge">Unread</span>' : ''}
+                </a>
+                <span class="chat-time">${formatTime(chat.lastMessageTime)}</span>
+              </div>
+              <div class="chat-snippet">${escapeHtml(chat.lastMessageSnippet || '(No message preview)')}</div>
+              <div class="chat-direction ${chat.isFromUs ? 'from-us' : 'from-them'}">
+                ${chat.isFromUs ? '↗ You sent' : '↙ They replied'}
+              </div>
+            </div>
+          </div>
+        `}).join('');
+
+      } catch (err) {
+        console.error('Failed to fetch chats:', err);
+        container.innerHTML = '<div class="empty-state">Failed to load chats</div>';
+      } finally {
+        if (refreshBtn) {
+          refreshBtn.disabled = false;
+          refreshBtn.textContent = '🔄 Refresh';
+        }
+      }
+    }
+
     // Initial fetch
     fetchStats();
     fetchActivity();
     fetchMessages();
     fetchSuccessful();
+    fetchChats();
 
-    // Poll for updates
+    // Poll for updates (chats not polled - use manual refresh)
     setInterval(() => {
       fetchStats();
       fetchActivity();
@@ -484,4 +755,5 @@
     }, 5000);
   </script>
 </body>
-</html>
+
+</html>