evaldoc 1.0.0

package/public/app/inbox-threads.js

@@ -0,0 +1,843 @@
+const authRequired = document.getElementById('authRequired');
+const inboxContainer = document.getElementById('inboxContainer');
+const conversationsList = document.getElementById('conversationsList');
+const conversationDetail = document.getElementById('conversationDetail');
+const signOutBtn = document.getElementById('signOutBtn');
+
+let currentProvider = null;
+let threads = [];
+let selectedThread = null;
+let currentFilter = 'all';
+
+// ============================================
+// AUTH & FETCH HELPERS
+// ============================================
+
+async function fetchWithAuth(path, options = {}) {
+  const user = firebase.auth().currentUser;
+  if (!user) throw new Error('Not authenticated');
+
+  const token = await user.getIdToken();
+  const headers = Object.assign({}, options.headers || {}, {
+    Authorization: `Bearer ${token}`
+  });
+  return fetch(path, { ...options, headers });
+}
+
+async function loadProvider() {
+  try {
+    const res = await fetchWithAuth('/api/me');
+    if (res.status === 404) return null;
+    if (!res.ok) throw new Error('Unable to load provider');
+    return await res.json();
+  } catch (err) {
+    console.error('Error loading provider:', err);
+    return null;
+  }
+}
+
+// ============================================
+// THREADS
+// ============================================
+
+async function loadThreads() {
+  try {
+    // Fetch from both threads (new) and conversations (legacy) in parallel
+    const [threadsRes, convosRes] = await Promise.allSettled([
+      fetchWithAuth('/api/doctor/threads?limit=100'),
+      fetchWithAuth('/api/conversations?limit=100')
+    ]);
+
+    let newThreads = [];
+    let legacyConvos = [];
+
+    if (threadsRes.status === 'fulfilled' && threadsRes.value.ok) {
+      const data = await threadsRes.value.json();
+      newThreads = (data.threads || []).map(t => ({ ...t, _source: 'threads' }));
+    }
+
+    if (convosRes.status === 'fulfilled' && convosRes.value.ok) {
+      const data = await convosRes.value.json();
+      legacyConvos = (data.conversations || []).map(c => ({
+        id: c.id,
+        patientName: c.clientName || null,
+        patientEmail: c.clientEmail || null,
+        clientPhone: c.clientPhone || null,
+        patientSource: 'anonymous',
+        sessionId: c.sessionId,
+        doctorId: c.providerId,
+        status: 'active',
+        isEscalated: c.isEscalated || false,
+        lastMessageAt: c.lastMessageAt || c.updatedAt,
+        lastMessageText: c.lastUserMessage || c.lastAssistantMessage || '',
+        lastMessageRole: null,
+        messageCount: c.messageCount || 0,
+        unreadByDoctor: c.unreadByDoctor || 0,
+        currentTopic: c.currentTopic,
+        createdAt: c.createdAt,
+        _source: 'conversations'
+      }));
+    }
+
+    // Deduplicate: threads take priority over conversations with same sessionId
+    const threadSessionIds = new Set(newThreads.map(t => t.sessionId).filter(Boolean));
+    legacyConvos = legacyConvos.filter(c => !c.sessionId || !threadSessionIds.has(c.sessionId));
+
+    // Merge and sort by most recent
+    threads = [...newThreads, ...legacyConvos];
+    threads.sort((a, b) => {
+      const aTime = getTimestampSeconds(a.lastMessageAt || a.createdAt);
+      const bTime = getTimestampSeconds(b.lastMessageAt || b.createdAt);
+      return bTime - aTime;
+    });
+
+    renderThreadsList();
+  } catch (err) {
+    console.error('Error loading threads:', err);
+    conversationsList.innerHTML = '<div style="color: #6b7280; text-align: center; margin-top: 2rem;"><p>Unable to load conversations</p><button onclick="loadThreads()" class="filter-btn" style="margin-top:0.5rem;">Retry</button></div>';
+  }
+}
+
+// ============================================
+// FORMATTING HELPERS
+// ============================================
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+function linkifyUrls(text) {
+  return text.replace(
+    /(https?:\/\/[^\s<]+)/g,
+    '<a href="$1" target="_blank" rel="noopener noreferrer" style="color:#297B56;">$1</a>'
+  );
+}
+
+function getTimestampSeconds(ts) {
+  if (!ts) return 0;
+  if (ts._seconds) return ts._seconds;
+  if (ts.seconds) return ts.seconds;
+  if (typeof ts === 'number') return ts;
+  return 0;
+}
+
+function formatTime(timestamp) {
+  if (!timestamp) return 'Unknown';
+  const date = timestamp.toDate ? timestamp.toDate() : new Date((timestamp._seconds || 0) * 1000);
+  const now = new Date();
+  const diff = now - date;
+
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days < 7) return `${days}d ago`;
+
+  return date.toLocaleDateString();
+}
+
+// NOTE: these return HTML-escaped strings because patient-controlled values
+// (name/email/message) are interpolated into innerHTML across the inbox.
+function getPatientDisplay(thread) {
+  if (thread.patientName) return escapeHtml(thread.patientName);
+  if (thread.patientEmail) return escapeHtml(thread.patientEmail);
+  if (thread.clientName) return escapeHtml(thread.clientName);
+  if (thread.sessionId) return `Session ${escapeHtml(thread.sessionId.substring(0, 8))}`;
+  return 'Patient';
+}
+
+function getMessagePreview(thread) {
+  if (!thread.lastMessageText) return 'No messages yet';
+  const text = String(thread.lastMessageText);
+  return escapeHtml(text.substring(0, 60)) + (text.length > 60 ? '…' : '');
+}
+
+function getTriageBadgeHTML(category) {
+  if (!category) return '';
+  const labels = {
+    urgent: 'Urgent',
+    needs_review: 'Needs Review',
+    informational: 'Info',
+    resolved: 'Resolved'
+  };
+  return `<span class="triage-badge ${category}">${labels[category] || category}</span>`;
+}
+
+// ============================================
+// FILTERING
+// ============================================
+
+let threadSearchQuery = '';
+
+function filterThreads() {
+  return threads.filter(thread => {
+    if (currentFilter !== 'all') {
+      if (currentFilter === 'escalated' && thread.isEscalated !== true) return false;
+      if (currentFilter !== 'escalated' && thread.triageCategory !== currentFilter) return false;
+    }
+    if (threadSearchQuery) {
+      const q = threadSearchQuery;
+      const fields = [
+        thread.patientName, thread.clientName, thread.patientEmail,
+        thread.lastMessageText, thread.lastUserMessage, thread.currentTopic, thread.topic
+      ].filter(Boolean).map(f => String(f).toLowerCase());
+      return fields.some(f => f.includes(q));
+    }
+    return true;
+  });
+}
+
+// ============================================
+// RENDER THREADS LIST
+// ============================================
+
+function renderThreadsList() {
+  const filtered = filterThreads();
+
+  if (filtered.length === 0) {
+    conversationsList.innerHTML = '<p style="color: #6b7280; text-align: center; margin-top: 2rem;">No conversations found</p>';
+    return;
+  }
+
+  conversationsList.innerHTML = '';
+  filtered.forEach(thread => {
+    const item = document.createElement('div');
+    item.className = 'conversation-item';
+    if (selectedThread && selectedThread.id === thread.id) {
+      item.classList.add('active');
+    }
+
+    const patientDisplay = getPatientDisplay(thread);
+    const preview = getMessagePreview(thread);
+    const time = formatTime(thread.lastMessageAt || thread.createdAt);
+
+    const unreadDot = thread.unreadByDoctor > 0
+      ? '<span style="display:inline-block;width:8px;height:8px;background:#4fb3a4;border-radius:50%;margin-right:0.5rem;"></span>'
+      : '';
+
+    const triageBadge = getTriageBadgeHTML(thread.triageCategory);
+    const sourceLabel = thread.patientSource === 'anonymous'
+      ? '<span style="font-size:0.65rem;color:#9ca3af;margin-left:0.25rem;">(anonymous)</span>'
+      : '';
+
+    item.innerHTML = `
+      <div class="conversation-header">
+        <div class="conversation-client">${unreadDot}${patientDisplay}${sourceLabel}</div>
+        <div class="conversation-time">${time}</div>
+      </div>
+      <div class="conversation-preview">${preview}</div>
+      <div style="margin-top: 0.5rem; display: flex; gap: 0.25rem; flex-wrap: wrap;">
+        ${triageBadge}
+        ${thread.isEscalated ? '<span class="conversation-badge escalated">Escalated</span>' : ''}
+        ${thread.aiDraftStatus === 'pending' ? '<span class="conversation-badge" style="background:#fffbeb;color:#92400e;border:1px solid #fde68a;">Draft Ready</span>' : ''}
+        ${thread.status === 'resolved' ? '<span class="conversation-badge" style="background:#d1fae5;color:#065f46;border:1px solid #6ee7b7;">Resolved</span>' : ''}
+        ${thread.doctorOverride ? '<span class="conversation-badge" style="background:#eff6ff;color:#2563eb;border:1px solid #93c5fd;">Manual</span>' : ''}
+      </div>
+    `;
+
+    item.tabIndex = 0;
+    item.setAttribute('role', 'button');
+    item.setAttribute('aria-label', `Conversation with ${patientDisplay}`);
+    const selectThread = () => {
+      selectedThread = thread;
+      renderThreadsList();
+      renderThreadDetail(thread);
+    };
+    item.addEventListener('click', selectThread);
+    item.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectThread(); }
+    });
+
+    conversationsList.appendChild(item);
+  });
+}
+
+// ============================================
+// RENDER THREAD DETAIL
+// ============================================
+
+async function renderThreadDetail(thread) {
+  conversationDetail.innerHTML = '<div style="text-align: center; padding: 2rem;">Loading...</div>';
+
+  try {
+    let fullThread, messages;
+
+    if (thread._source === 'conversations') {
+      // Legacy conversation endpoint
+      const res = await fetchWithAuth(`/api/conversation/${thread.id}`);
+      if (!res.ok) throw new Error('Unable to load conversation details');
+      const data = await res.json();
+      fullThread = {
+        ...thread,
+        patientName: data.clientName || thread.patientName,
+        patientEmail: data.clientEmail || thread.patientEmail,
+        clientPhone: data.clientPhone || thread.clientPhone,
+        isEscalated: data.isEscalated || false,
+        currentTopic: data.currentTopic,
+        createdAt: data.createdAt
+      };
+      messages = (data.messages || []).map(m => ({
+        ...m,
+        message: m.message || m.content
+      }));
+    } else {
+      const res = await fetchWithAuth(`/api/doctor/thread/${thread.id}`);
+      if (!res.ok) throw new Error('Unable to load thread details');
+      const data = await res.json();
+      fullThread = data.thread;
+      messages = data.messages || [];
+    }
+    const patientDisplay = getPatientDisplay(fullThread);
+
+    let detailHTML = `
+      <div class="detail-header">
+        <div style="display: flex; justify-content: space-between; align-items: start;">
+          <div class="detail-title">${patientDisplay}</div>
+          ${getTriageBadgeHTML(fullThread.triageCategory)}
+        </div>
+        <div class="detail-meta">
+          <div class="detail-meta-item">
+            <span class="detail-meta-label">${messages.length} msgs</span>
+          </div>
+          <div class="detail-meta-item">
+            <span class="detail-meta-value">${formatTime(fullThread.createdAt)}</span>
+          </div>
+          ${fullThread.currentTopic ? `
+          <div class="detail-meta-item">
+            <span class="detail-meta-value">${(fullThread.currentTopic || '').replace(/_/g, ' ')}</span>
+          </div>
+          ` : ''}
+          ${fullThread.isEscalated ? `
+          <div class="detail-meta-item">
+            <span class="detail-meta-value" style="color: #dc2626;">Escalated</span>
+          </div>
+          ` : ''}
+        </div>
+
+        ${fullThread.patientEmail || fullThread.patientName || fullThread.clientPhone ? `
+        <div style="margin-top: 0.75rem; padding: 0.75rem; background: #e6f7f4; border-radius: 6px; border-left: 3px solid #297B56; font-size: 0.85rem;">
+          ${fullThread.patientName ? `<div style="font-weight: 600; margin-bottom: 0.25rem;">${escapeHtml(fullThread.patientName)}</div>` : ''}
+          ${fullThread.patientEmail ? `<div><a href="mailto:${encodeURIComponent(fullThread.patientEmail)}" style="color: #297B56;">${escapeHtml(fullThread.patientEmail)}</a></div>` : ''}
+          ${fullThread.clientPhone ? `<div><a href="tel:${encodeURIComponent(fullThread.clientPhone)}" style="color: #297B56;">${escapeHtml(fullThread.clientPhone)}</a></div>` : ''}
+        </div>
+        ` : ''}
+
+        <!-- Control Panel (only for unified threads, not legacy conversations) -->
+        ${thread._source !== 'conversations' ? `
+        <div style="margin-top: 1rem; display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;">
+          <button id="toggleOverrideBtn" class="filter-btn ${fullThread.doctorOverride ? 'active' : ''}">
+            ${fullThread.doctorOverride ? 'Enable AI' : 'Take Over (Manual)'}
+          </button>
+          ${fullThread.isEscalated ? '<button id="clearEscalationBtn" class="filter-btn">Clear Escalation</button>' : ''}
+          ${fullThread.status !== 'resolved' ? '<button id="resolveThreadBtn" class="filter-btn" style="background:#d1fae5;color:#065f46;border-color:#6ee7b7;">Resolve</button>' : '<button id="reopenThreadBtn" class="filter-btn">Reopen</button>'}
+          <button id="archiveThreadBtn" class="filter-btn">Archive</button>
+          <button id="exportThreadBtn" class="filter-btn" title="Export transcript">Export</button>
+          <select id="triageOverride" class="triage-select">
+            <option value="">Set Triage...</option>
+            <option value="urgent" ${fullThread.triageCategory === 'urgent' ? 'selected' : ''}>Urgent</option>
+            <option value="needs_review" ${fullThread.triageCategory === 'needs_review' ? 'selected' : ''}>Needs Review</option>
+            <option value="informational" ${fullThread.triageCategory === 'informational' ? 'selected' : ''}>Informational</option>
+            <option value="resolved" ${fullThread.triageCategory === 'resolved' ? 'selected' : ''}>Resolved</option>
+          </select>
+        </div>
+        ` : ''}
+      </div>
+    `;
+
+    // AI Draft Panel (Component 3)
+    if (fullThread.aiDraftResponse && fullThread.aiDraftStatus === 'pending') {
+      detailHTML += `
+        <div class="ai-draft-panel">
+          <div class="ai-draft-header">AI Suggested Response</div>
+          <div class="ai-draft-content">${fullThread.aiDraftResponse}</div>
+          <div class="ai-draft-actions">
+            <button id="acceptDraftBtn" class="btn-accept">Accept &amp; Send</button>
+            <button id="editDraftBtn" class="btn-edit">Edit &amp; Send</button>
+            <button id="rejectDraftBtn" class="btn-reject">Dismiss</button>
+            <button id="regenerateDraftBtn" class="btn-regenerate">Regenerate</button>
+          </div>
+        </div>
+      `;
+    }
+
+    // Reply Box
+    detailHTML += `
+      <div style="margin-bottom: 1.5rem; padding: 1rem; background: #f9fafb; border-radius: 10px; border: 1px solid #e5e7eb;">
+        <div style="font-size: 0.85rem; font-weight: 600; margin-bottom: 0.75rem; color: #297B56;">Reply to Patient</div>
+        <textarea id="replyTextarea" rows="3" placeholder="Type your reply..." class="reply-textarea" maxlength="5000" aria-label="Reply message"></textarea>
+        <div class="reply-toolbar" style="margin-top: 0.5rem;">
+          <span id="replyCharCount" style="font-size:0.75rem;color:#9ca3af;" aria-live="polite"></span>
+          <span id="replyStatus" class="reply-status" aria-live="assertive"></span>
+          <button id="sendReplyBtn" class="filter-btn active" style="background: #297B56; color: white; border-color: #297B56;">Send Reply</button>
+        </div>
+      </div>
+
+      <div class="messages-list">
+    `;
+
+    if (messages.length === 0) {
+      detailHTML += '<p style="text-align: center; color: #6b7280;">No messages yet</p>';
+    } else {
+      messages.forEach(msg => {
+        let role = 'assistant';
+        let label = 'AI Assistant';
+
+        if (msg.role === 'patient' || msg.role === 'user') {
+          role = 'user';
+          label = 'Patient';
+        } else if (msg.role === 'doctor' || msg.isDoctorManual) {
+          role = 'doctor';
+          label = 'You (Doctor)';
+        }
+
+        const rawText = msg.message || msg.content || '';
+        const safeText = escapeHtml(rawText);
+        const linkedText = linkifyUrls(safeText);
+
+        detailHTML += `
+          <div class="message-block">
+            <div class="message-label">${label} &middot; ${formatTime(msg.createdAt)}</div>
+            <div class="message-content ${role}" style="white-space:pre-wrap;">${linkedText}</div>
+          </div>
+        `;
+      });
+    }
+
+    detailHTML += '</div>';
+    conversationDetail.innerHTML = detailHTML;
+
+    // Wire up event listeners
+    wireDetailEventListeners(thread, fullThread);
+
+  } catch (err) {
+    console.error('Error loading thread detail:', err);
+    conversationDetail.innerHTML = '<div style="text-align: center; color: #dc2626; padding: 2rem;">Unable to load conversation details</div>';
+  }
+}
+
+// ============================================
+// DETAIL EVENT LISTENERS
+// ============================================
+
+function wireDetailEventListeners(thread, fullThread) {
+  // Toggle AI override
+  const toggleBtn = document.getElementById('toggleOverrideBtn');
+  if (toggleBtn) {
+    toggleBtn.addEventListener('click', async () => {
+      const newOverride = !fullThread.doctorOverride;
+      await fetchWithAuth(`/api/doctor/thread/${thread.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ doctorOverride: newOverride })
+      });
+      updateThreadLocally(thread.id, { doctorOverride: newOverride });
+      renderThreadsList();
+      renderThreadDetail(thread);
+    });
+  }
+
+  // Clear escalation
+  const clearBtn = document.getElementById('clearEscalationBtn');
+  if (clearBtn) {
+    clearBtn.addEventListener('click', async () => {
+      await fetchWithAuth(`/api/doctor/thread/${thread.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ isEscalated: false })
+      });
+      updateThreadLocally(thread.id, { isEscalated: false });
+      renderThreadsList();
+      renderThreadDetail(thread);
+    });
+  }
+
+  // Archive
+  const archiveBtn = document.getElementById('archiveThreadBtn');
+  if (archiveBtn) {
+    archiveBtn.addEventListener('click', async () => {
+      if (!confirm('Archive this conversation?')) return;
+      await fetchWithAuth(`/api/doctor/thread/${thread.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: 'archived' })
+      });
+      threads = threads.filter(t => t.id !== thread.id);
+      selectedThread = null;
+      renderThreadsList();
+      conversationDetail.innerHTML = '<div class="empty-state"><div class="empty-state-icon">&#128230;</div><h3>Archived</h3><p>Select another conversation</p></div>';
+    });
+  }
+
+  const resolveBtn = document.getElementById('resolveThreadBtn');
+  if (resolveBtn) {
+    resolveBtn.addEventListener('click', async () => {
+      await fetchWithAuth(`/api/doctor/thread/${thread.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: 'resolved' })
+      });
+      updateThreadLocally(thread.id, { status: 'resolved' });
+      renderThreadsList();
+      renderThreadDetail(thread);
+    });
+  }
+
+  const reopenBtn = document.getElementById('reopenThreadBtn');
+  if (reopenBtn) {
+    reopenBtn.addEventListener('click', async () => {
+      await fetchWithAuth(`/api/doctor/thread/${thread.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: 'active' })
+      });
+      updateThreadLocally(thread.id, { status: 'active' });
+      renderThreadsList();
+      renderThreadDetail(thread);
+    });
+  }
+
+  // Export transcript
+  const exportBtn = document.getElementById('exportThreadBtn');
+  if (exportBtn) {
+    exportBtn.addEventListener('click', async () => {
+      try {
+        let msgs;
+        if (thread._source === 'conversations') {
+          const res = await fetchWithAuth(`/api/conversation/${thread.id}`);
+          const data = await res.json();
+          msgs = data.messages || [];
+        } else {
+          const res = await fetchWithAuth(`/api/doctor/thread/${thread.id}`);
+          const data = await res.json();
+          msgs = data.messages || [];
+        }
+        const lines = msgs.map(m => {
+          const role = m.role === 'patient' || m.role === 'user' ? 'Patient' :
+                       m.role === 'doctor' ? 'Doctor' : 'AI';
+          const text = m.message || m.content || '';
+          const time = m.createdAt ? new Date(m.createdAt._seconds * 1000).toLocaleString() : '';
+          return `[${time}] ${role}: ${text}`;
+        });
+        const blob = new Blob([lines.join('\n\n')], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `transcript-${thread.id}.txt`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      } catch (err) {
+        console.error('Export failed:', err);
+      }
+    });
+  }
+
+  // Triage override
+  const triageSelect = document.getElementById('triageOverride');
+  if (triageSelect) {
+    triageSelect.addEventListener('change', async () => {
+      const category = triageSelect.value;
+      if (!category) return;
+      await fetchWithAuth(`/api/doctor/thread/${thread.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ triageCategory: category })
+      });
+      updateThreadLocally(thread.id, { triageCategory: category });
+      renderThreadsList();
+    });
+  }
+
+  // Send reply
+  const sendBtn = document.getElementById('sendReplyBtn');
+  const replyTextarea = document.getElementById('replyTextarea');
+  const replyStatus = document.getElementById('replyStatus');
+  const replyCharCount = document.getElementById('replyCharCount');
+  const REPLY_MAX = 5000;
+
+  if (sendBtn && replyTextarea) {
+    replyTextarea.addEventListener('input', () => {
+      const len = replyTextarea.value.length;
+      if (replyCharCount && len > REPLY_MAX * 0.7) {
+        replyCharCount.textContent = `${len}/${REPLY_MAX}`;
+        replyCharCount.style.color = len > REPLY_MAX * 0.9 ? '#dc2626' : '#9ca3af';
+      } else if (replyCharCount) {
+        replyCharCount.textContent = '';
+      }
+    });
+
+    sendBtn.addEventListener('click', async () => {
+      const message = replyTextarea.value.trim();
+      if (!message) return;
+      if (message.length > REPLY_MAX) {
+        replyStatus.textContent = 'Message too long';
+        return;
+      }
+
+      sendBtn.disabled = true;
+      replyStatus.textContent = 'Sending...';
+
+      try {
+        if (thread._source === 'conversations') {
+          await fetchWithAuth(`/api/conversation/${thread.id}/reply`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message })
+          });
+        } else {
+          await fetchWithAuth('/api/doctor/message', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ threadId: thread.id, message, override: true })
+          });
+        }
+        replyTextarea.value = '';
+        if (replyCharCount) replyCharCount.textContent = '';
+        replyStatus.textContent = 'Sent!';
+        setTimeout(() => { replyStatus.textContent = ''; }, 2000);
+        await renderThreadDetail(thread);
+        await loadThreads();
+      } catch (err) {
+        replyStatus.textContent = 'Failed to send. Try again.';
+        replyTextarea.focus();
+      } finally {
+        sendBtn.disabled = false;
+      }
+    });
+  }
+
+  // AI Draft actions (Component 3)
+  const acceptBtn = document.getElementById('acceptDraftBtn');
+  const editBtn = document.getElementById('editDraftBtn');
+  const rejectBtn = document.getElementById('rejectDraftBtn');
+  const regenerateBtn = document.getElementById('regenerateDraftBtn');
+
+  if (acceptBtn) {
+    acceptBtn.addEventListener('click', async () => {
+      acceptBtn.disabled = true;
+      acceptBtn.textContent = 'Sending...';
+      try {
+        await fetchWithAuth('/api/doctor/draft/accept', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ threadId: thread.id })
+        });
+        await renderThreadDetail(thread);
+        await loadThreads();
+      } catch (err) {
+        alert('Failed to accept draft');
+        acceptBtn.disabled = false;
+        acceptBtn.textContent = 'Accept & Send';
+      }
+    });
+  }
+
+  if (editBtn) {
+    editBtn.addEventListener('click', () => {
+      // Pre-fill reply textarea with draft content
+      if (replyTextarea) {
+        replyTextarea.value = fullThread.aiDraftResponse || '';
+        replyTextarea.focus();
+        replyTextarea.scrollIntoView({ behavior: 'smooth' });
+      }
+      // Reject the draft since doctor is editing
+      fetchWithAuth('/api/doctor/draft/reject', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ threadId: thread.id })
+      }).catch(() => {});
+    });
+  }
+
+  if (rejectBtn) {
+    rejectBtn.addEventListener('click', async () => {
+      await fetchWithAuth('/api/doctor/draft/reject', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ threadId: thread.id })
+      });
+      updateThreadLocally(thread.id, { aiDraftStatus: 'rejected', aiDraftResponse: null });
+      renderThreadDetail(thread);
+    });
+  }
+
+  if (regenerateBtn) {
+    regenerateBtn.addEventListener('click', async () => {
+      regenerateBtn.disabled = true;
+      regenerateBtn.textContent = 'Generating...';
+      try {
+        const res = await fetchWithAuth('/api/doctor/draft/regenerate', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ threadId: thread.id })
+        });
+        const data = await res.json();
+        if (data.draft) {
+          updateThreadLocally(thread.id, { aiDraftResponse: data.draft, aiDraftStatus: 'pending' });
+        }
+        await renderThreadDetail(thread);
+      } catch (err) {
+        alert('Failed to regenerate draft');
+        regenerateBtn.disabled = false;
+        regenerateBtn.textContent = 'Regenerate';
+      }
+    });
+  }
+}
+
+function updateThreadLocally(threadId, updates) {
+  const idx = threads.findIndex(t => t.id === threadId);
+  if (idx >= 0) {
+    Object.assign(threads[idx], updates);
+  }
+  if (selectedThread && selectedThread.id === threadId) {
+    Object.assign(selectedThread, updates);
+  }
+}
+
+// ============================================
+// NOTIFICATIONS (Component 4)
+// ============================================
+
+async function loadNotifications() {
+  try {
+    const res = await fetchWithAuth('/api/doctor/notifications?limit=20');
+    if (!res.ok) return;
+    const data = await res.json();
+
+    const countEl = document.getElementById('notificationCount');
+    const listEl = document.getElementById('notificationList');
+
+    if (data.unreadCount > 0) {
+      countEl.textContent = data.unreadCount;
+      countEl.style.display = 'flex';
+    } else {
+      countEl.style.display = 'none';
+    }
+
+    if (!data.notifications || data.notifications.length === 0) {
+      listEl.innerHTML = '<div style="padding: 1rem; text-align: center; color: #6b7280; font-size: 0.85rem;">No notifications</div>';
+      return;
+    }
+
+    listEl.innerHTML = data.notifications.map(n => `
+      <div class="notification-item ${n.read ? '' : 'unread'}" data-thread-id="${n.threadId || ''}">
+        <div class="notification-item-title">${escapeHtml(n.title || '')}</div>
+        <div class="notification-item-body">${escapeHtml(n.body || '')}</div>
+      </div>
+    `).join('');
+
+    // Click on notification to jump to thread
+    listEl.querySelectorAll('.notification-item').forEach(el => {
+      el.addEventListener('click', () => {
+        const threadId = el.dataset.threadId;
+        if (threadId) {
+          const thread = threads.find(t => t.id === threadId);
+          if (thread) {
+            selectedThread = thread;
+            renderThreadsList();
+            renderThreadDetail(thread);
+          }
+        }
+        document.getElementById('notificationDropdown').classList.remove('open');
+      });
+    });
+  } catch (err) {
+    console.error('Error loading notifications:', err);
+  }
+}
+
+// Toggle notification dropdown
+document.getElementById('notificationBell').addEventListener('click', (e) => {
+  e.stopPropagation();
+  const dropdown = document.getElementById('notificationDropdown');
+  dropdown.classList.toggle('open');
+  if (dropdown.classList.contains('open')) {
+    loadNotifications();
+  }
+});
+
+// Close dropdown when clicking elsewhere
+document.addEventListener('click', () => {
+  document.getElementById('notificationDropdown').classList.remove('open');
+});
+
+// Mark all as read
+document.getElementById('markAllReadBtn').addEventListener('click', async (e) => {
+  e.stopPropagation();
+  await fetchWithAuth('/api/doctor/notifications/read', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({})
+  });
+  document.getElementById('notificationCount').style.display = 'none';
+  loadNotifications();
+});
+
+// ============================================
+// FILTER BUTTONS
+// ============================================
+
+document.querySelectorAll('.filter-btn[data-filter]').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.filter-btn[data-filter]').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    currentFilter = btn.dataset.filter;
+    renderThreadsList();
+  });
+});
+
+const threadSearchInput = document.getElementById('threadSearchInput');
+if (threadSearchInput) {
+  let searchTimer;
+  threadSearchInput.addEventListener('input', () => {
+    clearTimeout(searchTimer);
+    searchTimer = setTimeout(() => {
+      threadSearchQuery = threadSearchInput.value.trim().toLowerCase();
+      renderThreadsList();
+    }, 250);
+  });
+}
+
+// ============================================
+// SIGN OUT
+// ============================================
+
+signOutBtn.addEventListener('click', async () => {
+  await firebase.auth().signOut();
+  window.location.href = '/app';
+});
+
+// ============================================
+// INITIALIZE
+// ============================================
+
+firebase.auth().onAuthStateChanged(async (user) => {
+  if (!user) {
+    authRequired.classList.remove('hidden');
+    inboxContainer.classList.add('hidden');
+    return;
+  }
+
+  authRequired.classList.add('hidden');
+  inboxContainer.classList.remove('hidden');
+
+  currentProvider = await loadProvider();
+  if (!currentProvider) {
+    authRequired.classList.remove('hidden');
+    inboxContainer.classList.add('hidden');
+    return;
+  }
+
+  await loadThreads();
+  await loadNotifications();
+
+  // Auto-refresh every 30 seconds
+  setInterval(loadThreads, 30000);
+  setInterval(loadNotifications, 60000);
+});