diff --git a/.dockerignore b/.dockerignore
index 771c8d7d..509fe74a 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -9,3 +9,8 @@ scripts/
 TODO.md
 *.md
 !README.md
+# Sibling projects / test harness - not part of the webmail image
+examples/
+integration/
+e2e/
+**/node_modules
diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
index a8af157f..34d9f94a 100644
--- a/app/(main)/layout.tsx
+++ b/app/(main)/layout.tsx
@@ -4,6 +4,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import { headers } from "next/headers";
 import { getLocale, getTranslations } from "next-intl/server";
 import { ServiceWorkerRegistration } from "@/components/service-worker-registration";
+import { FaviconBadge } from "@/components/favicon-badge";
 import { configManager } from "@/lib/admin/config-manager";
 import {
   matchDomainBranding,
@@ -132,6 +133,7 @@ export default async function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <ServiceWorkerRegistration />
+        <FaviconBadge />
         {children}
       </body>
     </html>
diff --git a/components/__tests__/favicon-badge.test.tsx b/components/__tests__/favicon-badge.test.tsx
new file mode 100644
index 00000000..5524c01c
--- /dev/null
+++ b/components/__tests__/favicon-badge.test.tsx
@@ -0,0 +1,98 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import { FaviconBadge } from '@/components/favicon-badge';
+import { useFaviconBadge } from '@/hooks/use-favicon-badge';
+import { useEmailStore } from '@/stores/email-store';
+import { useSettingsStore } from '@/stores/settings-store';
+import type { Mailbox } from '@/lib/jmap/types';
+
+vi.mock('@/hooks/use-favicon-badge', () => ({
+  useFaviconBadge: vi.fn(),
+}));
+
+const useFaviconBadgeMock = vi.mocked(useFaviconBadge);
+
+function mailbox(patch: Partial<Mailbox> & { id: string }): Mailbox {
+  return {
+    name: patch.id,
+    sortOrder: 0,
+    totalEmails: 0,
+    unreadEmails: 0,
+    totalThreads: 0,
+    unreadThreads: 0,
+    isSubscribed: true,
+    myRights: {
+      mayReadItems: true,
+      mayAddItems: true,
+      mayRemoveItems: true,
+      maySetSeen: true,
+      maySetKeywords: true,
+      mayCreateChild: true,
+      mayRename: true,
+      mayDelete: true,
+      maySubmit: true,
+    },
+    ...patch,
+  } as Mailbox;
+}
+
+const initialMailboxes = useEmailStore.getState().mailboxes;
+
+beforeEach(() => {
+  useEmailStore.setState({ mailboxes: initialMailboxes });
+  useSettingsStore.setState({ faviconUnreadBadge: true });
+});
+
+afterEach(() => {
+  useEmailStore.setState({ mailboxes: initialMailboxes });
+  useSettingsStore.setState({ faviconUnreadBadge: true });
+  vi.clearAllMocks();
+});
+
+describe('FaviconBadge', () => {
+  it('badges the unread count of the primary inbox', () => {
+    useEmailStore.setState({
+      mailboxes: [mailbox({ id: 'inbox', role: 'inbox', unreadEmails: 7 })],
+    });
+
+    const { container } = render(<FaviconBadge />);
+
+    expect(useFaviconBadgeMock).toHaveBeenCalledWith(7, true);
+    expect(container.firstChild).toBeNull(); // renders no markup
+  });
+
+  it('disables the badge when the setting is off', () => {
+    useSettingsStore.setState({ faviconUnreadBadge: false });
+    useEmailStore.setState({
+      mailboxes: [mailbox({ id: 'inbox', role: 'inbox', unreadEmails: 7 })],
+    });
+
+    render(<FaviconBadge />);
+
+    expect(useFaviconBadgeMock).toHaveBeenCalledWith(7, false);
+  });
+
+  it('ignores a shared inbox, even when it sorts first', () => {
+    // Shared and group inboxes ship in the same `mailboxes` array. A plain
+    // `role === 'inbox'` lookup would badge somebody else's inbox on a
+    // delegated setup, so the store's canonical `!isShared` filter is required.
+    useEmailStore.setState({
+      mailboxes: [
+        mailbox({ id: 'shared', role: 'inbox', isShared: true, unreadEmails: 99 }),
+        mailbox({ id: 'mine', role: 'inbox', unreadEmails: 4 }),
+      ],
+    });
+
+    render(<FaviconBadge />);
+
+    expect(useFaviconBadgeMock).toHaveBeenCalledWith(4, true);
+  });
+
+  it('badges zero when there is no inbox yet', () => {
+    useEmailStore.setState({ mailboxes: [] });
+
+    render(<FaviconBadge />);
+
+    expect(useFaviconBadgeMock).toHaveBeenCalledWith(0, true);
+  });
+});
diff --git a/components/email/__tests__/recipient-chip-drag.test.tsx b/components/email/__tests__/recipient-chip-drag.test.tsx
index 461b4452..f3138b38 100644
--- a/components/email/__tests__/recipient-chip-drag.test.tsx
+++ b/components/email/__tests__/recipient-chip-drag.test.tsx
@@ -148,7 +148,10 @@ vi.mock('@/lib/email-sanitization', () => ({
   parseHtmlSafely: (html: string) => new DOMParser().parseFromString(html, 'text/html'),
 }));
 
-vi.mock('@/lib/reply-identity', () => ({ resolveReplyFrom: () => null }));
+vi.mock('@/lib/reply-identity', () => ({
+  resolveReplyFrom: () => null,
+  findComposeIdentityId: () => null,
+}));
 vi.mock('@/lib/email-threading', () => ({
   computeReplyThreadingHeaders: () => ({ inReplyTo: [], references: [] }),
 }));
@@ -227,7 +230,7 @@ describe('RecipientChipInput drag and drop', () => {
     fireEvent.dragStart(chipSpan, { dataTransfer: dt });
 
     const payload = JSON.parse(dt.getData('application/x-recipient-chip'));
-    expect(payload).toEqual({ recipient: { email: 'alice@example.com' }, fromField: 'to' });
+    expect(payload).toEqual({ recipient: { email: 'alice@example.com' }, fromField: 'to', fromIndex: 0 });
   });
 
   it('keeps a display name with a comma in a single chip (array model)', async () => {
@@ -241,7 +244,7 @@ describe('RecipientChipInput drag and drop', () => {
     const dt = new MockDataTransfer();
     fireEvent.dragStart(chipSpan, { dataTransfer: dt });
     const payload = JSON.parse(dt.getData('application/x-recipient-chip'));
-    expect(payload).toEqual({ recipient: { name: 'Doo, John', email: 'john@doo.org' }, fromField: 'to' });
+    expect(payload).toEqual({ recipient: { name: 'Doo, John', email: 'john@doo.org' }, fromField: 'to', fromIndex: 0 });
   });
 
   it('onDragEnd clears the opacity class on the chip', async () => {
@@ -340,4 +343,121 @@ describe('RecipientChipInput drag and drop', () => {
     const ccLabel = await screen.findByText('cc_label');
     expect(ccLabel).toBeInTheDocument();
   });
+
+  // ─── Reordering within / across fields (#593) ─────────────────────────────────
+  // jsdom ignores `clientX` in fireEvent's init for drag events (it's a
+  // read-only MouseEvent getter) and gives every element a zero-size rect at
+  // (0,0). So we dispatch events with `clientX` forced via defineProperty; with
+  // the rect midpoint at 0, clientX>0 lands AFTER the hovered chip, <0 BEFORE.
+
+  const THREE = { ...BASE_DATA, to: 'alice@example.com, bob@example.com, carol@example.com, ' };
+
+  const chipByText = async (text: string) =>
+    (await screen.findByText(text)).closest('[draggable]') as HTMLElement;
+
+  /** Dispatch a drag event with a real clientX (fireEvent init drops it). */
+  const fireDnd = (type: 'dragover' | 'drop', el: HTMLElement, dt: MockDataTransfer, clientX: number) => {
+    const e = new Event(type, { bubbles: true, cancelable: true });
+    Object.defineProperty(e, 'clientX', { value: clientX });
+    Object.defineProperty(e, 'dataTransfer', { value: dt });
+    act(() => { fireEvent(el, e); });
+  };
+  const BEFORE = -100;
+  const AFTER = 100;
+
+  /** Ordered chip labels of the field-container that holds `anchorText`. */
+  const orderIn = (anchorText: string) => {
+    const containers = Array.from(document.querySelectorAll('[class*="flex-wrap"]'));
+    const c = containers.find(el =>
+      Array.from(el.querySelectorAll('[draggable]')).some(d => d.textContent?.includes(anchorText))
+    ) as HTMLElement;
+    return Array.from(c.querySelectorAll('[draggable]')).map(el => el.textContent?.trim() ?? '');
+  };
+
+  /** All draggable chips (across fields) whose label contains `text`. */
+  const draggableChipsWith = (text: string) =>
+    Array.from(document.querySelectorAll('[draggable]')).filter(el => el.textContent?.includes(text));
+
+  it('reorders a chip to the end of the same field (drop after the last chip)', async () => {
+    render(<EmailComposer initialData={THREE} />);
+    await screen.findByText('alice@example.com');
+    const alice = await chipByText('alice@example.com');
+    const carol = await chipByText('carol@example.com');
+
+    const dt = new MockDataTransfer();
+    fireEvent.dragStart(alice, { dataTransfer: dt });   // fromIndex 0
+    fireDnd('dragover', carol, dt, AFTER);              // after carol -> index 3
+    fireDnd('drop', carol, dt, AFTER);
+
+    expect(orderIn('bob@example.com')).toEqual([
+      'bob@example.com', 'carol@example.com', 'alice@example.com',
+    ]);
+  });
+
+  it('reorders a chip to the front of the same field (drop before the first chip)', async () => {
+    render(<EmailComposer initialData={THREE} />);
+    await screen.findByText('carol@example.com');
+    const carol = await chipByText('carol@example.com');
+    const alice = await chipByText('alice@example.com');
+
+    const dt = new MockDataTransfer();
+    fireEvent.dragStart(carol, { dataTransfer: dt });   // fromIndex 2
+    fireDnd('dragover', alice, dt, BEFORE);             // before alice -> index 0
+    fireDnd('drop', alice, dt, BEFORE);
+
+    expect(orderIn('alice@example.com')).toEqual([
+      'carol@example.com', 'alice@example.com', 'bob@example.com',
+    ]);
+  });
+
+  it('dropping a chip onto its own position leaves the order unchanged', async () => {
+    render(<EmailComposer initialData={THREE} />);
+    await screen.findByText('bob@example.com');
+    const bob = await chipByText('bob@example.com');
+
+    const dt = new MockDataTransfer();
+    fireEvent.dragStart(bob, { dataTransfer: dt });     // fromIndex 1
+    fireDnd('dragover', bob, dt, BEFORE);               // before itself -> index 1 (no-op)
+    fireDnd('drop', bob, dt, BEFORE);
+
+    expect(orderIn('bob@example.com')).toEqual([
+      'alice@example.com', 'bob@example.com', 'carol@example.com',
+    ]);
+  });
+
+  it('moves a chip into another field at the drop position (cross-field reorder)', async () => {
+    render(<EmailComposer initialData={{ ...BASE_DATA, to: 'alice@example.com, ', cc: 'x@example.com, y@example.com, ' }} />);
+    await screen.findByText('alice@example.com');
+    const alice = await chipByText('alice@example.com');       // To
+    const y = await chipByText('y@example.com');               // Cc
+
+    const dt = new MockDataTransfer();
+    fireEvent.dragStart(alice, { dataTransfer: dt });
+    fireDnd('dragover', y, dt, BEFORE);               // before y -> index 1 in Cc
+    fireDnd('drop', y, dt, BEFORE);
+
+    // alice lands between x and y; To no longer holds it (count only real chips,
+    // not the leftover jsdom drag-preview element)
+    expect(orderIn('x@example.com')).toEqual([
+      'x@example.com', 'alice@example.com', 'y@example.com',
+    ]);
+    expect(draggableChipsWith('alice@example.com')).toHaveLength(1);
+  });
+
+  it('shows a drop caret only while a chip is dragged over the field', async () => {
+    render(<EmailComposer initialData={THREE} />);
+    await screen.findByText('alice@example.com');
+    const alice = await chipByText('alice@example.com');
+    const bob = await chipByText('bob@example.com');
+
+    const dt = new MockDataTransfer();
+    fireEvent.dragStart(alice, { dataTransfer: dt });
+    expect(document.querySelector('[data-testid="recipient-drop-caret"]')).toBeNull();
+
+    fireDnd('dragover', bob, dt, BEFORE);
+    expect(document.querySelector('[data-testid="recipient-drop-caret"]')).not.toBeNull();
+
+    fireEvent.dragEnd(alice);
+    expect(document.querySelector('[data-testid="recipient-drop-caret"]')).toBeNull();
+  });
 });
diff --git a/components/email/__tests__/recipient-paste.test.tsx b/components/email/__tests__/recipient-paste.test.tsx
index 1a3ccef6..a8d4d15c 100644
--- a/components/email/__tests__/recipient-paste.test.tsx
+++ b/components/email/__tests__/recipient-paste.test.tsx
@@ -147,7 +147,10 @@ vi.mock('@/lib/email-sanitization', () => ({
   parseHtmlSafely: (html: string) => new DOMParser().parseFromString(html, 'text/html'),
 }));
 
-vi.mock('@/lib/reply-identity', () => ({ resolveReplyFrom: () => null }));
+vi.mock('@/lib/reply-identity', () => ({
+  resolveReplyFrom: () => null,
+  findComposeIdentityId: () => null,
+}));
 vi.mock('@/lib/email-threading', () => ({
   computeReplyThreadingHeaders: () => ({ inReplyTo: [], references: [] }),
 }));
diff --git a/components/email/email-composer.tsx b/components/email/email-composer.tsx
index 4e022d29..ae937fc5 100644
--- a/components/email/email-composer.tsx
+++ b/components/email/email-composer.tsx
@@ -11,7 +11,7 @@ import { debug } from "@/lib/debug";
 import { toast } from "@/stores/toast-store";
 import { useContextMenu } from "@/hooks/use-context-menu";
 import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from "@/components/ui/context-menu";
-import { sanitizeSignatureHtml, sanitizeEmailHtml, escapeHtml } from "@/lib/email-sanitization";
+import { sanitizeSignatureHtml, sanitizeSignatureHtmlForDisplay, sanitizeEmailHtml, escapeHtml } from "@/lib/email-sanitization";
 import { buildReplySubject, buildForwardSubject } from "@/lib/subject-prefix";
 import { isFilePreviewable } from "@/lib/file-preview";
 import { buildQuotedHtmlBlock, serializeEditorContent } from "@/components/email/quoted-html";
@@ -823,7 +823,7 @@ export function EmailComposer({
   }, [composerClient, plainTextMode, mode]);
 
   const composerSignatureHtml = signatureIdentity?.htmlSignature
-    ? `<div>${sanitizeSignatureHtml(signatureIdentity.htmlSignature)}</div>`
+    ? `<div>${sanitizeSignatureHtmlForDisplay(signatureIdentity.htmlSignature)}</div>`
     : signatureIdentity?.textSignature
       ? `<div>${getPlainTextSignature(signatureIdentity).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</div>`
       : '';
@@ -936,7 +936,10 @@ export function EmailComposer({
     }
   }, [plainTextMode]);
 
-  const handleMoveChip = useCallback((recipient: Recipient, fromField: 'to' | 'cc' | 'bcc', toField: 'to' | 'cc' | 'bcc') => {
+  // Move a chip from one recipient field to another. `toIndex`, when given,
+  // inserts at that position in the destination (drag-and-drop reordering,
+  // #593); omitted, it appends (e.g. dropping onto a hidden Cc/Bcc button).
+  const handleMoveChip = useCallback((recipient: Recipient, fromField: 'to' | 'cc' | 'bcc', toField: 'to' | 'cc' | 'bcc', toIndex?: number) => {
     if (fromField === toField) return;
     const setters = { to: setTo, cc: setCc, bcc: setBcc };
     const groupKey = (r: Recipient) => r.group ? r.group.members.map(m => m.email.toLowerCase()).join(',') : '';
@@ -946,7 +949,13 @@ export function EmailComposer({
       const idx = prev.findIndex(r => sameRecipient(r, recipient));
       return idx === -1 ? prev : prev.filter((_, i) => i !== idx);
     });
-    setters[toField](prev => prev.some(r => sameRecipient(r, recipient)) ? prev : [...prev, recipient]);
+    setters[toField](prev => {
+      if (prev.some(r => sameRecipient(r, recipient))) return prev;
+      const at = toIndex == null ? prev.length : Math.max(0, Math.min(toIndex, prev.length));
+      const next = [...prev];
+      next.splice(at, 0, recipient);
+      return next;
+    });
     if (toField === 'cc') setShowCc(true);
     if (toField === 'bcc') setShowBcc(true);
   }, [setTo, setCc, setBcc, setShowCc, setShowBcc]);
@@ -2041,7 +2050,7 @@ export function EmailComposer({
   };
 
   return (
-    <div ref={composerRootRef} className={cn("flex h-full bg-background", className)}>
+    <div ref={composerRootRef} data-testid="email-composer" className={cn("flex h-full bg-background", className)}>
       <PluginSlot
         name="composer-sidebar"
         className="hidden md:flex shrink-0 h-full overflow-hidden border-e border-border"
@@ -2099,6 +2108,7 @@ export function EmailComposer({
           disabled={!canSend || isSending}
           title={getSendTooltip()}
           size="sm"
+          data-testid="composer-send"
           className="md:hidden h-9 px-4"
         >
           <Send className="w-4 h-4 me-1.5" />
@@ -2133,6 +2143,7 @@ export function EmailComposer({
                 </div>
               ) : identities.length > 1 ? (
                 <select
+                  data-testid="composer-from"
                   value={selectedIdentityId || primaryIdentity?.id || ''}
                   onChange={(e) => setSelectedIdentityId(e.target.value)}
                   className="flex-1 bg-transparent text-sm text-foreground outline-none cursor-pointer hover:text-muted-foreground transition-colors min-w-0 truncate"
@@ -2164,7 +2175,7 @@ export function EmailComposer({
                       })}
                 </select>
               ) : (
-                <span className="text-sm text-foreground flex-1 truncate">
+                <span data-testid="composer-from" className="text-sm text-foreground flex-1 truncate">
                   {subAddressTag ? (
                     <span className="font-mono">
                       {generateSubAddress(primaryIdentity?.email || '', subAddressTag, subAddressDelimiter)}
@@ -2227,7 +2238,7 @@ export function EmailComposer({
           </div>
 
           {/* To field */}
-          <div className={cn("flex items-center gap-2 px-4 py-2.5 border-b border-border/50 relative", shakeField === 'to' && "animate-shake")}>
+          <div data-testid="composer-to" className={cn("flex items-center gap-2 px-4 py-2.5 border-b border-border/50 relative", shakeField === 'to' && "animate-shake")}>
             <span className="text-sm text-muted-foreground w-12 md:w-16 shrink-0">{t('to')}:</span>
             <RecipientChipInput
               chips={to}
@@ -2372,6 +2383,7 @@ export function EmailComposer({
             <span className="text-sm text-muted-foreground w-12 md:w-16 shrink-0">{t('subject_label')}</span>
             <Input
               ref={subjectInputRef}
+              data-testid="composer-subject"
               type="text"
               placeholder={t('subject_placeholder')}
               value={subject}
@@ -2594,6 +2606,7 @@ export function EmailComposer({
                   onClick={() => handleSend()}
                   disabled={!canSend || isSending}
                   title={getSendTooltip()}
+                  data-testid="composer-send"
                   className="rounded-e-none border-e border-primary-foreground/20"
                 >
                   <Send className="w-4 h-4 me-2" />
@@ -2632,6 +2645,7 @@ export function EmailComposer({
                 onClick={() => handleSend()}
                 disabled={!canSend || isSending}
                 title={getSendTooltip()}
+                data-testid="composer-send"
                 className="hidden md:inline-flex"
               >
                 <Send className="w-4 h-4 me-2" />
@@ -2895,7 +2909,7 @@ function RecipientChipInput({
   validationError?: boolean;
   validationMessage?: string;
   onTab?: () => void;
-  onMoveChip: (recipient: Recipient, fromField: 'to' | 'cc' | 'bcc', toField: 'to' | 'cc' | 'bcc') => void;
+  onMoveChip: (recipient: Recipient, fromField: 'to' | 'cc' | 'bcc', toField: 'to' | 'cc' | 'bcc', toIndex?: number) => void;
 }) {
   const t = useTranslations('email_composer');
   const tCommon = useTranslations('common');
@@ -2904,6 +2918,9 @@ function RecipientChipInput({
   const [editValue, setEditValue] = useState('');
   const [isDragOver, setIsDragOver] = useState(false);
   const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
+  // Gap (0..chips.length) a dragged chip would drop into; drives the insertion
+  // caret and positional drop for reordering (#593). null when not dragging.
+  const [dropIndex, setDropIndex] = useState<number | null>(null);
   const editInputRef = useRef<HTMLInputElement | null>(null);
 
   // Focus edit input when editing starts
@@ -3060,27 +3077,81 @@ function RecipientChipInput({
     onAutoBlur(e, field);
   };
 
+  const isChipDrag = (e: React.DragEvent) =>
+    e.dataTransfer.types.includes('application/x-recipient-chip');
+
+  // Dragging over empty container space (past the last chip / over the input)
+  // targets the end of the list.
   const handleContainerDragOver = (e: React.DragEvent) => {
-    if (!e.dataTransfer.types.includes('application/x-recipient-chip')) return;
+    if (!isChipDrag(e)) return;
     e.preventDefault();
     e.dataTransfer.dropEffect = 'move';
     setIsDragOver(true);
+    setDropIndex(chips.length);
   };
 
   const handleContainerDragLeave = (e: React.DragEvent) => {
     if (!e.currentTarget.contains(e.relatedTarget as Node)) {
       setIsDragOver(false);
+      setDropIndex(null);
+    }
+  };
+
+  // Dragging over a chip picks the gap before or after it based on which half
+  // the pointer is in (mirrored for RTL). stopPropagation keeps the container
+  // handler from overriding this finer target.
+  const handleChipDragOver = (e: React.DragEvent, index: number) => {
+    if (!isChipDrag(e)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.dropEffect = 'move';
+    const rect = e.currentTarget.getBoundingClientRect();
+    const rtl = typeof window !== 'undefined' &&
+      getComputedStyle(e.currentTarget as Element).direction === 'rtl';
+    const past = rtl
+      ? e.clientX < rect.left + rect.width / 2
+      : e.clientX > rect.left + rect.width / 2;
+    setIsDragOver(true);
+    setDropIndex(past ? index + 1 : index);
+  };
+
+  // Insert the dragged chip at `target`. Same-field is a local reorder;
+  // cross-field routes through onMoveChip with the destination index (#593).
+  const performDrop = (e: React.DragEvent, target: number) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    setDropIndex(null);
+    setDraggingIndex(null);
+    const raw = e.dataTransfer.getData('application/x-recipient-chip');
+    if (!raw) return;
+    let payload: { recipient: Recipient; fromField: 'to' | 'cc' | 'bcc'; fromIndex?: number };
+    try {
+      payload = JSON.parse(raw);
+    } catch {
+      return;
+    }
+    const { recipient, fromField, fromIndex } = payload;
+    const to = Math.max(0, Math.min(target, chips.length));
+
+    if (fromField === field) {
+      const from = typeof fromIndex === 'number'
+        ? fromIndex
+        : chips.findIndex(c => c.email === recipient.email && (c.name ?? '') === (recipient.name ?? ''));
+      if (from < 0 || from >= chips.length) return;
+      // Removing the source before `to` shifts the target left by one.
+      const insertAt = to > from ? to - 1 : to;
+      if (insertAt === from) return; // dropped onto its own position
+      const next = [...chips];
+      const [moved] = next.splice(from, 1);
+      next.splice(insertAt, 0, moved);
+      onChipsChange(next);
+    } else {
+      onMoveChip(recipient, fromField, field, to);
     }
   };
 
   const handleContainerDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragOver(false);
-    const raw = e.dataTransfer.getData('application/x-recipient-chip');
-    if (!raw) return;
-    const { recipient, fromField } = JSON.parse(raw) as { recipient: Recipient; fromField: 'to' | 'cc' | 'bcc' };
-    if (fromField === field) return;
-    onMoveChip(recipient, fromField, field);
+    performDrop(e, dropIndex ?? chips.length);
   };
 
   return (
@@ -3100,20 +3171,29 @@ function RecipientChipInput({
           const isEditing = editingChip?.index === i;
           const chipDisplay = formatChipDisplay(chip);
           return (
+            <React.Fragment key={`${chip.email}-${i}`}>
+            {dropIndex === i && (
+              <span
+                aria-hidden
+                data-testid="recipient-drop-caret"
+                className="w-0.5 self-stretch min-h-[20px] rounded-full bg-primary pointer-events-none"
+              />
+            )}
             <span
-              key={`${chip.email}-${i}`}
               draggable={!isEditing}
               onDragStart={(e) => {
                 e.stopPropagation();
                 e.dataTransfer.effectAllowed = 'move';
-                e.dataTransfer.setData('application/x-recipient-chip', JSON.stringify({ recipient: chip, fromField: field }));
+                e.dataTransfer.setData('application/x-recipient-chip', JSON.stringify({ recipient: chip, fromField: field, fromIndex: i }));
                 // Show the address while dragging, matching the email-list drag preview.
                 const dragPreview = createChipDragPreview(chip.group ? chipDisplay : chip.email);
                 e.dataTransfer.setDragImage(dragPreview, 0, 0);
                 requestAnimationFrame(() => dragPreview.remove());
                 setDraggingIndex(i);
               }}
-              onDragEnd={() => setDraggingIndex(null)}
+              onDragEnd={() => { setDraggingIndex(null); setDropIndex(null); }}
+              onDragOver={(e) => handleChipDragOver(e, i)}
+              onDrop={(e) => { e.stopPropagation(); performDrop(e, dropIndex ?? i); }}
               className={cn(
                 "inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-sm border border-border transition-colors",
                 isEditing
@@ -3179,8 +3259,16 @@ function RecipientChipInput({
                 )}
               </button>
             </span>
+            </React.Fragment>
           );
         })}
+        {dropIndex === chips.length && chips.length > 0 && (
+          <span
+            aria-hidden
+            data-testid="recipient-drop-caret"
+            className="w-0.5 self-stretch min-h-[20px] rounded-full bg-primary pointer-events-none"
+          />
+        )}
         {!editingChip && (
           <input
             ref={inputRef}
diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index 8d179a3f..b58892bf 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -1175,6 +1175,7 @@ export function EmailViewer({
           id: email.id,
           contentType,
           bodyStructure: email.bodyStructure,
+          bodyValues: email.bodyValues,
           attachments: email.attachments,
           blobId: email.blobId,
           from: email.from,
diff --git a/components/email/quoted-html.ts b/components/email/quoted-html.ts
index edd5b44b..0350e679 100644
--- a/components/email/quoted-html.ts
+++ b/components/email/quoted-html.ts
@@ -10,6 +10,10 @@ import { buildSignatureBlock } from "@/components/email/signature-block";
 // HTML, so parseHTML can recognise it on the way back in.
 export const QUOTED_HTML_MARKER = "data-quoted-html";
 
+// Reusable style for the quote bar when quoting email text (like in a reply).
+const QUOTE_BAR_STYLE =
+  "border-left:2px solid #c5c5c5;padding-left:12px;margin-top:8px;";
+
 /**
  * QuotedHtml — an atomic block node that carries the *verbatim* HTML of a
  * quoted/forwarded original email. The HTML is stored in the `html` attribute
@@ -68,8 +72,7 @@ export const QuotedHtml = TiptapNode.create({
       const dom = document.createElement("div");
       dom.setAttribute(QUOTED_HTML_MARKER, "");
       dom.className = "quoted-html-island";
-      dom.style.cssText =
-        "border-left:2px solid #c5c5c5;padding-left:12px;margin-top:8px;";
+      dom.style.cssText = QUOTE_BAR_STYLE;
 
       // CRITICAL: render the quoted email inside a Shadow Root. The app's
       // global CSS (Tailwind preflight, .tiptap table/td rules, box-sizing
@@ -192,5 +195,5 @@ export function serializeEditorContent(editor: Editor): string {
  * must be what serializeEditorContent emits too (round-trip consistency).
  */
 export function buildQuotedHtmlBlock(sanitizedInnerHtml: string): string {
-  return `<div ${QUOTED_HTML_MARKER}>${sanitizedInnerHtml}</div>`;
+  return `<div ${QUOTED_HTML_MARKER} style="${QUOTE_BAR_STYLE}">${sanitizedInnerHtml}</div>`;
 }
diff --git a/components/email/rich-text-editor.tsx b/components/email/rich-text-editor.tsx
index 28da13a6..f59704d4 100644
--- a/components/email/rich-text-editor.tsx
+++ b/components/email/rich-text-editor.tsx
@@ -41,6 +41,7 @@ import {
   Heading1,
   Heading2,
   Table as TableIcon,
+  Baseline,
   Trash2,
   Rows3,
   Columns3,
@@ -143,6 +144,14 @@ function ToolbarSeparator() {
 const TABLE_PICKER_ROWS = 6;
 const TABLE_PICKER_COLS = 8;
 
+// Preset text colours (2 x 8). Inline `style="color: …"` survives email
+// round-trips; the TextStyle/Color extensions are already registered to
+// preserve pasted colours - this palette just adds a UI to set them.
+const TEXT_COLORS = [
+  "#000000", "#5f6368", "#9aa0a6", "#c5221f", "#e8710a", "#f9ab00", "#188038", "#1967d2",
+  "#7627bb", "#c2185b", "#795548", "#fa5252", "#fd7e14", "#40c057", "#4dabf7", "#e64980",
+];
+
 function TableSizePicker({ onPick }: { onPick: (rows: number, cols: number) => void }) {
   const [hover, setHover] = useState<{ r: number; c: number } | null>(null);
   return (
@@ -336,6 +345,19 @@ export function RichTextEditor({
 
   const [tableMenuOpen, setTableMenuOpen] = useState(false);
   const tableWrapperRef = useRef<HTMLDivElement>(null);
+  const [colorMenuOpen, setColorMenuOpen] = useState(false);
+  const colorWrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!colorMenuOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (colorWrapperRef.current && !colorWrapperRef.current.contains(e.target as Node)) {
+        setColorMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [colorMenuOpen]);
 
   useEffect(() => {
     if (!tableMenuOpen) return;
@@ -386,6 +408,49 @@ export function RichTextEditor({
         >
           <Strikethrough className="w-4 h-4" />
         </ToolbarButton>
+        <div ref={colorWrapperRef} className="relative">
+          <ToolbarButton
+            active={!!editor.getAttributes("textStyle").color}
+            onClick={() => setColorMenuOpen((v) => !v)}
+            title="Text color"
+          >
+            {/* The icon itself previews the active colour - no layout shift. */}
+            <Baseline className="w-4 h-4" style={{ color: editor.getAttributes("textStyle").color || undefined }} />
+          </ToolbarButton>
+          {colorMenuOpen && (
+            <div className="absolute z-50 top-full left-0 mt-1 bg-popover border border-border rounded-md shadow-md p-2">
+              <div className="grid gap-0.5" style={{ gridTemplateColumns: "repeat(8, 1fr)" }}>
+                {TEXT_COLORS.map((color) => (
+                  <button
+                    key={color}
+                    type="button"
+                    title={color}
+                    onClick={() => {
+                      editor.chain().focus().setColor(color).run();
+                      setColorMenuOpen(false);
+                    }}
+                    className={cn(
+                      "w-4 h-4 border border-border/60 rounded-[2px] transition-transform hover:scale-110",
+                      editor.getAttributes("textStyle").color === color && "ring-1 ring-ring ring-offset-1"
+                    )}
+                    style={{ backgroundColor: color }}
+                  />
+                ))}
+              </div>
+              <div className="h-px bg-border my-1.5" />
+              <button
+                type="button"
+                className="flex items-center gap-2 px-2 py-1 text-sm rounded hover:bg-accent text-start w-full"
+                onClick={() => {
+                  editor.chain().focus().unsetColor().run();
+                  setColorMenuOpen(false);
+                }}
+              >
+                <RemoveFormatting className="w-4 h-4" /> Remove color
+              </button>
+            </div>
+          )}
+        </div>
 
         <ToolbarSeparator />
 
diff --git a/components/email/signature-block.ts b/components/email/signature-block.ts
index 231b9f6a..9b0ee3ef 100644
--- a/components/email/signature-block.ts
+++ b/components/email/signature-block.ts
@@ -6,6 +6,23 @@ import { Node as TiptapNode, mergeAttributes } from "@tiptap/core";
 // so parseHTML can recognise it on the way back in (initial content, drafts).
 export const SIGNATURE_BLOCK_MARKER = "data-signature-block-node";
 
+/**
+ * Force every link in the rendered signature to open in a new tab.
+ *
+ * Applied to the NodeView's DOM only, never to `attrs.html` — that attribute is
+ * what serializeEditorContent emits into the sent message, and the recipient's
+ * copy should stay exactly as the user wrote it. Without this the composer's
+ * signature is a set of live, target-less anchors in the main document (the
+ * message body gets a sandboxed iframe; this does not), so one stray click
+ * navigates the whole app away and takes the unsent draft with it.
+ */
+function forceLinksToNewTab(root: HTMLElement): void {
+  root.querySelectorAll("a[href]").forEach((a) => {
+    a.setAttribute("target", "_blank");
+    a.setAttribute("rel", "noopener noreferrer");
+  });
+}
+
 /**
  * SignatureBlock — an atomic, NON-editable block node that carries the
  * *verbatim* HTML of the user's identity signature in its `html` attribute.
@@ -61,6 +78,7 @@ export const SignatureBlock = TiptapNode.create({
       dom.setAttribute(SIGNATURE_BLOCK_MARKER, "");
       dom.className = "signature-block-island";
 
+
       // CRITICAL: render the signature inside a Shadow Root. The app's global
       // CSS (Tailwind preflight, .tiptap table/td rules, box-sizing resets)
       // would otherwise cascade INTO the signature and destroy its layout -
@@ -71,7 +89,12 @@ export const SignatureBlock = TiptapNode.create({
       const inner = document.createElement("div");
       // Read-only: a signature is inserted/removed as a unit, not edited inline.
       inner.contentEditable = "false";
-      inner.innerHTML = node.attrs.html || "";
+      // Track what we were given, not what's in the DOM: forceLinksToNewTab
+      // rewrites the markup, so inner.innerHTML no longer round-trips against
+      // attrs.html and comparing the two would rewrite on every transaction.
+      let appliedHtml = node.attrs.html || "";
+      inner.innerHTML = appliedHtml;
+      forceLinksToNewTab(inner);
       shadow.appendChild(inner);
 
       return {
@@ -83,8 +106,11 @@ export const SignatureBlock = TiptapNode.create({
         stopEvent: () => false,
         update: (updatedNode) => {
           if (updatedNode.type.name !== "signatureBlock") return false;
-          if (inner.innerHTML !== (updatedNode.attrs.html || "")) {
-            inner.innerHTML = updatedNode.attrs.html || "";
+          const nextHtml = updatedNode.attrs.html || "";
+          if (nextHtml !== appliedHtml) {
+            appliedHtml = nextHtml;
+            inner.innerHTML = nextHtml;
+            forceLinksToNewTab(inner);
           }
           return true;
         },
diff --git a/components/email/text-direction.ts b/components/email/text-direction.ts
index 7edf34b5..6665c373 100644
--- a/components/email/text-direction.ts
+++ b/components/email/text-direction.ts
@@ -13,7 +13,12 @@ declare module "@tiptap/core" {
 
 /**
  * Adds a `dir` attribute to block nodes so the composer can mark individual
- * paragraphs/headings as LTR or RTL (Gmail-style right-to-left editing). The
+ * paragraphs/headings as LTR or RTL (Gmail-style right-to-left editing).
+ *
+ * The default is `"auto"`: each block detects its own direction from its first
+ * strong character, so a paragraph typed in English renders LTR and one typed
+ * in Hebrew renders RTL, per block, as you type. The toolbar toggle still pins
+ * an explicit `ltr`/`rtl` when you want to override the auto-detection, and the
  * attribute round-trips to HTML so the direction is preserved in the sent mail.
  */
 export const TextDirection = Extension.create({
@@ -29,10 +34,10 @@ export const TextDirection = Extension.create({
         types: this.options.types,
         attributes: {
           dir: {
-            default: null,
-            parseHTML: (element) => element.getAttribute("dir") || null,
+            default: "auto",
+            parseHTML: (element) => element.getAttribute("dir") || "auto",
             renderHTML: (attributes) =>
-              attributes.dir ? { dir: attributes.dir } : {},
+              attributes.dir ? { dir: attributes.dir } : { dir: "auto" },
           },
         },
       },
diff --git a/components/email/thread-list-item.tsx b/components/email/thread-list-item.tsx
index 8e44f2a2..cb8868b9 100644
--- a/components/email/thread-list-item.tsx
+++ b/components/email/thread-list-item.tsx
@@ -166,6 +166,10 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
         ref={ref}
         {...dragHandlers}
         {...longPressHandlers}
+        data-testid="email-list-item"
+        data-email-id={email.id}
+        data-subject={email.subject || ''}
+        data-unread={isUnread ? 'true' : 'false'}
         className={cn(
           "relative group cursor-pointer select-none transition-shadow duration-200 border-b border-border overflow-hidden",
           resolvedColorTag ? resolvedColorTag : (
@@ -660,7 +664,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                   onToggle={toggleThreadSelection}
                   selectLabel={tBatch('select')}
                 />
-                {!isMobile && !isFocusedMailLayout && (
+                {!isMobile && (
                   <button
                     data-expand-toggle
                     onClick={(e) => {
@@ -892,7 +896,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
           )}
         </div>
 
-        {isExpanded && !isMobile && !isFocusedMailLayout && (
+        {isExpanded && !isMobile && (
           <div className="bg-muted/20 animate-in slide-in-from-top-2 duration-200">
             {isLoading ? (
               <div className="py-4 flex items-center justify-center text-sm text-muted-foreground">
diff --git a/components/favicon-badge.tsx b/components/favicon-badge.tsx
new file mode 100644
index 00000000..0e3a4295
--- /dev/null
+++ b/components/favicon-badge.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { useEmailStore } from "@/stores/email-store";
+import { useSettingsStore } from "@/stores/settings-store";
+import { useFaviconBadge } from "@/hooks/use-favicon-badge";
+
+/**
+ * Badges the browser-tab favicon with the inbox unread count, so new mail is
+ * visible without focusing the tab. See issue #560.
+ *
+ * Opt-out via the `faviconUnreadBadge` setting (Settings -> Appearance); on by
+ * default.
+ *
+ * Mounted in the root layout rather than on the mail route: the badge belongs
+ * to the tab, not to a page. Mounting it on the mail page unmounted it — and so
+ * cleared the badge, and flickered the icon — on every hop to /settings,
+ * /calendar or /contacts.
+ *
+ * Renders nothing.
+ */
+export function FaviconBadge() {
+  // The store's canonical inbox selector. `role === 'inbox'` alone is not
+  // enough: shared and group inboxes ship in the same `mailboxes` array, so on
+  // a delegated setup the first match can be somebody else's inbox.
+  const inboxUnread = useEmailStore(
+    (s) => s.mailboxes.find((m) => m.role === "inbox" && !m.isShared)?.unreadEmails ?? 0,
+  );
+  const enabled = useSettingsStore((s) => s.faviconUnreadBadge);
+
+  useFaviconBadge(inboxUnread, enabled);
+
+  return null;
+}
diff --git a/components/identity/identity-form.tsx b/components/identity/identity-form.tsx
index 2e083225..0155b7b7 100644
--- a/components/identity/identity-form.tsx
+++ b/components/identity/identity-form.tsx
@@ -5,7 +5,7 @@ import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import type { Identity, EmailAddress } from '@/lib/jmap/types';
-import { sanitizeSignatureHtml } from '@/lib/email-sanitization';
+import { sanitizeSignatureHtml, sanitizeSignatureHtmlForDisplay } from '@/lib/email-sanitization';
 import { getEmailValidationError, validateEmailList } from '@/lib/validation';
 
 // Stalwarts JMAP Identity/set caps signature fields at 2047 UTF-8 bytes
@@ -305,7 +305,7 @@ export function IdentityForm({ identity, onSave, onCancel }: IdentityFormProps)
             <div className="text-xs text-muted-foreground mb-1">{tDisplay('preview')}</div>
             <div
               dangerouslySetInnerHTML={{
-                __html: sanitizeSignatureHtml(formData.htmlSignature)
+                __html: sanitizeSignatureHtmlForDisplay(formData.htmlSignature)
               }}
             />
           </div>
diff --git a/components/identity/identity-manager-modal.tsx b/components/identity/identity-manager-modal.tsx
index 521ac5f1..5f42a563 100644
--- a/components/identity/identity-manager-modal.tsx
+++ b/components/identity/identity-manager-modal.tsx
@@ -9,6 +9,7 @@ import { ConfirmDialog } from '@/components/ui/confirm-dialog';
 import { IdentityForm } from './identity-form';
 import { useIdentityStore } from '@/stores/identity-store';
 import { useAuthStore } from '@/stores/auth-store';
+import { useAccountStore } from '@/stores/account-store';
 import { useSettingsStore } from '@/stores/settings-store';
 
 function useSyncIdentities() {
@@ -207,15 +208,16 @@ export function IdentityManagerModal({ isOpen, onClose }: IdentityManagerModalPr
 
   const handleSetPrimary = useCallback((identity: Identity) => {
     setPreferredPrimary(identity.id);
-    // Persist to the synced settings (keyed by username, matching how
-    // loadIdentities reads it back) so the choice survives a new browser /
-    // cleared site data and reaches other devices (#507).
-    const username = useAuthStore.getState().username || '';
-    if (username) {
+    // Persist the choice per account in the synced settings store so it
+    // survives clearing site data, follows the user across devices, and shows
+    // up in exported settings (issue #507). JMAP identity ids are account-
+    // scoped, so the default is keyed by the active account.
+    const activeAccountId = useAccountStore.getState().activeAccountId;
+    if (activeAccountId) {
       const current = useSettingsStore.getState().preferredIdentityIds;
       useSettingsStore.getState().updateSetting('preferredIdentityIds', {
         ...current,
-        [username]: identity.id,
+        [activeAccountId]: identity.id,
       });
     }
     // Re-sort: move the preferred identity to the front
diff --git a/components/layout/account-switcher.tsx b/components/layout/account-switcher.tsx
index 8264c991..179aeddd 100644
--- a/components/layout/account-switcher.tsx
+++ b/components/layout/account-switcher.tsx
@@ -151,6 +151,8 @@ export function AccountSwitcher({ variant = "rail", className }: AccountSwitcher
       <button
         ref={buttonRef}
         onClick={() => setOpen(!open)}
+        data-testid="account-switcher"
+        data-active-account-id={activeAccountId ?? undefined}
         className={cn(
           "flex items-center gap-2 rounded-md transition-colors",
           variant === "rail"
@@ -213,6 +215,9 @@ export function AccountSwitcher({ variant = "rail", className }: AccountSwitcher
                 >
                 <button
                   onClick={() => handleSwitch(account.id)}
+                  data-testid="account-option"
+                  data-account-id={account.id}
+                  data-account-email={account.email || account.username}
                   className={cn(
                     "w-full flex items-start gap-3 px-3 py-2.5 text-start transition-colors",
                     isActive ? "bg-accent/50" : "hover:bg-muted",
@@ -274,6 +279,7 @@ export function AccountSwitcher({ variant = "rail", className }: AccountSwitcher
             <div className="border-t border-border">
               <button
                 onClick={handleAddAccount}
+                data-testid="add-account"
                 className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-muted transition-colors"
                 role="menuitem"
               >
diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index 507c0227..3782c779 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -220,8 +220,13 @@ function SidebarRowCounts({
   ) : null;
 
   return (
-    <span className="ms-2 flex-shrink-0 flex items-baseline gap-1" title={totalCount > 0 ? `${unreadCount} unread / ${totalCount} total` : `${unreadCount} unread`}>
-
+    <span
+      className="ms-2 flex-shrink-0 flex items-baseline gap-1"
+      title={totalCount > 0 ? `${unreadCount} unread / ${totalCount} total` : `${unreadCount} unread`}
+      data-testid="folder-counts"
+      data-unread={unreadCount}
+      data-total={totalCount}
+    >
       {unreadNode}
       {unreadCount > 0 && totalCount > 0 && (
         <span className="text-xs text-muted-foreground/60">/</span>
@@ -249,6 +254,10 @@ interface SidebarRowProps {
   isValidDropTarget?: boolean;
   isInvalidDropTarget?: boolean;
   onContextMenu?: (e: React.MouseEvent) => void;
+  /** Stable identifiers for integration tests (not user-visible). */
+  testRole?: string | null;
+  testName?: string;
+  testMailboxId?: string;
 }
 
 function SidebarRow({
@@ -269,6 +278,9 @@ function SidebarRow({
   isValidDropTarget,
   isInvalidDropTarget,
   onContextMenu,
+  testRole,
+  testName,
+  testMailboxId,
 }: SidebarRowProps) {
   const t = useTranslations('sidebar');
   const leftPad = isCollapsed ? 0 : ROW_PX_BASE + depth * INDENT_STEP;
@@ -277,6 +289,10 @@ function SidebarRow({
     <div
       {...(dropHandlers || {})}
       onContextMenu={onContextMenu}
+      data-testid="folder-row"
+      data-folder-role={testRole ?? undefined}
+      data-folder-name={testName ?? undefined}
+      data-mailbox-id={testMailboxId ?? undefined}
       style={{ paddingBlock: 'var(--density-sidebar-py)' }}
       className={cn(
         "group w-full flex items-center max-lg:min-h-[44px] text-sm transition-colors duration-150",
@@ -477,6 +493,9 @@ function MailboxTreeItem({
       <SidebarRow
         icon={<Icon className={getIconClass(isSelected, isVirtualNode, colorful, roleKey)} />}
         label={label}
+        testRole={node.role}
+        testName={node.name}
+        testMailboxId={node.id}
         depth={node.depth}
         isSelected={isSelected}
         isVirtual={isVirtualNode}
@@ -1047,6 +1066,9 @@ export function Sidebar({
                       key={unifiedId}
                       icon={<Icon className={getIconClass(isSelected, false, colorfulSidebarIcons, count.role)} />}
                       label={t(`unified_${count.role}`)}
+                      testRole={count.role}
+                      testName={`unified-${count.role}`}
+                      testMailboxId={unifiedId}
                       depth={0}
                       isSelected={isSelected}
                       unread={count.unreadEmails}
@@ -1068,6 +1090,8 @@ export function Sidebar({
                       key={id}
                       icon={<Icon className={getIconClass(isSelected, false, colorfulSidebarIcons)} />}
                       label={label}
+                      testName={id}
+                      testMailboxId={id}
                       depth={0}
                       isSelected={isSelected}
                       unread={unread}
diff --git a/components/settings/layout-settings.tsx b/components/settings/layout-settings.tsx
index bbab221f..8e8e15a8 100644
--- a/components/settings/layout-settings.tsx
+++ b/components/settings/layout-settings.tsx
@@ -118,7 +118,7 @@ function MailLayoutPreview({
 export function LayoutSettings() {
   const t = useTranslations('settings.appearance');
   const tEmail = useTranslations('settings.email_behavior');
-  const { toolbarPosition, showToolbarLabels, hideAccountSwitcher, showRailAccountList, enableUnifiedMailbox, includeGroupInUnified, enableAllMailView, allMailFolderIds, enableCrossUnreadView, enableCrossStarredView, enableCrossAllView, colorfulSidebarIcons, tintListRowsByTag, showFolderTotalCount, mailLayout, proInterface, updateSetting } = useSettingsStore();
+  const { toolbarPosition, showToolbarLabels, hideAccountSwitcher, showRailAccountList, enableUnifiedMailbox, includeGroupInUnified, enableAllMailView, allMailFolderIds, enableCrossUnreadView, enableCrossStarredView, enableCrossAllView, colorfulSidebarIcons, tintListRowsByTag, showFolderTotalCount, faviconUnreadBadge, mailLayout, proInterface, updateSetting } = useSettingsStore();
   const { isSettingLocked, isSettingHidden, isFeatureEnabled } = usePolicyStore();
   const accounts = useAccountStore(s => s.accounts);
   const activeAccountId = useAccountStore(s => s.activeAccountId);
@@ -231,6 +231,13 @@ export function LayoutSettings() {
         />
       </SettingItem>
 
+      <SettingItem label={t('favicon_unread_badge.label')} description={t('favicon_unread_badge.description')}>
+        <ToggleSwitch
+          checked={faviconUnreadBadge}
+          onChange={(checked) => updateSetting('faviconUnreadBadge', checked)}
+        />
+      </SettingItem>
+
       {(accounts.length > 1 || hasGroupInboxes) && !isSettingHidden('enableUnifiedMailbox') && (
         <SettingItem
           label={t('unified_mailbox.label')}
diff --git a/eslint.config.mjs b/eslint.config.mjs
index dee0e4b2..b268a47f 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -79,6 +79,8 @@ export default [
       "e2e/**",
       "local-data/**/*.mjs",
       "benchmark/**",
+      "examples/**",
+      "integration/**",
     ],
   },
 ];
diff --git a/hooks/__tests__/use-favicon-badge.test.tsx b/hooks/__tests__/use-favicon-badge.test.tsx
new file mode 100644
index 00000000..0578bc3d
--- /dev/null
+++ b/hooks/__tests__/use-favicon-badge.test.tsx
@@ -0,0 +1,559 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { StrictMode } from 'react';
+import { render, renderHook, waitFor } from '@testing-library/react';
+import { useFaviconBadge } from '@/hooks/use-favicon-badge';
+import { renderBadgedFavicon } from '@/lib/favicon-badge';
+
+vi.mock('@/lib/favicon-badge', () => ({
+  renderBadgedFavicon: vi.fn((_source: string, count: number) =>
+    count > 0 ? `data:image/svg+xml,BADGED-${count}` : null,
+  ),
+}));
+
+const renderBadgedFaviconMock = vi.mocked(renderBadgedFavicon);
+
+const ORIGINAL_HREF = '/branding/Bulwark_Favicon.svg';
+
+/** The link the hook owns: the only one it may ever touch. */
+function badgeLink(): HTMLLinkElement | null {
+  return document.querySelector<HTMLLinkElement>('link[data-favicon-badge]');
+}
+
+/** The base icon link the page (or React) rendered: must survive untouched. */
+function baseLinks(): HTMLLinkElement[] {
+  return Array.from(
+    document.querySelectorAll<HTMLLinkElement>('link[rel~="icon"]:not([data-favicon-badge])'),
+  );
+}
+
+/** Every icon link in <head>, in document order. The browser honours the last. */
+function iconLinks(): HTMLLinkElement[] {
+  return Array.from(document.head.querySelectorAll<HTMLLinkElement>('link[rel~="icon"]'));
+}
+
+function lastIconLink(): HTMLLinkElement | null {
+  return iconLinks().at(-1) ?? null;
+}
+
+/**
+ * What Next/React does on a client-side navigation: it re-hoists its metadata
+ * icon link into <head>, appending a *fresh* node after everything already
+ * there — including our badge link.
+ */
+function rehoistBaseIcon(href = ORIGINAL_HREF): HTMLLinkElement {
+  const link = document.createElement('link');
+  link.rel = 'icon';
+  link.href = href;
+  document.head.appendChild(link);
+  return link;
+}
+
+/** Drains microtasks (MutationObserver callbacks) and one macrotask. */
+async function settle(): Promise<void> {
+  for (let i = 0; i < 20; i++) await Promise.resolve();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+function svgResponse(body = '<svg viewBox="0 0 1000 1000"/>') {
+  return new Response(body, { status: 200, headers: { 'content-type': 'image/svg+xml' } });
+}
+
+function Badger({ count }: { count: number }) {
+  useFaviconBadge(count);
+  return null;
+}
+
+beforeEach(() => {
+  document.head.innerHTML = `<link rel="icon" href="${ORIGINAL_HREF}">`;
+  vi.stubGlobal('fetch', vi.fn(async () => svgResponse()));
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  vi.clearAllMocks();
+  // document.head outlives every test, so a spy on it that a failing assertion
+  // never got to restore would leak into the next test's counts.
+  vi.restoreAllMocks();
+});
+
+describe('useFaviconBadge', () => {
+  it('appends its own badged icon link when the count is positive', async () => {
+    renderHook(() => useFaviconBadge(3));
+    await waitFor(() => {
+      expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-3');
+    });
+    expect(badgeLink()!.getAttribute('type')).toBe('image/svg+xml');
+    // Last-declared icon wins, so ours must be last in <head>.
+    expect(document.head.lastElementChild).toBe(badgeLink());
+  });
+
+  it('never removes or mutates an icon link it did not create', async () => {
+    const before = baseLinks()[0];
+    renderHook(() => useFaviconBadge(3));
+    await waitFor(() => expect(badgeLink()).not.toBeNull());
+
+    expect(before.isConnected).toBe(true);
+    expect(before.getAttribute('href')).toBe(ORIGINAL_HREF);
+    expect(baseLinks()).toHaveLength(1);
+  });
+
+  it('leaves every icon link it did not create intact, including non-SVG fallbacks', async () => {
+    document.head.innerHTML =
+      `<link rel="icon" type="image/svg+xml" href="/a.svg">` +
+      `<link rel="icon" type="image/png" sizes="32x32" href="/a.png">`;
+
+    renderHook(() => useFaviconBadge(3));
+    await waitFor(() => expect(badgeLink()).not.toBeNull());
+
+    const survivors = baseLinks();
+    expect(survivors).toHaveLength(2);
+    expect(survivors[0].getAttribute('href')).toBe('/a.svg');
+    expect(survivors[0].getAttribute('type')).toBe('image/svg+xml');
+    expect(survivors[1].getAttribute('href')).toBe('/a.png');
+    expect(survivors[1].getAttribute('type')).toBe('image/png');
+    expect(survivors[1].getAttribute('sizes')).toBe('32x32');
+  });
+
+  it('does not throw when React owns the icon link and its subtree is deleted', async () => {
+    // React 19 hoists <link rel="icon"> into <head> and keeps a fiber pointing at
+    // that DOM node. Removing it out from under React makes the commit phase throw
+    // "Cannot read properties of null (reading 'removeChild')" when the fiber is
+    // later deleted. The hook must therefore never touch a node it did not create.
+    document.head.innerHTML = '';
+
+    const { unmount } = render(
+      <>
+        <link rel="icon" type="image/svg+xml" href={ORIGINAL_HREF} />
+        <Badger count={3} />
+      </>,
+    );
+
+    await waitFor(() => expect(badgeLink()).not.toBeNull());
+
+    // The React-owned node is still there, untouched.
+    const reactOwned = baseLinks();
+    expect(reactOwned).toHaveLength(1);
+    expect(reactOwned[0].getAttribute('href')).toBe(ORIGINAL_HREF);
+
+    expect(() => unmount()).not.toThrow();
+    expect(badgeLink()).toBeNull();
+  });
+
+  it('replaces its own link rather than mutating its href', async () => {
+    const { rerender } = renderHook(({ n }) => useFaviconBadge(n), { initialProps: { n: 3 } });
+    await waitFor(() => {
+      expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-3');
+    });
+    const first = badgeLink();
+
+    rerender({ n: 4 });
+    await waitFor(() => {
+      expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-4');
+    });
+
+    // Firefox ignores an in-place href change on the favicon link.
+    expect(badgeLink()).not.toBe(first);
+    expect(first!.isConnected).toBe(false);
+  });
+
+  it('clears the badge by inserting a fresh link carrying the base href, not by removing its own', async () => {
+    // The field bug: Firefox does not re-evaluate the favicon when an icon link
+    // is *removed* — a removal is not an insertion, so it keeps painting the
+    // last icon it was handed and the stale "99+" badge sticks until a hard
+    // reload. Clearing must therefore be an insertion: our own link is replaced
+    // by a brand-new node carrying the original base href.
+    const { rerender } = renderHook(({ n }) => useFaviconBadge(n), { initialProps: { n: 3 } });
+    await waitFor(() => {
+      expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-3');
+    });
+    const badged = badgeLink()!;
+
+    rerender({ n: 0 });
+    await waitFor(() => expect(badgeLink()!.getAttribute('href')).toBe(ORIGINAL_HREF));
+
+    const restored = badgeLink()!;
+    expect(restored).not.toBe(badged); // a NEW node: an insertion, not an href swap
+    expect(badged.isConnected).toBe(false);
+    expect(restored.getAttribute('type')).toBe('image/svg+xml');
+    expect(lastIconLink()).toBe(restored);
+
+    // And the base link the page rendered is still untouched.
+    const survivors = baseLinks();
+    expect(survivors).toHaveLength(1);
+    expect(survivors[0].getAttribute('href')).toBe(ORIGINAL_HREF);
+  });
+
+  it('inserts the base-href link exactly once while the count stays at zero', async () => {
+    const { rerender } = renderHook(({ n }) => useFaviconBadge(n), { initialProps: { n: 3 } });
+    await waitFor(() => expect(badgeLink()).not.toBeNull());
+
+    const appendSpy = vi.spyOn(document.head, 'appendChild');
+    const ownAppends = () =>
+      appendSpy.mock.calls.filter(
+        ([node]) => node instanceof Element && node.matches('link[data-favicon-badge]'),
+      ).length;
+
+    rerender({ n: 0 });
+    await waitFor(() => expect(badgeLink()!.getAttribute('href')).toBe(ORIGINAL_HREF));
+    const restored = badgeLink()!;
+    expect(ownAppends()).toBe(1);
+
+    // Neither further renders at the same count nor unrelated <head> churn (an
+    // observer tick) may re-insert it: no remove/append thrash on every tick.
+    rerender({ n: 0 });
+    rerender({ n: 0 });
+    document.head.appendChild(document.createElement('meta'));
+    await settle();
+
+    expect(ownAppends()).toBe(1);
+    expect(badgeLink()).toBe(restored);
+    expect(document.querySelectorAll('link[data-favicon-badge]')).toHaveLength(1);
+    appendSpy.mockRestore();
+  });
+
+  it('keeps its own link last even while it is only carrying the base href', async () => {
+    const { rerender } = renderHook(({ n }) => useFaviconBadge(n), { initialProps: { n: 3 } });
+    await waitFor(() => expect(badgeLink()).not.toBeNull());
+
+    rerender({ n: 0 });
+    await waitFor(() => expect(badgeLink()!.getAttribute('href')).toBe(ORIGINAL_HREF));
+    const own = badgeLink()!;
+
+    rehoistBaseIcon();
+    await waitFor(() => expect(lastIconLink()).toBe(own));
+    expect(badgeLink()).toBe(own); // moved, not recreated
+  });
+
+  it('badges again with a fresh insertion when the count leaves zero', async () => {
+    const { rerender } = renderHook(({ n }) => useFaviconBadge(n), { initialProps: { n: 3 } });
+    await waitFor(() => expect(badgeLink()).not.toBeNull());
+
+    rerender({ n: 0 });
+    await waitFor(() => expect(badgeLink()!.getAttribute('href')).toBe(ORIGINAL_HREF));
+    const cleared = badgeLink()!;
+
+    rerender({ n: 7 });
+    await waitFor(() => {
+      expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-7');
+    });
+    expect(badgeLink()).not.toBe(cleared);
+    expect(cleared.isConnected).toBe(false);
+    expect(lastIconLink()).toBe(badgeLink());
+    expect(fetch).toHaveBeenCalledTimes(1); // the base is still fetched only once
+    expect(baseLinks()).toHaveLength(1);
+  });
+
+  it('removes only its own link on unmount', async () => {
+    const { unmount } = renderHook(() => useFaviconBadge(3));
+    await waitFor(() => expect(badgeLink()).not.toBeNull());
+
+    unmount();
+    expect(badgeLink()).toBeNull();
+    expect(baseLinks()).toHaveLength(1);
+    expect(baseLinks()[0].getAttribute('href')).toBe(ORIGINAL_HREF);
+  });
+
+  it('does not fetch, and adds no link, while the count is zero', async () => {
+    renderHook(() => useFaviconBadge(0));
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(fetch).not.toHaveBeenCalled();
+    expect(renderBadgedFaviconMock).not.toHaveBeenCalled();
+    expect(badgeLink()).toBeNull();
+    expect(baseLinks()).toHaveLength(1);
+  });
+
+  it('leaves the icon alone when the base is not SVG', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => new Response('binary', { headers: { 'content-type': 'image/png' } })),
+    );
+    renderHook(() => useFaviconBadge(3));
+    await waitFor(() => expect(fetch).toHaveBeenCalled());
+
+    // Assert on the observable end state, not merely on the href being
+    // unchanged: the href is also unchanged *before* the catch block runs,
+    // so a href-only assertion would pass even if the code went on to swap
+    // the icon a tick later. The renderer must never be reached.
+    await waitFor(() => expect(renderBadgedFaviconMock).not.toHaveBeenCalled());
+    expect(badgeLink()).toBeNull();
+    expect(baseLinks()[0].getAttribute('href')).toBe(ORIGINAL_HREF);
+  });
+
+  it('leaves the icon alone when the base fetch fails', async () => {
+    vi.stubGlobal('fetch', vi.fn(async () => new Response('', { status: 404 })));
+    renderHook(() => useFaviconBadge(3));
+    await waitFor(() => expect(fetch).toHaveBeenCalled());
+    expect(renderBadgedFaviconMock).not.toHaveBeenCalled();
+    expect(badgeLink()).toBeNull();
+    expect(baseLinks()[0].getAttribute('href')).toBe(ORIGINAL_HREF);
+  });
+
+  it('does nothing when there is no icon link to read', async () => {
+    document.head.innerHTML = '';
+    renderHook(() => useFaviconBadge(3));
+    await Promise.resolve(); // let any deferred async work start
+    expect(fetch).not.toHaveBeenCalled();
+    expect(renderBadgedFaviconMock).not.toHaveBeenCalled();
+    expect(badgeLink()).toBeNull();
+  });
+
+  it('fetches the base icon exactly once under StrictMode and rapid count changes', async () => {
+    // StrictMode double-invokes effects, and a count change while the fetch is in
+    // flight re-runs the effect: neither may issue a second request.
+    let resolveFetch: (response: Response) => void = () => {};
+    const inFlight = new Promise<Response>((resolve) => {
+      resolveFetch = resolve;
+    });
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(() => inFlight),
+    );
+
+    const { rerender } = renderHook(({ n }) => useFaviconBadge(n), {
+      initialProps: { n: 1 },
+      wrapper: StrictMode,
+    });
+
+    rerender({ n: 2 });
+    rerender({ n: 5 });
+    expect(fetch).toHaveBeenCalledTimes(1);
+
+    resolveFetch(svgResponse());
+    await waitFor(() => {
+      // The badge lands on the latest count, not the one in flight at fetch time.
+      expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-5');
+    });
+
+    rerender({ n: 6 });
+    await waitFor(() => {
+      expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-6');
+    });
+    expect(fetch).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not re-render the badge when the count is unchanged', async () => {
+    const { rerender } = renderHook(({ n }) => useFaviconBadge(n), {
+      initialProps: { n: 3 },
+    });
+    await waitFor(() => {
+      expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-3');
+    });
+
+    const settled = badgeLink();
+    renderBadgedFaviconMock.mockClear();
+    rerender({ n: 3 });
+
+    // The element identity alone is not evidence: `count` is the effect's only
+    // dependency, so React would skip the effect regardless. Assert the
+    // renderer was not invoked again — that is the behaviour under test.
+    expect(renderBadgedFaviconMock).not.toHaveBeenCalled();
+    expect(badgeLink()).toBe(settled);
+  });
+
+  describe('when the setting is off', () => {
+    it('adds no link and does not fetch, however high the count', async () => {
+      renderHook(() => useFaviconBadge(3, false));
+      await settle();
+
+      expect(fetch).not.toHaveBeenCalled();
+      expect(renderBadgedFaviconMock).not.toHaveBeenCalled();
+      expect(badgeLink()).toBeNull();
+      expect(baseLinks()).toHaveLength(1);
+      expect(baseLinks()[0].getAttribute('href')).toBe(ORIGINAL_HREF);
+    });
+
+    it('clears a showing badge by inserting a fresh link carrying the base href', async () => {
+      // Same guarantee as the count-back-to-zero clear, and for the same reason:
+      // Firefox re-evaluates the favicon on an *insertion* and on nothing else.
+      // Turning the setting off by *removing* our link would leave the stale
+      // badge painted on the tab until a hard reload.
+      const { rerender } = renderHook(({ on }) => useFaviconBadge(3, on), {
+        initialProps: { on: true },
+      });
+      await waitFor(() => {
+        expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-3');
+      });
+      const badged = badgeLink()!;
+
+      rerender({ on: false });
+      await waitFor(() => expect(badgeLink()!.getAttribute('href')).toBe(ORIGINAL_HREF));
+
+      const restored = badgeLink()!;
+      expect(restored).not.toBe(badged); // a NEW node: an insertion, not an href swap
+      expect(badged.isConnected).toBe(false);
+      expect(restored.getAttribute('type')).toBe('image/svg+xml');
+      expect(lastIconLink()).toBe(restored);
+
+      // And the base link the page rendered is still untouched.
+      const survivors = baseLinks();
+      expect(survivors).toHaveLength(1);
+      expect(survivors[0].getAttribute('href')).toBe(ORIGINAL_HREF);
+    });
+
+    it('re-badges with a fresh insertion when the setting is turned back on', async () => {
+      const { rerender } = renderHook(({ on }) => useFaviconBadge(3, on), {
+        initialProps: { on: true },
+      });
+      await waitFor(() => expect(badgeLink()).not.toBeNull());
+
+      rerender({ on: false });
+      await waitFor(() => expect(badgeLink()!.getAttribute('href')).toBe(ORIGINAL_HREF));
+      const cleared = badgeLink()!;
+
+      rerender({ on: true });
+      await waitFor(() => {
+        expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-3');
+      });
+      expect(badgeLink()).not.toBe(cleared);
+      expect(cleared.isConnected).toBe(false);
+      expect(lastIconLink()).toBe(badgeLink());
+      expect(fetch).toHaveBeenCalledTimes(1); // the base is still fetched only once
+      expect(baseLinks()).toHaveLength(1);
+    });
+
+    it('keeps its base-href link last when React re-hoists its icon', async () => {
+      const { rerender } = renderHook(({ on }) => useFaviconBadge(3, on), {
+        initialProps: { on: true },
+      });
+      await waitFor(() => expect(badgeLink()).not.toBeNull());
+
+      rerender({ on: false });
+      await waitFor(() => expect(badgeLink()!.getAttribute('href')).toBe(ORIGINAL_HREF));
+      const own = badgeLink()!;
+
+      rehoistBaseIcon();
+      await waitFor(() => expect(lastIconLink()).toBe(own));
+      expect(badgeLink()).toBe(own); // moved, not recreated
+    });
+  });
+
+  describe('when React re-hoists its icon link on a client-side navigation', () => {
+    it('moves its own link back to the end so the badge keeps winning', async () => {
+      // The field bug: Inbox badges the tab, a hop to /calendar makes React
+      // re-insert its metadata <link rel="icon"> *after* ours, the base icon
+      // wins again and the badge vanishes.
+      renderHook(() => useFaviconBadge(3));
+      await waitFor(() => expect(badgeLink()).not.toBeNull());
+      expect(lastIconLink()).toBe(badgeLink());
+
+      const own = badgeLink()!;
+      const rehoisted = rehoistBaseIcon();
+      expect(lastIconLink()).toBe(rehoisted); // the badge is now outranked
+
+      await waitFor(() => expect(lastIconLink()).toBe(own));
+      expect(document.head.lastElementChild).toBe(own);
+      expect(badgeLink()).toBe(own); // moved, not recreated
+      expect(rehoisted.isConnected).toBe(true); // and React's node is untouched
+    });
+
+    it('restores the badge without the count changing', async () => {
+      // The "never comes back" half of the bug. Navigating back to the inbox
+      // does not change the unread count, so nothing re-runs the count effect:
+      // the observer alone must put the badge back on top.
+      const { rerender } = renderHook(({ n }) => useFaviconBadge(n), { initialProps: { n: 3 } });
+      await waitFor(() => {
+        expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-3');
+      });
+
+      renderBadgedFaviconMock.mockClear();
+      rehoistBaseIcon();
+      await waitFor(() => expect(lastIconLink()).toBe(badgeLink()));
+
+      rerender({ n: 3 }); // same count: no effect re-run to lean on
+      await settle();
+
+      expect(lastIconLink()).toBe(badgeLink());
+      expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-3');
+      expect(renderBadgedFaviconMock).not.toHaveBeenCalled();
+      expect(fetch).toHaveBeenCalledTimes(1);
+    });
+
+    it('re-applies the badge if its own link is removed entirely', async () => {
+      renderHook(() => useFaviconBadge(3));
+      await waitFor(() => expect(badgeLink()).not.toBeNull());
+
+      badgeLink()!.remove(); // React blows away part of <head>
+
+      await waitFor(() => {
+        expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-3');
+      });
+      expect(lastIconLink()).toBe(badgeLink());
+      expect(fetch).toHaveBeenCalledTimes(1); // the base is still fetched only once
+    });
+
+    it('settles: re-appending its own link does not feed the observer a loop', async () => {
+      // Moving our link fires the observer again. If the move is not guarded by
+      // "am I already last?", that second run moves it again, for ever. Count
+      // the appends of *our* node: exactly one, and it must stop growing.
+      renderHook(() => useFaviconBadge(3));
+      await waitFor(() => expect(badgeLink()).not.toBeNull());
+      const own = badgeLink()!;
+
+      const appendSpy = vi.spyOn(document.head, 'appendChild');
+      const ownAppends = () => appendSpy.mock.calls.filter(([node]) => node === own).length;
+
+      rehoistBaseIcon();
+      await waitFor(() => expect(lastIconLink()).toBe(own));
+      expect(ownAppends()).toBe(1);
+
+      await settle();
+      expect(ownAppends()).toBe(1); // the observer's own mutation is a no-op
+      expect(lastIconLink()).toBe(own);
+      // Base + re-hoisted base + exactly one badge: nothing was duplicated.
+      expect(iconLinks()).toHaveLength(3);
+      expect(document.querySelectorAll('link[data-favicon-badge]')).toHaveLength(1);
+      appendSpy.mockRestore();
+    });
+
+    it('still never removes or mutates a link it did not create', async () => {
+      document.head.innerHTML =
+        `<link rel="icon" type="image/svg+xml" href="/a.svg">` +
+        `<link rel="icon" type="image/png" sizes="32x32" href="/a.png">`;
+
+      const { unmount } = render(
+        <>
+          <link rel="icon" type="image/svg+xml" href={ORIGINAL_HREF} />
+          <Badger count={3} />
+        </>,
+      );
+      await waitFor(() => expect(badgeLink()).not.toBeNull());
+
+      const rehoisted = rehoistBaseIcon();
+      await waitFor(() => expect(lastIconLink()).toBe(badgeLink()));
+
+      const survivors = baseLinks();
+      expect(survivors).toHaveLength(4);
+      expect(survivors.map((l) => l.getAttribute('href'))).toEqual([
+        '/a.svg',
+        '/a.png',
+        ORIGINAL_HREF,
+        ORIGINAL_HREF,
+      ]);
+      expect(survivors[1].getAttribute('type')).toBe('image/png');
+      expect(survivors[1].getAttribute('sizes')).toBe('32x32');
+      expect(rehoisted.isConnected).toBe(true);
+
+      // The React-owned node is still React's to delete.
+      expect(() => unmount()).not.toThrow();
+    });
+
+    it('disconnects the observer on unmount and leaves nothing of its own behind', async () => {
+      const disconnect = vi.spyOn(MutationObserver.prototype, 'disconnect');
+      const { unmount } = renderHook(() => useFaviconBadge(3));
+      await waitFor(() => expect(badgeLink()).not.toBeNull());
+
+      unmount();
+      expect(disconnect).toHaveBeenCalled();
+      expect(badgeLink()).toBeNull();
+
+      // A post-unmount re-hoist must not resurrect the badge.
+      rehoistBaseIcon();
+      await settle();
+      expect(badgeLink()).toBeNull();
+      expect(baseLinks()).toHaveLength(2);
+      disconnect.mockRestore();
+    });
+  });
+});
diff --git a/hooks/use-favicon-badge.ts b/hooks/use-favicon-badge.ts
new file mode 100644
index 00000000..1053f0e8
--- /dev/null
+++ b/hooks/use-favicon-badge.ts
@@ -0,0 +1,237 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from 'react';
+import { renderBadgedFavicon } from '@/lib/favicon-badge';
+import { debug } from '@/lib/debug';
+
+// Our own link, and only ever our own. Next's metadata `icons` (app/(main)/
+// layout.tsx) renders <link rel="icon"> through React, which hoists it into
+// <head> and keeps a fiber pointing at that DOM node. Removing it out from
+// under React leaves the fiber holding a detached node, and the next commit
+// that deletes that fiber throws "Cannot read properties of null (reading
+// 'removeChild')". So we never remove or mutate a node we did not create:
+// instead we append an *extra* icon link, marked as ours. The last-declared
+// icon wins in browsers, so ours overrides the base without deleting it.
+//
+// Ours is never removed to clear the badge, though — only on unmount. Firefox
+// re-evaluates the favicon on an *insertion* and on nothing else: a removal
+// leaves it painting the last icon it was handed, which is how a read inbox
+// kept a stale "99+" in the tab. Clearing therefore re-inserts our link with
+// the original base href in place of the badge (see `apply`).
+const MARKER = 'data-favicon-badge';
+const OWN_SELECTOR = `link[${MARKER}]`;
+const ICON_SELECTOR = 'link[rel~="icon"]';
+const BASE_SELECTOR = `${ICON_SELECTOR}:not([${MARKER}])`;
+
+// Both the badged icon and the untouched base we fall back to are SVG: the hook
+// disables itself unless the fetched base is served as image/svg+xml, so by the
+// time either link exists that content type is a proven fact, not a guess.
+const ICON_TYPE = 'image/svg+xml';
+
+function removeOwnLink(): void {
+  document.querySelectorAll(OWN_SELECTOR).forEach((el) => el.remove());
+}
+
+function ownLink(): HTMLLinkElement | null {
+  return document.head.querySelector<HTMLLinkElement>(OWN_SELECTOR);
+}
+
+/** True when ours is the last icon link in <head>, i.e. the one the browser uses. */
+function isLastIconLink(link: HTMLLinkElement): boolean {
+  const icons = document.head.querySelectorAll<HTMLLinkElement>(ICON_SELECTOR);
+  return icons[icons.length - 1] === link;
+}
+
+/**
+ * Appends a fresh icon link of ours, replacing any previous one of ours.
+ *
+ * Always a remove-then-append of a *new* node, never an href mutation: Firefox
+ * only re-evaluates the favicon when an icon link is inserted. It ignores an
+ * in-place href change, and — the count-back-to-zero bug — it equally ignores a
+ * removal, happily painting the last icon it was handed. So even *clearing* the
+ * badge is done by inserting: see `apply`, which re-inserts our link carrying
+ * the original base href rather than deleting it.
+ */
+function setOwnLink(href: string): void {
+  removeOwnLink();
+  const link = document.createElement('link');
+  link.rel = 'icon';
+  link.type = ICON_TYPE;
+  link.href = href;
+  link.setAttribute(MARKER, '');
+  document.head.appendChild(link);
+}
+
+/**
+ * Draws `count` as a badge on the browser-tab favicon, unless `enabled` is
+ * false (the `faviconUnreadBadge` setting).
+ *
+ * The base icon is read from the rendered <link rel="icon">, so admin and
+ * per-domain branding overrides (configManager `faviconUrl`) are respected
+ * without plumbing config to the client.
+ *
+ * Every failure — no icon link, a fetch error, a non-SVG base, unparseable
+ * source — leaves the existing favicon untouched.
+ */
+export function useFaviconBadge(count: number, enabled = true): void {
+  // Disabled is just "nothing to show", i.e. exactly a count of zero, so it
+  // rides the same paths: no fetch while we have never badged, and — the part
+  // that matters — clearing an *existing* badge by inserting a fresh link
+  // carrying the base href rather than removing ours, which Firefox would
+  // ignore (see `apply`). Switching the setting off therefore restores the
+  // plain icon immediately, with no reload.
+  const effectiveCount = enabled ? count : 0;
+  const baseSource = useRef<string | null>(null);
+  const baseHref = useRef<string | null>(null);
+  // The href our own link currently carries, and the hook's whole state machine:
+  //   null            -> nothing of ours is in <head> (we have never badged)
+  //   baseHref        -> ours is in <head>, showing the unbadged base icon
+  //   a data: URL     -> ours is in <head>, showing the badge
+  const appliedHref = useRef<string | null>(null);
+  const disabled = useRef(false);
+  const fetchStarted = useRef(false);
+  const unmounted = useRef(false);
+  const latestCount = useRef(effectiveCount);
+  latestCount.current = effectiveCount;
+
+  // Declared before the badge effect so that on a StrictMode remount it runs
+  // first and clears `unmounted` before the badge effect reads it.
+  useEffect(() => {
+    unmounted.current = false;
+    return () => {
+      unmounted.current = true;
+      // Restore the server-rendered favicon by removing our override. Nothing
+      // else in <head> is ours to touch.
+      removeOwnLink();
+      appliedHref.current = null;
+    };
+  }, []);
+
+  // Reads the refs rather than a closure over `count`, so that the reply to an
+  // in-flight fetch — and the MutationObserver below, which outlives any single
+  // render — lands on the newest count, not the one that started it.
+  const apply = useCallback(() => {
+    if (unmounted.current || disabled.current) return;
+
+    const current = latestCount.current;
+    if (current <= 0) {
+      // Clearing the badge is an *insertion*, not a removal.
+      //
+      // The field bug: with 133 unread the tab showed "99+", the user read
+      // everything, the store went to 0 — and Firefox kept painting "99+" until
+      // a hard reload. Removing our link is not an insertion, and Firefox only
+      // re-evaluates the favicon on an insertion; a removal leaves it painting
+      // the last icon it was handed. So instead of deleting our link we replace
+      // it with a fresh one carrying the *original* base href: same pixels as
+      // the untouched base link below it, but handed to the browser as a new
+      // icon, which it does repaint.
+      //
+      // Never badged (`appliedHref` still null)? Then nothing of ours is in
+      // <head> and nothing should be: a fully-read inbox adds no link at all.
+      const base = baseHref.current;
+      if (appliedHref.current === null || base === null) return;
+      if (appliedHref.current === base && ownLink()) return; // already showing the base: no thrash
+
+      setOwnLink(base);
+      appliedHref.current = base;
+      return;
+    }
+
+    const source = baseSource.current;
+    if (source === null) return; // still fetching; the fetch will call back
+
+    const next = renderBadgedFavicon(source, current);
+    if (!next) return;
+    if (next === appliedHref.current && ownLink()) return;
+
+    setOwnLink(next);
+    appliedHref.current = next;
+  }, []);
+
+  useEffect(() => {
+    if (disabled.current) return;
+
+    // Nothing to show and nothing applied: do not even fetch. A fully-read
+    // inbox — or the setting switched off before we ever badged — should cost
+    // no request.
+    if (effectiveCount <= 0 && baseSource.current === null && !fetchStarted.current) return;
+
+    // The base is fetched at most once, ever. Without this guard a StrictMode
+    // double-invoke issues two requests, and any count change while the fetch
+    // is in flight issues another.
+    if (baseSource.current !== null || fetchStarted.current) {
+      apply();
+      return;
+    }
+
+    // The one and only read of the base link. Its href is both what we fetch the
+    // source from and what we hand back to the browser when the badge clears.
+    const link = document.querySelector<HTMLLinkElement>(BASE_SELECTOR);
+    const href = link?.getAttribute('href');
+    if (!href) {
+      disabled.current = true;
+      return;
+    }
+    baseHref.current = href;
+    fetchStarted.current = true;
+
+    void (async () => {
+      try {
+        const response = await fetch(href);
+        if (!response.ok) throw new Error(`favicon fetch failed: ${response.status}`);
+
+        const contentType = response.headers.get('content-type') ?? '';
+        if (!contentType.includes('image/svg+xml')) {
+          throw new Error(`favicon is not SVG: ${contentType || 'unknown'}`);
+        }
+
+        baseSource.current = await response.text();
+        apply();
+      } catch (error) {
+        disabled.current = true;
+        debug.log('[favicon-badge] disabled:', error);
+      }
+    })();
+  }, [effectiveCount, apply]);
+
+  // Keep ours the last icon link in <head>.
+  //
+  // On a client-side navigation (Inbox -> Calendar) Next re-hoists the metadata
+  // <link rel="icon"> from app/(main)/layout.tsx into <head>. The re-inserted
+  // node lands *after* our badge link, the last-declared icon wins, and the
+  // badge vanishes. Coming back to the inbox did not bring it back either: the
+  // count is unchanged, so the effect above never re-ran and our link just sat
+  // there outranked. Watching <head> fixes both halves at once.
+  //
+  // Termination: moving our own link is itself a <head> mutation, so it feeds
+  // the observer a fresh record. The guard is `isLastIconLink` — on that second
+  // run ours *is* last, so we do nothing and the cascade stops. One move per
+  // foreign insertion, never two.
+  const keepOwnLinkLast = useCallback(() => {
+    if (unmounted.current || disabled.current) return;
+    // Ours must stay last in *both* states — badged, and showing the base href
+    // after a clear (`appliedHref` is only null when we have never badged, and
+    // then nothing of ours is in <head> to keep last). Gating this on the count
+    // instead would strand our base-href link behind a re-hoisted React icon,
+    // and the next badge would have to fight its way back on top.
+    if (appliedHref.current === null) return;
+
+    const own = ownLink();
+    if (!own) {
+      // React blew our link away with the rest of the head: re-apply from scratch.
+      apply();
+      return;
+    }
+    if (isLastIconLink(own)) return;
+
+    // Re-appending *our own* element is the only mutation we ever make; a node
+    // we did not create is never removed, moved or touched (see above).
+    document.head.appendChild(own);
+  }, [apply]);
+
+  useEffect(() => {
+    const observer = new MutationObserver(keepOwnLinkLast);
+    observer.observe(document.head, { childList: true });
+    return () => observer.disconnect();
+  }, [keepOwnLinkLast]);
+}
diff --git a/integration/.env.example b/integration/.env.example
new file mode 100644
index 00000000..effb796c
--- /dev/null
+++ b/integration/.env.example
@@ -0,0 +1,11 @@
+# Credentials for the integration-test Stalwart mail server.
+# Copy to `.env` (docker compose reads it automatically): cp .env.example .env
+
+# Recovery admin (format user:password). Stays valid after bootstrap so the
+# Stalwart admin UI on http://localhost:8025 remains reachable and stalwart-cli
+# can be invoked via `docker exec`.
+STALWART_RECOVERY_ADMIN=admin:bootstrap-secret
+
+# Shared password for every test mailbox (alice/bob/carol @ example.org).
+# The Playwright harness reads the same value from IT_ACCOUNT_PASSWORD.
+TEST_ACCOUNT_PASSWORD=test-pass-123
diff --git a/integration/.gitignore b/integration/.gitignore
new file mode 100644
index 00000000..65bfaf02
--- /dev/null
+++ b/integration/.gitignore
@@ -0,0 +1,10 @@
+# Local docker env (copied from .env.example)
+.env
+
+# Arch-specific stalwart-cli binary, fetched by stalwart/prepare-stalwart-cli.sh
+stalwart/stalwart-cli
+
+# Playwright/test artifacts
+node_modules/
+test-results/
+playwright-report/
diff --git a/integration/README.md b/integration/README.md
new file mode 100644
index 00000000..0a5f94ea
--- /dev/null
+++ b/integration/README.md
@@ -0,0 +1,123 @@
+# Integration tests — webmail ⇆ Stalwart
+
+End-to-end tests that run the **Bulwark webmail against a real Stalwart mail
+server** in Docker and drive it with Playwright. The focus is the mail/folder
+**synchronisation** behaviour that multi-account webmail clients get wrong:
+unread/total counters, folder-list sync, and the account-scoped Unified Mailbox.
+
+Everything here is self-contained and separate from the app's root
+`playwright.config.ts` (which only smoke-tests the UI against `npm run dev`).
+
+## What's in the stack
+
+| Service   | Image                                   | Ports (host)                       | Purpose                                                   |
+| --------- | --------------------------------------- | ---------------------------------- | -------------------------------------------------------- |
+| `stalwart`| built from [`stalwart/`](stalwart/)     | `8025` JMAP+admin, `1025` SMTP, `1143` IMAP | Real MTA, declaratively bootstrapped with test mailboxes |
+| `webmail` | built from [`webmail.Dockerfile`](webmail.Dockerfile) | `3000`                | The app under test (Next.js, **dev mode** — see below)   |
+
+Provisioned mailboxes (domain `example.org`, shared password `test-pass-123`):
+`alice`, `bob`, `carol`. Admin: `admin` / `bootstrap-secret`.
+
+### Two things worth knowing
+
+- **The webmail runs in Next.js dev mode.** The browser talks JMAP *directly*
+  to Stalwart at `http://localhost:8025` (cross-origin, plain HTTP). The app's
+  production CSP pins `connect-src` to `'self' https:` and would block that;
+  dev mode widens it to allow `http:`. Dev mode also ships the test hooks from
+  source without a production rebuild. See the header of `webmail.Dockerfile`.
+- **CORS.** Stalwart doesn't emit CORS headers by default. The bootstrap enables
+  `usePermissiveCors` (see `stalwart/plan-accounts.ndjson.tpl`) so the browser
+  origin (`:3000`) may call the JMAP origin (`:8025`).
+
+## Running
+
+```bash
+# One-shot: brings the stack up and runs the whole suite in the Playwright
+# container (browsers preinstalled, host networking to reach the stack).
+integration/run-tests.sh
+
+# A single spec:
+integration/run-tests.sh 01-login
+```
+
+`run-tests.sh` is the recommended entry point because Playwright's browser
+bundles can't always be downloaded/installed on the host; the official
+`mcr.microsoft.com/playwright` image sidesteps that.
+
+### Running against a host browser instead
+
+If you *can* install Playwright browsers on your machine:
+
+```bash
+cd integration && cp .env.example .env
+bash stalwart/prepare-stalwart-cli.sh
+docker compose up -d --build --wait
+npx playwright test -c playwright.integration.config.ts   # from the repo root
+```
+
+The Playwright `globalSetup` brings the stack up for you (unless `IT_NO_DOCKER=1`).
+
+## Layout
+
+```
+integration/
+├── docker-compose.yml            # stalwart + webmail
+├── webmail.Dockerfile            # dev-mode webmail image (built from repo source)
+├── webmail-config/policy.json    # enables the cross-account Unified Mailbox feature gate
+├── run-tests.sh                  # bring up stack + run suite in the Playwright container
+├── stalwart/                     # bootstrap image (adapted from examples/docker/stalwart)
+│   ├── Dockerfile
+│   ├── entrypoint.sh             # two-phase declarative bootstrap
+│   ├── plan-bootstrap.ndjson     # domain + datastore
+│   ├── plan-accounts.ndjson.tpl  # alice/bob/carol + listeners + CORS
+│   └── prepare-stalwart-cli.sh   # host-side fetch of stalwart-cli (offline-friendly build)
+└── tests/
+    ├── global-setup.ts / global-teardown.ts
+    ├── helpers/
+    │   ├── config.ts             # accounts, URLs, ports (env-overridable)
+    │   ├── smtp.ts               # dependency-free SMTP submission client
+    │   ├── jmap.ts               # JMAP client for seeding/inspecting server state
+    │   └── app.ts                # login, add/switch account, folder-counter reads
+    ├── 01-login.spec.ts
+    ├── 02-mail-sync.spec.ts      # single-account: receive/read/move/delete/folder-create
+    └── 03-multi-account.spec.ts  # isolation + cross-account Unified Inbox aggregation
+```
+
+## How the tests work
+
+- **Mutations** are made out-of-band — mail is injected over SMTP
+  (`helpers/smtp.ts`) and server-side reads/moves/deletes/folder-creates are
+  driven over JMAP (`helpers/jmap.ts`). Assertions are on the **rendered UI**,
+  so a test tells you whether the webmail *synced* the change.
+- **Counters** are read from `data-unread` / `data-total` on the
+  `[data-testid="folder-counts"]` element, which makes assertions locale-
+  independent. These and the other `data-testid` hooks (`folder-row`,
+  `email-list-item`, `account-switcher`, `account-option`, `add-account`,
+  `email-composer`, …) were added to the app for these tests.
+- **`forceSync(page)`** dispatches a `visibilitychange` to trigger the client's
+  `checkForStateChanges()` — the same reconcile a real user gets when tabbing
+  back. It makes external-mutation assertions deterministic instead of racing
+  the SSE push channel right after login.
+
+## Environment knobs
+
+| Var             | Default            | Effect                                                     |
+| --------------- | ------------------ | ---------------------------------------------------------- |
+| `IT_NO_DOCKER`  | unset              | `1` = don't manage docker in global-setup (stack already up) |
+| `IT_TEARDOWN`   | unset              | `1` = `docker compose down -v` after the suite             |
+| `IT_WEBMAIL_URL`| `http://localhost:3000` | Webmail origin                                        |
+| `IT_JMAP_URL`   | `http://localhost:8025` | Stalwart JMAP/admin base URL                          |
+| `IT_SMTP_PORT`  | `1025`             | Stalwart submission port                                   |
+
+By default the stack is **left running** after the suite so re-runs are fast and
+you can poke around (webmail on :3000, Stalwart admin on :8025). Tear it down
+with `IT_TEARDOWN=1` or `docker compose -f integration/docker-compose.yml down -v`.
+
+## Resetting
+
+The Stalwart data lives in the `bulwark-it-stalwart-data` volume. To re-run the
+bootstrap from scratch:
+
+```bash
+docker compose -f integration/docker-compose.yml down -v
+```
diff --git a/integration/docker-compose.yml b/integration/docker-compose.yml
new file mode 100644
index 00000000..78530b3e
--- /dev/null
+++ b/integration/docker-compose.yml
@@ -0,0 +1,78 @@
+name: bulwark-integration
+
+# Integration-test backend for the Bulwark webmail. A single Stalwart mail
+# server (JMAP + SMTP submission + IMAP), declaratively bootstrapped with the
+# alice/bob/carol test mailboxes. The webmail itself is started by Playwright
+# (webServer in playwright.integration.config.ts) so the dev-loop / debugger
+# stays on the host; only the hard-to-provision mail backend is containerised.
+
+services:
+  stalwart:
+    build:
+      context: stalwart
+    container_name: bulwark-it-stalwart
+    # JMAP + Webmail + admin on 8025, SMTP submission on 1025 (internal 587),
+    # IMAP on 1143 (internal 143). The browser talks JMAP to localhost:8025;
+    # the test harness submits mail over SMTP to localhost:1025.
+    ports:
+      - "8025:8080"
+      - "1025:587"
+      - "1143:143"
+    volumes:
+      - stalwart-data:/var/lib/stalwart
+      - stalwart-config:/etc/stalwart
+    environment:
+      STALWART_RECOVERY_ADMIN: ${STALWART_RECOVERY_ADMIN:?set in .env}
+      TEST_ACCOUNT_PASSWORD: ${TEST_ACCOUNT_PASSWORD:?set in .env}
+    healthcheck:
+      # /jmap/session answers 200 only once the account bootstrap has finished
+      # and the server is in normal mode.
+      test: ["CMD-SHELL", "curl -fsS -u alice@example.org:$${TEST_ACCOUNT_PASSWORD} http://127.0.0.1:8080/jmap/session >/dev/null || exit 1"]
+      interval: 5s
+      timeout: 5s
+      retries: 30
+      start_period: 30s
+    restart: unless-stopped
+
+  webmail:
+    build:
+      context: ..
+      dockerfile: integration/webmail.Dockerfile
+    container_name: bulwark-it-webmail
+    ports:
+      - "3000:3000"
+    volumes:
+      # Admin policy that turns on the cross-account Unified Mailbox feature
+      # gate (off by default), so the multi-account unified sync tests can
+      # exercise it. Read by /api/admin/policy -> usePolicyStore.isFeatureEnabled.
+      - ./webmail-config/policy.json:/app/data/admin/policy.json:ro
+    environment:
+      # Browser-facing JMAP URL. The browser (Playwright) reaches Stalwart on
+      # the host-published port; the webmail server never fetches this URL
+      # itself for trusted basic-auth logins, so it need not be container-
+      # reachable. Setting JMAP_SERVER_URL also puts the app in "env-managed"
+      # mode, which skips the first-run setup wizard.
+      JMAP_SERVER_URL: http://localhost:8025
+      STALWART_FEATURES: "true"
+      APP_NAME: "Bulwark Webmail (Integration)"
+      # Enables "Remember me" / settings-sync cookies. Not required for the
+      # sync tests but harmless and avoids noisy warnings.
+      SESSION_SECRET: integration-not-a-real-secret
+      LOG_LEVEL: info
+    depends_on:
+      stalwart:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://127.0.0.1:3000/api/health"]
+      interval: 10s
+      timeout: 5s
+      retries: 30
+      # next dev compiles routes lazily; give the first boot ample runway.
+      start_period: 120s
+    restart: unless-stopped
+
+volumes:
+  stalwart-data:
+    name: bulwark-it-stalwart-data
+  stalwart-config:
+    name: bulwark-it-stalwart-config
diff --git a/integration/run-tests.sh b/integration/run-tests.sh
new file mode 100755
index 00000000..27a7919c
--- /dev/null
+++ b/integration/run-tests.sh
@@ -0,0 +1,36 @@
+#!/usr/bin/env bash
+# Run the Playwright integration suite.
+#
+# Playwright's browser download host is often unreachable (and some host OSes
+# aren't supported by the browser bundles), so the tests run inside the official
+# Playwright container, which ships the browsers. The container uses host
+# networking to reach the published stack ports (webmail :3000, Stalwart :8025).
+#
+# The docker stack itself is brought up here (on the host) and the in-container
+# run is told to skip its own docker management via IT_NO_DOCKER=1.
+#
+# Usage:
+#   integration/run-tests.sh                 # whole suite
+#   integration/run-tests.sh 01-login        # a single spec (grep on file name)
+set -euo pipefail
+
+REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+INTEGRATION_DIR="${REPO_ROOT}/integration"
+PW_IMAGE="mcr.microsoft.com/playwright:v1.59.1-noble"
+
+cd "${INTEGRATION_DIR}"
+[ -f .env ] || cp .env.example .env
+
+echo "== bringing up stack =="
+bash stalwart/prepare-stalwart-cli.sh
+docker compose --env-file .env up -d --build --wait --wait-timeout 300
+
+echo "== running Playwright in ${PW_IMAGE} =="
+FILTER="${1:-}"
+docker run --rm --network host \
+  --user "$(id -u):$(id -g)" \
+  -v "${REPO_ROOT}":/work -w /work \
+  -e IT_NO_DOCKER=1 \
+  -e HOME=/tmp \
+  "${PW_IMAGE}" \
+  npx playwright test -c playwright.integration.config.ts ${FILTER:+"$FILTER"}
diff --git a/integration/stalwart/.dockerignore b/integration/stalwart/.dockerignore
new file mode 100644
index 00000000..32b41026
--- /dev/null
+++ b/integration/stalwart/.dockerignore
@@ -0,0 +1,2 @@
+prepare-stalwart-cli.sh
+README.md
diff --git a/integration/stalwart/Dockerfile b/integration/stalwart/Dockerfile
new file mode 100644
index 00000000..0b482eaf
--- /dev/null
+++ b/integration/stalwart/Dockerfile
@@ -0,0 +1,29 @@
+# Stalwart Mail Server with a declarative bootstrap for webmail integration
+# testing.
+#
+# Extends the official image with stalwart-cli and an entrypoint that, on first
+# container start, applies the bootstrap + account plans against the freshly
+# started server. On subsequent starts the `.bootstrap-applied` marker short-
+# circuits both phases and Stalwart boots straight into normal mode.
+#
+# NOTE: stalwart-cli is COPYed in rather than downloaded during the build. The
+# binary is fetched by ./prepare-stalwart-cli.sh (run for you by the Playwright
+# global-setup / integration runner). This keeps the build offline-friendly and
+# avoids the base image's apt sources, which are unreachable in sandboxed CI.
+
+FROM stalwartlabs/stalwart:v0.16
+
+USER root
+
+# Host-prefetched stalwart-cli matching the build architecture.
+COPY stalwart-cli /usr/local/bin/stalwart-cli
+
+RUN mkdir -p /etc/stalwart-bootstrap
+COPY plan-bootstrap.ndjson /etc/stalwart-bootstrap/plan-bootstrap.ndjson
+COPY plan-accounts.ndjson.tpl /etc/stalwart-bootstrap/plan-accounts.ndjson.tpl
+COPY entrypoint.sh /usr/local/bin/stalwart-bootstrap-entrypoint.sh
+RUN chmod +x /usr/local/bin/stalwart-cli /usr/local/bin/stalwart-bootstrap-entrypoint.sh
+
+USER stalwart
+
+ENTRYPOINT ["/usr/local/bin/stalwart-bootstrap-entrypoint.sh"]
diff --git a/integration/stalwart/entrypoint.sh b/integration/stalwart/entrypoint.sh
new file mode 100755
index 00000000..61cdc8fc
--- /dev/null
+++ b/integration/stalwart/entrypoint.sh
@@ -0,0 +1,154 @@
+#!/bin/sh
+# Declarative bootstrap for the integration-test Stalwart Mail Server.
+#
+# Phase 1 (first start only, marker absent):
+#   - Stalwart starts in bootstrap mode (no config.json -> HTTP on :8080).
+#   - plan-bootstrap.ndjson is applied via stalwart-cli. This writes
+#     config.json, initialises RocksDB and creates the default domain +
+#     admin account.
+#   - Stalwart is restarted in normal mode (config.json now exists).
+#   - plan-accounts.ndjson.tpl is materialised with the resolved DOMAIN_ID
+#     and the shared TEST_ACCOUNT_PASSWORD, then applied (test accounts +
+#     submission/IMAP listeners + cleartext auth for the dev lanes).
+#   - Stalwart is stopped and the marker is written.
+#
+# Phase 2 (regular start, marker present):
+#   - exec stalwart as PID 1.
+#
+# Adapted from examples/docker/stalwart for webmail<->Stalwart integration
+# testing: no ticket/service accounts, no Sieve, a single shared password for
+# the alice/bob/carol test mailboxes.
+
+set -eu
+
+# stalwart-cli caches its schema under $HOME/.cache/stalwart-cli. The stalwart
+# user has no home, so redirect to /tmp.
+export HOME=/tmp
+
+DATA_DIR=/var/lib/stalwart
+MARKER="${DATA_DIR}/.bootstrap-applied"
+PLAN_DIR=/etc/stalwart-bootstrap
+STALWART_BIN=/usr/local/bin/stalwart
+STALWART_CLI=/usr/local/bin/stalwart-cli
+STALWART_CFG=/etc/stalwart/config.json
+LOCAL_URL=http://127.0.0.1:8080
+
+log() { printf '[stalwart-bootstrap] %s\n' "$*" >&2; }
+
+wait_for_http() {
+  for _ in $(seq 1 60); do
+    if curl -fsS -u "admin:${ADMIN_PASS}" "${LOCAL_URL}/jmap/session" >/dev/null 2>&1; then
+      return 0
+    fi
+    sleep 1
+  done
+  log "Stalwart HTTP on :8080 did not come up in time"
+  return 1
+}
+
+run_stalwart_bg() {
+  "${STALWART_BIN}" --config "${STALWART_CFG}" &
+  STALWART_PID=$!
+}
+
+stop_stalwart_bg() {
+  if [ -n "${STALWART_PID:-}" ]; then
+    kill -TERM "${STALWART_PID}" 2>/dev/null || true
+    wait "${STALWART_PID}" 2>/dev/null || true
+    STALWART_PID=
+  fi
+}
+
+if [ ! -f "${MARKER}" ]; then
+  : "${STALWART_RECOVERY_ADMIN:?must be set for first-run bootstrap}"
+  : "${TEST_ACCOUNT_PASSWORD:?must be set for first-run bootstrap}"
+
+  ADMIN_PASS=${STALWART_RECOVERY_ADMIN#*:}
+
+  log "Phase 1: starting Stalwart in bootstrap mode"
+  run_stalwart_bg
+  wait_for_http
+
+  log "Applying plan-bootstrap.ndjson"
+  STALWART_URL=${LOCAL_URL} \
+  STALWART_USER=admin \
+  STALWART_PASSWORD=${ADMIN_PASS} \
+    "${STALWART_CLI}" apply --file "${PLAN_DIR}/plan-bootstrap.ndjson" --quiet
+
+  log "Restarting Stalwart to leave bootstrap mode"
+  stop_stalwart_bg
+  run_stalwart_bg
+  wait_for_http
+
+  log "Resolving DOMAIN_ID for example.org"
+  DOMAIN_ID=$(STALWART_URL=${LOCAL_URL} STALWART_USER=admin STALWART_PASSWORD=${ADMIN_PASS} \
+    "${STALWART_CLI}" query Domain --json 2>/dev/null \
+    | head -1 \
+    | sed -E 's/.*"id":"([^"]+)".*/\1/')
+  if [ -z "${DOMAIN_ID}" ]; then
+    log "Could not resolve DOMAIN_ID after bootstrap"
+    stop_stalwart_bg
+    exit 1
+  fi
+  log "DOMAIN_ID=${DOMAIN_ID}"
+
+  # Materialise the account plan. gettext/envsubst is not in the base image,
+  # so substitute the two placeholders with sed. Passwords are escaped for the
+  # sed replacement (& and / are the only metacharacters that matter here).
+  PLAN_ACCOUNTS=/tmp/plan-accounts.ndjson
+  esc_pw=$(printf '%s' "${TEST_ACCOUNT_PASSWORD}" | sed -e 's/[&/\\]/\\&/g')
+  sed -e "s/\${DOMAIN_ID}/${DOMAIN_ID}/g" \
+      -e "s/\${TEST_ACCOUNT_PASSWORD}/${esc_pw}/g" \
+      "${PLAN_DIR}/plan-accounts.ndjson.tpl" > "${PLAN_ACCOUNTS}"
+
+  log "Applying plan-accounts.ndjson"
+  STALWART_URL=${LOCAL_URL} \
+  STALWART_USER=admin \
+  STALWART_PASSWORD=${ADMIN_PASS} \
+    "${STALWART_CLI}" apply --file "${PLAN_ACCOUNTS}" --quiet
+  rm -f "${PLAN_ACCOUNTS}"
+
+  # Make 'carol' a member of the 'team' group *before her first login*, so she
+  # already has the shared group mailbox (its folders show under "Shared") and
+  # the team@ send-as identity. This provisions the issue #569 scenario: the
+  # composer's From dropdown should then offer the group address. Membership is
+  # a set keyed by the group's server-assigned account id (see the User schema's
+  # memberGroupIds), so the ids are resolved here, mirroring DOMAIN_ID above.
+  # carol (not alice/bob) is used so the single-/multi-account sync specs, which
+  # drive alice and bob, keep a clean unshared environment.
+  q_account_id() {
+    STALWART_URL=${LOCAL_URL} STALWART_USER=admin STALWART_PASSWORD=${ADMIN_PASS} \
+      "${STALWART_CLI}" query Account --json 2>/dev/null \
+      | grep "\"emailAddress\":\"$1\"" \
+      | sed -E 's/.*"id":"([^"]+)".*/\1/'
+  }
+  CAROL_ID=$(q_account_id "carol@example.org")
+  TEAM_ID=$(q_account_id "team@example.org")
+  if [ -n "${CAROL_ID}" ] && [ -n "${TEAM_ID}" ]; then
+    log "Adding carol (${CAROL_ID}) to the team group (${TEAM_ID}) [issue #569]"
+    STALWART_URL=${LOCAL_URL} STALWART_USER=admin STALWART_PASSWORD=${ADMIN_PASS} \
+      "${STALWART_CLI}" update Account "${CAROL_ID}" \
+        --field "memberGroupIds={\"${TEAM_ID}\":true}" >/dev/null
+  else
+    log "WARNING: could not resolve account ids (carol='${CAROL_ID}' team='${TEAM_ID}'); skipping group membership"
+  fi
+
+  # Default inbound throttles (sender->recipient + sender-IP) otherwise trip
+  # 452 4.4.5 when a test blasts many messages. Stalwart re-seeds the defaults
+  # on every start when absent, so deleting is useless; disable them instead,
+  # which survives restarts.
+  for tid in $(STALWART_URL=${LOCAL_URL} STALWART_USER=admin STALWART_PASSWORD=${ADMIN_PASS} \
+      "${STALWART_CLI}" query MtaInboundThrottle --json 2>/dev/null \
+      | sed -E 's/.*"id":"([^"]+)".*/\1/'); do
+    log "Disabling MtaInboundThrottle ${tid}"
+    STALWART_URL=${LOCAL_URL} STALWART_USER=admin STALWART_PASSWORD=${ADMIN_PASS} \
+      "${STALWART_CLI}" update MtaInboundThrottle "${tid}" --field enable=false >/dev/null
+  done
+
+  log "Stopping bootstrap instance, marking complete"
+  stop_stalwart_bg
+  touch "${MARKER}"
+fi
+
+log "Starting Stalwart (final, foreground)"
+exec "${STALWART_BIN}" --config "${STALWART_CFG}"
diff --git a/integration/stalwart/plan-accounts.ndjson.tpl b/integration/stalwart/plan-accounts.ndjson.tpl
new file mode 100644
index 00000000..aaf58263
--- /dev/null
+++ b/integration/stalwart/plan-accounts.ndjson.tpl
@@ -0,0 +1,9 @@
+{"@type":"create","object":"Account","value":{"alice":{"@type":"User","name":"alice","domainId":"${DOMAIN_ID}","description":"Integration test mailbox alice","credentials":{"0":{"@type":"Password","secret":"${TEST_ACCOUNT_PASSWORD}"}}}}}
+{"@type":"create","object":"Account","value":{"bob":{"@type":"User","name":"bob","domainId":"${DOMAIN_ID}","description":"Integration test mailbox bob","credentials":{"0":{"@type":"Password","secret":"${TEST_ACCOUNT_PASSWORD}"}}}}}
+{"@type":"create","object":"Account","value":{"carol":{"@type":"User","name":"carol","domainId":"${DOMAIN_ID}","description":"Integration test mailbox carol","credentials":{"0":{"@type":"Password","secret":"${TEST_ACCOUNT_PASSWORD}"}}}}}
+{"@type":"create","object":"Account","value":{"team":{"@type":"Group","name":"team","domainId":"${DOMAIN_ID}","description":"Team shared mailbox"}}}
+{"@type":"create","object":"NetworkListener","value":{"submission":{"name":"submission","protocol":"smtp","bind":{"[::]:587":true},"tlsImplicit":false,"useTls":false,"socketReuseAddress":true,"socketNoDelay":true}}}
+{"@type":"create","object":"NetworkListener","value":{"imap":{"name":"imap","protocol":"imap","bind":{"[::]:143":true},"tlsImplicit":false,"useTls":false,"socketReuseAddress":true,"socketNoDelay":true}}}
+{"@type":"update","object":"MtaStageAuth","value":{"saslMechanisms":{"match":{"0":{"if":"local_port != 25","then":"[plain, login, oauthbearer, xoauth2]"}},"else":"false"}}}
+{"@type":"update","object":"Imap","value":{"allowPlainTextAuth":true}}
+{"@type":"update","object":"Http","value":{"usePermissiveCors":true}}
diff --git a/integration/stalwart/plan-bootstrap.ndjson b/integration/stalwart/plan-bootstrap.ndjson
new file mode 100644
index 00000000..5879357b
--- /dev/null
+++ b/integration/stalwart/plan-bootstrap.ndjson
@@ -0,0 +1 @@
+{"@type":"update","object":"Bootstrap","value":{"serverHostname":"mail.example.org","defaultDomain":"example.org","generateDkimKeys":false,"requestTlsCertificate":false,"dataStore":{"@type":"RocksDb","path":"/var/lib/stalwart/data","blobSize":16834,"bufferSize":134217728}}}
diff --git a/integration/stalwart/prepare-stalwart-cli.sh b/integration/stalwart/prepare-stalwart-cli.sh
new file mode 100755
index 00000000..17e67e8f
--- /dev/null
+++ b/integration/stalwart/prepare-stalwart-cli.sh
@@ -0,0 +1,48 @@
+#!/usr/bin/env bash
+# Fetch the stalwart-cli binary used by the Stalwart bootstrap image.
+#
+# The Dockerfile COPYs ./stalwart-cli instead of downloading it during the
+# build, because the base image's apt sources and the build network are
+# unreachable in the sandboxed CI environment. This script does the fetch on
+# the host (which has working outbound HTTPS) and extracts the binary with
+# Python's lzma module (xz is not guaranteed to be installed).
+#
+# Idempotent: skips the download when a matching binary already exists.
+set -euo pipefail
+
+CLI_VERSION="${STALWART_CLI_VERSION:-1.0.6}"
+HERE="$(cd "$(dirname "$0")" && pwd)"
+OUT="${HERE}/stalwart-cli"
+
+case "$(uname -m)" in
+  x86_64)  TRIPLE=x86_64-unknown-linux-gnu ;;
+  aarch64|arm64) TRIPLE=aarch64-unknown-linux-gnu ;;
+  *) echo "Unsupported architecture: $(uname -m)" >&2; exit 1 ;;
+esac
+
+if [ -x "${OUT}" ] && "${OUT}" --version 2>/dev/null | grep -q "${CLI_VERSION}"; then
+  echo "stalwart-cli ${CLI_VERSION} already present at ${OUT}"
+  exit 0
+fi
+
+URL="https://github.com/stalwartlabs/cli/releases/download/v${CLI_VERSION}/stalwart-cli-${TRIPLE}.tar.xz"
+TARBALL="$(mktemp)"
+trap 'rm -f "${TARBALL}"' EXIT
+
+echo "Downloading ${URL}"
+curl -sfL -o "${TARBALL}" "${URL}"
+
+python3 - "${TARBALL}" "${OUT}" <<'PY'
+import io, lzma, os, sys, tarfile
+tarball, out = sys.argv[1], sys.argv[2]
+with lzma.open(tarball) as f:
+    data = f.read()
+tf = tarfile.open(fileobj=io.BytesIO(data))
+member = next(m for m in tf.getmembers() if m.name.endswith("stalwart-cli"))
+with open(out, "wb") as w:
+    w.write(tf.extractfile(member).read())
+os.chmod(out, 0o755)
+print(f"wrote {out}")
+PY
+
+"${OUT}" --version
diff --git a/integration/tests/01-login.spec.ts b/integration/tests/01-login.spec.ts
new file mode 100644
index 00000000..9e13c2e7
--- /dev/null
+++ b/integration/tests/01-login.spec.ts
@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test';
+import { ACCOUNTS } from './helpers/config';
+import { login, folderRow, accountSwitcher, activeAccountEmail } from './helpers/app';
+import { JmapClient } from './helpers/jmap';
+
+test.describe('Login & session', () => {
+  test('logs in against Stalwart and loads the mailbox', async ({ page }) => {
+    await login(page, ACCOUNTS.alice);
+
+    // The Inbox folder row is a reliable "mailbox loaded" signal.
+    await expect(folderRow(page, { role: 'inbox' }).first()).toBeVisible();
+
+    // The active account in the switcher is alice. The account id is
+    // `${email}@${serverHost}`, so assert on the email it reports instead.
+    await expect(accountSwitcher(page)).toBeVisible();
+    expect(await activeAccountEmail(page)).toBe(ACCOUNTS.alice.email);
+  });
+
+  test('rejects invalid credentials', async ({ page }) => {
+    await page.goto('/');
+    await page.fill('#username', ACCOUNTS.alice.email);
+    await page.fill('#password', 'definitely-wrong');
+    await page.click('button[type="submit"]');
+    await expect(
+      page.locator('[role="alert"], .text-red-600, .text-destructive').first(),
+    ).toBeVisible({ timeout: 15000 });
+  });
+
+  test('JMAP helper can reach every provisioned account', async () => {
+    for (const acct of Object.values(ACCOUNTS)) {
+      const client = await JmapClient.connect(acct.email, acct.password);
+      expect(client.accountId).toBeTruthy();
+      const inbox = await client.mailboxByRole('inbox');
+      expect(inbox, `${acct.email} has an inbox`).toBeTruthy();
+    }
+  });
+});
diff --git a/integration/tests/02-mail-sync.spec.ts b/integration/tests/02-mail-sync.spec.ts
new file mode 100644
index 00000000..f03453f8
--- /dev/null
+++ b/integration/tests/02-mail-sync.spec.ts
@@ -0,0 +1,125 @@
+import { test, expect } from '@playwright/test';
+import { ACCOUNTS } from './helpers/config';
+import { sendMail } from './helpers/smtp';
+import { JmapClient } from './helpers/jmap';
+import {
+  login,
+  folderRow,
+  folderCounts,
+  expectFolderUnread,
+  expectFolderTotal,
+  emailItem,
+  expectEmailVisible,
+  forceSync,
+} from './helpers/app';
+
+/**
+ * Single-account mail & folder synchronisation.
+ *
+ * These exercise the webmail's ability to reflect *external* changes to the
+ * mailbox — new deliveries, server-side reads/moves/deletes, and folder
+ * creation — which is where "my counts are wrong / my folder didn't show up"
+ * sync bugs live. Mutations are made over SMTP/JMAP and the assertions are on
+ * the rendered UI.
+ */
+const alice = ACCOUNTS.alice;
+
+// Unique subject per test run avoids cross-test contamination if a reset lags.
+let seq = 0;
+const subj = (label: string) => `IT ${label} ${Date.now()}-${seq++}`;
+
+test.describe('Single-account sync', () => {
+  let jmap: JmapClient;
+
+  test.beforeEach(async () => {
+    jmap = await JmapClient.connect(alice.email, alice.password);
+    await jmap.reset();
+  });
+
+  test('incoming mail appears and bumps the Inbox unread counter', async ({ page }) => {
+    await login(page, alice);
+    await expectFolderUnread(page, { role: 'inbox' }, 0);
+
+    const subject = subj('incoming');
+    await sendMail({ from: alice.email, authPass: alice.password, to: alice.email, subject, body: 'hi' });
+
+    await expectFolderUnread(page, { role: 'inbox' }, 1);
+    await expectEmailVisible(page, subject);
+  });
+
+  test('opening a message clears its unread state (UI -> server -> counter)', async ({ page }) => {
+    const subject = subj('read');
+    await sendMail({ from: alice.email, authPass: alice.password, to: alice.email, subject, body: 'read me' });
+    await jmap.waitForEmail(subject);
+
+    await login(page, alice);
+    await expectFolderUnread(page, { role: 'inbox' }, 1);
+
+    await emailItem(page, subject).first().click();
+    await expectFolderUnread(page, { role: 'inbox' }, 0);
+  });
+
+  test('a folder created on the server shows up in the sidebar', async ({ page }) => {
+    await login(page, alice);
+    await expect(folderRow(page, { name: 'SyncFolder' })).toHaveCount(0);
+
+    await jmap.createMailbox('SyncFolder');
+
+    await expect(folderRow(page, { name: 'SyncFolder' }).first()).toBeVisible({ timeout: 20000 });
+  });
+
+  test('a server-side move updates both source and destination counters', async ({ page }) => {
+    const subject = subj('move');
+    await sendMail({ from: alice.email, authPass: alice.password, to: alice.email, subject, body: 'move me' });
+    const email = await jmap.waitForEmail(subject);
+
+    await login(page, alice);
+    await expectFolderUnread(page, { role: 'inbox' }, 1);
+
+    // Create destination + move the message there (server-side).
+    const destId = await jmap.createMailbox('Archive2');
+    const inbox = await jmap.mailboxByRole('inbox');
+    await jmap.request([
+      ['Email/set', { accountId: jmap.accountId, update: { [email.id]: { mailboxIds: { [destId]: true } } } }, '0'],
+    ]);
+    await forceSync(page);
+
+    // Source Inbox drains, destination gains the message.
+    await expectFolderUnread(page, { role: 'inbox' }, 0);
+    await expectFolderTotal(page, { name: 'Archive2' }, 1);
+    expect(inbox).toBeTruthy();
+  });
+
+  test('a server-side delete drains the Inbox total', async ({ page }) => {
+    const subject = subj('delete');
+    await sendMail({ from: alice.email, authPass: alice.password, to: alice.email, subject, body: 'delete me' });
+    const email = await jmap.waitForEmail(subject);
+
+    await login(page, alice);
+    await expectFolderTotal(page, { role: 'inbox' }, 1);
+
+    await jmap.request([['Email/set', { accountId: jmap.accountId, destroy: [email.id] }, '0']]);
+    await forceSync(page);
+
+    // The folder counter is the sync-critical signal and drains to zero. (The
+    // already-rendered list view is not re-queried on a background delete, so
+    // we don't assert on the row disappearing here.)
+    await expectFolderTotal(page, { role: 'inbox' }, 0);
+    await expectFolderUnread(page, { role: 'inbox' }, 0);
+  });
+
+  test('counts are consistent between server and UI after a burst of deliveries', async ({ page }) => {
+    await login(page, alice);
+    await expectFolderUnread(page, { role: 'inbox' }, 0);
+
+    const subjects = Array.from({ length: 3 }, (_, i) => subj(`burst-${i}`));
+    for (const s of subjects) {
+      await sendMail({ from: alice.email, authPass: alice.password, to: alice.email, subject: s, body: 'burst' });
+    }
+
+    await expectFolderUnread(page, { role: 'inbox' }, 3);
+    const counts = await folderCounts(page, { role: 'inbox' });
+    expect(counts.total).toBe(3);
+    for (const s of subjects) await expectEmailVisible(page, s);
+  });
+});
diff --git a/integration/tests/03-multi-account.spec.ts b/integration/tests/03-multi-account.spec.ts
new file mode 100644
index 00000000..4a007663
--- /dev/null
+++ b/integration/tests/03-multi-account.spec.ts
@@ -0,0 +1,104 @@
+import { test, expect } from '@playwright/test';
+import { ACCOUNTS } from './helpers/config';
+import { sendMail } from './helpers/smtp';
+import { JmapClient } from './helpers/jmap';
+import {
+  login,
+  addAccount,
+  switchAccount,
+  accountSwitcher,
+  seedUnifiedSettings,
+  folderRow,
+  expectFolderUnread,
+  expectFolderTotal,
+  forceSync,
+} from './helpers/app';
+
+/**
+ * Multi-account synchronisation — the account-scoped Unified Mailbox.
+ *
+ * Covers the two failure modes that dog multi-account webmail: counters
+ * bleeding between accounts, and the cross-account unified view mis-aggregating
+ * (or not updating when a background account receives mail).
+ */
+const { alice, bob } = ACCOUNTS;
+
+let seq = 0;
+const subj = (l: string) => `IT ${l} ${Date.now()}-${seq++}`;
+
+async function send(to: typeof alice, subject: string) {
+  await sendMail({ from: to.email, authPass: to.password, to: to.email, subject, body: 'x' });
+}
+
+test.describe('Multi-account sync', () => {
+  test.beforeEach(async () => {
+    for (const a of [alice, bob]) {
+      const j = await JmapClient.connect(a.email, a.password);
+      await j.reset();
+    }
+  });
+
+  test('both accounts connect and their Inbox counters stay isolated', async ({ page }) => {
+    // Pre-seed: two unread for alice, one for bob.
+    await send(alice, subj('iso-a1'));
+    await send(alice, subj('iso-a2'));
+    await send(bob, subj('iso-b1'));
+
+    await login(page, alice);
+    // Active = alice: her own Inbox shows 2 unread.
+    await expectFolderUnread(page, { role: 'inbox', name: 'Inbox' }, 2);
+
+    await addAccount(page, bob);
+    await forceSync(page);
+    // Both accounts are now registered in the switcher.
+    await accountSwitcher(page).click();
+    await expect(page.locator('[data-testid="account-option"]')).toHaveCount(2);
+    await page.keyboard.press('Escape');
+
+    // Active = bob: his own Inbox shows 1 unread — alice's 2 don't leak in.
+    await expectFolderUnread(page, { role: 'inbox', name: 'Inbox' }, 1);
+
+    // Switch back to alice: her count is intact.
+    await switchAccount(page, alice.email);
+    await expectFolderUnread(page, { role: 'inbox', name: 'Inbox' }, 2);
+  });
+
+  test('the cross-account Unified Inbox aggregates unread across accounts', async ({ page }) => {
+    await send(alice, subj('agg-a'));
+    await send(bob, subj('agg-b'));
+
+    await seedUnifiedSettings(page);
+    await login(page, alice);
+    await addAccount(page, bob);
+    await forceSync(page);
+
+    // Unified Inbox = alice(1) + bob(1) = 2. The active account's own Inbox
+    // (bob) still reports just its own 1.
+    await expect(folderRow(page, { name: 'unified-inbox' }).first()).toBeVisible();
+    await expectFolderUnread(page, { name: 'unified-inbox' }, 2);
+    await expectFolderTotal(page, { name: 'unified-inbox' }, 2);
+    await expectFolderUnread(page, { role: 'inbox', name: 'Inbox' }, 1);
+  });
+
+  // fixme: the unified counter for a *background* (non-active) account is not
+  // updated live on this branch — the background-push counter fix lives in the
+  // unified-mailbox feature commits (single-source unified counters / keep
+  // unified counters current for shared accounts), which sit on
+  // feat/unified-mailbox-account-scope, not on this harness-only base branch.
+  test.fixme('a delivery to a background account bumps the Unified Inbox counter', async ({ page }) => {
+    await seedUnifiedSettings(page);
+    await login(page, alice);
+    await addAccount(page, bob); // bob is now the active account
+    await forceSync(page);
+    await expectFolderUnread(page, { name: 'unified-inbox' }, 0);
+
+    // Mail lands in alice's inbox while bob is the active account.
+    await send(alice, subj('bg'));
+    await forceSync(page);
+
+    // The unified counter reflects the background account's new mail.
+    await expectFolderUnread(page, { name: 'unified-inbox' }, 1);
+    // bob (active) own Inbox is unaffected.
+    await expectFolderUnread(page, { role: 'inbox', name: 'Inbox' }, 0);
+  });
+});
diff --git a/integration/tests/04-shared-identity.spec.ts b/integration/tests/04-shared-identity.spec.ts
new file mode 100644
index 00000000..a47a7250
--- /dev/null
+++ b/integration/tests/04-shared-identity.spec.ts
@@ -0,0 +1,59 @@
+import { test, expect } from '@playwright/test';
+import { ACCOUNTS, GROUP } from './helpers/config';
+import { JmapClient } from './helpers/jmap';
+import { login, forceSync, openComposer, composerFromOptions } from './helpers/app';
+
+/**
+ * Issue #569 — the composer's "From" dropdown should include identities from
+ * shared/group accounts, not only the logged-in (connected) accounts.
+ *
+ * Scenario under test (the one expected to already work): a Stalwart *group*
+ * mailbox `team@example.org` is provisioned and `carol` is made a member of it
+ * *before her first login* (integration/stalwart/plan-accounts.ndjson.tpl +
+ * entrypoint.sh). As a member she gets the group's shared folders (shown under
+ * "Shared") and — per Stalwart — a `team@` send-as identity (Stalwart returns
+ * it among the member's own account identities). The composer should therefore
+ * offer `team@example.org` as a sender alongside her own address.
+ */
+const member = ACCOUNTS[GROUP.team.memberOf];
+const { team } = GROUP;
+
+test.describe('Composer From: shared/group identities (issue #569)', () => {
+  test('the pre-provisioned group account is reachable in the member’s JMAP session', async () => {
+    // Server-side guard for the UI expectation below: if this fails, the
+    // bootstrap group provisioning is broken (not the app). The member must see
+    // the group account in her session, and it must expose a team@ identity she
+    // can send as.
+    const memberClient = await JmapClient.connect(member.email, member.password);
+    expect(memberClient.sharedAccountNames()).toContain(team.email);
+
+    const groupAccountId = Object.entries(memberClient.accounts).find(
+      ([, name]) => name === team.email,
+    )?.[0];
+    expect(groupAccountId).toBeTruthy();
+
+    const res = await memberClient.request([
+      ['Identity/get', { accountId: groupAccountId! }, '0'],
+    ]);
+    const groupIdentityEmails = (res.methodResponses[0][1].list as { email: string }[]).map(
+      (i) => i.email,
+    );
+    expect(groupIdentityEmails).toContain(team.email);
+  });
+
+  test('the composer From selector offers the group address', async ({ page }) => {
+    await login(page, member);
+    // Shared accounts/identities are discovered from the JMAP session; give the
+    // client a beat to settle them after the first render.
+    await forceSync(page);
+
+    await openComposer(page);
+
+    // The group address alice can send as should be one of the From choices.
+    // If #569 is unaddressed the control collapses to her own address only and
+    // this poll times out — which is the point: it pins the expected behaviour.
+    await expect
+      .poll(async () => (await composerFromOptions(page)).join(' | '), { timeout: 15000 })
+      .toContain(team.email);
+  });
+});
diff --git a/integration/tests/global-setup.ts b/integration/tests/global-setup.ts
new file mode 100644
index 00000000..234253dd
--- /dev/null
+++ b/integration/tests/global-setup.ts
@@ -0,0 +1,64 @@
+/**
+ * Brings the integration stack up before the suite runs:
+ *   1. fetch the arch-specific stalwart-cli (offline-friendly build input),
+ *   2. ensure integration/.env exists (compose credentials),
+ *   3. docker compose up -d --build --wait (Stalwart + webmail),
+ *   4. block until Stalwart JMAP and the webmail health endpoint answer.
+ *
+ * Set IT_NO_DOCKER=1 to skip container management entirely (useful when the
+ * stack is already running, e.g. during test authoring against `npm run dev`).
+ */
+import { execFileSync } from 'node:child_process';
+import { existsSync, copyFileSync } from 'node:fs';
+import path from 'node:path';
+import { JMAP_URL, WEBMAIL_URL, ACCOUNTS, ACCOUNT_PASSWORD } from './helpers/config';
+
+const INTEGRATION_DIR = path.resolve(__dirname, '..');
+const COMPOSE_FILE = path.join(INTEGRATION_DIR, 'docker-compose.yml');
+const ENV_FILE = path.join(INTEGRATION_DIR, '.env');
+
+function run(cmd: string, args: string[], cwd = INTEGRATION_DIR): void {
+  execFileSync(cmd, args, { cwd, stdio: 'inherit' });
+}
+
+async function waitFor(label: string, url: string, check: (r: Response) => boolean, timeoutMs = 240000): Promise<void> {
+  const deadline = Date.now() + timeoutMs;
+  for (;;) {
+    try {
+      const res = await fetch(url, { headers: { Authorization: 'Basic ' + Buffer.from(`${ACCOUNTS.alice.email}:${ACCOUNT_PASSWORD}`).toString('base64') } });
+      if (check(res)) return;
+    } catch {
+      /* not up yet */
+    }
+    if (Date.now() > deadline) throw new Error(`Timed out waiting for ${label} at ${url}`);
+    await new Promise((r) => setTimeout(r, 2000));
+  }
+}
+
+export default async function globalSetup(): Promise<void> {
+  if (process.env.IT_NO_DOCKER === '1') {
+    console.log('[global-setup] IT_NO_DOCKER=1 — skipping docker compose management');
+  } else {
+    console.log('[global-setup] fetching stalwart-cli');
+    run('bash', [path.join(INTEGRATION_DIR, 'stalwart', 'prepare-stalwart-cli.sh')]);
+
+    if (!existsSync(ENV_FILE)) {
+      console.log('[global-setup] creating integration/.env from .env.example');
+      copyFileSync(path.join(INTEGRATION_DIR, '.env.example'), ENV_FILE);
+    }
+
+    console.log('[global-setup] docker compose up -d --build --wait');
+    run('docker', [
+      'compose', '-f', COMPOSE_FILE, '--env-file', ENV_FILE,
+      'up', '-d', '--build', '--wait', '--wait-timeout', '300',
+    ]);
+  }
+
+  console.log('[global-setup] waiting for Stalwart JMAP');
+  await waitFor('Stalwart JMAP', `${JMAP_URL}/jmap/session`, (r) => r.ok);
+
+  console.log('[global-setup] waiting for webmail');
+  await waitFor('webmail', `${WEBMAIL_URL}/api/health`, (r) => r.ok, 240000);
+
+  console.log('[global-setup] stack ready');
+}
diff --git a/integration/tests/global-teardown.ts b/integration/tests/global-teardown.ts
new file mode 100644
index 00000000..256183f4
--- /dev/null
+++ b/integration/tests/global-teardown.ts
@@ -0,0 +1,23 @@
+/**
+ * By default the stack is left running after the suite so re-runs are fast and
+ * the state can be inspected (webmail on :3000, Stalwart admin on :8025).
+ * Set IT_TEARDOWN=1 to tear the containers (and volumes) down instead.
+ */
+import { execFileSync } from 'node:child_process';
+import path from 'node:path';
+
+const INTEGRATION_DIR = path.resolve(__dirname, '..');
+const COMPOSE_FILE = path.join(INTEGRATION_DIR, 'docker-compose.yml');
+const ENV_FILE = path.join(INTEGRATION_DIR, '.env');
+
+export default async function globalTeardown(): Promise<void> {
+  if (process.env.IT_TEARDOWN !== '1' || process.env.IT_NO_DOCKER === '1') {
+    console.log('[global-teardown] leaving stack up (set IT_TEARDOWN=1 to remove it)');
+    return;
+  }
+  console.log('[global-teardown] docker compose down -v');
+  execFileSync('docker', ['compose', '-f', COMPOSE_FILE, '--env-file', ENV_FILE, 'down', '-v'], {
+    cwd: INTEGRATION_DIR,
+    stdio: 'inherit',
+  });
+}
diff --git a/integration/tests/helpers/app.ts b/integration/tests/helpers/app.ts
new file mode 100644
index 00000000..7922d4ab
--- /dev/null
+++ b/integration/tests/helpers/app.ts
@@ -0,0 +1,205 @@
+/**
+ * Page-level helpers for driving the Bulwark webmail in integration tests.
+ *
+ * Selectors rely on the data-testid hooks added to the mail UI (sidebar folder
+ * rows + counters, account switcher, composer). Folder counters are read from
+ * the `data-unread` / `data-total` attributes on `[data-testid=folder-counts]`
+ * rather than parsing rendered text, so assertions are locale-independent.
+ */
+import { expect, type Page, type Locator } from '@playwright/test';
+import type { TestAccount } from './config';
+
+/**
+ * The account switcher renders twice (collapsed nav rail + expanded sidebar);
+ * both carry the same data-testid and state, so always target the first.
+ */
+export function accountSwitcher(page: Page): Locator {
+  return page.locator('[data-testid="account-switcher"]').first();
+}
+
+/**
+ * The Next.js dev-mode overlay (`<nextjs-portal>`) sits in the bottom-left
+ * corner and intercepts pointer events over the account switcher. Disable
+ * pointer events on the portal host (light DOM) so it can't swallow clicks.
+ * Registered as an init script so it survives navigations within the test.
+ */
+export async function neutralizeDevOverlay(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    const inject = () => {
+      const s = document.createElement('style');
+      s.textContent = 'nextjs-portal{pointer-events:none!important}';
+      document.documentElement.appendChild(s);
+    };
+    if (document.documentElement) inject();
+    else document.addEventListener('DOMContentLoaded', inject);
+  });
+}
+
+/**
+ * Enable the cross-account Unified Mailbox before the app boots by seeding the
+ * persisted settings store. Requires the `unifiedCrossAccountEnabled` admin
+ * feature gate (provided by integration/webmail-config/policy.json). Must be
+ * called before {@link login} so the init script is registered before the
+ * first navigation.
+ */
+export async function seedUnifiedSettings(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    localStorage.setItem(
+      'settings-storage',
+      JSON.stringify({
+        state: { enableUnifiedMailbox: true, unifiedCrossAccount: true, includeGroupInUnified: true },
+        version: 7,
+      }),
+    );
+  });
+}
+
+/** Fill and submit the login form (works for first login and add-account). */
+async function submitCredentials(page: Page, account: TestAccount): Promise<void> {
+  await page.locator('#username').waitFor({ state: 'visible', timeout: 30000 });
+  await page.fill('#username', account.email);
+  await page.fill('#password', account.password);
+  await page.click('button[type="submit"]');
+}
+
+/** Log in as `account` from a clean context and wait for the mailbox to load. */
+export async function login(page: Page, account: TestAccount): Promise<void> {
+  await neutralizeDevOverlay(page);
+  await page.goto('/');
+  await submitCredentials(page, account);
+  // Landed in the app once the account switcher (sidebar chrome) is present.
+  await accountSwitcher(page).waitFor({ state: 'visible', timeout: 30000 });
+}
+
+/** Add a second (or later) account via the account switcher + login form. */
+export async function addAccount(page: Page, account: TestAccount): Promise<void> {
+  await accountSwitcher(page).click();
+  await page.locator('[data-testid="add-account"]').click();
+  await submitCredentials(page, account);
+  // Wait until the switcher reports the newly added account as active.
+  await expect
+    .poll(async () => activeAccountEmail(page), { timeout: 30000 })
+    .toBe(account.email);
+}
+
+/** Email of the currently active account, read from the switcher option list. */
+export async function activeAccountEmail(page: Page): Promise<string | null> {
+  const switcher = accountSwitcher(page);
+  const id = await switcher.getAttribute('data-active-account-id');
+  if (!id) return null;
+  await switcher.click();
+  const email = await page
+    .locator(`[data-testid="account-option"][data-account-id="${id}"]`)
+    .first()
+    .getAttribute('data-account-email');
+  // Close the popover again.
+  await page.keyboard.press('Escape');
+  return email;
+}
+
+/** Switch the active account to the one matching `email`. */
+export async function switchAccount(page: Page, email: string): Promise<void> {
+  await accountSwitcher(page).click();
+  await page.locator(`[data-testid="account-option"][data-account-email="${email}"]`).first().click();
+  await expect.poll(async () => activeAccountEmail(page), { timeout: 30000 }).toBe(email);
+}
+
+/**
+ * Nudge the app to reconcile mailbox state immediately.
+ *
+ * The JMAP client refetches on `visibilitychange` (tab focus) via
+ * checkForStateChanges(). Dispatching it makes reconciliation deterministic
+ * after an *external* mutation, sidestepping the small window right after
+ * login where a change can land before the SSE push channel has settled.
+ * Mirrors what happens when a real user tabs back to the mailbox.
+ */
+export async function forceSync(page: Page): Promise<void> {
+  await page.evaluate(() => document.dispatchEvent(new Event('visibilitychange')));
+}
+
+export interface FolderSelector {
+  role?: string;
+  name?: string;
+  mailboxId?: string;
+}
+
+/** Locator for a sidebar folder row. */
+export function folderRow(page: Page, sel: FolderSelector): Locator {
+  let s = '[data-testid="folder-row"]';
+  if (sel.role) s += `[data-folder-role="${sel.role}"]`;
+  if (sel.name) s += `[data-folder-name="${sel.name}"]`;
+  if (sel.mailboxId) s += `[data-mailbox-id="${sel.mailboxId}"]`;
+  return page.locator(s);
+}
+
+export interface FolderCounts {
+  unread: number;
+  total: number;
+}
+
+/**
+ * Read a folder's unread/total counts. When both are zero the counts element
+ * is not rendered, so a missing element is reported as {0,0}.
+ */
+export async function folderCounts(page: Page, sel: FolderSelector): Promise<FolderCounts> {
+  const row = folderRow(page, sel).first();
+  const counts = row.locator('[data-testid="folder-counts"]');
+  if ((await counts.count()) === 0) return { unread: 0, total: 0 };
+  const unread = await counts.getAttribute('data-unread');
+  const total = await counts.getAttribute('data-total');
+  return { unread: Number(unread ?? 0), total: Number(total ?? 0) };
+}
+
+/** Poll until a folder's unread count reaches `expected`. */
+export async function expectFolderUnread(page: Page, sel: FolderSelector, expected: number, timeout = 30000): Promise<void> {
+  await expect
+    .poll(async () => (await folderCounts(page, sel)).unread, { timeout })
+    .toBe(expected);
+}
+
+/** Poll until a folder's total count reaches `expected`. */
+export async function expectFolderTotal(page: Page, sel: FolderSelector, expected: number, timeout = 30000): Promise<void> {
+  await expect
+    .poll(async () => (await folderCounts(page, sel)).total, { timeout })
+    .toBe(expected);
+}
+
+/** Click a folder row to select it. */
+export async function openFolder(page: Page, sel: FolderSelector): Promise<void> {
+  await folderRow(page, sel).first().click();
+}
+
+/** Open the "New message" composer and wait for it to render. */
+export async function openComposer(page: Page): Promise<Locator> {
+  await page.locator('[data-tour="compose-button"]').first().click();
+  const composer = page.locator('[data-testid="email-composer"]');
+  await composer.waitFor({ state: 'visible', timeout: 15000 });
+  return composer;
+}
+
+/**
+ * The sender addresses the composer's From control offers.
+ *
+ * With more than one identity the control is a <select> and each choice is an
+ * <option>; with a single identity it collapses to a static <span> that shows
+ * only that address. Returning the raw text of whichever is rendered lets a
+ * test assert on the *set of senders* without caring which shape it took.
+ */
+export async function composerFromOptions(page: Page): Promise<string[]> {
+  const from = page.locator('[data-testid="composer-from"]').first();
+  await from.waitFor({ state: 'visible', timeout: 10000 });
+  if ((await from.locator('option').count()) > 0) {
+    return from.locator('option').allTextContents();
+  }
+  return [await from.innerText()];
+}
+
+/** Locator for an email row by (exact) subject. */
+export function emailItem(page: Page, subject: string): Locator {
+  return page.locator(`[data-testid="email-list-item"][data-subject="${subject}"]`);
+}
+
+/** Poll until an email with `subject` is present in the list. */
+export async function expectEmailVisible(page: Page, subject: string, timeout = 20000): Promise<void> {
+  await expect(emailItem(page, subject).first()).toBeVisible({ timeout });
+}
diff --git a/integration/tests/helpers/config.ts b/integration/tests/helpers/config.ts
new file mode 100644
index 00000000..b97998b4
--- /dev/null
+++ b/integration/tests/helpers/config.ts
@@ -0,0 +1,56 @@
+/**
+ * Shared configuration for the integration tests. Values mirror the Stalwart
+ * bootstrap (integration/stalwart/*) and the docker-compose port mappings.
+ * Everything is overridable via env so the suite can run against a differently
+ * mapped stack (e.g. remote CI) without code changes.
+ */
+
+export const DOMAIN = process.env.IT_DOMAIN ?? 'example.org';
+
+/** Shared password for every test mailbox (TEST_ACCOUNT_PASSWORD in .env). */
+export const ACCOUNT_PASSWORD = process.env.IT_ACCOUNT_PASSWORD ?? 'test-pass-123';
+
+/** Webmail app origin (containerised, published on the host). */
+export const WEBMAIL_URL = process.env.IT_WEBMAIL_URL ?? 'http://localhost:3000';
+
+/** Stalwart JMAP + admin base URL (host-published). */
+export const JMAP_URL = process.env.IT_JMAP_URL ?? 'http://localhost:8025';
+
+/** Stalwart SMTP submission listener (host-published, maps to container 587). */
+export const SMTP_HOST = process.env.IT_SMTP_HOST ?? 'localhost';
+export const SMTP_PORT = Number(process.env.IT_SMTP_PORT ?? 1025);
+
+/** Recovery admin — `user:password`, used for stalwart-cli style admin JMAP. */
+export const ADMIN_CREDENTIALS = process.env.IT_ADMIN ?? 'admin:bootstrap-secret';
+
+export interface TestAccount {
+  /** Local part, e.g. "alice". */
+  user: string;
+  /** Full address, e.g. "alice@example.org". */
+  email: string;
+  password: string;
+}
+
+function acct(user: string): TestAccount {
+  return { user, email: `${user}@${DOMAIN}`, password: ACCOUNT_PASSWORD };
+}
+
+/** The mailboxes provisioned by the Stalwart bootstrap plan. */
+export const ACCOUNTS = {
+  alice: acct('alice'),
+  bob: acct('bob'),
+  carol: acct('carol'),
+} as const;
+
+export type AccountKey = keyof typeof ACCOUNTS;
+
+/**
+ * The shared *group* account provisioned by the bootstrap (a Stalwart Group
+ * principal, not a login). `carol` is made a member before her first login, so
+ * she sees the group's folders under "Shared" and can send as its address.
+ * Groups have no password of their own — access is via a member's session.
+ * (carol, rather than alice/bob, keeps the sync specs' accounts unshared.)
+ */
+export const GROUP = {
+  team: { user: 'team', email: `team@${DOMAIN}`, memberOf: 'carol' as AccountKey },
+} as const;
diff --git a/integration/tests/helpers/jmap.ts b/integration/tests/helpers/jmap.ts
new file mode 100644
index 00000000..372ef719
--- /dev/null
+++ b/integration/tests/helpers/jmap.ts
@@ -0,0 +1,158 @@
+/**
+ * Minimal JMAP client for test setup/inspection against Stalwart.
+ *
+ * Uses global fetch (Node 18+). Not a full JMAP implementation — just the
+ * pieces the integration tests need: authenticate, read/reset mailboxes,
+ * create folders, and poll for delivery. Assertions on *server* state (via
+ * this client) are kept separate from assertions on *UI* state (via the page),
+ * so a failing test can tell whether the bug is in delivery or in the webmail's
+ * sync.
+ */
+import { JMAP_URL } from './config';
+
+const CORE = 'urn:ietf:params:jmap:core';
+const MAIL = 'urn:ietf:params:jmap:mail';
+// Identity/* lives under the submission capability, not mail.
+const SUBMISSION = 'urn:ietf:params:jmap:submission';
+
+interface JmapMailbox {
+  id: string;
+  name: string;
+  role: string | null;
+  parentId: string | null;
+  totalEmails: number;
+  unreadEmails: number;
+}
+
+type MethodCall = [string, Record<string, unknown>, string];
+
+export class JmapClient {
+  private authHeader: string;
+  private apiUrl: string;
+  accountId = '';
+  /** Every account visible in this user's session (own + shared/group),
+   *  keyed by accountId -> account name (its email address). */
+  accounts: Record<string, string> = {};
+
+  private constructor(private email: string, password: string) {
+    this.authHeader = 'Basic ' + Buffer.from(`${email}:${password}`).toString('base64');
+    // Stalwart advertises apiUrl on its configured hostname (mail.example.org);
+    // rewrite onto the reachable origin, exactly as the app client does.
+    this.apiUrl = `${JMAP_URL}/jmap/`;
+  }
+
+  static async connect(email: string, password: string): Promise<JmapClient> {
+    const c = new JmapClient(email, password);
+    const res = await fetch(`${JMAP_URL}/jmap/session`, {
+      headers: { Authorization: c.authHeader },
+    });
+    if (!res.ok) throw new Error(`JMAP session failed for ${email}: ${res.status}`);
+    const session = await res.json();
+    const primary = session.primaryAccounts?.[MAIL];
+    if (!primary) throw new Error(`No mail account for ${email} in JMAP session`);
+    c.accountId = primary;
+    c.accounts = Object.fromEntries(
+      Object.entries(session.accounts ?? {}).map(([id, a]) => [id, (a as { name: string }).name]),
+    );
+    return c;
+  }
+
+  /** Names (email addresses) of the shared/group accounts this user can access,
+   *  i.e. everything in the session except the user's own primary account. */
+  sharedAccountNames(): string[] {
+    return Object.entries(this.accounts)
+      .filter(([id]) => id !== this.accountId)
+      .map(([, name]) => name);
+  }
+
+  async request(methodCalls: MethodCall[]): Promise<any> {
+    const res = await fetch(this.apiUrl, {
+      method: 'POST',
+      headers: { Authorization: this.authHeader, 'Content-Type': 'application/json' },
+      body: JSON.stringify({ using: [CORE, MAIL, SUBMISSION], methodCalls }),
+    });
+    if (!res.ok) throw new Error(`JMAP request failed: ${res.status} ${await res.text()}`);
+    return res.json();
+  }
+
+  async mailboxes(): Promise<JmapMailbox[]> {
+    const r = await this.request([['Mailbox/get', { accountId: this.accountId }, '0']]);
+    return r.methodResponses[0][1].list as JmapMailbox[];
+  }
+
+  async mailboxByRole(role: string): Promise<JmapMailbox | undefined> {
+    return (await this.mailboxes()).find((m) => m.role === role);
+  }
+
+  async mailboxByName(name: string): Promise<JmapMailbox | undefined> {
+    return (await this.mailboxes()).find((m) => m.name === name);
+  }
+
+  /** Create a folder (top-level) and return its id. Idempotent by name. */
+  async createMailbox(name: string, parentId: string | null = null): Promise<string> {
+    const existing = await this.mailboxByName(name);
+    if (existing) return existing.id;
+    const r = await this.request([
+      ['Mailbox/set', { accountId: this.accountId, create: { new: { name, parentId } } }, '0'],
+    ]);
+    const created = r.methodResponses[0][1].created?.new;
+    if (!created) throw new Error(`Mailbox/set create failed: ${JSON.stringify(r.methodResponses[0][1])}`);
+    return created.id;
+  }
+
+  async deleteMailboxByName(name: string): Promise<void> {
+    const mb = await this.mailboxByName(name);
+    if (!mb) return;
+    await this.request([
+      ['Mailbox/set', { accountId: this.accountId, onDestroyRemoveEmails: true, destroy: [mb.id] }, '0'],
+    ]);
+  }
+
+  private async allEmailIds(): Promise<string[]> {
+    const r = await this.request([['Email/query', { accountId: this.accountId, limit: 5000 }, '0']]);
+    return r.methodResponses[0][1].ids as string[];
+  }
+
+  /**
+   * Reset a mailbox to a clean slate: destroy every message and delete any
+   * non-system (custom) folder. System folders (Inbox/Sent/Trash/…) are kept.
+   */
+  async reset(): Promise<void> {
+    const ids = await this.allEmailIds();
+    if (ids.length) {
+      await this.request([['Email/set', { accountId: this.accountId, destroy: ids }, '0']]);
+    }
+    const custom = (await this.mailboxes()).filter((m) => !m.role);
+    if (custom.length) {
+      await this.request([
+        ['Mailbox/set', { accountId: this.accountId, onDestroyRemoveEmails: true, destroy: custom.map((m) => m.id) }, '0'],
+      ]);
+    }
+  }
+
+  /** Look up an email id by subject within an optional mailbox. */
+  async findEmailBySubject(subject: string, mailboxId?: string): Promise<any | undefined> {
+    const filter: Record<string, unknown> = { subject };
+    if (mailboxId) filter.inMailbox = mailboxId;
+    const r = await this.request([
+      ['Email/query', { accountId: this.accountId, filter }, '0'],
+      ['Email/get', {
+        accountId: this.accountId,
+        '#ids': { resultOf: '0', name: 'Email/query', path: '/ids' },
+        properties: ['id', 'subject', 'keywords', 'mailboxIds', 'from', 'preview'],
+      }, '1'],
+    ]);
+    return r.methodResponses[1][1].list[0];
+  }
+
+  /** Poll until a message with `subject` is delivered (or throw on timeout). */
+  async waitForEmail(subject: string, opts: { mailboxId?: string; timeoutMs?: number } = {}): Promise<any> {
+    const deadline = Date.now() + (opts.timeoutMs ?? 15000);
+    for (;;) {
+      const found = await this.findEmailBySubject(subject, opts.mailboxId);
+      if (found) return found;
+      if (Date.now() > deadline) throw new Error(`Timed out waiting for email "${subject}" (${this.email})`);
+      await new Promise((r) => setTimeout(r, 500));
+    }
+  }
+}
diff --git a/integration/tests/helpers/smtp.ts b/integration/tests/helpers/smtp.ts
new file mode 100644
index 00000000..d81c6bcd
--- /dev/null
+++ b/integration/tests/helpers/smtp.ts
@@ -0,0 +1,128 @@
+/**
+ * Dependency-free SMTP submission client.
+ *
+ * Speaks just enough SMTP to authenticate against Stalwart's plaintext
+ * submission listener (AUTH LOGIN, no STARTTLS) and inject a message. Used to
+ * simulate real inbound mail so the webmail's sync behaviour can be observed.
+ * A raw socket keeps the test harness free of a nodemailer dependency.
+ */
+import net from 'node:net';
+import { SMTP_HOST, SMTP_PORT } from './config';
+
+interface SendOptions {
+  host?: string;
+  port?: number;
+  /** Envelope + auth sender, e.g. "alice@example.org". */
+  from: string;
+  /** Auth username; defaults to `from`. */
+  authUser?: string;
+  authPass: string;
+  /** One or more envelope recipients. */
+  to: string | string[];
+  subject: string;
+  /** Plain-text body. */
+  body: string;
+  /** Extra headers (e.g. custom Message-ID / In-Reply-To for threading). */
+  headers?: Record<string, string>;
+}
+
+class SmtpError extends Error {}
+
+function crlf(s: string): string {
+  return s.replace(/\r?\n/g, '\r\n');
+}
+
+/**
+ * Submit a single message. Resolves once the server has accepted it (250 after
+ * end-of-DATA). Rejects on any non-2xx/3xx reply or socket error.
+ */
+export async function sendMail(opts: SendOptions): Promise<void> {
+  const host = opts.host ?? SMTP_HOST;
+  const port = opts.port ?? SMTP_PORT;
+  const recipients = Array.isArray(opts.to) ? opts.to : [opts.to];
+  const authUser = opts.authUser ?? opts.from;
+
+  const socket = net.createConnection({ host, port });
+  socket.setEncoding('utf8');
+  socket.setTimeout(15000);
+
+  let buffer = '';
+  let resolveLine: ((line: string) => void) | null = null;
+  let pendingError: Error | null = null;
+
+  socket.on('data', (chunk: string) => {
+    buffer += chunk;
+    // A complete reply ends with "<code> ...\r\n" (space, not hyphen, after code).
+    const lines = buffer.split('\r\n');
+    for (let i = 0; i < lines.length - 1; i++) {
+      const line = lines[i];
+      if (/^\d{3} /.test(line) && resolveLine) {
+        const r = resolveLine;
+        resolveLine = null;
+        buffer = lines.slice(i + 1).join('\r\n');
+        r(line);
+        return;
+      }
+    }
+  });
+  socket.on('timeout', () => { pendingError = new SmtpError('SMTP timeout'); socket.destroy(); });
+  socket.on('error', (e) => { pendingError = e; });
+
+  const waitReply = (expect: string): Promise<string> =>
+    new Promise((resolve, reject) => {
+      if (pendingError) return reject(pendingError);
+      resolveLine = (line) => {
+        if (!line.startsWith(expect)) {
+          reject(new SmtpError(`Expected ${expect}, got: ${line}`));
+        } else {
+          resolve(line);
+        }
+      };
+    });
+
+  const send = (line: string): void => { socket.write(line + '\r\n'); };
+  const b64 = (s: string) => Buffer.from(s).toString('base64');
+
+  try {
+    await new Promise<void>((resolve, reject) => {
+      socket.once('connect', resolve);
+      socket.once('error', reject);
+    });
+    await waitReply('220');
+    send('EHLO integration-tests');
+    await waitReply('250');
+    send('AUTH LOGIN');
+    await waitReply('334');
+    send(b64(authUser));
+    await waitReply('334');
+    send(b64(opts.authPass));
+    await waitReply('235');
+    send(`MAIL FROM:<${opts.from}>`);
+    await waitReply('250');
+    for (const rcpt of recipients) {
+      send(`RCPT TO:<${rcpt}>`);
+      await waitReply('250');
+    }
+    send('DATA');
+    await waitReply('354');
+
+    const headers: Record<string, string> = {
+      From: opts.from,
+      To: recipients.join(', '),
+      Subject: opts.subject,
+      'Content-Type': 'text/plain; charset=utf-8',
+      ...opts.headers,
+    };
+    const headerBlock = Object.entries(headers)
+      .map(([k, v]) => `${k}: ${v}`)
+      .join('\r\n');
+    // Dot-stuff any line that begins with '.'
+    const safeBody = crlf(opts.body).replace(/\r\n\./g, '\r\n..');
+    send(`${headerBlock}\r\n\r\n${safeBody}\r\n.`);
+    await waitReply('250');
+    send('QUIT');
+    await waitReply('221').catch(() => { /* some servers drop before 221 */ });
+  } finally {
+    socket.destroy();
+  }
+}
diff --git a/integration/webmail-config/policy.json b/integration/webmail-config/policy.json
new file mode 100644
index 00000000..32c2e803
--- /dev/null
+++ b/integration/webmail-config/policy.json
@@ -0,0 +1,7 @@
+{
+  "features": {
+    "unifiedCrossAccountEnabled": true,
+    "crossUnreadViewEnabled": true,
+    "crossAllViewEnabled": true
+  }
+}
diff --git a/integration/webmail.Dockerfile b/integration/webmail.Dockerfile
new file mode 100644
index 00000000..fdb97f48
--- /dev/null
+++ b/integration/webmail.Dockerfile
@@ -0,0 +1,33 @@
+# Webmail image for integration testing — runs Next.js in DEVELOPMENT mode.
+#
+# Why dev mode rather than the production Dockerfile at the repo root?
+# The browser talks JMAP directly to Stalwart at http://localhost:8025 (plain
+# HTTP, cross-origin). The app's production Content-Security-Policy pins
+# connect-src to `'self' https:`, which would block that plaintext cross-origin
+# fetch. In development mode proxy.ts widens connect-src to `'self' http:
+# https: ws: wss:` — exactly what a local, TLS-less Stalwart needs. Running
+# from source also ships the integration-test data-testid hooks without a
+# production rebuild.
+#
+# Build context is the repo root (see docker-compose.yml `context: ..`), so the
+# root .dockerignore keeps examples/, integration/ and node_modules out.
+
+FROM node:24-alpine
+WORKDIR /app
+
+# Install dependencies first for layer caching.
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# App source (data-testid hooks included).
+COPY . .
+
+ENV NODE_ENV=development
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV PORT=3000
+ENV HOSTNAME=0.0.0.0
+
+EXPOSE 3000
+
+# Bind to 0.0.0.0 so the published port is reachable from the host/browser.
+CMD ["npx", "next", "dev", "-H", "0.0.0.0", "-p", "3000"]
diff --git a/lib/__tests__/email-sanitization.test.ts b/lib/__tests__/email-sanitization.test.ts
index 4691b0e0..910d99d1 100644
--- a/lib/__tests__/email-sanitization.test.ts
+++ b/lib/__tests__/email-sanitization.test.ts
@@ -3,9 +3,11 @@ import DOMPurify from 'dompurify';
 import {
   sanitizeEmailHtml,
   sanitizeSignatureHtml,
+  sanitizeSignatureHtmlForDisplay,
   parseHtmlSafely,
   hasRichFormatting,
   plainTextToSafeHtml,
+  sanitizePlainTextRenderedHtml,
   EMAIL_SANITIZE_CONFIG,
   EMAIL_IFRAME_SANITIZE_CONFIG,
   isExternalResourceUrl,
@@ -580,4 +582,61 @@ describe('email-sanitization', () => {
       expect(result).toContain('javascript:alert(1)');
     });
   });
+
+  describe('sanitizeSignatureHtmlForDisplay', () => {
+    // Signatures render into the main document (identity-form preview, composer
+    // block), not the sandboxed iframe, so a target-less anchor navigates the
+    // whole app away and takes the unsaved draft/signature with it.
+    it('forces target=_blank and rel on signature links', () => {
+      const clean = sanitizeSignatureHtmlForDisplay('<p><a href="https://example.com">Site</a></p>');
+      expect(clean).toContain('target="_blank"');
+      expect(clean).toContain('rel="noopener noreferrer"');
+    });
+
+    it('overrides a target the user supplied themselves', () => {
+      const clean = sanitizeSignatureHtmlForDisplay('<a href="https://example.com" target="_top">x</a>');
+      expect(clean).toContain('target="_blank"');
+      expect(clean).not.toContain('_top');
+    });
+
+    it('keeps the image restrictions of the storage sanitizer', () => {
+      const clean = sanitizeSignatureHtmlForDisplay(
+        '<img src="http://insecure.example.com/l.png"><img src="https://cdn.example.com/l.png">',
+      );
+      expect(clean).not.toContain('insecure.example.com');
+      expect(clean).toContain('https://cdn.example.com/l.png');
+    });
+
+    it('does not leak target into the stored or sent signature', () => {
+      // sanitizeSignatureHtml feeds both storage and the outgoing message body.
+      const stored = sanitizeSignatureHtml('<p><a href="https://example.com">Site</a></p>');
+      expect(stored).toContain('href="https://example.com"');
+      expect(stored).not.toContain('target=');
+    });
+
+    it('handles empty input', () => {
+      expect(sanitizeSignatureHtmlForDisplay('')).toBe('');
+      expect(sanitizeSignatureHtmlForDisplay('   ')).toBe('');
+    });
+  });
+
+  describe('sanitizePlainTextRenderedHtml', () => {
+    // This branch renders into the main document, not the sandboxed iframe, so
+    // an anchor that loses target="_blank" navigates the whole app away.
+    it('preserves target and rel on links emitted by plainTextToSafeHtml', () => {
+      const rendered = sanitizePlainTextRenderedHtml(
+        plainTextToSafeHtml('see https://github.com/honzup/webmail/pull/560'),
+      );
+      expect(rendered).toContain('target="_blank"');
+      expect(rendered).toContain('rel="noopener noreferrer"');
+    });
+
+    it('still strips dangerous schemes and tags', () => {
+      const rendered = sanitizePlainTextRenderedHtml(
+        '<a href="javascript:alert(1)" target="_blank">x</a><script>alert(1)</script>',
+      );
+      expect(rendered).not.toContain('javascript:');
+      expect(rendered).not.toContain('<script');
+    });
+  });
 });
diff --git a/lib/__tests__/favicon-badge.test.ts b/lib/__tests__/favicon-badge.test.ts
new file mode 100644
index 00000000..699f4b36
--- /dev/null
+++ b/lib/__tests__/favicon-badge.test.ts
@@ -0,0 +1,342 @@
+import { describe, it, expect } from 'vitest';
+import { formatBadgeCount, renderBadgedFavicon } from '@/lib/favicon-badge';
+
+const BASE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="1000pt" height="1000pt"><defs><clipPath id="_clip1"><rect width="1000" height="1000"/></clipPath></defs><g clip-path="url(#_clip1)"><rect width="1000" height="1000" fill="#123456"/></g></svg>`;
+
+function decode(dataUrl: string): string {
+  return decodeURIComponent(dataUrl.replace('data:image/svg+xml,', ''));
+}
+
+/** The badge band: the last <rect> the renderer appends, identified by its fill. */
+function band(svg: string): { x: number; y: number; w: number; h: number; rx: number } {
+  const match =
+    /<rect[^>]*\bx="(-?[\d.]+)"[^>]*\by="(-?[\d.]+)"[^>]*\bwidth="([\d.]+)"[^>]*\bheight="([\d.]+)"[^>]*\brx="([\d.]+)"[^>]*fill="#ffffff"/.exec(
+      svg,
+    );
+  expect(match).not.toBeNull();
+  const [, x, y, w, h, rx] = match!.map(Number);
+  return { x, y, w, h, rx };
+}
+
+function fontSize(svg: string): number {
+  return Number(/<text[^>]*font-size="([\d.]+)"/.exec(svg)![1]);
+}
+
+function viewBoxOf(svg: string): { minX: number; minY: number; width: number; height: number } {
+  const [minX, minY, width, height] = /viewBox="([^"]+)"/
+    .exec(svg)![1]
+    .trim()
+    .split(/[\s,]+/)
+    .map(Number);
+  return { minX, minY, width, height };
+}
+
+describe('formatBadgeCount', () => {
+  it('returns an empty string for zero and below', () => {
+    expect(formatBadgeCount(0)).toBe('');
+    expect(formatBadgeCount(-3)).toBe('');
+  });
+
+  it('returns the count verbatim from 1 to 99', () => {
+    expect(formatBadgeCount(1)).toBe('1');
+    expect(formatBadgeCount(9)).toBe('9');
+    expect(formatBadgeCount(47)).toBe('47');
+    expect(formatBadgeCount(99)).toBe('99');
+  });
+
+  it('caps at 99+ above 99', () => {
+    // Gmail caps at 20; matching it was tried and reverted. A lower cap means a
+    // typical inbox needs three glyphs almost always, and three glyphs do not
+    // fit at the full font size — so "99+" rendered permanently smaller than a
+    // real two-digit count would have.
+    expect(formatBadgeCount(100)).toBe('99+');
+    expect(formatBadgeCount(133)).toBe('99+');
+    expect(formatBadgeCount(1000)).toBe('99+');
+  });
+
+  it('returns an empty string for non-finite input', () => {
+    expect(formatBadgeCount(Number.NaN)).toBe('');
+    expect(formatBadgeCount(Number.POSITIVE_INFINITY)).toBe('');
+  });
+});
+
+describe('renderBadgedFavicon', () => {
+  it('returns null when the count is zero', () => {
+    expect(renderBadgedFavicon(BASE_SVG, 0)).toBeNull();
+  });
+
+  it('returns null when the source is not SVG', () => {
+    expect(renderBadgedFavicon('this is not svg', 3)).toBeNull();
+  });
+
+  it('returns null when the root element is not <svg>', () => {
+    expect(renderBadgedFavicon('<html><body/></html>', 3)).toBeNull();
+  });
+
+  it('returns null when the root has no viewBox', () => {
+    const noViewBox = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"/>`;
+    expect(renderBadgedFavicon(noViewBox, 3)).toBeNull();
+  });
+
+  it('returns a percent-encoded svg data URL', () => {
+    const url = renderBadgedFavicon(BASE_SVG, 3);
+    expect(url).not.toBeNull();
+    expect(url!.startsWith('data:image/svg+xml,')).toBe(true);
+  });
+
+  it('draws a badge band and the count text', () => {
+    const svg = decode(renderBadgedFavicon(BASE_SVG, 3)!);
+    expect(svg).toContain('<rect');
+    expect(svg).toContain('>3<');
+  });
+
+  it('renders 99+ for large counts', () => {
+    const svg = decode(renderBadgedFavicon(BASE_SVG, 250)!);
+    expect(svg).toContain('>99+<');
+  });
+
+  it('preserves the base artwork and its clipPath id', () => {
+    const svg = decode(renderBadgedFavicon(BASE_SVG, 3)!);
+    expect(svg).toContain('id="_clip1"');
+    expect(svg).toContain('#123456');
+  });
+
+  it('overrides pt-unit width and height with unitless 16 and keeps the viewBox', () => {
+    const svg = decode(renderBadgedFavicon(BASE_SVG, 3)!);
+    expect(svg).toContain('width="16"');
+    expect(svg).toContain('height="16"');
+    expect(svg).toContain('viewBox="0 0 1000 1000"');
+    expect(svg).not.toContain('1000pt');
+  });
+
+  it('draws a white band with black digits, so the count stays legible over any base icon', () => {
+    const svg = decode(renderBadgedFavicon(BASE_SVG, 3)!);
+    expect(svg).toMatch(/<rect[^>]*fill="#ffffff"/);
+    expect(svg).toMatch(/<text[^>]*fill="#000000"/);
+  });
+
+  it('shrinks the font as the label grows so three glyphs still fit', () => {
+    const one = decode(renderBadgedFavicon(BASE_SVG, 3)!);
+    const three = decode(renderBadgedFavicon(BASE_SVG, 250)!);
+    expect(fontSize(three)).toBeLessThan(fontSize(one));
+  });
+
+  it('returns null rather than throwing when the source contains a lone surrogate', () => {
+    const bad = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>abc\uD800def</title></svg>`;
+    expect(() => renderBadgedFavicon(bad, 3)).not.toThrow();
+    expect(renderBadgedFavicon(bad, 3)).toBeNull();
+  });
+
+  it('sizes the band to the label, and only "99+" fills the full icon width', () => {
+    // The box is only as wide as its digits need — "5" must not squat on as much
+    // white as "99+". It is never wider than the icon, and three glyphs, whose
+    // font is budgeted against the full span, grow to exactly fill it.
+    const w = (count: number) => band(decode(renderBadgedFavicon(BASE_SVG, count)!)).w;
+    expect(w(7)).toBeLessThan(w(47));
+    expect(w(47)).toBeLessThan(w(250));
+    expect(w(250)).toBeCloseTo(1000, 5);
+  });
+
+  it('matches the geometry measured from Gmail\'s 16px favicon', () => {
+    // Ground truth, measured pixel-by-pixel off Gmail's tab icon and scaled to a
+    // 0 0 1000 1000 viewBox: band 10/16 of the icon (0.625), flush to the bottom
+    // edge, corners rounded by 0.1h, width fitted to the label, anchored right.
+    // Gmail's own single-digit badge sits hard right in a box about a third of
+    // the icon wide, so the box grows leftwards from the corner.
+    // w = label.length * 0.6 * font + 2 * 0.04 * 1000, x = 1000 - w.
+    const expected: Record<string, { x: number; w: number; font: number }> = {
+      '5': { x: 554, w: 446, font: 610 }, // textW = 1 * 0.6 * 610 = 366
+      '15': { x: 188, w: 812, font: 610 }, // textW = 2 * 0.6 * 610 = 732
+      '250': { x: 0, w: 1000, font: 920 / 1.8 }, // "99+": font = (1000 - 80) / (3 * 0.6)
+    };
+    for (const [count, want] of Object.entries(expected)) {
+      const svg = decode(renderBadgedFavicon(BASE_SVG, Number(count))!);
+      const { x, y, w, h, rx } = band(svg);
+      expect(x).toBeCloseTo(want.x, 5);
+      expect(w).toBeCloseTo(want.w, 5);
+      expect(fontSize(svg)).toBeCloseTo(want.font, 5);
+      expect(y).toBeCloseTo(375, 5);
+      expect(h).toBeCloseTo(625, 5);
+      expect(rx).toBeCloseTo(62.5, 5);
+    }
+  });
+
+  it('anchors the band to the right edge, including on a negative-origin viewBox', () => {
+    // Corner-anchored, not centred: the box grows leftwards from the bottom-right
+    // corner, so its right edge sits on minX + span whatever the label. Centring
+    // was rejected — at a single digit it lands under the middle of the mark.
+    const cases: [string, number, number][] = [
+      // [base svg, minX, span]
+      [BASE_SVG, 0, 1000],
+      [`<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 24 24"><rect x="-4" y="-4" width="24" height="24" fill="#123456"/></svg>`, -4, 24],
+    ];
+    for (const [svgSource, minX, span] of cases) {
+      for (const count of [7, 47, 250]) {
+        const { x, w } = band(decode(renderBadgedFavicon(svgSource, count)!));
+        expect(x + w).toBeCloseTo(minX + span, 5);
+        expect(x).toBeGreaterThanOrEqual(minX);
+      }
+    }
+  });
+
+  it('renders 1- and 2-digit labels at the max font size, and shrinks only for "99+"', () => {
+    // The font is budgeted against the full icon span, not against the fitted
+    // box, so one or two glyphs always land at FONT_MAX; only three force a
+    // shrink — and their box then grows to fill the icon.
+    const FONT_MAX = 0.61 * 1000;
+    const one = decode(renderBadgedFavicon(BASE_SVG, 7)!);
+    const two = decode(renderBadgedFavicon(BASE_SVG, 47)!);
+    const three = decode(renderBadgedFavicon(BASE_SVG, 250)!);
+    expect(fontSize(one)).toBeCloseTo(FONT_MAX, 5);
+    expect(fontSize(two)).toBeCloseTo(FONT_MAX, 5);
+    expect(fontSize(three)).toBeLessThan(FONT_MAX);
+  });
+
+  it('rounds the band corners slightly — neither an oval nor a hard square', () => {
+    // rx = h / 2 was the pill: at one digit it read as a circle, at two an oval,
+    // and "99+" was a smudge. rx = 0 is the other failure: Gmail's corners carry
+    // a visible ~1px round at 16px. Guard against a silent revert to either.
+    for (const count of [7, 47, 250]) {
+      const { h, rx } = band(decode(renderBadgedFavicon(BASE_SVG, count)!));
+      expect(rx).toBeCloseTo(0.1 * h, 5);
+      expect(rx).toBeGreaterThan(0);
+      expect(rx).toBeLessThan(h / 2);
+    }
+  });
+
+  it('draws the digits at font-weight 500, in both the attribute and the style', () => {
+    // 700 read visibly heavier than Gmail's equivalent badge.
+    const svg = decode(renderBadgedFavicon(BASE_SVG, 3)!);
+    expect(svg).toMatch(/<text[^>]*font-weight="500"/);
+    expect(svg).toMatch(/<text[^>]*style="[^"]*font-weight:\s*500/);
+  });
+
+  it('keeps the badge band entirely inside the viewBox for 1, 2, and 3-glyph labels', () => {
+    // The band is flush to the bottom and, at three glyphs, to the left and
+    // right edges too — but it must never overflow any of them.
+    for (const count of [7, 47, 250]) {
+      const svg = decode(renderBadgedFavicon(BASE_SVG, count)!);
+      const { x, y, w, h } = band(svg);
+      expect(x).toBeGreaterThanOrEqual(0);
+      expect(y).toBeGreaterThanOrEqual(0);
+      expect(x + w).toBeLessThanOrEqual(1000);
+      expect(y + h).toBeLessThanOrEqual(1000);
+    }
+  });
+
+  // A previous version of this test used /\bx="([\d.]+)"/, which cannot match a
+  // negative number: dropping `minX +` from the anchoring passed it. Anchor
+  // against a viewBox whose origin is negative, where the band's own x is
+  // legitimately negative, so the offset is genuinely pinned.
+  it('anchors the band to the viewBox origin, including a negative origin', () => {
+    const NEGATIVE_ORIGIN = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-40 -40 240 240"><rect x="-40" y="-40" width="240" height="240" fill="#123456"/></svg>`;
+    for (const count of [7, 47, 250]) {
+      const svg = decode(renderBadgedFavicon(NEGATIVE_ORIGIN, count)!);
+      const { x, y, w, h } = band(svg);
+      expect(x).toBeGreaterThanOrEqual(-40);
+      expect(y).toBeGreaterThanOrEqual(-40);
+      expect(x + w).toBeLessThanOrEqual(200);
+      expect(y + h).toBeLessThanOrEqual(200);
+      // Anchored to the bottom-right: in a viewBox running from -40 to 200, the
+      // band's bottom edge and its right edge both sit well past the midpoint.
+      expect(x + w).toBeGreaterThan(80);
+      expect(y + h).toBeGreaterThan(80);
+    }
+  });
+
+  it('fits the label inside the band, with padding, for every label length', () => {
+    // The core band invariant: textW + 2 * pad <= w, where the glyph advance and
+    // padding are the renderer's own published constants. PAD_FACTOR is a
+    // fraction of the icon span, not of the fitted box, so the padding is the
+    // same at every label length.
+    const GLYPH_ADV = 0.6;
+    const PAD_FACTOR = 0.04;
+    for (const count of [7, 47, 250]) {
+      const svg = decode(renderBadgedFavicon(BASE_SVG, count)!);
+      const { w } = band(svg);
+      const label = count > 99 ? '99+' : String(count);
+      const textW = label.length * GLYPH_ADV * fontSize(svg);
+      const pad = PAD_FACTOR * 1000;
+      expect(textW + 2 * pad).toBeLessThanOrEqual(w + 1e-6);
+    }
+  });
+
+  it('percent-encodes the payload, so a "#" in a fill cannot truncate the data URL', () => {
+    const url = renderBadgedFavicon(BASE_SVG, 3)!;
+    // encodeURI leaves "#" bare, which the browser reads as a fragment
+    // delimiter: everything after the first colour would be silently dropped.
+    expect(url).toContain('%23');
+    expect(url).not.toContain('#');
+  });
+
+  it('returns an empty label, and no badge, for a fractional count below one', () => {
+    expect(formatBadgeCount(0.5)).toBe('');
+    expect(renderBadgedFavicon(BASE_SVG, 0.5)).toBeNull();
+  });
+
+  it('returns null when the root svg has no SVG namespace', () => {
+    // Non-null but unrenderable: a data URL built from this would show nothing.
+    const noNs = `<svg viewBox="0 0 100 100"><rect width="100" height="100"/></svg>`;
+    expect(renderBadgedFavicon(noNs, 3)).toBeNull();
+  });
+
+  it('beats a stylesheet in the base SVG, keeping the badge white-on-black', () => {
+    // Presentation attributes lose to any CSS rule in the document. A branded
+    // base carrying `rect { fill: #db2d54 }` would otherwise paint the band red
+    // and the digits red — exactly what the white band exists to prevent.
+    const STYLED = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><style>rect{fill:#db2d54}text{fill:#db2d54}</style><rect width="1000" height="1000"/></svg>`;
+    const svg = decode(renderBadgedFavicon(STYLED, 3)!);
+    expect(svg).toMatch(/<rect[^>]*style="[^"]*fill:\s*#ffffff/);
+    expect(svg).toMatch(/<text[^>]*style="[^"]*fill:\s*#000000/);
+  });
+
+  it('strips scripts, foreignObject and event handlers from the base SVG', () => {
+    // The base may be an admin-uploaded file, which upstream serves under a
+    // sandboxing CSP precisely because SVG can carry script. Re-emitting it as a
+    // same-origin data: URL would un-fence it, so sanitise before serialising.
+    const HOSTILE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" onload="alert(1)"><script>alert(2)</script><foreignObject width="100" height="100"><body xmlns="http://www.w3.org/1999/xhtml">hi</body></foreignObject><rect width="100" height="100" onclick="alert(3)" ONMOUSEOVER="alert(4)" fill="#123456"/></svg>`;
+    const url = renderBadgedFavicon(HOSTILE, 3)!;
+    expect(url).not.toBeNull();
+    const svg = decode(url);
+    expect(svg).not.toContain('<script');
+    expect(svg).not.toContain('foreignObject');
+    expect(svg.toLowerCase()).not.toContain('onload');
+    expect(svg.toLowerCase()).not.toContain('onclick');
+    expect(svg.toLowerCase()).not.toContain('onmouseover');
+    expect(svg).not.toContain('alert');
+    // The legitimate artwork survives.
+    expect(svg).toContain('#123456');
+  });
+
+  it('normalises a non-square viewBox to a square, so the badge stays legible', () => {
+    // A 100x20 wordmark: span = min(w, h) = 20 previously produced a ~2px-tall
+    // smudge on a 16px icon. Squaring the viewBox first sizes the badge against
+    // the rendered box instead.
+    const WORDMARK = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><rect width="100" height="20" fill="#123456"/></svg>`;
+    const svg = decode(renderBadgedFavicon(WORDMARK, 42)!);
+
+    const vb = viewBoxOf(svg);
+    expect(vb.width).toBe(100);
+    expect(vb.height).toBe(100);
+    expect(vb.minX).toBe(0);
+    expect(vb.minY).toBe(-40); // centred: (100 - 20) / 2 above and below
+
+    const { x, y, w, h } = band(svg);
+    // Sized against the square side (100), not the 20-unit short axis.
+    expect(h).toBeCloseTo(0.625 * 100, 5);
+    // Two glyphs at FONT_MAX (61) plus padding: 2 * 0.6 * 61 + 2 * 4 = 81.2,
+    // anchored to the right of the squared span.
+    expect(w).toBeCloseTo(81.2, 5);
+    expect(x + w).toBeCloseTo(100, 5);
+    // Still in bounds of the normalised viewBox.
+    expect(x).toBeGreaterThanOrEqual(vb.minX);
+    expect(y).toBeGreaterThanOrEqual(vb.minY);
+    expect(x + w).toBeLessThanOrEqual(vb.minX + vb.width);
+    expect(y + h).toBeLessThanOrEqual(vb.minY + vb.height);
+  });
+
+  it('leaves a square viewBox untouched', () => {
+    const svg = decode(renderBadgedFavicon(BASE_SVG, 3)!);
+    expect(svg).toContain('viewBox="0 0 1000 1000"');
+  });
+});
diff --git a/lib/__tests__/jmap-send-threading.test.ts b/lib/__tests__/jmap-send-threading.test.ts
index 10f5dc36..df6dc9bf 100644
--- a/lib/__tests__/jmap-send-threading.test.ts
+++ b/lib/__tests__/jmap-send-threading.test.ts
@@ -55,7 +55,7 @@ interface CapturedRequest {
  * Mailbox/get → Identity/get → Email/set + EmailSubmission/set.
  * Returns the captured request bodies for assertions.
  */
-function mockSendEmailFlow() {
+function mockSendEmailFlow(draftsId = 'mb-drafts', sentId = 'mb-sent') {
   const captured: CapturedRequest[] = [];
   const fetchSpy = vi.spyOn(globalThis, 'fetch');
 
@@ -71,8 +71,8 @@ function mockSendEmailFlow() {
           'Mailbox/get',
           {
             list: [
-              { id: 'mb-drafts', name: 'Drafts', role: 'drafts' },
-              { id: 'mb-sent', name: 'Sent', role: 'sent' },
+              { id: draftsId, name: 'Drafts', role: 'drafts' },
+              { id: sentId, name: 'Sent', role: 'sent' },
             ],
           },
           '0',
@@ -264,3 +264,74 @@ describe('JMAPClient.sendEmail threading headers', () => {
     ]));
   });
 });
+
+describe('JMAPClient post-send mailbox filing', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  function sentFilingPatch(captured: CapturedRequest[]): Record<string, unknown> {
+    const submissionCall = captured[2].methodCalls.find(call => call[0] === 'EmailSubmission/set');
+    expect(submissionCall).toBeDefined();
+    const onSuccess = (submissionCall![1] as {
+      onSuccessUpdateEmail: Record<string, Record<string, unknown>>;
+    }).onSuccessUpdateEmail;
+    return Object.values(onSuccess)[0];
+  }
+
+  it('files the sent message via a full mailboxIds replacement, never mailboxIds/<id> pointers', async () => {
+    const client = createClient();
+    const captured = mockSendEmailFlow();
+
+    await client.sendEmail(
+      ['recipient@example.com'], 'subject', 'body',
+      undefined, undefined, 'identity-1', 'user@example.com',
+    );
+
+    const patch = sentFilingPatch(captured);
+    // A `mailboxIds/<id>` JSON-pointer whose token is purely numeric (e.g. a
+    // Drafts folder whose JMAP id is "0") is rejected by Stalwart, silently
+    // stranding already-delivered mail in Drafts. The move must use a full
+    // `mailboxIds` replacement, which has no per-id pointer token.
+    expect(Object.keys(patch).some(key => key.startsWith('mailboxIds/'))).toBe(false);
+    expect(patch.mailboxIds).toEqual({ 'mb-sent': true });
+    expect(patch['keywords/$draft']).toBeNull();
+  });
+
+  it('files correctly when the Drafts mailbox id is a purely numeric string (Stalwart numeric-id bug)', async () => {
+    const client = createClient();
+    // Drafts id "0", Sent id "e": the old pointer form emitted `mailboxIds/0`,
+    // which Stalwart rejects with invalidProperties "Invalid patch value".
+    const captured = mockSendEmailFlow('0', 'e');
+
+    await client.sendEmail(
+      ['recipient@example.com'], 'subject', 'body',
+      undefined, undefined, 'identity-1', 'user@example.com',
+    );
+
+    const patch = sentFilingPatch(captured);
+    expect(Object.keys(patch).some(key => key.startsWith('mailboxIds/'))).toBe(false);
+    expect(patch.mailboxIds).toEqual({ e: true });
+  });
+
+  it('restoreEmailToDraft places the message in Drafts only via a full mailboxIds replacement', async () => {
+    const client = createClient();
+    let capturedUpdate: Record<string, unknown> | undefined;
+    vi.spyOn(client as unknown as { request: JMAPClient['request'] }, 'request')
+      .mockImplementation(async (methodCalls) => {
+        const args = methodCalls[0][1] as { update?: Record<string, Record<string, unknown>> };
+        capturedUpdate = args.update?.['email-1'];
+        return { methodResponses: [['Email/set', { updated: { 'email-1': null } }, '0']] };
+      });
+
+    // Third arg (Sent mailbox id) is intentionally ignored — the message must
+    // end up in Drafts only, with no leftover Sent membership. Drafts id "0"
+    // also exercises the numeric-id path in the reverse direction.
+    await client.restoreEmailToDraft('email-1', '0', 'e');
+
+    expect(capturedUpdate).toBeDefined();
+    expect(Object.keys(capturedUpdate!).some(key => key.startsWith('mailboxIds/'))).toBe(false);
+    expect(capturedUpdate!.mailboxIds).toEqual({ '0': true });
+    expect(capturedUpdate!['keywords/$draft']).toBe(true);
+  });
+});
diff --git a/lib/__tests__/oauth-discovery.test.ts b/lib/__tests__/oauth-discovery.test.ts
index 5b8228af..63f95c96 100644
--- a/lib/__tests__/oauth-discovery.test.ts
+++ b/lib/__tests__/oauth-discovery.test.ts
@@ -46,7 +46,8 @@ describe('oauth/discovery', () => {
     expect(result).toEqual(VALID_METADATA);
     expect(fetch).toHaveBeenCalledTimes(1);
     expect(fetch).toHaveBeenCalledWith(
-      'https://mail.example.com/.well-known/oauth-authorization-server'
+      'https://mail.example.com/.well-known/oauth-authorization-server',
+      expect.objectContaining({ signal: expect.any(AbortSignal) }),
     );
   });
 
@@ -64,7 +65,8 @@ describe('oauth/discovery', () => {
     expect(fetch).toHaveBeenCalledTimes(2);
     expect(fetch).toHaveBeenNthCalledWith(
       2,
-      'https://fallback.example.com/.well-known/openid-configuration'
+      'https://fallback.example.com/.well-known/openid-configuration',
+      expect.objectContaining({ signal: expect.any(AbortSignal) }),
     );
   });
 
@@ -176,4 +178,83 @@ describe('oauth/discovery', () => {
     expect(second).toEqual(VALID_METADATA);
     expect(fetch).toHaveBeenCalledTimes(1);
   });
+
+  it('bounds each discovery fetch with an AbortSignal timeout (no hang on unresponsive IdP)', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    const fetchMock = vi.fn().mockRejectedValue(
+      Object.assign(new Error('The operation timed out'), { name: 'TimeoutError' }),
+    );
+    vi.stubGlobal('fetch', fetchMock);
+
+    const result = await discoverOAuth('https://unresponsive.example.com', { validateEndpoint });
+
+    expect(result).toBeNull();
+    // Every discovery fetch must carry an AbortSignal so an unresponsive IdP is
+    // aborted (DISCOVERY_TIMEOUT_MS) instead of hanging the request - and, with
+    // it, the login page's SSO button.
+    expect(fetchMock.mock.calls.length).toBeGreaterThan(0);
+    for (const call of fetchMock.mock.calls) {
+      expect(call[1]).toEqual(expect.objectContaining({ signal: expect.any(AbortSignal) }));
+    }
+  });
+
+  it('retries once when the first attempt fails, then succeeds', async () => {
+    // Attempt 1: both well-known URLs fail. Attempt 2: first URL succeeds.
+    vi.stubGlobal('fetch', vi.fn()
+      .mockResolvedValueOnce({ ok: false, status: 503 })
+      .mockResolvedValueOnce({ ok: false, status: 503 })
+      .mockResolvedValueOnce({ ok: true, json: () => Promise.resolve(VALID_METADATA) }));
+
+    const result = await discoverOAuth('https://flaky.example.com', { validateEndpoint });
+
+    expect(result).toEqual(VALID_METADATA);
+    // 2 failures (attempt 1) + 1 success (attempt 2 retry).
+    expect(fetch).toHaveBeenCalledTimes(3);
+  });
+
+  it('serves stale cached metadata when a refresh fails (keeps the SSO button up)', async () => {
+    vi.useFakeTimers();
+    try {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      // First call succeeds and caches the metadata.
+      vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve(VALID_METADATA),
+      }));
+      const first = await discoverOAuth('https://stale.example.com', { validateEndpoint });
+      expect(first).toEqual(VALID_METADATA);
+
+      // Expire the cache (positive TTL is 10 min).
+      vi.advanceTimersByTime(10 * 60 * 1000 + 1);
+
+      // Refresh now fails on every URL/attempt: the stale-but-usable value must
+      // be returned instead of null so the SSO button keeps rendering.
+      vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('network down')));
+      const pending = discoverOAuth('https://stale.example.com', { validateEndpoint });
+      await vi.advanceTimersByTimeAsync(1000); // fire the retry backoff timer
+      const second = await pending;
+
+      expect(second).toEqual(VALID_METADATA);
+      expect(warnSpy).toHaveBeenCalled();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('negative-caches a total failure (no cached value) to avoid hammering the IdP', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    const fetchMock = vi.fn().mockRejectedValue(new Error('network down'));
+    vi.stubGlobal('fetch', fetchMock);
+
+    const first = await discoverOAuth('https://down.example.com', { validateEndpoint });
+    const callsAfterFirst = fetchMock.mock.calls.length;
+    const second = await discoverOAuth('https://down.example.com', { validateEndpoint });
+
+    expect(first).toBeNull();
+    expect(second).toBeNull();
+    // The immediate second call is short-circuited by the negative cache, so no
+    // additional fetches are made.
+    expect(fetchMock).toHaveBeenCalledTimes(callsAfterFirst);
+  });
 });
diff --git a/lib/demo/demo-client.ts b/lib/demo/demo-client.ts
index 4e94555e..4086fbb5 100644
--- a/lib/demo/demo-client.ts
+++ b/lib/demo/demo-client.ts
@@ -166,6 +166,19 @@ export class DemoJMAPClient implements IJMAPClient {
     return { emails, hasMore: position + limit < total, total };
   }
 
+  async getSomeEmails(emailsId: string[], _accountId?: string): Promise<Email[]> {
+    if (!emailsId || emailsId.length === 0) {
+      return [];
+    }
+    const filtered = this.data.emails.filter(e => emailsId.includes(e.id));
+
+    filtered.sort((a, b) => 
+      new Date(b.receivedAt).getTime() - new Date(a.receivedAt).getTime()
+    );
+
+    return filtered;
+  }
+
   async getEmailsInMailbox(mailboxId: string): Promise<Email[]> {
     return this.data.emails.filter(e => e.mailboxIds[mailboxId]);
   }
@@ -1083,11 +1096,12 @@ export class DemoJMAPClient implements IJMAPClient {
     return { scheduled: true, emailId, emailSubmissionId: replacement, sendAt: delayedUntil };
   }
 
-  async restoreEmailToDraft(emailId: string, draftMailboxId: string, sentMailboxId?: string): Promise<void> {
+  // Mirrors JMAPClient.restoreEmailToDraft: the third parameter is ignored and
+  // the message ends up in Drafts only (full mailboxIds replacement).
+  async restoreEmailToDraft(emailId: string, draftMailboxId: string, _sentMailboxId?: string): Promise<void> {
     const email = this.data.emails.find(e => e.id === emailId);
     if (!email) return;
-    email.mailboxIds[draftMailboxId] = true;
-    if (sentMailboxId) delete email.mailboxIds[sentMailboxId];
+    email.mailboxIds = { [draftMailboxId]: true };
     email.keywords.$draft = true;
     this.recalcMailboxCounts();
   }
diff --git a/lib/email-sanitization.ts b/lib/email-sanitization.ts
index f1b39c90..69afdc3d 100644
--- a/lib/email-sanitization.ts
+++ b/lib/email-sanitization.ts
@@ -79,26 +79,61 @@ export const SIGNATURE_SANITIZE_CONFIG = {
   FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover'],
 };
 
+/** Drop images whose src isn't https: or a base64 raster data: URI. */
+function restrictSignatureImages(node: Element): void {
+  if (node.tagName !== 'IMG') return;
+  const src = node.getAttribute('src');
+  if (!src || !/^(?:https:\/\/|data:image\/(?:png|jpe?g|gif|webp);base64,)/i.test(src)) {
+    node.remove();
+  }
+}
+
 /**
- * Sanitize HTML signature for storage and display.
+ * Sanitize an HTML signature for storage and for the outgoing message.
  * img src is restricted to https: or base64-embedded raster data: URIs
  * (png/jpeg/gif/webp). SVG is excluded because DOMPurify cannot inspect
  * bytes inside a data: URI. Images with a disallowed src are removed
  * entirely so they don't render as broken-image icons.
+ *
+ * Deliberately does NOT force target="_blank": what we store, and what the
+ * recipient receives, should stay as the user wrote it. Use
+ * `sanitizeSignatureHtmlForDisplay` for anything rendered in our own DOM.
  * @param html - User-provided HTML signature
  * @returns Sanitized signature (no scripts, no external resources)
  */
 export function sanitizeSignatureHtml(html: string): string {
+  if (!html?.trim()) return '';
+  DOMPurify.addHook('afterSanitizeAttributes', restrictSignatureImages);
+  try {
+    return DOMPurify.sanitize(html, SIGNATURE_SANITIZE_CONFIG);
+  } finally {
+    DOMPurify.removeAllHooks();
+  }
+}
+
+const SIGNATURE_DISPLAY_CONFIG = {
+  ...SIGNATURE_SANITIZE_CONFIG,
+  ALLOWED_ATTR: [...SIGNATURE_SANITIZE_CONFIG.ALLOWED_ATTR, 'target', 'rel'],
+};
+
+/**
+ * Sanitize an HTML signature for rendering inside our own DOM — the identity
+ * form's live preview and the composer's signature block. Both inject into the
+ * main document rather than the sandboxed iframe used for message bodies, so a
+ * link without target="_blank" navigates the whole app away, taking any unsent
+ * draft or unsaved signature with it. Force every anchor to open a new tab.
+ */
+export function sanitizeSignatureHtmlForDisplay(html: string): string {
   if (!html?.trim()) return '';
   DOMPurify.addHook('afterSanitizeAttributes', (node) => {
-    if (node.tagName !== 'IMG') return;
-    const src = node.getAttribute('src');
-    if (!src || !/^(?:https:\/\/|data:image\/(?:png|jpe?g|gif|webp);base64,)/i.test(src)) {
-      node.remove();
+    restrictSignatureImages(node);
+    if (node.tagName === 'A') {
+      node.setAttribute('target', '_blank');
+      node.setAttribute('rel', 'noopener noreferrer');
     }
   });
   try {
-    return DOMPurify.sanitize(html, SIGNATURE_SANITIZE_CONFIG);
+    return DOMPurify.sanitize(html, SIGNATURE_DISPLAY_CONFIG);
   } finally {
     DOMPurify.removeAllHooks();
   }
@@ -132,6 +167,12 @@ export function sanitizeI18nHtml(html: string): string {
 const PLAIN_TEXT_RENDERED_CONFIG = {
   ALLOWED_TAGS: ['a', 'br', 'p', 'div', 'span'],
   ALLOWED_ATTR: ['href', 'target', 'rel', 'class', 'style'],
+  // DOMPurify URI-tests every attribute value not on its URI-safe list, so the
+  // strict ALLOWED_URI_REGEXP below would strip target="_blank" (and rel) —
+  // "_blank" is not a URI. This branch renders into the main document rather
+  // than the sandboxed iframe, so losing target turns every link into a
+  // whole-app navigation. Exempt the two from the URI check.
+  ADD_URI_SAFE_ATTR: ['target', 'rel'],
   ALLOW_DATA_ATTR: false,
   ALLOWED_URI_REGEXP: /^(?:https?:|mailto:|tel:|cid:|#)/i,
 };
diff --git a/lib/favicon-badge.ts b/lib/favicon-badge.ts
new file mode 100644
index 00000000..d717fd0e
--- /dev/null
+++ b/lib/favicon-badge.ts
@@ -0,0 +1,206 @@
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+// A neutral white band with black digits, rather than the conventional red
+// badge. The band guarantees contrast for the count whatever the base icon
+// looks like, which matters because `faviconUrl` is admin-overridable and may
+// be any artwork. A coloured badge cannot make that guarantee: Bulwark's own
+// icon is rgb(219,45,84), so a red badge sat red-on-red.
+const BADGE_FILL = '#ffffff';
+const BADGE_TEXT_FILL = '#000000';
+const BADGE_FONT = "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif";
+
+// The badge is a Gmail-style band across the bottom of the icon, sized as a
+// fraction of the icon's own coordinate space so it lands correctly whatever
+// viewBox the base declares.
+//
+// The fractions below are not invented: they are measured, pixel-by-pixel, off
+// Gmail's real 16x16 tab favicon, which is the badge users actually compare this
+// one against. Gmail's band is 10 of 16 px tall (0.625 of the icon span), its
+// digits have a cap height of 7 of 16 px (0.44, i.e. a font-size of ~0.61 span),
+// it is flush — edge to edge, and to the bottom, with no inset margin — and its
+// corners carry a slight round, about 1px at 16px, which is roughly 0.1 of the
+// band height. Not square, and emphatically not h/2.
+//
+// The box is sized to the label and centred, as Gmail's is: "5" must not squat
+// on as much white as "99+" does.
+//
+// What keeps a three-glyph label legible is not the width — it is the small
+// corner radius, plus budgeting the font against the FULL span rather than
+// against the fitted box. The rounded-end pill that preceded this failed for the
+// first reason: round ends (rx = h/2) squander their horizontal extent on the
+// curve, which is exactly the space three glyphs need, so at 16px "99+" was an
+// illegible smudge — and at one digit the same pill read as a plain circle. Do
+// not reinstate rx = h/2. Because the font is budgeted against the full span,
+// "99+" shrinks to the size that would fit edge to edge, and its box then grows
+// to fill the icon width anyway; "9" and "47" render at the cap in a box that
+// hugs them.
+const BAND_HEIGHT = 0.625; // band height, as a fraction of the icon span
+const FONT_MAX = 0.61; // font-size cap, as a fraction of the icon span
+const PAD_FACTOR = 0.04; // horizontal padding, as a fraction of the icon span, each side
+const CORNER_FACTOR = 0.1; // corner radius, as a fraction of band height
+const GLYPH_ADV = 0.6; // advance width per glyph, in em, for the sans badge font
+
+// Counts above this render as "99+". Gmail caps at 20, and matching it was
+// tried and reverted: the cap decides how often the label needs three glyphs,
+// and three glyphs do not fit at the full font size. Capping at 20 meant a
+// typical inbox showed "20+" at 84% of the cap size essentially always, where
+// capping at 99 shows a real two-digit count at full size. Bigger digits and a
+// number you can act on beat parity with Gmail's ceiling.
+const BADGE_MAX = 99;
+
+/**
+ * Formats an unread count for display in the badge.
+ * Returns an empty string when there is nothing to show.
+ */
+export function formatBadgeCount(count: number): string {
+  // `< 1`, not `<= 0`: a fractional count such as 0.5 would otherwise floor to
+  // 0 and draw a "0" badge, since String(0) is truthy.
+  if (!Number.isFinite(count) || count < 1) return '';
+  const whole = Math.floor(count);
+  return whole > BADGE_MAX ? `${BADGE_MAX}+` : String(whole);
+}
+
+/**
+ * Strips anything active from the base SVG.
+ *
+ * The base may be an admin-uploaded file, which the branding route deliberately
+ * serves under a sandboxing CSP because SVG can carry script (see
+ * app/api/admin/branding/[filename]/route.ts). Re-emitting it verbatim as a
+ * same-origin `data:` URL inside our own document would un-fence exactly what
+ * that CSP fences, so remove script, foreignObject and every on* handler first.
+ */
+function sanitiseSvg(doc: Document): void {
+  doc.querySelectorAll('script, foreignObject').forEach((el) => el.remove());
+
+  doc.querySelectorAll('*').forEach((el) => {
+    for (const attr of Array.from(el.attributes)) {
+      if (attr.name.toLowerCase().startsWith('on')) {
+        el.removeAttributeNS(attr.namespaceURI, attr.localName);
+      }
+    }
+  });
+}
+
+/**
+ * Composes an unread badge over an SVG favicon and returns it as a data URL.
+ *
+ * Returns null — meaning "leave the favicon alone" — when the count is zero,
+ * or when the source is not usable SVG. Never throws.
+ */
+export function renderBadgedFavicon(baseSvgSource: string, count: number): string | null {
+  const label = formatBadgeCount(count);
+  if (!label) return null;
+
+  try {
+    const doc = new DOMParser().parseFromString(baseSvgSource, 'image/svg+xml');
+
+    if (doc.querySelector('parsererror')) return null;
+
+    const root = doc.documentElement;
+    // The namespace, not just the tag name: an <svg> with no xmlns parses fine
+    // but renders as nothing, so it would yield a non-null, blank data URL.
+    if (!root || root.localName !== 'svg' || root.namespaceURI !== SVG_NS) return null;
+
+    const viewBox = root.getAttribute('viewBox');
+    if (!viewBox) return null;
+
+    const [rawMinX, rawMinY, rawWidth, rawHeight] = viewBox.trim().split(/[\s,]+/).map(Number);
+    if (
+      ![rawMinX, rawMinY, rawWidth, rawHeight].every(Number.isFinite) ||
+      rawWidth <= 0 ||
+      rawHeight <= 0
+    ) {
+      return null;
+    }
+
+    sanitiseSvg(doc);
+
+    // The base declares "1000pt"; point units in a favicon are unreliable.
+    // Unitless 16 with the viewBox retained lets the browser rasterise cleanly
+    // at any size it asks for.
+    root.setAttribute('width', '16');
+    root.setAttribute('height', '16');
+
+    // Normalise the viewBox to a square, centred on the original, before doing
+    // any badge maths. Sizing the badge off min(width, height) double-penalised
+    // a non-square base: a 100x20 wordmark produced a ~2px-tall smudge on a
+    // 16px icon. Squaring first sizes the badge against the box the icon is
+    // actually painted into. It is a no-op for a square viewBox (Bulwark's own
+    // is 0 0 1000 1000). Caveat: a base that pairs a non-square viewBox with
+    // preserveAspectRatio="none" will now letterbox rather than stretch — an
+    // acceptable, arguably better, trade for a favicon, which is always square.
+    const side = Math.max(rawWidth, rawHeight);
+    const minX = rawMinX - (side - rawWidth) / 2;
+    const minY = rawMinY - (side - rawHeight) / 2;
+    root.setAttribute('viewBox', `${minX} ${minY} ${side} ${side}`);
+
+    const span = side;
+    const h = BAND_HEIGHT * span;
+    const fontMax = FONT_MAX * span;
+    const pad = PAD_FACTOR * span;
+
+    // The font first, budgeted against the FULL span: the largest size that
+    // would still leave the padding intact if the box ran edge to edge. That is
+    // the cap for one or two glyphs and a modest shrink for "99+".
+    const font = Math.min(fontMax, (span - 2 * pad) / (label.length * GLYPH_ADV));
+    // The box then hugs the label — never wider than the icon, anchored to the
+    // bottom-right corner. A three-glyph label, whose font was budgeted against
+    // the whole span, fills that span exactly; shorter labels get a narrower
+    // box, leaving the left of the base mark uncovered so the artwork stays
+    // recognisable. Gmail's own badge does the same: measured off its 16px
+    // favicon, a single digit sits hard right in a box about a third of the
+    // icon wide. Centring was tried and rejected — at one digit the box lands
+    // under the middle of the mark and bites a hole out of it.
+    const textW = label.length * GLYPH_ADV * font;
+    const w = Math.min(span, textW + 2 * pad);
+    const x = minX + span - w;
+    const y = minY + span - h;
+    const rx = CORNER_FACTOR * h;
+
+    const bandRect = doc.createElementNS(SVG_NS, 'rect');
+    bandRect.setAttribute('x', String(x));
+    bandRect.setAttribute('y', String(y));
+    bandRect.setAttribute('width', String(w));
+    bandRect.setAttribute('height', String(h));
+    bandRect.setAttribute('rx', String(rx));
+    bandRect.setAttribute('ry', String(rx));
+    // Presentation attributes lose to any CSS rule in the same document, and a
+    // branded base is free to carry `<style>rect{fill:#db2d54}</style>` — which
+    // would paint the badge red-on-red, the exact failure the white band exists
+    // to prevent. A style attribute outranks a stylesheet rule, so set both: the
+    // attribute as the guarantee, the presentation attribute as the fallback.
+    bandRect.setAttribute('fill', BADGE_FILL);
+    bandRect.setAttribute('style', `fill:${BADGE_FILL}`);
+
+    const text = doc.createElementNS(SVG_NS, 'text');
+    text.setAttribute('x', String(x + w / 2));
+    text.setAttribute('y', String(y + h / 2));
+    text.setAttribute('text-anchor', 'middle');
+    text.setAttribute('dominant-baseline', 'central');
+    text.setAttribute('font-family', BADGE_FONT);
+    // 500, not 700: at true 16px a bold count read visibly heavier than the
+    // equivalent badge in Gmail's tab, which is the thing users compare it to.
+    text.setAttribute('font-weight', '500');
+    text.setAttribute('font-size', String(font));
+    text.setAttribute('fill', BADGE_TEXT_FILL);
+    text.setAttribute(
+      'style',
+      `fill:${BADGE_TEXT_FILL};font-family:${BADGE_FONT};font-weight:500;font-size:${font}px`,
+    );
+    text.textContent = label;
+
+    root.appendChild(bandRect);
+    root.appendChild(text);
+
+    const serialised = new XMLSerializer().serializeToString(doc);
+
+    // Percent-encoding rather than base64: btoa throws on any character outside
+    // Latin-1, which a branded SVG may well contain. encodeURIComponent itself
+    // throws on an unpaired surrogate, so this whole tail is guarded. It must be
+    // encodeURIComponent, not encodeURI: the latter leaves "#" bare, and a bare
+    // "#" in a colour truncates the data URL at the first fill.
+    return `data:image/svg+xml,${encodeURIComponent(serialised)}`;
+  } catch {
+    return null;
+  }
+}
diff --git a/lib/jmap/client-interface.ts b/lib/jmap/client-interface.ts
index 5a7d4223..2c7849bf 100644
--- a/lib/jmap/client-interface.ts
+++ b/lib/jmap/client-interface.ts
@@ -83,6 +83,7 @@ export interface IJMAPClient {
   getEmails(mailboxId?: string, accountId?: string, limit?: number, position?: number, hasKeyword?: string, pinnedFirst?: boolean): Promise<{ emails: Email[]; hasMore: boolean; total: number }>;
   getEmailsInMailbox(mailboxId: string): Promise<Email[]>;
   getEmail(emailId: string, accountId?: string): Promise<Email | null>;
+  getSomeEmails(emailsId: string[], accountId?: string): Promise<Email[]>
   getTagCounts(tagIds: string[]): Promise<Record<string, { total: number; unread: number }>>;
   searchEmails(query: string, mailboxId?: string, accountId?: string, limit?: number, position?: number): Promise<{ emails: Email[]; hasMore: boolean; total: number }>;
   advancedSearchEmails(
@@ -188,6 +189,7 @@ export interface IJMAPClient {
   getScheduledEmails(limit?: number, position?: number): Promise<{ emails: ScheduledEmail[]; hasMore: boolean; total: number; nextPosition: number }>;
   cancelEmailSubmission(submissionId: string): Promise<void>;
   rescheduleEmailSubmission(submissionId: string, emailId: string, identityId: string, delayedUntil: string): Promise<SendEmailResult>;
+  /** `sentMailboxId` is accepted for backwards compatibility but ignored: the message is placed in Drafts only. */
   restoreEmailToDraft(emailId: string, draftMailboxId: string, sentMailboxId?: string): Promise<void>;
 
   sendImipReply(opts: {
diff --git a/lib/jmap/client.ts b/lib/jmap/client.ts
index 387f2393..40f9f933 100644
--- a/lib/jmap/client.ts
+++ b/lib/jmap/client.ts
@@ -15,6 +15,41 @@ function parseRecipientString(s: string): { name?: string; email: string } {
   return { email: trimmed };
 }
 
+/**
+ * Build the `mailboxIds` portion of an `Email/set` PatchObject as a full-property
+ * replacement — `{ mailboxIds: { <id>: true, ... } }` — instead of per-id
+ * `mailboxIds/<id>` JSON-Pointer patches.
+ *
+ * Two reasons:
+ *  1. It states the actual intent of a post-send / undo-send move: the message
+ *     should belong to *exactly* the given mailbox(es).
+ *  2. It avoids per-id JSON-Pointer tokens entirely. Stalwart (observed on
+ *     0.15.5) rejects an `Email/set` PatchObject whose pointer token is a
+ *     purely-numeric string — e.g. `mailboxIds/0` for a mailbox whose JMAP id is
+ *     "0" — with `invalidProperties: "Invalid patch value"` (it treats the digits
+ *     as a JSON-Pointer array index even though `mailboxIds` is a JSON object;
+ *     cf. RFC 6901 §4, and RFC 8620 §1.2's warning against interop-hostile ids).
+ *     That silently stranded already-delivered mail in Drafts for accounts whose
+ *     Drafts/Sent mailbox id happened to be all digits (a full member of `0`,
+ *     `1`, … `9`, `10`, … was verified rejected; ids containing a letter work).
+ *     Stalwart fixed the parsing in 0.16.5 (stalwartlabs/stalwart@175f34ea,
+ *     jmap-tools 0.1.5), but earlier deployments remain in the wild — and not
+ *     emitting interop-hostile pointer tokens is the safer shape regardless.
+ *
+ * This is a *replacement*: it drops any other mailbox membership the message
+ * had, so callers must know the complete target set. Do NOT also place a
+ * `mailboxIds/<id>` pointer key in the same PatchObject — a pointer whose prefix
+ * is another key in the object is illegal (RFC 8620 §5.3).
+ */
+function mailboxIdsReplacement(
+  mailboxId: string,
+  ...moreMailboxIds: string[]
+): { mailboxIds: Record<string, true> } {
+  const mailboxIds: Record<string, true> = { [mailboxId]: true };
+  for (const id of moreMailboxIds) mailboxIds[id] = true;
+  return { mailboxIds };
+}
+
 export class RateLimitError extends Error {
   retryAfterMs: number;
   constructor(retryAfterMs: number) {
@@ -432,6 +467,17 @@ function stripMessageIdBrackets(id: string): string {
   return id.trim().replace(/^<+/, '').replace(/>+$/, '').trim();
 }
 
+// Generate a Message-ID for outgoing mail (bare msg-id, no angle brackets, per
+// RFC 8621 §4.1.2.3). Without one the server synthesizes it from its OS
+// hostname, which leaks internal names (e.g. @ip-10-0-12-97.ec2.internal) into
+// headers — an anti-spam signal and an information disclosure. Use the sender's
+// domain instead, matching what receivers expect a Message-ID to look like.
+function generateMessageId(fromEmail: string): string {
+  const at = fromEmail.lastIndexOf('@');
+  const domain = at > 0 ? fromEmail.slice(at + 1) : 'localhost';
+  return `${Date.now().toString(36)}.${crypto.randomUUID()}@${domain}`;
+}
+
 /**
  * Build a CalendarEvent/query filter restricting results to the given
  * calendars. Stalwart implements the singular `inCalendar` condition (one
@@ -550,6 +596,43 @@ export class JMAPClient implements IJMAPClient {
     this.authHeader = `Bearer ${token}`;
   }
 
+  async getSomeEmails(emailsId: string[], accountId?: string): Promise<Email[]> {
+    try {
+      const targetAccountId = accountId || this.accountId;
+      if (!emailsId || emailsId.length === 0) {
+        return [];
+      }
+
+      const response = await this.request([
+        ["Email/get", {
+          accountId: targetAccountId,
+          ids: emailsId,
+          properties: [...EMAIL_LIST_PROPERTIES],
+        }, "0"],
+      ]);
+
+      const getResponse = response.methodResponses?.[0]?.[1];
+
+      if (response.methodResponses?.[0]?.[0] === "Email/get" && getResponse) {
+        const emails = (getResponse.list || []) as Email[];
+
+        emails.sort((a: Email, b: Email) =>
+          new Date(b.receivedAt).getTime() - new Date(a.receivedAt).getTime()
+        );
+
+        if (accountId && accountId !== this.accountId) {
+          namespaceMailboxIds(emails, accountId);
+        }
+
+        return emails;
+      }
+
+      return [];
+    } catch (error) {
+      console.error('Failed to get specific emails:', error);
+      return [];
+    }
+  }
   /** Upgrade an existing basic-auth client to bearer-token auth (e.g. after TOTP token exchange). */
   upgradeToBearer(accessToken: string, onRefresh?: () => Promise<string | null>): void {
     this.authMode = 'bearer';
@@ -2430,6 +2513,7 @@ export class JMAPClient implements IJMAPClient {
       cc: cc?.length ? cc.map(parseRecipientString) : undefined,
       bcc: bcc?.length ? bcc.map(parseRecipientString) : undefined,
       subject,
+      messageId: [generateMessageId(fromEmail || this.username)],
       inReplyTo: normalizedInReplyTo?.length ? normalizedInReplyTo : undefined,
       references: normalizedReferences?.length ? normalizedReferences : undefined,
       keywords: { "$seen": true, "$draft": true },
@@ -2473,8 +2557,7 @@ export class JMAPClient implements IJMAPClient {
     // issues with servers that encrypt on append (e.g. Stalwart). See #188.
     const onSuccessUpdateEmail = {
       "#1": {
-        [`mailboxIds/${draftsMailbox.id}`]: null,
-        [`mailboxIds/${sentMailbox.id}`]: true,
+        ...mailboxIdsReplacement(sentMailbox.id),
         "keywords/$draft": null,
       },
     };
@@ -2748,8 +2831,7 @@ export class JMAPClient implements IJMAPClient {
         create: { "sub-1": { emailId: `#${emailId}`, identityId: finalIdentityId } },
         onSuccessUpdateEmail: {
           "#sub-1": {
-            [`mailboxIds/${draftsMailbox.id}`]: null,
-            [`mailboxIds/${sentMailbox.id}`]: true,
+            ...mailboxIdsReplacement(sentMailbox.id),
             "keywords/$draft": null,
           },
         },
@@ -2934,8 +3016,7 @@ export class JMAPClient implements IJMAPClient {
         create: { "sub-1": { emailId: `#${emailId}`, identityId } },
         onSuccessUpdateEmail: {
           "#sub-1": {
-            [`mailboxIds/${draftsMailbox.id}`]: null,
-            [`mailboxIds/${sentMailbox.id}`]: true,
+            ...mailboxIdsReplacement(sentMailbox.id),
             "keywords/$draft": null,
           },
         },
@@ -3089,8 +3170,7 @@ export class JMAPClient implements IJMAPClient {
         create: { "sub-1": { emailId: `#${emailId}`, identityId } },
         onSuccessUpdateEmail: {
           "#sub-1": {
-            [`mailboxIds/${draftsMailbox.id}`]: null,
-            [`mailboxIds/${sentMailbox.id}`]: true,
+            ...mailboxIdsReplacement(sentMailbox.id),
             "keywords/$draft": null,
           },
         },
@@ -6200,8 +6280,7 @@ export class JMAPClient implements IJMAPClient {
         ...(draftMailboxId ? {
           onSuccessUpdateEmail: {
             '#raw-submit': {
-              [`mailboxIds/${draftMailboxId}`]: null,
-              [`mailboxIds/${sentMailboxId}`]: true,
+              ...mailboxIdsReplacement(sentMailboxId),
               'keywords/$draft': null,
             },
           },
@@ -6368,8 +6447,7 @@ export class JMAPClient implements IJMAPClient {
         ...(draftsMailbox && sentMailbox ? {
           onSuccessUpdateEmail: {
             '#replacement': {
-              [`mailboxIds/${draftsMailbox.id}`]: null,
-              [`mailboxIds/${sentMailbox.id}`]: true,
+              ...mailboxIdsReplacement(sentMailbox.id),
               'keywords/$draft': null,
             },
           },
@@ -6401,15 +6479,17 @@ export class JMAPClient implements IJMAPClient {
     return { scheduled: true, emailId, emailSubmissionId: replacementId, sendAt: finalSendAt };
   }
 
-  async restoreEmailToDraft(emailId: string, draftMailboxId: string, sentMailboxId?: string): Promise<void> {
+  // The third parameter is intentionally unused: this restores an undo-send /
+  // canceled-scheduled message to be a draft, so it should live in Drafts *only*.
+  // A full mailboxIds replacement (rather than mailboxIds/<id> pointer patches)
+  // both drops the Sent copy without needing its id and stays safe for numeric
+  // mailbox ids — see mailboxIdsReplacement().
+  async restoreEmailToDraft(emailId: string, draftMailboxId: string, _sentMailboxId?: string): Promise<void> {
     const update: Record<string, unknown> = {
-      [`mailboxIds/${draftMailboxId}`]: true,
+      ...mailboxIdsReplacement(draftMailboxId),
       'keywords/$draft': true,
       'keywords/$seen': true,
     };
-    if (sentMailboxId) {
-      update[`mailboxIds/${sentMailboxId}`] = null;
-    }
     const response = await this.request([
       ['Email/set', {
         accountId: this.accountId,
diff --git a/lib/oauth/discovery.ts b/lib/oauth/discovery.ts
index 8a84ac68..75c0e226 100644
--- a/lib/oauth/discovery.ts
+++ b/lib/oauth/discovery.ts
@@ -21,6 +21,26 @@ const CACHE_TTL_MS = 10 * 60 * 1000;
 const CACHE_MAX_ENTRIES = 64;
 const metadataCache = new Map<string, { metadata: OAuthMetadata; expiresAt: number }>();
 
+// --- Discovery hardening ---------------------------------------------------
+// The login page's "Sign in with SSO" button is gated on OIDC discovery
+// succeeding. An un-timed, un-retried fetch that dropped its cached value on
+// failure let a single transient blip to the IdP silently hide the button.
+// A per-fetch timeout, one retry, and serving stale-but-usable metadata on
+// failure keep the button up through a transient blip.
+const DISCOVERY_TIMEOUT_MS = 4000;
+const DISCOVERY_RETRIES = 1;
+const DISCOVERY_RETRY_DELAY_MS = 300;
+// When discovery fails, remember the outcome briefly so repeated login-page
+// loads during an outage don't hammer the IdP. Also throttles re-discovery
+// while serving stale metadata. Kept short so recovery is fast.
+const DISCOVERY_FAILURE_TTL_MS = 15 * 1000;
+
+// Records recent failures for serverUrls that have no cached metadata to serve.
+const negativeCache = new Map<string, number>();
+
+const sleep = (ms: number): Promise<void> =>
+  new Promise((resolve) => setTimeout(resolve, ms));
+
 function rememberMetadata(serverUrl: string, metadata: OAuthMetadata): void {
   // Bound the cache so callers that can supply arbitrary serverUrl values
   // (e.g. unauthenticated routes that fall back to user input) cannot
@@ -33,6 +53,16 @@ function rememberMetadata(serverUrl: string, metadata: OAuthMetadata): void {
   metadataCache.set(serverUrl, { metadata, expiresAt: Date.now() + CACHE_TTL_MS });
 }
 
+function rememberFailure(serverUrl: string): void {
+  // Bound like metadataCache: a user-supplied serverUrl must not grow this map
+  // without limit.
+  if (negativeCache.size >= CACHE_MAX_ENTRIES) {
+    const oldest = negativeCache.keys().next().value;
+    if (oldest !== undefined) negativeCache.delete(oldest);
+  }
+  negativeCache.set(serverUrl, Date.now() + DISCOVERY_FAILURE_TTL_MS);
+}
+
 // Endpoints come from an attacker-controllable JSON document when callers pass
 // a user-supplied serverUrl (e.g. /api/auth/totp-token-exchange under
 // allowCustomJmapEndpoint). Without a validator, a malicious metadata document
@@ -52,24 +82,18 @@ async function endpointsArePublic(
   return true;
 }
 
-export async function discoverOAuth(
-  serverUrl: string,
-  options?: DiscoverOAuthOptions,
+// One pass over the well-known documents. Returns usable metadata, or null
+// (pushing diagnostics into `errors`) when neither URL yields a public,
+// complete document. Each fetch is bounded by a timeout so an unresponsive IdP
+// can never hang the request (and, with it, the login page's SSO button).
+async function attemptDiscovery(
+  urls: string[],
+  validate: EndpointValidator | undefined,
+  errors: string[],
 ): Promise<OAuthMetadata | null> {
-  const cached = metadataCache.get(serverUrl);
-  if (cached && cached.expiresAt > Date.now()) return cached.metadata;
-  if (cached) metadataCache.delete(serverUrl);
-
-  const urls = [
-    `${serverUrl}/.well-known/oauth-authorization-server`,
-    `${serverUrl}/.well-known/openid-configuration`,
-  ];
-
-  const errors: string[] = [];
-
   for (const url of urls) {
     try {
-      const response = await fetch(url);
+      const response = await fetch(url, { signal: AbortSignal.timeout(DISCOVERY_TIMEOUT_MS) });
       if (!response.ok) {
         errors.push(`${url} returned HTTP ${response.status}`);
         continue;
@@ -82,20 +106,18 @@ export async function discoverOAuth(
           data.token_endpoint,
           data.revocation_endpoint,
           data.end_session_endpoint,
-        ], options?.validateEndpoint);
+        ], validate);
         if (!allPublic) {
           errors.push(`${url} returned non-public or invalid endpoint URL`);
           continue;
         }
-        const metadata: OAuthMetadata = {
+        return {
           issuer: data.issuer,
           authorization_endpoint: data.authorization_endpoint,
           token_endpoint: data.token_endpoint,
           revocation_endpoint: data.revocation_endpoint,
           end_session_endpoint: data.end_session_endpoint,
         };
-        rememberMetadata(serverUrl, metadata);
-        return metadata;
       }
       errors.push(`${url} response missing required endpoints`);
     } catch (err) {
@@ -103,7 +125,51 @@ export async function discoverOAuth(
       continue;
     }
   }
+  return null;
+}
 
+export async function discoverOAuth(
+  serverUrl: string,
+  options?: DiscoverOAuthOptions,
+): Promise<OAuthMetadata | null> {
+  const cached = metadataCache.get(serverUrl);
+  if (cached && cached.expiresAt > Date.now()) return cached.metadata;
+  // A stale entry is deliberately retained (not deleted) so it can be served
+  // as a fallback below if the refresh fails - this keeps the SSO button up
+  // through a transient IdP blip.
+
+  // Nothing to serve and we failed recently: skip hammering the IdP.
+  if (!cached) {
+    const retryAfter = negativeCache.get(serverUrl);
+    if (retryAfter !== undefined && retryAfter > Date.now()) return null;
+  }
+
+  const urls = [
+    `${serverUrl}/.well-known/oauth-authorization-server`,
+    `${serverUrl}/.well-known/openid-configuration`,
+  ];
+
+  const errors: string[] = [];
+  for (let attempt = 0; attempt <= DISCOVERY_RETRIES; attempt++) {
+    if (attempt > 0) await sleep(DISCOVERY_RETRY_DELAY_MS);
+    const metadata = await attemptDiscovery(urls, options?.validateEndpoint, errors);
+    if (metadata) {
+      rememberMetadata(serverUrl, metadata);
+      negativeCache.delete(serverUrl);
+      return metadata;
+    }
+  }
+
+  // Every attempt failed. Prefer stale-but-usable metadata over nothing so the
+  // login page keeps rendering the SSO button during the outage; throttle the
+  // next re-discovery so we don't retry on every request.
+  if (cached) {
+    cached.expiresAt = Date.now() + DISCOVERY_FAILURE_TTL_MS;
+    console.warn(`[OAuth] Discovery refresh failed for ${serverUrl}; serving stale metadata: ${errors.join('; ')}`);
+    return cached.metadata;
+  }
+
+  rememberFailure(serverUrl);
   console.error(`[OAuth] Discovery failed for ${serverUrl}: ${errors.join('; ')}`);
   return null;
 }
diff --git a/lib/plugin-hooks.ts b/lib/plugin-hooks.ts
index 00ccc58c..02fb8107 100644
--- a/lib/plugin-hooks.ts
+++ b/lib/plugin-hooks.ts
@@ -272,6 +272,10 @@ export const emailHooks = {
   // normally. This is the send-takeover hook used by the S/MIME plugin to
   // replace the former native sign+encrypt+sendRaw pipeline.
   onComposeSend: new HookBus(),
+  // Transform hook - receive Email[] or ScheduledEmail[] just after there are fetched to 
+  // lets plugin edit emails before they are shown in row. Used to populate preview 
+  // field for encryption plugins.
+  onEmailsFetched: new HookBus(),
 };
 
 // §7.2 Calendar Hooks
diff --git a/lib/plugin-sandbox/consent.ts b/lib/plugin-sandbox/consent.ts
index 2a1f9871..d8941732 100644
--- a/lib/plugin-sandbox/consent.ts
+++ b/lib/plugin-sandbox/consent.ts
@@ -86,6 +86,7 @@ const PERMISSION_LABELS: Record<string, { title: string; body: string }> = {
   'http:post':        { title: 'Call same-origin APIs',          body: 'Make authenticated requests to the webmail backend on your behalf.' },
   'http:fetch':       { title: 'Talk to external services',      body: 'Make uncredentialled requests to the third-party origins listed in the manifest.' },
   'admin:config':     { title: 'Read/write admin config',        body: 'Access this plugin\'s admin-supplied configuration values.' },
+  'ui:download-file': { title: 'Download files',                 body: 'Download custom files generated by the plugin.' },
 };
 
 export function describePermission(perm: string): { title: string; body: string } {
diff --git a/lib/plugin-sandbox/host-api.ts b/lib/plugin-sandbox/host-api.ts
index 6bcd2870..f9c84323 100644
--- a/lib/plugin-sandbox/host-api.ts
+++ b/lib/plugin-sandbox/host-api.ts
@@ -22,6 +22,7 @@ const PRIVILEGED_ONLY_METHODS = new Set<string>([
   'jmap.fetchBlob',
   'jmap.sendRaw',
   'upfiles.get',
+  'webauthn.getOrCreate',
   'upfiles.set',
 ]);
 
@@ -47,6 +48,7 @@ const PERM_PER_METHOD: Record<string, Permission | null> = {
   // To just read, use jmap.fetchBlob.
   'upfiles.get' : 'email:blob-write',
   'upfiles.save' : 'email:blob-write',
+  'webauthn.getOrCreate': 'crypto:full',
   // admin
   'admin.getConfig': 'admin:config',
   'admin.getAllConfig': 'admin:config',
@@ -58,6 +60,7 @@ const PERM_PER_METHOD: Record<string, Permission | null> = {
   'ui.prompt': null,
   'ui.rerenderEmail': null,
   'ui.openExternalUrl': null,
+  'ui.downloadFile': 'ui:download-file'
 };
 
 function hasPermission(plugin: InstalledPlugin, perm: Permission): boolean {
@@ -274,6 +277,117 @@ async function doJmapSendRaw(
   );
 }
 
+// ─── WebAuthn (privileged tier) ─────────────────────────────────────────────
+
+// This salt acts as a constant context identifier for key derivation.
+// While hardcoded, security is maintained because the WebAuthn PRF extension 
+// mixes this salt with the device's unique, hardware-bound private key.
+// Changing this string will result in a completely different derived secret.
+const PRF_SALT = new TextEncoder().encode("bulwark-plugins-v1");
+
+/**
+ * Retrieves or creates a WebAuthn passkey and extracts its PRF secret.
+ * This secret is typically used as a local master encryption key.
+ */
+async function doGetOrCreatePRF(
+    masterCredentialIdBytes: number[] | undefined, 
+    name?: string, 
+    displayName?: string
+): Promise<{ credentialId: number[]; prfSecret: number[] } | string> {
+    
+    // ─── CASE 1: Credential already exists (Authentication) ──────────────────
+    if (masterCredentialIdBytes && masterCredentialIdBytes.length > 0) {
+      const credentialId = new Uint8Array(masterCredentialIdBytes).buffer;
+      
+      // Request an assertion (login) while evaluating the PRF salt
+      const assertion = await navigator.credentials.get({
+        publicKey: {
+          challenge: crypto.getRandomValues(new Uint8Array(32)),
+          allowCredentials: [{ type: "public-key", id: credentialId }],
+          userVerification: "required", // Required to ensure user presence & intent (biometrics/PIN)
+          extensions: { prf: { eval: { first: PRF_SALT } } } as any
+        }
+      }) as PublicKeyCredential;
+
+      // Extract the derived symmetric key from the authenticator's output
+      const outputs = assertion.getClientExtensionResults();
+      const prfSecret = (outputs as any).prf?.results?.first;
+      if (!prfSecret) return 'Cannot get PRF secret from existing credential.';
+
+      return {
+        credentialId: masterCredentialIdBytes,
+        prfSecret: Array.from(new Uint8Array(prfSecret))
+      };
+    }
+    
+    // ─── CASE 2: No masterCredentialIdBytes passed, create a new key (Registration) ──────────
+    else if (name && displayName) {
+      // Create the new passkey credential
+      const credential = await navigator.credentials.create({
+        publicKey: {
+          challenge: crypto.getRandomValues(new Uint8Array(32)),
+          rp: { name: "Bulwark Webmail", id: window.location.hostname },
+          user: {
+            id: crypto.getRandomValues(new Uint8Array(16)),
+            name: name,
+            displayName: displayName
+          },
+          // Supported cryptographic algorithms
+          pubKeyCredParams: [
+            { type: "public-key" as const, alg: -7 },   // ES256 (Recommended)
+            { type: "public-key" as const, alg: -257 }  // RS256 (Compatibility fallback)
+          ],
+          authenticatorSelection: {
+            authenticatorAttachment: "platform", // Forces the use of hardware/OS-bound passkeys (TouchID, Windows Hello, etc.)
+            userVerification: "required"
+          },
+          extensions: { prf: {} } as any // Request PRF extension support from the authenticator
+        }
+      }) as PublicKeyCredential;
+      
+      const outputs = credential.getClientExtensionResults();
+
+      // Ensure the authenticator successfully enabled and supports the PRF extension
+      const isPrfEnabled = (outputs as any).prf?.enabled;
+      if (!isPrfEnabled) {
+        return 'The authenticator does not support or has rejected the PRF extension.';
+      }
+      
+      // Note: Since many authenticators do not return the PRF evaluation results 
+      // directly during creation, we immediately run an assertion (get) to fetch the initial secret.
+      const assertion = await navigator.credentials.get({
+        publicKey: {
+          challenge: crypto.getRandomValues(new Uint8Array(32)),
+          allowCredentials: [{
+            type: "public-key",
+            id: credential.rawId
+          }],
+          userVerification: "required",
+          extensions: {
+            prf: { eval: { first: PRF_SALT } }
+          } as any
+        }
+      }) as PublicKeyCredential;
+
+      const assertionOutputs = assertion.getClientExtensionResults();
+
+      const prfSecret = (assertionOutputs as any).prf?.results?.first;
+      if (!prfSecret) {
+        return 'Cannot get PRF secret from existing credential.';
+      }
+
+      return {
+        credentialId: Array.from(new Uint8Array(credential.rawId)),
+        prfSecret: Array.from(new Uint8Array(prfSecret))
+      };
+    }
+    
+    // ─── CASE 3: Insufficient parameters provided ───────────────────────────
+    else {
+      throw new Error("Provide name and display name if you want to create a new PRF.");
+    }
+}
+
 // ─── Uploaded files in IndexedDB (privileged tier) ──────────────────────────
 
 async function getFile(fileID:string): Promise<File | null> {
@@ -287,6 +401,24 @@ async function saveFile(formerFileID:string, file: File): Promise<string> {
   return fileId;
 }
 
+// ─── Download files generated by the plugin. This is not user's files or attachments ──────────────────────────
+async function downloadFile(args: { content: string; filename: string; contentType?: string }): Promise<void> {
+    const { content, filename, contentType = 'application/json' } = args;
+
+    try {
+      const url = URL.createObjectURL(new Blob([content], { type: contentType }));
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a); 
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+     throw new Error(`Failed to download file: ${error}`);
+    }
+}
+
 // ─── admin config (same as before) ────────────────────────────
 
 async function adminGetAll(pluginId: string): Promise<Record<string, unknown>> {
@@ -361,6 +493,7 @@ export async function dispatchApiCall(
     );
     case 'upfiles.get' : return getFile(args[0] as string);
     case 'upfiles.save' : return saveFile(args[0] as string, args[1] as File);
+    case 'webauthn.getOrCreate': return doGetOrCreatePRF(args[0] as number[] | undefined, args[1] as string | undefined, args[2] as string | undefined);
 
     case 'admin.getConfig':    return adminGet(plugin.id, args[0] as string);
     case 'admin.getAllConfig': return adminGetAll(plugin.id);
@@ -433,6 +566,10 @@ export async function dispatchApiCall(
       window.open(parsed.toString(), '_blank', 'noopener,noreferrer');
       return undefined;
     }
+    case 'ui.downloadFile': {
+      const opts = args[0] as { content: string; filename: string; contentType?: string };
+      return downloadFile(opts);
+    }
 
     default:
       throw new Error(`Unhandled method "${method}"`);
diff --git a/lib/plugin-sandbox/protocol.ts b/lib/plugin-sandbox/protocol.ts
index fe61555f..33a11f21 100644
--- a/lib/plugin-sandbox/protocol.ts
+++ b/lib/plugin-sandbox/protocol.ts
@@ -241,10 +241,12 @@ export const SANDBOX_PRIVILEGED_PATH = '/plugin-sandbox-privileged';
 export const API_METHODS = [
   'storage.get', 'storage.set', 'storage.remove', 'storage.keys',
   'http.post', 'http.fetch',
+  'webauthn.getOrCreate',
   'jmap.fetchBlob', 'jmap.sendRaw',
+  'upfiles.get', 'upfiles.save',
   'admin.getConfig', 'admin.getAllConfig', 'admin.setConfig', 'admin.deleteConfig',
   'toast.success', 'toast.error', 'toast.info', 'toast.warning',
-  'ui.confirm', 'ui.alert', 'ui.prompt', 'ui.rerenderEmail', 'ui.openExternalUrl',
+  'ui.confirm', 'ui.alert', 'ui.prompt', 'ui.rerenderEmail', 'ui.openExternalUrl', 'ui.downloadFile'
 ] as const;
 
 export type ApiMethod = (typeof API_METHODS)[number];
diff --git a/lib/plugin-sandbox/runtime.tsx b/lib/plugin-sandbox/runtime.tsx
index fa9343e5..9e72b519 100644
--- a/lib/plugin-sandbox/runtime.tsx
+++ b/lib/plugin-sandbox/runtime.tsx
@@ -165,6 +165,9 @@ function buildPluginApi(manifest: PluginManifest) {
       version: manifest.version,
       settings: { ...manifest.settings },
     },
+    webauthn: {
+      getOrCreate: (masterCredentialIdBytes?: number[], name?: string, displayName?: string) => callApi('webauthn.getOrCreate', [masterCredentialIdBytes, name, displayName], 0)
+    },
     storage: {
       get: (key: string) => callApi('storage.get', [key]),
       set: (key: string, value: unknown) => callApi('storage.set', [key, value]),
@@ -229,6 +232,9 @@ function buildPluginApi(manifest: PluginManifest) {
       /** Opens an http/https URL in a new tab via host `window.open`. */
       openExternalUrl: (url: string, target?: string) =>
         callApi('ui.openExternalUrl', [url, target]) as Promise<void>,
+      /** Downloads a file generated by the plugin. Not a user's file or attachment. */
+      downloadFile: (opts: { content: string; filename: string; contentType?: string }) =>
+        callApi('ui.downloadFile', [opts]) as Promise<void>,
     },
     admin: {
       getConfig: (key: string) => callApi('admin.getConfig', [key]),
diff --git a/lib/plugin-types.ts b/lib/plugin-types.ts
index 0245054c..32fcb573 100644
--- a/lib/plugin-types.ts
+++ b/lib/plugin-types.ts
@@ -925,6 +925,7 @@ export const ALL_PERMISSIONS = [
   'http:post', 'http:fetch',
   'ui:observe', 'ui:toolbar', 'ui:app-top-banner', 'ui:email-banner', 'ui:email-footer',
   'ui:email-details',
+  'ui:download-file',
   'ui:composer-toolbar', 'ui:composer-sidebar',
   'ui:sidebar-widget', 'ui:settings-section',
   'ui:context-menu', 'ui:navigation-rail', 'ui:keyboard',
diff --git a/locales/cs/common.json b/locales/cs/common.json
index 577cc390..ef6e7451 100644
--- a/locales/cs/common.json
+++ b/locales/cs/common.json
@@ -949,6 +949,10 @@
         "label": "Zobrazit celkový počet zpráv",
         "description": "Zobrazí celkový počet zpráv vedle složek a štítků spolu s počtem nepřečtených. Vypněte pro zobrazení pouze nepřečtených."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Pro rozhraní (experimentální)",
         "description": "Rozložení pro pokročilé uživatele pouze pro stolní počítače s prohlížením zpráv na více kartách a pracovními postupy napříč účty. Standardní rozhraní zůstává nedotčeno; kdykoli se můžete vrátit.",
diff --git a/locales/da/common.json b/locales/da/common.json
index 334b635c..916a2f73 100644
--- a/locales/da/common.json
+++ b/locales/da/common.json
@@ -952,6 +952,10 @@
         "label": "Vis samlet antal beskeder",
         "description": "Viser det samlede antal beskeder ud for mapper og tags sammen med antallet af ulæste. Slå fra for kun at vise ulæste."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Pro-grænseflade (eksperimentel)",
         "description": "Power user-layout kun til skrivebordet med beskedvisning på flere faner og arbejdsforløb på tværs af konti. Standardgrænsefladen påvirkes ikke; du kan skifte tilbage når som helst.",
diff --git a/locales/de/common.json b/locales/de/common.json
index 02b42581..fe8c93fa 100644
--- a/locales/de/common.json
+++ b/locales/de/common.json
@@ -949,6 +949,10 @@
         "label": "Gesamtzahl der Nachrichten anzeigen",
         "description": "Zeigt neben Ordnern und Tags die Gesamtzahl der Nachrichten zusätzlich zur Anzahl ungelesener Nachrichten an. Deaktivieren, um nur ungelesene Nachrichten anzuzeigen."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Pro-Oberfläche (experimentell)",
         "description": "Desktop-Power-User-Layout mit Multi-Tab-Nachrichtenansicht und kontoübergreifenden Workflows. Die Standardoberfläche bleibt unverändert; Sie können jederzeit zurückwechseln.",
diff --git a/locales/en/common.json b/locales/en/common.json
index 7de12348..793fa699 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -952,6 +952,10 @@
         "label": "Show Total Message Count",
         "description": "Show the total message count next to folders and tags, alongside the unread count. Disable to show only unread counts."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Pro Interface (Experimental)",
         "description": "Desktop-only power-user layout with multi-tab message browsing and cross-account workflows. The standard interface is unaffected; you can switch back at any time.",
diff --git a/locales/es/common.json b/locales/es/common.json
index 7110b9be..f9869b37 100644
--- a/locales/es/common.json
+++ b/locales/es/common.json
@@ -949,6 +949,10 @@
         "label": "Mostrar el número total de mensajes",
         "description": "Muestra el número total de mensajes junto a las carpetas y etiquetas, además del número de mensajes no leídos. Desactívalo para mostrar solo los no leídos."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Interfaz Pro (experimental)",
         "description": "Diseño de escritorio para usuarios avanzados con exploración de mensajes en varias pestañas y flujos de trabajo entre cuentas. La interfaz estándar no se ve afectada; puedes volver en cualquier momento.",
diff --git a/locales/fa/common.json b/locales/fa/common.json
index cfd9e953..8e36a247 100644
--- a/locales/fa/common.json
+++ b/locales/fa/common.json
@@ -952,6 +952,10 @@
         "label": "نمایش تعداد کل پیام‌ها",
         "description": "تعداد کل پیام‌ها را در کنار پوشه‌ها و برچسب‌ها، همراه با تعداد خوانده‌نشده‌ها نمایش می‌دهد. برای نمایش فقط تعداد خوانده‌نشده‌ها غیرفعال کنید."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "رابط حرفه‌ای (آزمایشی)",
         "description": "چیدمان قدرت-کاربری فقط دسکتاپ",
diff --git a/locales/fr/common.json b/locales/fr/common.json
index 8d0c2ac7..6708307e 100644
--- a/locales/fr/common.json
+++ b/locales/fr/common.json
@@ -949,6 +949,10 @@
         "label": "Afficher le nombre total de messages",
         "description": "Affiche le nombre total de messages à côté des dossiers et des étiquettes, en plus du nombre de messages non lus. Désactivez pour n'afficher que les messages non lus."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Interface Pro (expérimental)",
         "description": "Disposition pour utilisateurs avancés (bureau uniquement) avec navigation des messages multi-onglets et flux de travail multi-comptes. L'interface standard n'est pas affectée ; vous pouvez revenir à tout moment.",
diff --git a/locales/he/common.json b/locales/he/common.json
index bcbe1a4b..38690937 100644
--- a/locales/he/common.json
+++ b/locales/he/common.json
@@ -914,6 +914,10 @@
         "label": "הצגת מספר ההודעות הכולל",
         "description": "מציג את מספר ההודעות הכולל לצד תיקיות ותגיות, לצד מספר ההודעות שלא נקראו. כבו כדי להציג רק את מספר ההודעות שלא נקראו."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "ממשק Pro (ניסיוני)",
         "description": "פריסה של משתמש כוח לשולחן עבודה בלבד עם גלישה מרובת-הודעות וזרימות עבודה חוצות-חשבונות. הממשק הסטנדרטי אינו מושפע; תוכל להחזור בכל עת.",
diff --git a/locales/hu/common.json b/locales/hu/common.json
index 24a18433..d64fa4c1 100644
--- a/locales/hu/common.json
+++ b/locales/hu/common.json
@@ -952,6 +952,10 @@
         "label": "Összes üzenet számának megjelenítése",
         "description": "Megjeleníti az üzenetek teljes számát a mappák és címkék mellett, az olvasatlanok számán túl. Kapcsolja ki, ha csak az olvasatlanok számát szeretné látni."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Pro felület (Kísérleti)",
         "description": "Asztali számítógépes erőfelhasználói elrendezés több lapos üzenetböngészéssel és fiókok közötti munkafolyamatokkal. A szabványos felületet nem érinti; bármikor visszaválthatsz.",
diff --git a/locales/it/common.json b/locales/it/common.json
index 1721864c..e38cdc38 100644
--- a/locales/it/common.json
+++ b/locales/it/common.json
@@ -949,6 +949,10 @@
         "label": "Mostra il numero totale di messaggi",
         "description": "Mostra il numero totale di messaggi accanto a cartelle ed etichette, insieme al conteggio dei non letti. Disattiva per mostrare solo i non letti."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Interfaccia Pro (sperimentale)",
         "description": "Layout per utenti esperti solo desktop con esplorazione messaggi a più schede e flussi tra account. L'interfaccia standard non è influenzata; puoi tornare indietro in qualsiasi momento.",
diff --git a/locales/ja/common.json b/locales/ja/common.json
index d93f3b27..4d786e0a 100644
--- a/locales/ja/common.json
+++ b/locales/ja/common.json
@@ -949,6 +949,10 @@
         "label": "メッセージの総数を表示",
         "description": "フォルダーやタグの横に、未読数に加えてメッセージの総数を表示します。未読数のみを表示するには無効にします。"
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Pro インターフェイス（実験的）",
         "description": "デスクトップ専用のパワーユーザー向けレイアウトで、マルチタブのメッセージ閲覧やアカウント横断のワークフローに対応します。標準インターフェイスには影響せず、いつでも元に戻せます。",
diff --git a/locales/ko/common.json b/locales/ko/common.json
index 6a80e438..76a3c908 100644
--- a/locales/ko/common.json
+++ b/locales/ko/common.json
@@ -949,6 +949,10 @@
         "label": "전체 메시지 수 표시",
         "description": "읽지 않은 수와 함께 폴더 및 태그 옆에 전체 메시지 수를 표시합니다. 읽지 않은 수만 표시하려면 비활성화하세요."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Pro 인터페이스 (실험적)",
         "description": "데스크톱 전용 파워 유저 레이아웃으로, 다중 탭 메시지 탐색과 계정 간 워크플로우를 지원합니다. 표준 인터페이스에는 영향이 없으며 언제든지 되돌릴 수 있습니다.",
diff --git a/locales/lv/common.json b/locales/lv/common.json
index f9fc75b7..08ef766b 100644
--- a/locales/lv/common.json
+++ b/locales/lv/common.json
@@ -949,6 +949,10 @@
         "label": "Rādīt kopējo ziņojumu skaitu",
         "description": "Rāda kopējo ziņojumu skaitu blakus mapēm un tagiem, kā arī nelasīto ziņojumu skaitu. Atspējojiet, lai rādītu tikai nelasītos."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Pro saskarne (eksperimentāla)",
         "description": "Tikai darbvirsmas pieredzējušu lietotāju izkārtojums ar ziņojumu pārlūkošanu vairākās cilnēs un kontu pārvaldību. Standarta saskarne netiek ietekmēta; varat jebkurā brīdī pārslēgties atpakaļ.",
diff --git a/locales/nl/common.json b/locales/nl/common.json
index 52624f8b..ced27bcb 100644
--- a/locales/nl/common.json
+++ b/locales/nl/common.json
@@ -949,6 +949,10 @@
         "label": "Totaal aantal berichten tonen",
         "description": "Toont het totale aantal berichten naast mappen en labels, naast het aantal ongelezen berichten. Schakel uit om alleen ongelezen aantallen te tonen."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Pro-interface (experimenteel)",
         "description": "Power user-indeling alleen voor desktop met meertabs berichtweergave en accountoverschrijdende workflows. De standaardinterface blijft onveranderd; u kunt op elk moment terugkeren.",
diff --git a/locales/pl/common.json b/locales/pl/common.json
index d365e95a..fad1317e 100644
--- a/locales/pl/common.json
+++ b/locales/pl/common.json
@@ -949,6 +949,10 @@
         "label": "Pokaż łączną liczbę wiadomości",
         "description": "Pokazuje łączną liczbę wiadomości obok folderów i etykiet, obok liczby nieprzeczytanych. Wyłącz, aby pokazywać tylko nieprzeczytane."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Interfejs Pro (eksperymentalny)",
         "description": "Układ dla zaawansowanych użytkowników (tylko na komputerze) z przeglądaniem wiadomości w wielu kartach i obiegami pracy między kontami. Standardowy interfejs pozostaje nietknięty; możesz wrócić w dowolnej chwili.",
diff --git a/locales/pt/common.json b/locales/pt/common.json
index 62fd321c..6202f6eb 100644
--- a/locales/pt/common.json
+++ b/locales/pt/common.json
@@ -949,6 +949,10 @@
         "label": "Mostrar contagem total de mensagens",
         "description": "Mostra a contagem total de mensagens ao lado de pastas e etiquetas, além da contagem de não lidas. Desative para mostrar apenas as não lidas."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Interface Pro (experimental)",
         "description": "Layout para utilizadores avançados apenas em desktop com navegação de mensagens em múltiplos separadores e fluxos entre contas. A interface padrão não é afetada; pode voltar a qualquer momento.",
diff --git a/locales/ro/common.json b/locales/ro/common.json
index a6eb79c6..a8e9b251 100644
--- a/locales/ro/common.json
+++ b/locales/ro/common.json
@@ -952,6 +952,10 @@
         "label": "Afișează numărul total de mesaje",
         "description": "Afișează numărul total de mesaje lângă foldere și etichete, pe lângă numărul celor necitite. Dezactivează pentru a afișa doar mesajele necitite."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Interfață Pro (experimentală)",
         "description": "Aspect destinat utilizatorilor avansați, disponibil doar pe desktop, cu navigare prin mesaje în mai multe file și fluxuri de lucru între conturi. Interfața standard nu este afectată; puteți reveni la aceasta în orice moment.",
diff --git a/locales/ru/common.json b/locales/ru/common.json
index a0962e5a..24de9a4f 100644
--- a/locales/ru/common.json
+++ b/locales/ru/common.json
@@ -949,6 +949,10 @@
         "label": "Показывать общее количество сообщений",
         "description": "Показывает общее количество сообщений рядом с папками и метками, наряду с количеством непрочитанных. Отключите, чтобы показывать только непрочитанные."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Pro-интерфейс (экспериментальный)",
         "description": "Макет для опытных пользователей только для настольных устройств с просмотром сообщений в нескольких вкладках и работой между аккаунтами. Стандартный интерфейс не меняется; вы можете вернуться в любое время.",
diff --git a/locales/sk/common.json b/locales/sk/common.json
index a53aad49..1defe95e 100644
--- a/locales/sk/common.json
+++ b/locales/sk/common.json
@@ -952,6 +952,10 @@
         "label": "Zobraziť celkový počet správ",
         "description": "Zobraziť celkový počet správ vedľa priečinkov a štítkov spolu s počtom neprečítaných."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Pro rozhranie (experimentálne)",
         "description": "Rozloženie pre pokročilých používateľov iba pre stolné počítače.",
diff --git a/locales/tr/common.json b/locales/tr/common.json
index 0fc1ebba..3dcb2851 100644
--- a/locales/tr/common.json
+++ b/locales/tr/common.json
@@ -949,6 +949,10 @@
         "label": "Toplam mesaj sayısını göster",
         "description": "Klasörlerin ve etiketlerin yanında, okunmamış sayısının yanı sıra toplam mesaj sayısını gösterir. Yalnızca okunmamışları göstermek için devre dışı bırakın."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Pro Arayüz (Deneysel)",
         "description": "Yalnızca masaüstü için güçlü kullanıcı düzeni: çoklu sekmede ileti gezme ve hesaplar arası iş akışları. Standart arayüz etkilenmez; istediğiniz zaman geri dönebilirsiniz.",
diff --git a/locales/uk/common.json b/locales/uk/common.json
index a916fb12..a5c69da6 100644
--- a/locales/uk/common.json
+++ b/locales/uk/common.json
@@ -949,6 +949,10 @@
         "label": "Показувати загальну кількість повідомлень",
         "description": "Показує загальну кількість повідомлень поруч із теками та мітками, разом із кількістю непрочитаних. Вимкніть, щоб показувати лише непрочитані."
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Pro-інтерфейс (експериментальний)",
         "description": "Розкладка для досвідчених користувачів лише для настільного комп'ютера з переглядом повідомлень у кількох вкладках і робочими процесами між обліковими записами. Стандартний інтерфейс не змінюється; ви можете повернутися будь-коли.",
diff --git a/locales/zh/common.json b/locales/zh/common.json
index 5e151add..38fc1ad1 100644
--- a/locales/zh/common.json
+++ b/locales/zh/common.json
@@ -949,6 +949,10 @@
         "label": "显示邮件总数",
         "description": "在文件夹和标签旁边显示邮件总数，以及未读数量。停用后仅显示未读数量。"
       },
+      "favicon_unread_badge": {
+        "label": "Unread Count on Tab Icon",
+        "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+      },
       "pro_interface": {
         "label": "Pro 界面（实验性）",
         "description": "仅限桌面的高级用户布局，支持多标签消息浏览和跨账户工作流。标准界面不受影响，您可以随时切换回来。",
diff --git a/package.json b/package.json
index a3d719c3..d7baba27 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test:translations": "vitest run --no-isolate lib/__tests__/translations.test.ts",
+    "test:integration": "bash integration/run-tests.sh",
     "prepare": "husky",
     "typecheck": "tsc --noEmit"
   },
diff --git a/playwright.integration.config.ts b/playwright.integration.config.ts
new file mode 100644
index 00000000..4fabdadd
--- /dev/null
+++ b/playwright.integration.config.ts
@@ -0,0 +1,32 @@
+import { defineConfig } from '@playwright/test';
+
+/**
+ * Integration test config: drives the containerised webmail (+ Stalwart) stack
+ * managed by integration/tests/global-setup.ts. Distinct from the root
+ * playwright.config.ts (fast UI smoke tests against `npm run dev`).
+ *
+ * Run:  npx playwright test -c playwright.integration.config.ts
+ */
+const WEBMAIL_URL = process.env.IT_WEBMAIL_URL ?? 'http://localhost:3000';
+
+export default defineConfig({
+  testDir: './integration/tests',
+  // next dev compiles routes lazily and each test logs in fresh, so give
+  // individual tests and their polling assertions generous headroom.
+  timeout: 90_000,
+  expect: { timeout: 20_000 },
+  fullyParallel: false,
+  workers: 1,
+  retries: process.env.CI ? 1 : 0,
+  reporter: [['list'], ['html', { open: 'never', outputFolder: 'integration/playwright-report' }]],
+  outputDir: 'integration/test-results',
+  globalSetup: './integration/tests/global-setup.ts',
+  globalTeardown: './integration/tests/global-teardown.ts',
+  use: {
+    baseURL: WEBMAIL_URL,
+    screenshot: 'only-on-failure',
+    trace: 'retain-on-failure',
+    video: 'retain-on-failure',
+  },
+  projects: [{ name: 'chromium', use: { browserName: 'chromium' } }],
+});
diff --git a/stores/__tests__/apply-preferred-identity.test.ts b/stores/__tests__/apply-preferred-identity.test.ts
new file mode 100644
index 00000000..6443a65f
--- /dev/null
+++ b/stores/__tests__/apply-preferred-identity.test.ts
@@ -0,0 +1,90 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { applyPreferredIdentity, useAuthStore } from '../auth-store';
+import { useIdentityStore } from '../identity-store';
+import { useAccountStore } from '../account-store';
+import { useSettingsStore } from '../settings-store';
+import type { Identity } from '@/lib/jmap/types';
+
+const makeIdentity = (overrides: Partial<Identity> = {}): Identity => ({
+  id: 'id-1',
+  name: 'Test User',
+  email: 'test@example.com',
+  mayDelete: true,
+  ...overrides,
+});
+
+const IDS = [
+  makeIdentity({ id: 'id-1', name: 'Alice', email: 'alice@example.com' }),
+  makeIdentity({ id: 'id-2', name: 'Bob', email: 'bob@example.com' }),
+  makeIdentity({ id: 'id-3', name: 'Carol', email: 'carol@example.com' }),
+];
+
+/**
+ * applyPreferredIdentity() is the single mechanism that honours the synced,
+ * per-account default sender identity (#507). These tests drive the real
+ * zustand stores directly (as the other auth-store tests do).
+ */
+describe('applyPreferredIdentity (issue #507)', () => {
+  beforeEach(() => {
+    useIdentityStore.setState({ identities: [...IDS], preferredPrimaryId: null });
+    useAuthStore.setState({ identities: [...IDS], primaryIdentity: IDS[0] });
+    useAccountStore.setState({ activeAccountId: 'acc-1' });
+    useSettingsStore.setState({ preferredIdentityIds: {} });
+  });
+
+  it('reorders the active account so the synced preferred identity is primary', () => {
+    useSettingsStore.setState({ preferredIdentityIds: { 'acc-1': 'id-3' } });
+
+    applyPreferredIdentity('acc-1');
+
+    expect(useAuthStore.getState().identities.map((i) => i.id)).toEqual(['id-3', 'id-1', 'id-2']);
+    expect(useAuthStore.getState().primaryIdentity?.id).toBe('id-3');
+    expect(useIdentityStore.getState().preferredPrimaryId).toBe('id-3');
+  });
+
+  it('defaults to the active account when no accountId is passed', () => {
+    useSettingsStore.setState({ preferredIdentityIds: { 'acc-1': 'id-2' } });
+
+    applyPreferredIdentity();
+
+    expect(useAuthStore.getState().identities[0].id).toBe('id-2');
+  });
+
+  it('is a no-op when the target is not the active account', () => {
+    useSettingsStore.setState({ preferredIdentityIds: { 'acc-2': 'id-3' } });
+
+    applyPreferredIdentity('acc-2');
+
+    // active account's live ordering must be untouched
+    expect(useAuthStore.getState().identities.map((i) => i.id)).toEqual(['id-1', 'id-2', 'id-3']);
+  });
+
+  it('is a no-op when the account has no synced default and no local fallback', () => {
+    applyPreferredIdentity('acc-1');
+
+    expect(useAuthStore.getState().identities.map((i) => i.id)).toEqual(['id-1', 'id-2', 'id-3']);
+    expect(useSettingsStore.getState().preferredIdentityIds).toEqual({});
+  });
+
+  it('migrates the pre-#507 browser-local default into the synced map, keyed by accountId', () => {
+    // No synced entry, but a local (identity-storage) preferred primary exists.
+    useIdentityStore.setState({ preferredPrimaryId: 'id-2' });
+
+    applyPreferredIdentity('acc-1');
+
+    // adopted, persisted per account, and applied to the live ordering
+    expect(useSettingsStore.getState().preferredIdentityIds).toEqual({ 'acc-1': 'id-2' });
+    expect(useAuthStore.getState().identities[0].id).toBe('id-2');
+  });
+
+  it('prefers the synced value over the local fallback', () => {
+    useIdentityStore.setState({ preferredPrimaryId: 'id-2' });
+    useSettingsStore.setState({ preferredIdentityIds: { 'acc-1': 'id-3' } });
+
+    applyPreferredIdentity('acc-1');
+
+    expect(useAuthStore.getState().identities[0].id).toBe('id-3');
+    // the synced value is not overwritten by the migration
+    expect(useSettingsStore.getState().preferredIdentityIds).toEqual({ 'acc-1': 'id-3' });
+  });
+});
diff --git a/stores/__tests__/email-store-tag-counts.test.ts b/stores/__tests__/email-store-tag-counts.test.ts
new file mode 100644
index 00000000..07fb9eb2
--- /dev/null
+++ b/stores/__tests__/email-store-tag-counts.test.ts
@@ -0,0 +1,257 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useEmailStore } from '../email-store';
+import { useAuthStore } from '../auth-store';
+import { useSettingsStore } from '../settings-store';
+import type { Email, Mailbox } from '@/lib/jmap/types';
+import type { IJMAPClient } from '@/lib/jmap/client-interface';
+
+// Sidebar tag badges render from `tagCounts`, which is fetched from the server
+// (`fetchTagCounts` -> `client.getTagCounts`) rather than derived from
+// `state.emails`. Read/unread mutations therefore have to keep it in step the
+// same way they keep `mailboxes[].unreadEmails` in step, or the tag unread
+// count (and the bold tag name) stays stale until a full page reload.
+
+function makeMailbox(overrides: Partial<Mailbox> = {}): Mailbox {
+  return {
+    id: 'inbox',
+    name: 'Inbox',
+    role: 'inbox',
+    sortOrder: 0,
+    totalEmails: 10,
+    unreadEmails: 5,
+    totalThreads: 10,
+    unreadThreads: 5,
+    myRights: {
+      mayReadItems: true,
+      mayAddItems: true,
+      mayRemoveItems: true,
+      maySetSeen: true,
+      maySetKeywords: true,
+      mayCreateChild: true,
+      mayRename: true,
+      mayDelete: true,
+      maySubmit: true,
+    },
+    isSubscribed: true,
+    isShared: false,
+    ...overrides,
+  };
+}
+
+function makeEmail(overrides: Partial<Email> = {}): Email {
+  return {
+    id: 'email-1',
+    threadId: 'thread-1',
+    subject: 'Hi',
+    receivedAt: new Date().toISOString(),
+    keywords: {},
+    mailboxIds: { inbox: true },
+    ...overrides,
+  } as Email;
+}
+
+function makeClient() {
+  return {
+    markAsRead: vi.fn().mockResolvedValue(undefined),
+    batchMarkAsRead: vi.fn().mockResolvedValue(undefined),
+    markMailboxAsRead: vi.fn().mockResolvedValue(3),
+    getTagCounts: vi.fn().mockResolvedValue({}),
+    getAccountId: vi.fn().mockReturnValue('account-a'),
+  } as unknown as IJMAPClient;
+}
+
+describe('email-store tag counts stay in step with read state', () => {
+  let client: IJMAPClient;
+
+  beforeEach(() => {
+    client = makeClient();
+
+    useAuthStore.setState({
+      activeAccountId: 'account-a',
+      getClientForAccount: (() => client) as never,
+    } as never);
+
+    useSettingsStore.setState({
+      emailKeywords: [
+        { id: 'ingsel', label: 'Ingsel', color: 'red' },
+        { id: 'work', label: 'Work', color: 'blue' },
+      ],
+    } as never);
+
+    useEmailStore.setState({
+      isUnifiedView: false,
+      viewingAccountId: null,
+      selectedMailbox: 'inbox',
+      mailboxes: [makeMailbox()],
+      accountMailboxes: {},
+      emails: [],
+      selectedEmail: null,
+      selectedEmailIds: new Set(),
+      processingReadStatus: new Set(),
+      threadEmailsCache: new Map(),
+      tagCounts: {
+        ingsel: { total: 1658, unread: 47 },
+        work: { total: 200, unread: 9 },
+      },
+    } as never);
+  });
+
+  it('decrements only the matching tag when a tagged email is marked read', async () => {
+    useEmailStore.setState({
+      emails: [makeEmail({ keywords: { '$label:ingsel': true } })],
+    } as never);
+
+    await useEmailStore.getState().markAsRead(client, 'email-1', true);
+
+    expect(useEmailStore.getState().tagCounts).toEqual({
+      ingsel: { total: 1658, unread: 46 },
+      work: { total: 200, unread: 9 },
+    });
+  });
+
+  it('increments the tag again when the email is marked unread', async () => {
+    useEmailStore.setState({
+      emails: [makeEmail({ keywords: { '$label:ingsel': true, $seen: true } })],
+    } as never);
+
+    await useEmailStore.getState().markAsRead(client, 'email-1', false);
+
+    expect(useEmailStore.getState().tagCounts.ingsel).toEqual({ total: 1658, unread: 48 });
+  });
+
+  it('updates both tags when an email carries two tags', async () => {
+    useEmailStore.setState({
+      emails: [makeEmail({ keywords: { '$label:ingsel': true, '$label:work': true } })],
+    } as never);
+
+    await useEmailStore.getState().markAsRead(client, 'email-1', true);
+
+    expect(useEmailStore.getState().tagCounts).toEqual({
+      ingsel: { total: 1658, unread: 46 },
+      work: { total: 200, unread: 8 },
+    });
+  });
+
+  it('leaves tag counts alone for an untagged email', async () => {
+    useEmailStore.setState({ emails: [makeEmail({ keywords: {} })] } as never);
+
+    await useEmailStore.getState().markAsRead(client, 'email-1', true);
+
+    expect(useEmailStore.getState().tagCounts).toEqual({
+      ingsel: { total: 1658, unread: 47 },
+      work: { total: 200, unread: 9 },
+    });
+  });
+
+  it('does not double-decrement when an already-read email is marked read', async () => {
+    useEmailStore.setState({
+      emails: [makeEmail({ keywords: { '$label:ingsel': true, $seen: true } })],
+    } as never);
+
+    await useEmailStore.getState().markAsRead(client, 'email-1', true);
+
+    expect(useEmailStore.getState().tagCounts.ingsel).toEqual({ total: 1658, unread: 47 });
+  });
+
+  it('never drives a tag unread count negative', async () => {
+    useEmailStore.setState({
+      emails: [makeEmail({ keywords: { '$label:ingsel': true } })],
+      tagCounts: { ingsel: { total: 3, unread: 0 } },
+    } as never);
+
+    await useEmailStore.getState().markAsRead(client, 'email-1', true);
+
+    expect(useEmailStore.getState().tagCounts.ingsel).toEqual({ total: 3, unread: 0 });
+  });
+
+  it('never alters `total` on a read-state change', async () => {
+    useEmailStore.setState({
+      emails: [makeEmail({ keywords: { '$label:ingsel': true } })],
+    } as never);
+
+    await useEmailStore.getState().markAsRead(client, 'email-1', true);
+    await useEmailStore.getState().markAsRead(client, 'email-1', false);
+
+    expect(useEmailStore.getState().tagCounts.ingsel.total).toBe(1658);
+    expect(useEmailStore.getState().tagCounts.work.total).toBe(200);
+  });
+
+  describe('batchMarkAsRead', () => {
+    it('applies the delta once per tag per changed email', async () => {
+      useEmailStore.setState({
+        emails: [
+          makeEmail({ id: 'e1', keywords: { '$label:ingsel': true } }),
+          makeEmail({ id: 'e2', keywords: { '$label:ingsel': true, '$label:work': true } }),
+          // Already read: must not contribute a delta.
+          makeEmail({ id: 'e3', keywords: { '$label:work': true, $seen: true } }),
+          // Untagged: must not contribute a delta.
+          makeEmail({ id: 'e4', keywords: {} }),
+        ],
+        selectedEmailIds: new Set(['e1', 'e2', 'e3', 'e4']),
+      } as never);
+
+      await useEmailStore.getState().batchMarkAsRead(client, true);
+
+      expect(useEmailStore.getState().tagCounts).toEqual({
+        ingsel: { total: 1658, unread: 45 },
+        work: { total: 200, unread: 8 },
+      });
+    });
+  });
+
+  describe('markMailboxAsRead', () => {
+    it('refetches tag counts from the server rather than applying a local delta', async () => {
+      (client.getTagCounts as ReturnType<typeof vi.fn>).mockResolvedValue({
+        ingsel: { total: 1658, unread: 0 },
+        work: { total: 200, unread: 4 },
+      });
+
+      useEmailStore.setState({
+        emails: [makeEmail({ keywords: { '$label:ingsel': true } })],
+      } as never);
+
+      const count = await useEmailStore.getState().markMailboxAsRead(client, 'inbox');
+      expect(count).toBe(3);
+
+      // The server bulk-marks emails that are not in `state.emails`, so a local
+      // delta would under-count: it has to refetch.
+      expect(client.getTagCounts).toHaveBeenCalledWith(['ingsel', 'work']);
+
+      await vi.waitFor(() => {
+        expect(useEmailStore.getState().tagCounts).toEqual({
+          ingsel: { total: 1658, unread: 0 },
+          work: { total: 200, unread: 4 },
+        });
+      });
+    });
+  });
+
+  describe('setEmailKeywordsLocal', () => {
+    it('adjusts tag unread counts when the local keyword patch flips $seen', () => {
+      useEmailStore.setState({
+        emails: [makeEmail({ keywords: { '$label:ingsel': true } })],
+      } as never);
+
+      useEmailStore.getState().setEmailKeywordsLocal('email-1', {
+        '$label:ingsel': true,
+        $seen: true,
+      });
+
+      expect(useEmailStore.getState().tagCounts.ingsel).toEqual({ total: 1658, unread: 46 });
+    });
+
+    it('leaves tag unread counts alone when $seen is unchanged', () => {
+      useEmailStore.setState({
+        emails: [makeEmail({ keywords: { '$label:ingsel': true } })],
+      } as never);
+
+      // Pin toggle: labels/pin change, read state does not.
+      useEmailStore.getState().setEmailKeywordsLocal('email-1', {
+        '$label:ingsel': true,
+        $pinned: true,
+      });
+
+      expect(useEmailStore.getState().tagCounts.ingsel).toEqual({ total: 1658, unread: 47 });
+    });
+  });
+});
diff --git a/stores/__tests__/settings-store-favicon-badge.test.ts b/stores/__tests__/settings-store-favicon-badge.test.ts
new file mode 100644
index 00000000..7301ffe0
--- /dev/null
+++ b/stores/__tests__/settings-store-favicon-badge.test.ts
@@ -0,0 +1,22 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { useSettingsStore } from '../settings-store';
+
+describe('settings-store favicon unread badge', () => {
+  beforeEach(() => {
+    useSettingsStore.getState().resetToDefaults();
+  });
+
+  it('defaults to on', () => {
+    expect(useSettingsStore.getState().faviconUnreadBadge).toBe(true);
+  });
+
+  it('includes the favicon unread badge in exported settings', () => {
+    useSettingsStore.getState().updateSetting('faviconUnreadBadge', false);
+
+    const exported = JSON.parse(useSettingsStore.getState().exportSettings()) as {
+      faviconUnreadBadge?: boolean;
+    };
+
+    expect(exported.faviconUnreadBadge).toBe(false);
+  });
+});
diff --git a/stores/__tests__/settings-store-preferred-identity.test.ts b/stores/__tests__/settings-store-preferred-identity.test.ts
new file mode 100644
index 00000000..230efad1
--- /dev/null
+++ b/stores/__tests__/settings-store-preferred-identity.test.ts
@@ -0,0 +1,58 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useSettingsStore } from '../settings-store';
+
+describe('settings-store per-account preferredIdentityIds (issue #507)', () => {
+  beforeEach(() => {
+    useSettingsStore.setState({ preferredIdentityIds: {} });
+  });
+
+  it('defaults to an empty record (no account has a synced default)', () => {
+    expect(useSettingsStore.getState().preferredIdentityIds).toEqual({});
+  });
+
+  it('keeps each account default independent', () => {
+    useSettingsStore.setState({
+      preferredIdentityIds: { 'acct-1': 'b', 'acct-2': 'c' },
+    });
+    const map = useSettingsStore.getState().preferredIdentityIds;
+    expect(map['acct-1']).toBe('b');
+    expect(map['acct-2']).toBe('c');
+    expect(map['acct-3']).toBeUndefined();
+  });
+
+  it('round-trips through export -> import so the choice survives clearing site data', () => {
+    useSettingsStore.setState({ preferredIdentityIds: { 'acct-1': 'b' } });
+    const json = useSettingsStore.getState().exportSettings();
+    // Appears in exported JSON (issue #507 acceptance criterion).
+    expect(JSON.parse(json).preferredIdentityIds).toEqual({ 'acct-1': 'b' });
+
+    // Simulate a fresh browser: clear, then import the exported settings.
+    useSettingsStore.setState({ preferredIdentityIds: {} });
+    expect(useSettingsStore.getState().importSettings(json)).toBe(true);
+    expect(useSettingsStore.getState().preferredIdentityIds).toEqual({ 'acct-1': 'b' });
+  });
+
+  describe('importSettings non-record guard', () => {
+    it('ignores a legacy array shape', () => {
+      useSettingsStore.setState({ preferredIdentityIds: { 'acct-1': 'b' } });
+      const ok = useSettingsStore.getState().importSettings(
+        JSON.stringify({ preferredIdentityIds: ['b'] }),
+      );
+      expect(ok).toBe(true);
+      expect(useSettingsStore.getState().preferredIdentityIds).toEqual({ 'acct-1': 'b' });
+    });
+
+    it('ignores a null value', () => {
+      useSettingsStore.setState({ preferredIdentityIds: { 'acct-1': 'b' } });
+      useSettingsStore.getState().importSettings(JSON.stringify({ preferredIdentityIds: null }));
+      expect(useSettingsStore.getState().preferredIdentityIds).toEqual({ 'acct-1': 'b' });
+    });
+
+    it('accepts a proper per-account record', () => {
+      useSettingsStore.getState().importSettings(
+        JSON.stringify({ preferredIdentityIds: { 'acct-9': 'a' } }),
+      );
+      expect(useSettingsStore.getState().preferredIdentityIds).toEqual({ 'acct-9': 'a' });
+    });
+  });
+});
diff --git a/stores/auth-store.ts b/stores/auth-store.ts
index 85b39ec6..c117dffc 100644
--- a/stores/auth-store.ts
+++ b/stores/auth-store.ts
@@ -49,7 +49,6 @@ interface AuthState {
   clearError: () => void;
   syncIdentities: () => void;
   refreshIdentities: () => Promise<void>;
-  applyPreferredIdentityOrdering: () => void;
   getClientForAccount: (accountId: string) => JMAPClient | undefined;
   getAllConnectedClients: () => Map<string, JMAPClient>;
 }
@@ -198,25 +197,16 @@ function sortIdentities(rawIdentities: Identity[], username: string): Identity[]
 }
 
 function loadIdentities(rawIdentities: Identity[], username: string): { identities: Identity[]; primaryIdentity: Identity | null } {
-  const settings = useSettingsStore.getState();
-  const preferredMap = settings.preferredIdentityIds || {};
-  let preferredPrimaryId = preferredMap[username] ?? null;
-
-  // One-time migration: builds before #507 stored the preferred identity only
-  // in the browser-local identity-storage (never synced). If the synced
-  // settings have no entry for this account yet, adopt that legacy local value
-  // and write it into the synced settings so it persists across devices.
-  if (preferredPrimaryId == null) {
-    const legacy = useIdentityStore.getState().preferredPrimaryId;
-    if (legacy) {
-      preferredPrimaryId = legacy;
-      settings.updateSetting('preferredIdentityIds', { ...preferredMap, [username]: legacy });
-    }
-  }
+  // The synced per-account default sender identity (#507) is keyed by
+  // AccountEntry.id and re-applied by applyPreferredIdentity() once
+  // loadFromServer resolves (the accountId isn't known here). At load time we
+  // only honour the browser-local fallback (identity-storage) so the ordering
+  // is stable before - or entirely without - settings sync.
+  const preferredPrimaryId = useIdentityStore.getState().preferredPrimaryId;
 
   const identities = sortIdentities(rawIdentities, username);
 
-  // If user has a preferred primary, move it to front
+  // If a local preferred primary is set, move it to the front.
   if (preferredPrimaryId) {
     const idx = identities.findIndex((id) => id.id === preferredPrimaryId);
     if (idx > 0) {
@@ -227,12 +217,60 @@ function loadIdentities(rawIdentities: Identity[], username: string): { identiti
 
   const primaryIdentity = identities[0] ?? null;
   useIdentityStore.getState().setIdentities(identities);
-  // Mirror the resolved choice into the identity store so the identity-manager
-  // UI (the ⭐ marker) reflects the active account's preferred identity.
-  useIdentityStore.setState({ preferredPrimaryId });
   return { identities, primaryIdentity };
 }
 
+/**
+ * Re-apply the per-account default sender identity once synced settings are
+ * available (issue #507). The choice is stored server-side in the settings
+ * store (`preferredIdentityIds`, keyed by AccountEntry.id), so it can only be
+ * applied after `loadFromServer` resolves. It reorders the account's identities
+ * so the preferred one is primary - the composer defaults its `From` to
+ * identities[0]. No-op when nothing is configured for the account.
+ *
+ * Also performs the one-time migration of the pre-#507 browser-local default
+ * (identity-storage) into the synced per-account map, keyed by accountId.
+ *
+ * @param accountId The account to apply for; defaults to the active account.
+ */
+export function applyPreferredIdentity(accountId?: string | null): void {
+  const targetId = accountId ?? useAccountStore.getState().activeAccountId;
+  if (!targetId) return;
+
+  const idStore = useIdentityStore.getState();
+  // Only touch the live identity store when it currently holds this account's
+  // identities (true for the active account). Switching snapshots/restores the
+  // ordering per account, so a background account's order is restored later.
+  // The local fallback below also belongs to the active account, so gate first.
+  if (useAccountStore.getState().activeAccountId !== targetId) return;
+
+  let preferred = useSettingsStore.getState().preferredIdentityIds[targetId] ?? null;
+
+  // One-time migration: before #507 the default lived only in the browser-local
+  // identity-storage (never synced). If the synced map has no entry for this
+  // account yet, adopt that local value and persist it (keyed by accountId) so
+  // it follows the user across devices.
+  if (!preferred) {
+    const legacy = idStore.preferredPrimaryId;
+    if (legacy) {
+      preferred = legacy;
+      const current = useSettingsStore.getState().preferredIdentityIds;
+      useSettingsStore.getState().updateSetting('preferredIdentityIds', { ...current, [targetId]: legacy });
+    }
+  }
+  if (!preferred) return;
+
+  idStore.setPreferredPrimary(preferred);
+  const ids = [...idStore.identities];
+  const idx = ids.findIndex((i) => i.id === preferred);
+  if (idx > 0) {
+    const [p] = ids.splice(idx, 1);
+    ids.unshift(p);
+    idStore.setIdentities(ids);
+  }
+  useAuthStore.setState({ identities: ids, primaryIdentity: ids[0] ?? null });
+}
+
 function getLocaleLoginPath(): string {
   if (typeof window === 'undefined') return '/en/login';
 
@@ -638,6 +676,7 @@ export const useAuthStore = create<AuthState>()(
             if (!config.settingsSyncEnabled) return;
             useSettingsStore.getState().loadFromServer(username, serverUrl).finally(() => {
               useSettingsStore.getState().enableSync(username, serverUrl);
+              applyPreferredIdentity(accountId);
             });
           }).catch(() => {});
 
@@ -840,6 +879,7 @@ export const useAuthStore = create<AuthState>()(
             if (!config.settingsSyncEnabled) return;
             useSettingsStore.getState().loadFromServer(username, serverUrl).finally(() => {
               useSettingsStore.getState().enableSync(username, serverUrl);
+              applyPreferredIdentity(accountId);
             });
           }).catch(() => {});
 
@@ -977,6 +1017,7 @@ export const useAuthStore = create<AuthState>()(
             if (!cfg.settingsSyncEnabled) return;
             useSettingsStore.getState().loadFromServer(username, ssoServerUrl).finally(() => {
               useSettingsStore.getState().enableSync(username, ssoServerUrl);
+              applyPreferredIdentity(accountId);
             });
           }).catch(() => {});
 
@@ -1363,6 +1404,7 @@ export const useAuthStore = create<AuthState>()(
           if (!config.settingsSyncEnabled) return;
           useSettingsStore.getState().loadFromServer(targetAccount.username, targetAccount.serverUrl).finally(() => {
             useSettingsStore.getState().enableSync(targetAccount.username, targetAccount.serverUrl);
+            applyPreferredIdentity(targetAccount.id);
           });
         }).catch(() => {});
       },
@@ -1534,6 +1576,7 @@ export const useAuthStore = create<AuthState>()(
               if (!config.settingsSyncEnabled) return;
               useSettingsStore.getState().loadFromServer(targetAccount.username, targetAccount.serverUrl).finally(() => {
                 useSettingsStore.getState().enableSync(targetAccount.username, targetAccount.serverUrl);
+                applyPreferredIdentity(targetAccount.id);
               });
             }).catch(() => {});
             return;
@@ -1647,6 +1690,7 @@ export const useAuthStore = create<AuthState>()(
                   if (!config.settingsSyncEnabled) return;
                   useSettingsStore.getState().loadFromServer(state.username || '', state.serverUrl!).finally(() => {
                     useSettingsStore.getState().enableSync(state.username || '', state.serverUrl!);
+                    applyPreferredIdentity(accountId);
                   });
                 }).catch(() => {});
                 return;
@@ -1718,6 +1762,7 @@ export const useAuthStore = create<AuthState>()(
                   if (!config.settingsSyncEnabled) return;
                   useSettingsStore.getState().loadFromServer(username, serverUrl).finally(() => {
                     useSettingsStore.getState().enableSync(username, serverUrl);
+                    applyPreferredIdentity(accountId);
                   });
                 }).catch(() => {});
                 return;
@@ -1761,25 +1806,6 @@ export const useAuthStore = create<AuthState>()(
         set({ identities, primaryIdentity });
       },
 
-      // Re-sort the already-loaded identities to honor the active account's
-      // synced preferred-primary identity, without a network round-trip. Used
-      // after settings load from the server so a fresh browser reflects the
-      // synced default (#507).
-      applyPreferredIdentityOrdering: () => {
-        const { username, identities } = get();
-        if (!username || identities.length === 0) return;
-        const preferredId = useSettingsStore.getState().preferredIdentityIds?.[username] ?? null;
-        useIdentityStore.setState({ preferredPrimaryId: preferredId });
-        if (!preferredId) return;
-        const idx = identities.findIndex((id) => id.id === preferredId);
-        if (idx <= 0) return; // already first, or not present
-        const reordered = [...identities];
-        const [preferred] = reordered.splice(idx, 1);
-        reordered.unshift(preferred);
-        useIdentityStore.getState().setIdentities(reordered);
-        set({ identities: reordered, primaryIdentity: reordered[0] ?? null });
-      },
-
       refreshIdentities: async () => {
         const { client, username } = get();
         if (!client || !username) return;
diff --git a/stores/email-store.ts b/stores/email-store.ts
index 0967f670..c2440711 100644
--- a/stores/email-store.ts
+++ b/stores/email-store.ts
@@ -584,6 +584,37 @@ function applyBatchMailboxCounterUpdate(
   return { mailboxes, accountMailboxes };
 }
 
+// Sidebar tag badges render from `tagCounts`, which is *fetched from the server*
+// (`fetchTagCounts` -> `getTagCounts`) rather than derived from `state.emails`.
+// So a read/unread mutation has to keep it in step locally, exactly as it does
+// for `mailboxes[].unreadEmails` - otherwise the tag unread count (and the bold
+// tag name) stays stale until a full page reload.
+//
+// `changes` carries one entry per email whose read state *actually changed*
+// (callers already compute that), with delta -1 when it became read and +1 when
+// it became unread. Only `unread` moves: read state never changes tag
+// membership, so `total` is left alone.
+function applyTagCountReadDelta(
+  tagCounts: Record<string, { total: number; unread: number }>,
+  changes: Array<{ keywords?: Record<string, boolean>; delta: number }>,
+): Record<string, { total: number; unread: number }> {
+  const keywordIds = useSettingsStore.getState().emailKeywords.map(k => k.id);
+  if (keywordIds.length === 0) return tagCounts;
+
+  let next: Record<string, { total: number; unread: number }> | null = null;
+  for (const { keywords, delta } of changes) {
+    if (!keywords || delta === 0) continue;
+    for (const id of keywordIds) {
+      if (!keywords[`$label:${id}`]) continue;
+      const current = (next ?? tagCounts)[id];
+      if (!current) continue; // Tag not in the fetched counts yet; nothing to adjust.
+      next = next ?? { ...tagCounts };
+      next[id] = { total: current.total, unread: Math.max(0, current.unread + delta) };
+    }
+  }
+  return next ?? tagCounts;
+}
+
 // Per-mailbox counter map (for applyBatchMailboxCounterUpdate) for removing a
 // group of emails from a folder: decrement total (and unread for unseen) for
 // each group email that lives in the mailbox.
@@ -918,8 +949,9 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
         for (const email of result.emails) {
           email.sourceFolder = resolveSourceFolderName(email, allMailMailboxes);
         }
+        const enrichedEmails = await emailHooks.onEmailsFetched.transform(result.emails);
         set({
-          emails: annotateScheduledEmails(result.emails, get().scheduledSubmissionByEmailId),
+          emails: annotateScheduledEmails(enrichedEmails, get().scheduledSubmissionByEmailId),
           hasMoreEmails: result.hasMore,
           totalEmails: result.total,
           isLoading: false,
@@ -946,8 +978,9 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
       // When filtering by tag, omit the mailbox constraint so emails across
       // all folders that carry the tag are returned.
       const result = await effectiveClient.getEmails(selectedKeyword ? undefined : jmapMailboxId, accountId, emailsPerPage, 0, keywordFilter, true);
+      const enrichedEmails = await emailHooks.onEmailsFetched.transform(result.emails);
       set({
-        emails: annotateScheduledEmails(result.emails, get().scheduledSubmissionByEmailId),
+        emails: annotateScheduledEmails(enrichedEmails, get().scheduledSubmissionByEmailId),
         hasMoreEmails: result.hasMore,
         totalEmails: result.total,
         // Clear thread caches since the email list was fully replaced
@@ -991,8 +1024,9 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
         const currentEmails = get().emails;
         const existingIds = new Set(currentEmails.map(e => e.id));
         const newEmails = result.emails.filter(e => !existingIds.has(e.id));
+        const enrichedNewEmails = await emailHooks.onEmailsFetched.transform(newEmails);
         set({
-          emails: [...currentEmails, ...newEmails],
+          emails: [...currentEmails, ...enrichedNewEmails],
           hasMoreEmails: result.hasMore,
           totalEmails: result.total,
           isLoadingMore: false,
@@ -1034,8 +1068,9 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
         const currentEmails = get().emails;
         const existingIds = new Set(currentEmails.map(e => e.id));
         const newEmails = result.emails.filter(e => !existingIds.has(e.id));
+        const enrichedNewEmails = await emailHooks.onEmailsFetched.transform(newEmails);
         set({
-          emails: [...currentEmails, ...newEmails],
+          emails: [...currentEmails, ...enrichedNewEmails],
           hasMoreEmails: result.hasMore,
           totalEmails: result.total,
           isLoadingMore: false,
@@ -1127,14 +1162,15 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
       const existingIds = new Set(currentEmails.map(e => e.id));
       const newEmails = annotateScheduledEmails(result.emails, get().scheduledSubmissionByEmailId).filter((e: Email) => !existingIds.has(e.id));
 
+      const enrichedNewEmails = await emailHooks.onEmailsFetched.transform(newEmails);
       set({
-        emails: [...currentEmails, ...newEmails],
+        emails: [...currentEmails, ...enrichedNewEmails],
         hasMoreEmails: result.hasMore,
         totalEmails: result.total,
         isLoadingMore: false
       });
       // Fetch full thread counts for newly loaded threads in the background
-      if (newEmails.length > 0) {
+      if (enrichedNewEmails.length > 0) {
         void get().fetchThreadEmailCounts(client);
       }
     } catch (error) {
@@ -1416,6 +1452,11 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
             ? { ...state.selectedEmail, keywords: { ...state.selectedEmail.keywords, $seen: read } }
             : state.selectedEmail,
           ...mailboxPatch,
+          // Same delta, applied to every tag this email carries, so the sidebar
+          // tag badges track the folder counters instead of going stale.
+          tagCounts: applyTagCountReadDelta(state.tagCounts, [
+            { keywords: emailInState.keywords, delta },
+          ]),
           processingReadStatus: newProcessingSet,
           // Also update threadEmailsCache so expanded dropdowns reflect the change
           threadEmailsCache: (() => {
@@ -1754,60 +1795,66 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
   searchEmails: async (client, query) => {
     set({ isLoading: true, error: null, searchQuery: query, emails: [], hasMoreEmails: false, totalEmails: 0 }); // Clear emails for loading state
     try {
-      const { isUnifiedView, unifiedRole, crossView } = get();
+      const { isUnifiedView, unifiedRole, crossView, selectedMailbox, searchFilters } = get();
       const emailsPerPage = useSettingsStore.getState().emailsPerPage;
 
+      let result;
+      let accountId;
+      let unifiedErrors;
+
       if (isUnifiedView && crossView) {
         const includeGroup = useSettingsStore.getState().includeGroupInUnified;
         const built = await buildUnifiedAccountClients({ includeGroup });
-        const result = await searchCrossViewEmails(built, crossView, query, emailsPerPage, 0);
-        const externals = await emailHooks.onProvideSearchResults.transform([] as ExternalSearchResult[], { query, filters: get().searchFilters });
-        set({
-          emails: result.emails,
-          externalSearchResults: externals,
-          hasMoreEmails: result.hasMore,
-          totalEmails: result.total,
-          isLoading: false,
-          unifiedErrors: result.errors,
-        });
-        return;
-      }
-
-      if (isUnifiedView && unifiedRole) {
+        result = await searchCrossViewEmails(built, crossView, query, emailsPerPage, 0);
+        unifiedErrors = result.errors;
+        
+      } else if (isUnifiedView && unifiedRole) {
         const includeGroup = useSettingsStore.getState().includeGroupInUnified;
         const built = await buildUnifiedAccountClients({ includeGroup });
-        const result = await searchUnifiedEmails(built, unifiedRole, query, emailsPerPage, 0);
-        const externals = await emailHooks.onProvideSearchResults.transform([] as ExternalSearchResult[], { query, filters: get().searchFilters });
-        set({
-          emails: result.emails,
-          externalSearchResults: externals,
-          hasMoreEmails: result.hasMore,
-          totalEmails: result.total,
-          isLoading: false,
-          unifiedErrors: result.errors,
-        });
-        return;
+        result = await searchUnifiedEmails(built, unifiedRole, query, emailsPerPage, 0);
+        unifiedErrors = result.errors;
+
+      } else {
+        // Get the current mailbox to scope the search. In the All Mail view the
+        // search spans every folder of the account (no inMailbox constraint).
+        const isAllMail = selectedMailbox === ALL_MAIL_MAILBOX_ID;
+        const mailboxes = resolveActionMailboxes();
+        const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
+        // Use originalId for shared mailboxes
+        const jmapMailboxId = isAllMail ? undefined : (mailbox?.originalId || selectedMailbox);
+        // Only pass accountId for shared mailboxes, not for primary account
+        accountId = isAllMail ? undefined : (mailbox?.isShared ? mailbox.accountId : undefined);
+
+        result = await resolveActionClient(client).searchEmails(query, jmapMailboxId, accountId, emailsPerPage, 0);
       }
 
-      // Get the current mailbox to scope the search. In the All Mail view the
-      // search spans every folder of the account (no inMailbox constraint).
-      const selectedMailbox = get().selectedMailbox;
-      const isAllMail = selectedMailbox === ALL_MAIL_MAILBOX_ID;
-      const mailboxes = resolveActionMailboxes();
-      const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
-      // Use originalId for shared mailboxes
-      const jmapMailboxId = isAllMail ? undefined : (mailbox?.originalId || selectedMailbox);
-      // Only pass accountId for shared mailboxes, not for primary account
-      const accountId = isAllMail ? undefined : (mailbox?.isShared ? mailbox.accountId : undefined);
+      const hookEdit = await emailHooks.onSearchResults.transform({ 
+        newEmailIds: [] as string[], 
+        result: result, 
+        query: query, 
+        filters: searchFilters 
+      });
 
-      const result = await resolveActionClient(client).searchEmails(query, jmapMailboxId, accountId, emailsPerPage, 0);
-      const externals = await emailHooks.onProvideSearchResults.transform([] as ExternalSearchResult[], { query, filters: get().searchFilters });
+      result = hookEdit.result;
+      if (hookEdit.newEmailIds.length > 0) {
+        // in unified, accountId will be undefined and we will use the default.
+        const newEmails = await resolveActionClient(client).getSomeEmails(hookEdit.newEmailIds, accountId);
+        result.emails.push(...newEmails);
+        result.total += newEmails.length;
+      }
+
+      const externals = await emailHooks.onProvideSearchResults.transform([] as ExternalSearchResult[], { 
+        query, 
+        filters: searchFilters 
+      });
+      result.emails = await emailHooks.onEmailsFetched.transform(result.emails);
       set({
         emails: annotateScheduledEmails(result.emails, get().scheduledSubmissionByEmailId),
         externalSearchResults: externals,
         hasMoreEmails: result.hasMore,
         totalEmails: result.total,
-        isLoading: false
+        isLoading: false,
+        ...(unifiedErrors ? { unifiedErrors } : {}) 
       });
     } catch (error) {
       set({
@@ -1841,60 +1888,64 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
 
     try {
       const emailsPerPage = useSettingsStore.getState().emailsPerPage;
+      let result;
+      let accountId;
+      let unifiedErrors;
 
       if (isUnifiedView && crossView) {
         const includeGroup = useSettingsStore.getState().includeGroupInUnified;
         const built = await buildUnifiedAccountClients({ includeGroup });
-        const result = await searchCrossViewEmails(built, crossView, searchQuery, emailsPerPage, 0);
-        if (controller.signal.aborted) return;
-        const externals = await emailHooks.onProvideSearchResults.transform([] as ExternalSearchResult[], { query: searchQuery, filters: searchFilters });
-        set({
-          emails: result.emails,
-          externalSearchResults: externals,
-          hasMoreEmails: result.hasMore,
-          totalEmails: result.total,
-          isLoading: false,
-          unifiedErrors: result.errors,
-        });
-        return;
-      }
+        result = await searchCrossViewEmails(built, crossView, searchQuery, emailsPerPage, 0);
+        unifiedErrors = result.errors;
 
-      if (isUnifiedView && unifiedRole) {
+      } else if (isUnifiedView && unifiedRole) {
         const includeGroup = useSettingsStore.getState().includeGroupInUnified;
         const built = await buildUnifiedAccountClients({ includeGroup });
-        const result = await advancedSearchUnifiedEmails(
+        result = await advancedSearchUnifiedEmails(
           built,
           unifiedRole,
           (mailboxId) => buildJMAPFilter(searchQuery, searchFilters, mailboxId),
           emailsPerPage,
           0,
         );
-        if (controller.signal.aborted) return;
-        const externals = await emailHooks.onProvideSearchResults.transform([] as ExternalSearchResult[], { query: searchQuery, filters: searchFilters });
-        set({
-          emails: result.emails,
-          externalSearchResults: externals,
-          hasMoreEmails: result.hasMore,
-          totalEmails: result.total,
-          isLoading: false,
-          searchAbortController: null,
-          unifiedErrors: result.errors,
-        });
-        return;
+        unifiedErrors = result.errors;
+
+      } else {
+        const isAllMail = selectedMailbox === ALL_MAIL_MAILBOX_ID;
+        const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
+        const jmapMailboxId = isAllMail ? undefined : (mailbox?.originalId || selectedMailbox);
+        accountId = isAllMail ? undefined : (mailbox?.isShared ? mailbox.accountId : undefined);
+
+        const filter = buildJMAPFilter(searchQuery, searchFilters, jmapMailboxId);
+        result = await resolveActionClient(client).advancedSearchEmails(filter, accountId, emailsPerPage, 0);
       }
 
-      const isAllMail = selectedMailbox === ALL_MAIL_MAILBOX_ID;
-      const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
-      const jmapMailboxId = isAllMail ? undefined : (mailbox?.originalId || selectedMailbox);
-      const accountId = isAllMail ? undefined : (mailbox?.isShared ? mailbox.accountId : undefined);
-
-      const filter = buildJMAPFilter(searchQuery, searchFilters, jmapMailboxId);
-      const result = await resolveActionClient(client).advancedSearchEmails(filter, accountId, emailsPerPage, 0);
-
       if (controller.signal.aborted) return;
 
-      const externals = await emailHooks.onProvideSearchResults.transform([] as ExternalSearchResult[], { query: searchQuery, filters: searchFilters });
+      const hookEdit = await emailHooks.onSearchResults.transform({ 
+        newEmailIds: [] as string[], 
+        result: result, 
+        query: searchQuery, 
+        filters: searchFilters 
+      });
 
+      result = hookEdit.result;
+
+      if (hookEdit.newEmailIds.length > 0) {
+        const newEmails = await resolveActionClient(client).getSomeEmails(hookEdit.newEmailIds, accountId);
+        result.emails.push(...newEmails);
+        result.total += newEmails.length;
+      }
+
+      if (controller.signal.aborted) return;
+
+      const externals = await emailHooks.onProvideSearchResults.transform([] as ExternalSearchResult[], { 
+        query: searchQuery, 
+        filters: searchFilters 
+      });
+
+      if (controller.signal.aborted) return;
+      result.emails = await emailHooks.onEmailsFetched.transform(result.emails);
       set({
         emails: annotateScheduledEmails(result.emails, get().scheduledSubmissionByEmailId),
         externalSearchResults: externals,
@@ -1902,6 +1953,7 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
         totalEmails: result.total,
         isLoading: false,
         searchAbortController: null,
+        ...(unifiedErrors ? { unifiedErrors } : {})
       });
     } catch (error) {
       if (controller.signal.aborted) return;
@@ -1960,14 +2012,24 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
   },
 
   setEmailKeywordsLocal: (emailId, keywords) => {
-    set((state) => ({
-      emails: state.emails.map(e =>
-        e.id === emailId ? { ...e, keywords: { ...keywords } } : e
-      ),
-      selectedEmail: state.selectedEmail?.id === emailId
-        ? { ...state.selectedEmail, keywords: { ...keywords } }
-        : state.selectedEmail,
-    }));
+    set((state) => {
+      // This patch replaces the whole keyword map, so it can flip $seen as well
+      // as labels. Only a genuine read-state change moves the tag unread counts.
+      const previous = state.emails.find(e => e.id === emailId) ?? state.selectedEmail;
+      const wasRead = previous?.keywords?.$seen ?? false;
+      const isRead = keywords.$seen ?? false;
+      const delta = wasRead === isRead ? 0 : (isRead ? -1 : 1);
+
+      return {
+        emails: state.emails.map(e =>
+          e.id === emailId ? { ...e, keywords: { ...keywords } } : e
+        ),
+        selectedEmail: state.selectedEmail?.id === emailId
+          ? { ...state.selectedEmail, keywords: { ...keywords } }
+          : state.selectedEmail,
+        tagCounts: applyTagCountReadDelta(state.tagCounts, [{ keywords, delta }]),
+      };
+    });
   },
 
   // Batch operations
@@ -2025,9 +2087,19 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
         };
       });
 
+      // Tag badges follow the same delta as the folder counters, counting only
+      // the emails whose read state actually changed.
+      const tagCounts = applyTagCountReadDelta(
+        get().tagCounts,
+        affectedEmails
+          .filter(email => (email.keywords?.$seen ?? false) !== read)
+          .map(email => ({ keywords: email.keywords, delta: read ? -1 : 1 })),
+      );
+
       set({
         emails: updatedEmails,
         ...mailboxPatch,
+        tagCounts,
         selectedEmailIds: new Set(),
         isLoading: false
       });
@@ -3142,6 +3214,14 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
         ),
       }));
 
+      // Tag counts are refetched here rather than adjusted with a local delta
+      // (as markAsRead/batchMarkAsRead do). This is a server-side bulk operation
+      // over the *whole* mailbox, so it also marks emails that were never loaded
+      // into `state.emails` - a local delta would only see the loaded page and
+      // would leave the tag counts drifting high. Fire-and-forget: the folder
+      // counters above already update instantly.
+      void get().fetchTagCounts(client);
+
       return count;
     } catch (error) {
       set({ error: error instanceof Error ? error.message : 'Failed to mark folder as read' });
@@ -3284,6 +3364,7 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
     try {
       const emailsPerPage = useSettingsStore.getState().emailsPerPage;
       const result = await client.getScheduledEmails(emailsPerPage, 0);
+      result.emails = await emailHooks.onEmailsFetched.transform(result.emails);
       const scheduledEmailIds = new Set(result.emails.map(email => email.id));
       const scheduledSubmissionByEmailId = new Map(result.emails.map(email => [email.id, {
         submissionId: email.emailSubmissionId,
@@ -3324,6 +3405,7 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
     try {
       const emailsPerPage = useSettingsStore.getState().emailsPerPage;
       const result = await client.getScheduledEmails(emailsPerPage, scheduledNextPosition);
+      result.emails = await emailHooks.onEmailsFetched.transform(result.emails);
       const merged = [...scheduledEmails, ...result.emails.filter(email => !scheduledEmails.some(existing => existing.id === email.id))];
       const pendingUndoSend = get().pendingUndoSend;
       set({
diff --git a/stores/identity-store.ts b/stores/identity-store.ts
index e34a3223..e233be78 100644
--- a/stores/identity-store.ts
+++ b/stores/identity-store.ts
@@ -123,7 +123,14 @@ export const useIdentityStore = create<IdentityStore>()(
     }),
     {
       name: 'identity-storage',
-      // Only persist sub-addressing data, not identities (they're server-side)
+      // Only persist sub-addressing data, not identities (they're server-side).
+      // The default sender identity (`preferredPrimaryId`) is the per-account
+      // value for the *active* account; it is kept here purely as a local
+      // fallback so the choice survives a reload when settings sync is off.
+      // The durable, cross-device, exportable source of truth is the synced
+      // settings store, keyed per account (`preferredIdentityIds`), which is
+      // re-applied via applyPreferredIdentity() once server settings load and
+      // overrides this value per account (issue #507).
       partialize: (state) => ({
         subAddress: state.subAddress,
         preferredPrimaryId: state.preferredPrimaryId,
diff --git a/stores/settings-store.ts b/stores/settings-store.ts
index 1cd4ccc5..28e3cd8d 100644
--- a/stores/settings-store.ts
+++ b/stores/settings-store.ts
@@ -178,13 +178,6 @@ interface SettingsState {
   requestReadReceiptDefault: boolean; // Pre-check "request read receipt" in the composer
   readReceiptResponse: ReadReceiptResponse; // How to respond to incoming read-receipt requests
 
-  // Identities
-  // Per-account default ("preferred primary") sender identity, keyed by
-  // username (the same key settings sync uses). A JMAP identity id is only
-  // meaningful within its own account, so this must be account-scoped. Synced
-  // so the choice survives a new browser / cleared site data (#507).
-  preferredIdentityIds: Record<string, string | null>;
-
   // Privacy & Security
   sessionTimeout: number; // minutes (0 = never)
   trustedSenders: string[]; // Email addresses that can load external content
@@ -258,11 +251,18 @@ interface SettingsState {
   // explicit [] = "no folders". (Replaced the legacy global string[] | null.)
   allMailFolderIds: Record<string, string[]>;
 
+  // Per-account default sender identity, keyed by AccountEntry.id -> JMAP
+  // Identity id. Synced (and exported) so the chosen default survives clearing
+  // site data and follows the user across browsers/devices (issue #507). Kept
+  // per account because JMAP identity ids are account-scoped and would collide.
+  preferredIdentityIds: Record<string, string>;
+
   // Email Display
   disableThreading: boolean; // Show emails as individual messages instead of grouped by conversation
 
   senderFavicons: boolean;
   showAvatarsInJunk: boolean; // Show profile images/favicons in the junk folder
+  faviconUnreadBadge: boolean; // Badge the browser-tab icon with the inbox unread count
 
   // Sidebar
   colorfulSidebarIcons: boolean; // Tint folder icons by role (inbox blue, junk red, etc.)
@@ -396,9 +396,6 @@ const DEFAULT_SETTINGS = {
   requestReadReceiptDefault: false,
   readReceiptResponse: 'ask' as ReadReceiptResponse,
 
-  // Identities
-  preferredIdentityIds: {} as Record<string, string | null>,
-
   // Privacy & Security
   sessionTimeout: 0, // Never
   trustedSenders: [] as string[],
@@ -452,6 +449,7 @@ const DEFAULT_SETTINGS = {
   // All Mail view (gated)
   enableAllMailView: false,
   allMailFolderIds: {} as Record<string, string[]>,
+  preferredIdentityIds: {} as Record<string, string>,
 
   enableCrossUnreadView: false,
   enableCrossStarredView: false,
@@ -462,6 +460,7 @@ const DEFAULT_SETTINGS = {
 
   senderFavicons: true,
   showAvatarsInJunk: false,
+  faviconUnreadBadge: true,
 
   // Sidebar
   colorfulSidebarIcons: true,
@@ -609,7 +608,6 @@ export const useSettingsStore = create<SettingsState>()(
           signatureSeparatorEnabled: state.signatureSeparatorEnabled,
           requestReadReceiptDefault: state.requestReadReceiptDefault,
           readReceiptResponse: state.readReceiptResponse,
-          preferredIdentityIds: state.preferredIdentityIds,
           sessionTimeout: state.sessionTimeout,
           emailNotificationsEnabled: state.emailNotificationsEnabled,
           emailNotificationSound: state.emailNotificationSound,
@@ -637,11 +635,13 @@ export const useSettingsStore = create<SettingsState>()(
           includeGroupInUnified: state.includeGroupInUnified,
           enableAllMailView: state.enableAllMailView,
           allMailFolderIds: state.allMailFolderIds,
+          preferredIdentityIds: state.preferredIdentityIds,
           enableCrossUnreadView: state.enableCrossUnreadView,
           enableCrossStarredView: state.enableCrossStarredView,
           enableCrossAllView: state.enableCrossAllView,
           senderFavicons: state.senderFavicons,
           showAvatarsInJunk: state.showAvatarsInJunk,
+          faviconUnreadBadge: state.faviconUnreadBadge,
           colorfulSidebarIcons: state.colorfulSidebarIcons,
           tintListRowsByTag: state.tintListRowsByTag,
           showFolderTotalCount: state.showFolderTotalCount,
@@ -694,8 +694,8 @@ export const useSettingsStore = create<SettingsState>()(
               if (key === 'allMailFolderIds' && !isPlainRecord(settings[key])) {
                 return;
               }
-              // Defensive: a non-record (e.g. a legacy scalar) would break the
-              // per-account map lookups - ignore it.
+              // Per-account map (accountId -> identityId); ignore any legacy
+              // global/non-record value rather than corrupting the map.
               if (key === 'preferredIdentityIds' && !isPlainRecord(settings[key])) {
                 return;
               }
@@ -877,14 +877,10 @@ export const useSettingsStore = create<SettingsState>()(
             get().importSettings(JSON.stringify(settings));
             isLoadingFromServer = false;
             syncLog('Settings loaded from server successfully');
-            // Re-apply the (possibly server-updated) per-account preferred
-            // sender identity to the already-loaded identities, so a fresh
-            // browser reflects the synced default without waiting for the next
-            // identity refresh. Dynamic import avoids a static import cycle
-            // (auth-store imports this store). (#507)
-            import('./auth-store')
-              .then(({ useAuthStore }) => useAuthStore.getState().applyPreferredIdentityOrdering())
-              .catch(() => {});
+            // The per-account preferred sender identity (#507) is re-applied by
+            // applyPreferredIdentity() in auth-store, invoked from the
+            // loadFromServer().finally() of every login / switch / restore path,
+            // so no extra hook is needed here.
             return true;
           }
           return false;
@@ -897,7 +893,7 @@ export const useSettingsStore = create<SettingsState>()(
     }),
     {
       name: 'settings-storage',
-      version: 5,
+      version: 6,
       migrate: (persisted, version) => {
         const state = persisted as Record<string, unknown>;
         if (version < 2 && state.listDensity) {
@@ -925,6 +921,11 @@ export const useSettingsStore = create<SettingsState>()(
         if (version < 5 || !isPlainRecord(state.allMailFolderIds)) {
           state.allMailFolderIds = {};
         }
+        // v6: introduced the per-account default-identity map (issue #507).
+        // Coerce any missing/legacy value to an empty record.
+        if (version < 6 || !isPlainRecord(state.preferredIdentityIds)) {
+          state.preferredIdentityIds = {};
+        }
         return state as unknown as SettingsState;
       },
       onRehydrateStorage: () => {
diff --git a/tsconfig.json b/tsconfig.json
index 315f280c..74c5f7c8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -37,6 +37,8 @@
   ],
   "exclude": [
     "node_modules",
-    "repos"
+    "repos",
+    "examples",
+    "integration"
   ]
 }