@novacraft-engineering/mailbox 0.4.5 → 0.4.18

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, 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
@@ -189,6 +190,8 @@ type SentDetail = SentEmail & {
 }
 
 type ConversationRow = {
+  addressed?: 'direct' | 'copied' | 'other'
+  risk?: 'clean' | 'suspicious' | 'spam' | 'virus'
   threadId: string
   snoozedUntil?: string | null
   subject: string
@@ -201,6 +204,7 @@ type ConversationRow = {
   inboxCount: number
   archivedCount: number
   trashedCount: number
+  spamCount: number
   attachCount: number
   senders: string[]
   snippet: string
@@ -213,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
@@ -1254,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>,
@@ -1315,6 +1326,7 @@ const FOLDER_ICONS: Record<Folder, React.ReactNode> = {
   scheduled: ICONS.scheduled,
   drafts: ICONS.drafts,
   archived: ICONS.archive,
+  spam: ICONS.warn,
   trash: ICONS.trash,
 }
 
@@ -1347,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.
@@ -1354,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)
@@ -1491,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,
   )
@@ -1688,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)
@@ -2001,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
@@ -2547,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)
@@ -2883,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],
@@ -2947,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],
@@ -2965,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])
@@ -2999,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',
       })
@@ -3091,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:` },
@@ -3116,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],
   )
@@ -3207,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) => ({
@@ -3216,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)}`
@@ -3242,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
@@ -3266,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,
@@ -3299,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))),
@@ -3367,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
@@ -3578,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))
@@ -3728,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(
@@ -4098,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)
       }),
@@ -4392,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)
@@ -4408,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 {}
   }
 
@@ -5223,6 +5359,7 @@ export default function DevMailPage() {
     scheduled: 'Scheduled',
     drafts: 'Drafts',
     archived: 'Archive',
+    spam: 'Spam',
     trash: 'Trash',
   }
 
@@ -5294,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"
@@ -5657,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
@@ -5709,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)}
         </>
       )
@@ -5773,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. */
@@ -6119,6 +6300,38 @@ 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 && (
+                    <ul className={styles.riskBannerReasons}>
+                      {(inbound.riskReasons ?? []).map(reason => (
+                        <li key={reason}>{reason}</li>
+                      ))}
+                    </ul>
+                  )}
+                  <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>
@@ -6888,8 +7101,10 @@ export default function DevMailPage() {
               <BodySkeleton />
             ) : selectedDetail.html ? (
               <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>
         </>
@@ -7014,10 +7229,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}
@@ -7151,7 +7366,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 || ''
@@ -7167,7 +7382,9 @@ export default function DevMailPage() {
                       ? drafts.length || ''
                       : key === 'archived'
                         ? folderCounts.archived || ''
-                        : folderCounts.trashed || ''
+                        : key === 'spam'
+                          ? folderCounts.spam || ''
+                          : folderCounts.trashed || ''
           return (
             <button
               key={key}
@@ -7341,6 +7558,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}
@@ -7350,6 +7572,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>
@@ -7592,6 +7818,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 => {
@@ -9066,13 +9306,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>