nothumanallowed 13.5.113 → 13.5.115

package/src/services/web-ui.mjs

@@ -1098,101 +1098,579 @@ function refreshPlan(){
 }
 
 // ---- EMAILS ----
-function renderEmails(el){
-  if(!dashLoaded.emails){el.innerHTML=loadingHTML('emails');return}
-  var e=dash.emails;
-  if(e.length===0){el.innerHTML='<div class="card" style="text-align:center;color:var(--dim);padding:30px">Inbox zero  -  no emails</div>';return}
-  var unreadCount=e.filter(function(x){return x.isUnread}).length;
-  var h='<div style="display:flex;gap:8px;margin-bottom:10px;align-items:center">';
-  h+='<span style="font-size:12px;color:var(--dim)">'+e.length+' emails'+(unreadCount>0?' ('+unreadCount+' unread)':'')+'</span>';
-  if(unreadCount>0)h+='<button class="btn btn--secondary" style="font-size:10px;padding:4px 10px" onclick="markAllEmailsRead()">Mark all read</button>';
-  h+='</div>';
-  e.forEach(function(x){
-    var unreadStyle=x.isUnread?'border-left:3px solid var(--green);font-weight:700':'border-left:3px solid transparent;opacity:0.7';
-    h+='<div class="card email" style="cursor:pointer;'+unreadStyle+'" onclick="openEmail(\\x27'+esc(x.id)+'\\x27)"><div class="email__header"><span class="email__from">'+esc(x.from)+'</span><span class="email__date">'+esc(x.date)+(x.isUnread?' <span style="color:var(--green);font-size:9px">NEW</span>':'')+'</span></div><div class="email__subject">'+esc(x.subject)+'</div><div class="email__snippet" style="font-weight:400">'+esc((x.snippet||'').slice(0,150))+'</div></div>';
-  });
-  // Load More button
-  if(dash._emailHasMore!==false){
-    h+='<button id="loadMoreEmails" onclick="loadMoreEmails()" style="width:100%;padding:12px;margin-top:8px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--cyan);font-family:var(--font);font-size:12px;cursor:pointer;font-weight:700">Load More Emails</button>';
-  }
-  el.innerHTML=h;
+// ═══════════════════════════════════════════════════════════════════════════
+// EMAIL CLIENT — full 3-pane client (folders / message list / reading pane)
+// Supports Google (existing) + IMAP custom accounts via dropdown
+// ═══════════════════════════════════════════════════════════════════════════
+
+var emailState = {
+  accountId: null,      // 'google' | imap account id
+  accountType: 'google',
+  labelId: null,
+  labelName: 'Inbox',
+  search: '',
+  offset: 0,
+  limit: 50,
+  messages: [],
+  total: 0,
+  activeMessageId: null,
+  labels: [],
+  accounts: [],
+  composing: false,
+  composeData: null,   // {to, subject, inReplyTo, references, replyType}
+  quillEditor: null,
+};
+
+function renderEmails(el) {
+  el.innerHTML =
+    // Load Quill CSS once
+    '<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.7/quill.snow.css">' +
+    '<div id="emailClientRoot" style="display:flex;height:calc(100vh - 120px);min-height:500px;gap:0;background:var(--bg2);border-radius:10px;border:1px solid var(--border);overflow:hidden">' +
+      // Col 1: sidebar
+      '<div id="emailSidebar" style="width:200px;min-width:160px;background:var(--bg3);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto"></div>' +
+      // Col 2: message list
+      '<div id="emailList" style="width:280px;min-width:220px;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden">' +
+        '<div id="emailListHeader" style="padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;flex-shrink:0">' +
+          '<input id="emailSearch" type="text" placeholder="Search..." onkeydown="if(event.key===String.fromCharCode(13)){emailSearch()}" style="flex:1;padding:5px 10px;font-size:11px;background:var(--bg);color:var(--fg);border:1px solid var(--border2);border-radius:5px">' +
+          '<button onclick="emailSearch()" style="padding:5px 8px;font-size:10px;background:var(--bg);color:var(--dim);border:1px solid var(--border);border-radius:4px;cursor:pointer">Go</button>' +
+        '</div>' +
+        '<div id="emailListBody" style="flex:1;overflow-y:auto"></div>' +
+        '<div id="emailListFooter" style="padding:6px 10px;border-top:1px solid var(--border);font-size:10px;color:var(--dim);display:flex;gap:8px;align-items:center;flex-shrink:0">' +
+          '<span id="emailListCount"></span>' +
+          '<button id="emailLoadMore" onclick="emailLoadMore()" style="display:none;padding:3px 10px;font-size:10px;background:var(--bg);color:var(--cyan);border:1px solid var(--cyan);border-radius:4px;cursor:pointer">Load more</button>' +
+        '</div>' +
+      '</div>' +
+      // Col 3: reading pane / compose
+      '<div id="emailPane" style="flex:1;display:flex;flex-direction:column;overflow:hidden"><div style="padding:40px;text-align:center;color:var(--dim);font-size:12px">Select a message</div></div>' +
+    '</div>';
+
+  // Load accounts then render sidebar
+  emailLoadAccounts();
 }
-var emailPage=0;
-function loadMoreEmails(){
-  var btn=document.getElementById('loadMoreEmails');
-  if(btn){btn.textContent='Loading...';btn.disabled=true;}
-  emailPage++;
-  apiGet('/api/emails?page='+emailPage+'&pageSize=25').then(function(r){
-    if(r&&r.emails){
-      for(var i=0;i<r.emails.length;i++){
-        if(!dash.emails.find(function(e){return e.id===r.emails[i].id})){
-          dash.emails.push(r.emails[i]);
-        }
+
+function emailLoadAccounts() {
+  apiGet('/api/imap/accounts').then(function(r) {
+    emailState.accounts = r.accounts || [];
+    emailRenderSidebar();
+    // Auto-select: prefer first IMAP account if no Google
+    if (emailState.accountId === null) {
+      if (emailState.accounts.length > 0) {
+        emailSelectAccount(emailState.accounts[0].id, 'imap');
+      } else if (dashLoaded.emails) {
+        emailSelectAccount('google', 'google');
       }
-      dash._emailHasMore=r.hasMore;
-      updateBadges();
-      render();
+    } else {
+      emailRenderSidebar();
     }
+  }).catch(function() {
+    if (dashLoaded.emails) emailSelectAccount('google', 'google');
+    else emailRenderSidebar();
   });
 }
-function markAllEmailsRead(){
-  apiPost('/api/email/mark-all-read',{}).then(function(r){
-    if(r&&r.ok){
-      dash.emails.forEach(function(e){e.isUnread=false});
-      updateBadges();
-      renderEmails(document.getElementById('content'));
-      showToast('success','All Read','Marked '+( r.count||0)+' emails as read');
-    }else{
-      showToast('error','Error',r&&r.error||'Failed');
+
+function emailRenderSidebar() {
+  var sb = document.getElementById('emailSidebar');
+  if (!sb) return;
+  var h = '';
+
+  // Account dropdown
+  h += '<div style="padding:10px 10px 6px;border-bottom:1px solid var(--border)">';
+  h += '<div style="font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:5px">Account</div>';
+  h += '<select id="emailAccountSelect" onchange="emailOnAccountChange(this.value)" style="width:100%;padding:5px 8px;font-size:11px;background:var(--bg);color:var(--fg);border:1px solid var(--border2);border-radius:4px">';
+  if (dashLoaded.emails) {
+    h += '<option value="google"' + (emailState.accountType === 'google' ? ' selected' : '') + '>Google (Gmail)</option>';
+  }
+  for (var i = 0; i < emailState.accounts.length; i++) {
+    var a = emailState.accounts[i];
+    h += '<option value="imap:' + esc(a.id) + '"' + (emailState.accountId === a.id ? ' selected' : '') + '>' + esc(a.display_name || a.email_address) + '</option>';
+  }
+  if (!dashLoaded.emails && emailState.accounts.length === 0) {
+    h += '<option value="">No accounts — add in Settings</option>';
+  }
+  h += '</select></div>';
+
+  // Compose button
+  h += '<div style="padding:8px 10px;border-bottom:1px solid var(--border)">';
+  h += '<button onclick="emailOpenCompose(null)" style="width:100%;padding:7px;background:var(--green3);color:var(--bg);border:none;border-radius:5px;font-size:12px;font-weight:700;cursor:pointer">+ Compose</button>';
+  h += '</div>';
+
+  // Labels / folders
+  h += '<div style="flex:1;overflow-y:auto;padding:6px 0">';
+  if (emailState.accountType === 'google') {
+    var googleFolders = [{id:'INBOX',name:'Inbox',icon:'&#9993;'},{id:'SENT',name:'Sent',icon:'&#8594;'},{id:'DRAFTS',name:'Drafts',icon:'&#128196;'},{id:'SPAM',name:'Spam',icon:'&#128737;'},{id:'TRASH',name:'Trash',icon:'&#128465;'}];
+    for (var gi = 0; gi < googleFolders.length; gi++) {
+      var gf = googleFolders[gi];
+      var sel = emailState.labelId === gf.id;
+      h += '<div onclick="emailSelectGoogleFolder(\\x27' + gf.id + '\\x27,\\x27' + gf.name + '\\x27)" style="padding:7px 14px;cursor:pointer;font-size:12px;' + (sel ? 'background:var(--green3);color:var(--bg);font-weight:700' : 'color:var(--fg)') + '">' + gf.icon + ' ' + esc(gf.name) + '</div>';
+    }
+  } else {
+    // IMAP labels
+    h += '<div style="padding:4px 10px;display:flex;align-items:center;justify-content:space-between">';
+    h += '<span style="font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1px">Labels</span>';
+    h += '<button onclick="emailShowNewLabel()" style="font-size:10px;background:none;border:none;color:var(--cyan);cursor:pointer">+</button>';
+    h += '</div>';
+    for (var li = 0; li < emailState.labels.length; li++) {
+      var lbl = emailState.labels[li];
+      var lsel = emailState.labelId === lbl.id;
+      var lcolor = lbl.color || 'var(--dim)';
+      var unread = lbl.unread_count > 0 ? '<span style="margin-left:auto;background:var(--green3);color:var(--bg);border-radius:10px;padding:0 5px;font-size:9px;font-weight:700">' + lbl.unread_count + '</span>' : '';
+      h += '<div onclick="emailSelectLabel(\\x27' + lbl.id + '\\x27,\\x27' + esc(lbl.name) + '\\x27)" style="padding:6px 14px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:6px;' + (lsel ? 'background:var(--green3);color:var(--bg);font-weight:700;border-radius:4px;margin:0 4px' : 'color:var(--fg)') + '">';
+      h += '<span style="width:8px;height:8px;border-radius:50%;background:' + lcolor + ';flex-shrink:0;display:inline-block"></span>';
+      h += esc(lbl.name);
+      if (!lbl.is_system) h += '<span onclick="event.stopPropagation();emailEditLabel(\\x27' + lbl.id + '\\x27,\\x27' + esc(lbl.name) + '\\x27,\\x27' + (lbl.color||'') + '\\x27)" style="margin-left:auto;font-size:9px;color:var(--dim);cursor:pointer">&#9998;</span>';
+      else h += unread;
+      h += '</div>';
     }
+  }
+  h += '</div>';
+
+  // Sync / settings shortcuts
+  if (emailState.accountType === 'imap' && emailState.accountId) {
+    h += '<div style="padding:8px 10px;border-top:1px solid var(--border)">';
+    h += '<button onclick="emailSyncCurrent()" style="width:100%;padding:5px;background:var(--bg);color:var(--cyan);border:1px solid var(--cyan);border-radius:4px;font-size:10px;cursor:pointer">Sync now</button>';
+    h += '</div>';
+  }
+
+  sb.innerHTML = h;
+}
+
+function emailOnAccountChange(val) {
+  if (val === 'google') {
+    emailSelectAccount('google', 'google');
+  } else if (val.startsWith('imap:')) {
+    emailSelectAccount(val.slice(5), 'imap');
+  }
+}
+
+function emailSelectAccount(accountId, type) {
+  emailState.accountId = accountId;
+  emailState.accountType = type;
+  emailState.labelId = null;
+  emailState.labelName = 'Inbox';
+  emailState.offset = 0;
+  emailState.messages = [];
+  emailState.activeMessageId = null;
+  if (type === 'imap') {
+    apiGet('/api/imap/labels?accountId=' + accountId).then(function(r) {
+      emailState.labels = r.labels || [];
+      // Default to inbox system label
+      var inbox = emailState.labels.find(function(l) { return l.system_type === 'inbox'; });
+      if (inbox) { emailState.labelId = inbox.id; emailState.labelName = 'Inbox'; }
+      emailRenderSidebar();
+      emailLoadMessages();
+    });
+  } else {
+    emailState.labels = [];
+    emailState.labelId = 'INBOX';
+    emailRenderSidebar();
+    emailLoadGoogleMessages();
+  }
+}
+
+function emailSelectLabel(labelId, labelName) {
+  emailState.labelId = labelId;
+  emailState.labelName = labelName;
+  emailState.offset = 0;
+  emailState.messages = [];
+  emailState.activeMessageId = null;
+  emailRenderSidebar();
+  emailLoadMessages();
+}
+
+function emailSelectGoogleFolder(folderId, folderName) {
+  emailState.labelId = folderId;
+  emailState.labelName = folderName;
+  emailState.offset = 0;
+  emailState.messages = [];
+  emailRenderSidebar();
+  emailLoadGoogleMessages();
+}
+
+function emailSearch() {
+  var inp = document.getElementById('emailSearch');
+  emailState.search = inp ? inp.value.trim() : '';
+  emailState.offset = 0;
+  emailState.messages = [];
+  if (emailState.accountType === 'imap') emailLoadMessages();
+  else emailLoadGoogleMessages();
+}
+
+function emailLoadMessages() {
+  var listBody = document.getElementById('emailListBody');
+  if (listBody) listBody.innerHTML = '<div style="padding:20px;text-align:center"><div class="spinner"></div></div>';
+  var qs = '/api/imap/messages?accountId=' + encodeURIComponent(emailState.accountId) +
+    '&limit=' + emailState.limit + '&offset=' + emailState.offset;
+  if (emailState.labelId) qs += '&labelId=' + encodeURIComponent(emailState.labelId);
+  if (emailState.search) qs += '&search=' + encodeURIComponent(emailState.search);
+  apiGet(qs).then(function(r) {
+    if (emailState.offset === 0) emailState.messages = r.messages || [];
+    else emailState.messages = emailState.messages.concat(r.messages || []);
+    emailState.total = r.total || 0;
+    emailRenderMessageList();
+  }).catch(function(e) {
+    if (listBody) listBody.innerHTML = '<div style="padding:20px;color:var(--red);font-size:12px">' + esc(e.message) + '</div>';
   });
 }
-var openEmailId=null;
-function openEmail(id){
-  openEmailId=id;
-  // Mark as read locally + on server
-  var emailObj=dash.emails.find(function(e){return e.id===id});
-  if(emailObj&&emailObj.isUnread){
-    emailObj.isUnread=false;
-    updateBadges();
-    apiPost('/api/email/mark-read',{messageId:id}).catch(function(){});
+
+function emailLoadGoogleMessages() {
+  var listBody = document.getElementById('emailListBody');
+  if (listBody) listBody.innerHTML = '<div style="padding:20px;text-align:center"><div class="spinner"></div></div>';
+  var q = emailState.labelId === 'INBOX' ? 'in:inbox' : 'in:' + emailState.labelId.toLowerCase();
+  if (emailState.search) q = emailState.search;
+  import('../services/google-gmail.mjs').then(function(gm) {
+    gm.listMessages(config, q, 50).then(function(refs) {
+      if (!refs || !refs.length) { emailState.messages = []; emailRenderMessageList(); return; }
+      var page = refs.slice(0, 50);
+      return Promise.all(page.slice(0, 20).map(function(r) { return gm.getMessage(config, r.id); }));
+    }).then(function(msgs) {
+      emailState.messages = (msgs || []).map(function(m) {
+        return { id: m.id, subject: m.subject, from_name: m.from, from_address: m.from, internal_date: m.date, body_preview: m.snippet, is_read: !m.isUnread, is_starred: false, has_attachments: false, _google: true };
+      });
+      emailRenderMessageList();
+    });
+  }).catch(function() {
+    // Fallback to dash emails
+    emailState.messages = (dash.emails || []).map(function(m) {
+      return { id: m.id, subject: m.subject, from_name: m.from, from_address: m.from, internal_date: m.date, body_preview: m.snippet, is_read: !m.isUnread, is_starred: false, has_attachments: false, _google: true };
+    });
+    emailRenderMessageList();
+  });
+}
+
+function emailRenderMessageList() {
+  var listBody = document.getElementById('emailListBody');
+  var listCount = document.getElementById('emailListCount');
+  var loadMoreBtn = document.getElementById('emailLoadMore');
+  if (!listBody) return;
+  if (listCount) listCount.textContent = emailState.total + ' messages';
+  if (loadMoreBtn) loadMoreBtn.style.display = (emailState.messages.length < emailState.total && emailState.accountType === 'imap') ? 'inline-block' : 'none';
+  if (!emailState.messages.length) {
+    listBody.innerHTML = '<div style="padding:24px;text-align:center;color:var(--dim);font-size:12px">No messages</div>';
+    return;
   }
-  var el=document.getElementById('content');
-  el.innerHTML='<div style="text-align:center;padding:40px"><div class="spinner"></div><div style="color:var(--dim)">Loading email...</div></div>';
-  apiPost('/api/email/read',{messageId:id}).then(function(r){
-    if(!r||r.error){el.innerHTML='<div class="card" style="color:var(--red);padding:20px">Error: '+(r&&r.error||'Failed to load email')+'</div>';return}
-    var m=r.message||r;
-    var h='<div style="margin-bottom:12px"><button class="btn btn--secondary" onclick="switchView(\\x27emails\\x27)" style="font-size:11px">&larr; Back to inbox</button></div>';
-    h+='<div class="card" style="padding:20px">';
-    h+='<div style="margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)">';
-    h+='<div style="font-size:16px;font-weight:700;color:var(--bright);margin-bottom:8px">'+esc(m.subject||'(no subject)')+'</div>';
-    h+='<div style="font-size:12px;color:var(--dim);margin-bottom:4px"><strong style="color:var(--text)">From:</strong> '+esc(m.from||'')+'</div>';
-    h+='<div style="font-size:12px;color:var(--dim);margin-bottom:4px"><strong style="color:var(--text)">To:</strong> '+esc(m.to||'')+'</div>';
-    h+='<div style="font-size:12px;color:var(--dim)"><strong style="color:var(--text)">Date:</strong> '+esc(m.date||'')+'</div>';
-    h+='</div>';
-    h+='<div style="font-size:13px;line-height:1.7;color:var(--text);white-space:pre-wrap;word-wrap:break-word">'+esc(m.body||m.snippet||'(no content)')+'</div>';
-    h+='</div>';
-    // Action buttons
-    h+='<div style="display:flex;gap:8px;margin-top:12px">';
-    h+='<button class="btn btn--primary" onclick="replyToEmail(\\x27'+esc(id)+'\\x27)" style="font-size:12px">Reply</button>';
-    h+='<button class="btn btn--secondary" onclick="askAgentAboutEmail(\\x27'+esc(id)+'\\x27)" style="font-size:12px">Ask SABER to scan</button>';
-    h+='</div>';
-    el.innerHTML=h;
+  var h = '';
+  for (var i = 0; i < emailState.messages.length; i++) {
+    var m = emailState.messages[i];
+    var active = m.id === emailState.activeMessageId;
+    var unread = !m.is_read;
+    var date = m.internal_date ? m.internal_date.slice(0, 10) : '';
+    var from = esc(m.from_name || m.from_address || '');
+    h += '<div onclick="emailOpenMessage(\\x27' + esc(m.id) + '\\x27)" style="padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border);' +
+      (active ? 'background:var(--green3);' : 'background:' + (unread ? 'var(--bg2)' : 'var(--bg3)') + ';') +
+      (unread ? 'border-left:3px solid var(--green);' : 'border-left:3px solid transparent;') + '">' +
+      '<div style="display:flex;justify-content:space-between;margin-bottom:2px">' +
+      '<span style="font-size:12px;font-weight:' + (unread ? '700' : '500') + ';color:' + (active ? 'var(--bg)' : 'var(--bright)') + ';max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + from + '</span>' +
+      '<span style="font-size:10px;color:' + (active ? 'var(--bg)' : 'var(--dim)') + '">' + esc(date) + '</span>' +
+      '</div>' +
+      '<div style="font-size:11px;font-weight:' + (unread ? '600' : '400') + ';color:' + (active ? 'var(--bg)' : 'var(--text)') + ';white-space:nowrap;overflow:hidden;text-overflow:ellipsis">' + esc(m.subject || '(no subject)') + '</div>' +
+      '<div style="font-size:10px;color:' + (active ? 'rgba(0,0,0,0.6)' : 'var(--dim)') + ';white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px">' + esc((m.body_preview || '').slice(0, 80)) + '</div>' +
+      '</div>';
+  }
+  listBody.innerHTML = h;
+}
+
+function emailLoadMore() {
+  emailState.offset += emailState.limit;
+  emailLoadMessages();
+}
+
+function emailOpenMessage(id) {
+  emailState.activeMessageId = id;
+  emailRenderMessageList();
+  var pane = document.getElementById('emailPane');
+  if (!pane) return;
+  pane.innerHTML = '<div style="padding:30px;text-align:center"><div class="spinner"></div></div>';
+
+  if (emailState.accountType === 'google') {
+    apiPost('/api/email/read', { messageId: id }).then(function(r) {
+      var m = r.message || r;
+      emailRenderReadingPane(pane, {
+        id: id, subject: m.subject, from_address: m.from, from_name: m.from,
+        to_addresses: m.to, internal_date: m.date,
+        body_html: m.bodyHtml || null, body_text: m.body || m.snippet || '',
+        attachments: [], labels: [], is_read: true, is_starred: false, _google: true,
+      });
+      apiPost('/api/email/mark-read', { messageId: id }).catch(function() {});
+    });
+  } else {
+    apiGet('/api/imap/message?id=' + encodeURIComponent(id)).then(function(r) {
+      emailRenderReadingPane(pane, r.message);
+      // Update read state in local list
+      var msg = emailState.messages.find(function(m) { return m.id === id; });
+      if (msg) msg.is_read = true;
+      emailRenderMessageList();
+    }).catch(function(e) {
+      pane.innerHTML = '<div style="padding:20px;color:var(--red);font-size:12px">' + esc(e.message) + '</div>';
+    });
+  }
+}
+
+function emailRenderReadingPane(pane, m) {
+  if (!m) { pane.innerHTML = '<div style="padding:20px;color:var(--red);font-size:12px">Could not load message</div>'; return; }
+
+  var toStr = '';
+  try {
+    var toArr = typeof m.to_addresses === 'string' ? JSON.parse(m.to_addresses) : (m.to_addresses || []);
+    toStr = toArr.map(function(a) { return a.name ? a.name + ' <' + a.address + '>' : (a.address || a); }).join(', ');
+  } catch(e) { toStr = m.to_addresses || ''; }
+
+  var h = '<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg3)">';
+  h += '<div style="display:flex;gap:6px">';
+  h += '<button onclick="emailOpenCompose({replyTo:\\x27' + esc(m.id) + '\\x27,type:\\x27reply\\x27,subject:\\x27Re: ' + esc(m.subject||'') + '\\x27,to:\\x27' + esc(m.from_address||'') + '\\x27,inReplyTo:\\x27' + esc(m.message_id||m.id) + '\\x27})" style="padding:5px 12px;font-size:11px;background:var(--green3);color:var(--bg);border:none;border-radius:4px;cursor:pointer;font-weight:700">Reply</button>';
+  h += '<button onclick="emailOpenCompose({replyTo:\\x27' + esc(m.id) + '\\x27,type:\\x27forward\\x27,subject:\\x27Fwd: ' + esc(m.subject||'') + '\\x27})" style="padding:5px 12px;font-size:11px;background:var(--bg);color:var(--dim);border:1px solid var(--border);border-radius:4px;cursor:pointer">Forward</button>';
+  if (!m._google) {
+    h += '<button onclick="emailTrash(\\x27' + esc(m.id) + '\\x27)" style="padding:5px 10px;font-size:11px;background:var(--bg);color:var(--red);border:1px solid var(--border);border-radius:4px;cursor:pointer">&#128465;</button>';
+    h += '<button onclick="emailToggleStar(\\x27' + esc(m.id) + '\\x27,' + (m.is_starred ? 'false' : 'true') + ')" style="padding:5px 10px;font-size:11px;background:var(--bg);color:var(--amber,#F59E0B);border:1px solid var(--border);border-radius:4px;cursor:pointer">' + (m.is_starred ? '&#9733;' : '&#9734;') + '</button>';
+    // Label assign
+    h += '<select onchange="emailAssignLabel(\\x27' + esc(m.id) + '\\x27,this.value);this.value=\\x27\\x27" style="font-size:10px;padding:4px;background:var(--bg);color:var(--dim);border:1px solid var(--border);border-radius:4px"><option value="">+ Label</option>';
+    for (var li = 0; li < emailState.labels.length; li++) {
+      var lbl = emailState.labels[li];
+      h += '<option value="' + esc(lbl.id) + '">' + esc(lbl.name) + '</option>';
+    }
+    h += '</select>';
+  }
+  h += '<button onclick="emailAskAgent(\\x27' + esc(m.id) + '\\x27)" style="padding:5px 10px;font-size:11px;background:var(--bg);color:var(--cyan);border:1px solid var(--cyan);border-radius:4px;cursor:pointer">Ask AI</button>';
+  h += '</div></div>';
+
+  // Header
+  h += '<div style="padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0">';
+  h += '<div style="font-size:15px;font-weight:700;color:var(--bright);margin-bottom:8px">' + esc(m.subject || '(no subject)') + '</div>';
+  h += '<div style="font-size:11px;color:var(--dim)"><strong style="color:var(--text)">From:</strong> ' + esc((m.from_name && m.from_name !== m.from_address ? m.from_name + ' <' + m.from_address + '>' : m.from_address) || '') + '</div>';
+  h += '<div style="font-size:11px;color:var(--dim)"><strong style="color:var(--text)">To:</strong> ' + esc(toStr) + '</div>';
+  h += '<div style="font-size:11px;color:var(--dim)"><strong style="color:var(--text)">Date:</strong> ' + esc(m.internal_date || '') + '</div>';
+
+  // Attachments
+  if (m.attachments && m.attachments.length) {
+    h += '<div style="margin-top:8px;display:flex;flex-wrap:wrap;gap:6px">';
+    for (var ai = 0; ai < m.attachments.length; ai++) {
+      var att = m.attachments[ai];
+      var attUrl = '/api/imap/attachment?messageId=' + encodeURIComponent(m.id) + '&partId=' + encodeURIComponent(att.part_id || '') + '&accountId=' + encodeURIComponent(emailState.accountId);
+      h += '<a href="' + attUrl + '" download="' + esc(att.filename || 'attachment') + '" style="font-size:10px;padding:4px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;color:var(--cyan);text-decoration:none">&#128206; ' + esc(att.filename || 'attachment') + ' (' + Math.round((att.size_bytes||0)/1024) + 'KB)</a>';
+    }
+    h += '</div>';
+  }
+  h += '</div>';
+
+  // Body
+  h += '<div style="flex:1;overflow-y:auto;padding:16px">';
+  if (m.body_html) {
+    h += '<iframe id="emailBodyFrame" sandbox="allow-same-origin" style="width:100%;min-height:400px;border:none;background:#fff" srcdoc="' + m.body_html.replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;') + '"></iframe>';
+  } else {
+    h += '<pre style="white-space:pre-wrap;word-wrap:break-word;font-size:13px;line-height:1.7;color:var(--text);font-family:inherit">' + esc(m.body_text || m.body_preview || '(empty)') + '</pre>';
+  }
+  h += '</div>';
+
+  pane.innerHTML = '<div style="display:flex;flex-direction:column;height:100%">' + h + '</div>';
+}
+
+function emailOpenCompose(opts) {
+  var pane = document.getElementById('emailPane');
+  if (!pane) return;
+  opts = opts || {};
+
+  var h = '<div style="display:flex;flex-direction:column;height:100%;padding:14px;gap:10px">';
+  h += '<div style="font-size:13px;font-weight:700;color:var(--bright);border-bottom:1px solid var(--border);padding-bottom:8px">Compose</div>';
+  h += '<input id="compTo" type="text" placeholder="To" value="' + esc(opts.to || '') + '" style="padding:7px 10px;font-size:12px;background:var(--bg);color:var(--fg);border:1px solid var(--border2);border-radius:5px">';
+  h += '<input id="compCc" type="text" placeholder="Cc" style="padding:7px 10px;font-size:12px;background:var(--bg);color:var(--fg);border:1px solid var(--border2);border-radius:5px">';
+  h += '<input id="compSubject" type="text" placeholder="Subject" value="' + esc(opts.subject || '') + '" style="padding:7px 10px;font-size:12px;background:var(--bg);color:var(--fg);border:1px solid var(--border2);border-radius:5px">';
+  h += '<input type="hidden" id="compInReplyTo" value="' + esc(opts.inReplyTo || '') + '">';
+  h += '<input type="hidden" id="compReplyToId" value="' + esc(opts.replyTo || '') + '">';
+  // Quill editor container
+  h += '<div id="quillContainer" style="flex:1;min-height:200px;background:#fff;border-radius:5px;overflow:auto"></div>';
+  // Toolbar
+  h += '<div style="display:flex;gap:8px;flex-wrap:wrap">';
+  h += '<button onclick="emailSend()" style="padding:7px 18px;background:var(--green3);color:var(--bg);border:none;border-radius:5px;font-size:12px;font-weight:700;cursor:pointer">Send</button>';
+  h += '<button onclick="emailSaveDraft()" style="padding:7px 14px;background:var(--bg);color:var(--dim);border:1px solid var(--border);border-radius:5px;font-size:12px;cursor:pointer">Save Draft</button>';
+  h += '<button onclick="emailCloseCompose()" style="padding:7px 14px;background:var(--bg);color:var(--dim);border:1px solid var(--border);border-radius:5px;font-size:12px;cursor:pointer">Discard</button>';
+  h += '<div id="composeStatus" style="font-size:11px;color:var(--dim);align-self:center"></div>';
+  h += '</div></div>';
+
+  pane.innerHTML = h;
+  emailState.composeData = opts;
+
+  // Init Quill
+  if (typeof Quill === 'undefined') {
+    var script = document.createElement('script');
+    script.src = 'https://cdn.quilljs.com/1.3.7/quill.min.js';
+    script.onload = function() { emailInitQuill(opts); };
+    document.head.appendChild(script);
+  } else {
+    emailInitQuill(opts);
+  }
+}
+
+function emailInitQuill(opts) {
+  emailState.quillEditor = new Quill('#quillContainer', {
+    theme: 'snow',
+    modules: { toolbar: [
+      ['bold', 'italic', 'underline', 'strike'],
+      [{ list: 'ordered' }, { list: 'bullet' }],
+      ['link', 'blockquote', 'code-block'],
+      [{ color: [] }, { background: [] }],
+      ['clean'],
+    ]},
+    placeholder: 'Write your message...',
+  });
+  // Pre-fill for forward
+  if (opts && opts.type === 'forward' && opts.body) {
+    emailState.quillEditor.clipboard.dangerouslyPasteHTML('<br><br><hr><p>---------- Forwarded message ----------</p>' + (opts.body || ''));
+  }
+}
+
+function emailSend() {
+  var status = document.getElementById('composeStatus');
+  var to = document.getElementById('compTo');
+  var cc = document.getElementById('compCc');
+  var subject = document.getElementById('compSubject');
+  var inReplyTo = document.getElementById('compInReplyTo');
+  if (!to || !to.value.trim()) { if (status) { status.textContent = 'Recipient required'; status.style.color = 'var(--red)'; } return; }
+
+  var bodyHtml = '';
+  var bodyText = '';
+  if (emailState.quillEditor) {
+    bodyHtml = emailState.quillEditor.root.innerHTML;
+    bodyText = emailState.quillEditor.getText();
+  }
+
+  var accountId = emailState.accountType === 'imap' ? emailState.accountId : null;
+  if (!accountId) {
+    // Google send via existing tool
+    if (status) { status.textContent = 'Sending via Google...'; status.style.color = 'var(--dim)'; }
+    apiPost('/api/email/send', { to: to.value.trim(), subject: subject.value.trim(), body: bodyText }).then(function(r) {
+      if (r.ok || r.id) { if (status) { status.textContent = 'Sent!'; status.style.color = 'var(--green)'; } setTimeout(emailCloseCompose, 800); }
+      else { if (status) { status.textContent = r.error || 'Error'; status.style.color = 'var(--red)'; } }
+    }).catch(function(e) { if (status) { status.textContent = e.message; status.style.color = 'var(--red)'; } });
+    return;
+  }
+
+  if (status) { status.textContent = 'Sending...'; status.style.color = 'var(--dim)'; }
+  apiPost('/api/imap/send', {
+    accountId: accountId,
+    to: to.value.trim(),
+    cc: cc && cc.value.trim() ? cc.value.trim() : undefined,
+    subject: subject.value.trim(),
+    bodyHtml: bodyHtml,
+    bodyText: bodyText,
+    inReplyTo: inReplyTo && inReplyTo.value ? inReplyTo.value : undefined,
+  }).then(function(r) {
+    if (r.ok) {
+      if (status) { status.textContent = 'Sent!'; status.style.color = 'var(--green)'; }
+      setTimeout(emailCloseCompose, 800);
+    } else {
+      if (status) { status.textContent = r.error || 'Error'; status.style.color = 'var(--red)'; }
+    }
+  }).catch(function(e) {
+    if (status) { status.textContent = e.message; status.style.color = 'var(--red)'; }
   });
 }
-function replyToEmail(id){
-  switchView('chat');
-  setTimeout(function(){
-    var inp=document.getElementById('chatInput');
-    if(inp){inp.value='Reply to email '+id+': ';inp.focus()}
-  },200);
+
+function emailSaveDraft() {
+  var accountId = emailState.accountType === 'imap' ? emailState.accountId : null;
+  if (!accountId) return;
+  var to = document.getElementById('compTo');
+  var subject = document.getElementById('compSubject');
+  var bodyHtml = emailState.quillEditor ? emailState.quillEditor.root.innerHTML : '';
+  apiPost('/api/imap/drafts/save', {
+    accountId: accountId,
+    to: to ? [{ address: to.value.trim() }] : [],
+    subject: subject ? subject.value.trim() : '',
+    body_html: bodyHtml,
+  }).then(function() {
+    var s = document.getElementById('composeStatus');
+    if (s) { s.textContent = 'Draft saved'; s.style.color = 'var(--green)'; }
+  });
+}
+
+function emailCloseCompose() {
+  emailState.quillEditor = null;
+  var pane = document.getElementById('emailPane');
+  if (pane) pane.innerHTML = '<div style="padding:40px;text-align:center;color:var(--dim);font-size:12px">Select a message</div>';
+}
+
+function emailTrash(id) {
+  if (!confirm('Move to trash? Email stays on the server — only removed from local view.')) return;
+  apiPost('/api/imap/trash', { messageId: id }).then(function() {
+    emailState.messages = emailState.messages.filter(function(m) { return m.id !== id; });
+    emailRenderMessageList();
+    var pane = document.getElementById('emailPane');
+    if (pane) pane.innerHTML = '<div style="padding:40px;text-align:center;color:var(--dim);font-size:12px">Message moved to trash</div>';
+    showToast('success', 'Trash', 'Moved to trash (server untouched)');
+  });
 }
-function askAgentAboutEmail(id){
+
+function emailToggleStar(id, isStarred) {
+  apiPost('/api/imap/mark-starred', { messageId: id, isStarred: isStarred }).then(function() {
+    showToast('success', isStarred ? 'Starred' : 'Unstarred', '');
+    emailOpenMessage(id);
+  });
+}
+
+function emailAssignLabel(messageId, labelId) {
+  if (!labelId) return;
+  apiPost('/api/imap/labels/assign', { messageId: messageId, labelId: labelId }).then(function() {
+    showToast('success', 'Label', 'Label assigned');
+  });
+}
+
+function emailAskAgent(id) {
   switchView('chat');
-  setTimeout(function(){
-    var inp=document.getElementById('chatInput');
-    if(inp){inp.value='Scan email '+id+' for phishing or security threats';inp.focus()}
-  },200);
+  setTimeout(function() {
+    var inp = document.getElementById('chatInput');
+    if (inp) { inp.value = 'Analyze email ' + id + ' — extract key information, action items, and summarize.'; inp.focus(); }
+  }, 200);
+}
+
+function emailSyncCurrent() {
+  if (!emailState.accountId || emailState.accountType !== 'imap') return;
+  apiPost('/api/imap/sync', { accountId: emailState.accountId }).then(function() {
+    showToast('success', 'Sync', 'Sync started — messages will appear shortly');
+    setTimeout(function() { emailLoadMessages(); }, 5000);
+  });
+}
+
+function emailShowNewLabel() {
+  var name = prompt('New label name:');
+  if (!name) return;
+  var color = prompt('Color (hex, e.g. #3B82F6) or leave empty:', '');
+  apiPost('/api/imap/labels/create', { accountId: emailState.accountId, name: name, color: color || null }).then(function(r) {
+    if (r.ok) {
+      apiGet('/api/imap/labels?accountId=' + emailState.accountId).then(function(r2) {
+        emailState.labels = r2.labels || [];
+        emailRenderSidebar();
+      });
+    }
+  });
+}
+
+function emailEditLabel(id, name, color) {
+  var newName = prompt('Label name:', name);
+  if (newName === null) return;
+  var newColor = prompt('Color (hex):', color);
+  apiPost('/api/imap/labels/update', { id: id, name: newName, color: newColor || null }).then(function() {
+    apiGet('/api/imap/labels?accountId=' + emailState.accountId).then(function(r) {
+      emailState.labels = r.labels || [];
+      emailRenderSidebar();
+    });
+  });
+}
+
+// Legacy compat for Google (existing code paths)
+var openEmailId = null;
+function openEmail(id) { emailOpenMessage(id); }
+function replyToEmail(id) { emailOpenCompose({ replyTo: id }); }
+function askAgentAboutEmail(id) { emailAskAgent(id); }
+function markAllEmailsRead() {
+  if (emailState.accountType === 'imap' && emailState.accountId) {
+    apiPost('/api/imap/mark-all-read', { accountId: emailState.accountId, labelId: emailState.labelId || null }).then(function(r) {
+      emailState.messages.forEach(function(m) { m.is_read = true; });
+      emailRenderMessageList();
+      showToast('success', 'All Read', 'Marked ' + (r.count || 0) + ' emails as read');
+    });
+  } else {
+    apiPost('/api/email/mark-all-read', {}).then(function(r) {
+      if (r && r.ok) { dash.emails.forEach(function(e) { e.isUnread = false; }); updateBadges(); showToast('success', 'All Read', 'Marked ' + (r.count || 0) + ' emails as read'); }
+    });
+  }
 }
 
 // ---- CALENDAR (monthly grid + day detail modal) ----
@@ -2605,7 +3083,7 @@ function renderSettings(el) {
     return;
   }
 
-  el.innerHTML = '<div style="max-width:600px;margin:0 auto">' +
+  el.innerHTML = '<div style="max-width:620px;margin:0 auto">' +
     settingsSection('profile', 'User Profile', 'Agents use this when you say "my home", "my city", etc.', [
       ['name', 'Name', 'e.g. John Smith'],
       ['email', 'Email', 'e.g. john@example.com'],
@@ -2646,7 +3124,147 @@ function renderSettings(el) {
     '</div>' +
     '<div id="googleStatus" style="margin-top:8px;font-size:10px;color:var(--dim)"></div>' +
     '</div>' +
+    renderImapAccountsSettings() +
   '</div>';
+  setTimeout(loadImapAccounts, 100);
+}
+
+function renderImapAccountsSettings() {
+  return '<div class="card" id="imapAccountsCard" style="margin-top:16px">' +
+    '<div class="card__title" style="display:flex;align-items:center;justify-content:space-between">' +
+    '<span>Email Accounts (IMAP/SMTP)</span>' +
+    '<button onclick="showAddImapAccount()" style="background:var(--green3);color:var(--bg);padding:5px 14px;border-radius:var(--r);font-weight:700;font-size:11px;cursor:pointer;border:none">+ Add Account</button>' +
+    '</div>' +
+    '<div style="font-size:11px;color:var(--dim);margin-bottom:10px">IMAP is read-only — no emails are ever deleted or moved on the server.</div>' +
+    '<div id="imapAccountsList">Loading...</div>' +
+    '<div id="imapAccountForm" style="display:none;margin-top:14px;padding:14px;background:var(--bg3);border-radius:8px;border:1px solid var(--border)">' +
+    '<div style="font-size:12px;font-weight:700;color:var(--green);margin-bottom:10px" id="imapFormTitle">Add IMAP Account</div>' +
+    '<input type="hidden" id="imapEditId" value="">' +
+    imapField('imapDisplayName','Display Name','e.g. Work Email') +
+    imapField('imapEmail','Email Address','user@example.com') +
+    imapField('imapFromName','From Name','e.g. John Smith') +
+    imapField('imapImapHost','IMAP Host','e.g. imap.gmail.com') +
+    imapField('imapImapPort','IMAP Port','993') +
+    imapField('imapSmtpHost','SMTP Host','e.g. smtp.gmail.com') +
+    imapField('imapSmtpPort','SMTP Port','587') +
+    imapField('imapUsername','Username','e.g. user@example.com') +
+    imapField('imapPassword','Password','App password or IMAP password', true) +
+    '<div style="display:flex;gap:8px;margin-top:12px">' +
+    '<button onclick="saveImapAccount()" style="background:var(--green3);color:var(--bg);padding:7px 18px;border-radius:var(--r);font-weight:700;font-size:12px;cursor:pointer;border:none">Save</button>' +
+    '<button onclick="document.getElementById(\\x27imapAccountForm\\x27).style.display=\\x27none\\x27" style="background:var(--bg);color:var(--dim);padding:7px 14px;border-radius:var(--r);font-size:12px;cursor:pointer;border:1px solid var(--border)">Cancel</button>' +
+    '</div>' +
+    '<div id="imapFormStatus" style="margin-top:8px;font-size:11px;color:var(--dim)"></div>' +
+    '</div>' +
+    '</div>';
+}
+
+function imapField(id, label, placeholder, isPassword) {
+  return '<div style="margin-bottom:8px">' +
+    '<label style="display:block;font-size:10px;color:var(--dim);margin-bottom:3px">' + label + '</label>' +
+    '<input id="' + id + '" type="' + (isPassword ? 'password' : 'text') + '" placeholder="' + placeholder + '" style="width:100%;padding:7px 10px;font-size:12px;background:var(--bg);color:var(--fg);border:1px solid var(--border2);border-radius:6px;box-sizing:border-box">' +
+    '</div>';
+}
+
+function loadImapAccounts() {
+  apiGet('/api/imap/accounts').then(function(r) {
+    var el = document.getElementById('imapAccountsList');
+    if (!el) return;
+    var accounts = r.accounts || [];
+    if (!accounts.length) { el.innerHTML = '<div style="color:var(--dim);font-size:11px">No IMAP accounts configured yet.</div>'; return; }
+    var h = '';
+    for (var i = 0; i < accounts.length; i++) {
+      var a = accounts[i];
+      h += '<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 10px;margin-bottom:6px;background:var(--bg3);border-radius:6px;border:1px solid var(--border)">' +
+        '<div>' +
+        '<div style="font-size:12px;font-weight:700;color:var(--bright)">' + esc(a.display_name) + '</div>' +
+        '<div style="font-size:10px;color:var(--dim)">' + esc(a.email_address) + ' &middot; ' + esc(a.imap_host || '') + '</div>' +
+        '<div style="font-size:10px;color:' + (a.sync_status === 'idle' ? 'var(--green)' : a.sync_status === 'syncing' ? 'var(--cyan)' : 'var(--red)') + '">' + esc(a.sync_status) + (a.last_sync_at ? ' &middot; last: ' + esc(a.last_sync_at.slice(0,16)) : '') + '</div>' +
+        '</div>' +
+        '<div style="display:flex;gap:6px">' +
+        '<button onclick="imapSync(\\x27' + a.id + '\\x27)" style="padding:4px 10px;font-size:10px;background:var(--cyan3,#0e4f5e);color:var(--cyan);border:1px solid var(--cyan);border-radius:4px;cursor:pointer">Sync</button>' +
+        '<button onclick="editImapAccount(\\x27' + a.id + '\\x27)" style="padding:4px 10px;font-size:10px;background:var(--bg);color:var(--dim);border:1px solid var(--border);border-radius:4px;cursor:pointer">Edit</button>' +
+        '<button onclick="deleteImapAccount(\\x27' + a.id + '\\x27)" style="padding:4px 10px;font-size:10px;background:var(--red3,#7f1d1d);color:#fca5a5;border:1px solid var(--red,#ef4444);border-radius:4px;cursor:pointer">Delete</button>' +
+        '</div></div>';
+    }
+    el.innerHTML = h;
+  }).catch(function() {
+    var el = document.getElementById('imapAccountsList');
+    if (el) el.innerHTML = '<div style="color:var(--dim);font-size:11px">Could not load accounts.</div>';
+  });
+}
+
+function showAddImapAccount() {
+  document.getElementById('imapEditId').value = '';
+  document.getElementById('imapFormTitle').textContent = 'Add IMAP Account';
+  var fields = ['DisplayName','Email','FromName','ImapHost','ImapPort','SmtpHost','SmtpPort','Username','Password'];
+  var defaults = ['','','','993','587','','','',''];
+  for (var i = 0; i < fields.length; i++) {
+    var el = document.getElementById('imap' + fields[i]);
+    if (el) el.value = defaults[i] || '';
+  }
+  document.getElementById('imapAccountForm').style.display = 'block';
+}
+
+function editImapAccount(id) {
+  apiGet('/api/imap/accounts').then(function(r) {
+    var a = (r.accounts || []).find(function(x) { return x.id === id; });
+    if (!a) return;
+    document.getElementById('imapEditId').value = id;
+    document.getElementById('imapFormTitle').textContent = 'Edit Account';
+    document.getElementById('imapDisplayName').value = a.display_name || '';
+    document.getElementById('imapEmail').value = a.email_address || '';
+    document.getElementById('imapFromName').value = a.from_name || '';
+    document.getElementById('imapImapHost').value = a.imap_host || '';
+    document.getElementById('imapImapPort').value = a.imap_port || 993;
+    document.getElementById('imapSmtpHost').value = a.smtp_host || '';
+    document.getElementById('imapSmtpPort').value = a.smtp_port || 587;
+    document.getElementById('imapUsername').value = a.username || '';
+    document.getElementById('imapPassword').value = '';
+    document.getElementById('imapAccountForm').style.display = 'block';
+  });
+}
+
+function saveImapAccount() {
+  var id = document.getElementById('imapEditId').value;
+  var data = {
+    display_name:  document.getElementById('imapDisplayName').value.trim(),
+    email_address: document.getElementById('imapEmail').value.trim(),
+    from_name:     document.getElementById('imapFromName').value.trim(),
+    imap_host:     document.getElementById('imapImapHost').value.trim(),
+    imap_port:     parseInt(document.getElementById('imapImapPort').value || '993', 10),
+    smtp_host:     document.getElementById('imapSmtpHost').value.trim(),
+    smtp_port:     parseInt(document.getElementById('imapSmtpPort').value || '587', 10),
+    username:      document.getElementById('imapUsername').value.trim(),
+  };
+  var pwd = document.getElementById('imapPassword').value;
+  if (pwd) data.password = pwd;
+  var status = document.getElementById('imapFormStatus');
+  if (status) { status.textContent = 'Saving...'; status.style.color = 'var(--dim)'; }
+  var url2 = id ? '/api/imap/accounts/update' : '/api/imap/accounts';
+  if (id) data.id = id;
+  apiPost(url2, data).then(function(r) {
+    if (r.ok || r.id) {
+      if (status) { status.textContent = 'Saved.'; status.style.color = 'var(--green)'; }
+      document.getElementById('imapAccountForm').style.display = 'none';
+      loadImapAccounts();
+    } else {
+      if (status) { status.textContent = r.error || 'Error'; status.style.color = 'var(--red)'; }
+    }
+  }).catch(function(e) {
+    if (status) { status.textContent = e.message; status.style.color = 'var(--red)'; }
+  });
+}
+
+function deleteImapAccount(id) {
+  if (!confirm('Delete this email account? All synced emails will be removed locally.')) return;
+  apiPost('/api/imap/accounts/delete', { id: id }).then(function() { loadImapAccounts(); });
+}
+
+function imapSync(accountId) {
+  apiPost('/api/imap/sync', { accountId: accountId }).then(function() {
+    showToast('success', 'Sync', 'Sync started in background');
+    setTimeout(loadImapAccounts, 3000);
+  }).catch(function(e) { showToast('error', 'Sync', e.message); });
 }
 
 function connectGoogle() {