From a19cbd162b720989acc07189e063a287db8963ae Mon Sep 17 00:00:00 2001
From: Phillip Carter <pcarter@fastmail.com>
Date: Mon, 27 Jul 2026 19:20:40 -0700
Subject: [PATCH] Audit implementation

---
 feature-list.md                            |  18 -
 src/app/(inbox)/actions.ts                 |  69 +++-
 src/app/(inbox)/archive/page.tsx           |   7 +
 src/app/(inbox)/email/[id]/page.tsx        |  11 +-
 src/app/(inbox)/layout.tsx                 |  28 ++
 src/app/(inbox)/thread/[threadId]/page.tsx |  31 +-
 src/app/(inbox)/trash/page.tsx             |   7 +
 src/app/compose/actions.ts                 |  91 ++++-
 src/app/compose/page.tsx                   |  77 +++-
 src/app/smoke-tests/SmokeHarness.tsx       |  13 +-
 src/app/smoke-tests/page.tsx               |   1 +
 src/components/Composer.tsx                | 107 +++--
 src/components/DesktopNav.tsx              |  12 +-
 src/components/EmailBody.tsx               |  60 ++-
 src/components/EmailDetailView.tsx         |   7 +-
 src/components/EmailListPanel.tsx          | 433 +++++++++++++++++----
 src/components/InboxPanelLayout.tsx        |   3 +-
 src/components/MessageActionBar.tsx        | 147 ++++++-
 src/components/MobileNav.tsx               |  12 +-
 src/components/ThreadView.tsx              |  19 +-
 src/lib/__tests__/composeHtml.test.ts      |  16 +
 src/lib/__tests__/emailHtml.test.ts        |  74 ++++
 src/lib/__tests__/emailList.test.ts        |   2 +
 src/lib/__tests__/jmap.test.ts             | 126 +++++-
 src/lib/__tests__/printHtml.test.ts        |  31 +-
 src/lib/composeHtml.ts                     |  25 ++
 src/lib/emailHtml.ts                       |  79 +++-
 src/lib/jmap.ts                            | 171 +++++++-
 src/lib/printHtml.ts                       |  78 +++-
 src/lib/types.ts                           |   1 +
 tests/smoke/mail.spec.ts                   |  31 ++
 31 files changed, 1599 insertions(+), 188 deletions(-)
 delete mode 100644 feature-list.md
 create mode 100644 src/app/(inbox)/archive/page.tsx
 create mode 100644 src/app/(inbox)/trash/page.tsx

diff --git a/feature-list.md b/feature-list.md
deleted file mode 100644
index 0af843e..0000000
--- a/feature-list.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Feature List
-
-Features to implement over time, roughly in priority order.
-
-and
-
-- rules for formatting
-    - markdown for composition
-    - do not just have the raw-ass html in the reply
-
-## Ideas (not yet prioritized)
-
-- Folder / label navigation in the sidebar
-- Keyboard shortcuts (j/k navigation, r to reply, c to compose, etc.)
-- Multiple account support (Gmail, Outlook via IMAP bridge or OAuth)
-- Unread count badge in sidebar
-- Archive and delete actions
-- Dark mode
diff --git a/src/app/(inbox)/actions.ts b/src/app/(inbox)/actions.ts
index 6941bab..d6de78c 100644
--- a/src/app/(inbox)/actions.ts
+++ b/src/app/(inbox)/actions.ts
@@ -1,7 +1,7 @@
 "use server";
 
 import { auth } from "@/auth";
-import { getSession, getAccountId, getMailboxes, listEmails, loadMoreEmailsFiltered, searchEmails, setPin, setKeywordsOnMany, moveEmailsToMailbox, getInboxSnapshot } from "@/lib/jmap";
+import { getSession, getAccountId, getMailboxes, listEmails, loadMoreEmailsFiltered, searchEmails, setPin, setKeywordsOnMany, moveEmailsToMailbox, getInboxSnapshot, destroyAllEmailsInMailbox, destroyEmails, getEmailMailboxIds } from "@/lib/jmap";
 import { parseSearchQuery, buildJmapFilter } from "@/lib/search";
 import { log } from "@/lib/logger";
 import { Email } from "@/lib/types";
@@ -111,3 +111,70 @@ export async function bulkMoveToMailbox(
   await moveEmailsToMailbox(session.apiUrl, accountId, emails, targetMailboxId);
   log.info({ count: emails.length, target_mailbox_id: targetMailboxId, duration_ms: Date.now() - t }, "action.move_emails");
 }
+
+async function requireTrashMailbox(
+  apiUrl: string,
+  accountId: string,
+  trashMailboxId: string,
+) {
+  const mailboxes = await getMailboxes(apiUrl, accountId);
+  const trash = mailboxes.find(
+    (mailbox) =>
+      mailbox.id === trashMailboxId && mailbox.role === "trash",
+  );
+  if (!trash) throw new Error("Invalid trash mailbox");
+  return trash;
+}
+
+export async function permanentlyDeleteEmailsAction(
+  emailIds: string[],
+  trashMailboxId: string,
+): Promise<void> {
+  const t = Date.now();
+  const { session, accountId } = await requireAuthedJmap();
+  if (!Array.isArray(emailIds) || typeof trashMailboxId !== "string") {
+    throw new Error("Invalid permanent delete request");
+  }
+  const ids = [
+    ...new Set(
+      emailIds
+        .slice(0, 500)
+        .filter((emailId): emailId is string => typeof emailId === "string" && !!emailId),
+    ),
+  ];
+  if (!ids.length) return;
+  await requireTrashMailbox(session.apiUrl, accountId, trashMailboxId);
+  const emails = await getEmailMailboxIds(session.apiUrl, accountId, ids);
+  if (
+    emails.length !== ids.length ||
+    emails.some((email) => !email.mailboxIds[trashMailboxId])
+  ) {
+    throw new Error("Only messages in Trash can be permanently deleted");
+  }
+  await destroyEmails(session.apiUrl, accountId, ids);
+  log.info(
+    { count: ids.length, duration_ms: Date.now() - t },
+    "action.destroy_emails",
+  );
+}
+
+export async function emptyTrashAction(
+  trashMailboxId: string,
+): Promise<{ destroyed: number }> {
+  const t = Date.now();
+  const { session, accountId } = await requireAuthedJmap();
+  if (typeof trashMailboxId !== "string" || !trashMailboxId) {
+    throw new Error("Invalid trash mailbox");
+  }
+  await requireTrashMailbox(session.apiUrl, accountId, trashMailboxId);
+  const destroyed = await destroyAllEmailsInMailbox(
+    session.apiUrl,
+    accountId,
+    trashMailboxId,
+  );
+  log.info(
+    { count: destroyed, duration_ms: Date.now() - t },
+    "action.empty_trash",
+  );
+  return { destroyed };
+}
diff --git a/src/app/(inbox)/archive/page.tsx b/src/app/(inbox)/archive/page.tsx
new file mode 100644
index 0000000..18fa906
--- /dev/null
+++ b/src/app/(inbox)/archive/page.tsx
@@ -0,0 +1,7 @@
+export default function ArchivePage() {
+  return (
+    <div className="hidden h-full items-center justify-center bg-stone-50 text-sm text-stone-400 dark:bg-stone-900 dark:text-stone-500 lg:flex">
+      Select an archived conversation to read it
+    </div>
+  );
+}
diff --git a/src/app/(inbox)/email/[id]/page.tsx b/src/app/(inbox)/email/[id]/page.tsx
index 6f78a2a..89f1416 100644
--- a/src/app/(inbox)/email/[id]/page.tsx
+++ b/src/app/(inbox)/email/[id]/page.tsx
@@ -13,7 +13,16 @@ export default async function EmailPage({ params, searchParams }: Props) {
   const { id } = await params;
   const resolvedSearchParams = searchParams ? await searchParams : {};
   const from = resolvedSearchParams.from;
-  const backLabel = from === "spam" ? "Spam" : from === "sent" ? "Sent" : "Inbox";
+  const backLabel =
+    from === "spam"
+      ? "Spam"
+      : from === "sent"
+        ? "Sent"
+        : from === "archive"
+          ? "Archive"
+          : from === "trash"
+            ? "Trash"
+            : "Inbox";
 
   const { session, accountId } = await getJmapContext();
   const email = await getEmail(session.apiUrl, accountId, id);
diff --git a/src/app/(inbox)/layout.tsx b/src/app/(inbox)/layout.tsx
index 95690e5..db119bd 100644
--- a/src/app/(inbox)/layout.tsx
+++ b/src/app/(inbox)/layout.tsx
@@ -18,6 +18,14 @@ const EMPTY_DEFERRED_DATA: DeferredMailPanelData = {
   spamUnreadTotal: 0,
   spamReads: [],
   spamReadTotal: 0,
+  archiveUnreads: [],
+  archiveUnreadTotal: 0,
+  archiveReads: [],
+  archiveReadTotal: 0,
+  trashUnreads: [],
+  trashUnreadTotal: 0,
+  trashReads: [],
+  trashReadTotal: 0,
 };
 
 async function DeferredPanelData({
@@ -72,6 +80,8 @@ async function MailPanelData() {
           drafts: draftsMailbox?.id,
           sent: sentMailbox?.id,
           spam: spamMailbox?.id,
+          archive: archiveMailbox?.id,
+          trash: trashMailbox?.id,
         },
         true,
       ),
@@ -85,6 +95,14 @@ async function MailPanelData() {
         spamUnreadTotal: data.spam.unreadTotal,
         spamReads: data.spam.reads,
         spamReadTotal: data.spam.readTotal,
+        archiveUnreads: data.archive.unreads,
+        archiveUnreadTotal: data.archive.unreadTotal,
+        archiveReads: data.archive.reads,
+        archiveReadTotal: data.archive.readTotal,
+        trashUnreads: data.trash.unreads,
+        trashUnreadTotal: data.trash.unreadTotal,
+        trashReads: data.trash.reads,
+        trashReadTotal: data.trash.readTotal,
       }),
     )
     .catch((err) => {
@@ -106,6 +124,8 @@ async function MailPanelData() {
       pinned: [],
       sent: { emails: [], total: 0 },
       spam: { unreads: [], unreadTotal: 0, reads: [], readTotal: 0 },
+      archive: { unreads: [], unreadTotal: 0, reads: [], readTotal: 0 },
+      trash: { unreads: [], unreadTotal: 0, reads: [], readTotal: 0 },
     };
   }
 
@@ -133,6 +153,14 @@ async function MailPanelData() {
       archiveMailboxId={archiveMailbox?.id}
       trashMailboxId={trashMailbox?.id}
       spamMailboxId={spamMailbox?.id}
+      archiveUnreads={[]}
+      archiveUnreadTotal={0}
+      archiveReads={[]}
+      archiveReadTotal={0}
+      trashUnreads={[]}
+      trashUnreadTotal={0}
+      trashReads={[]}
+      trashReadTotal={0}
       deferredContent={
         <Suspense fallback={null}>
           <DeferredPanelData result={deferredResult} />
diff --git a/src/app/(inbox)/thread/[threadId]/page.tsx b/src/app/(inbox)/thread/[threadId]/page.tsx
index 43ba759..f406bbf 100644
--- a/src/app/(inbox)/thread/[threadId]/page.tsx
+++ b/src/app/(inbox)/thread/[threadId]/page.tsx
@@ -10,6 +10,7 @@ import {
   getJmapContext,
   getJmapMailboxContext,
 } from "@/lib/jmapServer";
+import { sanitizeReaderHtml } from "@/lib/printHtml";
 
 interface Props {
   params: Promise<{ threadId: string }>;
@@ -20,10 +21,32 @@ export default async function ThreadPage({ params, searchParams }: Props) {
   const { threadId } = await params;
   const resolvedSearchParams = searchParams ? await searchParams : {};
   const from = resolvedSearchParams.from;
-  const backLabel = from === "spam" ? "Spam" : from === "sent" ? "Sent" : "Inbox";
+  const backLabel =
+    from === "spam"
+      ? "Spam"
+      : from === "sent"
+        ? "Sent"
+        : from === "archive"
+          ? "Archive"
+          : from === "trash"
+            ? "Trash"
+            : "Inbox";
 
   const { session, accountId } = await getJmapContext();
-  const emails = await getThreadEmails(session.apiUrl, accountId, threadId);
+  const emails = (await getThreadEmails(session.apiUrl, accountId, threadId)).map(
+    (email) => {
+      const bodyValues = { ...email.bodyValues };
+      for (const part of email.htmlBody ?? []) {
+        if (part.partId && bodyValues[part.partId]) {
+          bodyValues[part.partId] = {
+            ...bodyValues[part.partId],
+            value: sanitizeReaderHtml(bodyValues[part.partId].value),
+          };
+        }
+      }
+      return { ...email, bodyValues };
+    },
+  );
 
   if (!emails.length) return notFound();
 
@@ -57,6 +80,8 @@ export default async function ThreadPage({ params, searchParams }: Props) {
   ]);
   const spamMailbox = mailboxes.find((m) => m.role === "junk" || m.name.toLowerCase() === "spam" || m.name.toLowerCase() === "junk");
   const inboxMailbox = mailboxes.find((m) => m.role === "inbox");
+  const archiveMailbox = mailboxes.find((m) => m.role === "archive");
+  const trashMailbox = mailboxes.find((m) => m.role === "trash");
 
   return (
     <div className="overflow-y-auto h-full bg-stone-50 dark:bg-stone-900">
@@ -82,6 +107,8 @@ export default async function ThreadPage({ params, searchParams }: Props) {
           calendarEvents={calendarEvents}
           spamMailboxId={spamMailbox?.id}
           inboxMailboxId={inboxMailbox?.id}
+          archiveMailboxId={archiveMailbox?.id}
+          trashMailboxId={trashMailbox?.id}
         />
       </div>
     </div>
diff --git a/src/app/(inbox)/trash/page.tsx b/src/app/(inbox)/trash/page.tsx
new file mode 100644
index 0000000..00bff11
--- /dev/null
+++ b/src/app/(inbox)/trash/page.tsx
@@ -0,0 +1,7 @@
+export default function TrashPage() {
+  return (
+    <div className="hidden h-full items-center justify-center bg-stone-50 text-sm text-stone-400 dark:bg-stone-900 dark:text-stone-500 lg:flex">
+      Select a conversation to review or restore it
+    </div>
+  );
+}
diff --git a/src/app/compose/actions.ts b/src/app/compose/actions.ts
index 77c87c3..06ebc51 100644
--- a/src/app/compose/actions.ts
+++ b/src/app/compose/actions.ts
@@ -21,22 +21,80 @@ function splitRaw(raw: string) {
 
 export interface DraftSaveInput {
   draftId: string | null;
-  fromName: string;
-  fromEmail: string;
+  identityId: string;
   to: string;
   cc: string;
   bcc: string;
   subject: string;
   body: string;
+  htmlBody: string;
+  inlineImages: { id: string; blobId: string; type: string }[];
+  attachments: { blobId: string; name: string; type: string }[];
   inReplyToId?: string;
 }
 
+function requireString(value: unknown, field: string): string {
+  if (typeof value !== "string") throw new Error(`Invalid ${field}`);
+  return value;
+}
+
+function normalizeInlineImages(
+  value: unknown,
+): DraftSaveInput["inlineImages"] {
+  if (!Array.isArray(value)) return [];
+  return value.slice(0, 100).map((image) => {
+    if (!image || typeof image !== "object") {
+      throw new Error("Invalid inline image");
+    }
+    const candidate = image as Record<string, unknown>;
+    return {
+      id: requireString(candidate.id, "inline image id"),
+      blobId: requireString(candidate.blobId, "inline image blob"),
+      type: requireString(candidate.type, "inline image type"),
+    };
+  });
+}
+
+function normalizeAttachments(
+  value: unknown,
+): DraftSaveInput["attachments"] {
+  if (!Array.isArray(value)) return [];
+  return value.slice(0, 100).map((attachment) => {
+    if (!attachment || typeof attachment !== "object") {
+      throw new Error("Invalid attachment");
+    }
+    const candidate = attachment as Record<string, unknown>;
+    return {
+      blobId: requireString(candidate.blobId, "attachment blob"),
+      name: requireString(candidate.name, "attachment name"),
+      type: requireString(candidate.type, "attachment type"),
+    };
+  });
+}
+
 export async function saveDraftAction(
   input: DraftSaveInput
 ): Promise<{ draftId: string }> {
   const t = Date.now();
   const sessionData = await auth();
   if (!sessionData?.user) throw new Error("Unauthorized");
+  const identityId = requireString(input?.identityId, "identity");
+  const to = requireString(input?.to, "to");
+  const cc = requireString(input?.cc, "cc");
+  const bcc = requireString(input?.bcc, "bcc");
+  const subject = requireString(input?.subject, "subject");
+  const body = requireString(input?.body, "body");
+  const htmlBody = requireString(input?.htmlBody, "HTML body");
+  const draftIdInput =
+    input?.draftId === null
+      ? null
+      : requireString(input?.draftId, "draft id");
+  const inReplyToId =
+    input?.inReplyToId === undefined
+      ? undefined
+      : requireString(input.inReplyToId, "reply target");
+  const inlineImages = normalizeInlineImages(input?.inlineImages);
+  const attachments = normalizeAttachments(input?.attachments);
   const session = await getSession();
   const accountId = getAccountId(session);
   const [mailboxes, identities] = await Promise.all([
@@ -45,12 +103,12 @@ export async function saveDraftAction(
   ]);
   const draftsMailbox = mailboxes.find((m) => m.role === "drafts");
   if (!draftsMailbox) throw new Error("No drafts mailbox found");
-  const identity = identities.find((candidate) => candidate.email === input.fromEmail);
+  const identity = identities.find((candidate) => candidate.id === identityId);
   if (!identity) throw new Error("Invalid from address");
 
-  const toAddrs = parseAddresses(splitRaw(input.to), { strict: false });
-  const ccAddrs = parseAddresses(splitRaw(input.cc), { strict: false });
-  const bccAddrs = parseAddresses(splitRaw(input.bcc), { strict: false });
+  const toAddrs = parseAddresses(splitRaw(to), { strict: false });
+  const ccAddrs = parseAddresses(splitRaw(cc), { strict: false });
+  const bccAddrs = parseAddresses(splitRaw(bcc), { strict: false });
 
   const draftId = await saveDraft(
     session.apiUrl,
@@ -61,22 +119,27 @@ export async function saveDraftAction(
       to: toAddrs,
       cc: ccAddrs,
       bcc: bccAddrs,
-      subject: input.subject,
-      body: input.body,
-      inReplyToId: input.inReplyToId,
+      subject,
+      body,
+      htmlBody,
+      inlineImages,
+      attachments,
+      inReplyToId,
     },
-    input.draftId
+    draftIdInput
   );
 
   log.info({
-    is_update: !!input.draftId,
-    prev_draft_id: input.draftId ?? undefined,
+    is_update: !!draftIdInput,
+    prev_draft_id: draftIdInput ?? undefined,
     new_draft_id: draftId,
     to_count: toAddrs.length,
     cc_count: ccAddrs.length,
     bcc_count: bccAddrs.length,
-    subject_len: input.subject.length,
-    body_len: input.body.length,
+    subject_len: subject.length,
+    body_len: body.length,
+    inline_image_count: inlineImages.length,
+    attachment_count: attachments.length,
     duration_ms: Date.now() - t,
   }, "action.save_draft");
 
diff --git a/src/app/compose/page.tsx b/src/app/compose/page.tsx
index 299fef9..cac73d2 100644
--- a/src/app/compose/page.tsx
+++ b/src/app/compose/page.tsx
@@ -12,6 +12,12 @@ import {
 import Composer from "@/components/Composer";
 import MobileBackButton from "@/components/MobileBackButton";
 import { getJmapContext } from "@/lib/jmapServer";
+import { visibleAttachments } from "@/lib/attachments";
+import {
+  extractForwardedHtml,
+} from "@/lib/composeHtml";
+import { sanitizeReaderHtml } from "@/lib/printHtml";
+import type { EmailBodyPart } from "@/lib/types";
 
 interface Props {
   searchParams: Promise<{ mode?: string; id?: string; draftId?: string }>;
@@ -65,6 +71,20 @@ export default async function ComposePage({ searchParams }: Props) {
   let title = "New Message";
   let initialDraftId: string | undefined;
   let forwardedHtml: string | undefined;
+  let initialIdentityId: string | undefined;
+  let initialInlineImages: {
+    id: string;
+    blobId: string;
+    dataUrl: string;
+    type: string;
+  }[] = [];
+  let initialAttachments: {
+    id: string;
+    name: string;
+    size: number;
+    type: string;
+    blobId: string;
+  }[] = [];
 
   // Resume a saved draft
   if (draftId) {
@@ -73,10 +93,13 @@ export default async function ComposePage({ searchParams }: Props) {
       initialDraftId = draftId;
       initialTo = draft.to?.map(formatAddressRFC).join(", ") ?? "";
       initialCc = draft.cc?.map(formatAddressRFC).join(", ") ?? "";
-      // bcc is visible on drafts since they live in the sender's mailbox
-      initialBcc = (draft as { bcc?: typeof draft.to })?.bcc
+      initialBcc = draft.bcc
         ?.map(formatAddressRFC)
         .join(", ") ?? "";
+      initialIdentityId = sorted.find(
+        (identity) =>
+          identity.email.toLowerCase() === draft.from?.[0]?.email.toLowerCase(),
+      )?.id;
       initialSubject = draft.subject ?? "";
       if (draft.textBody?.length > 0) {
         const part = draft.textBody[0];
@@ -84,6 +107,39 @@ export default async function ComposePage({ searchParams }: Props) {
           initialBody = draft.bodyValues[part.partId].value;
         }
       }
+      if (draft.htmlBody?.length > 0) {
+        const htmlPart = draft.htmlBody[0];
+        if (htmlPart.partId && draft.bodyValues?.[htmlPart.partId]) {
+          forwardedHtml = extractForwardedHtml(
+            draft.bodyValues[htmlPart.partId].value,
+          );
+        }
+      }
+      const inlineParts = (draft.attachments ?? []).filter(
+        (part) => part.blobId && part.disposition?.toLowerCase() === "inline",
+      );
+      initialInlineImages = inlineParts.flatMap((part) => {
+        const id = part.cid?.replace(/@mail$/i, "");
+        if (!id || !part.blobId) return [];
+        return [{
+          id,
+          blobId: part.blobId,
+          type: part.type,
+          dataUrl: inlinePartUrl(part),
+        }];
+      });
+      initialAttachments = visibleAttachments(draft.attachments).flatMap(
+        (part) =>
+          part.blobId
+            ? [{
+                id: `draft-${part.blobId}`,
+                name: part.name ?? "attachment",
+                size: part.size,
+                type: part.type,
+                blobId: part.blobId,
+              }]
+            : [],
+      );
       title = "Draft";
       if (draft.inReplyTo?.[0]) {
         inReplyToId = draft.inReplyTo[0];
@@ -146,7 +202,9 @@ export default async function ComposePage({ searchParams }: Props) {
         if (email.htmlBody?.length > 0) {
           const part = email.htmlBody[0];
           if (part.partId && email.bodyValues?.[part.partId]) {
-            forwardedHtml = email.bodyValues[part.partId].value;
+            forwardedHtml = sanitizeReaderHtml(
+              email.bodyValues[part.partId].value,
+            );
           }
         }
         // The markdown body carries the plain-text fallback (text/plain part
@@ -182,8 +240,21 @@ export default async function ComposePage({ searchParams }: Props) {
           replyThreadId={replyThreadId}
           initialDraftId={initialDraftId}
           forwardedHtml={forwardedHtml}
+          initialIdentityId={initialIdentityId}
+          initialInlineImages={initialInlineImages}
+          initialAttachments={initialAttachments}
         />
       </div>
     </div>
   );
 }
+
+function inlinePartUrl(part: EmailBodyPart): string {
+  const params = new URLSearchParams({
+    blobId: part.blobId ?? "",
+    name: part.name ?? "inline-image",
+    type: part.type,
+    inline: "true",
+  });
+  return `/api/download?${params.toString()}`;
+}
diff --git a/src/app/smoke-tests/SmokeHarness.tsx b/src/app/smoke-tests/SmokeHarness.tsx
index d72024a..b3632ef 100644
--- a/src/app/smoke-tests/SmokeHarness.tsx
+++ b/src/app/smoke-tests/SmokeHarness.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useCallback, useState } from "react";
 import AttachmentList from "@/components/AttachmentList";
 import Composer from "@/components/Composer";
+import EmailBody from "@/components/EmailBody";
 import EmailListPanel from "@/components/EmailListPanel";
 import MessageActionBar from "@/components/MessageActionBar";
 import MobileNav from "@/components/MobileNav";
@@ -26,7 +27,8 @@ export type SmokePanel =
   | "dark-rendering"
   | "tab-indicator"
   | "message-actions"
-  | "mobile-viewport";
+  | "mobile-viewport"
+  | "reader-privacy";
 
 const fixtureEmails: Email[] = [
   {
@@ -277,6 +279,15 @@ export default function SmokeHarness({ panel }: { panel: SmokePanel }) {
           />
         )}
 
+        {panel === "reader-privacy" && (
+          <section className="mx-auto w-full max-w-3xl overflow-auto p-6">
+            <EmailBody
+              type="html"
+              body='<p>Remote content fixture</p><img id="remote-pixel" src="https://images.example.test/tracking-pixel.png" alt="">'
+            />
+          </section>
+        )}
+
         {panel === "reply" && (
           <Composer
             identities={[
diff --git a/src/app/smoke-tests/page.tsx b/src/app/smoke-tests/page.tsx
index 7f33187..df9e90b 100644
--- a/src/app/smoke-tests/page.tsx
+++ b/src/app/smoke-tests/page.tsx
@@ -15,6 +15,7 @@ const smokePanels = new Set<SmokePanel>([
   "tab-indicator",
   "message-actions",
   "mobile-viewport",
+  "reader-privacy",
 ]);
 
 export default async function SmokePage({ searchParams }: Props) {
diff --git a/src/components/Composer.tsx b/src/components/Composer.tsx
index 3988847..9970523 100644
--- a/src/components/Composer.tsx
+++ b/src/components/Composer.tsx
@@ -7,6 +7,7 @@ import { saveDraftAction, deleteDraftAction } from "@/app/compose/actions";
 import { useToast } from "@/components/ToastProvider";
 import { useNavigationGuard } from "@/components/NavigationGuardProvider";
 import {
+  appendForwardedHtml,
   markQuotedReplyHtml,
   wrapComposePreviewHtml,
   wrapEmailHtml,
@@ -197,6 +198,9 @@ interface Props {
   replyThreadId?: string;
   initialDraftId?: string;
   forwardedHtml?: string;
+  initialIdentityId?: string;
+  initialInlineImages?: InlineImage[];
+  initialAttachments?: Attachment[];
 }
 
 marked.setOptions({ gfm: true, breaks: true });
@@ -223,6 +227,8 @@ function draftFingerprint({
   bcc,
   subject,
   markdown,
+  inlineImages,
+  attachments,
 }: {
   identityId: string;
   to: string;
@@ -230,8 +236,19 @@ function draftFingerprint({
   bcc: string;
   subject: string;
   markdown: string;
+  inlineImages: Pick<InlineImage, "id" | "blobId" | "type">[];
+  attachments: Pick<Attachment, "blobId" | "name" | "type">[];
 }) {
-  return JSON.stringify([identityId, to, cc, bcc, subject, markdown]);
+  return JSON.stringify([
+    identityId,
+    to,
+    cc,
+    bcc,
+    subject,
+    markdown,
+    inlineImages.map(({ id, blobId, type }) => [id, blobId, type]),
+    attachments.map(({ blobId, name, type }) => [blobId, name, type]),
+  ]);
 }
 
 export default function Composer({
@@ -245,10 +262,17 @@ export default function Composer({
   replyThreadId,
   initialDraftId,
   forwardedHtml,
+  initialIdentityId,
+  initialInlineImages = [],
+  initialAttachments = [],
 }: Props) {
   const router = useRouter();
   const showToast = useToast();
-  const [identityId, setIdentityId] = useState(identities[0]?.id ?? "");
+  const startingIdentityId =
+    identities.some((identity) => identity.id === initialIdentityId)
+      ? initialIdentityId!
+      : identities[0]?.id ?? "";
+  const [identityId, setIdentityId] = useState(startingIdentityId);
   const [to, setTo] = useState(initialTo);
   const [cc, setCc] = useState(initialCc);
   const [bcc, setBcc] = useState(initialBcc);
@@ -262,8 +286,10 @@ export default function Composer({
   const [dragActive, setDragActive] = useState(false);
   const [sending, setSending] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [inlineImages, setInlineImages] = useState<InlineImage[]>([]);
-  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [inlineImages, setInlineImages] =
+    useState<InlineImage[]>(initialInlineImages);
+  const [attachments, setAttachments] =
+    useState<Attachment[]>(initialAttachments);
   const [uploading, setUploading] = useState(0);
 
   // Draft state
@@ -272,12 +298,14 @@ export default function Composer({
   const [lastSaved, setLastSaved] = useState<Date | null>(null);
   const [savedFingerprint, setSavedFingerprint] = useState(() =>
     draftFingerprint({
-      identityId: identities[0]?.id ?? "",
+      identityId: startingIdentityId,
       to: initialTo,
       cc: initialCc,
       bcc: initialBcc,
       subject: initialSubject,
       markdown: initialBody,
+      inlineImages: initialInlineImages,
+      attachments: initialAttachments,
     }),
   );
   const draftIdRef = useRef<string | null>(initialDraftId ?? null);
@@ -305,12 +333,11 @@ export default function Composer({
     bcc: showBcc ? bcc : "",
     subject,
     markdown,
+    inlineImages,
+    attachments,
   });
   const hasUnsavedDraftChanges =
-    currentFingerprint !== savedFingerprint ||
-    attachments.length > 0 ||
-    inlineImages.length > 0 ||
-    uploading > 0;
+    currentFingerprint !== savedFingerprint || uploading > 0;
   useNavigationGuard(
     hasUnsavedDraftChanges && !sending,
     "Leave this message? Recent changes may not be saved.",
@@ -367,9 +394,15 @@ export default function Composer({
       isInitialRender.current = false;
       return;
     }
-    if (sending || suppressDraftSideEffectsRef.current) return;
+    if (sending || uploading > 0 || suppressDraftSideEffectsRef.current) return;
     // Nothing worth saving yet
-    if (!to && !subject && !markdown) return;
+    if (
+      !to &&
+      !subject &&
+      !markdown &&
+      attachments.length === 0 &&
+      inlineImages.length === 0
+    ) return;
 
     const timer = setTimeout(async () => {
       if (savingRef.current || suppressDraftSideEffectsRef.current) return;
@@ -380,15 +413,36 @@ export default function Composer({
       const existingDraftId = draftIdRef.current;
       const isFirstSave = !existingDraftId;
       try {
+        const rawHtml = await marked.parse(normalizeComposeMarkdown(markdown));
+        const htmlWithCids = replacePlaceholders(
+          rawHtml,
+          (id) => `cid:${id}@mail`,
+        );
+        const renderedBody = forwardedHtml
+          ? htmlWithCids + appendForwardedHtml(forwardedHtml)
+          : htmlWithCids;
+        const composedBody = inReplyToId
+          ? markQuotedReplyHtml(renderedBody)
+          : renderedBody;
         const result = await saveDraftAction({
           draftId: existingDraftId,
-          fromName: identity?.name ?? "",
-          fromEmail: identity?.email ?? "",
+          identityId: identity?.id ?? "",
           to,
           cc: showCc ? cc : "",
           bcc: showBcc ? bcc : "",
           subject,
           body: markdown,
+          htmlBody: wrapEmailHtml(composedBody),
+          inlineImages: inlineImages.map(({ id, blobId, type }) => ({
+            id,
+            blobId,
+            type,
+          })),
+          attachments: attachments.map(({ blobId, name, type }) => ({
+            blobId,
+            name,
+            type,
+          })),
           inReplyToId,
         });
 
@@ -422,6 +476,8 @@ export default function Composer({
             bcc: showBcc ? bcc : "",
             subject,
             markdown,
+            inlineImages,
+            attachments,
           }),
         );
         setLastSaved(new Date());
@@ -434,7 +490,7 @@ export default function Composer({
     }, 2000);
 
     return () => clearTimeout(timer);
-  }, [to, cc, bcc, showCc, showBcc, subject, markdown, identityId, inReplyToId, sending]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [to, cc, bcc, showCc, showBcc, subject, markdown, identityId, inReplyToId, sending, uploading, inlineImages, attachments, forwardedHtml]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handlePaste = useCallback(
     async (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
@@ -525,7 +581,8 @@ export default function Composer({
       !!bcc.trim() ||
       !!subject.trim() ||
       !!markdown.trim() ||
-      attachmentsRef.current.length > 0;
+      attachmentsRef.current.length > 0 ||
+      inlineImagesRef.current.length > 0;
     if (hasContent && !window.confirm("Discard this draft?")) return;
     suppressDraftSideEffectsRef.current = true;
     cleanupPendingDraftsRef.current = true;
@@ -1013,23 +1070,3 @@ export default function Composer({
     </div>
   );
 }
-
-// Extract the <body> content from a full HTML document, or return the input
-// as-is if no <body> tag is found (e.g. HTML fragments).
-function extractBodyContent(html: string): string {
-  const m = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
-  if (m) return m[1];
-  // Strip doctype / html / head wrappers and return the rest
-  return html
-    .replace(/<!DOCTYPE[^>]*>/gi, "")
-    .replace(/<\/?html[^>]*>/gi, "")
-    .replace(/<head[\s\S]*?<\/head>/gi, "")
-    .trim();
-}
-
-// Returns an HTML snippet to append after the composed content when forwarding.
-// The original email is rendered in a visually separated block.
-function appendForwardedHtml(originalHtml: string): string {
-  const content = extractBodyContent(originalHtml);
-  return `<div data-forwarded-email="true" style="margin-top:24px;padding-top:16px;border-top:1px solid #e4e4e7;font-size:14px;">${content}</div>`;
-}
diff --git a/src/components/DesktopNav.tsx b/src/components/DesktopNav.tsx
index a439e62..a78f293 100644
--- a/src/components/DesktopNav.tsx
+++ b/src/components/DesktopNav.tsx
@@ -16,6 +16,8 @@ const mailboxItems: NavItem[] = [
   { href: "/", label: "Inbox", icon: "inbox", badge: "inbox" },
   { href: "/drafts", label: "Drafts", icon: "drafts", badge: "drafts" },
   { href: "/sent", label: "Sent", icon: "sent" },
+  { href: "/archive", label: "Archive", icon: "archive" },
+  { href: "/trash", label: "Trash", icon: "trash" },
   { href: "/spam", label: "Spam", icon: "spam", badge: "spam" },
   { href: "/calendar", label: "Calendar", icon: "calendar" },
 ];
@@ -32,7 +34,9 @@ function isActive(
         pathname.startsWith("/thread/") ||
         pathname.startsWith("/attachment/")) &&
       from !== "spam" &&
-      from !== "sent"
+      from !== "sent" &&
+      from !== "archive" &&
+      from !== "trash"
     );
   }
   if (item.href === "/sent") {
@@ -41,6 +45,12 @@ function isActive(
   if (item.href === "/spam") {
     return pathname.startsWith("/spam") || from === "spam";
   }
+  if (item.href === "/archive") {
+    return pathname.startsWith("/archive") || from === "archive";
+  }
+  if (item.href === "/trash") {
+    return pathname.startsWith("/trash") || from === "trash";
+  }
   return pathname.startsWith(item.href);
 }
 
diff --git a/src/components/EmailBody.tsx b/src/components/EmailBody.tsx
index 372ed57..a624c6d 100644
--- a/src/components/EmailBody.tsx
+++ b/src/components/EmailBody.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useBodyClass from "@/components/useBodyClass";
 import { useAppearance } from "@/components/AppearanceProvider";
 import { lockEmailContentWidth } from "@/lib/emailFrameLayout";
-import { prepareHtml, prepareTextBody } from "@/lib/emailHtml";
+import { hasRemoteContent, prepareHtml, prepareTextBody } from "@/lib/emailHtml";
 import type { EmailBodyPart } from "@/lib/types";
 
 const EMPTY_EMBEDDED_PARTS: EmailBodyPart[] = [];
@@ -26,7 +26,12 @@ export default function EmailBody({
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const lastDimsRef = useRef({ h: 0, w: 0, availableWidth: 0 });
   const lockedContentWidthRef = useRef<number | null>(null);
+  const [remoteContentAllowedFor, setRemoteContentAllowedFor] = useState<
+    string | null
+  >(null);
   const { preferences } = useAppearance();
+  const remoteContentAvailable = type === "html" && hasRemoteContent(body);
+  const allowRemoteContent = remoteContentAllowedFor === body;
 
   useBodyClass("rich-content-open");
 
@@ -134,29 +139,50 @@ export default function EmailBody({
             stripQuotes,
             embeddedParts,
             colorMode: preferences.theme,
+            allowRemoteContent,
           })
         : prepareTextBody(body, {
             stripQuotes,
             colorMode: preferences.theme,
           }),
-    [body, embeddedParts, preferences.theme, stripQuotes, type],
+    [
+      allowRemoteContent,
+      body,
+      embeddedParts,
+      preferences.theme,
+      stripQuotes,
+      type,
+    ],
   );
 
   return (
-    <div
-      ref={wrapperRef}
-      className="bg-transparent"
-      style={{ minHeight: "160px", overflow: "hidden", position: "relative" }}
-    >
-      <iframe
-        ref={iframeRef}
-        srcDoc={srcDoc}
-        className="w-full border-0 block"
-        sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
-        referrerPolicy="no-referrer"
-        title="Email content"
-        onLoad={syncIframeLayout}
-      />
+    <div className="bg-transparent">
+      {remoteContentAvailable && !allowRemoteContent && (
+        <div className="mb-3 flex flex-wrap items-center gap-2 rounded-lg border border-stone-200 bg-stone-100 px-3 py-2 text-xs text-stone-500 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-400">
+          <span className="flex-1">Remote images are blocked for privacy.</span>
+          <button
+            type="button"
+            onClick={() => setRemoteContentAllowedFor(body)}
+            className="min-h-8 rounded-md border border-stone-300 bg-white px-2.5 font-medium text-stone-700 transition-colors hover:bg-stone-50 dark:border-stone-600 dark:bg-stone-900 dark:text-stone-200 dark:hover:bg-stone-700"
+          >
+            Load images
+          </button>
+        </div>
+      )}
+      <div
+        ref={wrapperRef}
+        style={{ minHeight: "160px", overflow: "hidden", position: "relative" }}
+      >
+        <iframe
+          ref={iframeRef}
+          srcDoc={srcDoc}
+          className="w-full border-0 block"
+          sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
+          referrerPolicy="no-referrer"
+          title="Email content"
+          onLoad={syncIframeLayout}
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/components/EmailDetailView.tsx b/src/components/EmailDetailView.tsx
index 1a78926..fcd6259 100644
--- a/src/components/EmailDetailView.tsx
+++ b/src/components/EmailDetailView.tsx
@@ -8,6 +8,7 @@ import { getJmapMailboxContext } from "@/lib/jmapServer";
 import SenderAvatar from "@/components/SenderAvatar";
 import MessageActionBar from "@/components/MessageActionBar";
 import Popover from "@/components/Popover";
+import { sanitizeReaderHtml } from "@/lib/printHtml";
 
 interface Props {
   email: Email;
@@ -23,7 +24,7 @@ export default async function EmailDetailView({ email, downloadUrl, accountId }:
   if (email.htmlBody?.length > 0) {
     const part = email.htmlBody[0];
     if (part.partId && email.bodyValues?.[part.partId]) {
-      body = email.bodyValues[part.partId].value;
+      body = sanitizeReaderHtml(email.bodyValues[part.partId].value);
       bodyType = part.type === "text/html" ? "html" : "text";
     }
   }
@@ -49,6 +50,8 @@ export default async function EmailDetailView({ email, downloadUrl, accountId }:
       m.name.toLowerCase() === "junk"
   );
   const inboxMailbox = mailboxes.find((m) => m.role === "inbox");
+  const archiveMailbox = mailboxes.find((m) => m.role === "archive");
+  const trashMailbox = mailboxes.find((m) => m.role === "trash");
   const isSpam = !!(spamMailbox && email.mailboxIds[spamMailbox.id]);
 
   const hasMultipleRecipients =
@@ -135,6 +138,8 @@ export default async function EmailDetailView({ email, downloadUrl, accountId }:
           isSpam={isSpam}
           mailboxIds={email.mailboxIds}
           inboxMailboxId={inboxMailbox?.id}
+          archiveMailboxId={archiveMailbox?.id}
+          trashMailboxId={trashMailbox?.id}
           className="border-t border-stone-100 dark:border-stone-700/70"
         />
       </div>
diff --git a/src/components/EmailListPanel.tsx b/src/components/EmailListPanel.tsx
index e9a5ddf..ecda46d 100644
--- a/src/components/EmailListPanel.tsx
+++ b/src/components/EmailListPanel.tsx
@@ -34,7 +34,18 @@ import {
   shouldCaptureConversationPointer,
 } from "@/lib/mailInteraction";
 import { formatDate } from "@/lib/format";
-import { loadMoreUnreads, loadMoreReads, searchEmailsAction, bulkMarkAsRead, bulkMarkAsUnread, bulkSetPin, bulkMoveToMailbox, checkInboxForNewMail } from "@/app/(inbox)/actions";
+import {
+  bulkMarkAsRead,
+  bulkMarkAsUnread,
+  bulkMoveToMailbox,
+  bulkSetPin,
+  checkInboxForNewMail,
+  emptyTrashAction,
+  loadMoreReads,
+  loadMoreUnreads,
+  permanentlyDeleteEmailsAction,
+  searchEmailsAction,
+} from "@/app/(inbox)/actions";
 import { deleteDraftAction } from "@/app/compose/actions";
 import { dispatchUnreadCountEvent, getReadEmailIds, getUnreadEmailIds, isEmailUnread } from "@/lib/unreadCount";
 import {
@@ -62,13 +73,21 @@ interface Props {
   spamReads?: Email[];
   spamReadTotal?: number;
   spamMailboxId?: string;
+  archiveUnreads?: Email[];
+  archiveUnreadTotal?: number;
+  archiveReads?: Email[];
+  archiveReadTotal?: number;
+  trashUnreads?: Email[];
+  trashUnreadTotal?: number;
+  trashReads?: Email[];
+  trashReadTotal?: number;
   deferredContent?: ReactNode;
   threadHrefPrefix?: string;
   autoSyncIntervalMs?: number;
   autoSyncCheck?: (inboxId: string) => Promise<InboxSnapshot>;
 }
 
-type View = "inbox" | "drafts" | "sent" | "spam";
+type View = "inbox" | "drafts" | "sent" | "spam" | "archive" | "trash";
 
 export interface DeferredMailPanelData {
   drafts: Email[];
@@ -78,6 +97,14 @@ export interface DeferredMailPanelData {
   spamUnreadTotal: number;
   spamReads: Email[];
   spamReadTotal: number;
+  archiveUnreads: Email[];
+  archiveUnreadTotal: number;
+  archiveReads: Email[];
+  archiveReadTotal: number;
+  trashUnreads: Email[];
+  trashUnreadTotal: number;
+  trashReads: Email[];
+  trashReadTotal: number;
 }
 
 const DeferredMailPanelContext = createContext<
@@ -194,6 +221,14 @@ export default function EmailListPanel({
   spamReads: initialSpamReads = [],
   spamReadTotal: initialSpamReadTotal = 0,
   spamMailboxId,
+  archiveUnreads: initialArchiveUnreads = [],
+  archiveUnreadTotal: initialArchiveUnreadTotal = 0,
+  archiveReads: initialArchiveReads = [],
+  archiveReadTotal: initialArchiveReadTotal = 0,
+  trashUnreads: initialTrashUnreads = [],
+  trashUnreadTotal: initialTrashUnreadTotal = 0,
+  trashReads: initialTrashReads = [],
+  trashReadTotal: initialTrashReadTotal = 0,
   deferredContent,
   threadHrefPrefix = "/thread",
   autoSyncIntervalMs = MAIL_AUTO_SYNC_INTERVAL_MS,
@@ -217,6 +252,10 @@ export default function EmailListPanel({
     ? "drafts"
     : pathname.startsWith("/sent") || searchParams.get("from") === "sent"
     ? "sent"
+    : pathname.startsWith("/archive") || searchParams.get("from") === "archive"
+    ? "archive"
+    : pathname.startsWith("/trash") || searchParams.get("from") === "trash"
+    ? "trash"
     : pathname.startsWith("/spam") || searchParams.get("from") === "spam"
     ? "spam"
     : "inbox";
@@ -271,6 +310,18 @@ export default function EmailListPanel({
     reads: initialSpamReads,
     readTotal: initialSpamReadTotal,
   });
+  const [archiveData, setArchiveData] = useState({
+    unreads: initialArchiveUnreads,
+    unreadTotal: initialArchiveUnreadTotal,
+    reads: initialArchiveReads,
+    readTotal: initialArchiveReadTotal,
+  });
+  const [trashData, setTrashData] = useState({
+    unreads: initialTrashUnreads,
+    unreadTotal: initialTrashUnreadTotal,
+    reads: initialTrashReads,
+    readTotal: initialTrashReadTotal,
+  });
 
   const syncDeferredData = useCallback((data: DeferredMailPanelData) => {
     setDraftsList(data.drafts);
@@ -282,15 +333,41 @@ export default function EmailListPanel({
       reads: data.spamReads,
       readTotal: data.spamReadTotal,
     });
+    setArchiveData({
+      unreads: data.archiveUnreads,
+      unreadTotal: data.archiveUnreadTotal,
+      reads: data.archiveReads,
+      readTotal: data.archiveReadTotal,
+    });
+    setTrashData({
+      unreads: data.trashUnreads,
+      unreadTotal: data.trashUnreadTotal,
+      reads: data.trashReads,
+      readTotal: data.trashReadTotal,
+    });
     setDeferredPending(false);
   }, []);
 
-  const currentUnreads = view === "spam" ? spamData.unreads : unreads;
-  const currentUnreadTotal =
-    view === "spam" ? spamData.unreadTotal : unreadTotal;
-  const currentReads = view === "spam" ? spamData.reads : reads;
-  const currentReadTotal = view === "spam" ? spamData.readTotal : readTotal;
-  const currentMailboxId = view === "spam" ? spamMailboxId ?? "" : inboxId;
+  const currentData =
+    view === "spam"
+      ? spamData
+      : view === "archive"
+        ? archiveData
+        : view === "trash"
+          ? trashData
+          : { unreads, unreadTotal, reads, readTotal };
+  const currentUnreads = currentData.unreads;
+  const currentUnreadTotal = currentData.unreadTotal;
+  const currentReads = currentData.reads;
+  const currentReadTotal = currentData.readTotal;
+  const currentMailboxId =
+    view === "spam"
+      ? spamMailboxId ?? ""
+      : view === "archive"
+        ? archiveMailboxId ?? ""
+        : view === "trash"
+          ? trashMailboxId ?? ""
+          : inboxId;
 
   useEffect(() => {
     setExtraUnreads([]);
@@ -592,12 +669,15 @@ export default function EmailListPanel({
     const result: Email[] = [];
     const add = (e: Email) => { if (!seenIds.has(e.id)) { seenIds.add(e.id); result.push(e); } };
     if (view === "inbox") {
-      pinnedList.forEach(add);
+      pinnedList.filter((email) => email.mailboxIds[inboxId]).forEach(add);
+      allUnreads.filter((e) => !pinnedIds.has(e.id)).forEach(add);
+      allReads.filter((e) => !pinnedIds.has(e.id)).forEach(add);
+    } else {
+      allUnreads.forEach(add);
+      allReads.forEach(add);
     }
-    allUnreads.filter((e) => !pinnedIds.has(e.id)).forEach(add);
-    allReads.filter((e) => !pinnedIds.has(e.id)).forEach(add);
     return result;
-  }, [pinnedList, allUnreads, allReads, view]);
+  }, [pinnedList, allUnreads, allReads, view, inboxId]);
 
   const visibleEmails = useMemo(() => {
     const base = isInSearchMode ? searchResults : allInboxEmails;
@@ -785,7 +865,11 @@ export default function EmailListPanel({
     }
   }
 
-  async function moveMessages(emails: Email[], targetMailboxId: string) {
+  async function moveMessages(
+    emails: Email[],
+    targetMailboxId: string,
+    successMessage?: string,
+  ) {
     const ids = emails.map((e) => e.id);
     const sourceMailboxId = currentMailboxId;
     setArchivedIds((prev) => new Set([...prev, ...ids]));
@@ -796,9 +880,10 @@ export default function EmailListPanel({
     );
     showToast({
       message:
-        targetMailboxId === trashMailboxId
+        successMessage ??
+        (targetMailboxId === trashMailboxId
           ? ids.length === 1 ? "Moved to trash" : `${ids.length} messages moved to trash`
-          : ids.length === 1 ? "Archived" : `${ids.length} messages archived`,
+          : ids.length === 1 ? "Archived" : `${ids.length} messages archived`),
       actionLabel: "Undo",
       onAction: async () => {
         await movePromise;
@@ -859,6 +944,83 @@ export default function EmailListPanel({
     }
   }
 
+  async function handleBulkRestore() {
+    const emails = visibleEmails.filter((email) => selectedIds.has(email.id));
+    await moveMessages(
+      emails,
+      inboxId,
+      emails.length === 1
+        ? "Restored to Inbox"
+        : `${emails.length} messages restored to Inbox`,
+    );
+  }
+
+  async function deleteMessagesPermanently(
+    ids: string[],
+    clearSelected = false,
+  ) {
+    if (!trashMailboxId) return;
+    if (!ids.length) return;
+    const confirmed = window.confirm(
+      ids.length === 1
+        ? "Permanently delete this message? This cannot be undone."
+        : `Permanently delete ${ids.length} messages? This cannot be undone.`,
+    );
+    if (!confirmed) return;
+
+    if (clearSelected) clearSelection();
+    setArchivedIds((previous) => new Set([...previous, ...ids]));
+    try {
+      await permanentlyDeleteEmailsAction(ids, trashMailboxId);
+      showToast({
+        message:
+          ids.length === 1
+            ? "Message permanently deleted"
+            : `${ids.length} messages permanently deleted`,
+      });
+      router.refresh();
+    } catch {
+      setArchivedIds((previous) => {
+        const next = new Set(previous);
+        ids.forEach((id) => next.delete(id));
+        return next;
+      });
+      showToast({
+        message: "Could not permanently delete those messages.",
+        tone: "error",
+      });
+    }
+  }
+
+  async function handlePermanentDelete() {
+    await deleteMessagesPermanently([...selectedIds], true);
+  }
+
+  async function handleEmptyTrash() {
+    if (!trashMailboxId) return;
+    const confirmed = window.confirm(
+      "Permanently delete every message in Trash? This cannot be undone.",
+    );
+    if (!confirmed) return;
+
+    try {
+      const result = await emptyTrashAction(trashMailboxId);
+      setTrashData({ unreads: [], unreadTotal: 0, reads: [], readTotal: 0 });
+      setExtraUnreads([]);
+      setExtraReads([]);
+      setArchivedIds(new Set());
+      showToast({
+        message:
+          result.destroyed === 1
+            ? "1 message permanently deleted"
+            : `${result.destroyed} messages permanently deleted`,
+      });
+      router.refresh();
+    } catch {
+      showToast({ message: "Could not empty Trash.", tone: "error" });
+    }
+  }
+
   async function toggleThreadReadState(
     thread: ThreadSummary,
     currentlyUnread: boolean,
@@ -962,7 +1124,10 @@ export default function EmailListPanel({
         setShortcutHelpOpen((open) => !open);
         return;
       }
-      if ((view !== "inbox" && view !== "spam") || visibleThreads.length === 0) {
+      if (
+        !["inbox", "spam", "archive", "trash"].includes(view) ||
+        visibleThreads.length === 0
+      ) {
         return;
       }
 
@@ -996,9 +1161,9 @@ export default function EmailListPanel({
         event.preventDefault();
         if (!confirmNavigation()) return;
         router.push(
-          view === "spam"
-            ? `${threadHrefPrefix}/${activeThread.threadId}?from=spam`
-            : `${threadHrefPrefix}/${activeThread.threadId}`,
+          view === "inbox"
+            ? `${threadHrefPrefix}/${activeThread.threadId}`
+            : `${threadHrefPrefix}/${activeThread.threadId}?from=${view}`,
         );
       } else if (
         event.key.toLowerCase() === "e" &&
@@ -1044,6 +1209,25 @@ export default function EmailListPanel({
     ? visibleThreads.find((thread) => thread.threadId === keyboardThreadId)
         ?.latestEmail.subject || "(no subject)"
     : "";
+  const viewLabel =
+    view === "inbox"
+      ? "Inbox"
+      : view === "drafts"
+        ? "Drafts"
+        : view === "sent"
+          ? "Sent"
+          : view === "spam"
+            ? "Spam"
+            : view === "archive"
+              ? "Archive"
+              : "Trash";
+  const isThreadMailboxView =
+    view === "inbox" ||
+    view === "spam" ||
+    view === "archive" ||
+    view === "trash";
+  const isDeferredThreadMailbox =
+    view === "spam" || view === "archive" || view === "trash";
 
   const actionBtnCls =
     "flex h-10 w-10 items-center justify-center rounded-md hover:bg-blue-100 dark:hover:bg-blue-900/60 text-blue-600 dark:text-blue-400 transition-colors shrink-0";
@@ -1075,6 +1259,15 @@ export default function EmailListPanel({
           Not Spam
         </button>
       )}
+      {(view === "archive" || view === "trash") && (
+        <button
+          onClick={handleBulkRestore}
+          className="mr-1 shrink-0 rounded-md px-2.5 py-1.5 text-xs font-semibold text-blue-600 transition-colors hover:bg-blue-100 dark:text-blue-400 dark:hover:bg-blue-900/60"
+          title="Restore to Inbox"
+        >
+          Restore
+        </button>
+      )}
       <button onClick={handleBulkMarkRead} className={actionBtnCls} title="Mark as read" aria-label="Mark selected messages as read">
         <IconCheck />
       </button>
@@ -1096,11 +1289,21 @@ export default function EmailListPanel({
           <IconArchive />
         </button>
       )}
-      {trashMailboxId && (
+      {trashMailboxId && view !== "trash" && (
         <button onClick={() => handleBulkMove(trashMailboxId)} className={actionBtnCls} title="Delete" aria-label="Move selected messages to trash">
           <IconTrash />
         </button>
       )}
+      {view === "trash" && trashMailboxId && (
+        <button
+          onClick={handlePermanentDelete}
+          className={actionBtnCls}
+          title="Delete forever"
+          aria-label="Permanently delete selected messages"
+        >
+          <IconTrash />
+        </button>
+      )}
     </>
   );
 
@@ -1124,7 +1327,7 @@ export default function EmailListPanel({
       <div className="flex min-h-[52px] items-center justify-between border-b border-stone-200 px-4 dark:border-stone-700 shrink-0">
         <div className="flex items-center gap-2 min-w-0">
           <span className="text-sm font-semibold text-stone-800 dark:text-stone-200 capitalize">
-            {view === "inbox" ? "Inbox" : view === "drafts" ? "Drafts" : view === "sent" ? "Sent" : "Spam"}
+            {viewLabel}
           </span>
           {view === "inbox" && (
             <UnreadCountBadge count={unreadCount} showZero className="shrink-0" />
@@ -1135,9 +1338,16 @@ export default function EmailListPanel({
           {view === "spam" && (
             <UnreadCountBadge count={currentUnreads.length} showZero className="shrink-0" />
           )}
+          {(view === "archive" || view === "trash") && (
+            <UnreadCountBadge
+              count={currentUnreadTotal + currentReadTotal}
+              showZero
+              className="shrink-0"
+            />
+          )}
         </div>
         <div className="flex items-center gap-1">
-          {(view === "inbox" || view === "spam") && (
+          {isThreadMailboxView && (
             <button
               type="button"
               onClick={handleRefresh}
@@ -1150,6 +1360,17 @@ export default function EmailListPanel({
               <span className="hidden xl:inline">Refresh</span>
             </button>
           )}
+          {view === "trash" &&
+            !deferredPending &&
+            currentUnreadTotal + currentReadTotal > 0 && (
+              <button
+                type="button"
+                onClick={handleEmptyTrash}
+                className="min-h-10 rounded-md px-2.5 text-xs font-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40"
+              >
+                Empty Trash
+              </button>
+            )}
           <button
             type="button"
             onClick={() => setShortcutHelpOpen(true)}
@@ -1334,14 +1555,15 @@ export default function EmailListPanel({
       )}
 
       {/* Bulk action bar */}
-      {view === "spam" && selectionMode && (
+      {(view === "spam" || view === "archive" || view === "trash") &&
+        selectionMode && (
         <div className="flex items-center gap-0.5 px-2 py-1.5 bg-blue-50 dark:bg-blue-950/40 border-b border-blue-200 dark:border-blue-800 shrink-0">
           {selectionActions}
         </div>
       )}
 
       {/* Inbox list */}
-      {(view === "inbox" || view === "spam") && (
+      {isThreadMailboxView && (
         <div className="relative flex-1 overflow-hidden bg-stone-50 dark:bg-stone-900">
 
           {/* "Up to date" success pill — floats over the list after refresh */}
@@ -1360,34 +1582,52 @@ export default function EmailListPanel({
           )}
 
           <div className="absolute inset-0 overflow-y-auto">
-          {view === "spam" && deferredPending && (
+          {isDeferredThreadMailbox && deferredPending && (
             <MailRowsLoadingSkeleton />
           )}
-          {(!deferredPending || view !== "spam") && isSearching && (
+          {(!deferredPending || !isDeferredThreadMailbox) && isSearching && (
             <div className="flex min-h-40 items-center justify-center gap-2 text-sm text-stone-400 dark:text-stone-500">
               <IconRefresh spinning />
               Searching…
             </div>
           )}
-          {(!deferredPending || view !== "spam") &&
+          {(!deferredPending || !isDeferredThreadMailbox) &&
             !isSearching &&
             visibleEmails.length === 0 && (
             <EmptyState
               compact
-              icon={isInSearchMode ? "search" : view === "spam" ? "spam" : "inbox"}
+              icon={
+                isInSearchMode
+                  ? "search"
+                  : view === "spam"
+                    ? "spam"
+                    : view === "archive"
+                      ? "archive"
+                      : view === "trash"
+                        ? "trash"
+                        : "inbox"
+              }
               title={
                 isInSearchMode
                   ? `No matches for “${searchQuery.trim()}”`
                   : view === "spam"
                     ? "No spam"
-                    : "You’re all caught up"
+                    : view === "archive"
+                      ? "Archive is empty"
+                      : view === "trash"
+                        ? "Trash is empty"
+                        : "You’re all caught up"
               }
               description={
                 isInSearchMode
                   ? "Try a broader phrase or remove one of the search filters."
                   : view === "spam"
                     ? "Messages identified as spam will appear here."
-                    : "New messages will appear here as they arrive."
+                    : view === "archive"
+                      ? "Messages you archive will appear here."
+                      : view === "trash"
+                        ? "Deleted messages remain here until you remove them permanently."
+                        : "New messages will appear here as they arrive."
               }
               action={
                 !isInSearchMode && view === "inbox"
@@ -1396,7 +1636,7 @@ export default function EmailListPanel({
               }
             />
           )}
-          {(!deferredPending || view !== "spam") &&
+          {(!deferredPending || !isDeferredThreadMailbox) &&
             !isSearching &&
             isInSearchMode &&
             visibleThreads.length > 0 && (
@@ -1404,14 +1644,14 @@ export default function EmailListPanel({
                 {visibleThreads.length} {visibleThreads.length === 1 ? "thread" : "threads"}
               </div>
             )}
-          {(!deferredPending || view !== "spam") &&
+          {(!deferredPending || !isDeferredThreadMailbox) &&
             !isSearching &&
             visibleThreads.map((thread, idx) => {
               const { latestEmail, senders } = thread;
               const threadHref =
-                view === "spam"
-                  ? `${threadHrefPrefix}/${thread.threadId}?from=spam`
-                  : `${threadHrefPrefix}/${thread.threadId}`;
+                view === "inbox"
+                  ? `${threadHrefPrefix}/${thread.threadId}`
+                  : `${threadHrefPrefix}/${thread.threadId}?from=${view}`;
               const isRouteSelected =
                 thread.threadId === selectedThreadId ||
                 thread.latestEmail.id === selectedEmailId;
@@ -1662,6 +1902,59 @@ export default function EmailListPanel({
                               <MailIcon name="archive" className="h-4 w-4" />
                             </button>
                           )}
+                          {(view === "archive" || view === "trash") && (
+                            <button
+                              type="button"
+                              title="Restore to Inbox"
+                              aria-label="Restore thread to Inbox"
+                              onClick={(event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                void moveMessages(
+                                  thread.allEmails,
+                                  inboxId,
+                                  thread.allEmails.length === 1
+                                    ? "Restored to Inbox"
+                                    : `${thread.allEmails.length} messages restored to Inbox`,
+                                );
+                              }}
+                              className="flex h-8 w-8 items-center justify-center rounded-md text-stone-400 hover:bg-stone-200 hover:text-stone-700 dark:text-stone-500 dark:hover:bg-stone-800 dark:hover:text-stone-200"
+                            >
+                              <MailIcon name="inbox" className="h-4 w-4" />
+                            </button>
+                          )}
+                          {view === "archive" && trashMailboxId && (
+                            <button
+                              type="button"
+                              title="Move to Trash"
+                              aria-label="Move thread to Trash"
+                              onClick={(event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                moveThread(thread, trashMailboxId);
+                              }}
+                              className="flex h-8 w-8 items-center justify-center rounded-md text-stone-400 hover:bg-stone-200 hover:text-red-600 dark:text-stone-500 dark:hover:bg-stone-800 dark:hover:text-red-400"
+                            >
+                              <MailIcon name="trash" className="h-4 w-4" />
+                            </button>
+                          )}
+                          {view === "trash" && trashMailboxId && (
+                            <button
+                              type="button"
+                              title="Delete forever"
+                              aria-label="Permanently delete thread"
+                              onClick={(event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                void deleteMessagesPermanently(
+                                  thread.allEmails.map((email) => email.id),
+                                );
+                              }}
+                              className="flex h-8 w-8 items-center justify-center rounded-md text-stone-400 hover:bg-red-50 hover:text-red-600 dark:text-stone-500 dark:hover:bg-red-950/40 dark:hover:text-red-400"
+                            >
+                              <MailIcon name="trash" className="h-4 w-4" />
+                            </button>
+                          )}
                           <button
                             type="button"
                             title={isUnread ? "Mark as read" : "Mark as unread"}
@@ -1679,37 +1972,39 @@ export default function EmailListPanel({
                             />
                           </button>
                         </div>
-                        <button
-                          type="button"
-                          title={thread.isPinned ? "Unpin" : "Pin"}
-                          aria-label={thread.isPinned ? "Unpin thread" : "Pin thread"}
-                          onClick={async (event) => {
-                            event.preventDefault();
-                            event.stopPropagation();
-                            const ids = thread.allEmails.map((email) => email.id);
-                            const next = !thread.isPinned;
-                            ids.forEach((id) =>
-                              window.dispatchEvent(
-                                new CustomEvent("email-pin-changed", { detail: { id, pinned: next } })
-                              )
-                            );
-                            try {
-                              await bulkSetPin(ids, next);
-                              showToast({ message: next ? "Pinned" : "Unpinned" });
-                              router.refresh();
-                            } catch {
-                              showToast({ message: "Could not update pinning.", tone: "error" });
-                            }
-                          }}
-                          className={[
-                            "flex h-8 w-8 items-center justify-center rounded-md transition-all",
-                            thread.isPinned
-                              ? "text-amber-500 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950/40"
-                              : "text-stone-300 opacity-0 hover:bg-stone-200 hover:text-amber-500 group-hover:opacity-100 group-focus-within:opacity-100 dark:text-stone-600 dark:hover:bg-stone-800 dark:hover:text-amber-400",
-                          ].join(" ")}
-                        >
-                          <IconPin />
-                        </button>
+                        {view === "inbox" && (
+                          <button
+                            type="button"
+                            title={thread.isPinned ? "Unpin" : "Pin"}
+                            aria-label={thread.isPinned ? "Unpin thread" : "Pin thread"}
+                            onClick={async (event) => {
+                              event.preventDefault();
+                              event.stopPropagation();
+                              const ids = thread.allEmails.map((email) => email.id);
+                              const next = !thread.isPinned;
+                              ids.forEach((id) =>
+                                window.dispatchEvent(
+                                  new CustomEvent("email-pin-changed", { detail: { id, pinned: next } })
+                                )
+                              );
+                              try {
+                                await bulkSetPin(ids, next);
+                                showToast({ message: next ? "Pinned" : "Unpinned" });
+                                router.refresh();
+                              } catch {
+                                showToast({ message: "Could not update pinning.", tone: "error" });
+                              }
+                            }}
+                            className={[
+                              "flex h-8 w-8 items-center justify-center rounded-md transition-all",
+                              thread.isPinned
+                                ? "text-amber-500 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950/40"
+                                : "text-stone-300 opacity-0 hover:bg-stone-200 hover:text-amber-500 group-hover:opacity-100 group-focus-within:opacity-100 dark:text-stone-600 dark:hover:bg-stone-800 dark:hover:text-amber-400",
+                            ].join(" ")}
+                          >
+                            <IconPin />
+                          </button>
+                        )}
                       </div>
                     )}
                     </div>
@@ -1718,7 +2013,7 @@ export default function EmailListPanel({
               );
             })}
 
-          {(!deferredPending || view !== "spam") && hasMore && (
+          {(!deferredPending || !isDeferredThreadMailbox) && hasMore && (
             <button
               onClick={handleLoadMore}
               disabled={loadingMore}
@@ -1727,8 +2022,8 @@ export default function EmailListPanel({
               {loadingMore
                 ? "Loading…"
                 : hasMoreUnreads
-                  ? `Load more unread (${loadedUnreads} of ${unreadTotal})`
-                  : `Load more (${loadedUnreads + loadedReads} of ${unreadTotal + readTotal})`}
+                  ? `Load more unread (${loadedUnreads} of ${currentUnreadTotal})`
+                  : `Load more (${loadedUnreads + loadedReads} of ${currentUnreadTotal + currentReadTotal})`}
             </button>
           )}
           </div>
diff --git a/src/components/InboxPanelLayout.tsx b/src/components/InboxPanelLayout.tsx
index c736fd3..8032852 100644
--- a/src/components/InboxPanelLayout.tsx
+++ b/src/components/InboxPanelLayout.tsx
@@ -14,8 +14,7 @@ export default function InboxPanelLayout({ list, children }: Props) {
     pathname.startsWith("/thread/") ||
     pathname.startsWith("/calendar") ||
     pathname.startsWith("/attachment/") ||
-    pathname.startsWith("/settings") ||
-    pathname.startsWith("/sent");
+    pathname.startsWith("/settings");
 
   return (
     <div className="flex h-full w-full">
diff --git a/src/components/MessageActionBar.tsx b/src/components/MessageActionBar.tsx
index 35d764d..f3b9c3f 100644
--- a/src/components/MessageActionBar.tsx
+++ b/src/components/MessageActionBar.tsx
@@ -1,12 +1,18 @@
 "use client";
 
 import Link from "next/link";
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
+import { useRouter } from "next/navigation";
+import {
+  bulkMoveToMailbox,
+  permanentlyDeleteEmailsAction,
+} from "@/app/(inbox)/actions";
 import MailIcon from "@/components/MailIcon";
 import MarkUnreadButton from "@/components/MarkUnreadButton";
 import NotSpamButton from "@/components/NotSpamButton";
 import PinButton from "@/components/PinButton";
 import Popover from "@/components/Popover";
+import { useToast } from "@/components/ToastProvider";
 
 interface Props {
   emailId: string;
@@ -15,6 +21,8 @@ interface Props {
   isSpam: boolean;
   mailboxIds: Record<string, boolean>;
   inboxMailboxId?: string;
+  archiveMailboxId?: string;
+  trashMailboxId?: string;
   className?: string;
 }
 
@@ -47,10 +55,94 @@ export default function MessageActionBar({
   isSpam,
   mailboxIds,
   inboxMailboxId,
+  archiveMailboxId,
+  trashMailboxId,
   className = "",
 }: Props) {
+  const router = useRouter();
+  const showToast = useToast();
+  const [busyAction, setBusyAction] = useState<string | null>(null);
   const showNotSpam = isSpam && !!inboxMailboxId;
   const secondaryColumns = showNotSpam ? "col-span-3" : "col-span-2";
+  const isInbox = !!(inboxMailboxId && mailboxIds[inboxMailboxId]);
+  const isArchive = !!(archiveMailboxId && mailboxIds[archiveMailboxId]);
+  const isTrash = !!(trashMailboxId && mailboxIds[trashMailboxId]);
+  const sourceMailboxId = isTrash
+    ? trashMailboxId
+    : isArchive
+      ? archiveMailboxId
+      : isInbox
+        ? inboxMailboxId
+        : Object.keys(mailboxIds)[0];
+  const sourcePath = isTrash
+    ? "/trash"
+    : isArchive
+      ? "/archive"
+      : isSpam
+        ? "/spam"
+        : "/";
+
+  async function moveMessage(
+    targetMailboxId: string,
+    successMessage: string,
+  ) {
+    if (!sourceMailboxId || busyAction) return;
+    setBusyAction(targetMailboxId);
+    const movePromise = bulkMoveToMailbox(
+      [{ id: emailId, mailboxIds }],
+      targetMailboxId,
+    );
+    showToast({
+      message: successMessage,
+      actionLabel: "Undo",
+      onAction: async () => {
+        await movePromise;
+        await bulkMoveToMailbox(
+          [{ id: emailId, mailboxIds: { [targetMailboxId]: true } }],
+          sourceMailboxId,
+        );
+        router.refresh();
+      },
+    });
+    try {
+      await movePromise;
+      router.replace(sourcePath);
+      router.refresh();
+    } catch {
+      showToast({ message: "Could not move this message.", tone: "error" });
+    } finally {
+      setBusyAction(null);
+    }
+  }
+
+  async function permanentlyDeleteMessage() {
+    if (!trashMailboxId || busyAction) return;
+    if (
+      !window.confirm(
+        "Permanently delete this message? This cannot be undone.",
+      )
+    ) {
+      return;
+    }
+
+    setBusyAction("delete");
+    try {
+      await permanentlyDeleteEmailsAction([emailId], trashMailboxId);
+      showToast({ message: "Message permanently deleted" });
+      router.replace("/trash");
+      router.refresh();
+    } catch {
+      showToast({
+        message: "Could not permanently delete this message.",
+        tone: "error",
+      });
+    } finally {
+      setBusyAction(null);
+    }
+  }
+
+  const menuButtonClass =
+    "block w-full px-3 py-2.5 text-left text-stone-600 hover:bg-stone-100 disabled:cursor-wait disabled:opacity-50 dark:text-stone-300 dark:hover:bg-stone-800";
 
   return (
     <div
@@ -128,6 +220,59 @@ export default function MessageActionBar({
             >
               Print
             </Link>
+            {isInbox && archiveMailboxId && (
+              <button
+                type="button"
+                role="menuitem"
+                disabled={!!busyAction}
+                onClick={() => void moveMessage(archiveMailboxId, "Archived")}
+                className={menuButtonClass}
+              >
+                Archive
+              </button>
+            )}
+            {(isArchive || isTrash) && inboxMailboxId && (
+              <button
+                type="button"
+                role="menuitem"
+                disabled={!!busyAction}
+                onClick={() =>
+                  void moveMessage(inboxMailboxId, "Restored to Inbox")
+                }
+                className={menuButtonClass}
+              >
+                Restore to Inbox
+              </button>
+            )}
+            {!isTrash &&
+              trashMailboxId &&
+              (isInbox || isArchive || isSpam) && (
+                <button
+                  type="button"
+                  role="menuitem"
+                  disabled={!!busyAction}
+                  onClick={() =>
+                    void moveMessage(trashMailboxId, "Moved to Trash")
+                  }
+                  className={menuButtonClass}
+                >
+                  Move to Trash
+                </button>
+              )}
+            {isTrash && trashMailboxId && (
+              <button
+                type="button"
+                role="menuitem"
+                disabled={!!busyAction}
+                onClick={() => void permanentlyDeleteMessage()}
+                className={[
+                  menuButtonClass,
+                  "text-red-600 dark:text-red-400",
+                ].join(" ")}
+              >
+                Delete forever
+              </button>
+            )}
           </Popover>
         </ActionSlot>
       </div>
diff --git a/src/components/MobileNav.tsx b/src/components/MobileNav.tsx
index 021f156..7d69f0d 100644
--- a/src/components/MobileNav.tsx
+++ b/src/components/MobileNav.tsx
@@ -27,11 +27,19 @@ function destinationActive(
         pathname.startsWith("/thread/") ||
         pathname.startsWith("/attachment/")) &&
       from !== "spam" &&
-      from !== "sent"
+      from !== "sent" &&
+      from !== "archive" &&
+      from !== "trash"
     );
   }
   if (href === "/sent") return pathname.startsWith("/sent") || from === "sent";
   if (href === "/spam") return pathname.startsWith("/spam") || from === "spam";
+  if (href === "/archive") {
+    return pathname.startsWith("/archive") || from === "archive";
+  }
+  if (href === "/trash") {
+    return pathname.startsWith("/trash") || from === "trash";
+  }
   return pathname.startsWith(href);
 }
 
@@ -121,6 +129,8 @@ export default function MobileNav() {
   const secondary: Destination[] = [
     { href: "/drafts", label: "Drafts", icon: "drafts", badge: counts.drafts },
     { href: "/sent", label: "Sent", icon: "sent" },
+    { href: "/archive", label: "Archive", icon: "archive" },
+    { href: "/trash", label: "Trash", icon: "trash" },
     { href: "/spam", label: "Spam", icon: "spam", badge: counts.spam },
     { href: "/settings", label: "Settings", icon: "settings" },
   ];
diff --git a/src/components/ThreadView.tsx b/src/components/ThreadView.tsx
index a99a5f8..557b3f9 100644
--- a/src/components/ThreadView.tsx
+++ b/src/components/ThreadView.tsx
@@ -48,6 +48,8 @@ interface ItemProps {
   onToggle: () => void;
   spamMailboxId?: string;
   inboxMailboxId?: string;
+  archiveMailboxId?: string;
+  trashMailboxId?: string;
 }
 
 function EmailStackItem({
@@ -59,6 +61,8 @@ function EmailStackItem({
   onToggle,
   spamMailboxId,
   inboxMailboxId,
+  archiveMailboxId,
+  trashMailboxId,
 }: ItemProps) {
   const isUnread = !email.keywords?.["$seen"];
   const resolved = resolveBody(email);
@@ -169,6 +173,8 @@ function EmailStackItem({
             isSpam={isSpam}
             mailboxIds={email.mailboxIds}
             inboxMailboxId={inboxMailboxId}
+            archiveMailboxId={archiveMailboxId}
+            trashMailboxId={trashMailboxId}
             className="border-b border-stone-100 dark:border-stone-700/50"
           />
 
@@ -218,9 +224,18 @@ interface Props {
   calendarEvents: (CalendarEventData | null)[];
   spamMailboxId?: string;
   inboxMailboxId?: string;
+  archiveMailboxId?: string;
+  trashMailboxId?: string;
 }
 
-export default function ThreadView({ emails, calendarEvents, spamMailboxId, inboxMailboxId }: Props) {
+export default function ThreadView({
+  emails,
+  calendarEvents,
+  spamMailboxId,
+  inboxMailboxId,
+  archiveMailboxId,
+  trashMailboxId,
+}: Props) {
   // Start with the most recent email expanded
   const lastId = emails[emails.length - 1]?.id;
   const [expandedIds, setExpandedIds] = useState<Set<string>>(
@@ -256,6 +271,8 @@ export default function ThreadView({ emails, calendarEvents, spamMailboxId, inbo
           onToggle={() => toggle(email.id)}
           spamMailboxId={spamMailboxId}
           inboxMailboxId={inboxMailboxId}
+          archiveMailboxId={archiveMailboxId}
+          trashMailboxId={trashMailboxId}
         />
       ))}
     </div>
diff --git a/src/lib/__tests__/composeHtml.test.ts b/src/lib/__tests__/composeHtml.test.ts
index 5fd9e7e..5301a6a 100644
--- a/src/lib/__tests__/composeHtml.test.ts
+++ b/src/lib/__tests__/composeHtml.test.ts
@@ -1,6 +1,8 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import {
+  appendForwardedHtml,
+  extractForwardedHtml,
   markQuotedReplyHtml,
   wrapComposePreviewHtml,
   wrapEmailHtml,
@@ -24,6 +26,20 @@ describe("wrapEmailHtml", () => {
   });
 });
 
+describe("forwarded draft HTML", () => {
+  it("round-trips forwarded HTML through a saved draft", () => {
+    const forwarded = appendForwardedHtml(
+      "<html><head><title>Original</title></head><body><p>Original message</p></body></html>",
+    );
+    const draft = wrapEmailHtml(`<p>My note</p>${forwarded}`);
+    assert.equal(extractForwardedHtml(draft), "<p>Original message</p>");
+  });
+
+  it("returns no forwarded body for an ordinary draft", () => {
+    assert.equal(extractForwardedHtml(wrapEmailHtml("<p>Hello</p>")), undefined);
+  });
+});
+
 describe("markQuotedReplyHtml", () => {
   it("marks only the final blockquote as standard cited history", () => {
     const result = markQuotedReplyHtml(
diff --git a/src/lib/__tests__/emailHtml.test.ts b/src/lib/__tests__/emailHtml.test.ts
index 562233b..74b1949 100644
--- a/src/lib/__tests__/emailHtml.test.ts
+++ b/src/lib/__tests__/emailHtml.test.ts
@@ -2,6 +2,7 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { JSDOM, VirtualConsole } from "jsdom";
 import {
+  hasRemoteContent,
   prepareHtml,
   prepareTextBody,
   resolveEmbeddedImages,
@@ -73,6 +74,49 @@ describe("prepareHtml", () => {
     );
   });
 
+  it("blocks remote resources by default without blocking local or embedded images", () => {
+    const result = prepareHtml(
+      documentWith(
+        '<img src="https://tracker.example/pixel.gif"><img src="/api/download?id=1" srcset="/small.jpg 1x, /large.jpg 2x"><img src="cid:logo"><svg><image href="https://tracker.example/svg.png"></image></svg>',
+        '<style>.hero{background:url("https://tracker.example/hero.jpg")}</style>',
+      ),
+    );
+    assert.ok(!result.includes("https://tracker.example/pixel.gif"));
+    assert.ok(!result.includes("https://tracker.example/hero.jpg"));
+    assert.ok(!result.includes("https://tracker.example/svg.png"));
+    assert.ok(result.includes('data-mail-remote-content="blocked"'));
+    assert.ok(result.includes('src="/api/download?id=1"'));
+    assert.ok(result.includes('srcset="/small.jpg 1x, /large.jpg 2x"'));
+    assert.ok(result.includes('src="cid:logo"'));
+  });
+
+  it("loads remote resources only after explicit permission", () => {
+    const html = documentWith(
+      '<img src="https://images.example/photo.jpg">',
+    );
+    const blocked = prepareHtml(html);
+    const allowed = prepareHtml(html, { allowRemoteContent: true });
+    assert.ok(!blocked.includes("https://images.example/photo.jpg"));
+    assert.ok(allowed.includes('src="https://images.example/photo.jpg"'));
+  });
+
+  it("strips active content and installs a restrictive content policy", () => {
+    const result = prepareHtml(
+      documentWith(
+        '<script nonce="mail-reader">window.evil=true</script><form action="/steal"><input autofocus></form><img src="/safe" onerror="evil()"><a href="javascript:evil()">bad</a>',
+        '<meta http-equiv="refresh" content="0;url=https://evil.example">',
+      ),
+    );
+    assert.ok(!result.includes("window.evil"));
+    assert.ok(!result.includes("<form"));
+    assert.ok(!result.includes("<input"));
+    assert.ok(!result.includes("onerror"));
+    assert.ok(!result.includes("javascript:"));
+    assert.ok(!result.includes("http-equiv=\"refresh\""));
+    assert.ok(result.includes("default-src &apos;none&apos;"));
+    assert.ok(result.includes('script nonce="mail-reader"'));
+  });
+
   it("does not rewrite table, cell, or responsive helper-class geometry", () => {
     const result = prepareHtml(
       documentWith(
@@ -418,6 +462,36 @@ describe("prepareHtml", () => {
   });
 });
 
+describe("hasRemoteContent", () => {
+  it("detects remote image, srcset, and CSS resources", () => {
+    assert.equal(
+      hasRemoteContent('<img src="https://example.com/pixel.gif">'),
+      true,
+    );
+    assert.equal(
+      hasRemoteContent('<img srcset="/small.jpg 1x, //example.com/large.jpg 2x">'),
+      true,
+    );
+    assert.equal(
+      hasRemoteContent('<style>.hero{background:url(https://example.com/a.jpg)}</style>'),
+      true,
+    );
+    assert.equal(
+      hasRemoteContent('<svg><image href="https://example.com/a.svg"></image></svg>'),
+      true,
+    );
+  });
+
+  it("ignores local, cid, and data resources", () => {
+    assert.equal(
+      hasRemoteContent(
+        '<img src="/api/download"><img src="cid:logo"><img src="data:image/png;base64,AAAA">',
+      ),
+      false,
+    );
+  });
+});
+
 describe("resolveEmbeddedImages", () => {
   it("maps cid image references to authenticated inline downloads", () => {
     const result = resolveEmbeddedImages(
diff --git a/src/lib/__tests__/emailList.test.ts b/src/lib/__tests__/emailList.test.ts
index 4a452bc..35b3662 100644
--- a/src/lib/__tests__/emailList.test.ts
+++ b/src/lib/__tests__/emailList.test.ts
@@ -13,7 +13,9 @@ function makeEmail(id: string, overrides: Partial<Email> = {}): Email {
     from: null,
     to: null,
     cc: null,
+    bcc: null,
     replyTo: null,
+    inReplyTo: null,
     receivedAt: "2024-01-01T00:00:00Z",
     preview: "",
     bodyValues: {},
diff --git a/src/lib/__tests__/jmap.test.ts b/src/lib/__tests__/jmap.test.ts
index 79bbf24..7816587 100644
--- a/src/lib/__tests__/jmap.test.ts
+++ b/src/lib/__tests__/jmap.test.ts
@@ -3,7 +3,7 @@ process.env.FASTMAIL_API_TOKEN = "test-token";
 
 import { describe, it } from "node:test";
 import assert from "node:assert/strict";
-import { buildMailPanelMethodCalls, clearRecipientSuggestionCaches, deleteDraft, getAccountId, getContactsAccountId, getInboxSnapshot, getUnreadInboxTotal, listInboxEmails, loadMailPanelData, loadMoreEmailsFiltered, moveEmailsToMailbox, parseAddresses, saveDraft, searchContacts, searchRecipientSuggestions, sendEmail, setKeywordsOnMany } from "../jmap";
+import { buildMailPanelMethodCalls, clearRecipientSuggestionCaches, deleteDraft, destroyAllEmailsInMailbox, destroyEmails, getAccountId, getContactsAccountId, getInboxSnapshot, getUnreadInboxTotal, listInboxEmails, loadMailPanelData, loadMoreEmailsFiltered, moveEmailsToMailbox, parseAddresses, saveDraft, searchContacts, searchRecipientSuggestions, sendEmail, setKeywordsOnMany } from "../jmap";
 
 const MAIL_CAP = "urn:ietf:params:jmap:mail";
 
@@ -324,10 +324,12 @@ describe("loadMailPanelData", () => {
       drafts: "drafts",
       sent: "sent",
       spam: "spam",
+      archive: "archive",
+      trash: "trash",
     });
 
     assert.equal(primaryCalls.length, 4);
-    assert.equal(deferredCalls.length, 10);
+    assert.equal(deferredCalls.length, 18);
     assert.ok(
       primaryCalls.every(([, , callId]) => callId !== "pq" && callId !== "pg"),
     );
@@ -351,6 +353,14 @@ describe("loadMailPanelData", () => {
         ["Email/get", { list: [makeEmailResponse("spam-unread", false)] }, "sug"],
         ["Email/query", { total: 4 }, "srq"],
         ["Email/get", { list: [makeEmailResponse("spam-read", true)] }, "srg"],
+        ["Email/query", { total: 5 }, "auq"],
+        ["Email/get", { list: [makeEmailResponse("archive-unread", false)] }, "aug"],
+        ["Email/query", { total: 6 }, "arq"],
+        ["Email/get", { list: [makeEmailResponse("archive-read", true)] }, "arg"],
+        ["Email/query", { total: 7 }, "tuq"],
+        ["Email/get", { list: [makeEmailResponse("trash-unread", false)] }, "tug"],
+        ["Email/query", { total: 8 }, "trq"],
+        ["Email/get", { list: [makeEmailResponse("trash-read", true)] }, "trg"],
       ]),
     ];
 
@@ -362,13 +372,15 @@ describe("loadMailPanelData", () => {
         drafts: "drafts",
         sent: "sent",
         spam: "spam",
+        archive: "archive",
+        trash: "trash",
       },
     );
 
     assert.equal(capturedBodies.length, 1);
     assert.equal(
       (capturedBodies[0] as { methodCalls: unknown[] }).methodCalls.length,
-      14,
+      22,
     );
     assert.equal(result.inbox.unreadTotal, 2);
     assert.equal(result.inbox.readTotal, 7);
@@ -377,6 +389,10 @@ describe("loadMailPanelData", () => {
     assert.equal(result.sent.total, 9);
     assert.equal(result.spam.unreadTotal, 3);
     assert.equal(result.spam.readTotal, 4);
+    assert.equal(result.archive.unreadTotal, 5);
+    assert.equal(result.archive.readTotal, 6);
+    assert.equal(result.trash.unreadTotal, 7);
+    assert.equal(result.trash.readTotal, 8);
   });
 });
 
@@ -629,6 +645,53 @@ describe("moveEmailsToMailbox", () => {
   });
 });
 
+describe("permanent deletion", () => {
+  it("destroys the requested messages in one Email/set call", async () => {
+    capturedBodies = [];
+    mockResponses = [
+      makeJmapResponse([
+        ["Email/set", { destroyed: ["e1", "e2"] }, "0"],
+      ]),
+    ];
+
+    await destroyEmails(
+      "https://api.example.com/jmap",
+      "acct1",
+      ["e1", "e2"],
+    );
+    const call = (capturedBodies[0] as any).methodCalls[0];
+    assert.equal(call[0], "Email/set");
+    assert.deepEqual(call[1].destroy, ["e1", "e2"]);
+  });
+
+  it("empties a mailbox in bounded batches until its query is empty", async () => {
+    capturedBodies = [];
+    mockResponses = [
+      makeJmapResponse([
+        ["Email/query", { ids: ["e1", "e2"] }, "0"],
+      ]),
+      makeJmapResponse([
+        ["Email/set", { destroyed: ["e1", "e2"] }, "0"],
+      ]),
+      makeJmapResponse([
+        ["Email/query", { ids: [] }, "0"],
+      ]),
+    ];
+
+    const destroyed = await destroyAllEmailsInMailbox(
+      "https://api.example.com/jmap",
+      "acct1",
+      "trash",
+    );
+    assert.equal(destroyed, 2);
+    assert.equal(capturedBodies.length, 3);
+    const firstQuery = (capturedBodies[0] as any).methodCalls[0][1];
+    assert.deepEqual(firstQuery.filter, { inMailbox: "trash" });
+    assert.equal(firstQuery.position, 0);
+    assert.equal(firstQuery.limit, 250);
+  });
+});
+
 // ---------------------------------------------------------------------------
 // sendEmail
 // ---------------------------------------------------------------------------
@@ -912,6 +975,63 @@ describe("saveDraft", () => {
     assert.equal(draft().inReplyTo, undefined);
     assert.equal(draft().references, undefined);
   });
+
+  it("preserves Bcc recipients and both text and HTML bodies", async () => {
+    setupMock();
+    await saveDraft("https://api.example.com/jmap", "acct1", "drafts-mbox", {
+      ...BASE,
+      bcc: [{ name: "Private", email: "private@example.com" }],
+      htmlBody: "<p>Draft body</p>",
+    });
+    assert.deepEqual(draft().bcc, [
+      { name: "Private", email: "private@example.com" },
+    ]);
+    assert.equal(draft().bodyStructure.type, "multipart/alternative");
+    assert.equal(draft().bodyValues.body.value, "Draft body");
+    assert.equal(draft().bodyValues.html.value, "<p>Draft body</p>");
+  });
+
+  it("preserves inline images and attachments in the draft MIME structure", async () => {
+    setupMock();
+    await saveDraft("https://api.example.com/jmap", "acct1", "drafts-mbox", {
+      ...BASE,
+      htmlBody: '<p>Draft</p><img src="cid:image-1@mail">',
+      inlineImages: [
+        { id: "image-1", blobId: "inline-blob", type: "image/png" },
+      ],
+      attachments: [
+        {
+          blobId: "attachment-blob",
+          name: "report.pdf",
+          type: "application/pdf",
+        },
+      ],
+    });
+    const structure = draft().bodyStructure;
+    assert.equal(structure.type, "multipart/mixed");
+    assert.equal(structure.subParts[0].type, "multipart/related");
+    assert.equal(structure.subParts[0].subParts[1].cid, "image-1@mail");
+    assert.equal(
+      structure.subParts[0].subParts[1].disposition,
+      "inline",
+    );
+    assert.equal(structure.subParts[1].name, "report.pdf");
+    assert.equal(structure.subParts[1].disposition, "attachment");
+  });
+
+  it("replaces an existing draft only after creating its successor", async () => {
+    setupMock();
+    await saveDraft(
+      "https://api.example.com/jmap",
+      "acct1",
+      "drafts-mbox",
+      BASE,
+      "old-draft",
+    );
+    const request = (capturedBodies[0] as any).methodCalls[0][1];
+    assert.ok(request.create.draft);
+    assert.deepEqual(request.destroy, ["old-draft"]);
+  });
 });
 
 // ---------------------------------------------------------------------------
diff --git a/src/lib/__tests__/printHtml.test.ts b/src/lib/__tests__/printHtml.test.ts
index 935f475..95fc3ac 100644
--- a/src/lib/__tests__/printHtml.test.ts
+++ b/src/lib/__tests__/printHtml.test.ts
@@ -1,6 +1,12 @@
 import { describe, it } from "node:test";
 import assert from "node:assert/strict";
-import { sanitizeHtml, extractStyles, extractBodyContent, resolvePrintBody } from "../printHtml";
+import {
+  sanitizeHtml,
+  sanitizeReaderHtml,
+  extractStyles,
+  extractBodyContent,
+  resolvePrintBody,
+} from "../printHtml";
 import type { Email } from "../types";
 
 // ---------------------------------------------------------------------------
@@ -87,6 +93,29 @@ describe("sanitizeHtml", () => {
   });
 });
 
+describe("sanitizeReaderHtml", () => {
+  it("removes executable content while preserving inert email styling and images", () => {
+    const result = sanitizeReaderHtml(
+      '<style>.hero{background:url("https://images.example/hero.jpg")}</style><script>evil()</script><form><input></form><div onclick="evil()"><img src="https://images.example/photo.jpg"></div>',
+    );
+    assert.ok(result.includes("<style>"));
+    assert.ok(result.includes("https://images.example/hero.jpg"));
+    assert.ok(result.includes('src="https://images.example/photo.jpg"'));
+    assert.ok(!result.includes("<script"));
+    assert.ok(!result.includes("<form"));
+    assert.ok(!result.includes("<input"));
+    assert.ok(!result.includes("onclick"));
+  });
+
+  it("removes dangerous URLs and executable CSS", () => {
+    const result = sanitizeReaderHtml(
+      '<a href="javascript:evil()">bad</a><div style="behavior:url(x);background:url(javascript:evil())">content</div>',
+    );
+    assert.ok(!result.includes("javascript:"));
+    assert.ok(!result.includes("behavior:"));
+  });
+});
+
 // ---------------------------------------------------------------------------
 // extractStyles
 // ---------------------------------------------------------------------------
diff --git a/src/lib/composeHtml.ts b/src/lib/composeHtml.ts
index 19156a0..dd12d7c 100644
--- a/src/lib/composeHtml.ts
+++ b/src/lib/composeHtml.ts
@@ -50,6 +50,31 @@ const EMAIL_CONTENT_CSS = `
   .mail-content th, .mail-content td { padding: 6px 8px; border: 1px solid #e2e8f0; text-align: left; }
 `;
 
+const FORWARDED_HTML_START = "<!--mail-forward-start-->";
+const FORWARDED_HTML_END = "<!--mail-forward-end-->";
+
+function extractBodyContent(html: string): string {
+  const body = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+  if (body) return body[1];
+  return html
+    .replace(/<!DOCTYPE[^>]*>/gi, "")
+    .replace(/<\/?html[^>]*>/gi, "")
+    .replace(/<head[\s\S]*?<\/head>/gi, "")
+    .trim();
+}
+
+export function appendForwardedHtml(originalHtml: string): string {
+  const content = extractBodyContent(originalHtml);
+  return `<div data-forwarded-email="true" style="margin-top:24px;padding-top:16px;border-top:1px solid #e4e4e7;font-size:14px;">${FORWARDED_HTML_START}${content}${FORWARDED_HTML_END}</div>`;
+}
+
+export function extractForwardedHtml(draftHtml: string): string | undefined {
+  const start = draftHtml.indexOf(FORWARDED_HTML_START);
+  const end = draftHtml.indexOf(FORWARDED_HTML_END);
+  if (start < 0 || end <= start) return undefined;
+  return draftHtml.slice(start + FORWARDED_HTML_START.length, end);
+}
+
 /**
  * Mark the final Markdown blockquote as the quoted part of a reply.
  * The editor remains pure Markdown; this transport-only annotation lets email
diff --git a/src/lib/emailHtml.ts b/src/lib/emailHtml.ts
index 826fccf..56e7bbf 100644
--- a/src/lib/emailHtml.ts
+++ b/src/lib/emailHtml.ts
@@ -46,6 +46,76 @@ const URL_RE = /(https?:\/\/[^\s<>"']+)/g;
 const TOKEN_RE =
   /(<script[\s\S]*?<\/script\s*>|<style[\s\S]*?<\/style\s*>|<\/a\s*>|<a[\s>][^>]*>|<[^>]*>)|([^<]*)/gi;
 
+const ACTIVE_CONTENT_TAG_RE =
+  /<(script|iframe|frameset|object|embed|applet|form|button|select|textarea|audio|video)\b[^>]*>[\s\S]*?<\/\1\s*>/gi;
+const ACTIVE_TAG_RE =
+  /<\/?(?:script|iframe|frame|frameset|object|embed|applet|form|input|button|select|textarea|link|base|audio|video|source)\b[^>]*>/gi;
+const DANGEROUS_META_RE =
+  /<meta\b[^>]*http-equiv\s*=\s*(?:"(?:refresh|content-security-policy)"|'(?:refresh|content-security-policy)'|(?:refresh|content-security-policy))[^>]*>/gi;
+const EVENT_HANDLER_RE =
+  /\s+on[a-z0-9_-]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi;
+const DANGEROUS_URL_RE =
+  /\s+(href|src|background|poster|xlink:href)\s*=\s*(["']?)\s*(?:javascript|vbscript):[\s\S]*?\2(?=\s|>)/gi;
+const REMOTE_RESOURCE_ATTRIBUTE_RE =
+  /\b(?:src|background|poster)\s*=\s*(?:"\s*(?:https?:)?\/\/|'(?:https?:)?\/\/|(?:https?:)?\/\/)/i;
+const REMOTE_SRCSET_RE =
+  /\bsrcset\s*=\s*(?:"[^"]*(?:https?:)?\/\/[^"]*"|'[^']*(?:https?:)?\/\/[^']*'|[^\s>]*(?:https?:)?\/\/[^\s>]*)/i;
+const REMOTE_CSS_RE =
+  /(?:@import\s+(?:url\s*\()?|url\s*\(\s*['"]?)\s*(?:https?:)?\/\//i;
+const REMOTE_SVG_RESOURCE_RE =
+  /<(?:image|use|feimage)\b[^>]*\s(?:href|xlink:href)\s*=\s*(?:"\s*(?:https?:)?\/\/|'\s*(?:https?:)?\/\/|(?:https?:)?\/\/)/i;
+
+function stripActiveContentFallback(html: string): string {
+  return html
+    .replace(ACTIVE_CONTENT_TAG_RE, "")
+    .replace(ACTIVE_TAG_RE, "")
+    .replace(DANGEROUS_META_RE, "")
+    .replace(EVENT_HANDLER_RE, "")
+    .replace(/\s+(?:srcdoc|ping|nonce)\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "")
+    .replace(DANGEROUS_URL_RE, "");
+}
+
+export function hasRemoteContent(html: string): boolean {
+  return (
+    REMOTE_RESOURCE_ATTRIBUTE_RE.test(html) ||
+    REMOTE_SRCSET_RE.test(html) ||
+    REMOTE_CSS_RE.test(html) ||
+    REMOTE_SVG_RESOURCE_RE.test(html)
+  );
+}
+
+function blockRemoteContent(html: string): string {
+  return html
+    .replace(
+      /\s+(src|background|poster)\s*=\s*(["'])\s*((?:https?:)?\/\/[\s\S]*?)\2/gi,
+      ' data-mail-remote-content="blocked"',
+    )
+    .replace(
+      /\s+(src|background|poster)\s*=\s*((?:https?:)?\/\/[^\s>]*)/gi,
+      ' data-mail-remote-content="blocked"',
+    )
+    .replace(
+      /\s+srcset\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]*)/gi,
+      (srcset) => (/(?:https?:)?\/\//i.test(srcset) ? "" : srcset),
+    )
+    .replace(
+      /<(?:image|use|feimage)\b[^>]*>/gi,
+      (tag) =>
+        tag.replace(
+          /\s+(?:href|xlink:href)\s*=\s*(?:"\s*(?:https?:)?\/\/[^"]*"|'\s*(?:https?:)?\/\/[^']*'|(?:https?:)?\/\/[^\s>]*)/gi,
+          ' data-mail-remote-content="blocked"',
+        ),
+    )
+    .replace(
+      /@import\s+(?:url\s*\()?[\s\S]*?;/gi,
+      "",
+    )
+    .replace(
+      /url\s*\(\s*(['"]?)\s*(?:https?:)?\/\/[\s\S]*?\1\s*\)/gi,
+      "none",
+    );
+}
+
 function linkifyHtmlText(html: string): string {
   let inAnchor = 0;
   return html.replace(
@@ -278,7 +348,7 @@ function resizeScript(
   adaptiveTheme?: EmailRenderTheme,
   colorMode: EmailColorMode = "system",
 ): string {
-  return `<script>(function(){
+  return `<script nonce="mail-reader">(function(){
   var lastH=0,lastW=0,raf=0,forceMeasure=false;
   ${adaptiveTheme ? darkThemeAdaptationScript(adaptiveTheme, colorMode) : ""}
   function repairOneSidedCenteredWrappers(){
@@ -387,11 +457,14 @@ export function prepareHtml(
     theme?: EmailRenderTheme;
     embeddedParts?: EmailBodyPart[];
     colorMode?: EmailColorMode;
+    allowRemoteContent?: boolean;
   },
 ): string {
   const theme = opts?.theme ?? defaultEmailRenderTheme;
   const colorMode = opts?.colorMode ?? "system";
+  html = stripActiveContentFallback(html);
   html = resolveEmbeddedImages(html, opts?.embeddedParts);
+  if (!opts?.allowRemoteContent) html = blockRemoteContent(html);
   html = unwrapGoogleUrlsInHtml(html);
   html = linkifyHtmlText(html);
 
@@ -426,7 +499,9 @@ export function prepareHtml(
     pre{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
     ${darkModeRules}
   </style>`;
-  const inject = `${viewport}${baseStyle}${resizeScript(!!opts?.stripQuotes, theme, colorMode)}`;
+  const contentSecurityPolicy =
+    '<meta http-equiv="Content-Security-Policy" content="default-src &apos;none&apos;; script-src &apos;nonce-mail-reader&apos;; img-src &apos;self&apos; data: http: https:; style-src &apos;unsafe-inline&apos;; font-src &apos;self&apos; data: http: https:; object-src &apos;none&apos;; frame-src &apos;none&apos;; form-action &apos;none&apos;; base-uri &apos;none&apos;">';
+  const inject = `${contentSecurityPolicy}${viewport}${baseStyle}${resizeScript(!!opts?.stripQuotes, theme, colorMode)}`;
 
   if (/<head[\s>]/i.test(html)) {
     return html.replace(/<head([^>]*)>/i, `<head$1>${inject}`);
diff --git a/src/lib/jmap.ts b/src/lib/jmap.ts
index b0502f9..9b52947 100644
--- a/src/lib/jmap.ts
+++ b/src/lib/jmap.ts
@@ -103,6 +103,8 @@ export interface MailPanelMailboxIds {
   drafts?: string;
   sent?: string;
   spam?: string;
+  archive?: string;
+  trash?: string;
 }
 
 export interface MailPanelData {
@@ -121,6 +123,18 @@ export interface MailPanelData {
     reads: Email[];
     readTotal: number;
   };
+  archive: {
+    unreads: Email[];
+    unreadTotal: number;
+    reads: Email[];
+    readTotal: number;
+  };
+  trash: {
+    unreads: Email[];
+    unreadTotal: number;
+    reads: Email[];
+    readTotal: number;
+  };
 }
 
 function mailboxQuery(
@@ -226,6 +240,26 @@ export function buildMailPanelMethodCalls(
       }),
     );
   }
+  if (mailboxIds.archive) {
+    calls.push(
+      ...mailboxQuery(accountId, mailboxIds.archive, "au", {
+        notKeyword: "$seen",
+      }),
+      ...mailboxQuery(accountId, mailboxIds.archive, "ar", {
+        hasKeyword: "$seen",
+      }),
+    );
+  }
+  if (mailboxIds.trash) {
+    calls.push(
+      ...mailboxQuery(accountId, mailboxIds.trash, "tu", {
+        notKeyword: "$seen",
+      }),
+      ...mailboxQuery(accountId, mailboxIds.trash, "tr", {
+        hasKeyword: "$seen",
+      }),
+    );
+  }
 
   return calls;
 }
@@ -275,6 +309,18 @@ export async function loadMailPanelData(
       reads: list("srg"),
       readTotal: total("srq"),
     },
+    archive: {
+      unreads: list("aug"),
+      unreadTotal: total("auq"),
+      reads: list("arg"),
+      readTotal: total("arq"),
+    },
+    trash: {
+      unreads: list("tug"),
+      unreadTotal: total("tuq"),
+      reads: list("trg"),
+      readTotal: total("trq"),
+    },
   };
 
   log.info(
@@ -576,6 +622,7 @@ export async function getEmail(
           "from",
           "to",
           "cc",
+          "bcc",
           "replyTo",
           "inReplyTo",
           "receivedAt",
@@ -622,7 +669,7 @@ export async function getThreadEmails(
         },
         properties: [
           "id", "messageId", "threadId", "mailboxIds",
-          "subject", "from", "to", "cc", "replyTo",
+          "subject", "from", "to", "cc", "bcc", "replyTo",
           "receivedAt", "preview", "keywords",
           "hasAttachment", "size",
           "htmlBody", "textBody", "attachments", "bodyValues",
@@ -811,17 +858,66 @@ export async function saveDraft(
     bcc: { name: string | null; email: string }[];
     subject: string;
     body: string;
+    htmlBody?: string;
+    inlineImages?: InlineImage[];
+    attachments?: { blobId: string; name: string; type: string }[];
     inReplyToId?: string;
   },
   existingDraftId?: string | null
 ): Promise<string> {
+  const textPart = { partId: "body", type: "text/plain" };
+  const contentPart = fields.htmlBody
+    ? {
+        type: "multipart/alternative",
+        subParts: [
+          textPart,
+          { partId: "html", type: "text/html" },
+        ],
+      }
+    : textPart;
+  const relatedPart =
+    fields.inlineImages && fields.inlineImages.length > 0
+      ? {
+          type: "multipart/related",
+          subParts: [
+            contentPart,
+            ...fields.inlineImages.map((image) => ({
+              type: image.type,
+              blobId: image.blobId,
+              cid: `${image.id}@mail`,
+              disposition: "inline",
+            })),
+          ],
+        }
+      : contentPart;
+  const bodyStructure =
+    fields.attachments && fields.attachments.length > 0
+      ? {
+          type: "multipart/mixed",
+          subParts: [
+            relatedPart,
+            ...fields.attachments.map((attachment) => ({
+              type: attachment.type,
+              blobId: attachment.blobId,
+              name: attachment.name,
+              disposition: "attachment",
+            })),
+          ],
+        }
+      : relatedPart;
+
   const draftEmail: Record<string, unknown> = {
     mailboxIds: { [draftsMailboxId]: true },
     keywords: { "$draft": true },
     from: [fields.from],
     subject: fields.subject || "(no subject)",
-    bodyStructure: { partId: "body", type: "text/plain" },
-    bodyValues: { body: { value: fields.body, charset: "utf-8" } },
+    bodyStructure,
+    bodyValues: {
+      body: { value: fields.body, charset: "utf-8" },
+      ...(fields.htmlBody
+        ? { html: { value: fields.htmlBody, charset: "utf-8" } }
+        : {}),
+    },
   };
   if (fields.to.length) draftEmail.to = fields.to;
   if (fields.cc.length) draftEmail.cc = fields.cc;
@@ -1187,6 +1283,75 @@ export async function moveEmailsToMailbox(
   await jmapCall(apiUrl, [["Email/set", { accountId, update }, "0"]]);
 }
 
+export async function getEmailMailboxIds(
+  apiUrl: string,
+  accountId: string,
+  emailIds: string[],
+): Promise<Array<Pick<Email, "id" | "mailboxIds">>> {
+  if (!emailIds.length) return [];
+  const data = await jmapCall(apiUrl, [
+    [
+      "Email/get",
+      {
+        accountId,
+        ids: emailIds,
+        properties: ["id", "mailboxIds"],
+      },
+      "0",
+    ],
+  ]);
+  const [, result] = data.methodResponses[0];
+  return (result.list as Array<Pick<Email, "id" | "mailboxIds">>) ?? [];
+}
+
+export async function destroyEmails(
+  apiUrl: string,
+  accountId: string,
+  emailIds: string[],
+): Promise<void> {
+  if (!emailIds.length) return;
+  const data = await jmapCall(apiUrl, [
+    ["Email/set", { accountId, destroy: emailIds }, "0"],
+  ]);
+  const [, result] = data.methodResponses[0];
+  const notDestroyed = result.notDestroyed as
+    | Record<string, unknown>
+    | undefined;
+  if (notDestroyed && Object.keys(notDestroyed).length > 0) {
+    throw new Error("Some messages could not be permanently deleted");
+  }
+}
+
+export async function destroyAllEmailsInMailbox(
+  apiUrl: string,
+  accountId: string,
+  mailboxId: string,
+): Promise<number> {
+  let destroyed = 0;
+
+  for (let page = 0; page < 200; page++) {
+    const data = await jmapCall(apiUrl, [
+      [
+        "Email/query",
+        {
+          accountId,
+          filter: { inMailbox: mailboxId },
+          limit: 250,
+          position: 0,
+        },
+        "0",
+      ],
+    ]);
+    const [, result] = data.methodResponses[0];
+    const ids = (result.ids as string[] | undefined) ?? [];
+    if (ids.length === 0) return destroyed;
+    await destroyEmails(apiUrl, accountId, ids);
+    destroyed += ids.length;
+  }
+
+  throw new Error("Trash could not be emptied completely");
+}
+
 // ---------------------------------------------------------------------------
 // Contacts search
 // ---------------------------------------------------------------------------
diff --git a/src/lib/printHtml.ts b/src/lib/printHtml.ts
index 4c60c1a..4d00065 100644
--- a/src/lib/printHtml.ts
+++ b/src/lib/printHtml.ts
@@ -1,7 +1,7 @@
 import { JSDOM } from "jsdom";
 import { Email } from "@/lib/types";
 
-const BLOCKED_TAGS = [
+const PRINT_BLOCKED_TAGS = [
   "applet",
   "base",
   "button",
@@ -22,6 +22,28 @@ const BLOCKED_TAGS = [
   "textarea",
 ];
 
+const READER_BLOCKED_TAGS = [
+  "applet",
+  "audio",
+  "base",
+  "button",
+  "embed",
+  "form",
+  "frame",
+  "frameset",
+  "iframe",
+  "input",
+  "link",
+  "meta",
+  "noscript",
+  "object",
+  "script",
+  "select",
+  "source",
+  "textarea",
+  "video",
+];
+
 const URL_ATTRIBUTES = new Set([
   "action",
   "formaction",
@@ -33,14 +55,20 @@ const URL_ATTRIBUTES = new Set([
 
 const SAFE_DATA_URL_RE = /^data:image\/(?:bmp|gif|jpeg|jpg|png|webp);base64,[a-z0-9+/=\s]+$/i;
 
-function sanitizeCss(css: string): string {
-  return css
+function sanitizeCss(css: string, removeUrls = true): string {
+  const sanitized = css
     .replace(/@import[\s\S]*?;/gi, "")
-    .replace(/url\s*\((?:[^)(]|\([^)(]*\))*\)/gi, "")
     .replace(/expression\s*\([^)]*\)/gi, "")
     .replace(/behavior\s*:[^;"}]+;?/gi, "")
-    .replace(/-moz-binding\s*:[^;"}]+;?/gi, "")
-    .trim();
+    .replace(/-moz-binding\s*:[^;"}]+;?/gi, "");
+
+  return (removeUrls
+    ? sanitized.replace(/url\s*\((?:[^)(]|\([^)(]*\))*\)/gi, "")
+    : sanitized.replace(
+        /url\s*\(\s*(['"]?)\s*(?:javascript|vbscript):[\s\S]*?\1\s*\)/gi,
+        "none",
+      )
+  ).trim();
 }
 
 function sanitizeUrl(value: string): string | null {
@@ -74,24 +102,34 @@ function sanitizeUrl(value: string): string | null {
  * Server-side HTML sanitizer for print views.
  * Parses untrusted email HTML, removes active content, and strips dangerous URL/CSS vectors.
  */
-export function sanitizeHtml(html: string): string {
+function sanitizeDocument(
+  html: string,
+  blockedTags: string[],
+  removeCssUrls: boolean,
+): string {
   const dom = new JSDOM(html);
   const { document } = dom.window;
 
-  for (const tag of BLOCKED_TAGS) {
+  for (const tag of blockedTags) {
     document.querySelectorAll(tag).forEach((element) => element.remove());
   }
 
   document.querySelectorAll("*").forEach((element) => {
     for (const attr of Array.from(element.attributes)) {
       const name = attr.name.toLowerCase();
-      if (name.startsWith("on") || name === "srcdoc" || name === "srcset") {
+      if (
+        name.startsWith("on") ||
+        name === "srcdoc" ||
+        name === "srcset" ||
+        name === "ping" ||
+        name === "nonce"
+      ) {
         element.removeAttribute(attr.name);
         continue;
       }
 
       if (name === "style") {
-        const sanitizedStyle = sanitizeCss(attr.value);
+        const sanitizedStyle = sanitizeCss(attr.value, removeCssUrls);
         if (sanitizedStyle) {
           element.setAttribute("style", sanitizedStyle);
         } else {
@@ -114,12 +152,30 @@ export function sanitizeHtml(html: string): string {
   return document.documentElement.outerHTML;
 }
 
+/**
+ * Server-side HTML sanitizer for print views.
+ * Parses untrusted email HTML, removes active content, and strips dangerous URL/CSS vectors.
+ */
+export function sanitizeHtml(html: string): string {
+  return sanitizeDocument(html, PRINT_BLOCKED_TAGS, true);
+}
+
+/**
+ * Sanitizer for the interactive reader. It keeps inert authored styles and
+ * image URLs so the client can offer an explicit "load remote images" choice,
+ * while removing executable elements, handlers, forms, frames, and unsafe
+ * URL schemes before the HTML crosses the server/client boundary.
+ */
+export function sanitizeReaderHtml(html: string): string {
+  return sanitizeDocument(html, READER_BLOCKED_TAGS, false);
+}
+
 export function extractStyles(html: string): string {
   const out: string[] = [];
   const re = /<style[^>]*>([\s\S]*?)<\/style>/gi;
   let m;
   while ((m = re.exec(html)) !== null) out.push(m[1]);
-  return sanitizeCss(out.join("\n"));
+  return sanitizeCss(out.join("\n"), true);
 }
 
 export function extractBodyContent(html: string): string {
diff --git a/src/lib/types.ts b/src/lib/types.ts
index e03b562..91429cf 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -42,6 +42,7 @@ export interface Email {
   from: EmailAddress[] | null;
   to: EmailAddress[] | null;
   cc: EmailAddress[] | null;
+  bcc?: EmailAddress[] | null;
   replyTo: EmailAddress[] | null;
   inReplyTo: string[] | null;
   receivedAt: string;
diff --git a/tests/smoke/mail.spec.ts b/tests/smoke/mail.spec.ts
index 6a9c961..67f0dec 100644
--- a/tests/smoke/mail.spec.ts
+++ b/tests/smoke/mail.spec.ts
@@ -186,6 +186,37 @@ test("darkens neutral email canvases while preserving image artwork", async ({
   );
 });
 
+test("blocks remote email images until the reader explicitly allows them", async ({
+  page,
+}) => {
+  let remoteRequests = 0;
+  await page.route(
+    "https://images.example.test/tracking-pixel.png",
+    async (route) => {
+      remoteRequests += 1;
+      await route.fulfill({
+        status: 200,
+        contentType: "image/png",
+        body: Buffer.from(
+          "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
+          "base64",
+        ),
+      });
+    },
+  );
+
+  await page.goto("/smoke-tests?panel=reader-privacy");
+  await expect(
+    page.getByText("Remote images are blocked for privacy."),
+  ).toBeVisible();
+  await page.waitForTimeout(200);
+  expect(remoteRequests).toBe(0);
+
+  await page.getByRole("button", { name: "Load images" }).click();
+  await expect.poll(() => remoteRequests).toBe(1);
+  await expect(page.getByRole("button", { name: "Load images" })).toHaveCount(0);
+});
+
 test("aligns message actions at the iPhone 15 Pro viewport", async ({
   page,
 }) => {
-- 
2.51.2