@novacraft-engineering/mailbox 0.4.4 → 0.4.17

package/app/mail/page.tsx

@@ -2,11 +2,12 @@
 
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { extractUrls, inspectUrl, type LinkVerdict } from '@/lib/link-safety'
-import AttachmentLightbox, { attachmentKind, formatSize, type PreviewItem } from './AttachmentLightbox'
+import AttachmentLightbox, { attachmentKind, formatSize, inlineUrl, type PreviewItem } from './AttachmentLightbox'
 import AccessCheck from './AccessCheck'
 import { parseQuery, matchesQuery, serverSearchParams, splitForServer } from './search'
-import { useConfirm } from './ConfirmDialog'
+import { useConfirm, usePrompt } from './ConfirmDialog'
 import { subscribePush, unsubscribePush, useInstall, useNotifications } from './pwa'
+import { InstallGuide } from './InstallGuide'
 import RichEditor from './RichEditor'
 import { inlineEmailStyles, htmlToPlainText, dropUnreachableImages, outlookSafeImages, stripOwnPixel, healGooglePrivateImages } from '@/lib/email-html'
 import { BUILTIN_FONTS, DEFAULT_LINE_SPACING, EMPTY_FONT, FONT_SIZES, LINE_SPACINGS, fontFaceCss, fontStack, lineSpacingOf, type BaseFont, type CustomFont, paragraphGap } from '@/lib/fonts'
@@ -151,7 +152,7 @@ type Accessor = {
   invitedBy: string | null
 }
 
-type Folder = 'inbox' | 'starred' | 'snoozed' | 'sent' | 'scheduled' | 'drafts' | 'archived' | 'trash'
+type Folder = 'inbox' | 'starred' | 'snoozed' | 'sent' | 'scheduled' | 'drafts' | 'archived' | 'spam' | 'trash'
 
 type SentEmail = {
   id: string
@@ -173,6 +174,8 @@ type SentEmail = {
   openedAt: string | null
   owner?: string
   inReplyTo?: string | null
+  /** Sent by the app itself — an invite, a reset, an auto-reply. */
+  isAuto?: boolean
 }
 
 type DownloadAttachment = { filename: string; size: number; downloadUrl: string; shareId?: string; contentType?: string; contentId?: string }
@@ -187,6 +190,8 @@ type SentDetail = SentEmail & {
 }
 
 type ConversationRow = {
+  addressed?: 'direct' | 'copied' | 'other'
+  risk?: 'clean' | 'suspicious' | 'spam' | 'virus'
   threadId: string
   snoozedUntil?: string | null
   subject: string
@@ -199,6 +204,7 @@ type ConversationRow = {
   inboxCount: number
   archivedCount: number
   trashedCount: number
+  spamCount: number
   attachCount: number
   senders: string[]
   snippet: string
@@ -211,6 +217,11 @@ type InboundEmail = {
   from: string
   to: string[]
   cc: string[]
+  /** Written to, copied in, or reached some other way — judged for the holding mailbox. */
+  addressed?: 'direct' | 'copied' | 'other'
+  risk?: 'clean' | 'suspicious' | 'spam' | 'virus'
+  riskReasons?: string[]
+  spam?: boolean
   bcc: string[]
   replyTo: string[]
   subject: string
@@ -551,22 +562,34 @@ function markdownToHtml(src: string): string {
   return out.join('\n')
 }
 
-function buildEmailHtml(data: ComposeData, signatureHtml: string, fontCss = '', base: BaseFont = EMPTY_FONT): string {
-  if (data.htmlDirty && data.htmlSource.trim()) return data.htmlSource
+function buildEmailHtml(
+  data: ComposeData,
+  signatureHtml: string,
+  fontCss = '',
+  base: BaseFont = EMPTY_FONT,
+  /**
+   * Links to files too big to attach. They belong with the message, above the signature —
+   * appended at the end they landed below the sign-off AND below the quoted thread, which
+   * in Outlook is behind the "show trimmed content" fold, so the recipient saw a covering
+   * note with no sign of the document it was about.
+   */
+  linksHtml = '',
+): string {
+  if (data.htmlDirty && data.htmlSource.trim()) return data.htmlSource + linksHtml
   // Editor HTML for anything composed here; markdown only for drafts saved before it.
   const body = data.bodyHtml.trim() ? data.bodyHtml : markdownToHtml(data.markdown)
-  const inner = body + (data.useSignature ? signatureHtml : '')
+  const inner = body + linksHtml + (data.useSignature ? signatureHtml : '')
   const fonts = fontCss ? `<style>${fontCss}</style>` : ''
   return `${fonts}<div style="font-family:${fontStack(base.family)};font-size:${base.size || '15px'};line-height:${lineSpacingOf(base)};color:#030712;">${outlookSafeImages(inlineEmailStyles(inner, base))}</div>${data.quoteHtml ?? ''}`
 }
 
-function buildEmailText(data: ComposeData, signatureText: string): string {
+function buildEmailText(data: ComposeData, signatureText: string, linksText = ''): string {
   // Every message carries a text part: some clients prefer it, and its absence reads as spam.
   const quoteText = data.quoteHtml ? `\n\n${htmlToPlainText(data.quoteHtml)}` : ''
   if (data.bodyHtml.trim()) {
-    return (htmlToPlainText(data.bodyHtml) + (data.useSignature ? signatureText : '') + quoteText).trim()
+    return (htmlToPlainText(data.bodyHtml) + linksText + (data.useSignature ? signatureText : '') + quoteText).trim()
   }
-  const body = data.markdown + (data.useSignature ? signatureText : '') + quoteText
+  const body = data.markdown + linksText + (data.useSignature ? signatureText : '') + quoteText
   return body
     // Images first, for the same precedence reason as inlineMd. The replacement must not
     // contain brackets, or the link rule below matches across it and mangles the line.
@@ -936,6 +959,10 @@ function frameHtml(html: string, allowRemote: boolean, spacing = DEFAULT_LINE_SP
   const csp = allowRemote
     ? `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src * data:; style-src 'unsafe-inline' *; font-src * data:; media-src * data:">`
     : `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${OWN_IMAGE_HOSTS} data:; style-src 'unsafe-inline'; font-src data:">`
+  // Links open in a new tab, which a sandboxed frame may only do with allow-popups. Without
+  // it every link in every message was dead: the click was swallowed with no error and no
+  // navigation, which reads as a broken button rather than a blocked one. Scripts are still
+  // not allowed, so nothing here can open a tab on its own — only a real click can.
   return `<!doctype html><html><head><meta charset="utf-8">${csp}${readerTheme(spacing, dark)}<base target="_blank"></head><body><div class="nc-paper">${stripOwnPixel(html)}</div></body>`
 }
 
@@ -1236,6 +1263,8 @@ const ICONS = {
   inbox: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.5 5h13L22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6l3.5-7z"/></svg>,
   sent: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m22 2-7 20-4-9-9-4 20-7z"/><path d="M22 2 11 13"/></svg>,
   scheduled: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
+  info: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><path d="M12 8h.01"/></svg>,
+  warn: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>,
   drafts: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>,
   refresh: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><path d="M21 3v6h-6"/></svg>,
   search: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4-4"/></svg>,
@@ -1297,11 +1326,13 @@ const FOLDER_ICONS: Record<Folder, React.ReactNode> = {
   scheduled: ICONS.scheduled,
   drafts: ICONS.drafts,
   archived: ICONS.archive,
+  spam: ICONS.warn,
   trash: ICONS.trash,
 }
 
 export default function DevMailPage() {
   const confirm = useConfirm()
+  const promptFor = usePrompt()
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [isLoggedIn, setIsLoggedIn] = useState(false)
@@ -1312,6 +1343,12 @@ export default function DevMailPage() {
   const [loginBusy, setLoginBusy] = useState(false)
   const [resetMode, setResetMode] = useState(false)
   const [resetSent, setResetSent] = useState(false)
+  const [resetMessage, setResetMessage] = useState('')
+  const [recoveryEmail, setRecoveryEmail] = useState('')
+  const [recoverySaved, setRecoverySaved] = useState<{ address: string | null; verified: boolean }>({ address: null, verified: false })
+  const [recoveryMsg, setRecoveryMsg] = useState('')
+  const [recoveryBad, setRecoveryBad] = useState(false)
+  const [recoveryBusy, setRecoveryBusy] = useState(false)
   const [resetBusy, setResetBusy] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
   const [loginDomain, setLoginDomain] = useState(DEFAULT_MAIL_DOMAIN)
@@ -1322,6 +1359,9 @@ export default function DevMailPage() {
   const [folder, setFolder] = useState<Folder>('inbox')
   const [search, setSearch] = useState('')
   const [sentEmails, setSentEmails] = useState<SentEmail[]>([])
+  // What is waiting to be sent lives here now, not at the provider: a delayed message is
+  // held by this app, so the folder has to read the app's own queue to see it.
+  const [queuedSends, setQueuedSends] = useState<SentEmail[]>([])
   const [inboxEmails, setInboxEmails] = useState<InboundEmail[]>([])
   // The server owns search and paging now; the client holds one page at a time
   // rather than the whole mailbox.
@@ -1329,7 +1369,7 @@ export default function DevMailPage() {
   const [loadingMore, setLoadingMore] = useState(false)
   const [inboxCursor, setInboxCursor] = useState<string | null>(null)
   const inboxFetch = useRef<string | null>(null)
-  type FolderTally = { inbox: number; unread: number; starred: number; archived: number; trashed: number; snoozed: number }
+  type FolderTally = { inbox: number; unread: number; starred: number; archived: number; trashed: number; spam: number; snoozed: number }
   const [serverCounts, setServerCounts] = useState<(FolderTally & { conversations: FolderTally | null }) | null>(null)
   const [countsLoading, setCountsLoading] = useState(false)
   const [composeExpanded, setComposeExpanded] = useState(true)
@@ -1441,6 +1481,7 @@ export default function DevMailPage() {
   const [settingsOpen, setSettingsOpen] = useState(false)
   const [settingsTab, setSettingsTab] = useState<SettingsTab>('profile')
   const [pwCurrent, setPwCurrent] = useState('')
+  const [pwReveal, setPwReveal] = useState(false)
   const [pwNext, setPwNext] = useState('')
   const [pwRepeat, setPwRepeat] = useState('')
   const [pwBusy, setPwBusy] = useState(false)
@@ -1465,7 +1506,7 @@ export default function DevMailPage() {
   const [settings, setMailSettings] = useState<MailSettings>(DEFAULT_SETTINGS)
   const tickerOn = (spot: TickerSpot) => settings.ticker?.[spot] ?? tickerDefault(spot)
   const messagesAlwaysOpen = settings.threadMessages === 'open'
-  const { canInstall, installed, install } = useInstall()
+  const { canInstall, installed, install, ios } = useInstall()
   const { permission: notifyPermission, request: requestNotifyPermission, announce } = useNotifications(
     settings.desktopNotifications,
   )
@@ -1525,6 +1566,7 @@ export default function DevMailPage() {
   const [renameDomain, setRenameDomain] = useState('')
   const [inviteBusy, setInviteBusy] = useState(false)
   const [accessorsMsg, setAccessorsMsg] = useState('')
+  const [accessorsBad, setAccessorsBad] = useState(false)
   const isAdmin = account?.role === 'admin'
 
   const [composeOpen, setComposeOpen] = useState(false)
@@ -1661,7 +1703,7 @@ export default function DevMailPage() {
 
   const [threads, setThreads] = useState<ConversationRow[]>([])
   const [threadsResolved, setThreadsResolved] = useState(false)
-  const threadFolder = folder === 'archived' ? 'archive' : folder === 'trash' ? 'trash' : folder === 'starred' ? 'starred' : folder === 'snoozed' ? 'snoozed' : 'inbox'
+  const threadFolder = folder === 'archived' ? 'archive' : folder === 'trash' ? 'trash' : folder === 'starred' ? 'starred' : folder === 'snoozed' ? 'snoozed' : folder === 'spam' ? 'spam' : 'inbox'
   const threadsFetch = useRef<string | null>(null)
   const threadsLoadedFolder = useRef<string | null>(null)
   const [threadsCursor, setThreadsCursor] = useState<string | null>(null)
@@ -1974,6 +2016,33 @@ export default function DevMailPage() {
     } catch {}
   }, [apiHeaders, mailboxQuery])
 
+  const loadQueued = useCallback(async () => {
+    try {
+      const response = await fetch(`/api/mail/scheduled${mailboxQuery}`, { headers: apiHeaders() })
+      const data = await response.json()
+      if (!data.ok) return
+      type Waiting = { id: string; subject: string; to: string[]; sendAfter: string; createdAt: string; owner: string }
+      setQueuedSends(
+        (data.scheduled as Waiting[]).map(entry => ({
+          id: entry.id,
+          from: entry.owner,
+          to: entry.to,
+          subject: entry.subject,
+          createdAt: entry.createdAt,
+          scheduledAt: entry.sendAfter,
+          lastEvent: 'scheduled',
+          starred: false,
+          archived: false,
+          trashed: false,
+          opened: false,
+          openCount: 0,
+          openedAt: null,
+          owner: entry.owner,
+        })),
+      )
+    } catch {}
+  }, [apiHeaders, mailboxQuery])
+
   /**
    * Searching Sent asks the server. The list holds the newest few hundred sends and a
    * search that only looked through those found nothing older, with no sign that it had
@@ -2520,7 +2589,7 @@ export default function DevMailPage() {
   const refreshAll = useCallback(async () => {
     setRefreshing(true)
     try {
-      await Promise.all([loadSent(), refreshInbox(), loadThreads(), loadEvents()])
+      await Promise.all([loadSent(), loadQueued(), refreshInbox(), loadThreads(), loadEvents()])
       lastRefreshAt.current = Date.now()
     } finally {
       setRefreshing(false)
@@ -2560,14 +2629,96 @@ export default function DevMailPage() {
     if (isAdmin) loadAccessors()
   }, [isAdmin, loadAccessors])
 
+  const loadRecovery = useCallback(async () => {
+    try {
+      const response = await fetch('/api/mail/recovery', { headers: apiHeaders() })
+      const data = await response.json()
+      if (!data.ok) return
+      setRecoverySaved({ address: data.recoveryEmail ?? null, verified: Boolean(data.verified) })
+      setRecoveryEmail(data.recoveryEmail ?? '')
+    } catch {}
+  }, [apiHeaders])
+
+  useEffect(() => {
+    if (isLoggedIn) loadRecovery()
+  }, [isLoggedIn, loadRecovery])
+
+  const saveRecovery = useCallback(async () => {
+    setRecoveryBusy(true)
+    setRecoveryMsg('')
+    setRecoveryBad(false)
+    try {
+      const response = await fetch('/api/mail/recovery', {
+        method: 'POST',
+        headers: apiHeaders(),
+        body: JSON.stringify({ recovery: recoveryEmail.trim() }),
+      })
+      const data = await response.json()
+      if (data.ok) {
+        setRecoverySaved({ address: data.recoveryEmail ?? null, verified: Boolean(data.verified) })
+        setRecoveryMsg(
+          data.recoveryEmail
+            ? `Confirm it from ${data.recoveryEmail} — the link is on its way and expires in 24 hours.`
+            : 'Recovery address removed.',
+        )
+      } else {
+        setRecoveryBad(true)
+        setRecoveryMsg(data.error || 'Could not save that address')
+      }
+    } catch {
+      setRecoveryBad(true)
+      setRecoveryMsg('Could not reach the server')
+    } finally {
+      setRecoveryBusy(false)
+    }
+  }, [apiHeaders, recoveryEmail])
+
+  const mintResetLink = useCallback(async (target: string) => {
+    setAccessorsBad(false)
+    setAccessorsMsg('')
+    try {
+      const response = await fetch('/api/mail/accessors/reset-link', {
+        method: 'POST',
+        headers: apiHeaders(),
+        body: JSON.stringify({ email: target }),
+      })
+      const data = await response.json()
+      if (!data.ok) {
+        setAccessorsBad(true)
+        setAccessorsMsg(data.error || 'Could not make a reset link')
+        return
+      }
+      await navigator.clipboard?.writeText(data.url).catch(() => {})
+      setAccessorsMsg(`Reset link for ${data.email} copied — it works once and expires in ${data.expiresInMinutes} minutes.`)
+    } catch {
+      setAccessorsBad(true)
+      setAccessorsMsg('Could not reach the server')
+    }
+  }, [apiHeaders])
+
+  const failInvite = useCallback((message: string) => {
+    setAccessorsMsg(message)
+    setAccessorsBad(true)
+  }, [])
+
+  useEffect(() => {
+    if (!accessorsBad) return
+    const timer = setTimeout(() => {
+      setAccessorsBad(false)
+      setAccessorsMsg('')
+    }, 6000)
+    return () => clearTimeout(timer)
+  }, [accessorsBad, accessorsMsg])
+
   const inviteAccessor = useCallback(async () => {
     const target = inviteEmail.trim().toLowerCase()
-    if (!target.includes('@')) {
-      setAccessorsMsg('Enter a valid email')
+    if (!/^[^@\s]+@[^@\s.]+\.[^@\s]+$/.test(target)) {
+      failInvite('That is not an email address we can send to.')
       return
     }
     setInviteBusy(true)
     setAccessorsMsg('')
+    setAccessorsBad(false)
     try {
       const response = await fetch('/api/mail/accessors', {
         method: 'POST',
@@ -2582,6 +2733,7 @@ export default function DevMailPage() {
       })
       const data = await response.json()
       if (data.ok) {
+        setAccessorsBad(false)
         setAccessorsMsg(`Invite sent to ${data.email} — mailbox ${data.address}.`)
         setInviteEmail('')
         setInviteName('')
@@ -2589,14 +2741,14 @@ export default function DevMailPage() {
         setInviteRole('member')
         loadAccessors()
       } else {
-        setAccessorsMsg(data.error || 'Could not send the invite')
+        failInvite(data.error || 'Could not send the invite')
       }
     } catch {
-      setAccessorsMsg('Could not reach the server')
+      failInvite('Could not reach the server')
     } finally {
       setInviteBusy(false)
     }
-  }, [apiHeaders, inviteEmail, inviteName, inviteRole, inviteHandle, inviteDomain, loadAccessors])
+  }, [apiHeaders, inviteEmail, inviteName, inviteRole, inviteHandle, inviteDomain, loadAccessors, failInvite])
 
   const saveMailboxName = useCallback(
     async (targetEmail: string) => {
@@ -2773,13 +2925,21 @@ export default function DevMailPage() {
       .catch(() => {})
   }, [isLoggedIn, apiHeaders])
 
-  const scheduledEmails = useMemo(
-    () =>
-      sentEmails
-        .filter(entry => entry.lastEvent === 'scheduled' || (entry.scheduledAt && new Date(entry.scheduledAt).getTime() > now))
-        .sort((a, b) => new Date(a.scheduledAt ?? a.createdAt).getTime() - new Date(b.scheduledAt ?? b.createdAt).getTime()),
-    [sentEmails, now],
-  )
+  const scheduledEmails = useMemo(() => {
+    // The app's own queue, plus anything a provider is still holding from before this was
+    // ours to keep. Matched on id so one message cannot appear twice.
+    const waiting = [...queuedSends]
+    const seen = new Set(waiting.map(entry => entry.id))
+    for (const entry of sentEmails) {
+      if (seen.has(entry.id)) continue
+      if (entry.lastEvent === 'scheduled' || (entry.scheduledAt && new Date(entry.scheduledAt).getTime() > now)) {
+        waiting.push(entry)
+      }
+    }
+    return waiting.sort(
+      (a, b) => new Date(a.scheduledAt ?? a.createdAt).getTime() - new Date(b.scheduledAt ?? b.createdAt).getTime(),
+    )
+  }, [queuedSends, sentEmails, now])
   const deliveredEmails = useMemo(
     () => sentEmails.filter(entry => !scheduledEmails.some(scheduled => scheduled.id === entry.id)),
     [sentEmails, scheduledEmails],
@@ -2837,6 +2997,7 @@ export default function DevMailPage() {
       starred: serverCounts?.starred ?? 0,
       archived: serverCounts?.archived ?? 0,
       trashed: serverCounts?.trashed ?? 0,
+      spam: serverCounts?.spam ?? 0,
       snoozed: serverCounts?.snoozed ?? 0,
     }),
     [serverCounts],
@@ -2855,6 +3016,7 @@ export default function DevMailPage() {
     if (folder === 'trash') return tally.trashed
     if (folder === 'starred') return tally.starred
     if (folder === 'snoozed') return tally.snoozed
+    if (folder === 'spam') return tally.spam
     if (folder === 'inbox') return tally.inbox
     return null
   }, [serverCounts, search, folder])
@@ -2889,6 +3051,7 @@ export default function DevMailPage() {
         read: entry.read,
         starred: entry.starred,
         hasAttachment: entry.attachments.length > 0,
+        addressed: entry.addressed,
         labels: entry.labels,
         folder: entry.trashed ? 'trash' : entry.archived ? 'archive' : 'inbox',
       })
@@ -2981,6 +3144,9 @@ export default function DevMailPage() {
     const OPERATORS: Suggestion[] = [
       { label: 'is:unread', hint: 'only unread', apply: `${before}is:unread ` },
       { label: 'is:starred', hint: 'only starred', apply: `${before}is:starred ` },
+      { label: 'is:copied', hint: 'only mail you were copied in', apply: `${before}is:copied ` },
+      { label: '-is:copied', hint: 'hide mail you were copied in', apply: `${before}-is:copied ` },
+      { label: 'is:direct', hint: 'only mail addressed to you', apply: `${before}is:direct ` },
       { label: 'has:attachment', hint: 'with files', apply: `${before}has:attachment ` },
       { label: 'from:', hint: 'sender', apply: `${before}from:` },
       { label: 'to:', hint: 'recipient', apply: `${before}to:` },
@@ -3006,7 +3172,8 @@ export default function DevMailPage() {
       if (folder === 'starred') return entry.starred && !entry.trashed
       if (folder === 'archived') return entry.archived && !entry.trashed
       if (folder === 'trash') return entry.trashed
-      return !entry.archived && !entry.trashed && !asleep
+      if (folder === 'spam') return Boolean(entry.spam)
+      return !entry.archived && !entry.trashed && !asleep && !entry.spam
     },
     [folder],
   )
@@ -3097,7 +3264,8 @@ export default function DevMailPage() {
 
   /** The folders backed by the paged inbound list, as opposed to ones loaded whole. */
   const isInboundFolder =
-    folder === 'inbox' || folder === 'starred' || folder === 'snoozed' || folder === 'archived' || folder === 'trash'
+    folder === 'inbox' || folder === 'starred' || folder === 'snoozed' || folder === 'archived' ||
+    folder === 'spam' || folder === 'trash'
 
   const listItems = useMemo(() => {
     const sentToItem = (entry: SentEmail) => ({
@@ -3106,6 +3274,8 @@ export default function DevMailPage() {
       primary: `To: ${entry.to.join(', ')}`,
       subject: entry.subject,
       snippet: '',
+      addressed: 'direct' as const,
+      risk: 'clean' as const,
       time:
         folder === 'scheduled' && entry.scheduledAt
           ? `in ${formatCountdown(new Date(entry.scheduledAt).getTime() - now)}`
@@ -3113,7 +3283,7 @@ export default function DevMailPage() {
       unread: false,
       starred: entry.starred,
       hasAttachment: (entry.attachmentCount ?? 0) > 0,
-      chip: (folder === 'scheduled' ? 'scheduled' : null) as string | null,
+      chip: (folder === 'scheduled' ? 'scheduled' : entry.isAuto ? 'automated' : null) as string | null,
       threadCount: 1,
       latestAt: new Date(entry.createdAt).getTime(),
       labels: [] as string[],
@@ -3132,6 +3302,7 @@ export default function DevMailPage() {
       }
       const inThreadFolder = (thread: ConversationRow) => {
         const asleep = Boolean(thread.snoozedUntil && Date.parse(thread.snoozedUntil) > Date.now())
+        if (folder === 'spam') return thread.spamCount > 0
         if (folder === 'snoozed') return asleep
         if (folder === 'archived') return thread.archivedCount > 0
         if (folder === 'trash') return thread.trashedCount > 0
@@ -3156,6 +3327,8 @@ export default function DevMailPage() {
                 starred: thread.starredCount > 0,
                 hasAttachment: thread.attachCount > 0,
                 chip: null as string | null,
+                addressed: thread.addressed ?? 'direct',
+                risk: thread.risk ?? 'clean',
                 threadCount: thread.count,
                 latestAt: new Date(thread.latestAt).getTime(),
                 labels: thread.labels,
@@ -3189,6 +3362,15 @@ export default function DevMailPage() {
           starred: members.some(member => member.starred),
           hasAttachment: members.some(member => member.attachments.length > 0),
           chip: null as string | null,
+          // The row speaks for its newest message; the banner in the reader is per message.
+          addressed: latest.addressed ?? 'direct',
+          risk: members.some(member => member.risk === 'virus')
+            ? 'virus'
+            : members.some(member => member.risk === 'spam')
+              ? 'spam'
+              : members.some(member => member.risk === 'suspicious')
+                ? 'suspicious'
+                : 'clean',
           threadCount: members.length,
           latestAt: new Date(latest.receivedAt).getTime(),
           labels: Array.from(new Set(members.flatMap(member => member.labels))),
@@ -3257,7 +3439,10 @@ export default function DevMailPage() {
   const selectedInbound = selectedId ? inboxEmails.find(entry => entry.id === selectedId) ?? null : null
   const selectedSent =
     selectedId && !selectedInbound
-      ? sentEmails.find(entry => entry.id === selectedId) ?? sentSearchResults?.find(entry => entry.id === selectedId) ?? null
+      ? sentEmails.find(entry => entry.id === selectedId)
+        ?? queuedSends.find(entry => entry.id === selectedId)
+        ?? sentSearchResults?.find(entry => entry.id === selectedId)
+        ?? null
       : null
   const selectedDetail = selectedSent ? detailCache[selectedSent.id] ?? null : null
   const selectedIsThread = selectedInbound ? unifiedThread(selectedInbound.id).length > 1 : false
@@ -3468,6 +3653,36 @@ export default function DevMailPage() {
   const setInboundFlagRef = useRef<(ids: string[], flags: InboundFlagPatch) => void>(() => {})
   const threadIdsRef = useRef<(id: string) => string[]>(id => [id])
 
+  /**
+   * Moves mail into or out of quarantine. Both directions teach: marking spam counts
+   * against the sender, rescuing counts for them, and the next message from that domain
+   * is judged with the answer already in hand.
+   */
+  const markSpam = useCallback(
+    async (ids: string[], spam: boolean) => {
+      if (!ids.length) return
+      setInboxEmails(list => list.map(entry => (ids.includes(entry.id) ? { ...entry, spam } : entry)))
+      setSelectedId(null)
+      setSelectedBulk(new Set())
+      try {
+        await fetch('/api/mail/inbox', {
+          method: 'PATCH',
+          headers: apiHeaders(),
+          body: JSON.stringify({ ids, spam }),
+        })
+      } catch {}
+      setSentFlash(spam ? 'Moved to Spam' : 'Moved back to the inbox')
+      window.setTimeout(() => setSentFlash(''), 2500)
+      // The refresh dedupes on folder+query, which is unchanged here — clearing the key is
+      // what lets the list re-read the folder the message just left.
+      inboxFetch.current = null
+      refreshInbox()
+      loadThreads()
+      loadCounts(true)
+    },
+    [apiHeaders],
+  )
+
   const setInboundFlag = useCallback(
     (ids: string[], flags: Partial<Pick<InboundEmail, 'read' | 'starred' | 'archived' | 'trashed'>>) => {
       if (flags.read === true) ids.forEach(id => pendingRead.current.add(id))
@@ -3618,14 +3833,22 @@ export default function DevMailPage() {
   const bulkCancelScheduled = useCallback(async () => {
     const ids = Array.from(selectedBulk)
     if (!ids.length) return
+    // Two kinds of waiting message, two places to cancel it: one this app is holding, and
+    // one a provider still has from before the queue was ours.
+    const queuedIds = new Set(queuedSends.map(entry => entry.id))
     await Promise.all(
-      ids.map(id => fetch(`/api/mail/emails/${id}`, { method: 'DELETE', headers: apiHeaders() }).catch(() => {})),
+      ids.map(id =>
+        queuedIds.has(id)
+          ? fetch(`/api/mail/scheduled?id=${encodeURIComponent(id)}`, { method: 'DELETE', headers: apiHeaders() }).catch(() => {})
+          : fetch(`/api/mail/emails/${id}`, { method: 'DELETE', headers: apiHeaders() }).catch(() => {}),
+      ),
     )
     setSelectedBulk(new Set())
     setSentFlash('Canceled')
     window.setTimeout(() => setSentFlash(''), 2500)
     loadSent()
-  }, [selectedBulk, apiHeaders, loadSent])
+    loadQueued()
+  }, [selectedBulk, apiHeaders, loadSent, loadQueued, queuedSends])
 
   // Admin: bulk-reassign the selection to a mailbox (routes inbound + sent ids separately).
   const bulkAssign = useCallback(
@@ -3988,7 +4211,17 @@ export default function DevMailPage() {
           if (request.status >= 200 && request.status < 300) resolve()
           else reject(new Error(`Upload failed (${request.status})`))
         }
-        request.onerror = () => { settle(); reject(new Error('Upload failed. Check your connection and retry.')) }
+        // A browser reports a refused cross-origin PUT exactly as it reports being
+        // offline: status 0, no headers, no detail. Sending everyone to check their
+        // connection is what made a bucket missing its CORS rules look like flaky wifi.
+        request.onerror = () => {
+          settle()
+          reject(new Error(
+            navigator.onLine
+              ? 'The storage bucket refused the upload. If it keeps happening the bucket is not accepting uploads from this site, which is its CORS rules rather than your connection.'
+              : 'You are offline. Retry once the connection is back.',
+          ))
+        }
         request.onabort = () => settle()
         request.send(file)
       }),
@@ -4183,15 +4416,10 @@ export default function DevMailPage() {
       setComposeError(`${failedUpload.filename} did not upload. Remove it or try again.`)
       return
     }
-    let html = buildEmailHtml(compose, signatureHtml, fontCss, defaultFont)
-    let text = buildEmailText(compose, signatureText)
-    if (!html.trim() && !text.trim()) {
-      setComposeError('Write something first')
-      return
-    }
-
     const attachable = attachments.filter(entry => entry.size <= ATTACH_LIMIT_BYTES)
     const linked = attachments.filter(entry => entry.size > ATTACH_LIMIT_BYTES)
+    let linksHtml = ''
+    let linksText = ''
     if (linked.length) {
       const rows = linked
         .map(
@@ -4199,8 +4427,15 @@ export default function DevMailPage() {
             `<tr><td style="padding:6px 0"><a href="${entry.shareUrl ?? entry.url}" style="display:inline-block;background:${CLIENT_BRAND.accent};color:#fff;text-decoration:none;font-weight:600;padding:9px 16px;border-radius:8px;font-family:Arial,sans-serif;font-size:14px">Download ${escapeHtml(entry.filename)} (${formatBytes(entry.size)})</a></td></tr>`,
         )
         .join('')
-      html += `<div style="margin-top:20px"><p style="font-family:Arial,sans-serif;font-size:14px;color:#5A5170;margin:0 0 8px">Large files:</p><table role="presentation">${rows}</table></div>`
-      text += `\n\nLarge files:\n${linked.map(entry => `${entry.filename} — ${entry.shareUrl ?? entry.url}`).join('\n')}`
+      linksHtml = `<div style="margin:18px 0"><p style="font-family:Arial,sans-serif;font-size:14px;color:#5A5170;margin:0 0 8px">${linked.length === 1 ? 'Attached, as a download link:' : 'Attached, as download links:'}</p><table role="presentation">${rows}</table></div>`
+      linksText = `\n\n${linked.length === 1 ? 'Attached, as a download link:' : 'Attached, as download links:'}\n${linked.map(entry => `${entry.filename} — ${entry.shareUrl ?? entry.url}`).join('\n')}`
+    }
+
+    const html = buildEmailHtml(compose, signatureHtml, fontCss, defaultFont, linksHtml)
+    const text = buildEmailText(compose, signatureText, linksText)
+    if (!html.trim() && !text.trim()) {
+      setComposeError('Write something first')
+      return
     }
 
     // Resend can't schedule a send that carries attachments, so those go out
@@ -4280,6 +4515,7 @@ export default function DevMailPage() {
         setSentFlash('Canceled — back to draft')
         window.setTimeout(() => setSentFlash(''), 2500)
         loadSent()
+        loadQueued()
       } else {
         setSentFlash(data.error?.includes('cancel') ? 'Too late — already sent' : `Could not cancel: ${data.error}`)
         window.setTimeout(() => setSentFlash(''), 3000)
@@ -4296,33 +4532,45 @@ export default function DevMailPage() {
       setSentFlash('Sent')
       window.setTimeout(() => setSentFlash(''), 2500)
       loadSent()
+      loadQueued()
     }
   }, [undo, now, loadSent])
 
   const cancelScheduled = async (id: string) => {
     try {
-      const response = await fetch(`/api/mail/emails/${id}`, { method: 'DELETE', headers: apiHeaders() })
+      const waiting = queuedSends.some(entry => entry.id === id)
+      const response = waiting
+        ? await fetch(`/api/mail/scheduled?id=${encodeURIComponent(id)}`, { method: 'DELETE', headers: apiHeaders() })
+        : await fetch(`/api/mail/emails/${id}`, { method: 'DELETE', headers: apiHeaders() })
       const data = await response.json()
       setSentFlash(data.ok ? 'Canceled' : `Could not cancel: ${data.error}`)
       window.setTimeout(() => setSentFlash(''), 2500)
       if (data.ok) {
         setSelectedId(null)
         loadSent()
+        loadQueued()
       }
     } catch {}
   }
 
   const rescheduleScheduled = async (id: string, iso: string) => {
     try {
-      const response = await fetch(`/api/mail/emails/${id}`, {
-        method: 'PATCH',
-        headers: apiHeaders(),
-        body: JSON.stringify({ scheduledAt: iso }),
-      })
+      const waiting = queuedSends.some(entry => entry.id === id)
+      const response = waiting
+        ? await fetch('/api/mail/scheduled', {
+            method: 'PATCH',
+            headers: apiHeaders(),
+            body: JSON.stringify({ id, scheduledAt: iso }),
+          })
+        : await fetch(`/api/mail/emails/${id}`, {
+            method: 'PATCH',
+            headers: apiHeaders(),
+            body: JSON.stringify({ scheduledAt: iso }),
+          })
       const data = await response.json()
       setSentFlash(data.ok ? 'Rescheduled' : `Could not reschedule: ${data.error}`)
       window.setTimeout(() => setSentFlash(''), 2500)
-      if (data.ok) loadSent()
+      if (data.ok) { loadSent(); loadQueued() }
     } catch {}
   }
 
@@ -5006,13 +5254,24 @@ export default function DevMailPage() {
   }
 
   const revokeShareLink = async (id: string) => {
-    if (!window.confirm('Revoke this link? Anyone holding it loses access immediately.')) return
+    const agreed = await confirm({
+      title: 'Revoke this link?',
+      body: 'Anyone holding it loses access immediately, including people you have already sent it to.',
+      confirmLabel: 'Revoke link',
+      danger: true,
+    })
+    if (!agreed) return
     await fetch(`/api/mail/share?id=${encodeURIComponent(id)}`, { method: 'DELETE', headers: apiHeaders() }).catch(() => {})
     loadShares()
   }
 
   const changeSharePassword = async (id: string) => {
-    const next = window.prompt('Password for this link (leave blank to remove it):')
+    const next = await promptFor({
+      title: 'Password for this link',
+      body: 'Anyone opening the link is asked for this. Leave it blank to remove the password entirely.',
+      confirmLabel: 'Save password',
+      field: { label: 'Password', type: 'password', placeholder: 'Blank removes it' },
+    })
     if (next === null) return
     await fetch('/api/mail/share', {
       method: 'PATCH',
@@ -5072,11 +5331,13 @@ export default function DevMailPage() {
     }
     setResetBusy(true)
     try {
-      await fetch('/api/mail/request-reset', {
+      const response = await fetch('/api/mail/request-reset', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ email }),
       })
+      const data = await response.json().catch(() => ({}))
+      setResetMessage(typeof data.message === 'string' ? data.message : '')
       setResetSent(true)
     } catch {
       setLoginError('Network error — try again')
@@ -5098,6 +5359,7 @@ export default function DevMailPage() {
     scheduled: 'Scheduled',
     drafts: 'Drafts',
     archived: 'Archive',
+    spam: 'Spam',
     trash: 'Trash',
   }
 
@@ -5115,9 +5377,11 @@ export default function DevMailPage() {
             {resetSent ? (
               <>
                 <p className={styles.loginSub}>
-                  If {email} is an account, a reset link is on its way. The link expires in 30 minutes.
+                  {resetMessage
+                    ? resetMessage
+                    : `If ${email} is an account, a reset link is on its way.`}
                 </p>
-                <button className={styles.loginBtn} onClick={() => { setResetMode(false); setResetSent(false) }}>
+                <button className={styles.loginBtn} onClick={() => { setResetMode(false); setResetSent(false); setResetMessage('') }}>
                   Back to sign in
                 </button>
               </>
@@ -5167,7 +5431,11 @@ export default function DevMailPage() {
                 onChange={event => {
                   const typed = event.target.value
                   setLoginRaw(typed)
-                  setEmail(`${typed.split('@')[0].trim()}@${loginDomain}`)
+                  // A seat's sign-in address can live outside this mailbox's own domains, so a
+                  // full address is taken as typed; the picker only completes a bare local part.
+                  const trimmed = typed.trim()
+                  const [local, domain] = trimmed.split('@')
+                  setEmail(domain ? trimmed.toLowerCase() : `${local}@${loginDomain}`)
                 }}
                 autoComplete="username"
                 placeholder="you"
@@ -5530,6 +5798,42 @@ export default function DevMailPage() {
     )
   }
 
+/**
+   * A message whose whole content is its attachment — a scan, a statement, a DMARC report —
+   * used to read as "(no content)". Show the file itself where the body would have been,
+   * for the types a browser can actually render; the rest get named rather than hidden.
+   */
+  const renderBodylessAttachment = (list: DownloadAttachment[]) => {
+    const file = list.find(entry => entry.downloadUrl && !entry.shareId)
+    if (!file) return null
+    const kind = attachmentKind(file.filename, file.contentType)
+    const source = inlineUrl(file.downloadUrl)
+
+    if (kind === 'image') {
+      return (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img className={styles.bodyFileImage} src={source} alt={file.filename} />
+      )
+    }
+    if (kind === 'pdf') {
+      return <iframe className={styles.bodyFileFrame} src={source} title={file.filename} />
+    }
+    if (kind === 'video') return <video className={styles.bodyFileImage} src={source} controls preload="metadata" />
+    if (kind === 'audio') return <audio className={styles.bodyFileAudio} src={source} controls preload="metadata" />
+
+    // Office documents and archives have no native viewer; naming the file and offering it
+    // beats a blank panel, and beats pretending a preview exists.
+    return (
+      <a className={styles.bodyFileCard} href={file.downloadUrl} target="_blank" rel="noopener noreferrer">
+        <span className={styles.bodyFileGlyph}>{ICONS.file}</span>
+        <span>
+          <strong>{file.filename}</strong>
+          <small>{formatSize(file.size)} · opens in a new tab</small>
+        </span>
+      </a>
+    )
+  }
+
   const renderInboundAttachments = (message: InboundEmail) => {
     if (!visibleAttachments(message).length) return null
     // The stored-blob lookup answers with an empty array for anything it does not
@@ -5582,7 +5886,9 @@ export default function DevMailPage() {
       const textShown = quoteOpen.has(message.id)
       return (
         <>
-          <pre className={styles.readerText}>{(textShown ? message.text : plain.head) || '(no content)'}</pre>
+          {(textShown ? message.text : plain.head)
+            ? <pre className={styles.readerText}>{textShown ? message.text : plain.head}</pre>
+            : renderBodylessAttachment(inboundAttachments[message.id] ?? []) ?? <pre className={styles.readerText}>(no content)</pre>}
           {plain.tail && renderQuoteLine(message.id, textShown)}
         </>
       )
@@ -5600,7 +5906,7 @@ export default function DevMailPage() {
         <>
           <iframe
             className={styles.threadFrame}
-            sandbox="allow-same-origin"
+            sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
             srcDoc={frameHtml(bodyHtml, showRemote, readerSpacing, resolvedTheme === 'dark')}
             title="Email content"
             onLoad={event => {
@@ -5616,7 +5922,7 @@ export default function DevMailPage() {
     }
     return (
       <>
-        <iframe className={styles.readerFrame} sandbox="" srcDoc={frameHtml(bodyHtml, showRemote, readerSpacing, resolvedTheme === 'dark')} title="Email content" />
+        <iframe className={styles.readerFrame} sandbox="allow-popups allow-popups-to-escape-sandbox" srcDoc={frameHtml(bodyHtml, showRemote, readerSpacing, resolvedTheme === 'dark')} title="Email content" />
         {split.tail && renderQuoteLine(message.id, quoteShown)}
       </>
     )
@@ -5634,7 +5940,7 @@ export default function DevMailPage() {
       return (
         <iframe
           className={styles.threadFrame}
-          sandbox="allow-same-origin"
+          sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
           srcDoc={frameHtml(healGooglePrivateImages(detail.html, CLIENT_BRAND.markUrl), true, readerSpacing, resolvedTheme === 'dark')}
           title="Sent email"
           onLoad={event => {
@@ -5646,7 +5952,9 @@ export default function DevMailPage() {
         />
       )
     }
-    return <pre className={styles.readerText}>{detail.text?.trim() || '(no content)'}</pre>
+    return detail.text?.trim()
+      ? <pre className={styles.readerText}>{detail.text}</pre>
+      : renderBodylessAttachment(detail.attachments ?? []) ?? <pre className={styles.readerText}>(no content)</pre>
   }
 
   /** What we attached to a message we sent. The inbound side has always shown these. */
@@ -5906,13 +6214,16 @@ export default function DevMailPage() {
               )
             ) : mine ? (
               <>
-                {renderSentBody(item.sent)}
+                {/* Files first. The document is what a broker opened the message for; the
+                    covering note is read second, and burying the attachment under a long
+                    quoted thread meant scrolling past the reply to reach the thing itself. */}
                 {renderSentAttachments(item.sent)}
+                {renderSentBody(item.sent)}
               </>
             ) : (
               <>
-                {renderInboundBody(item.inbound, true)}
                 {renderInboundAttachments(item.inbound)}
+                {renderInboundBody(item.inbound, true)}
               </>
             )}
           </div>
@@ -5989,6 +6300,34 @@ export default function DevMailPage() {
               </div>
               <div className={styles.readerDate}>{new Date(inbound.receivedAt).toLocaleString()}</div>
             </div>
+            {inbound.risk && inbound.risk !== 'clean' && (
+              <div className={styles.riskBanner} role="alert">
+                <span className={styles.riskBannerIcon}>{ICONS.warn}</span>
+                <span>
+                  <strong>
+                    {inbound.risk === 'virus'
+                      ? 'A virus scan failed on this message'
+                      : inbound.risk === 'spam'
+                        ? 'This message looks like spam'
+                        : 'This message may not be from who it claims'}
+                  </strong>
+                  {(inbound.riskReasons ?? []).length > 0 && (
+                    <span className={styles.riskBannerWhy}>{(inbound.riskReasons ?? []).join(' \u00b7 ')}</span>
+                  )}
+                  <span className={styles.riskBannerWhy}>
+                    Treat links and attachments here with care, and do not enter passwords or payment details.
+                  </span>
+                </span>
+              </div>
+            )}
+            {inbound.addressed && inbound.addressed !== 'direct' && (
+              <p className={styles.copiedBanner} role="note">
+                <span className={styles.copiedBannerIcon}>{ICONS.info}</span>
+                {inbound.addressed === 'copied'
+                  ? 'You were copied in this mail — it was addressed to someone else.'
+                  : 'You were not addressed directly — this copy reached you another way.'}
+              </p>
+            )}
             {showFullHeaders && (
               <dl className={styles.fullHeaders}>
                 <div><dt>From</dt><dd>{inbound.from}</dd></div>
@@ -6486,7 +6825,7 @@ export default function DevMailPage() {
                   <div className={styles.replyPreviewWrap}>
                     <iframe
                       className={styles.replyPreview}
-                      sandbox="allow-same-origin"
+                      sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
                       srcDoc={frameHtml(replyEffHtml, true, readerSpacing, resolvedTheme === 'dark')}
                       title="Reply preview"
                       onLoad={event => {
@@ -6685,16 +7024,28 @@ export default function DevMailPage() {
             const ordered = [...(eventsByEmail[selectedSent.id] ?? []), ...opened].sort(
               (a, b) => new Date(a.at).getTime() - new Date(b.at).getTime(),
             )
-            const seen = new Set<string>()
-            const timeline = ordered
-              .filter(event => {
-                if (seen.has(event.type)) return false
-                seen.add(event.type)
-                return true
-              })
+            // One event arrives per recipient, so a message to nine people that reached
+            // eight of them carries eight "delivered" and one "bounced". Collapsed to a
+            // bare type each, that read as though the whole message had bounced. Group
+            // them instead: keep the count, and name the addresses that actually failed.
+            const groups = new Map<string, { type: string; at: string; count: number; who: string[]; meta?: Record<string, string> }>()
+            for (const event of ordered) {
+              const recipient = event.meta?.to
+              const group = groups.get(event.type)
+              if (!group) {
+                groups.set(event.type, { type: event.type, at: event.at, count: 1, who: recipient ? [recipient] : [], meta: event.meta })
+                continue
+              }
+              group.count += 1
+              if (recipient && !group.who.includes(recipient)) group.who.push(recipient)
+              // Keep the first reason given; they are the same message per bounce type.
+              if (!group.meta?.bounceMessage && event.meta?.bounceMessage) group.meta = event.meta
+            }
+            const timeline = [...groups.values()]
               // sent/delivered often share a timestamp, so order by the email
               // lifecycle rather than time, which can flip them.
               .sort((a, b) => statusRank(a.type) - statusRank(b.type))
+            const audience = groups.get('email.sent')?.who.length ?? 0
             if (!timeline.length) return null
             return (
               <div className={styles.activity}>
@@ -6719,9 +7070,16 @@ export default function DevMailPage() {
                         <span className={styles.eventType}>
                           {event.type.replace('email.', '')}
                           {event.meta?.count ? ` ×${event.meta.count}` : ''}
+                          {audience > 1 && event.count < audience && !/bounce|fail|complain/.test(event.type)
+                            ? ` — ${event.count} of ${audience}`
+                            : ''}
                         </span>
                         <span className={styles.eventTime}>{new Date(event.at).toLocaleString()}</span>
                       </div>
+                      {/* Which addresses failed, not just that something did. */}
+                      {/bounce|fail|complain/.test(event.type) && event.who.length > 0 && (
+                        <span className={styles.eventMeta}>{event.who.join(', ')}</span>
+                      )}
                       {event.meta?.link && (
                         <span className={styles.eventMeta} title={event.meta.link}>
                           {event.meta.link}
@@ -6738,9 +7096,11 @@ export default function DevMailPage() {
             {!selectedDetail ? (
               <BodySkeleton />
             ) : selectedDetail.html ? (
-              <iframe className={styles.readerFrame} sandbox="" srcDoc={frameHtml(selectedDetail.html, true, readerSpacing, resolvedTheme === 'dark')} title="Email content" />
+              <iframe className={styles.readerFrame} sandbox="allow-popups allow-popups-to-escape-sandbox" srcDoc={frameHtml(selectedDetail.html, true, readerSpacing, resolvedTheme === 'dark')} title="Email content" />
+            ) : selectedDetail.text ? (
+              <pre className={styles.readerText}>{selectedDetail.text}</pre>
             ) : (
-              <pre className={styles.readerText}>{selectedDetail.text ?? '(no content)'}</pre>
+              renderBodylessAttachment(selectedDetail.attachments ?? []) ?? <pre className={styles.readerText}>(no content)</pre>
             )}
           </div>
         </>
@@ -6865,10 +7225,10 @@ export default function DevMailPage() {
           {ICONS.refresh}
         </button>
       )}
-      {canInstall && !installed && (
+      {!installed && (canInstall || ios) && (
         <button
           className={styles.themeToggle}
-          onClick={install}
+          onClick={canInstall ? install : () => { setSettingsTab('app'); setSettingsOpen(true) }}
           aria-label={`Install ${CLIENT_BRAND.name} Mail as an app`}
         >
           {ICONS.install}
@@ -7002,7 +7362,7 @@ export default function DevMailPage() {
           <span className={styles.composePen}>{ICONS.pencil}</span>
           <span className={styles.railLabel}>Compose</span>
         </button>
-        {(['inbox', 'starred', 'snoozed', 'sent', 'scheduled', 'drafts', 'archived', 'trash'] as Folder[]).map(key => {
+        {(['inbox', 'starred', 'snoozed', 'sent', 'scheduled', 'drafts', 'archived', 'spam', 'trash'] as Folder[]).map(key => {
           const count =
             key === 'inbox'
               ? folderCounts.inbox || ''
@@ -7018,7 +7378,9 @@ export default function DevMailPage() {
                       ? drafts.length || ''
                       : key === 'archived'
                         ? folderCounts.archived || ''
-                        : folderCounts.trashed || ''
+                        : key === 'spam'
+                          ? folderCounts.spam || ''
+                          : folderCounts.trashed || ''
           return (
             <button
               key={key}
@@ -7192,6 +7554,11 @@ export default function DevMailPage() {
                 {ICONS.trash}
                 <span className={styles.bulkBtnLabel}>Delete</span>
               </button>
+            ) : folder === 'spam' ? (
+              <button className={styles.bulkBtn} onClick={() => markSpam(Array.from(selectedBulk), false)} title="Not spam">
+                {ICONS.inbox}
+                <span className={styles.bulkBtnLabel}>Not spam</span>
+              </button>
             ) : folder === 'scheduled' ? (
               <button className={styles.bulkBtn} onClick={bulkCancelScheduled} title="Cancel sends">
                 {ICONS.trash}
@@ -7201,6 +7568,10 @@ export default function DevMailPage() {
               <>
                 {folder === 'inbox' && (
                   <>
+                    <button className={styles.bulkBtn} onClick={() => markSpam(Array.from(selectedBulk), true)} title="Report spam">
+                      {ICONS.warn}
+                      <span className={styles.bulkBtnLabel}>Spam</span>
+                    </button>
                     <button className={styles.bulkBtn} onClick={() => bulkFlag({ read: true })} title="Mark read">
                       {ICONS.unread}
                       <span className={styles.bulkBtnLabel}>Read</span>
@@ -7443,6 +7814,20 @@ export default function DevMailPage() {
                     <Ticker className={styles.itemSubjectText} enabled={tickerOn('listSubject')}>{item.subject}</Ticker>
                   </p>
                   {item.snippet && <Ticker className={`${styles.itemSnippet} ${styles.tickerBlock}`} enabled={tickerOn('listSnippet')}>{item.snippet}</Ticker>}
+                  {item.kind === 'inbound' && item.risk && item.risk !== 'clean' && (
+                    <span className={styles.riskNote}>
+                      <span className={styles.riskNoteIcon}>{ICONS.warn}</span>
+                      {item.risk === 'virus' ? 'Virus scan failed' : item.risk === 'spam' ? 'Looks like spam' : 'Sender unverified'}
+                    </span>
+                  )}
+                  {item.kind === 'inbound' && item.addressed !== 'direct' && (
+                    <span className={styles.copiedNote}>
+                      <span className={styles.copiedNoteIcon}>{ICONS.info}</span>
+                      {item.addressed === 'copied'
+                        ? 'You were copied in this mail'
+                        : 'You were not addressed directly'}
+                    </span>
+                  )}
                   {item.labels.length > 0 && (
                     <span className={styles.itemLabels}>
                       {item.labels.map(labelId => {
@@ -7484,7 +7869,9 @@ export default function DevMailPage() {
                               ? styles.chipBounced
                               : item.chip === 'draft'
                                 ? styles.chipDraft
-                                : ''
+                                : item.chip === 'automated'
+                                  ? styles.chipAuto
+                                  : ''
                       }`}
                     >
                       {item.chip}
@@ -7841,7 +8228,7 @@ export default function DevMailPage() {
               {compose.quoteHtml && !compose.campaign.kind && (
                 <details className={styles.composeQuote}>
                   <summary className={styles.composeQuoteLabel}>Quoted message</summary>
-                  <iframe className={styles.composeQuoteFrame} sandbox="allow-same-origin" srcDoc={frameHtml(compose.quoteHtml, true, readerSpacing, resolvedTheme === 'dark')} title="Quoted message" />
+                  <iframe className={styles.composeQuoteFrame} sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox" srcDoc={frameHtml(compose.quoteHtml, true, readerSpacing, resolvedTheme === 'dark')} title="Quoted message" />
                 </details>
               )}
               {/* The signature is appended on send, so show it here rather than leaving the
@@ -8256,6 +8643,40 @@ export default function DevMailPage() {
               <p className={styles.settingsNote}>{account?.address || email || 'Not signed in'}</p>
             </div>
 
+            <div className={styles.settingsField}>
+              <span>Recovery email</span>
+              <p className={styles.settingsProse}>
+                Where a password reset is sent. It has to be an address outside this mailbox, and it only
+                counts once you confirm it — otherwise a locked account has to be reset by an administrator.
+              </p>
+              <div className={styles.pwWrap}>
+                <input
+                  type="email"
+                  autoComplete="email"
+                  className={recoveryBad ? styles.fieldBad : ''}
+                  aria-invalid={recoveryBad}
+                  placeholder="you@somewhere-else.com"
+                  value={recoveryEmail}
+                  onChange={event => { setRecoveryEmail(event.target.value); setRecoveryBad(false) }}
+                />
+                <button type="button" className={styles.pwToggle} disabled={recoveryBusy} onClick={saveRecovery}>
+                  {recoveryBusy ? 'Sending…' : recoverySaved.address === recoveryEmail.trim().toLowerCase() && recoverySaved.address ? 'Resend' : 'Save'}
+                </button>
+              </div>
+              {recoverySaved.address && (
+                <p className={styles.settingsNote}>
+                  {recoverySaved.verified
+                    ? `Confirmed — resets go to ${recoverySaved.address}.`
+                    : `${recoverySaved.address} is not confirmed yet, so resets cannot be sent there.`}
+                </p>
+              )}
+              {recoveryMsg && (
+                <p className={`${styles.settingsNote} ${recoveryBad ? styles.msgBad : ''}`} role={recoveryBad ? 'alert' : undefined}>
+                  {recoveryMsg}
+                </p>
+              )}
+            </div>
+
             <div
               ref={pwSectionRef}
               className={`${styles.pwSection} ${pwHighlight ? styles.pwSectionFocus : ''}`}
@@ -8268,18 +8689,33 @@ export default function DevMailPage() {
               </p>
               <label className={styles.settingsField}>
                 <span>Current password</span>
-                <input type="password" autoComplete="current-password" value={pwCurrent}
-                  onChange={event => setPwCurrent(event.target.value)} />
+                <div className={styles.pwWrap}>
+                  <input type={pwReveal ? 'text' : 'password'} autoComplete="current-password" value={pwCurrent}
+                    onChange={event => setPwCurrent(event.target.value)} />
+                  <button type="button" className={styles.pwToggle} onClick={() => setPwReveal(show => !show)}>
+                    {pwReveal ? 'Hide' : 'Show'}
+                  </button>
+                </div>
               </label>
               <label className={styles.settingsField}>
                 <span>New password</span>
-                <input type="password" autoComplete="new-password" value={pwNext}
-                  onChange={event => setPwNext(event.target.value)} />
+                <div className={styles.pwWrap}>
+                  <input type={pwReveal ? 'text' : 'password'} autoComplete="new-password" value={pwNext}
+                    onChange={event => setPwNext(event.target.value)} />
+                  <button type="button" className={styles.pwToggle} onClick={() => setPwReveal(show => !show)}>
+                    {pwReveal ? 'Hide' : 'Show'}
+                  </button>
+                </div>
               </label>
               <label className={styles.settingsField}>
                 <span>Repeat new password</span>
-                <input type="password" autoComplete="new-password" value={pwRepeat}
-                  onChange={event => setPwRepeat(event.target.value)} />
+                <div className={styles.pwWrap}>
+                  <input type={pwReveal ? 'text' : 'password'} autoComplete="new-password" value={pwRepeat}
+                    onChange={event => setPwRepeat(event.target.value)} />
+                  <button type="button" className={styles.pwToggle} onClick={() => setPwReveal(show => !show)}>
+                    {pwReveal ? 'Hide' : 'Show'}
+                  </button>
+                </div>
               </label>
               {pwMsg && (
                 <p className={pwMsg.tone === 'ok' ? styles.pwOk : styles.pwBad} role="status">{pwMsg.text}</p>
@@ -8716,11 +9152,12 @@ export default function DevMailPage() {
           <div className={styles.accessorInvite}>
             <div className={styles.accessorInviteRow}>
               <input
-                className={styles.accessorInput}
+                className={`${styles.accessorInput} ${accessorsBad ? styles.fieldBad : ''}`}
                 type="email"
+                aria-invalid={accessorsBad}
                 placeholder="name@email.com"
                 value={inviteEmail}
-                onChange={event => setInviteEmail(event.target.value)}
+                onChange={event => { setInviteEmail(event.target.value); setAccessorsBad(false) }}
               />
               <input
                 className={styles.accessorInput}
@@ -8765,7 +9202,11 @@ export default function DevMailPage() {
               They&apos;ll get an email to set their password. Members see only their own mail; admins see every mailbox.
               Leave the mailbox blank to derive one from their name.
             </p>
-            {accessorsMsg && <p className={styles.accessorMsg}>{accessorsMsg}</p>}
+            {accessorsMsg && (
+              <p className={`${styles.accessorMsg} ${accessorsBad ? styles.msgBad : ''}`} role={accessorsBad ? 'alert' : undefined}>
+                {accessorsMsg}
+              </p>
+            )}
           </div>
 
           <ul className={styles.accessorList}>
@@ -8830,6 +9271,14 @@ export default function DevMailPage() {
                     buttonClassName={styles.accessorRoleBtn}
                     onChange={value => changeAccessorRole(entry.email, value as 'admin' | 'member')}
                   />
+                  <button
+                    className={styles.mailboxTag}
+                    onClick={() => mintResetLink(entry.email)}
+                    title={`Copy a one-time password reset link for ${entry.email}`}
+                    type="button"
+                  >
+                    Reset link
+                  </button>
                   <button
                     className={styles.accessorRemove}
                     onClick={() => removeAccessor(entry.email)}
@@ -8853,13 +9302,16 @@ export default function DevMailPage() {
                   ? 'Installed. Launch it from your dock, home screen or app list.'
                   : canInstall
                     ? 'Install it as an app so it opens in its own window and can show notifications.'
-                    : 'Your browser handles this from its own menu — look for Install or Add to Home Screen.'}
+                    : ios
+                      ? 'Three taps, and it lives on your Home Screen like any other app.'
+                      : 'Your browser handles this from its own menu — look for Install or Add to Home Screen.'}
               </p>
               {!installed && canInstall && (
                 <button type="button" className={styles.sendBtn} onClick={install}>
                   {ICONS.install} Install app
                 </button>
               )}
+              {!installed && !canInstall && ios && <InstallGuide browser={ios} appName={CLIENT_BRAND.name} />}
             </div>
             <div className={styles.settingsField}>
               <span>Signed in as</span>