chore: update version to 1.7.5

Rich, table-based identity signatures lost all their inline CSS
(background/text colors, fonts, border-radius, bgcolor). The composer
embeds the signature into the TipTap editor, and parsing it into the
ProseMirror schema flattened it to a generic bordered table. That
normalized version was then shown while composing AND delivered to the
recipient, even though Identity settings stored and previewed it
correctly.

Hold the signature as a dedicated, non-editable atom node
(SignatureBlock) that keeps the verbatim HTML in an attribute and renders
it inside a Shadow Root, mirroring the existing QuotedHtml island. The
markup is never parsed into the schema, so the styling survives 1:1 both
in the in-editor preview and in the outgoing mail
(serializeEditorContent inlines the verbatim HTML, as it already does for
quoted originals). The signature stays a single unit: select it and
Backspace/Delete to remove it; identity switching still swaps it via the
existing data-signature-block markers.

Adds unit coverage (parse + serialize round-trip preserves inline styles).

Fixes #475

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

.env.example

@@ -49,6 +49,11 @@ JMAP_SERVER_URL=https://your-jmap-server.com
 # OpenID Connect issuer URL for discovery
 # OAUTH_ISSUER_URL=https://your-idp.example.com
 
+# Overrides only the user-facing authorize endpoint (e.g. a per-brand login
+# host). Discovery, token exchange and refresh keep using OAUTH_ISSUER_URL.
+# Leave unset to use the authorization_endpoint from discovery.
+# OAUTH_AUTHORIZE_URL=https://login.your-brand.example.com/application/o/authorize/
+
 # Allow OAuth discovery to resolve to private (RFC-1918 / loopback) addresses.
 # Off by default as an SSRF guard. Enable for split-DNS deployments where the
 # OAuth issuer's public hostname resolves to an internal IP from this server.
@@ -110,12 +115,16 @@ JMAP_SERVER_URL=https://your-jmap-server.com
 # Anonymous Telemetry
 # =============================================================================
 
-# Anonymous instance telemetry is enabled by default. Heartbeats contain no PII:
+# Anonymous instance telemetry is OPT-IN and disabled by default. Enabling it
-# version, platform, bucketed account counts, and feature toggles only. See
+# helps us understand how Bulwark is used so we can make the product better.
+# Heartbeats contain no PII: version, platform, bucketed account counts, and
+# feature toggles only - never email addresses, hostnames, or IPs. See
 # https://bulwarkmail.org/docs/legal/privacy/telemetry for the full schema.
 #
-# Disable telemetry entirely (overrides the admin UI):
+# Enable telemetry (also toggleable in the admin UI):
-# BULWARK_TELEMETRY=off
+# BULWARK_TELEMETRY=on
+#
+# Setting this (on or off) locks the choice and disables the admin UI toggle.
 
 # Directory for telemetry state: instance id, consent, login HMACs
 # (default: ./data/telemetry). For Docker, the default resolves to

CHANGELOG.md

@@ -1,5 +1,131 @@
 # Changelog
 
+## 1.7.5 (2026-06-24)
+
+### Features
+
+- **Mail**: Cross-account "All accounts" views with full group/shared-account support
+- **Mail**: Per-account "All Mail" folder selection
+- **Mail**: "Download all" button to bundle attachments into a zip (#466)
+- **Mail**: Return to the list after deleting or marking the open message unread — configurable (default on)
+- **Mail**: Collapse-all-threads action in thread-list selection
+- **Calendar**: Option to disable the calendar
+- **Composer**: Send-now button on scheduled/delayed messages
+- **Composer**: Email a contact or group via the in-app composer
+- **Composer**: Split a pasted address list into recipient chips
+- **Contacts**: "New address book" creation UI (#415)
+- **OAuth**: `OAUTH_AUTHORIZE_URL` to override the authorize endpoint
+- **i18n**: Farsi (fa) locale — complete (2654 strings)
+- **i18n**: Romanian (ro) locale
+
+### Fixes
+
+- **Composer**: Keep HTML signature styling in the editor and on send
+- **Composer**: Guard Send against double-submit
+- **Composer**: Strip display names from the `EmailSubmission` envelope addresses
+- **Calendar**: Disable iMIP scheduling on calendar import (#411)
+- **Mail**: Localize special-folder names by JMAP role (#404)
+- **Mail**: Block remaining email tracking vectors (#457)
+- **Mail**: Route counter and unread updates to the email's own account in aggregate views
+- **Mail**: Fix blank space in plain-text emails
+- **Mail**: Fix toolbar re-render when opening emails
+- **Mail**: Truncate long subjects so they don't overlap the timestamp
+- **Mail**: Strip reply/forward prefixes followed by a full-width colon
+- **Mail**: Add breathing room between the unread dot and the avatar
+- **Mail**: Isolate per-account state snapshots from leakage and mutation
+- **Mail**: Cap filename tokens at the full 200-char limit
+- **Spam**: Fetch mailboxes with `accountId` in `markAsSpam`
+- **Filters**: Load mailboxes when opened directly (#485)
+- **Settings**: Surface server errors on password change and TOTP toggle
+- **Send now**: Gate the toolbar label and translate `send_now` across locales
+- **Directory**: Fix fetching display names
+- **Push**: Reap only relay-confirmed-dead leftover subscriptions
+- **i18n**: Add the missing fa locale to the client `IntlProvider` messages map
+- **i18n**: Add missing translation keys across 19 locales
+
+## 1.7.4 (2026-06-15)
+
+### Features
+
+- **Mail**: New "All Mail" view across folders and accounts
+- **Mail**: Edit contact directly from the email viewer contact sidebar
+- **Calendar**: Recurrence editor, set-default calendar, and timezone-aware calendar queries
+- **Calendar**: Agenda plugin sidecar
+- **Composer**: Email display name support
+- **Composer**: Drag-and-drop recipient chips between To/CC/BCC fields, with the address shown in the drag preview
+- **Composer**: Avatars in recipient autocomplete suggestions, including directory users
+- **Files**: JMAP file/folder sharing in the Files app (#408)
+- **Auth**: QR-code SSO login and device pairing between webmail and the mobile app
+- **Auth**: Require re-authentication for device pairing and SSO
+- **Accounts**: Manage shared/group account settings from the Accounts page
+- **Setup**: Opt-in telemetry in the web setup wizard
+- **Mail**: Persist the email detail sidebar state
+
+### Fixes
+
+- **Mail**: Preserve line breaks in the generated `text/plain` alternative (#421)
+- **Mail**: Fix inconsistent threading of email messages in the inbox and folders
+- **Mail**: Stop draft emails from being marked as unread
+- **Mail**: Prevent wide email tables from rendering with rotated headers (#409)
+- **Mail**: Preserve the folder list when a mailbox refetch hits the concurrent-request limit
+- **Mail**: Correct dark-mode background-image inversion and height clipping in the email viewer
+- **Calendar**: Dedupe scheduling emails and use Stalwart-compatible calendar filters
+- **Calendar**: Redesign the custom recurrence editor to match the modal UI
+- **Files**: Don't send the connected-account key as the JMAP `accountId` when sharing files (#408)
+- **Routing**: Strip the build-time `basePath` from `router.push` redirects after login (#390)
+- **Nav**: Open recent contact emails at `/` instead of 404ing on `/mail`
+- **Nav**: Hide the Add App button when `sidebarAppsEnabled` is false
+- **Settings**: Move the "Plain Text Only" setting from Reading to Composing (#422)
+- **Privacy**: Make telemetry opt-in
+- **UI**: Fix the context menu being invisible on first right-click after page load
+- **Admin**: Remove the JMAP status from the admin dashboard
+- **i18n**: Add missing translation keys across 17 locales
+
+## 1.7.3 (2026-06-04)
+
+### Features
+
+- **Mail**: Inline attachment preview — reliable MIME detection with inline PDF on desktop and mobile
+- **Mail**: Preview composer attachments inline (click to open)
+- **Mail**: Preview `.eml` (`message/rfc822`) attachments like an email
+- **Mail**: Read receipts (MDN, RFC 8098)
+- **Mail**: Editable, layout-preserving quote island when replying
+- **Mail**: Surface the most severe SPF result and hide the "via" badge on spoofed mail
+- **Calendar**: Per-viewer colors for shared calendars (#345)
+- **Filters**: Extended filter rules — attachment field and multi-value conditions
+- **Settings**: New built-in themes — Aurora Glass and Elastic
+- **Settings**: Theme cards render as a mini mailbox mockup from theme colors, with light/dark variant chips
+- **Plugins**: Localizable sandboxed plugins (manifest locales + `api.i18n.t`)
+- **Plugins**: `/api/translate` proxy and email body exposed to plugins
+- **Admin**: Toggle for search-engine indexing (robots)
+- **Admin**: `passwordHashFile` in `admin.json`
+- **Admin**: `sessionSecretFile` and `oauthClientSecretFile` for file-based secrets in JSON config
+- **PWA**: Configurable install screenshots (per-domain)
+- **i18n**: Hungarian locale support
+
+### Fixes
+
+- **Files**: Store Files as real `FileNode` hierarchy, migrate legacy flat-named files on load, and list folders via `FileNode/get` so they are visible (#379)
+- **Files**: Treat a blob-less `FileNode` as the only folder signal and migrate legacy dir-markers
+- **Mail**: Empty Trash for shared and group folders (#387)
+- **Mail**: Move mail from a shared group inbox to a personal inbox (#375)
+- **Mail**: Preserve the HTML signature when sending a quick reply
+- **Mail**: Stop body clipping under the fold when the email sets `html`/`body` `height: 100%`
+- **Mail**: Drop single-letter `R:`/`I:` subject prefix tokens and deduplicate localized reply/forward prefixes
+- **Mail**: No more 404 console spam for missing sender favicons
+- **Auth**: Discover OIDC metadata server-side to avoid CORS failures (#382)
+- **Send**: Route the Sent copy to the shared-mailbox account on per-identity send
+- **Routing**: Honour `basePath` in the plugin sandbox, `http.post` proxy, and branding
+- **i18n**: Localize the PWA install prompt, reply/forward quote header (incl. sender address), `<html lang>`, and per-locale `<head>` description; add missing `settings.folders.role_memos` key
+- **Themes**: Plugin slot iframes inherit host font and color tokens
+- **Theme**: Gate preview "open in new tab" on inline-safe MIME types
+- **Appearance**: Move Themes settings into the Appearance category with a distinct tab icon; clicking the active theme is a no-op
+- **UI**: Fix invisible dark-mode borders (border token collided with secondary)
+- **UI**: Remove the 16px empty strip beside the collapsed sidebar
+- **UI**: Align top bars to a uniform `h-14` height and the account selector header to the search/reply toolbars
+- **UI**: Close pane gaps by centering the resize handle on the seam
+- **Settings**: Fix section gears permanently hijacking the active tab
+
 ## 1.7.2 (2026-05-28)
 
 ### Features

FEATURES.md

@@ -4,10 +4,15 @@
 
 - Read, compose, reply, reply-all, and forward with a Tiptap rich text editor (inline images, drag-and-drop embedding, tables)
 - Gmail-style threading with inline expansion and an optional conversation toggle
-- Unified mailbox view across all connected accounts
+- Unified mailbox view across all connected accounts – combined Inbox, Sent, Drafts, Junk, Archive, and Trash, with group/shared accounts optionally merged in
+- Cross-account "All accounts" views – All unread, All starred, and All mail spanning every account (including shared/group folders); each aggregate list labels the source folder of every message
+- "All Mail" view that merges an account's folders (with a configurable folder selection) into a single list
 - Three selectable mail layouts: split (three-pane), focused list, and reading pane at bottom
 - Draft auto-save with identity preservation, persisted HTML body, and proper `In-Reply-To` / `References` headers on replies
-- Attachment upload, download, drag-out to local file system, and inline preview; image thumbnails and forgotten-attachment warning
+- Attachment upload, download, drag-out to local file system, and inline preview – images, inline PDF on desktop and mobile, composer attachments (click to open), and `.eml` (`message/rfc822`) attachments rendered like an email; image thumbnails and forgotten-attachment warning
+- Scheduled send and configurable send delay
+- Read receipts (MDN, RFC 8098)
+- Editable, layout-preserving quote island when replying
 - Full-text search with JMAP filter panel, search chips, wildcards, OR conditions, and cross-mailbox queries
 - Batch operations – multi-select, archive, delete, move, tag
 - Archive modes – direct, by year, or by month
@@ -36,7 +41,7 @@
 - Auto-generated birthday calendar from contacts
 - Virtual locations (video conference URLs) as first-class event fields
 - Task management with due dates, priority, and completion status
-- Shared calendars with CalDAV discovery and multi-account home resolution
+- Shared calendars with CalDAV discovery, multi-account home resolution, and per-viewer colors
 - Week numbers, event hover preview, notifications with sound picker
 - Real-time sync via JMAP push
 
@@ -52,7 +57,7 @@
 ## Filters & Templates
 
 - Server-side filters via JMAP Sieve Scripts (RFC 9661)
-- Visual rule builder with expanded view; conditions (From, To, Subject, Size, Body…) and actions (Move, Forward, Star, Discard…)
+- Visual rule builder with expanded view; conditions (From, To, Subject, Size, Body, Attachment…) with multi-value matching and actions (Move, Forward, Star, Discard…)
 - Preserves rules authored in other clients
 - Raw Sieve editor with syntax validation
 - Vacation responder with date range scheduling
@@ -60,19 +65,20 @@
 
 ## Files
 
-- JMAP FileNode browser (Stalwart native cloud storage)
+- JMAP FileNode browser (Stalwart native cloud storage) with a real folder hierarchy; legacy flat-named files are migrated into nested `FileNode` folders automatically on load
 - Streamed WebDAV PUT upload and folder upload with progress tracking
 - Dynamic upload limits based on server configuration
 - Grid and list views with sorting by name, size, or date
 - Previews for images, text, audio, and video
 - Clipboard operations (cut, copy, paste, duplicate), favorites, and recent files
+- JMAP sharing (RFC 9670) for files and folders – share with users or groups at read, read/write, or manager levels via a principal picker, with share indicators and a "Shared with me" sidebar section for folders other principals have shared with you
 
 ## Security & Privacy
 
 - External content blocked by default, with a trusted senders list
 - HTML sanitization via DOMPurify
 - S/MIME – manage certificates, sign, encrypt, decrypt, and verify; legacy 3DES / PBE support; per-account key isolation
-- SPF / DKIM / DMARC status indicators
+- SPF / DKIM / DMARC status indicators – surfaces the most severe SPF result and hides the "via" badge on spoofed mail
 - OAuth2 / OIDC with PKCE (Keycloak, Authentik, or built-in), OAuth-only mode, OAuth app passwords, and non-interactive SSO for embedded deployments
 - TOTP two-factor authentication
 - Account security panel for password and 2FA management via the Stalwart admin API
@@ -85,6 +91,7 @@
 
 - Selectable mail layouts (split three-pane, focused list, reading pane at bottom) with resizable columns
 - Dark and light themes with intelligent email color transformation
+- Bundled color themes including Aurora Glass and Elastic; theme cards render as a mini mailbox mockup built from the theme's own colors, with light/dark variant chips
 - Responsive desktop, tablet, and mobile layouts
 - Full keyboard navigation
 - Drag-and-drop email organization and tag assignment
@@ -98,7 +105,7 @@
 
 ## Internationalization
 
-17 languages: Česky · Dansk · Deutsch · English · Español · Français · Italiano · Latviešu · Nederlands · Polski · Português · Türkçe · Русский · Українська · 한국어 · 日本語 · 简体中文
+19 languages: Česky · Dansk · Deutsch · English · Español · Français · Italiano · Latviešu · Magyar · Nederlands · Polski · Português · Română · Türkçe · Русский · Українська · 한국어 · 日本語 · 简体中文
 
 Automatic browser detection with persistent preference. Configurable locale URL prefix via `NEXT_PUBLIC_LOCALE_PREFIX`.
 
@@ -110,6 +117,7 @@ Automatic browser detection with persistent preference. Configurable locale URL
 - Configurable signature position (above or below quoted text)
 - Sub-addressing (`user+tag@domain.com`) with configurable delimiter and contextual tag suggestions
 - Shared folders across accounts
+- Shared / group (delegated) accounts: their folders appear alongside your own and can be merged into the unified and "All accounts" views ("Include group inboxes"); their messages are fully actionable there – open, mark read, spam / not-spam, move, delete, and archive – with folder unread counts kept in sync
 - Multiple JMAP servers per deployment with optional auto-pick by email domain
 - Optional custom JMAP endpoints on the login form (`ALLOW_CUSTOM_JMAP_ENDPOINT`)
 
@@ -117,8 +125,11 @@ Automatic browser detection with persistent preference. Configurable locale URL
 
 - Web setup wizard for first launch – guides through JMAP server(s), OAuth/OIDC, session secret, logging, branding (with file upload), and admin password; persists to the admin config dir, no `.env.local` editing required
 - Stalwart admin dashboard with dedicated policy sections, collapsed into a single tabbed page
+- Admin policy gates for the aggregate mail views – enable or disable the "All Mail" and the cross-account "All unread / starred / all" entries org-wide; each gated view still respects the user's own toggle
 - Split admin storage: `ADMIN_CONFIG_DIR` (operator-authored, mountable read-only after setup) and `ADMIN_STATE_DIR` (runtime audit log and login timestamps)
-- Plugin system – schema-driven config UI, render and intercept hooks, `onAvatarResolve`, `onBeforeEmailSend`, composer-sidebar and email-banner slots, calendar event slots, i18n APIs, and managed policy enforcement
+- File-based secrets for JSON config: `passwordHashFile` (admin password), `sessionSecretFile`, and `oauthClientSecretFile` for Docker/Kubernetes secret mounts
+- Admin toggle for search-engine indexing (`robots.txt` / `noindex`)
+- Plugin system – schema-driven config UI, render and intercept hooks, `onAvatarResolve`, `onBeforeEmailSend`, composer-sidebar and email-banner slots, calendar event slots, i18n APIs (localizable sandboxed plugins via manifest locales and `api.i18n.t`), an `/api/translate` proxy, email-body access, and managed policy enforcement
 - Plugin hot-reload and dev-folder loading, on-demand `src/` bundling via esbuild, and `http:fetch` permission with `httpOrigins`
 - Themes – upload, enforce, and manage admin-controlled themes as ZIP bundles
 - Extension marketplace – browse and install plugins and themes from a configurable directory (`EXTENSION_DIRECTORY_URL`); install/uninstall restricted to the admin dashboard
@@ -126,10 +137,10 @@ Automatic browser detection with persistent preference. Configurable locale URL
 
 ## Operations
 
-- Progressive Web App with service worker, install prompt, web push notifications for inbox mail, and dynamic manifest
+- Progressive Web App with service worker, install prompt, web push notifications for inbox mail, dynamic manifest, and configurable (per-domain) install screenshots
 - Automatic update check with server-side logging of new releases and a non-dismissible update notice
 - Structured logging (`text` or `json`) with category-based levels
-- Anonymous instance telemetry (opt-out via admin UI or `BULWARK_TELEMETRY=off`) – version, platform, bucketed account counts, feature toggles only
+- Anonymous instance telemetry (opt-in via admin UI, the installer, or `BULWARK_TELEMETRY=on`; off by default) – version, platform, bucketed account counts, feature toggles only
 - Release (`main`) and development (`dev`) Docker images on GHCR
 - Subpath deployment via `NEXT_PUBLIC_BASE_PATH` for mounting behind a reverse proxy
 - Demo mode with fixture data – no mail server required

README.md

@@ -12,7 +12,7 @@ A modern, self-hosted webmail client for [Stalwart Mail Server](https://stalw.ar
 
 [![License: AGPL v3](https://img.shields.io/badge/license-AGPL%20v3-blue.svg?logo=gnu&logoColor=white)](LICENSE)
 [![Discord](https://img.shields.io/discord/1482128142939455674?color=7289da&label=discord&logo=discord&logoColor=white)](https://discord.gg/tYCujymGrT)
-[![Version](https://img.shields.io/badge/version-1.7.2-green.svg?logo=git&logoColor=white)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/version-1.7.5-green.svg?logo=git&logoColor=white)](CHANGELOG.md)
 [![Docker](https://img.shields.io/badge/docker-ghcr.io%2Fbulwarkmail%2Fwebmail-blue?logo=docker&logoColor=white)](https://ghcr.io/bulwarkmail/webmail)
 [![Grafana](https://img.shields.io/badge/grafana-dashboard-orange?logo=grafana&logoColor=white)](https://grafana.external.bulwarkmail.org/)
 
@@ -81,12 +81,12 @@ The wizard writes to `ADMIN_CONFIG_DIR` (`./data/admin` by default). Setting `JM
 
 Bulwark is a full webmail suite, not just an inbox. It bundles the four apps most self-hosters end up wanting on the same login:
 
-- **Mail** – threading, unified inbox, full-text search, Sieve filters, S/MIME, templates
+- **Mail** – threading, unified inbox, cross-account "All accounts" views, full-text search, Sieve filters, S/MIME, templates
 - **Calendar** – month/week/day/agenda, recurring events, iMIP invitations, CalDAV subscriptions
 - **Contacts** – multiple address books, groups, vCard import/export
 - **Files** – Stalwart's JMAP FileNode storage with previews and folder upload
 
-Plus the infrastructure around them: a web setup wizard, OAuth2 / OIDC SSO, TOTP 2FA, multi-account with HTTP/2 connection pooling, 15 languages, PWA install, dark/light themes, a plugin system with an extension marketplace, and an admin dashboard.
+Plus the infrastructure around them: a web setup wizard, OAuth2 / OIDC SSO, TOTP 2FA, multi-account with HTTP/2 connection pooling, 18 languages, PWA install, dark/light themes, a plugin system with an extension marketplace, and an admin dashboard.
 
 Full feature list: **[FEATURES.md](FEATURES.md)**.
 

VERSION

@@ -1 +1 @@
-1.7.2
+1.7.5

app/(main)/[locale]/auth/callback/page.tsx

@@ -4,7 +4,7 @@ import { Suspense, useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useAuthStore } from "@/stores/auth-store";
-import { apiFetch, getPathPrefix } from "@/lib/browser-navigation";
+import { apiFetch, getPathPrefix, toRouterPath } from "@/lib/browser-navigation";
 import { Loader2, AlertCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useParams } from "next/navigation";
@@ -32,6 +32,42 @@ function OAuthCallbackInner() {
       return;
     }
 
+    // Step-up re-auth for device pairing: the QR generator sent the user here
+    // via prompt=login. Don't create a login session — just confirm the fresh
+    // auth (sets the short-lived pairing proof cookie) and bounce back to the
+    // Security settings, where the QR generation auto-resumes.
+    let pairReauthResume = false;
+    try {
+      pairReauthResume = sessionStorage.getItem("pair_reauth_resume") === "1";
+    } catch { /* sessionStorage unavailable */ }
+    if (pairReauthResume && state) {
+      try { sessionStorage.removeItem("pair_reauth_resume"); } catch { /* ignore */ }
+      (async () => {
+        try {
+          const res = await apiFetch("/api/auth/reauth/sso/complete", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            credentials: "include",
+            body: JSON.stringify({ code, state }),
+          });
+          if (!res.ok) {
+            setError("token_exchange_failed");
+            return;
+          }
+          try {
+            sessionStorage.setItem("pair_reauth_done", "1");
+            // Land back on the Security tab (readPersistedTab reads this key).
+            sessionStorage.setItem("settings-deep-link-tab", "security");
+          } catch { /* ignore */ }
+          const prefix = getPathPrefix(params.locale as string);
+          router.push(toRouterPath(`${prefix}/${params.locale}/settings`));
+        } catch {
+          setError("token_exchange_failed");
+        }
+      })();
+      return;
+    }
+
     const savedState = sessionStorage.getItem("oauth_state");
 
     if (savedState) {
@@ -69,7 +105,7 @@ function OAuthCallbackInner() {
                 redirectTo = saved;
               }
             } catch { /* sessionStorage may be unavailable */ }
-            router.push(redirectTo);
+            router.push(toRouterPath(redirectTo));
           } else {
             setError("token_exchange_failed");
           }
@@ -153,7 +189,7 @@ function OAuthCallbackInner() {
                 redirectTo = saved;
               }
             } catch { /* sessionStorage may be unavailable */ }
-            router.push(redirectTo);
+            router.push(toRouterPath(redirectTo));
           } else {
             setError("token_exchange_failed");
           }
@@ -181,7 +217,7 @@ function OAuthCallbackInner() {
           </p>
           <Button
             variant="outline"
-            onClick={() => router.push(`${getPathPrefix(params.locale as string)}/${params.locale}/login`)}
+            onClick={() => router.push(toRouterPath(`${getPathPrefix(params.locale as string)}/${params.locale}/login`))}
           >
             {t("oauth_error.back_to_login")}
           </Button>

app/(main)/[locale]/calendar/page.tsx

@@ -16,6 +16,7 @@ import { useEmailStore } from "@/stores/email-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useIdentityStore } from "@/stores/identity-store";
 import { useAccountStore } from "@/stores/account-store";
+import { usePolicyStore } from "@/stores/policy-store";
 import { toast } from "@/stores/toast-store";
 import { useIsDesktop, useIsMobile } from "@/hooks/use-media-query";
 import { Button } from "@/components/ui/button";
@@ -60,6 +61,7 @@ import { useConfirmDialog } from "@/hooks/use-confirm-dialog";
 import { CreateCalendarModal } from "@/components/calendar/create-calendar-modal";
 import { getUserParticipantId } from "@/lib/calendar-participants";
 import { generateBirthdayEvents, createBirthdayCalendar, BIRTHDAY_CALENDAR_ID } from "@/lib/birthday-calendar";
+import { sharedCalendarColorKey, pickUnusedCalendarColor } from "@/lib/shared-calendar-colors";
 import { debug } from "@/lib/debug";
 import { consumePendingWebcal, hasPendingWebcal, subscribeToPendingWebcal } from "@/lib/protocol-handlers/session";
 import type { ParsedWebcal } from "@/lib/protocol-handlers/webcal";
@@ -96,7 +98,11 @@ export default function CalendarPage() {
     removeCalendar, clearCalendarEvents,
     refreshAllSubscriptions, icalSubscriptions,
   } = useCalendarStore();
+  const calendarEnabled = usePolicyStore((s) => s.isFeatureEnabled('calendarEnabled'));
   const { firstDayOfWeek, timeFormat, showWeekNumbers, enableCalendarTasks, showTasksOnCalendar, calendarHoverPreview, showBirthdayCalendar, birthdayCalendarColor, updateSetting } = useSettingsStore();
+  const sharedCalendarColors = useSettingsStore((s) => s.sharedCalendarColors);
+  const setSharedCalendarColor = useSettingsStore((s) => s.setSharedCalendarColor);
+  const removeSharedCalendarColor = useSettingsStore((s) => s.removeSharedCalendarColor);
   const taskStore = useTaskStore();
   const fetchTasksFn = useTaskStore(state => state.fetchTasks);
   const { identities } = useIdentityStore();
@@ -175,10 +181,13 @@ export default function CalendarPage() {
     if (initialCheckDone && !isAuthenticated && !authLoading) {
       try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
       redirectToLogin();
+    } else if (client && !calendarEnabled) {
+      // Calendar disabled by admin policy - send the user back to mail.
+      router.push("/");
     } else if (client && !supportsCalendar && !pendingWebcalAccountChoice && !isProtocolAccountSwitching && !pendingSubscription && !showWebcalActionChoice && !hasPendingWebcal()) {
       router.push("/");
     }
-  }, [initialCheckDone, isAuthenticated, authLoading, client, supportsCalendar, pendingWebcalAccountChoice, isProtocolAccountSwitching, pendingSubscription, showWebcalActionChoice, router]);
+  }, [initialCheckDone, isAuthenticated, authLoading, client, calendarEnabled, supportsCalendar, pendingWebcalAccountChoice, isProtocolAccountSwitching, pendingSubscription, showWebcalActionChoice, router]);
 
   useEffect(() => {
     if (error) {
@@ -1030,10 +1039,47 @@ export default function CalendarPage() {
     try { return t('birthday_calendar'); } catch { return 'Birthdays'; }
   })();
 
+  // Apply each shared calendar's local color override (per-viewer recolor,
+  // #345). The override replaces the calendar's color and wins over per-event
+  // colors via the `colorIsLocalOverride` flag (see getEventColor). Personal
+  // calendars are passed through untouched.
+  const displayCalendars = useMemo(() => {
+    return calendars.map((cal) => {
+      if (!cal.isShared) return cal;
+      const override = sharedCalendarColors[sharedCalendarColorKey(cal)];
+      if (!override) return cal;
+      return { ...cal, color: override, colorIsLocalOverride: true };
+    });
+  }, [calendars, sharedCalendarColors]);
+
+  // Auto-assign a random, not-yet-used palette color to any freshly shared
+  // calendar so multiple shared calendars don't collide on one color. Runs
+  // once per calendar (guarded by the presence of an existing key), and the
+  // user can still overwrite it from the sidebar.
+  useEffect(() => {
+    const shared = calendars.filter((c) => c.isShared);
+    const missing = shared.filter((c) => !sharedCalendarColors[sharedCalendarColorKey(c)]);
+    if (missing.length === 0) return;
+    // Seed "used" with personal calendar colors plus already-assigned shared
+    // overrides so the picks stay distinct from what's already on screen.
+    const used = new Set<string>();
+    for (const c of calendars) {
+      if (!c.isShared && c.color) used.add(c.color.toLowerCase());
+    }
+    for (const color of Object.values(sharedCalendarColors)) {
+      if (color) used.add(color.toLowerCase());
+    }
+    for (const cal of missing) {
+      const color = pickUnusedCalendarColor(used);
+      used.add(color.toLowerCase());
+      setSharedCalendarColor(sharedCalendarColorKey(cal), color);
+    }
+  }, [calendars, sharedCalendarColors, setSharedCalendarColor]);
+
   const allCalendars = useMemo(() => {
-    if (!showBirthdayCalendar) return calendars;
+    if (!showBirthdayCalendar) return displayCalendars;
-    return [...calendars, createBirthdayCalendar(birthdayCalendarName, birthdayCalendarColor)];
+    return [...displayCalendars, createBirthdayCalendar(birthdayCalendarName, birthdayCalendarColor)];
-  }, [calendars, showBirthdayCalendar, birthdayCalendarName, birthdayCalendarColor]);
+  }, [displayCalendars, showBirthdayCalendar, birthdayCalendarName, birthdayCalendarColor]);
 
   const visibleEvents = useMemo(() => {
     const filtered = events.filter((e) => {
@@ -1123,6 +1169,7 @@ export default function CalendarPage() {
   ) : null;
 
   if (!isAuthenticated) return null;
+  if (!calendarEnabled) return null;
   if (!supportsCalendar) return renderWebcalAccountPicker();
 
   const renderView = () => {
@@ -1219,7 +1266,7 @@ export default function CalendarPage() {
               />
               <TaskListView
                 tasks={taskStore.tasks}
-                calendars={calendars}
+                calendars={displayCalendars}
                 selectedCalendarIds={selectedCalendarIds}
                 filter={taskStore.filter}
                 showCompleted={taskStore.showCompleted}
@@ -1317,8 +1364,21 @@ export default function CalendarPage() {
                   updateSetting('birthdayCalendarColor', color);
                   return;
                 }
+                // Shared calendars: recolor locally only (the viewer usually
+                // can't write the owner's calendar, and it'd recolor it for
+                // everyone). Personal calendars write through to the server.
+                const cal = allCalendars.find((c) => c.id === calendarId);
+                if (cal?.isShared) {
+                  setSharedCalendarColor(sharedCalendarColorKey(cal), color);
+                  return;
+                }
                 updateCalendar(client, calendarId, { color });
               } : undefined}
+              onResetColor={(cal) => {
+                // Drop the local override; the auto-assign effect picks a
+                // fresh unused color (so it never reverts to a collision).
+                removeSharedCalendarColor(sharedCalendarColorKey(cal));
+              }}
               onShareCalendar={client ? (cal) => setSharingCalendarId(cal.id) : undefined}
               onCreateEvent={(cal: Calendar) => {
                 setDefaultCalendarIdForCreate(cal.id);
@@ -1389,7 +1449,7 @@ export default function CalendarPage() {
           onSubscribe={() => setShowSubscriptionModal(true)}
           isMobile={isMobile}
           onNavigateBack={isMobile && mobileReturnToMonth && normalizedViewMode === "day" ? navigateBackToMonth : undefined}
-          calendars={calendars}
+          calendars={displayCalendars}
           selectedCalendarIds={selectedCalendarIds}
           onToggleVisibility={toggleCalendarVisibility}
           enableCalendarTasks={enableCalendarTasks}
@@ -1419,7 +1479,7 @@ export default function CalendarPage() {
               <EventModal
                 key={editEvent?.id ?? 'new'}
                 event={editEvent}
-                calendars={calendars}
+                calendars={displayCalendars}
                 defaultDate={defaultModalDate}
                 defaultEndDate={defaultModalEndDate}
                 defaultAllDay={defaultModalAllDay}
@@ -1442,7 +1502,7 @@ export default function CalendarPage() {
               <TaskModal
                 key={editTask?.id ?? 'new-task'}
                 task={editTask}
-                calendars={calendars}
+                calendars={displayCalendars}
                 onSave={handleSaveTask}
                 onDelete={handleDeleteTask}
                 onClose={() => { setShowTaskModal(false); setEditTask(null); }}
@@ -1529,7 +1589,7 @@ export default function CalendarPage() {
       {detailEvent && detailAnchorRect && (
         <EventDetailPopover
           event={detailEvent}
-          calendar={calendars.find(c => detailEvent.calendarIds[c.id])}
+          calendar={displayCalendars.find(c => detailEvent.calendarIds[c.id])}
           anchorRect={detailAnchorRect}
           onEdit={handleEditFromDetail}
           onDelete={handleDeleteFromDetail}
@@ -1549,7 +1609,7 @@ export default function CalendarPage() {
         <EventModal
           key={editEvent?.id ?? 'new'}
           event={editEvent}
-          calendars={calendars}
+          calendars={displayCalendars}
           defaultDate={defaultModalDate}
           defaultEndDate={defaultModalEndDate}
           defaultAllDay={defaultModalAllDay}
@@ -1566,7 +1626,7 @@ export default function CalendarPage() {
 
       {showImportModal && client && (
         <ICalImportModal
-          calendars={calendars}
+          calendars={displayCalendars}
           client={client}
           initialUrl={pendingSubscription?.url}
           onClose={() => {

app/(main)/[locale]/contacts/page.tsx

@@ -18,7 +18,9 @@ import { ContactImportDialog } from "@/components/contacts/contact-import-dialog
 import { RenameDialog } from "@/components/files/rename-dialog";
 import { exportContacts } from "@/components/contacts/contact-export";
 import { AppTopBannerSlot } from "@/components/plugins/app-top-banner-slot";
-import { useContactStore, getContactDisplayName } from "@/stores/contact-store";
+import { useContactStore, getContactDisplayName, getContactPrimaryEmail } from "@/stores/contact-store";
+import { savePendingMailto } from "@/lib/protocol-handlers/session";
+import { formatRecipient } from "@/lib/email-composer-utils";
 import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
 import { useEmailStore } from "@/stores/email-store";
 import { usePolicyStore } from "@/stores/policy-store";
@@ -82,6 +84,7 @@ export default function ContactsPage() {
     bulkDeleteContacts,
     bulkAddToGroup,
     moveContactToAddressBook,
+    createAddressBook,
     renameAddressBook,
     removeAddressBook,
     shareAddressBook,
@@ -93,6 +96,7 @@ export default function ContactsPage() {
   const [activeCategory, setActiveCategory] = useState<ContactCategory>("all");
   const [showImportDialog, setShowImportDialog] = useState(false);
   const [renamingAddressBook, setRenamingAddressBook] = useState<AddressBook | null>(null);
+  const [creatingAddressBook, setCreatingAddressBook] = useState(false);
   const [sharingAddressBookId, setSharingAddressBookId] = useState<string | null>(null);
   const [defaultBookIdForCreate, setDefaultBookIdForCreate] = useState<string | undefined>(undefined);
   const [createPrefill, setCreatePrefill] = useState<{ email?: string; name?: string } | undefined>(undefined);
@@ -173,12 +177,13 @@ export default function ContactsPage() {
     const addEmail = searchParams.get('addEmail');
     const addName = searchParams.get('addName');
     const from = searchParams.get('from');
+    const viewParam = searchParams.get('view');
     if (!contactId && !addEmail && !from) return;
     intentAppliedRef.current = true;
     if (from === 'email') setReturnToEmail(true);
     if (contactId) {
       setSelectedContact(contactId);
-      setView('detail');
+      setView(viewParam === 'edit' ? 'edit' : 'detail');
     } else if (addEmail) {
       setCreatePrefill({ email: addEmail, name: addName ?? undefined });
       setSelectedContact(null);
@@ -297,6 +302,34 @@ export default function ContactsPage() {
     }
   }, [client, supportsSync, contacts, updateContact, updateLocalContact, t]);
 
+  // Refresh address books (and contacts) after a structural change, staying
+  // multi-account aware so a freshly created book lands in the sidebar.
+  const refreshAddressBooks = useCallback(async () => {
+    if (!client) return;
+    if (multiAccountEnabled && accountClients.length > 0) {
+      const activeId = useAuthStore.getState().activeAccountId;
+      if (activeId) {
+        const { fetchAllAccountsAddressBooks } = useContactStore.getState();
+        await fetchAllAccountsAddressBooks(accountClients, activeId);
+        return;
+      }
+    }
+    await useContactStore.getState().fetchAddressBooks(client);
+  }, [client, multiAccountEnabled, accountClients]);
+
+  const handleCreateAddressBook = useCallback(async (name: string) => {
+    if (!client) return;
+    try {
+      await createAddressBook(client, name);
+      await refreshAddressBooks();
+      toast.success(t("address_books.created"));
+      setCreatingAddressBook(false);
+    } catch (error) {
+      console.error('Failed to create address book:', error);
+      toast.error(t("address_books.create_failed"));
+    }
+  }, [client, createAddressBook, refreshAddressBooks, t]);
+
   const handleImportContacts = useCallback(async (importedContacts: ContactCard[]) => {
     return importContacts(
       supportsSync && client ? client : null,
@@ -460,6 +493,51 @@ export default function ContactsPage() {
     setView("group-edit");
   }, []);
 
+  // Open the in-app composer in the current session rather than routing through
+  // a mailto: URL. `window.location='mailto:'` hands off to the OS handler
+  // (which may open a different mail app), and the mailto protocol round-trip
+  // reloads the app - dropping the in-memory per-account JMAP clients of a
+  // multi-account session, which reads as a logout. Stashing the recipients and
+  // doing a client-side router.push keeps the session and the active account
+  // intact; the main route consumes the pending compose and opens the composer
+  // (see consumePendingMailto in page.tsx).
+  const openComposeInApp = useCallback((recipients: string[], field: "to" | "cc" | "bcc") => {
+    savePendingMailto({
+      to: field === "to" ? recipients : [],
+      cc: field === "cc" ? recipients : [],
+      bcc: field === "bcc" ? recipients : [],
+      subject: "",
+      body: "",
+    });
+    router.push("/");
+  }, [router]);
+
+  const handleComposeGroupFromSidebar = useCallback((groupId: string, field: "to" | "cc" | "bcc") => {
+    // Format each member as "Name <email>" so the composer keeps the display
+    // name (round-trips via formatRecipient -> parseRecipientList). Dedupe by
+    // email, case-insensitively; members without an email are skipped.
+    const seen = new Set<string>();
+    const recipients: string[] = [];
+    for (const member of getGroupMembers(groupId)) {
+      const email = getContactPrimaryEmail(member).trim();
+      const key = email.toLowerCase();
+      if (!email || seen.has(key)) continue;
+      seen.add(key);
+      recipients.push(formatRecipient(getContactDisplayName(member), email));
+    }
+    if (recipients.length === 0) {
+      toast.error(t("groups.no_member_emails"));
+      return;
+    }
+    openComposeInApp(recipients, field);
+  }, [getGroupMembers, t, openComposeInApp]);
+
+  const handleComposeContact = useCallback((contact: ContactCard) => {
+    const email = getContactPrimaryEmail(contact).trim();
+    if (!email) return;
+    openComposeInApp([formatRecipient(getContactDisplayName(contact), email)], "to");
+  }, [openComposeInApp]);
+
   const handleDeleteGroupFromSidebar = useCallback(async (groupId: string) => {
     const confirmed = await confirmDialog({
       title: t("groups.delete_confirm_title"),
@@ -624,6 +702,7 @@ export default function ContactsPage() {
             onEdit={handleEditGroup}
             onDelete={handleDeleteGroup}
             onRemoveMember={handleRemoveGroupMember}
+            onComposeGroup={(field) => handleComposeGroupFromSidebar(selectedGroup.id, field)}
             isMobile={isMobile}
             onSelectMember={(id) => {
               setSelectedContact(id);
@@ -701,6 +780,11 @@ export default function ContactsPage() {
             contact={selectedContact}
             onEdit={handleEdit}
             onDelete={handleDelete}
+            onCompose={
+              selectedContact
+                ? () => handleComposeContact(selectedContact)
+                : undefined
+            }
             onAddToGroup={
               selectedContact
                 ? () => handleAddContactToGroup(selectedContact.id)
@@ -803,9 +887,11 @@ export default function ContactsPage() {
                       onSelectCategory={handleSelectCategory}
                       onCreateGroup={handleCreateGroup}
                       onCreateContact={handleCreateNew}
+                      onCreateAddressBook={client ? () => setCreatingAddressBook(true) : undefined}
                       onImport={() => setShowImportDialog(true)}
                       onEditGroup={handleEditGroupFromSidebar}
                       onDeleteGroup={handleDeleteGroupFromSidebar}
+                      onComposeGroup={handleComposeGroupFromSidebar}
                       onDropContacts={handleDropContacts}
                       onDropContactsToCategory={handleDropContactsToCategory}
                       onRenameAddressBook={client ? (book) => setRenamingAddressBook(book) : undefined}
@@ -951,6 +1037,15 @@ export default function ContactsPage() {
           }}
         />
       )}
+      {creatingAddressBook && (
+        <RenameDialog
+          currentName=""
+          title={t("address_books.create")}
+          label={t("address_books.name_label")}
+          onCancel={() => setCreatingAddressBook(false)}
+          onConfirm={handleCreateAddressBook}
+        />
+      )}
       {renamingAddressBook && (
         <RenameDialog
           currentName={renamingAddressBook.name}

app/(main)/[locale]/files/page.tsx

@@ -22,12 +22,13 @@ import { useIsMobile } from "@/hooks/use-media-query";
 import { useRefreshGesture } from "@/hooks/use-refresh-gesture";
 import { usePolicyStore } from "@/stores/policy-store";
 import { FileBrowser } from "@/components/files/file-browser";
+import type { FileNodeRights } from "@/lib/jmap/types";
 import { ImagePreviewModal } from "@/components/files/image-preview-modal";
 import { FilePreviewModal } from "@/components/files/file-preview-modal";
 import { loadFilesSettings } from "@/components/files/files-settings-dialog";
 import type { FolderLayout } from "@/components/files/files-settings-dialog";
 import { AppTopBannerSlot } from "@/components/plugins/app-top-banner-slot";
-import { AlertTriangle } from "lucide-react";
+import { AlertTriangle, Loader2 } from "lucide-react";
 
 export default function FilesPage() {
   const router = useRouter();
@@ -48,9 +49,11 @@ export default function FilesPage() {
     supportsFiles,
     selectedResources,
     uploadProgress,
+    migrationProgress,
     clipboard,
     initClient,
     checkSupport,
+    migrateLegacyFlatNodes,
     navigate,
     navigateByPath,
     refresh,
@@ -86,6 +89,7 @@ export default function FilesPage() {
     cancelUpload,
     undoLastAction,
     lastAction,
+    shareResource,
   } = useFileStore();
 
   const isMobile = useIsMobile();
@@ -160,13 +164,16 @@ export default function FilesPage() {
   const storeClient = useFileStore(s => s.client);
   useEffect(() => {
     if (storeClient && supportsFiles === null) {
-      checkSupport().then((supported) => {
+      checkSupport().then(async (supported) => {
         if (supported) {
+          // Upgrade any files created by older builds (flat path-encoded names)
+          // into the real FileNode hierarchy before the first listing.
+          await migrateLegacyFlatNodes();
           navigate(null);
         }
       });
     }
-  }, [storeClient, supportsFiles, checkSupport, navigate]);
+  }, [storeClient, supportsFiles, checkSupport, migrateLegacyFlatNodes, navigate]);
 
   const handleNavigate = useCallback((path: string, resourceId?: string | null) => {
     // Pro shell only: the Account breadcrumb segment signals "go to this
@@ -396,6 +403,14 @@ export default function FilesPage() {
 
   const currentFilesAccountId = useFileStore((s) => s.currentAccountId);
 
+  // Sharing: the browsing client (store-attached) drives the principal picker
+  // and share mutations. supportsPrincipals() gates the whole Share affordance.
+  const sharingEnabled = !!storeClient?.supportsPrincipals();
+  const filesAccountId = storeClient?.getFilesAccountId() ?? null;
+  const handleShare = useCallback(async (id: string, principalId: string, rights: FileNodeRights | null) => {
+    await shareResource(id, principalId, rights);
+  }, [shareResource]);
+
   // Pro shell only: all connected accounts are equal top-level entries at
   // the root. The root path "/" itself is a cross-account picker - no
   // account's files are shown until the user enters one.
@@ -535,6 +550,10 @@ export default function FilesPage() {
                   onSelectAccount={handleSelectAccount}
                   accountPickerMode={isAccountPicker}
                   accountLabel={currentAccountLabel}
+                  client={storeClient}
+                  ownAccountId={filesAccountId}
+                  sharingEnabled={sharingEnabled}
+                  onShare={handleShare}
                 />
                 </div>
               )}
@@ -573,6 +592,32 @@ export default function FilesPage() {
         />
       )}
 
+      {/* Legacy file migration progress (issue #379) */}
+      {migrationProgress && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
+          <div className="w-[22rem] max-w-[90vw] rounded-lg border border-border bg-background p-6 shadow-xl">
+            <div className="flex items-center gap-3">
+              <Loader2 className="w-5 h-5 text-primary animate-spin shrink-0" />
+              <div>
+                <p className="text-sm font-medium">{t("migration_title")}</p>
+                <p className="text-xs text-muted-foreground">{t("migration_description")}</p>
+              </div>
+            </div>
+            <div className="mt-4 h-1.5 bg-primary/20 rounded-full overflow-hidden">
+              <div
+                className="h-full bg-primary rounded-full transition-all duration-300"
+                style={{ width: migrationProgress.total > 0
+                  ? `${(migrationProgress.current / migrationProgress.total) * 100}%`
+                  : '0%' }}
+              />
+            </div>
+            <p className="mt-2 text-xs text-muted-foreground tabular-nums text-right">
+              {migrationProgress.current} / {migrationProgress.total}
+            </p>
+          </div>
+        </div>
+      )}
+
       <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
       <ConfirmDialog {...confirmDialogProps} />
       </div>

app/(main)/[locale]/layout.tsx

@@ -9,6 +9,7 @@ import { ProtocolLaunchHandlerProvider } from "@/components/protocol/protocol-la
 import { ProInterfaceRedirect } from "@/components/pro/pro-interface-redirect";
 import { PluginDialogHost } from "@/components/plugins/plugin-dialog-host";
 import { PluginConsentDialog } from "@/components/plugins/plugin-consent-dialog";
+import { PWAInstallPrompt } from "@/components/pwa-install-prompt";
 import { locales } from "@/i18n/routing";
 
 export default async function LocaleLayout({
@@ -41,6 +42,7 @@ export default async function LocaleLayout({
                   {children}
                   <PluginDialogHost />
                   <PluginConsentDialog />
+                  <PWAInstallPrompt />
                 </ProtocolLaunchHandlerProvider>
               </TourProvider>
             </EmbeddedBridgeProvider>

app/(main)/[locale]/login/page.tsx

@@ -11,10 +11,10 @@ import { useAccountStore } from "@/stores/account-store";
 import { useThemeStore } from "@/stores/theme-store";
 import { useShallow } from "zustand/react/shallow";
 import { useConfig } from "@/hooks/use-config";
-import { apiFetch, getPathPrefix, withBasePath } from "@/lib/browser-navigation";
+import { apiFetch, getPathPrefix, toRouterPath, withBasePath } from "@/lib/browser-navigation";
 import { cn } from "@/lib/utils";
 import { AlertCircle, Loader2, X, Info, Eye, EyeOff, LogIn, Sun, Moon, Monitor, Check, Shield, Play, Copy } from "lucide-react";
-import { discoverOAuth, type OAuthMetadata } from "@/lib/oauth/discovery";
+import { type OAuthMetadata } from "@/lib/oauth/discovery";
 import { generateCodeVerifier, generateCodeChallenge, generateState } from "@/lib/oauth/pkce";
 import { useUpdateStore, selectBanner } from "@/stores/update-store";
 import type { PublicJmapServerEntry } from "@/lib/admin/jmap-servers";
@@ -279,7 +279,7 @@ export default function LoginPage() {
           redirectTo = saved;
         }
       } catch { /* ignore */ }
-      router.push(redirectTo);
+      router.push(toRouterPath(redirectTo));
     }
   }, [isAuthenticated, router, isAddAccountMode, isMobileHandoff, mobileRedirectUri, mobileState]);
 
@@ -329,16 +329,27 @@ export default function LoginPage() {
     if (!oauthEnabled || !serverUrl) return;
     setOauthDiscoveryDone(false);
     setOauthMetadata(null);
-    discoverOAuth(effectiveOauthIssuerUrl || serverUrl)
+    const controller = new AbortController();
+    // Discover via our own origin rather than fetching the IdP's /.well-known/*
+    // documents directly from the browser. A direct cross-origin discovery
+    // fetch is subject to CORS, and providers like Authentik serve those
+    // documents without Access-Control-Allow-Origin, so the browser blocks the
+    // response and login breaks (issue #382). The proxy runs discovery server
+    // side where CORS does not apply.
+    const query = selectedServer?.id ? `?server_id=${encodeURIComponent(selectedServer.id)}` : "";
+    apiFetch(`/api/auth/oauth/metadata${query}`, { signal: controller.signal })
+      .then(async (res) => (res.ok ? ((await res.json()) as OAuthMetadata) : null))
       .then((metadata) => {
         setOauthMetadata(metadata);
         setOauthDiscoveryDone(true);
       })
-      .catch(() => {
+      .catch((err) => {
+        if (err?.name === "AbortError") return;
         setOauthMetadata(null);
         setOauthDiscoveryDone(true);
       });
-  }, [oauthEnabled, serverUrl, effectiveOauthIssuerUrl]);
+    return () => controller.abort();
+  }, [oauthEnabled, serverUrl, effectiveOauthIssuerUrl, selectedServer?.id]);
 
   // Auto-SSO: when enabled with OAUTH_ONLY, skip the login page entirely
   const ssoError = searchParams.get("sso_error");
@@ -644,7 +655,7 @@ export default function LoginPage() {
           redirectTo = saved;
         }
       } catch { /* ignore */ }
-      router.push(redirectTo);
+      router.push(toRouterPath(redirectTo));
     }
   };
 

app/(main)/[locale]/page.tsx

@@ -11,8 +11,9 @@ import type { ComposerDraftData } from "@/components/email/email-composer";
 import { ProtocolAccountPicker } from "@/components/protocol/protocol-account-picker";
 import { ThreadConversationView } from "@/components/email/thread-conversation-view";
 import { MobileHeader } from "@/components/layout/mobile-header";
-import { ThreadGroup, Email, isUnifiedMailboxId, UNIFIED_ROLE_BY_ID } from "@/lib/jmap/types";
+import { ThreadGroup, Email, Mailbox, isUnifiedMailboxId, UNIFIED_ROLE_BY_ID, ALL_MAIL_MAILBOX_ID, CROSS_VIEW_BY_ID, isCrossViewId } from "@/lib/jmap/types";
 import { useAccountStore } from "@/stores/account-store";
+import { usePolicyStore } from "@/stores/policy-store";
 import type { UnifiedAccountClient } from "@/lib/unified-mailbox";
 import { KeyboardShortcutsModal } from "@/components/keyboard-shortcuts-modal";
 import { useEmailStore, buildUnifiedAccountClients } from "@/stores/email-store";
@@ -31,6 +32,7 @@ import { useBrowserNavigation, type NavSnapshot } from "@/hooks/use-browser-navi
 import { debug } from "@/lib/debug";
 import { playNotificationSound } from "@/lib/notification-sound";
 import { cn } from "@/lib/utils";
+import { localizeMailboxName } from "@/lib/mailbox-label";
 import {
   ErrorBoundary,
   SidebarErrorFallback,
@@ -55,7 +57,7 @@ import { useProMultiAccountMailboxes } from "@/hooks/use-pro-multi-account-mailb
 import { Input } from "@/components/ui/input";
 import { FilePreviewModal } from "@/components/files/file-preview-modal";
 import { isFilePreviewable } from "@/lib/file-preview";
-import { appendPlainTextSignature } from "@/lib/signature-utils";
+import { appendHtmlSignature, appendPlainTextSignature } from "@/lib/signature-utils";
 import { computeReplyThreadingHeaders } from "@/lib/email-threading";
 import { EML_IMPORT_ACCEPT, expandImportableEmails } from "@/lib/eml-import";
 import { resolveReplyFrom } from "@/lib/reply-identity";
@@ -72,6 +74,7 @@ import { plainTextToComposerBody } from "@/lib/email-composer-utils";
 import { appLifecycleHooks, uiHooks, routerHooks, toastHooks, emailHooks } from "@/lib/plugin-hooks";
 import { emailToReadView } from "@/lib/plugin-projection";
 import { buildQuoteHeader } from "@/lib/quote-header";
+import { buildReplySubject, buildForwardSubject } from "@/lib/subject-prefix";
 import { useLocaleStore } from "@/stores/locale-store";
 import type { QuoteHeader } from "@/lib/plugin-types";
 
@@ -81,6 +84,7 @@ const SCHEDULED_MAILBOX_ID = '__scheduled__';
 export default function Home() {
   const t = useTranslations();
   const tCommon = useTranslations('common');
+  const tQuote = useTranslations('quote_header');
   const { appName } = useConfig();
   const mailLayout = useSettingsStore((state) => state.mailLayout);
   const [showComposer, setShowComposer] = useState(false);
@@ -299,6 +303,7 @@ export default function Home() {
     fetchTagCounts,
     fetchEmailContent,
     isUnifiedView,
+    unifiedRole,
     scheduledEmails,
     scheduledTotal,
     scheduledHasMore,
@@ -315,7 +320,10 @@ export default function Home() {
     clearPendingUndoSend,
     pendingUndoSend,
     fetchUnifiedEmails: fetchUnifiedEmailsAction,
+    fetchCrossView: fetchCrossViewAction,
     refreshUnifiedCounts,
+    refreshCrossCounts,
+    crossUnreadCount,
     exitUnifiedView,
     emptyMailbox,
     markMailboxAsRead,
@@ -331,6 +339,7 @@ export default function Home() {
     viewingAccountId,
     selectAccountMailbox,
     setViewingAccount,
+    refreshCurrentMailbox,
   } = useEmailStore();
 
   // Pro shell: populate per-account mailbox cache so the sidebar can render
@@ -338,7 +347,23 @@ export default function Home() {
   useProMultiAccountMailboxes();
 
   const enableUnifiedMailbox = useSettingsStore((s) => s.enableUnifiedMailbox);
+  const enableAllMailView = useSettingsStore((s) => s.enableAllMailView);
   const delayedSendSupported = client?.hasDelayedSend() ?? true;
+  const allMailViewEnabled = usePolicyStore((s) => s.isFeatureEnabled('allMailViewEnabled'));
+  const showAllMailMailbox = allMailViewEnabled && enableAllMailView;
+
+  // Cross-account "All accounts" views: a sub-feature of the unified mailbox, so
+  // they require Unified Mailbox to be enabled, plus the admin gate and the
+  // per-user setting. Hooks are called unconditionally.
+  const crossUnreadGate = usePolicyStore((s) => s.isFeatureEnabled('crossUnreadViewEnabled'));
+  const crossStarredGate = usePolicyStore((s) => s.isFeatureEnabled('crossStarredViewEnabled'));
+  const crossAllGate = usePolicyStore((s) => s.isFeatureEnabled('crossAllViewEnabled'));
+  const enableCrossUnreadView = useSettingsStore((s) => s.enableCrossUnreadView);
+  const enableCrossStarredView = useSettingsStore((s) => s.enableCrossStarredView);
+  const enableCrossAllView = useSettingsStore((s) => s.enableCrossAllView);
+  const showCrossUnread = enableUnifiedMailbox && crossUnreadGate && enableCrossUnreadView;
+  const showCrossStarred = enableUnifiedMailbox && crossStarredGate && enableCrossStarredView;
+  const showCrossAll = enableUnifiedMailbox && crossAllGate && enableCrossAllView;
   const activeEmails = isScheduledView ? scheduledEmails : emails;
   const activeHasMore = isScheduledView ? scheduledHasMore : hasMoreEmails;
   const activeIsLoading = isScheduledView ? isLoadingScheduled : isLoading;
@@ -710,7 +735,7 @@ export default function Home() {
       // Mailbox view
       const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
       if (mailbox) {
-        const mailboxName = mailbox.name;
+        const mailboxName = localizeMailboxName(mailbox.role, mailbox.name, (k) => t(`sidebar.mailboxes.${k}`));
         const unreadCount = mailbox.unreadEmails || 0;
         title = unreadCount > 0
           ? `${mailboxName} (${unreadCount}) - ${appName}`
@@ -751,9 +776,9 @@ export default function Home() {
     let title = t('email_composer.new_message');
     if (baseSubject) {
       if (effectiveMode === 'reply' || effectiveMode === 'replyAll') {
-        title = baseSubject.startsWith('Re:') ? baseSubject : `Re: ${baseSubject}`;
+        title = buildReplySubject(baseSubject, t('email_composer.prefix.reply'));
       } else if (effectiveMode === 'forward') {
-        title = baseSubject.startsWith('Fwd:') ? baseSubject : `Fwd: ${baseSubject}`;
+        title = buildForwardSubject(baseSubject, t('email_composer.prefix.forward'));
       } else {
         title = baseSubject;
       }
@@ -978,14 +1003,16 @@ export default function Home() {
   // recounting happened"). The Pro shell always renders the unified mailbox
   // regardless of the user setting, so refresh when embedded too.
   useEffect(() => {
-    if (!enableUnifiedMailbox && !isEmbedded) return;
+    const anyCross = showCrossUnread || showCrossStarred || showCrossAll;
+    if (!enableUnifiedMailbox && !isEmbedded && !anyCross) return;
     if (!isAuthenticated || !client) return;
     buildPopulatedUnifiedAccounts().then((built) => {
       const hasGroupEntry = built.some((b) => b.isShared);
+      if (anyCross) refreshCrossCounts(built);
       if (built.length < 2 && !hasGroupEntry && !isEmbedded) return;
       refreshUnifiedCounts(built);
     });
-  }, [enableUnifiedMailbox, includeGroupInUnified, isEmbedded, isAuthenticated, client, mailboxes, connectedAccountsSignature, buildPopulatedUnifiedAccounts, refreshUnifiedCounts]);
+  }, [enableUnifiedMailbox, includeGroupInUnified, isEmbedded, isAuthenticated, client, mailboxes, connectedAccountsSignature, buildPopulatedUnifiedAccounts, refreshUnifiedCounts, refreshCrossCounts, showCrossUnread, showCrossStarred, showCrossAll]);
 
   // System-notification click handler. The push SW navigates the user back
   // here with `?email=<id>` (specific email it built the toast from) or
@@ -1031,8 +1058,8 @@ export default function Home() {
     // Skip when handleEmailSelect already started a fetch (it sets isLoadingEmail before
     // calling selectEmail on the stub), to avoid a duplicate request.
     if (!selectedEmail.bodyValues && !isLoadingEmail) {
-      const perAccountClient = isUnifiedView && selectedEmail.accountId
+      const perAccountClient = isUnifiedView && selectedEmail.sourceClientAccountId
-        ? useAuthStore.getState().getClientForAccount(selectedEmail.accountId)
+        ? useAuthStore.getState().getClientForAccount(selectedEmail.sourceClientAccountId)
         : undefined;
       const fetchClient = perAccountClient ?? client;
       setLoadingEmail(true);
@@ -1129,6 +1156,7 @@ export default function Home() {
     inReplyTo?: string[];
     references?: string[];
     delayedUntil?: string;
+    requestReadReceipt?: boolean;
   }) => {
     if (!client) return;
 
@@ -1136,7 +1164,7 @@ export default function Home() {
       const effectiveMode = pendingDraft?.mode ?? composerMode;
       const originalEmailId = selectedEmail?.id;
 
-      const result = await sendEmail(client, data.to, data.subject, data.body, data.cc, data.bcc, data.identityId, data.fromEmail, data.draftId, data.fromName, data.htmlBody, data.attachments, data.inReplyTo, data.references, data.delayedUntil, data.envelopeMailFrom);
+      const result = await sendEmail(client, data.to, data.subject, data.body, data.cc, data.bcc, data.identityId, data.fromEmail, data.draftId, data.fromName, data.htmlBody, data.attachments, data.inReplyTo, data.references, data.delayedUntil, data.envelopeMailFrom, { requestReadReceipt: data.requestReadReceipt });
       setShowComposer(false);
       if (result.scheduled) {
         await refreshScheduledMetadata(client);
@@ -1160,7 +1188,33 @@ export default function Home() {
       }
 
       // Refresh the current mailbox to update the UI
-      if (!isScheduledView) await fetchEmails(client, selectedMailbox);
+      if (!isScheduledView) {
+        await refreshCurrentMailbox(client);
+        // Re-fetch the replied thread's cross-folder data so the expanded
+        // view shows the newly sent reply without collapsing.
+        if (originalEmailId) {
+          const emailState = useEmailStore.getState();
+          const repliedEmail = emailState.emails.find(e => e.id === originalEmailId);
+          if (repliedEmail?.threadId && emailState.expandedThreadIds.has(repliedEmail.threadId)) {
+            // Route to the email's own account so shared/group threads refresh
+            // from the right server, not the active one. (#281)
+            const threadClient = emailState.isUnifiedView && repliedEmail.sourceClientAccountId
+              ? (useAuthStore.getState().getClientForAccount(repliedEmail.sourceClientAccountId) ?? client)
+              : client;
+            const accountId = emailState.isUnifiedView && repliedEmail.sourceAccountId
+              ? repliedEmail.sourceAccountId
+              : client.getAccountId();
+            const fullEmails = await threadClient.getThreadEmails(repliedEmail.threadId, accountId);
+            if (fullEmails.length > 0) {
+              useEmailStore.setState((state) => {
+                const c = new Map(state.threadEmailsCache);
+                c.set(repliedEmail.threadId!, fullEmails);
+                return { threadEmailsCache: c };
+              });
+            }
+          }
+        }
+      }
     } catch (error) {
       console.error("Failed to send email:", error);
     }
@@ -1212,13 +1266,20 @@ export default function Home() {
         locale: useLocaleStore.getState().locale,
         timeFormat: useSettingsStore.getState().timeFormat,
         unknownLabel: tCommon('unknown'),
+        labels: {
+          formatReplyLine: (vars) => tQuote('reply_line', vars),
+          forwardedSeparator: tQuote('forwarded_separator'),
+          fromLabel: tQuote('from_label'),
+          dateLabel: tQuote('date_label'),
+          subjectLabel: tQuote('subject_label'),
+        },
       });
       setComposerQuoteHeader(header);
     } catch (err) {
       console.warn('[quote-header] plugin transform failed; using default', err);
       setComposerQuoteHeader(null);
     }
-  }, [tCommon]);
+  }, [tCommon, tQuote]);
 
   // Force a clean composer remount on every fresh entry point so prior
   // compose state can't bleed into the new session (#329 C). The composer is
@@ -1378,8 +1439,20 @@ export default function Home() {
   const handleDelete = async (emailToDelete: Email | null = selectedEmail) => {
     if (!client || !emailToDelete) return;
 
-    // Check if we're currently in the trash or junk folder
+    // In unified view the trash destination and current-folder check must come
-    const currentMailbox = mailboxes.find(m => m.id === selectedMailbox);
+    // from the email's own account, not the active one. The owning account's
+    // mailbox list is cached under its JMAP id (`sourceAccountId`). (#281)
+    const actionMailboxes =
+      isUnifiedView && emailToDelete.sourceAccountId
+        ? (accountMailboxes[emailToDelete.sourceAccountId] ?? mailboxes)
+        : mailboxes;
+
+    // Check if we're currently in the trash or junk folder. In unified view the
+    // "current folder" is the unified role within the email's account.
+    const currentMailbox = isUnifiedView
+      ? (actionMailboxes.find(m => m.role === unifiedRole && emailToDelete.mailboxIds?.[m.id])
+          ?? actionMailboxes.find(m => m.role === unifiedRole))
+      : mailboxes.find(m => m.id === selectedMailbox);
     const isInTrash = currentMailbox?.role === 'trash';
     const isInJunk = currentMailbox?.role === 'junk';
     const permanentlyDeleteJunk = useSettingsStore.getState().permanentlyDeleteJunk;
@@ -1400,11 +1473,17 @@ export default function Home() {
         console.error("Failed to permanently delete email:", error);
       }
     } else {
-      // Not in trash: always move to trash
+      // Not in trash: always move to trash (in the email's own account). Scope
+      // the trash lookup to the email's account: for a shared/group source every
+      // mailbox in the list is `isShared`, so we match by accountId instead of
+      // excluding shared (otherwise no trash is found and the delete fails). (#281)
+      const sourceAccountId = isUnifiedView ? emailToDelete.sourceAccountId : undefined;
+      const matchesScope = (m: Mailbox) =>
+        sourceAccountId ? m.accountId === sourceAccountId : !m.isShared;
       const trashMailbox =
-        mailboxes.find(m => m.role === 'trash' && !m.isShared) ??
+        actionMailboxes.find(m => m.role === 'trash' && matchesScope(m)) ??
-        mailboxes.find(m => {
+        actionMailboxes.find(m => {
-          if (m.isShared) return false;
+          if (!matchesScope(m)) return false;
           const lower = m.name.toLowerCase();
           return lower.includes('trash') || lower.includes('deleted');
         });
@@ -1426,9 +1505,30 @@ export default function Home() {
   const handleArchive = async (emailToArchive: Email | null = selectedEmail) => {
     if (!client || !emailToArchive) return;
 
+    // In unified view the archive folder (and any year/month subfolders we
+    // create) must live in the email's own account, reached through the login it
+    // is reachable via (`sourceClientAccountId`) and routed to its owning JMAP
+    // account (`sourceAccountId`). For personal sources these resolve to the
+    // account itself, so behavior is unchanged. (#281)
+    const archiveClientId = isUnifiedView ? emailToArchive.sourceClientAccountId : undefined;
+    const archiveAccountId = isUnifiedView ? emailToArchive.sourceAccountId : undefined;
+    const archiveClient = archiveClientId
+      ? (useAuthStore.getState().getClientForAccount(archiveClientId) ?? client)
+      : client;
     // Read fresh mailboxes from the store – batch archive calls this in a loop,
     // and each iteration needs to see folders created by prior iterations.
-    const currentMailboxes = useEmailStore.getState().mailboxes;
+    const readMailboxes = () => {
+      const s = useEmailStore.getState();
+      return archiveAccountId
+        ? (s.accountMailboxes[archiveAccountId] ?? s.mailboxes)
+        : s.mailboxes;
+    };
+    const refreshMailboxes = () =>
+      archiveAccountId
+        ? useEmailStore.getState().fetchAccountMailboxes(archiveClient, archiveAccountId)
+        : fetchMailboxes(client);
+
+    const currentMailboxes = readMailboxes();
 
     const archiveMailbox = currentMailboxes.find(m => m.role === "archive" || m.name.toLowerCase() === "archive");
     if (!archiveMailbox) return;
@@ -1448,21 +1548,21 @@ export default function Home() {
           m => m.name === year && m.parentId === archiveId
         );
         if (!yearMailbox) {
-          yearMailbox = await client.createMailbox(year, archiveId);
+          yearMailbox = await archiveClient.createMailbox(year, archiveId, archiveAccountId);
-          await fetchMailboxes(client);
+          await refreshMailboxes();
         }
 
         if (archiveMode === 'year') {
           await moveThreadToMailbox(client, emailToArchive.id, yearMailbox.id);
         } else {
           const yearId = yearMailbox.originalId || yearMailbox.id;
-          const afterYear = useEmailStore.getState().mailboxes;
+          const afterYear = readMailboxes();
           let monthMailbox = afterYear.find(
             m => m.name === month && m.parentId === yearId
           );
           if (!monthMailbox) {
-            monthMailbox = await client.createMailbox(month, yearId);
+            monthMailbox = await archiveClient.createMailbox(month, yearId, archiveAccountId);
-            await fetchMailboxes(client);
+            await refreshMailboxes();
           }
           await moveThreadToMailbox(client, emailToArchive.id, monthMailbox.id);
         }
@@ -1473,7 +1573,7 @@ export default function Home() {
         setConversationEmails([]);
       }
 
-      void fetchMailboxes(client);
+      void refreshMailboxes();
     } catch (error) {
       console.error("Failed to archive email:", error);
     }
@@ -1554,7 +1654,7 @@ export default function Home() {
         });
       } else {
         const jmapKey = `$label:${color}`;
-        if (keywords[jmapKey] === true) {
+        if (keywords[jmapKey]) {
           // Toggle off if already active
           keywords[jmapKey] = false;
         } else {
@@ -1650,6 +1750,28 @@ export default function Home() {
       return;
     }
 
+    if (isCrossViewId(mailboxId)) {
+      setScheduledView(false);
+      const view = CROSS_VIEW_BY_ID[mailboxId];
+      if (!view) return;
+
+      selectMailbox(mailboxId);
+      selectEmail(null);
+
+      if (isMobile) {
+        setSidebarOpen(false);
+        setActiveView("list");
+      }
+      if (isTablet) {
+        setTabletListVisible(true);
+      }
+
+      const populated = await buildPopulatedUnifiedAccounts();
+      await fetchCrossViewAction(populated, view);
+      refreshCrossCounts(populated);
+      return;
+    }
+
     if (isUnifiedView) {
       exitUnifiedView();
     }
@@ -2090,9 +2212,21 @@ export default function Home() {
 
     // Append signature from the sending identity (fall back to primary
     // when the reply-from lives on the same identity but a different alias).
-    const finalBody = appendPlainTextSignature(body, sendingIdentity, {
+    const separator = useSettingsStore.getState().signatureSeparatorEnabled;
-      separator: useSettingsStore.getState().signatureSeparatorEnabled,
+    const finalBody = appendPlainTextSignature(body, sendingIdentity, { separator });
-    });
+
+    // When the identity has an HTML signature, send a matching HTML body so the
+    // signature keeps its formatting; appendPlainTextSignature would otherwise
+    // flatten it to plain text. Text-only identities keep the plain-text-only
+    // behavior (htmlBody stays undefined).
+    const escapedBody = body
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/\n/g, '<br>');
+    const finalHtmlBody = sendingIdentity?.htmlSignature?.trim()
+      ? appendHtmlSignature(`<div>${escapedBody}</div>`, sendingIdentity, { separator })
+      : undefined;
 
     const originalEmailId = selectedEmail.id;
     const sendDelaySeconds = useSettingsStore.getState().sendDelaySeconds;
@@ -2116,7 +2250,7 @@ export default function Home() {
     const result = await sendEmail(
       client,
       [sender.email],
-      `Re: ${selectedEmail.subject || "(no subject)"}`,
+      buildReplySubject(selectedEmail.subject || "(no subject)", t('email_composer.prefix.reply')),
       finalBody,
       undefined,
       undefined,
@@ -2124,7 +2258,7 @@ export default function Home() {
       headerFromEmail,
       undefined,
       headerFromName,
-      undefined,
+      finalHtmlBody,
       undefined,
       threading?.inReplyTo,
       threading?.references,
@@ -2145,7 +2279,29 @@ export default function Home() {
     }
 
     // Refresh emails to show the sent reply
-    await fetchEmails(client, selectedMailbox);
+    await refreshCurrentMailbox(client);
+    // Re-fetch the replied thread's cross-folder data so the expanded
+    // view shows the newly sent reply without collapsing.
+    const emailState = useEmailStore.getState();
+    const repliedEmail = emailState.emails.find(e => e.id === originalEmailId);
+    if (repliedEmail?.threadId && emailState.expandedThreadIds.has(repliedEmail.threadId)) {
+      // Route to the email's own account so shared/group threads refresh from
+      // the right server, not the active one. (#281)
+      const threadClient = emailState.isUnifiedView && repliedEmail.sourceClientAccountId
+        ? (useAuthStore.getState().getClientForAccount(repliedEmail.sourceClientAccountId) ?? client)
+        : client;
+      const accountId = emailState.isUnifiedView && repliedEmail.sourceAccountId
+        ? repliedEmail.sourceAccountId
+        : client.getAccountId();
+      const fullEmails = await threadClient.getThreadEmails(repliedEmail.threadId, accountId);
+      if (fullEmails.length > 0) {
+        useEmailStore.setState((state) => {
+          const c = new Map(state.threadEmailsCache);
+          c.set(repliedEmail.threadId!, fullEmails);
+          return { threadEmailsCache: c };
+        });
+      }
+    }
   };
 
   // Show loading state while checking auth
@@ -2161,7 +2317,16 @@ export default function Home() {
   }
 
   // Get current mailbox name for mobile header
-  const currentMailboxName = isScheduledView ? t('sidebar.scheduled') : mailboxes.find(m => m.id === selectedMailbox)?.name || "Inbox";
+  const currentMailboxName = isScheduledView
+    ? t('sidebar.scheduled')
+    : selectedMailbox === ALL_MAIL_MAILBOX_ID
+      ? t('sidebar.mailboxes.all_mail')
+      : (() => {
+          const mb = mailboxes.find(m => m.id === selectedMailbox);
+          return mb
+            ? localizeMailboxName(mb.role, mb.name, (k) => t(`sidebar.mailboxes.${k}`))
+            : "Inbox";
+        })();
   const isFocusedMailLayout = mailLayout === 'focus';
   const isHorizontalMailLayout = mailLayout === 'horizontal' && !isMobile && !isTablet;
   const hasViewerContent = showComposer || Boolean(conversationThread) || Boolean(selectedEmail);
@@ -2178,11 +2343,10 @@ export default function Home() {
       setShowComposer(false);
     }
 
-    // waiting for the body fetch - avoids the loading flicker.
+    // Find the list-level email for metadata (accountId, scheduled flags, etc.)
+    // but don't select it yet — wait for the full fetch to avoid a toolbar flash
+    // caused by rendering with the stub (no bodyValues) then re-rendering with the full email.
     const listEmail = activeEmails.find(e => e.id === email.id);
-    if (listEmail) {
-      selectEmail(listEmail);
-    }
 
     setLoadingEmail(true);
 
@@ -2198,21 +2362,25 @@ export default function Home() {
 
     // Fetch the full content
     try {
-      // In unified view each email carries its own accountId. Use that
+      // In unified view each email carries its source reference: the login it is
-      // account's client so we fetch from the server that actually owns it.
+      // reachable through (`sourceClientAccountId`) and its owning JMAP account
-      const emailAccountId = isUnifiedView ? listEmail?.accountId : undefined;
+      // (`sourceAccountId`). Resolve both so we fetch from the server that actually
-      const perAccountClient = emailAccountId
+      // owns it — works uniformly for personal and shared/group sources, since for
-        ? useAuthStore.getState().getClientForAccount(emailAccountId)
+      // personal the owning account equals the client's primary (no-op). (#281)
+      const sourceClientId = isUnifiedView ? listEmail?.sourceClientAccountId : undefined;
+      const perAccountClient = sourceClientId
+        ? useAuthStore.getState().getClientForAccount(sourceClientId)
         : undefined;
       const fetchClient = perAccountClient ?? client;
 
-      // For shared folders on the primary client, we still need to pass the
+      const accountId = isUnifiedView
-      // shared account's id. In unified view we use the per-account client
+        ? listEmail?.sourceAccountId
-      // directly, so no explicit accountId is needed.
+        : (() => {
-      const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
+            // Non-unified: shared folders on the active client still need their
-      const accountId = perAccountClient
+            // owner accountId passed explicitly.
-        ? undefined
+            const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
-        : mailbox?.isShared ? mailbox.accountId : undefined;
+            return mailbox?.isShared ? mailbox.accountId : undefined;
+          })();
 
       const fullEmail = await fetchClient.getEmail(email.id, accountId);
       if (fullEmail) {
@@ -2224,9 +2392,13 @@ export default function Home() {
           fullEmail.isScheduled = true;
           fullEmail.isSmimeScheduled = listEmail.isSmimeScheduled;
         }
-        if (emailAccountId) {
+        // Re-stamp the source reference so later actions on the open email
-          fullEmail.accountId = emailAccountId;
+        // resolve to the right account (the fetched object lacks these).
-          fullEmail.accountLabel = listEmail?.accountLabel;
+        if (isUnifiedView && listEmail) {
+          fullEmail.accountId = listEmail.accountId;
+          fullEmail.accountLabel = listEmail.accountLabel;
+          fullEmail.sourceClientAccountId = listEmail.sourceClientAccountId;
+          fullEmail.sourceAccountId = listEmail.sourceAccountId;
         }
         selectEmail(fullEmail);
         // Mark-as-read logic is now handled by useEffect
@@ -2275,8 +2447,27 @@ export default function Home() {
     setActiveView("viewer");
 
     try {
-      // Fetch complete thread emails
+      // In unified/aggregate views the thread may belong to another (possibly
-      const emails = await client.getThreadEmails(thread.threadId);
+      // shared/group) account. Route the fetch to the login it's reachable
+      // through (`sourceClientAccountId`) and pass its owning JMAP account
+      // (`sourceAccountId`) so the thread loads from the right server instead of
+      // the active one (which doesn't have it → empty/body-less). (#281)
+      const ref = thread.emails?.[0];
+      const threadClient = isUnifiedView && ref?.sourceClientAccountId
+        ? (useAuthStore.getState().getClientForAccount(ref.sourceClientAccountId) ?? client)
+        : client;
+      const threadAccountId = isUnifiedView ? ref?.sourceAccountId : undefined;
+      const emails = await threadClient.getThreadEmails(thread.threadId, threadAccountId);
+      // Re-stamp the source reference so conversation actions (reply/move/…)
+      // resolve to the right account; the fetched objects don't carry it.
+      if (isUnifiedView && ref) {
+        for (const e of emails) {
+          e.accountId = ref.accountId;
+          e.accountLabel = ref.accountLabel;
+          e.sourceClientAccountId = ref.sourceClientAccountId;
+          e.sourceAccountId = ref.sourceAccountId;
+        }
+      }
       setConversationEmails(emails);
     } catch (error) {
       console.error('Failed to fetch thread emails:', error);
@@ -2414,7 +2605,7 @@ export default function Home() {
                 ),
             inlineApp && "hidden"
           )}
-          style={!isMobile && !isTablet ? { width: sidebarCollapsed ? 64 : sidebarWidth } : undefined}
+          style={!isMobile && !isTablet ? { width: sidebarCollapsed ? 48 : sidebarWidth } : undefined}
         >
           <ErrorBoundary fallback={SidebarErrorFallback}>
             <Sidebar
@@ -2423,6 +2614,11 @@ export default function Home() {
               selectedKeyword={selectedKeyword}
               scheduledTotal={scheduledTotal}
               showScheduledMailbox={delayedSendSupported}
+              showAllMailMailbox={showAllMailMailbox}
+              showCrossUnread={showCrossUnread}
+              showCrossStarred={showCrossStarred}
+              showCrossAll={showCrossAll}
+              crossUnreadCount={crossUnreadCount}
               onMailboxSelect={handleMailboxSelect}
               onTagSelect={handleTagSelect}
               onUnreadFilterClick={handleUnreadFilterClick}
@@ -2498,8 +2694,8 @@ export default function Home() {
 
             {/* Search Bar + Inline Advanced Filters */}
             <div className="border-b border-border bg-background">
-              <div className="px-3 py-3">
+              <div className="px-3 h-14 flex items-center">
-                <div className="flex items-center gap-1.5">
+                <div className="flex items-center gap-1.5 w-full">
                   {/* Select / Select All toggle */}
                   <button
                     type="button"
@@ -2590,19 +2786,19 @@ export default function Home() {
                         icon={<Paperclip className="w-3.5 h-3.5" />}
                         label={t("advanced_search.has_attachment")}
                         value={searchFilters.hasAttachment}
-                        onClick={() => { const next = searchFilters.hasAttachment === null ? true : searchFilters.hasAttachment === true ? false : null; setSearchFilters({ hasAttachment: next }); handleAdvancedSearch(); }}
+                        onClick={() => { const next = searchFilters.hasAttachment === null ? true : searchFilters.hasAttachment ? false : null; setSearchFilters({ hasAttachment: next }); handleAdvancedSearch(); }}
                       />
                       <ToggleChip
                         icon={<Star className="w-3.5 h-3.5" />}
                         label={t("advanced_search.starred")}
                         value={searchFilters.isStarred}
-                        onClick={() => { const next = searchFilters.isStarred === null ? true : searchFilters.isStarred === true ? false : null; setSearchFilters({ isStarred: next }); handleAdvancedSearch(); }}
+                        onClick={() => { const next = searchFilters.isStarred === null ? true : searchFilters.isStarred ? false : null; setSearchFilters({ isStarred: next }); handleAdvancedSearch(); }}
                       />
                       <ToggleChip
                         icon={searchFilters.isUnread === false ? <MailOpen className="w-3.5 h-3.5" /> : <Mail className="w-3.5 h-3.5" />}
                         label={searchFilters.isUnread === false ? t("advanced_search.read") : t("advanced_search.unread")}
                         value={searchFilters.isUnread}
-                        onClick={() => { const next = searchFilters.isUnread === null ? true : searchFilters.isUnread === true ? false : null; setSearchFilters({ isUnread: next }); handleAdvancedSearch(); }}
+                        onClick={() => { const next = searchFilters.isUnread === null ? true : searchFilters.isUnread ? false : null; setSearchFilters({ isUnread: next }); handleAdvancedSearch(); }}
                       />
                     </div>
                     <div className="flex items-center gap-1">
@@ -3004,7 +3200,17 @@ export default function Home() {
                     onReply={handleReply}
                     onReplyAll={handleReplyAll}
                     onForward={handleForward}
-                    onDelete={() => handleDelete()}
+                    onDelete={() => {
+                      // Deleting the open message returns to the list (Gmail-style),
+                      // not the next email — unless the user turned the setting off.
+                      // Deselect first so the store's remove-and-advance sees no
+                      // selection and doesn't auto-open the next message.
+                      const target = selectedEmail;
+                      if (useSettingsStore.getState().returnToListAfterAction) {
+                        handleMobileBack();
+                      }
+                      handleDelete(target);
+                    }}
                     onArchive={() => handleArchive()}
                     onToggleStar={handleToggleStar}
                     onSetColorTag={handleSetColorTag}
@@ -3013,6 +3219,12 @@ export default function Home() {
                     onMarkAsRead={async (emailId, read) => {
                       if (client) {
                         await markAsRead(client, emailId, read);
+                        // Marking the open message unread returns to the list
+                        // (Gmail-style, gated on returnToListAfterAction). Staying
+                        // in the reading pane would just re-mark it read on view.
+                        if (!read && useSettingsStore.getState().returnToListAfterAction) {
+                          handleMobileBack();
+                        }
                       }
                     }}
                     onDownloadAttachment={handleDownloadAttachment}
@@ -3047,7 +3259,7 @@ export default function Home() {
                     }}
                     currentUserEmail={client?.getUsername()}
                     currentUserName={client?.getUsername()?.split("@")[0]}
-                    currentMailboxRole={mailboxes.find(m => m.id === selectedMailbox)?.role}
+                    currentMailboxRole={mailboxes.find(m => m.id === selectedMailbox)?.role ?? (isUnifiedView ? (unifiedRole ?? undefined) : undefined)}
                     mailboxes={mailboxes}
                     selectedMailbox={selectedMailbox}
                     onMoveToMailbox={async (mailboxId) => {

app/(main)/[locale]/settings/page.tsx

@@ -33,6 +33,7 @@ import {
   Languages,
   Info,
   Bug,
+  SwatchBook,
   Download,
   X,
   type LucideIcon,
@@ -73,6 +74,7 @@ import { useEmailStore } from '@/stores/email-store';
 import { usePluginStore } from '@/stores/plugin-store';
 import { useThemeStore } from '@/stores/theme-store';
 import { useSettingsStore } from '@/stores/settings-store';
+import { useManagedAccountStore } from '@/stores/managed-account-store';
 import { useIsDesktop } from '@/hooks/use-media-query';
 import { NavigationRail } from '@/components/layout/navigation-rail';
 import { SidebarAppsModal } from '@/components/layout/sidebar-apps-modal';
@@ -145,7 +147,7 @@ const tabIcons: Record<Tab, LucideIcon> = {
   protocol_handlers: LinkIcon,
   sidebar_apps: PanelLeftClose,
   about_data: Info,
-  themes: Palette,
+  themes: SwatchBook,
   plugins: Puzzle,
   debug: Bug,
 };
@@ -181,6 +183,7 @@ const tabSearchPaths: Record<Tab, string[]> = {
     'settings.appearance.hide_account_switcher',
     'settings.appearance.show_rail_account_list',
     'settings.appearance.unified_mailbox',
+    'settings.appearance.all_mail',
     'settings.appearance.colorful_sidebar_icons',
     'settings.email_behavior.mail_layout',
   ],
@@ -197,11 +200,11 @@ const tabSearchPaths: Record<Tab, string[]> = {
     'settings.email_behavior.hover_actions',
     'settings.email_behavior.permanently_delete_junk',
     'settings.email_behavior.show_preview',
-    'settings.email_behavior.plain_text_mode',
   ],
   composing: [
     'settings.email_behavior.attachment_reminder',
     'settings.email_behavior.auto_select_reply_identity',
+    'settings.email_behavior.plain_text_mode',
     'settings.email_behavior.default_mail_program',
     'settings.email_behavior.signature_position',
     'settings.email_behavior.sub_address_delimiter',
@@ -335,6 +338,14 @@ const LEGACY_TAB_MAP: Record<string, Tab> = {
 
 function readPersistedTab(): Tab {
   try {
+    // One-shot deep link from the sidebar section gears (Folders / Tags).
+    // Used only as the initial tab and intentionally NOT written to
+    // 'settings-active-tab', so a gear click never becomes the persisted
+    // default that the regular Settings button lands on. Cleared on mount.
+    const deepLink = sessionStorage.getItem('settings-deep-link-tab');
+    if (deepLink) {
+      return (deepLink in LEGACY_TAB_MAP ? LEGACY_TAB_MAP[deepLink] : deepLink) as Tab;
+    }
     const saved = localStorage.getItem('settings-active-tab');
     if (!saved) return 'appearance';
     if (saved in LEGACY_TAB_MAP) {
@@ -360,6 +371,11 @@ export default function SettingsPage() {
   const { stalwartFeaturesEnabled } = useConfig();
   const { isFeatureEnabled } = usePolicyStore();
   const [activeTab, setActiveTab] = useState<Tab>(readPersistedTab);
+  // Consume the one-shot deep-link key so a section gear only steers this one
+  // open, never the persisted default for future Settings-button clicks.
+  useEffect(() => {
+    try { sessionStorage.removeItem('settings-deep-link-tab'); } catch { /* ignore */ }
+  }, []);
   const [mobileShowContent, setMobileShowContent] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [pendingHighlight, setPendingHighlight] = useState<{ tab: Tab; label: string; pluginId?: string } | null>(null);
@@ -371,6 +387,12 @@ export default function SettingsPage() {
   const sidebarAppsList = useSettingsStore((s) => s.sidebarApps);
   const proInterface = useSettingsStore((s) => s.proInterface);
 
+  // When set, the settings panel is scoped to a shared/group account: a reduced
+  // tab list and a "Managing: <name>" header. null = the user's own account.
+  const managedAccountId = useManagedAccountStore((s) => s.managedAccountId);
+  const managedAccount = useManagedAccountStore((s) => s.managedAccount);
+  const clearManagedAccount = useManagedAccountStore((s) => s.clear);
+
   // Build a per-tab haystack for fulltext search and a list of sub-results
   // (individual settings) per tab. Sub-results come from translation entries
   // that have a `label`/`title` field, plus dynamic content (installed
@@ -474,6 +496,10 @@ export default function SettingsPage() {
     return () => window.removeEventListener('settings-tab-change', handler);
   }, []);
 
+  // Leaving the settings panel drops any shared-account scope so it never
+  // leaks into the next visit or another session.
+  useEffect(() => () => clearManagedAccount(), [clearManagedAccount]);
+
   useEffect(() => {
     if (initialCheckDone && !isAuthenticated && !authLoading) {
       try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
@@ -582,6 +608,7 @@ export default function SettingsPage() {
     // Appearance
     { id: 'appearance', label: t('tabs.appearance'), icon: tabIcons.appearance, group: 'appearance' },
     { id: 'layout', label: t('tabs.layout'), icon: tabIcons.layout, group: 'appearance' },
+    ...(isFeatureEnabled('themesEnabled') ? [{ id: 'themes' as Tab, label: 'Themes', icon: tabIcons.themes, group: 'appearance' as TabGroup }] : []),
 
     // Mail
     { id: 'reading', label: t('tabs.reading'), icon: tabIcons.reading, group: 'mail' },
@@ -600,24 +627,39 @@ export default function SettingsPage() {
     { id: 'content_senders', label: t('tabs.content_senders'), icon: tabIcons.content_senders, group: 'privacy' },
 
     // Apps
-    ...(supportsCalendar ? [{ id: 'calendar' as Tab, label: t('tabs.calendar'), icon: tabIcons.calendar, group: 'apps' as TabGroup }] : []),
+    ...(supportsCalendar && isFeatureEnabled('calendarEnabled') ? [{ id: 'calendar' as Tab, label: t('tabs.calendar'), icon: tabIcons.calendar, group: 'apps' as TabGroup }] : []),
     ...(isFeatureEnabled('contactsEnabled') ? [{ id: 'contacts' as Tab, label: t('tabs.contacts'), icon: tabIcons.contacts, group: 'apps' as TabGroup }] : []),
     ...(supportsFiles && isFeatureEnabled('filesEnabled') ? [{ id: 'files' as Tab, label: t('tabs.files'), icon: tabIcons.files, group: 'apps' as TabGroup }] : []),
     ...(isFeatureEnabled('sidebarAppsEnabled') ? [{ id: 'sidebar_apps' as Tab, label: t('tabs.sidebar_apps'), icon: tabIcons.sidebar_apps, group: 'apps' as TabGroup }] : []),
 
     // Advanced
     { id: 'about_data', label: t('tabs.about_data'), icon: tabIcons.about_data, group: 'advanced' },
-    ...(isFeatureEnabled('themesEnabled') ? [{ id: 'themes' as Tab, label: 'Themes', icon: tabIcons.themes, group: 'advanced' as TabGroup }] : []),
     ...(isFeatureEnabled('pluginsEnabled') ? [{ id: 'plugins' as Tab, label: 'Plugins', icon: tabIcons.plugins, group: 'advanced' as TabGroup }] : []),
     ...(isFeatureEnabled('debugModeEnabled') ? [{ id: 'debug' as Tab, label: t('tabs.debug'), icon: tabIcons.debug, group: 'advanced' as TabGroup }] : []),
   ];
 
+  // In scoped (shared-account) mode, restrict to the account-relevant tabs the
+  // account actually advertises. Folders is intentionally excluded (mailbox CRUD
+  // is hardwired to the active account). Gated on both the per-account
+  // capability and the session-level support/feature flags.
+  const scopedTabIds: Tab[] = managedAccount
+    ? ([
+        managedAccount.capabilities.sieve && supportsSieve ? 'filters' : null,
+        managedAccount.capabilities.mail && supportsVacation ? 'vacation' : null,
+        managedAccount.capabilities.calendars && supportsCalendar && isFeatureEnabled('calendarEnabled') ? 'calendar' : null,
+        managedAccount.capabilities.contacts && isFeatureEnabled('contactsEnabled') ? 'contacts' : null,
+      ].filter(Boolean) as Tab[])
+    : [];
+  const visibleTabs = managedAccountId
+    ? tabs.filter((tab) => scopedTabIds.includes(tab.id))
+    : tabs;
+
   // Group tabs by category
   const groupedTabs = tabGroupOrder
     .map((group) => ({
       group,
       label: t(`tab_groups.${group}`),
-      items: tabs.filter((tab) => tab.group === group),
+      items: visibleTabs.filter((tab) => tab.group === group),
     }))
     .filter((g) => g.items.length > 0);
 
@@ -645,9 +687,13 @@ export default function SettingsPage() {
         .filter((g) => g.items.length > 0)
     : groupedTabs;
 
-  // If active tab is not in the visible list (e.g., feature disabled), fall back.
+  // If active tab is not in the visible list (e.g., feature disabled, or scoped
-  const isActiveVisible = tabs.some((tab) => tab.id === activeTab);
+  // mode hides it), fall back. In scoped mode fall back to the first scoped tab;
-  const effectiveActiveTab: Tab = isActiveVisible ? activeTab : 'appearance';
+  // otherwise the usual 'appearance' default.
+  const isActiveVisible = visibleTabs.some((tab) => tab.id === activeTab);
+  const effectiveActiveTab: Tab = isActiveVisible
+    ? activeTab
+    : (managedAccountId ? (visibleTabs[0]?.id ?? 'appearance') : 'appearance');
 
   const handleTabSelect = (tabId: Tab) => {
     setActiveTab(tabId);
@@ -662,10 +708,26 @@ export default function SettingsPage() {
     setPendingHighlight({ tab: tabId, label: sub.label, pluginId: sub.pluginId });
   };
 
-  const activeTabLabel = tabs.find((tab) => tab.id === effectiveActiveTab)?.label ?? '';
+  const activeTabLabel = visibleTabs.find((tab) => tab.id === effectiveActiveTab)?.label ?? '';
 
   const renderTabContent = () => (
     <>
+      {managedAccountId && managedAccount && (
+        <button
+          type="button"
+          onClick={() => {
+            clearManagedAccount();
+            handleTabSelect('account');
+          }}
+          className="flex items-center gap-2 w-full mb-4 px-3 py-2 rounded-md border border-border bg-muted/40 hover:bg-muted text-left transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+          <span className="text-sm text-muted-foreground">{t('scoped.back')}</span>
+          <span className="ml-auto text-sm font-medium truncate">
+            {t('scoped.managing', { name: managedAccount.name })}
+          </span>
+        </button>
+      )}
       {effectiveActiveTab === 'account' && <AccountSettings />}
       {effectiveActiveTab === 'language' && <LanguageSettings />}
       {effectiveActiveTab === 'notifications' && <NotificationSettings />}
@@ -683,8 +745,16 @@ export default function SettingsPage() {
       {effectiveActiveTab === 'security' && <AccountSecuritySettings />}
       {effectiveActiveTab === 'encryption' && <SmimeSettings />}
       {effectiveActiveTab === 'content_senders' && <ContentSendersSettings />}
-      {effectiveActiveTab === 'calendar' && <><CalendarSettings /><div className="mt-8"><CalendarManagementSettings /></div></>}
+      {effectiveActiveTab === 'calendar' && (
-      {effectiveActiveTab === 'contacts' && <><ContactsSettings /><div className="mt-8"><AddressBookManagementSettings /></div></>}
+        managedAccountId
+          ? <CalendarManagementSettings />
+          : <><CalendarSettings /><div className="mt-8"><CalendarManagementSettings /></div></>
+      )}
+      {effectiveActiveTab === 'contacts' && (
+        managedAccountId
+          ? <AddressBookManagementSettings />
+          : <><ContactsSettings /><div className="mt-8"><AddressBookManagementSettings /></div></>
+      )}
       {effectiveActiveTab === 'files' && <FilesSettingsComponent />}
       {effectiveActiveTab === 'protocol_handlers' && <ProtocolHandlerSettings supportsCalendar={supportsCalendar} />}
       {effectiveActiveTab === 'sidebar_apps' && <SidebarAppsSettings />}
@@ -933,7 +1003,7 @@ export default function SettingsPage() {
                   return (
                     <div key={tab.id}>
                       <button
-                        onClick={() => setActiveTab(tab.id)}
+                        onClick={() => handleTabSelect(tab.id)}
                         className={cn(
                           'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
                           effectiveActiveTab === tab.id

app/(main)/admin/_tabs/branding.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Save, Loader2, RotateCcw, ImageIcon, Upload, Trash2, Globe, Plus, X } from 'lucide-react';
-import { apiFetch } from '@/lib/browser-navigation';
+import { apiFetch, withBasePath } from '@/lib/browser-navigation';
 import {
   BRANDING_OVERRIDE_KEYS,
   parseDomainBranding,
@@ -33,6 +33,8 @@ const TEXT_FIELDS = [
 
 const PWA_IMAGE_FIELDS = [
   { key: 'pwaIconUrl', label: 'PWA Icon', accept: '.svg,.png,.jpg,.webp' },
+  { key: 'pwaScreenshotMobileUrl', label: 'PWA Screenshot (Mobile)', accept: '.png,.jpg,.webp' },
+  { key: 'pwaScreenshotDesktopUrl', label: 'PWA Screenshot (Desktop)', accept: '.png,.jpg,.webp' },
 ] as const;
 
 const PWA_TEXT_FIELDS = [
@@ -528,7 +530,7 @@ export function BrandingTab() {
                   <ImageIcon className="w-3.5 h-3.5 text-muted-foreground" />
                   <div className="h-8 w-auto bg-muted rounded flex items-center justify-center px-2">
                     <img
-                      src={currentValue(field.key)}
+                      src={withBasePath(currentValue(field.key))}
                       alt={field.label}
                       className="max-h-6 max-w-[200px] object-contain"
                       onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
@@ -606,7 +608,7 @@ export function BrandingTab() {
                   <ImageIcon className="w-3.5 h-3.5 text-muted-foreground" />
                   <div className="h-8 w-auto bg-muted rounded flex items-center justify-center px-2">
                     <img
-                      src={currentValue(field.key)}
+                      src={withBasePath(currentValue(field.key))}
                       alt={field.label}
                       className="max-h-6 max-w-[200px] object-contain"
                       onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}

app/(main)/admin/_tabs/dashboard.tsx

@@ -32,7 +32,6 @@ export function DashboardTab() {
   const [themeCount, setThemeCount] = useState(0);
   const [policyRuleCount, setPolicyRuleCount] = useState(0);
   const [accountCounts, setAccountCounts] = useState<{ total: number; active7d: number } | null>(null);
-  const [jmapHealth, setJmapHealth] = useState<'unknown' | 'ok' | 'error'>('unknown');
 
   useEffect(() => {
     fetchDashboardData();
@@ -82,15 +81,6 @@ export function DashboardTab() {
       }
     }
 
-    if (configData?.jmapServerUrl) {
-      try {
-        const jmapRes = await apiFetch('/api/config');
-        setJmapHealth(jmapRes.ok ? 'ok' : 'error');
-      } catch {
-        setJmapHealth('error');
-      }
-    }
-
     const w: string[] = [];
     if (adminConfigRes.ok) {
       const sources = await adminConfigRes.json();
@@ -128,16 +118,6 @@ export function DashboardTab() {
         <SettingItem label="JMAP Server" description={jmapUrl !== '-' ? jmapUrl : undefined}>
           <span className="text-sm text-foreground">{jmapHostname}</span>
         </SettingItem>
-        <SettingItem label="JMAP Connection">
-          <span className={`inline-flex items-center gap-1.5 text-sm font-medium ${
-            jmapHealth === 'ok' ? 'text-green-600 dark:text-green-400' : jmapHealth === 'error' ? 'text-red-600 dark:text-red-400' : 'text-muted-foreground'
-          }`}>
-            <span className={`w-2 h-2 rounded-full ${
-              jmapHealth === 'ok' ? 'bg-green-500' : jmapHealth === 'error' ? 'bg-red-500' : 'bg-muted-foreground/40'
-            }`} />
-            {jmapHealth === 'ok' ? 'Connected' : jmapHealth === 'error' ? 'Error' : 'Unknown'}
-          </span>
-        </SettingItem>
         <SettingItem label="Last Login">
           <span className="text-sm text-foreground">
             {status?.lastLogin ? new Date(status.lastLogin).toLocaleString() : 'Never'}

app/(main)/admin/_tabs/policy.tsx

@@ -13,6 +13,7 @@ const FEATURE_GATE_LABELS: Partial<Record<keyof FeatureGates, { label: string; d
   settingsExportEnabled: { label: 'Settings Export/Import', description: 'Allow users to export and import settings JSON' },
   customKeywordsEnabled: { label: 'Custom Keywords', description: 'Allow user-created labels and tags' },
   templatesEnabled: { label: 'Email Templates', description: 'Allow email template creation and library' },
+  calendarEnabled: { label: 'Calendar', description: 'Enable calendar features and views' },
   calendarTasksEnabled: { label: 'Calendar Tasks', description: 'Show task panel in calendar view' },
   contactsEnabled: { label: 'Contacts', description: 'Enable contacts/address book features' },
   smimeEnabled: { label: 'S/MIME', description: 'Enable certificate management and email signing' },
@@ -21,6 +22,10 @@ const FEATURE_GATE_LABELS: Partial<Record<keyof FeatureGates, { label: string; d
   folderIconsEnabled: { label: 'Folder Icons', description: 'Allow custom folder icon picker' },
   hoverActionsConfigEnabled: { label: 'Hover Actions Config', description: 'Allow users to customize email hover actions' },
   filesEnabled: { label: 'Files (WebDAV)', description: 'Enable file storage via WebDAV. WARNING: Large uploads can cause Stalwart/RocksDB instability. Not recommended for production.' },
+  allMailViewEnabled: { label: 'All Mail View', description: 'Show a virtual "All Mail" folder that merges messages from across an account’s folders into one list. Users choose which folders are included. Requires the per-user toggle in Settings → Appearance.' },
+  crossUnreadViewEnabled: { label: 'All Accounts: Unread', description: 'Allow an "All unread" entry in the All accounts section that lists unread mail across every account (incl. shared folders), spanning all folders except junk, sent, archive, trash and drafts. Requires the matching per-user toggle in Settings → Appearance.' },
+  crossStarredViewEnabled: { label: 'All Accounts: Starred', description: 'Allow an "All starred" entry in the All accounts section that lists flagged/starred mail across every account (incl. shared folders), spanning all folders except junk, sent, archive, trash and drafts. Requires the matching per-user toggle in Settings → Appearance.' },
+  crossAllViewEnabled: { label: 'All Accounts: All Mail', description: 'Allow an "All mail" entry in the All accounts section that lists all mail across every account (incl. shared folders), spanning all folders except junk, sent, archive, trash and drafts. Requires the matching per-user toggle in Settings → Appearance.' },
 };
 
 const RESTRICTABLE_SETTINGS = [

app/(main)/admin/_tabs/settings.tsx

@@ -125,6 +125,7 @@ export function SettingsTab() {
         )}
         <ToggleSetting label="Stalwart Features" description="Enable Stalwart Mail Server-specific features" configKey="stalwartFeaturesEnabled" value={currentValue('stalwartFeaturesEnabled') as boolean} source={config.stalwartFeaturesEnabled?.source} onChange={handleChange} onRevert={handleRevert} />
         <ToggleSetting label="Demo Mode" description="Enable demo mode with sample data" configKey="demoMode" value={currentValue('demoMode') as boolean} source={config.demoMode?.source} onChange={handleChange} onRevert={handleRevert} />
+        <ToggleSetting label="Search Engine Indexing" description="Allow search engines to index this webmail. Off (the default) sends noindex/nofollow in the page head, recommended for private deployments." configKey="searchEngineIndexing" value={currentValue('searchEngineIndexing') as boolean} source={config.searchEngineIndexing?.source} onChange={handleChange} onRevert={handleRevert} />
       </SettingsSection>
 
       <SettingsSection title="JMAP Servers (multi-server)">

app/(main)/admin/_tabs/telemetry.tsx

@@ -118,9 +118,10 @@ export function TelemetryTab() {
       <header className="space-y-2">
         <h1 className="text-2xl font-semibold">Anonymous Usage Stats</h1>
         <p className="text-sm text-muted-foreground">
-          Bulwark sends one anonymous heartbeat per day so we can see how many instances are
+          Bulwark can send one anonymous heartbeat per day so we can see how many instances are
-          running, on what platforms, and which features they use. <strong>Enabled by default</strong>;
+          running, on what platforms, and which features they use. It&apos;s <strong>off by
-          one click below disables it. No email addresses, no hostnames, no IPs are sent.{' '}
+          default</strong>; one click below enables it and helps us make the product better. No
+          email addresses, no hostnames, no IPs are sent.{' '}
           <a
             href="https://bulwarkmail.org/docs/legal/privacy/telemetry"
             target="_blank"
@@ -138,8 +139,8 @@ export function TelemetryTab() {
             <div className="font-medium">Status</div>
             <div className="text-sm text-muted-foreground">
               {status.consent === 'pending' && 'Initialising - no heartbeats sent yet.'}
-              {status.consent === 'on' && 'Heartbeats are enabled (default).'}
+              {status.consent === 'on' && 'Heartbeats are enabled. Thanks for helping us improve!'}
-              {status.consent === 'off' && 'Heartbeats are off.'}
+              {status.consent === 'off' && 'Heartbeats are off (default).'}
               {envOverridden && (
                 <> Locked by <code>BULWARK_TELEMETRY</code> env var.</>
               )}

app/(main)/layout.tsx

@@ -1,13 +1,25 @@
 import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import { headers } from "next/headers";
-import { getLocale } from "next-intl/server";
+import { getLocale, getTranslations } from "next-intl/server";
-import { PWAInstallPrompt } from "@/components/pwa-install-prompt";
 import { ServiceWorkerRegistration } from "@/components/service-worker-registration";
 import { configManager } from "@/lib/admin/config-manager";
 import { withBasePath } from "@/lib/browser-navigation";
+import { locales } from "@/i18n/routing";
 import "../globals.css";
 
+// This layout renders <html> and sits ABOVE the [locale] segment, so
+// next-intl's getLocale() returns the default locale here - emitting
+// <html lang="en"> on e.g. /de pages, which makes browsers offer to
+// "translate this page". Recover the active locale from the request pathname
+// (exposed by proxy.ts as x-pathname), falling back to getLocale() (cookie /
+// Accept-Language) when the path carries no locale segment.
+async function resolveRequestLocale(): Promise<string> {
+  const pathname = (await headers()).get("x-pathname") || "";
+  const seg = pathname.split("/").find((s) => (locales as readonly string[]).includes(s));
+  return seg ?? (await getLocale());
+}
+
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
@@ -27,10 +39,21 @@ export const viewport: Viewport = {
 export async function generateMetadata(): Promise<Metadata> {
   await configManager.ensureLoaded();
   const faviconUrl = configManager.get<string>("faviconUrl", "/branding/Bulwark_Favicon.svg");
+  // Localize the <head> description to match the UI language; a hardcoded
+  // English description is another signal that makes Chrome offer to
+  // "translate this page". Resolve the locale from the request path, since this
+  // layout is above the [locale] segment (see resolveRequestLocale).
+  const locale = await resolveRequestLocale();
+  const t = await getTranslations({ locale });
 
   return {
     title: process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || "Webmail",
-    description: "Minimalist webmail client using JMAP protocol",
+    description: t("meta_description"),
+    // A private webmail should not be indexed by search engines. This is opt-in
+    // via Settings -> General; the default (false) emits noindex/nofollow.
+    robots: configManager.get<boolean>("searchEngineIndexing", false)
+      ? { index: true, follow: true }
+      : { index: false, follow: false },
     appleWebApp: {
       capable: true,
       statusBarStyle: "black-translucent",
@@ -48,7 +71,7 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const locale = await getLocale();
+  const locale = await resolveRequestLocale();
   const nonce = (await headers()).get("x-nonce") ?? "";
   const parentOrigin = process.env.NEXT_PUBLIC_PARENT_ORIGIN || "";
 
@@ -92,7 +115,6 @@ export default async function RootLayout({
       >
         <ServiceWorkerRegistration />
         {children}
-        <PWAInstallPrompt />
       </body>
     </html>
   );

app/(main)/setup/page.tsx

@@ -38,6 +38,7 @@ interface WizardConfig {
   // Security
   sessionSecret: string;
   settingsSyncEnabled: boolean;
+  telemetryEnabled: boolean;
   // Logging
   logFormat: 'text' | 'json';
   logLevel: 'error' | 'warn' | 'info' | 'debug';
@@ -66,6 +67,7 @@ const EMPTY_CONFIG: WizardConfig = {
   oauthIssuerUrl: '',
   sessionSecret: '',
   settingsSyncEnabled: true,
+  telemetryEnabled: false,
   logFormat: 'text',
   logLevel: 'info',
   faviconUrl: '',
@@ -1002,8 +1004,11 @@ function SecurityStep({ config, setConfig, onNext, onBack }: Pick<StepProps, 'co
     e.preventDefault();
     setSubmitting(true);
     try {
-      const values: Partial<WizardConfig> = {
+      // telemetryConsent is persisted to the telemetry state file by the API,
+      // not to admin config - see app/api/setup/step/route.ts.
+      const values: Record<string, unknown> = {
         settingsSyncEnabled: config.settingsSyncEnabled,
+        telemetryConsent: config.telemetryEnabled ? 'on' : 'off',
       };
       if (config.sessionSecret) values.sessionSecret = config.sessionSecret;
       await onNext('security', values);
@@ -1068,6 +1073,15 @@ function SecurityStep({ config, setConfig, onNext, onBack }: Pick<StepProps, 'co
         hint="Stores user preferences server-side, encrypted with the session secret."
         disabled={!config.sessionSecret}
       />
+
+      <div className="rounded-md border border-border bg-muted/20 p-3">
+        <Toggle
+          checked={config.telemetryEnabled}
+          onChange={(v) => setConfig({ ...config, telemetryEnabled: v })}
+          label="Send anonymous usage stats to help improve Bulwark"
+          hint="Off by default. One anonymous heartbeat per day with version, platform, and which features are enabled - never email addresses, hostnames, or IPs. You can change this anytime in admin settings."
+        />
+      </div>
       <Footer>
         <SecondaryButton onClick={onBack}>Back</SecondaryButton>
         <PrimaryButton type="submit" disabled={submitting}>
@@ -1480,6 +1494,7 @@ function ReviewStep({ config, onBack, onFinish }: { config: WizardConfig; onBack
                   : 'Off'
             }
           />
+          <SummaryRow label="Anonymous telemetry" value={config.telemetryEnabled ? 'On' : 'Off'} />
         </SummaryGroup>
 
         <SummaryGroup icon={<FileText className="w-4 h-4" />} title="Logging">

app/(sandbox)/layout.tsx

@@ -1,17 +1,14 @@
 import type { Metadata } from 'next';
 import type { ReactNode } from 'react';
-import { Geist, Geist_Mono } from 'next/font/google';
-import '../globals.css';
 
-const geistSans = Geist({
+// The plugin sandbox iframe runs with an opaque origin (the `sandbox`
-  variable: '--font-geist-sans',
+// attribute in production excludes `allow-same-origin` for isolation). Any
-  subsets: ['latin'],
+// asset request from this layout - bundled fonts, globals.css, etc. - is then
-});
+// cross-origin from the "null" origin to the host origin and gets blocked
-
+// (fonts in particular require CORS). So this layout is intentionally minimal:
-const geistMono = Geist_Mono({
+// no font imports, no CSS imports. Plugins ship their own styles, and both the
-  variable: '--font-geist-mono',
+// plugin bundle and all host API calls travel over the postMessage RPC bridge,
-  subsets: ['latin'],
+// so the sandbox never fetches same-origin assets itself.
-});
 
 export const metadata: Metadata = {
   title: 'Plugin sandbox',
@@ -21,10 +18,7 @@ export const metadata: Metadata = {
 export default function PluginSandboxLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
-      <body
+      <body style={{ margin: 0, padding: 0, background: 'transparent' }}>
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-        style={{ margin: 0, padding: 0, background: 'transparent' }}
-      >
         {children}
       </body>
     </html>

app/api/admin/branding/route.ts

@@ -26,14 +26,18 @@ const ALLOWED_MIME_TYPES = new Set([
   'image/vnd.microsoft.icon',
 ]);
 
+type UploadSlot = BrandingOverrideKey;
+
 /** Slots that correspond to branding config keys */
-const VALID_SLOTS = new Set<BrandingOverrideKey>([
+const VALID_SLOTS = new Set<UploadSlot>([
   'faviconUrl',
   'pwaIconUrl',
   'appLogoLightUrl',
   'appLogoDarkUrl',
   'loginLogoLightUrl',
   'loginLogoDarkUrl',
+  'pwaScreenshotMobileUrl',
+  'pwaScreenshotDesktopUrl',
 ]);
 
 const EXT_BY_MIME: Record<string, string> = {
@@ -131,7 +135,7 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: 'Missing file or slot' }, { status: 400 });
     }
 
-    if (!VALID_SLOTS.has(slot as BrandingOverrideKey)) {
+    if (!VALID_SLOTS.has(slot as UploadSlot)) {
       return NextResponse.json({ error: `Invalid slot: ${slot}` }, { status: 400 });
     }
 
@@ -226,7 +230,7 @@ export async function DELETE(request: NextRequest) {
     const slot = body.slot;
     const rawHost = body.host ?? '';
 
-    if (!slot || !VALID_SLOTS.has(slot as BrandingOverrideKey)) {
+    if (!slot || !VALID_SLOTS.has(slot as UploadSlot)) {
       return NextResponse.json({ error: 'Invalid or missing slot' }, { status: 400 });
     }
 

app/api/admin/marketplace/route.ts

@@ -19,7 +19,7 @@ import {
   invalidateFrameOriginsCache,
 } from '@/lib/admin/csp-frame-origins';
 import JSZip from 'jszip';
-import { MAX_PLUGIN_SIZE, MAX_THEME_SIZE, ALL_PERMISSIONS, ALLOWED_PLUGIN_FILES } from '@/lib/plugin-types';
+import { MAX_PLUGIN_SIZE, MAX_THEME_SIZE, ALL_PERMISSIONS } from '@/lib/plugin-types';
 import { sanitizeThemeCSS, validateThemeCSSSafety } from '@/lib/theme-loader';
 import { configManager } from '@/lib/admin/config-manager';
 

app/api/admin/plugins/route.ts

@@ -192,6 +192,9 @@ export async function POST(request: NextRequest) {
       ...(manifest.settingsSchema && typeof manifest.settingsSchema === 'object'
         ? { settingsSchema: manifest.settingsSchema as ServerPlugin['settingsSchema'] }
         : {}),
+      ...(manifest.locales && typeof manifest.locales === 'object'
+        ? { locales: manifest.locales as ServerPlugin['locales'] }
+        : {}),
       ...(declaredFrameOrigins.length > 0
         ? { frameOrigins: declaredFrameOrigins }
         : {}),

app/api/auth/oauth/metadata/route.ts

@@ -0,0 +1,53 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { logger } from '@/lib/logger';
+import { configManager } from '@/lib/admin/config-manager';
+import { getMetadata, getRequiredConfig } from '@/lib/oauth/token-exchange';
+
+/**
+ * Same-origin OAuth metadata (discovery) proxy.
+ *
+ * The login page needs the authorization_endpoint to build the PKCE authorize
+ * URL in the browser. Discovering it directly from the browser means a
+ * cross-origin fetch to the IdP's /.well-known/* documents, which is subject
+ * to CORS: providers like Authentik serve those documents without an
+ * Access-Control-Allow-Origin header, so the browser blocks the response and
+ * discovery fails (issue #382). Performing discovery here - server to server,
+ * where CORS does not apply - and handing the result back as a same-origin
+ * response sidesteps the problem entirely.
+ *
+ * The discovery URL is resolved from admin config (via server_id), never from
+ * client input, so this cannot be abused as an open SSRF proxy. Endpoint URLs
+ * in the discovered document are still gated by the SSRF validator inside
+ * discoverOAuth. The returned fields are public well-known metadata.
+ */
+export async function GET(request: NextRequest) {
+  await configManager.ensureLoaded();
+  const serverId = request.nextUrl.searchParams.get('server_id');
+
+  let discoveryUrl: string;
+  try {
+    ({ discoveryUrl } = getRequiredConfig(serverId));
+  } catch {
+    // OAuth not configured for this server - surface as "no metadata" rather
+    // than a 500 so the login page just hides the SSO button.
+    return NextResponse.json({ error: 'OAuth not configured' }, { status: 404 });
+  }
+
+  try {
+    const metadata = await getMetadata(serverId);
+    if (!metadata?.authorization_endpoint || !metadata.token_endpoint) {
+      logger.warn('OAuth metadata discovery returned no usable endpoints', { discoveryUrl });
+      return NextResponse.json({ error: 'OAuth discovery failed' }, { status: 502 });
+    }
+    return NextResponse.json(metadata, {
+      // Mirror the in-process discovery cache TTL so repeated login-page loads
+      // hit the CDN/browser cache instead of re-running discovery.
+      headers: { 'Cache-Control': 'private, max-age=600' },
+    });
+  } catch (error) {
+    logger.error('OAuth metadata discovery error', {
+      error: error instanceof Error ? error.message : 'Unknown error',
+    });
+    return NextResponse.json({ error: 'OAuth discovery failed' }, { status: 502 });
+  }
+}

app/api/auth/pair/create/route.ts

@@ -0,0 +1,96 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { logger } from '@/lib/logger';
+import { refreshTokenCookieName, refreshTokenServerCookieName } from '@/lib/oauth/tokens';
+import { buildOAuthParams, getRequiredConfig, getTokenEndpoint } from '@/lib/oauth/token-exchange';
+import { getCookieOptions } from '@/lib/oauth/cookie-config';
+import { createPairing } from '@/lib/auth/pairing-store';
+import { hasValidPairReauth } from '@/lib/auth/pair-reauth';
+import { MAX_ACCOUNT_SLOTS } from '@/lib/account-utils';
+
+// Desktop side of the cross-device QR login. The caller must be a signed-in
+// webmail session (its refresh token lives in the httpOnly jmap_rt cookie). We
+// refresh that token to (a) prove the session is live and (b) obtain a fresh
+// access token to hand the phone, then stash the bundle under a one-time
+// pairing code. The desktop renders the returned code as a QR; the phone
+// redeems it at /api/auth/pair/redeem.
+//
+// Token sharing note: the phone receives the SAME refresh token as the desktop.
+// That is correct for OAuth servers (such as Stalwart in its default config)
+// that do not rotate refresh tokens on use. If the server rotates refresh
+// tokens, the two devices would fight over the latest token — such deployments
+// should disable rotation for this client or use a token-exchange grant.
+export async function POST(request: NextRequest) {
+  const cookieStore = await cookies();
+  try {
+    // Step-up gate: minting a pairing code grants new-device access, so it
+    // requires a recent fresh IdP re-authentication (see the reauth SSO flow).
+    // The client turns this 401 into a re-auth redirect, then retries.
+    if (!(await hasValidPairReauth())) {
+      return NextResponse.json({ error: 'reauth_required' }, { status: 401 });
+    }
+
+    const body = await request.json().catch(() => ({}));
+    const slot =
+      typeof body.slot === 'number' && body.slot >= 0 && body.slot < MAX_ACCOUNT_SLOTS
+        ? body.slot
+        : 0;
+
+    const cookieName = refreshTokenCookieName(slot);
+    const refreshToken = cookieStore.get(cookieName)?.value;
+    if (!refreshToken) {
+      return NextResponse.json({ error: 'Not signed in' }, { status: 401 });
+    }
+    const serverId = cookieStore.get(refreshTokenServerCookieName(slot))?.value || null;
+
+    const tokenEndpoint = await getTokenEndpoint(serverId);
+    const params = buildOAuthParams({ grant_type: 'refresh_token', refresh_token: refreshToken }, serverId);
+
+    const tokenResponse = await fetch(tokenEndpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: params.toString(),
+    });
+
+    if (!tokenResponse.ok) {
+      const errorText = await tokenResponse.text();
+      logger.warn('Pair create: refresh failed', { status: tokenResponse.status, error: errorText });
+      // Stale session — clear the dead cookie so the user is prompted to log
+      // back in, mirroring the token route's behaviour.
+      cookieStore.delete(cookieName);
+      cookieStore.delete(refreshTokenServerCookieName(slot));
+      return NextResponse.json({ error: 'Session expired' }, { status: 401 });
+    }
+
+    const tokens = await tokenResponse.json();
+    if (!tokens.access_token) {
+      logger.error('Pair create: refresh response missing access_token');
+      return NextResponse.json({ error: 'Invalid token response' }, { status: 502 });
+    }
+
+    // If the server rotated the refresh token, persist the new one back to the
+    // desktop's cookie so this very session keeps working. The phone will get
+    // the same (new) token below.
+    const effectiveRefreshToken = tokens.refresh_token || refreshToken;
+    if (tokens.refresh_token) {
+      cookieStore.set(cookieName, tokens.refresh_token, getCookieOptions());
+    }
+
+    const { clientId, serverUrl } = getRequiredConfig(serverId);
+
+    const { code, expiresIn } = createPairing({
+      accessToken: tokens.access_token,
+      refreshToken: effectiveRefreshToken,
+      expiresIn: tokens.expires_in,
+      tokenEndpoint,
+      clientId,
+      serverUrl,
+      serverId,
+    });
+
+    return NextResponse.json({ pairing_code: code, server_url: serverUrl, expires_in: expiresIn });
+  } catch (error) {
+    logger.error('Pair create error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/auth/pair/redeem/route.ts

@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { logger } from '@/lib/logger';
+import { consumePairing } from '@/lib/auth/pairing-store';
+
+// Phone side of the cross-device QR login. The app POSTs the pairing code it
+// scanned; we hand back the OAuth token bundle the desktop stashed at
+// /api/auth/pair/create. The code is the only credential required — it is
+// high-entropy, single-use, and expires within ~2 minutes — so this route is
+// intentionally unauthenticated (the scanning device has no webmail cookies).
+export async function POST(request: NextRequest) {
+  try {
+    const { pairing_code: pairingCode } = await request.json().catch(() => ({}));
+    if (!pairingCode || typeof pairingCode !== 'string') {
+      return NextResponse.json({ error: 'Missing pairing code' }, { status: 400 });
+    }
+
+    const tokens = consumePairing(pairingCode);
+    if (!tokens) {
+      // Unknown, expired, or already redeemed — do not distinguish.
+      return NextResponse.json({ error: 'Invalid or expired pairing code' }, { status: 400 });
+    }
+
+    return NextResponse.json({
+      flow: 'oauth',
+      server_url: tokens.serverUrl,
+      access_token: tokens.accessToken,
+      ...(tokens.refreshToken ? { refresh_token: tokens.refreshToken } : {}),
+      ...(typeof tokens.expiresIn === 'number' ? { expires_in: tokens.expiresIn } : {}),
+      token_endpoint: tokens.tokenEndpoint,
+      client_id: tokens.clientId,
+    });
+  } catch (error) {
+    logger.error('Pair redeem error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/auth/reauth/sso/complete/route.ts

@@ -0,0 +1,70 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { logger } from '@/lib/logger';
+import { decryptPayload } from '@/lib/auth/crypto';
+import { exchangeCodeForTokens } from '@/lib/oauth/token-exchange';
+import { setPairReauth } from '@/lib/auth/pair-reauth';
+
+// Completes the step-up re-authentication for device pairing. The user was sent
+// to the IdP with prompt=login (see /api/auth/sso/start with purpose=reauth);
+// here we verify the returned code against the pending state and exchange it to
+// confirm a fresh login actually happened, then set the short-lived pairing
+// re-auth proof cookie. We deliberately do NOT issue a login session or write
+// any refresh-token cookies — the user is already signed in; this only proves
+// recency for the pairing action.
+
+const SSO_PENDING_COOKIE = 'sso_pending';
+const SSO_PENDING_MAX_AGE_MS = 5 * 60 * 1000;
+
+export async function POST(request: NextRequest) {
+  const cookieStore = await cookies();
+  try {
+    const { code, state } = await request.json();
+    if (!code || !state) {
+      return NextResponse.json({ error: 'Missing code or state' }, { status: 400 });
+    }
+
+    const pendingCookie = cookieStore.get(SSO_PENDING_COOKIE)?.value;
+    if (!pendingCookie) {
+      return NextResponse.json({ error: 'No pending re-auth session' }, { status: 400 });
+    }
+
+    const pending = decryptPayload(pendingCookie);
+    cookieStore.delete(SSO_PENDING_COOKIE);
+    if (!pending) {
+      return NextResponse.json({ error: 'Invalid re-auth session' }, { status: 400 });
+    }
+
+    // Only honor pending sessions that were started for the reauth purpose, so
+    // a normal login code can't be redirected into setting a pairing proof.
+    if (pending.purpose !== 'reauth') {
+      return NextResponse.json({ error: 'Not a re-auth session' }, { status: 400 });
+    }
+    if (pending.state !== state) {
+      return NextResponse.json({ error: 'State mismatch' }, { status: 400 });
+    }
+    const createdAt = pending.created_at as number;
+    if (!createdAt || Date.now() - createdAt > SSO_PENDING_MAX_AGE_MS) {
+      return NextResponse.json({ error: 'Re-auth session expired' }, { status: 400 });
+    }
+
+    const codeVerifier = pending.code_verifier as string;
+    const redirectUri = pending.redirect_uri as string;
+    const pendingServerId = typeof pending.server_id === 'string' ? pending.server_id : null;
+    if (!codeVerifier || !redirectUri) {
+      return NextResponse.json({ error: 'Invalid re-auth session data' }, { status: 400 });
+    }
+
+    // A successful exchange proves the user just authenticated at the IdP (the
+    // freshness is enforced by prompt=login on the authorize request). We don't
+    // keep the resulting tokens.
+    await exchangeCodeForTokens(code, codeVerifier, redirectUri, pendingServerId);
+
+    await setPairReauth();
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    cookieStore.delete(SSO_PENDING_COOKIE);
+    logger.error('Reauth complete error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Re-authentication failed' }, { status: 401 });
+  }
+}

app/api/auth/sso/start/route.ts

@@ -8,6 +8,7 @@ import { discoverOAuth } from '@/lib/oauth/discovery';
 import { getOauthScopes } from '@/lib/oauth/tokens';
 import { getCookieOptions } from '@/lib/oauth/cookie-config';
 import { hasSessionSecret } from '@/lib/auth/session-secret';
+import { configManager } from '@/lib/admin/config-manager';
 
 const SSO_PENDING_COOKIE = 'sso_pending';
 const SSO_PENDING_MAX_AGE = 300; // 5 minutes
@@ -30,8 +31,14 @@ export async function POST(request: NextRequest) {
       server_id: bodyServerId,
       mobile_redirect_uri: rawMobileRedirectUri,
       mobile_state: rawMobileState,
+      purpose: rawPurpose,
     } = await request.json();
 
+    // `reauth` drives the step-up flow for device pairing: it forces a fresh
+    // IdP login (prompt=login) and the /reauth/sso/complete handler sets the
+    // short-lived pairing re-auth proof instead of logging the user in again.
+    const isReauth = rawPurpose === 'reauth';
+
     if (!redirect_uri || typeof redirect_uri !== 'string') {
       return NextResponse.json({ error: 'Missing redirect_uri' }, { status: 400 });
     }
@@ -85,6 +92,7 @@ export async function POST(request: NextRequest) {
       ...(serverId ? { server_id: serverId } : {}),
       ...(mobileRedirectUri ? { mobile_redirect_uri: mobileRedirectUri } : {}),
       ...(mobileState ? { mobile_state: mobileState } : {}),
+      ...(isReauth ? { purpose: 'reauth' } : {}),
     };
 
     const encrypted = encryptPayload(pendingData);
@@ -95,8 +103,12 @@ export async function POST(request: NextRequest) {
       maxAge: SSO_PENDING_MAX_AGE,
     });
 
-    // Build authorize URL
+    // Build authorize URL. OAUTH_AUTHORIZE_URL, when set, overrides only the
-    const authUrl = new URL(metadata.authorization_endpoint);
+    // user-facing authorize endpoint (e.g. a per-brand login host). Discovery,
+    // token exchange and refresh keep using the canonical discovered endpoints.
+    const authorizeOverride =
+      configManager.get<string>('oauthAuthorizeUrl', '') || process.env.OAUTH_AUTHORIZE_URL;
+    const authUrl = new URL(authorizeOverride?.trim() || metadata.authorization_endpoint);
     authUrl.searchParams.set('response_type', 'code');
     authUrl.searchParams.set('client_id', clientId);
     authUrl.searchParams.set('redirect_uri', redirect_uri);
@@ -109,6 +121,14 @@ export async function POST(request: NextRequest) {
       authUrl.searchParams.set('ui_locales', locale);
     }
 
+    // Force a fresh credential entry for step-up re-auth. prompt=login and
+    // max_age=0 both ask the IdP to re-authenticate even if it has an active
+    // session; honoring them depends on the IdP supporting these OIDC params.
+    if (isReauth) {
+      authUrl.searchParams.set('prompt', 'login');
+      authUrl.searchParams.set('max_age', '0');
+    }
+
     return NextResponse.json({
       authorize_url: authUrl.toString(),
       state,

app/api/calendar-agenda/route.ts

@@ -0,0 +1,334 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { logger } from '@/lib/logger';
+import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+import { normalizeCalendarEventLike } from '@/lib/calendar-event-normalization';
+import { expandRecurringEvents } from '@/lib/recurrence-expansion';
+import { parseISO } from 'date-fns';
+import type { CalendarEvent } from '@/lib/jmap/types';
+
+/**
+ * POST /api/calendar-agenda
+ *
+ * Sidecar for the "Calendar Agenda" plugin. Resolves the caller's calendar
+ * account from the stored Stalwart auth context, queries upcoming
+ * CalendarEvents over JMAP, expands recurring series server-side, and returns
+ * a slim, structured-cloneable agenda the plugin can render directly.
+ *
+ * Credentials never leave the server — the sandboxed plugin only ever sees
+ * the resulting agenda DTOs.
+ *
+ * Body: { days?: number (1-90, default 7), limit?: number (1-200, default 50) }
+ */
+
+const CALENDAR_CAP = 'urn:ietf:params:jmap:calendars';
+const PRINCIPALS_CAP = 'urn:ietf:params:jmap:principals';
+
+// Mirror of lib/jmap/client.ts CALENDAR_EVENT_PROPERTIES, trimmed to what the
+// agenda actually needs (start/recurrence/display fields).
+const EVENT_PROPERTIES = [
+  'id', '@type', 'uid', 'calendarIds', 'title', 'start', 'duration', 'timeZone',
+  'showWithoutTime', 'utcStart', 'utcEnd', 'status', 'freeBusyStatus', 'color',
+  'locations', 'recurrenceId', 'recurrenceIdTimeZone', 'recurrenceRule',
+  'recurrenceOverrides', 'excludedRecurrenceRule',
+] as const;
+
+interface JmapSession {
+  apiUrl?: string;
+  primaryAccounts?: Record<string, string>;
+  capabilities?: Record<string, unknown>;
+}
+
+interface AgendaEvent {
+  id: string;
+  uid: string | null;
+  title: string;
+  start: string;
+  end: string;
+  allDay: boolean;
+  status: string | null;
+  color: string | null;
+  location: string | null;
+  calendarId: string | null;
+}
+
+// Pure, server-safe equivalents of lib/calendar-utils' getEventStartDate /
+// getEventEndDate. We can't import that module here because it transitively
+// pulls in a "use client" calendar component (which throws at load on the
+// server). Logic mirrors the originals.
+function parseDurationMinutes(duration: string | undefined): number {
+  if (!duration) return 0;
+  let total = 0;
+  const week = duration.match(/(\d+)W/);
+  const day = duration.match(/(\d+)D/);
+  const hour = duration.match(/(\d+)H/);
+  const min = duration.match(/(\d+)M/);
+  if (week) total += parseInt(week[1], 10) * 7 * 24 * 60;
+  if (day) total += parseInt(day[1], 10) * 24 * 60;
+  if (hour) total += parseInt(hour[1], 10) * 60;
+  if (min) total += parseInt(min[1], 10);
+  return total;
+}
+
+function eventStart(event: Partial<CalendarEvent>): Date {
+  if (!event.showWithoutTime && event.utcStart) {
+    const utc = parseISO(event.utcStart);
+    if (!isNaN(utc.getTime())) return utc;
+  }
+  return parseISO(event.start as string);
+}
+
+function eventEnd(event: Partial<CalendarEvent>): Date {
+  if (!event.showWithoutTime && event.utcEnd) {
+    const utc = parseISO(event.utcEnd);
+    if (!isNaN(utc.getTime())) return utc;
+  }
+  const start = eventStart(event);
+  if (!event.duration) return start;
+  return new Date(start.getTime() + parseDurationMinutes(event.duration) * 60000);
+}
+
+function firstLocationName(event: Partial<CalendarEvent>): string | null {
+  const locations = event.locations;
+  if (!locations || typeof locations !== 'object') return null;
+  for (const loc of Object.values(locations)) {
+    const name = (loc as { name?: unknown })?.name;
+    if (typeof name === 'string' && name.trim()) return name.trim();
+  }
+  return null;
+}
+
+function firstCalendarId(event: Partial<CalendarEvent>): string | null {
+  const ids = event.calendarIds;
+  if (!ids || typeof ids !== 'object') return null;
+  const keys = Object.keys(ids);
+  return keys.length > 0 ? keys[0] : null;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) {
+      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    let body: { days?: unknown; limit?: unknown } = {};
+    try {
+      body = await request.json();
+    } catch {
+      /* empty body is fine */
+    }
+    const days = clampInt(body.days, 1, 90, 7);
+    const limit = clampInt(body.limit, 1, 200, 50);
+
+    // ── Resolve the calendar account from the JMAP session ──
+    // Hit Stalwart's canonical session endpoint on the SAME host as serverUrl.
+    // We deliberately avoid /.well-known/jmap: it 301s to the server's
+    // configured public hostname, which the host process may not be able to
+    // resolve (the browser client rewrites those URLs back to the origin for
+    // the same reason). Fall back to /.well-known/jmap for non-Stalwart servers.
+    const session = await fetchJmapSession(creds.serverUrl, creds.authHeader);
+    if (!session) {
+      return NextResponse.json({ error: 'JMAP session fetch failed' }, { status: 502 });
+    }
+    const accountId = session.primaryAccounts?.[CALENDAR_CAP];
+    if (!accountId) {
+      // No calendar account for this user — return an empty agenda, not an error.
+      return NextResponse.json({ events: [], generatedAt: new Date().toISOString() });
+    }
+
+    const using = ['urn:ietf:params:jmap:core', CALENDAR_CAP];
+    if (session.capabilities && PRINCIPALS_CAP in session.capabilities) {
+      using.push('urn:ietf:params:jmap:principals:owner');
+    }
+
+    // Send method calls to the same-origin JMAP endpoint the app's passthrough
+    // uses — never to session.apiUrl's (possibly unreachable) public host.
+    const apiUrl = `${creds.serverUrl}/jmap/`;
+
+    const now = new Date();
+    const horizon = new Date(now.getTime() + days * 24 * 60 * 60 * 1000);
+    // Expand from the start of today so all-day / already-running events still
+    // show in the agenda.
+    const windowStart = new Date(now);
+    windowStart.setHours(0, 0, 0, 0);
+
+    // ── 1) Query event IDs in range + load calendars (colours) ──
+    const queryReq = {
+      using,
+      methodCalls: [
+        [
+          'CalendarEvent/query',
+          {
+            accountId,
+            // Mirror the app's calendar store: an { after, before } window lets
+            // Stalwart evaluate recurrence so masters with occurrences in range
+            // are returned (a `before`-only filter can drop unbounded series).
+            filter: { after: windowStart.toISOString(), before: horizon.toISOString() },
+            limit: 1000,
+          },
+          '0',
+        ],
+        [
+          'Calendar/get',
+          { accountId, ids: null, properties: ['id', 'name', 'color'] },
+          'c',
+        ],
+      ],
+    };
+
+    const queryRes = await jmapPost(apiUrl, creds.authHeader, queryReq);
+    const queryResp = findResponse(queryRes, 'CalendarEvent/query', '0');
+    if (!queryResp) {
+      const err = findResponse(queryRes, 'error', '0');
+      return NextResponse.json(
+        { error: (err?.description as string) || 'CalendarEvent/query failed' },
+        { status: 502 },
+      );
+    }
+    const ids = (queryResp.ids as string[]) || [];
+
+    const calColors = new Map<string, { name: string; color: string | null }>();
+    const calResp = findResponse(queryRes, 'Calendar/get', 'c');
+    for (const cal of ((calResp?.list as Array<Record<string, unknown>>) || [])) {
+      if (typeof cal.id === 'string') {
+        calColors.set(cal.id, {
+          name: typeof cal.name === 'string' ? cal.name : '',
+          color: typeof cal.color === 'string' ? cal.color : null,
+        });
+      }
+    }
+
+    if (ids.length === 0) {
+      return NextResponse.json({ events: [], generatedAt: now.toISOString() });
+    }
+
+    // ── 2) Fetch full event objects (batched) ──
+    const raw: Array<Record<string, unknown>> = [];
+    const BATCH = 100;
+    for (let i = 0; i < ids.length; i += BATCH) {
+      const batch = ids.slice(i, i + BATCH);
+      const getRes = await jmapPost(apiUrl, creds.authHeader, {
+        using,
+        methodCalls: [
+          ['CalendarEvent/get', { accountId, ids: batch, properties: EVENT_PROPERTIES }, '0'],
+        ],
+      });
+      const getResp = findResponse(getRes, 'CalendarEvent/get', '0');
+      if (getResp?.list) raw.push(...(getResp.list as Array<Record<string, unknown>>));
+    }
+
+    // ── 3) Normalize + expand recurrences server-side ──
+    const normalized = raw
+      .map((e) => normalizeCalendarEventLike(e as Partial<CalendarEvent>))
+      .filter((e) => (e['@type'] ?? 'Event') === 'Event')
+      // Drop malformed events without a parseable start (would crash format()/
+      // parseISO downstream) — mirrors the calendar store guard (#316).
+      .filter((e) => typeof e.start === 'string' && e.start && !isNaN(parseISO(e.start).getTime())) as CalendarEvent[];
+
+    const expanded = expandRecurringEvents(
+      normalized,
+      windowStart.toISOString(),
+      horizon.toISOString(),
+    );
+
+    // ── 4) Keep ongoing/upcoming, sort, slice, map to DTOs ──
+    const agenda: AgendaEvent[] = expanded
+      .filter((e) => eventEnd(e).getTime() >= now.getTime())
+      .sort((a, b) => eventStart(a).getTime() - eventStart(b).getTime())
+      .slice(0, limit)
+      .map((e) => {
+        const calId = firstCalendarId(e);
+        const cal = calId ? calColors.get(calId) : undefined;
+        return {
+          id: String(e.id ?? ''),
+          uid: e.uid ?? null,
+          title: (e.title ?? '').trim() || '(no title)',
+          start: eventStart(e).toISOString(),
+          end: eventEnd(e).toISOString(),
+          allDay: !!e.showWithoutTime,
+          status: e.status ?? null,
+          color: e.color || cal?.color || null,
+          location: firstLocationName(e),
+          calendarId: calId,
+        };
+      });
+
+    return NextResponse.json({ events: agenda, generatedAt: now.toISOString() });
+  } catch (error) {
+    // `fetch failed` from undici is too generic to debug — the real reason
+    // (ENOTFOUND, ECONNREFUSED, self-signed TLS, …) lives on `error.cause`.
+    const err = error as Error & { cause?: { code?: string; message?: string } };
+    logger.error('Calendar agenda error', {
+      error: err?.message ?? 'Unknown',
+      causeCode: err?.cause?.code,
+      causeMessage: err?.cause?.message,
+    });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+function clampInt(value: unknown, min: number, max: number, fallback: number): number {
+  const n = typeof value === 'number' ? value : Number(value);
+  if (!Number.isFinite(n)) return fallback;
+  return Math.min(max, Math.max(min, Math.round(n)));
+}
+
+/**
+ * Fetch the JMAP session from the same host as `serverUrl`. Tries Stalwart's
+ * canonical /jmap/session first (no redirect), then /.well-known/jmap as a
+ * fallback for other servers. Returns null if neither yields a usable session.
+ */
+async function fetchJmapSession(
+  serverUrl: string,
+  authHeader: string,
+): Promise<JmapSession | null> {
+  const candidates = [`${serverUrl}/jmap/session`, `${serverUrl}/.well-known/jmap`];
+  for (const url of candidates) {
+    try {
+      const res = await fetch(url, {
+        method: 'GET',
+        headers: { Authorization: authHeader },
+        redirect: 'follow',
+      });
+      if (!res.ok) continue;
+      const session = (await res.json()) as JmapSession;
+      if (session && typeof session === 'object' && session.primaryAccounts) {
+        return session;
+      }
+    } catch {
+      // Try the next candidate (e.g. canonical path 404s on a non-Stalwart server).
+    }
+  }
+  return null;
+}
+
+async function jmapPost(
+  apiUrl: string,
+  authHeader: string,
+  payload: unknown,
+): Promise<unknown> {
+  const res = await fetch(apiUrl, {
+    method: 'POST',
+    headers: { Authorization: authHeader, 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok) {
+    throw new Error(`JMAP request failed (${res.status})`);
+  }
+  return res.json();
+}
+
+function findResponse(
+  res: unknown,
+  name: string,
+  callId: string,
+): Record<string, unknown> | null {
+  const responses = (res as { methodResponses?: unknown[] })?.methodResponses;
+  if (!Array.isArray(responses)) return null;
+  for (const entry of responses) {
+    if (Array.isArray(entry) && entry[0] === name && entry[2] === callId) {
+      return entry[1] as Record<string, unknown>;
+    }
+  }
+  return null;
+}

app/api/dev-jmap/[...path]/route.ts

@@ -121,9 +121,9 @@ const emails: MockEmail[] = [
   },
   {
     id: 'email-002', threadId: 'thread-002', mailboxIds: { 'mb-inbox': true }, keywords: { $seen: true, $flagged: true, '$label:blue': true }, size: 5100, receivedAt: daysAgo(1),
-    from: [{ name: 'Pierre Dubois', email: 'pierre@dubois.example' }],
+    from: [{ name: 'Dubois, Pierre', email: 'pierre@dubois.example' }],
     to: [{ name: 'Dev User', email: 'dev@localhost' }],
-    cc: [{ name: 'Karel de Vries', email: 'karel@devries.example' }],
+    cc: [{ name: 'de Vries, Karel', email: 'karel@devries.example' }],
     subject: 'Project Update - Q1 Review',
     preview: 'Salut team, I wanted to share the latest project numbers. We are on track to meet our targets for Q1.',
     hasAttachment: true,
@@ -723,7 +723,18 @@ const emails: MockEmail[] = [
 // Identities
 // ---------------------------------------------------------------------------
 
-const IDENTITIES = [
+type MockIdentity = {
+  id: string;
+  name: string;
+  email: string;
+  replyTo: Array<{ name?: string; email: string }> | null;
+  bcc: Array<{ name?: string; email: string }> | null;
+  textSignature: string | null;
+  htmlSignature: string | null;
+  mayDelete: boolean;
+};
+
+const IDENTITIES: MockIdentity[] = [
   {
     id: 'identity-001',
     name: 'Dev User',
@@ -1562,13 +1573,55 @@ function handleIdentityGet(_args: MethodArgs, callId: string): MethodResult {
 
 function handleIdentitySet(args: MethodArgs, callId: string): MethodResult {
   const created: Record<string, { id: string }> = {};
-  const create = args.create as Record<string, unknown> | undefined;
+  const updated: Record<string, null> = {};
+  const destroyed: string[] = [];
+
+  const create = args.create as Record<string, Record<string, unknown>> | undefined;
   if (create) {
-    for (const key of Object.keys(create)) {
+    for (const [key, data] of Object.entries(create)) {
-      created[key] = { id: `identity-new-${Date.now()}-${key}` };
+      const newId = `identity-${Date.now()}-${key}`;
+      IDENTITIES.push({
+        id: newId,
+        name: (data.name as string) || '',
+        email: (data.email as string) || '',
+        replyTo: (data.replyTo as MockIdentity['replyTo']) ?? null,
+        bcc: (data.bcc as MockIdentity['bcc']) ?? null,
+        textSignature: (data.textSignature as string | null) ?? null,
+        htmlSignature: (data.htmlSignature as string | null) ?? null,
+        mayDelete: true,
+      });
+      created[key] = { id: newId };
     }
   }
-  return ['Identity/set', { accountId: ACCOUNT_ID, oldState: nextState(), newState: nextState(), created, updated: null, destroyed: null }, callId];
+
+  const update = args.update as Record<string, Record<string, unknown>> | undefined;
+  if (update) {
+    for (const [id, changes] of Object.entries(update)) {
+      const identity = IDENTITIES.find((i) => i.id === id);
+      if (identity) {
+        // Email is immutable per the identity form, so it's never in `changes`.
+        if (changes.name !== undefined) identity.name = changes.name as string;
+        if (changes.replyTo !== undefined) identity.replyTo = changes.replyTo as MockIdentity['replyTo'];
+        if (changes.bcc !== undefined) identity.bcc = changes.bcc as MockIdentity['bcc'];
+        if (changes.textSignature !== undefined) identity.textSignature = changes.textSignature as string | null;
+        if (changes.htmlSignature !== undefined) identity.htmlSignature = changes.htmlSignature as string | null;
+        updated[id] = null;
+      }
+    }
+  }
+
+  const destroy = args.destroy as string[] | undefined;
+  if (destroy) {
+    for (const id of destroy) {
+      const idx = IDENTITIES.findIndex((i) => i.id === id);
+      if (idx !== -1) {
+        IDENTITIES.splice(idx, 1);
+        destroyed.push(id);
+      }
+    }
+  }
+
+  return ['Identity/set', { accountId: ACCOUNT_ID, oldState: nextState(), newState: nextState(), created, updated, destroyed, notCreated: null, notUpdated: null, notDestroyed: null }, callId];
 }
 
 function handleThreadGet(args: MethodArgs, callId: string): MethodResult {

app/api/favicon/route.ts

@@ -19,6 +19,20 @@ const negativeCache = new Map<string, NegativeCacheEntry>();
 const NEGATIVE_CACHE_TTL_MS = 24 * 60 * 60 * 1000; // 1 day
 const NEGATIVE_CACHE_MAX_SIZE = 2000;
 
+// 1x1 transparent PNG. Returned with HTTP 200 (instead of 404) when no
+// favicon exists for a domain, so the browser's <img> tag loads it cleanly
+// without spamming the DevTools console with red 404 errors. Avatar.tsx
+// checks `naturalWidth <= 1` in onLoad and falls back to initials.
+const TRANSPARENT_PNG = Buffer.from(
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgAAIAAAUAAen63NgAAAAASUVORK5CYII=',
+  'base64',
+);
+const MISSING_FAVICON_HEADERS = {
+  'Content-Type': 'image/png',
+  'Cache-Control': 'public, max-age=86400', // 1 day
+  'X-Bulwark-Favicon': 'missing',
+};
+
 // Strict domain validation to prevent SSRF
 const DOMAIN_RE = /^[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)+$/i;
 
@@ -434,10 +448,7 @@ export async function GET(request: NextRequest) {
   // Check negative cache (domains known to have no favicon)
   const neg = negativeCache.get(normalizedDomain);
   if (neg && Date.now() - neg.fetchedAt < NEGATIVE_CACHE_TTL_MS) {
-    return new NextResponse(null, {
+    return new NextResponse(TRANSPARENT_PNG, { headers: MISSING_FAVICON_HEADERS });
-      status: 404,
-      headers: { 'Cache-Control': 'public, max-age=86400' }, // 1 day
-    });
   }
 
   // Check cache
@@ -460,10 +471,7 @@ export async function GET(request: NextRequest) {
     if (!upstream.ok) {
       evictNegativeOldest();
       negativeCache.set(normalizedDomain, { fetchedAt: Date.now() });
-      return new NextResponse(null, {
+      return new NextResponse(TRANSPARENT_PNG, { headers: MISSING_FAVICON_HEADERS });
-        status: 404,
-        headers: { 'Cache-Control': 'public, max-age=86400' },
-      });
     }
 
     const contentType = upstream.headers.get('content-type') || 'image/x-icon';
@@ -473,10 +481,7 @@ export async function GET(request: NextRequest) {
     if (data.byteLength < 10) {
       evictNegativeOldest();
       negativeCache.set(normalizedDomain, { fetchedAt: Date.now() });
-      return new NextResponse(null, {
+      return new NextResponse(TRANSPARENT_PNG, { headers: MISSING_FAVICON_HEADERS });
-        status: 404,
-        headers: { 'Cache-Control': 'public, max-age=86400' },
-      });
     }
 
     // Cache the result

app/api/plugins/route.ts

@@ -57,6 +57,9 @@ export async function GET() {
       // Per-user settings schema, captured from the manifest at upload/load
       // time so the client can render the settings UI without re-parsing.
       settingsSchema: p.settingsSchema,
+      // Plugin-declared i18n tables, so the sandbox can localize plugin
+      // strings via api.i18n.t().
+      locales: p.locales,
     }));
 
     // Only serve enabled themes

app/api/pwa-screenshot/[variant]/route.ts

@@ -0,0 +1,104 @@
+import { NextRequest, NextResponse } from 'next/server';
+import sharp from 'sharp';
+import path from 'node:path';
+import { readFile } from 'node:fs/promises';
+import { configManager } from '@/lib/admin/config-manager';
+import { getConfigDir } from '@/lib/admin/paths';
+import {
+  matchDomainBranding,
+  parseDomainBranding,
+  pickRequestHost,
+} from '@/lib/admin/domain-branding';
+
+/**
+ * Variant → target output size + admin config key.
+ * Matches the sizes declared in app/manifest.ts so the rendered PNG fits
+ * the slot the manifest tells the browser about.
+ */
+const VARIANTS = {
+  mobile: { width: 540, height: 720, configKey: 'pwaScreenshotMobileUrl' as const },
+  desktop: { width: 1280, height: 720, configKey: 'pwaScreenshotDesktopUrl' as const },
+} as const;
+
+type Variant = keyof typeof VARIANTS;
+
+// Cache resized images keyed by (variant, source URL).
+const cache = new Map<string, Blob>();
+
+async function fetchSourceImage(iconUrl: string): Promise<Buffer> {
+  if (iconUrl.startsWith('http://') || iconUrl.startsWith('https://')) {
+    const res = await fetch(iconUrl);
+    if (!res.ok) throw new Error(`Failed to fetch PWA screenshot: ${res.status}`);
+    return Buffer.from(await res.arrayBuffer());
+  }
+
+  // Admin-uploaded branding asset: served from /api/admin/branding/<file>
+  // but stored on disk under getConfigDir()/branding/.
+  const ADMIN_BRANDING_PREFIX = '/api/admin/branding/';
+  if (iconUrl.startsWith(ADMIN_BRANDING_PREFIX)) {
+    const filename = path.basename(iconUrl.slice(ADMIN_BRANDING_PREFIX.length));
+    return readFile(path.join(getConfigDir(), 'branding', filename));
+  }
+
+  // Path relative to public/ directory
+  const publicPath = path.join(process.cwd(), 'public', iconUrl.replace(/^\//, ''));
+  return readFile(publicPath);
+}
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Promise<{ variant: string }> },
+) {
+  const { variant: variantParam } = await params;
+  if (!(variantParam in VARIANTS)) {
+    return new NextResponse('Invalid variant. Allowed: mobile, desktop', { status: 400 });
+  }
+  const { width, height, configKey } = VARIANTS[variantParam as Variant];
+
+  await configManager.ensureLoaded();
+  const host = pickRequestHost(req);
+  const domainOverrides = matchDomainBranding(
+    host,
+    parseDomainBranding(configManager.get<unknown>('domainBranding', [])),
+  );
+  const sources = configManager.getAllWithSources();
+  const sourceEntry = sources[configKey];
+  const screenshotUrl =
+    domainOverrides[configKey] ||
+    (sourceEntry?.source !== 'default' ? (sourceEntry?.value as string | undefined) : undefined);
+  if (!screenshotUrl) {
+    return new NextResponse('No PWA screenshot configured', { status: 404 });
+  }
+
+  const pngHeaders = {
+    'Content-Type': 'image/png',
+    'Cache-Control': 'public, max-age=86400',
+    Vary: 'Host, X-Forwarded-Host',
+  };
+  const cacheKey = `${variantParam}|${screenshotUrl}`;
+
+  try {
+    if (cache.has(cacheKey)) {
+      return new NextResponse(cache.get(cacheKey)!, { headers: pngHeaders });
+    }
+
+    const sourceBuffer = await fetchSourceImage(screenshotUrl);
+    // 'cover' fills the target box without letterboxing - screenshots benefit
+    // more from cropping than from a transparent frame around them. Users get
+    // a hint about the recommended aspect ratio in the admin UI.
+    const resized = await sharp(sourceBuffer)
+      .resize(width, height, { fit: 'cover', position: 'center' })
+      .png()
+      .toBuffer();
+
+    const ab = new ArrayBuffer(resized.byteLength);
+    new Uint8Array(ab).set(resized);
+    const blob = new Blob([ab], { type: 'image/png' });
+    cache.set(cacheKey, blob);
+
+    return new NextResponse(blob, { headers: pngHeaders });
+  } catch (err) {
+    console.error('Failed to generate PWA screenshot:', err);
+    return new NextResponse('Failed to generate screenshot', { status: 500 });
+  }
+}

app/api/setup/branding/route.ts

@@ -23,10 +23,13 @@ const ALLOWED_MIME_TYPES = new Set([
 
 const VALID_SLOTS = new Set([
   'faviconUrl',
+  'pwaIconUrl',
   'appLogoLightUrl',
   'appLogoDarkUrl',
   'loginLogoLightUrl',
   'loginLogoDarkUrl',
+  'pwaScreenshotMobileUrl',
+  'pwaScreenshotDesktopUrl',
 ]);
 
 const EXT_BY_MIME: Record<string, string> = {

app/api/setup/step/route.ts

@@ -4,6 +4,7 @@ import { authenticateWizardRequest } from '@/lib/setup/session';
 import { configManager } from '@/lib/admin/config-manager';
 import { CONFIG_ENV_MAP } from '@/lib/admin/types';
 import { parseJmapServers } from '@/lib/admin/jmap-servers';
+import { effectiveConsent, loadState, saveState, reschedule } from '@/lib/telemetry';
 import { logger } from '@/lib/logger';
 
 export const dynamic = 'force-dynamic';
@@ -76,8 +77,32 @@ export async function POST(request: NextRequest) {
     return NextResponse.json({ error: 'values must be an object' }, { status: 400 });
   }
 
+  const valuesObj = { ...(values as Record<string, unknown>) };
+
+  // Telemetry consent lives in the telemetry state file, not admin config, so
+  // it has no CONFIG_ENV_MAP entry. Pull it out of the security step and
+  // persist it directly, mirroring POST /api/admin/telemetry (set-consent).
+  if (step === 'security' && 'telemetryConsent' in valuesObj) {
+    const consent = valuesObj.telemetryConsent;
+    delete valuesObj.telemetryConsent;
+    if (consent !== 'on' && consent !== 'off') {
+      return NextResponse.json({ error: 'telemetryConsent must be "on" or "off"' }, { status: 400 });
+    }
+    // A BULWARK_TELEMETRY env var hard-locks the choice; don't fight it.
+    const { source } = await effectiveConsent();
+    if (source !== 'env') {
+      const tstate = await loadState();
+      tstate.consent = consent;
+      if (consent === 'on' && !tstate.consentedAt) {
+        tstate.consentedAt = new Date().toISOString();
+      }
+      await saveState(tstate);
+      await reschedule();
+    }
+  }
+
   const updates: Record<string, unknown> = {};
-  for (const [key, value] of Object.entries(values as Record<string, unknown>)) {
+  for (const [key, value] of Object.entries(valuesObj)) {
     if (!allowedKeys.includes(key)) {
       return NextResponse.json({ error: `Key not allowed in step ${step}: ${key}` }, { status: 400 });
     }

app/api/translate/route.ts

@@ -0,0 +1,298 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+// Host-side proxy backing the "Translate" plugin (manifest apiPostPaths:
+// ["/api/translate"]). The plugin slot iframe POSTs { text, target, source,
+// provider } here via api.http.post; we forward to a free translation backend
+// and return { translatedText, detectedSource } in a stable shape.
+//
+// Two providers:
+//   - "mymemory"     — public MyMemory API, no configuration required. Its
+//                       langpair needs an explicit source language, so when the
+//                       plugin asks for "auto" we detect it locally first.
+//   - "libretranslate" — only available when the host sets LIBRETRANSLATE_URL
+//                       (and optionally LIBRETRANSLATE_API_KEY). Supports native
+//                       source auto-detection.
+
+export const runtime = 'nodejs';
+
+const MAX_CHARS = 5000;
+// Long bodies are split into ~480-char chunks for MyMemory and translated
+// sequentially, so allow enough headroom for ~10 round-trips.
+const TIMEOUT_MS = 25000;
+
+type Provider = 'mymemory' | 'libretranslate';
+
+interface TranslateBody {
+  text?: unknown;
+  target?: unknown;
+  source?: unknown;
+  provider?: unknown;
+}
+
+interface TranslateResult {
+  translatedText: string;
+  detectedSource?: string;
+}
+
+// ─── Lightweight language detection ───────────────────────────
+//
+// MyMemory has no auto-detect, so we infer a source language from the text.
+// Non-Latin scripts are decided by Unicode range; Latin-script European
+// languages are scored by stop-word frequency. Detection only needs to be good
+// enough to (a) pick a sensible langpair and (b) let the plugin skip messages
+// already in the target language.
+
+const SCRIPT_RANGES: ReadonlyArray<[RegExp, string]> = [
+  [/[぀-ヿ]/, 'ja'], // Hiragana / Katakana
+  [/[가-힯]/, 'ko'], // Hangul
+  [/[一-鿿]/, 'zh'], // CJK ideographs (after JP/KR checks)
+  [/[Ѐ-ӿ]/, 'ru'], // Cyrillic (ru vs uk refined below)
+  [/[Ͱ-Ͽ]/, 'el'], // Greek
+  [/[؀-ۿ]/, 'ar'], // Arabic
+  [/[֐-׿]/, 'he'], // Hebrew
+  [/[ऀ-ॿ]/, 'hi'], // Devanagari
+];
+
+// Distinctive stop words per Latin-script language from the manifest's option
+// list. Kept small and high-signal to avoid cross-language collisions.
+const LATIN_STOPWORDS: Record<string, readonly string[]> = {
+  en: ['the', 'and', 'you', 'that', 'with', 'for', 'this', 'have', 'are'],
+  de: ['der', 'die', 'und', 'das', 'ist', 'nicht', 'mit', 'sie', 'ein', 'auch'],
+  fr: ['les', 'des', 'une', 'est', 'pour', 'que', 'vous', 'dans', 'avec', 'pas'],
+  es: ['que', 'los', 'una', 'por', 'con', 'para', 'como', 'pero', 'más', 'esta'],
+  it: ['che', 'non', 'per', 'una', 'sono', 'con', 'come', 'questo', 'anche', 'della'],
+  pt: ['que', 'não', 'uma', 'com', 'para', 'como', 'mais', 'você', 'está', 'isso'],
+  nl: ['het', 'een', 'van', 'dat', 'niet', 'met', 'voor', 'aan', 'zijn', 'maar'],
+  pl: ['nie', 'jest', 'się', 'ale', 'oraz', 'tego', 'jak', 'tym', 'przez', 'dla'],
+  sv: ['och', 'att', 'det', 'som', 'för', 'med', 'inte', 'den', 'till', 'har'],
+  no: ['og', 'det', 'som', 'for', 'med', 'ikke', 'har', 'til', 'denne', 'jeg'],
+  da: ['og', 'det', 'som', 'for', 'med', 'ikke', 'har', 'til', 'denne', 'jeg'],
+  fi: ['että', 'olen', 'tämä', 'kanssa', 'mutta', 'sekä', 'ei', 'on', 'ja', 'jotta'],
+  cs: ['není', 'jsem', 'pro', 'ale', 'jako', 'tento', 'také', 'přes', 'jsou', 'své'],
+  ro: ['este', 'pentru', 'care', 'dar', 'sunt', 'această', 'mai', 'din', 'sau', 'nu'],
+  hu: ['hogy', 'nem', 'egy', 'van', 'ezt', 'vagy', 'mint', 'csak', 'ezzel', 'így'],
+  tr: ['bir', 'için', 'değil', 'bu', 'çok', 'daha', 'ama', 'gibi', 've', 'ile'],
+};
+
+function detectLanguage(text: string): string {
+  const sample = text.slice(0, 1000);
+  for (const [range, lang] of SCRIPT_RANGES) {
+    if (range.test(sample)) {
+      // Ukrainian shares Cyrillic with Russian; its unique glyphs decide it.
+      if (lang === 'ru' && /[єіїґ]/.test(sample)) return 'uk';
+      return lang;
+    }
+  }
+
+  const words = sample.toLowerCase().match(/[a-zà-ÿčśžłńęąółżźć]+/gi) || [];
+  if (words.length === 0) return 'en';
+  const counts: Record<string, number> = {};
+  const wordSet = new Set(words);
+  for (const [lang, stops] of Object.entries(LATIN_STOPWORDS)) {
+    let score = 0;
+    for (const stop of stops) if (wordSet.has(stop)) score += 1;
+    counts[lang] = score;
+  }
+  let best = 'en';
+  let bestScore = -1;
+  for (const [lang, score] of Object.entries(counts)) {
+    if (score > bestScore) {
+      best = lang;
+      bestScore = score;
+    }
+  }
+  return bestScore > 0 ? best : 'en';
+}
+
+function baseLang(code: string): string {
+  return String(code || '').toLowerCase().split('-')[0];
+}
+
+// ─── Chunking ─────────────────────────────────────────────────
+//
+// MyMemory's free endpoint caps each request's `q` at 500 characters and
+// silently returns only the translated prefix beyond that — which is why long
+// emails came back truncated ("…about Sel…"). We split the text into
+// line-aware chunks under the limit, translate each, then rejoin so the whole
+// body is covered.
+
+const MYMEMORY_CHUNK = 480;
+
+function chunkText(text: string, max: number): string[] {
+  const chunks: string[] = [];
+  let cur = '';
+  const flush = () => {
+    if (cur) {
+      chunks.push(cur);
+      cur = '';
+    }
+  };
+  for (const line of text.split('\n')) {
+    if (line.length > max) {
+      flush();
+      // A single over-long line (e.g. a long URL list): split on words, and
+      // hard-cut any word that is itself longer than the limit.
+      let seg = '';
+      for (const word of line.split(' ')) {
+        const piece = seg ? seg + ' ' + word : word;
+        if (piece.length > max) {
+          if (seg) {
+            chunks.push(seg);
+            seg = '';
+          }
+          if (word.length > max) {
+            for (let i = 0; i < word.length; i += max) chunks.push(word.slice(i, i + max));
+          } else {
+            seg = word;
+          }
+        } else {
+          seg = piece;
+        }
+      }
+      if (seg) chunks.push(seg);
+      continue;
+    }
+    if (cur && cur.length + 1 + line.length > max) flush();
+    cur = cur ? cur + '\n' + line : line;
+  }
+  flush();
+  return chunks;
+}
+
+// ─── Providers ────────────────────────────────────────────────
+
+async function mymemoryRequest(
+  q: string,
+  langpair: string,
+  signal: AbortSignal,
+): Promise<string> {
+  const url = new URL('https://api.mymemory.translated.net/get');
+  url.searchParams.set('q', q);
+  url.searchParams.set('langpair', langpair);
+
+  const res = await fetch(url.toString(), {
+    signal,
+    headers: { 'User-Agent': 'JMAP-Webmail/1.0 Translate-Plugin' },
+  });
+  const data = (await res.json().catch(() => null)) as
+    | { responseStatus?: number | string; responseData?: { translatedText?: string }; responseDetails?: string }
+    | null;
+  if (!res.ok || !data) {
+    throw new Error(`MyMemory returned ${res.status}`);
+  }
+  const status = Number(data.responseStatus);
+  if (status && status !== 200) {
+    throw new Error(data.responseDetails || `MyMemory error ${status}`);
+  }
+  const translatedText = data.responseData?.translatedText || '';
+  if (!translatedText) {
+    throw new Error('MyMemory returned no translation');
+  }
+  return translatedText;
+}
+
+async function translateMyMemory(
+  text: string,
+  source: string,
+  target: string,
+  signal: AbortSignal,
+): Promise<TranslateResult> {
+  const detected = source === 'auto' || !source ? detectLanguage(text) : baseLang(source);
+  const tgt = baseLang(target);
+  // Nothing to do if already in the target language; the plugin skips display.
+  if (detected === tgt) {
+    return { translatedText: text, detectedSource: detected };
+  }
+  const langpair = `${detected}|${tgt}`;
+  const chunks = chunkText(text, MYMEMORY_CHUNK);
+  // Sequential to stay friendly to MyMemory's free-tier rate limits; emails are
+  // usually one or two chunks.
+  const translated: string[] = [];
+  for (const chunk of chunks) {
+    translated.push(await mymemoryRequest(chunk, langpair, signal));
+  }
+  return { translatedText: translated.join('\n'), detectedSource: detected };
+}
+
+async function translateLibre(
+  text: string,
+  source: string,
+  target: string,
+  signal: AbortSignal,
+): Promise<TranslateResult> {
+  const endpoint = process.env.LIBRETRANSLATE_URL;
+  if (!endpoint) {
+    throw new Error('LibreTranslate is not configured on this server');
+  }
+  const apiKey = process.env.LIBRETRANSLATE_API_KEY;
+  const url = endpoint.replace(/\/+$/, '') + '/translate';
+  const res = await fetch(url, {
+    method: 'POST',
+    signal,
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      q: text,
+      source: source || 'auto',
+      target: baseLang(target),
+      format: 'text',
+      ...(apiKey ? { api_key: apiKey } : {}),
+    }),
+  });
+  const data = (await res.json().catch(() => null)) as
+    | { translatedText?: string; detectedLanguage?: { language?: string }; error?: string }
+    | null;
+  if (!res.ok || !data) {
+    throw new Error(data?.error || `LibreTranslate returned ${res.status}`);
+  }
+  if (!data.translatedText) {
+    throw new Error(data.error || 'LibreTranslate returned no translation');
+  }
+  return {
+    translatedText: data.translatedText,
+    detectedSource: data.detectedLanguage?.language || (source !== 'auto' ? baseLang(source) : undefined),
+  };
+}
+
+// ─── Route ────────────────────────────────────────────────────
+
+export async function POST(request: NextRequest) {
+  let body: TranslateBody;
+  try {
+    body = (await request.json()) as TranslateBody;
+  } catch {
+    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
+  }
+
+  const text = typeof body.text === 'string' ? body.text.trim() : '';
+  const target = typeof body.target === 'string' && body.target.trim() ? body.target.trim() : 'en';
+  const source = typeof body.source === 'string' && body.source.trim() ? body.source.trim() : 'auto';
+  const provider: Provider = body.provider === 'libretranslate' ? 'libretranslate' : 'mymemory';
+
+  if (!text) {
+    return NextResponse.json({ error: 'No text to translate' }, { status: 400 });
+  }
+  if (text.length > MAX_CHARS) {
+    return NextResponse.json(
+      { error: `Text exceeds the ${MAX_CHARS}-character limit` },
+      { status: 413 },
+    );
+  }
+
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), TIMEOUT_MS);
+  try {
+    const result =
+      provider === 'libretranslate'
+        ? await translateLibre(text, source, target, controller.signal)
+        : await translateMyMemory(text, source, target, controller.signal);
+    return NextResponse.json(result, { status: 200 });
+  } catch (error: unknown) {
+    if (error instanceof Error && error.name === 'AbortError') {
+      return NextResponse.json({ error: 'Translation timed out' }, { status: 504 });
+    }
+    const message = error instanceof Error ? error.message : 'Translation failed';
+    return NextResponse.json({ error: message }, { status: 502 });
+  } finally {
+    clearTimeout(timeout);
+  }
+}

app/globals.css

@@ -70,7 +70,7 @@
 }
 
 .dark {
-  --color-border: #262626;
+  --color-border: rgba(128, 128, 128, 0.3);
   --color-input: #262626;
   --color-ring: #d4d4d4;
   --color-background: #0a0a0a;

app/manifest.ts

@@ -95,10 +95,25 @@ export default async function manifest(): Promise<ExtendedManifest> {
     background_color: backgroundColor,
     icons,
     categories: ["productivity"],
-    screenshots: [
+    // Use admin-uploaded screenshots when configured (per-domain override,
-      { src: withBase("/screenshot-540x720.png"), sizes: "540x720", type: "image/png" },
+    // admin/env global; resized on the fly via /api/pwa-screenshot/[variant]);
-      { src: withBase("/screenshot-1280x720.png"), sizes: "1280x720", type: "image/png" },
+    // otherwise fall back to the built-in Bulwark screenshots from public/.
-    ],
+    screenshots: (() => {
+      const hasMobile =
+        !!domainOverrides.pwaScreenshotMobileUrl ||
+        sources.pwaScreenshotMobileUrl?.source !== "default";
+      const hasDesktop =
+        !!domainOverrides.pwaScreenshotDesktopUrl ||
+        sources.pwaScreenshotDesktopUrl?.source !== "default";
+      return [
+        hasMobile
+          ? { src: withBase("/api/pwa-screenshot/mobile"), sizes: "540x720", type: "image/png" }
+          : { src: withBase("/screenshot-540x720.png"), sizes: "540x720", type: "image/png" },
+        hasDesktop
+          ? { src: withBase("/api/pwa-screenshot/desktop"), sizes: "1280x720", type: "image/png" }
+          : { src: withBase("/screenshot-1280x720.png"), sizes: "1280x720", type: "image/png" },
+      ];
+    })(),
     protocol_handlers: [
       { protocol: "mailto", url: withBase("/protocol/mailto?url=%s") },
       { protocol: "webcal", url: withBase("/protocol/webcal?url=%s") },

components/calendar/calendar-agenda-view.tsx

@@ -5,7 +5,7 @@ import { useTranslations, useFormatter } from "next-intl";
 import { format, isToday, isTomorrow, startOfDay } from "date-fns";
 import { MapPin, Users } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { parseDuration, getEventColor } from "./event-card";
+import { getEventColor } from "./event-card";
 import { getEventDayBounds, getEventEndDate, getEventStartDate, getPrimaryCalendarId } from "@/lib/calendar-utils";
 import { getParticipantCount } from "@/lib/calendar-participants";
 import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
@@ -147,7 +147,6 @@ export function CalendarAgendaView({
               const calendar = calId ? calendarMap.get(calId) : undefined;
               const color = getEventColor(ev, calendar);
               const start = getEventStartDate(ev);
-              const durMin = parseDuration(ev.duration);
               const end = getEventEndDate(ev);
               const locationName = ev.locations
                 ? Object.values(ev.locations)[0]?.name

components/calendar/calendar-sidebar-panel.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo, useState } from "react";
 import { useTranslations } from "next-intl";
-import { ChevronDown, ChevronRight, Globe, ListTodo, Pencil, RefreshCw, Share2, Trash2, Cake, User, Users, Plus, Eraser, Palette } from "lucide-react";
+import { ChevronDown, ChevronRight, Globe, ListTodo, Pencil, RefreshCw, Share2, Star, Trash2, Cake, User, Users, Plus, Eraser, Palette, Shuffle } from "lucide-react";
 import { cn, formatDateTime } from "@/lib/utils";
 import type { Calendar } from "@/lib/jmap/types";
 import { CalendarColorPicker } from "@/components/settings/calendar-management-settings";
@@ -11,6 +11,7 @@ import { useSettingsStore } from "@/stores/settings-store";
 import { useTaskStore } from "@/stores/task-store";
 import { useAccountStore } from "@/stores/account-store";
 import { BIRTHDAY_CALENDAR_ID } from "@/lib/birthday-calendar";
+import { sharedCalendarColorKey } from "@/lib/shared-calendar-colors";
 import { toast } from "@/stores/toast-store";
 import { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuSubMenu } from "@/components/ui/context-menu";
 import { useContextMenu } from "@/hooks/use-context-menu";
@@ -50,6 +51,7 @@ interface CalendarSidebarPanelProps {
   selectedCalendarIds: string[];
   onToggleVisibility: (id: string) => void;
   onColorChange?: (calendarId: string, color: string) => void;
+  onResetColor?: (calendar: Calendar) => void;
   onShareCalendar?: (calendar: Calendar) => void;
   onCreateEvent?: (calendar: Calendar) => void;
   onClearCalendar?: (calendar: Calendar) => void;
@@ -71,6 +73,7 @@ export function CalendarSidebarPanel({
   selectedCalendarIds,
   onToggleVisibility,
   onColorChange,
+  onResetColor,
   onShareCalendar,
   onCreateEvent,
   onClearCalendar,
@@ -93,7 +96,9 @@ export function CalendarSidebarPanel({
   );
   const refreshICalSubscription = useCalendarStore((s) => s.refreshICalSubscription);
   const removeICalSubscription = useCalendarStore((s) => s.removeICalSubscription);
+  const setDefaultCalendar = useCalendarStore((s) => s.setDefaultCalendar);
   const timeFormat = useSettingsStore((s) => s.timeFormat);
+  const sharedCalendarColors = useSettingsStore((s) => s.sharedCalendarColors);
   const enableCalendarTasks = useSettingsStore((s) => s.enableCalendarTasks);
   const tasks = useTaskStore((s) => s.tasks);
   const setViewMode = useCalendarStore((s) => s.setViewMode);
@@ -215,6 +220,16 @@ export function CalendarSidebarPanel({
     }
   };
 
+  const handleSetDefault = async (calendarId: string) => {
+    if (!client) return;
+    try {
+      await setDefaultCalendar(client, calendarId);
+      toast.success(tMgmt('default_updated'));
+    } catch {
+      toast.error(tMgmt('error_default'));
+    }
+  };
+
   if (calendars.length === 0 && !onSubscribe) return null;
 
   const renderCalendarItem = (cal: Calendar) => {
@@ -302,10 +317,13 @@ export function CalendarSidebarPanel({
     const isBirthday = cal.id === BIRTHDAY_CALENDAR_ID;
     const canCreate = onCreateEvent && !isBirthday && cal.myRights?.mayWriteOwn !== false;
     const canShare = onShareCalendar && cal.myRights?.mayShare && !cal.isShared;
+    const canSetDefault = !!client && !isBirthday && !cal.isShared && !cal.isDefault;
     const canChangeColor = !!onColorChange;
+    const hasColorOverride = !!cal.isShared && !!sharedCalendarColors[sharedCalendarColorKey(cal)];
+    const canResetColor = !!onResetColor && hasColorOverride;
     const canClear = onClearCalendar && !isBirthday && cal.myRights?.mayDelete !== false;
     const canDelete = onDeleteCalendar && !isBirthday && !cal.isDefault && !cal.isShared;
-    const showSeparator = (canCreate || canShare || canChangeColor) && (canClear || canDelete);
+    const showSeparator = (canCreate || canShare || canSetDefault || canChangeColor || canResetColor) && (canClear || canDelete);
     const color = cal.color || "#3b82f6";
 
     return (
@@ -324,6 +342,13 @@ export function CalendarSidebarPanel({
             onClick={() => { closeContextMenu(); onShareCalendar(cal); }}
           />
         )}
+        {canSetDefault && (
+          <ContextMenuItem
+            icon={Star}
+            label={tMgmt('set_default')}
+            onClick={() => { closeContextMenu(); handleSetDefault(cal.id); }}
+          />
+        )}
         {canChangeColor && (
           <ContextMenuSubMenu icon={Palette} label={tMgmt('change_color')}>
             <div className="px-2 py-1.5 w-[200px]">
@@ -335,6 +360,13 @@ export function CalendarSidebarPanel({
             </div>
           </ContextMenuSubMenu>
         )}
+        {canResetColor && (
+          <ContextMenuItem
+            icon={Shuffle}
+            label={tMgmt('random_color')}
+            onClick={() => { closeContextMenu(); onResetColor!(cal); }}
+          />
+        )}
         {showSeparator && <ContextMenuSeparator />}
         {canClear && (
           <ContextMenuItem

components/calendar/event-card.tsx

@@ -34,6 +34,11 @@ function sanitizeColor(color: string | null | undefined, fallback = "#3b82f6"):
 }
 
 function getEventColor(event: CalendarEvent, calendar?: Calendar): string {
+  // A local color override on a shared calendar wins over per-event colors,
+  // so the whole shared calendar paints uniformly in the viewer's chosen hue.
+  if (calendar?.colorIsLocalOverride && calendar.color) {
+    return sanitizeColor(calendar.color);
+  }
   return sanitizeColor(event.color, sanitizeColor(calendar?.color));
 }
 
@@ -66,7 +71,7 @@ function createEventDragPreview(title: string, timeRange: string, color: string)
   return el;
 }
 
-export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onMouseLeave, onContextMenu, isSelected, draggable: isDraggable, continuesBefore = false, continuesAfter = false, className, style }: EventCardProps) {
+export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onMouseLeave, onContextMenu, isSelected, draggable: isDraggable, continuesAfter = false, className, style }: EventCardProps) {
   const t = useTranslations("calendar");
   const [isBeingDragged, setIsBeingDragged] = useState(false);
   const color = getEventColor(event, calendar);

components/calendar/event-detail-popover.tsx

@@ -1,18 +1,19 @@
 "use client";
 
 import { useState, useEffect, useRef, useMemo, useCallback, useLayoutEffect } from "react";
-import { useTranslations } from "next-intl";
+import { useTranslations, useLocale } from "next-intl";
 import { createPortal } from "react-dom";
 import { Button } from "@/components/ui/button";
 import {
   X, Clock, MapPin, Video, Users, Repeat, Bell, AlignLeft,
   Pencil, Trash2, Copy, Send, Check,
 } from "lucide-react";
-import { format, isSameDay, parseISO } from "date-fns";
+import { format, isSameDay } from "date-fns";
 import { cn } from "@/lib/utils";
 import type { CalendarEvent, Calendar, CalendarParticipant } from "@/lib/jmap/types";
 import { parseDuration, getEventColor } from "./event-card";
 import { getEventDisplayEndDate, getEventEndDate, getEventStartDate } from "@/lib/calendar-utils";
+import { buildRecurrenceSummary } from "./recurrence-editor";
 import {
   isOrganizer,
   getUserParticipantId,
@@ -101,16 +102,9 @@ function getAlertLabel(event: CalendarEvent, t: ReturnType<typeof useTranslation
   return null;
 }
 
-function getRecurrenceLabel(event: CalendarEvent, t: ReturnType<typeof useTranslations>): string | null {
+function getRecurrenceLabel(event: CalendarEvent, t: ReturnType<typeof useTranslations>, locale: string): string | null {
   if (!event.recurrenceRules?.length) return null;
-  const freq = event.recurrenceRules[0].frequency;
+  return buildRecurrenceSummary(event.recurrenceRules[0], t, locale);
-  const labels: Record<string, string> = {
-    daily: t("recurrence.daily"),
-    weekly: t("recurrence.weekly"),
-    monthly: t("recurrence.monthly"),
-    yearly: t("recurrence.yearly"),
-  };
-  return labels[freq] || null;
 }
 
 export function EventDetailPopover({
@@ -130,6 +124,7 @@ export function EventDetailPopover({
   isMobile,
 }: EventDetailPopoverProps) {
   const t = useTranslations("calendar");
+  const locale = useLocale();
   const popoverRef = useRef<HTMLDivElement>(null);
   const noteInputRef = useRef<HTMLTextAreaElement>(null);
   const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
@@ -158,7 +153,7 @@ export function EventDetailPopover({
   }, [event.virtualLocations]);
 
   const participants = useMemo(() => getParticipantList(event), [event]);
-  const recurrenceLabel = useMemo(() => getRecurrenceLabel(event, t), [event, t]);
+  const recurrenceLabel = useMemo(() => getRecurrenceLabel(event, t, locale), [event, t, locale]);
   const alertLabel = useMemo(() => getAlertLabel(event, t), [event, t]);
 
   const userIsOrganizer = useMemo(() => {

components/calendar/event-modal.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
-import { useTranslations } from "next-intl";
+import { useTranslations, useLocale } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { X, Trash2, Check, Users, CalendarDays, Copy, Pencil, Clock, MapPin, Video, Repeat, Bell, AlignLeft, Plus } from "lucide-react";
 import { format, parseISO, addHours, addDays, isSameDay } from "date-fns";
-import type { CalendarEvent, Calendar, CalendarParticipant, CalendarEventAlert } from "@/lib/jmap/types";
+import type { CalendarEvent, Calendar, CalendarParticipant, CalendarEventAlert, CalendarRecurrenceRule } from "@/lib/jmap/types";
+import { RecurrenceEditor, buildRecurrenceSummary, isSimpleRecurrenceRule } from "./recurrence-editor";
 import { parseDuration, getEventColor } from "./event-card";
 import { buildAllDayDuration, getEventDisplayEndDate, getEventEndDate, getEventStartDate, getPrimaryCalendarId } from "@/lib/calendar-utils";
 import { ParticipantInput, type ParticipantInputHandle } from "./participant-input";
@@ -75,7 +76,7 @@ function buildDuration(startDate: Date, endDate: Date): string {
   return dur;
 }
 
-type RecurrenceOption = "none" | "daily" | "weekly" | "monthly" | "yearly";
+type RecurrenceOption = "none" | "daily" | "weekly" | "monthly" | "yearly" | "custom";
 
 type AlertUnit = "at_time" | "minutes" | "hours" | "days" | "weeks";
 
@@ -157,16 +158,9 @@ function getAlertLabel(event: CalendarEvent, t: ReturnType<typeof useTranslation
   return labels.join(", ");
 }
 
-function getRecurrenceLabel(event: CalendarEvent, t: ReturnType<typeof useTranslations>): string | null {
+function getRecurrenceLabel(event: CalendarEvent, t: ReturnType<typeof useTranslations>, locale: string): string | null {
   if (!event.recurrenceRules?.length) return null;
-  const freq = event.recurrenceRules[0].frequency;
+  return buildRecurrenceSummary(event.recurrenceRules[0], t, locale);
-  const labels: Record<string, string> = {
-    daily: t("recurrence.daily"),
-    weekly: t("recurrence.weekly"),
-    monthly: t("recurrence.monthly"),
-    yearly: t("recurrence.yearly"),
-  };
-  return labels[freq] || null;
 }
 
 export function EventModal({
@@ -186,6 +180,7 @@ export function EventModal({
   isMobile = false,
 }: EventModalProps) {
   const t = useTranslations("calendar");
+  const locale = useLocale();
   const timeFormat = useSettingsStore((s) => s.timeFormat);
   const timeDisplayFmt = timeFormat === "12h" ? "h:mm a" : "HH:mm";
   const isEdit = !!event;
@@ -270,8 +265,35 @@ export function EventModal({
   });
   const [recurrence, setRecurrence] = useState<RecurrenceOption>(() => {
     if (!event?.recurrenceRules?.length) return "none";
-    return event.recurrenceRules[0].frequency as RecurrenceOption;
+    const rule = event.recurrenceRules[0];
+    return isSimpleRecurrenceRule(rule) ? (rule.frequency as RecurrenceOption) : "custom";
   });
+  const [customRule, setCustomRule] = useState<CalendarRecurrenceRule | null>(() => {
+    if (!event?.recurrenceRules?.length) return null;
+    const rule = event.recurrenceRules[0];
+    return isSimpleRecurrenceRule(rule) ? null : rule;
+  });
+  const [showRecurrenceEditor, setShowRecurrenceEditor] = useState(false);
+  // Dropdown value to restore when the custom editor is cancelled without a saved rule.
+  const recurrenceBeforeCustomRef = useRef<RecurrenceOption>("none");
+
+  const handleRecurrenceEditorSave = useCallback((rule: CalendarRecurrenceRule) => {
+    setCustomRule(rule);
+    setRecurrence("custom");
+    setShowRecurrenceEditor(false);
+  }, []);
+
+  const handleRecurrenceEditorCancel = useCallback(() => {
+    setShowRecurrenceEditor(false);
+    if (!customRule) {
+      setRecurrence(recurrenceBeforeCustomRef.current);
+    }
+  }, [customRule]);
+
+  const customRuleSummary = useMemo(
+    () => (customRule ? buildRecurrenceSummary(customRule, t, locale) : null),
+    [customRule, t, locale]
+  );
   const preservedAlertsRef = useRef<Record<string, CalendarEventAlert>>({});
   const [alertRows, setAlertRows] = useState<AlertRow[]>(() => {
     if (!event?.alerts) return [];
@@ -444,7 +466,9 @@ export function EventModal({
       data.virtualLocations = null;
     }
 
-    if (recurrence !== "none") {
+    if (recurrence === "custom" && customRule) {
+      data.recurrenceRules = [customRule];
+    } else if (recurrence !== "none" && recurrence !== "custom") {
       data.recurrenceRules = [{
         "@type": "RecurrenceRule",
         frequency: recurrence,
@@ -511,7 +535,7 @@ export function EventModal({
     } finally {
       setIsSaving(false);
     }
-  }, [title, description, location, virtualLocation, startDate, startTime, endDate, endTime, allDay, calendarId, recurrence, alertRows, attendees, sendInvitations, currentUserEmails, existingParticipants, event, onSave, isSaving]);
+  }, [title, description, location, virtualLocation, startDate, startTime, endDate, endTime, allDay, calendarId, recurrence, customRule, alertRows, attendees, sendInvitations, currentUserEmails, existingParticipants, event, onSave, isSaving]);
 
   const handleRsvp = useCallback((status: CalendarParticipant['participationStatus']) => {
     if (!event || !userParticipantId || !onRsvp) return;
@@ -593,7 +617,6 @@ export function EventModal({
 
   if (isAttendeeMode && event) {
     const startD = getEventStartDate(event);
-    const durMin = parseDuration(event.duration);
     const endD = getEventEndDate(event);
     const locationName = event.locations ? Object.values(event.locations)[0]?.name : null;
     const participants = getParticipantList(event);
@@ -737,7 +760,7 @@ export function EventModal({
     const locationName = event.locations ? Object.values(event.locations)[0]?.name || null : null;
     const virtualLoc = event.virtualLocations ? Object.values(event.virtualLocations)[0]?.uri || null : null;
     const viewParticipants = getParticipantList(event);
-    const recurrenceLabel = getRecurrenceLabel(event, t);
+    const recurrenceLabel = getRecurrenceLabel(event, t, locale);
     const alertLabel = getAlertLabel(event, t);
     const eventCalendar = calendars.find(c => event.calendarIds[c.id]);
     const color = getEventColor(event, eventCalendar);
@@ -1131,17 +1154,51 @@ export function EventModal({
 
           <div>
             <label className="text-sm font-medium mb-1 block">{t("recurrence.title")}</label>
-            <select
+            <div className="flex items-center gap-2">
-              value={recurrence}
+              <select
-              onChange={(e) => setRecurrence(e.target.value as RecurrenceOption)}
+                value={recurrence}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                onChange={(e) => {
-            >
+                  const value = e.target.value as RecurrenceOption;
-              <option value="none">{t("recurrence.none")}</option>
+                  if (value === "custom") {
-              <option value="daily">{t("recurrence.daily")}</option>
+                    recurrenceBeforeCustomRef.current = recurrence;
-              <option value="weekly">{t("recurrence.weekly")}</option>
+                    setRecurrence("custom");
-              <option value="monthly">{t("recurrence.monthly")}</option>
+                    setShowRecurrenceEditor(true);
-              <option value="yearly">{t("recurrence.yearly")}</option>
+                  } else {
-            </select>
+                    setRecurrence(value);
+                    setShowRecurrenceEditor(false);
+                  }
+                }}
+                className="flex-1 min-w-0 rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              >
+                <option value="none">{t("recurrence.none")}</option>
+                <option value="daily">{t("recurrence.daily")}</option>
+                <option value="weekly">{t("recurrence.weekly")}</option>
+                <option value="monthly">{t("recurrence.monthly")}</option>
+                <option value="yearly">{t("recurrence.yearly")}</option>
+                <option value="custom">{customRuleSummary || t("recurrence.custom")}</option>
+              </select>
+              {recurrence === "custom" && !showRecurrenceEditor && (
+                <button
+                  type="button"
+                  onClick={() => setShowRecurrenceEditor(true)}
+                  className="p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                  aria-label={t("recurrence.edit_custom")}
+                >
+                  <Pencil className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+            {showRecurrenceEditor && (
+              <RecurrenceEditor
+                rule={customRule}
+                eventStart={(() => {
+                  const d = new Date(`${startDate}T${allDay ? "00:00" : (startTime || "00:00")}:00`);
+                  return isNaN(d.getTime()) ? new Date() : d;
+                })()}
+                onSave={handleRecurrenceEditorSave}
+                onCancel={handleRecurrenceEditorCancel}
+              />
+            )}
           </div>
 
           <div>

components/calendar/ical-import-modal.tsx

@@ -4,7 +4,7 @@ import { useState, useCallback, useRef, useEffect } from "react";
 import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { X, Upload, Check, Loader2, RefreshCw, Globe } from "lucide-react";
-import { format, parseISO } from "date-fns";
+import { format } from "date-fns";
 import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
 import type { IJMAPClient } from '@/lib/jmap/client-interface';
 import { getEventStartDate } from "@/lib/calendar-utils";

components/calendar/participant-input.tsx

@@ -4,6 +4,7 @@ import { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHand
 import { useTranslations } from "next-intl";
 import { X } from "lucide-react";
 import { Input } from "@/components/ui/input";
+import { Avatar } from "@/components/ui/avatar";
 import { useContactStore } from "@/stores/contact-store";
 
 interface Participant {
@@ -144,14 +145,17 @@ export const ParticipantInput = forwardRef<ParticipantInputHandle, ParticipantIn
                 role="option"
                 aria-selected={i === activeIndex}
                 onMouseDown={(e) => { e.preventDefault(); addParticipant(s); }}
-                className={`px-3 py-2 text-sm cursor-pointer transition-colors ${
+                className={`px-3 py-2 text-sm cursor-pointer transition-colors flex items-center gap-2 ${
                   i === activeIndex ? "bg-accent text-accent-foreground" : "hover:bg-muted"
                 }`}
               >
-                <div className="font-medium truncate">{s.name || s.email}</div>
+                <Avatar name={s.name} email={s.email} size="sm" className="shrink-0 w-7 h-7 text-[10px]" />
-                {s.name && (
+                <div className="min-w-0">
-                  <div className="text-xs text-muted-foreground truncate">{s.email}</div>
+                  <div className="font-medium truncate">{s.name || s.email}</div>
-                )}
+                  {s.name && (
+                    <div className="text-xs text-muted-foreground truncate">{s.email}</div>
+                  )}
+                </div>
               </li>
             ))}
           </ul>

components/calendar/recurrence-editor.tsx

@@ -0,0 +1,427 @@
+"use client";
+
+import { useState } from "react";
+import { useLocale, useTranslations } from "next-intl";
+import { addYears, format } from "date-fns";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import type { CalendarRecurrenceRule } from "@/lib/jmap/types";
+
+type EditorFrequency = "daily" | "weekly" | "monthly" | "yearly";
+type MonthlyMode = "day" | "nth";
+type EndsMode = "never" | "on" | "after";
+
+const EDITOR_FREQUENCIES: EditorFrequency[] = ["daily", "weekly", "monthly", "yearly"];
+
+// 2024-01-01 is a Monday - used to render localized weekday names via Intl.
+const WEEKDAYS: string[] = ["mo", "tu", "we", "th", "fr", "sa", "su"];
+const DAY_TO_REF_DATE: Record<string, number> = { mo: 1, tu: 2, we: 3, th: 4, fr: 5, sa: 6, su: 7 };
+const INDEX_TO_DAY = ["su", "mo", "tu", "we", "th", "fr", "sa"];
+
+const UNIT_LABEL_KEYS: Record<EditorFrequency, string> = {
+  daily: "recurrence.editor_unit_days",
+  weekly: "recurrence.editor_unit_weeks",
+  monthly: "recurrence.editor_unit_months",
+  yearly: "recurrence.editor_unit_years",
+};
+
+type CalendarT = ReturnType<typeof useTranslations>;
+
+function weekdayName(day: string, locale: string, style: "long" | "short" = "long"): string {
+  const ref = new Date(2024, 0, DAY_TO_REF_DATE[day] ?? 1);
+  return new Intl.DateTimeFormat(locale, { weekday: style }).format(ref);
+}
+
+function monthName(month: number, locale: string): string {
+  return new Intl.DateTimeFormat(locale, { month: "long" }).format(new Date(2024, month - 1, 1));
+}
+
+function nthLabel(nth: number, t: CalendarT): string {
+  if (nth === -1) return t("recurrence.nth_last");
+  if (nth >= 1 && nth <= 4) return t(`recurrence.nth_${nth}`);
+  return String(nth);
+}
+
+function capitalize(s: string): string {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+/**
+ * Extract an "nth weekday" pattern from a rule, accepting both the
+ * byDay+nthOfPeriod encoding and the byDay+bySetPosition encoding.
+ */
+function getNthDay(rule: CalendarRecurrenceRule): { day: string; nth: number } | null {
+  if (rule.byDay?.length === 1) {
+    const nd = rule.byDay[0];
+    if (nd.nthOfPeriod) return { day: nd.day, nth: nd.nthOfPeriod };
+    if (rule.bySetPosition?.length === 1) return { day: nd.day, nth: rule.bySetPosition[0] };
+  }
+  return null;
+}
+
+/**
+ * True when the rule is exactly what the plain Daily/Weekly/Monthly/Yearly
+ * dropdown presets produce, i.e. it needs no custom editor to represent.
+ */
+export function isSimpleRecurrenceRule(rule: CalendarRecurrenceRule): boolean {
+  return (
+    (EDITOR_FREQUENCIES as string[]).includes(rule.frequency) &&
+    (!rule.interval || rule.interval === 1) &&
+    !rule.byDay?.length &&
+    !rule.byMonthDay?.length &&
+    !rule.byMonth?.length &&
+    !rule.byYearDay?.length &&
+    !rule.byWeekNo?.length &&
+    !rule.bySetPosition?.length &&
+    !rule.count &&
+    !rule.until
+  );
+}
+
+/**
+ * Human-readable summary of a recurrence rule, e.g.
+ * "Every 2 months on the third Thursday · 12 occurrences".
+ * Returns null for frequencies the UI cannot describe (hourly etc.).
+ */
+export function buildRecurrenceSummary(
+  rule: CalendarRecurrenceRule,
+  t: CalendarT,
+  locale: string,
+): string | null {
+  const interval = rule.interval || 1;
+  let base: string;
+  switch (rule.frequency) {
+    case "daily":
+      base = interval > 1 ? t("recurrence.every_n_days", { count: interval }) : t("recurrence.daily");
+      break;
+    case "weekly":
+      base = interval > 1 ? t("recurrence.every_n_weeks", { count: interval }) : t("recurrence.weekly");
+      break;
+    case "monthly":
+      base = interval > 1 ? t("recurrence.every_n_months", { count: interval }) : t("recurrence.monthly");
+      break;
+    case "yearly":
+      base = interval > 1 ? t("recurrence.every_n_years", { count: interval }) : t("recurrence.yearly");
+      break;
+    default:
+      return null;
+  }
+
+  const parts = [base];
+
+  if (rule.frequency === "weekly" && rule.byDay?.length) {
+    const days = rule.byDay
+      .filter((d) => WEEKDAYS.includes(d.day))
+      .sort((a, b) => WEEKDAYS.indexOf(a.day) - WEEKDAYS.indexOf(b.day))
+      .map((d) => weekdayName(d.day, locale, "short"))
+      .join(", ");
+    if (days) parts.push(t("recurrence.on_days", { days }));
+  }
+
+  if (rule.frequency === "monthly" || rule.frequency === "yearly") {
+    if (rule.frequency === "yearly" && rule.byMonth?.length) {
+      const m = parseInt(rule.byMonth[0], 10);
+      if (m >= 1 && m <= 12) parts.push(t("recurrence.in_month", { month: monthName(m, locale) }));
+    }
+    const nthDay = getNthDay(rule);
+    if (nthDay) {
+      parts.push(t("recurrence.on_the_nth", {
+        nth: nthLabel(nthDay.nth, t),
+        day: weekdayName(nthDay.day, locale),
+      }));
+    } else if (rule.byMonthDay?.length) {
+      parts.push(t("recurrence.on_day_n", { day: rule.byMonthDay[0] }));
+    }
+  }
+
+  let summary = parts.join(" ");
+  if (rule.count) {
+    summary += ` · ${t("recurrence.occurrences", { count: rule.count })}`;
+  } else if (rule.until) {
+    const d = new Date(rule.until);
+    if (!isNaN(d.getTime())) {
+      summary += ` · ${t("recurrence.until")} ${new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(d)}`;
+    }
+  }
+  return summary;
+}
+
+interface RecurrenceEditorProps {
+  rule: CalendarRecurrenceRule | null;
+  eventStart: Date;
+  onSave: (rule: CalendarRecurrenceRule) => void;
+  onCancel: () => void;
+}
+
+export function RecurrenceEditor({ rule, eventStart, onSave, onCancel }: RecurrenceEditorProps) {
+  const t = useTranslations("calendar");
+  const locale = useLocale();
+
+  const startDay = INDEX_TO_DAY[eventStart.getDay()];
+  const initialNthDay = rule ? getNthDay(rule) : null;
+
+  const [frequency, setFrequency] = useState<EditorFrequency>(() =>
+    rule && (EDITOR_FREQUENCIES as string[]).includes(rule.frequency)
+      ? (rule.frequency as EditorFrequency)
+      : "weekly"
+  );
+  const [interval, setIntervalValue] = useState<number>(rule?.interval || 1);
+  const [weekDays, setWeekDays] = useState<string[]>(() => {
+    if (rule?.frequency === "weekly" && rule.byDay?.length) {
+      const days = rule.byDay.map((d) => d.day).filter((d) => WEEKDAYS.includes(d));
+      if (days.length) return days;
+    }
+    return [startDay];
+  });
+  const [monthlyMode, setMonthlyMode] = useState<MonthlyMode>(initialNthDay ? "nth" : "day");
+  const [monthDay, setMonthDay] = useState<number>(() => {
+    const md = rule?.byMonthDay?.[0];
+    return md && md >= 1 && md <= 31 ? md : eventStart.getDate();
+  });
+  const [nth, setNth] = useState<number>(() => {
+    if (initialNthDay && (initialNthDay.nth === -1 || (initialNthDay.nth >= 1 && initialNthDay.nth <= 4))) {
+      return initialNthDay.nth;
+    }
+    return Math.min(4, Math.floor((eventStart.getDate() - 1) / 7) + 1);
+  });
+  const [nthDay, setNthDay] = useState<string>(() =>
+    initialNthDay && WEEKDAYS.includes(initialNthDay.day) ? initialNthDay.day : startDay
+  );
+  const [month, setMonth] = useState<number>(() => {
+    const m = rule?.byMonth?.length ? parseInt(rule.byMonth[0], 10) : NaN;
+    return m >= 1 && m <= 12 ? m : eventStart.getMonth() + 1;
+  });
+  const [endsMode, setEndsMode] = useState<EndsMode>(rule?.count ? "after" : rule?.until ? "on" : "never");
+  const [untilDate, setUntilDate] = useState<string>(() => {
+    if (rule?.until) {
+      const d = new Date(rule.until);
+      if (!isNaN(d.getTime())) return format(d, "yyyy-MM-dd");
+    }
+    return format(addYears(eventStart, 1), "yyyy-MM-dd");
+  });
+  const [count, setCount] = useState<number>(rule?.count ?? 12);
+
+  const toggleWeekDay = (day: string) => {
+    setWeekDays((prev) =>
+      prev.includes(day)
+        ? prev.length > 1 ? prev.filter((d) => d !== day) : prev
+        : [...prev, day]
+    );
+  };
+
+  const buildRule = (): CalendarRecurrenceRule => {
+    const built: CalendarRecurrenceRule = {
+      "@type": "RecurrenceRule",
+      frequency,
+      interval: Math.max(1, interval),
+      rscale: "gregorian",
+      skip: "omit",
+      firstDayOfWeek: "mo",
+      byDay: null,
+      byMonthDay: null,
+      byMonth: null,
+      byYearDay: null,
+      byWeekNo: null,
+      byHour: null,
+      byMinute: null,
+      bySecond: null,
+      bySetPosition: null,
+      count: endsMode === "after" ? Math.max(1, count) : null,
+      until: endsMode === "on" && untilDate ? `${untilDate}T23:59:59` : null,
+    };
+
+    if (frequency === "weekly") {
+      const days = weekDays.length ? weekDays : [startDay];
+      built.byDay = WEEKDAYS.filter((d) => days.includes(d)).map((day) => ({ day }));
+    } else if (frequency === "monthly" || frequency === "yearly") {
+      if (monthlyMode === "nth") {
+        built.byDay = [{ day: nthDay, nthOfPeriod: nth }];
+      } else {
+        built.byMonthDay = [Math.min(31, Math.max(1, monthDay))];
+      }
+      if (frequency === "yearly") {
+        built.byMonth = [String(month)];
+      }
+    }
+
+    return built;
+  };
+
+  const handleSave = () => onSave(buildRule());
+
+  const summary = buildRecurrenceSummary(buildRule(), t, locale);
+
+  const selectCls = "rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring";
+
+  return (
+    <div className="mt-2 rounded-md border border-border bg-muted/20 p-3 space-y-3">
+      <div className="flex items-center gap-2 text-sm">
+        <span className="shrink-0">{t("recurrence.editor_every")}</span>
+        <Input
+          type="number"
+          min={1}
+          max={999}
+          value={interval}
+          onChange={(e) => {
+            const n = parseInt(e.target.value, 10);
+            setIntervalValue(Number.isFinite(n) ? Math.max(1, n) : 1);
+          }}
+          className="w-16 shrink-0"
+          aria-label={t("recurrence.editor_every")}
+        />
+        <select
+          value={frequency}
+          onChange={(e) => setFrequency(e.target.value as EditorFrequency)}
+          className={`${selectCls} flex-1 min-w-0`}
+          aria-label={t("recurrence.title")}
+        >
+          {EDITOR_FREQUENCIES.map((f) => (
+            <option key={f} value={f}>{t(UNIT_LABEL_KEYS[f])}</option>
+          ))}
+        </select>
+      </div>
+
+      {frequency === "weekly" && (
+        <div className="flex gap-1">
+          {WEEKDAYS.map((day) => (
+            <button
+              key={day}
+              type="button"
+              onClick={() => toggleWeekDay(day)}
+              title={weekdayName(day, locale)}
+              aria-pressed={weekDays.includes(day)}
+              className={
+                weekDays.includes(day)
+                  ? "flex-1 min-w-0 px-1 py-1.5 text-xs font-medium rounded-md border border-primary text-primary bg-primary/10 transition-colors"
+                  : "flex-1 min-w-0 px-1 py-1.5 text-xs font-medium rounded-md border border-input text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+              }
+            >
+              {weekdayName(day, locale, "short")}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {frequency === "yearly" && (
+        <div className="flex items-center gap-2 text-sm">
+          <span className="shrink-0">{capitalize(t("recurrence.editor_in"))}</span>
+          <select
+            value={month}
+            onChange={(e) => setMonth(parseInt(e.target.value, 10))}
+            className={`${selectCls} flex-1 min-w-0`}
+            aria-label={t("recurrence.editor_in")}
+          >
+            {Array.from({ length: 12 }, (_, i) => i + 1).map((m) => (
+              <option key={m} value={m}>{capitalize(monthName(m, locale))}</option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {(frequency === "monthly" || frequency === "yearly") && (
+        <div className="flex items-center gap-2 text-sm">
+          <select
+            value={monthlyMode}
+            onChange={(e) => setMonthlyMode(e.target.value as MonthlyMode)}
+            className={`${selectCls} shrink-0`}
+            aria-label={t("recurrence.editor_repeats_on")}
+          >
+            <option value="day">{capitalize(t("recurrence.editor_on_day"))}</option>
+            <option value="nth">{capitalize(t("recurrence.editor_on_the"))}</option>
+          </select>
+          {monthlyMode === "day" ? (
+            <Input
+              type="number"
+              min={1}
+              max={31}
+              value={monthDay}
+              onChange={(e) => {
+                const n = parseInt(e.target.value, 10);
+                setMonthDay(Number.isFinite(n) ? Math.min(31, Math.max(1, n)) : 1);
+              }}
+              className="w-16 shrink-0"
+              aria-label={t("recurrence.editor_on_day")}
+            />
+          ) : (
+            <>
+              <select
+                value={nth}
+                onChange={(e) => setNth(parseInt(e.target.value, 10))}
+                className={`${selectCls} flex-1 min-w-0`}
+                aria-label={t("recurrence.editor_on_the")}
+              >
+                {[1, 2, 3, 4, -1].map((n) => (
+                  <option key={n} value={n}>{capitalize(nthLabel(n, t))}</option>
+                ))}
+              </select>
+              <select
+                value={nthDay}
+                onChange={(e) => setNthDay(e.target.value)}
+                className={`${selectCls} flex-1 min-w-0`}
+                aria-label={t("recurrence.editor_on_the")}
+              >
+                {WEEKDAYS.map((d) => (
+                  <option key={d} value={d}>{capitalize(weekdayName(d, locale))}</option>
+                ))}
+              </select>
+            </>
+          )}
+        </div>
+      )}
+
+      <div className="flex items-center gap-2 text-sm">
+        <span className="shrink-0">{t("recurrence.editor_ends")}</span>
+        <select
+          value={endsMode}
+          onChange={(e) => setEndsMode(e.target.value as EndsMode)}
+          className={`${selectCls} ${endsMode === "never" ? "flex-1" : "shrink-0"} min-w-0`}
+          aria-label={t("recurrence.editor_ends")}
+        >
+          <option value="never">{t("recurrence.editor_never")}</option>
+          <option value="on">{t("recurrence.until")}</option>
+          <option value="after">{t("recurrence.editor_ends_after")}</option>
+        </select>
+        {endsMode === "on" && (
+          <input
+            type="date"
+            value={untilDate}
+            onChange={(e) => setUntilDate(e.target.value)}
+            className={`${selectCls} flex-1 min-w-0`}
+            aria-label={t("recurrence.editor_ends_on")}
+          />
+        )}
+        {endsMode === "after" && (
+          <>
+            <Input
+              type="number"
+              min={1}
+              max={999}
+              value={count}
+              onChange={(e) => {
+                const n = parseInt(e.target.value, 10);
+                setCount(Number.isFinite(n) ? Math.max(1, n) : 1);
+              }}
+              className="w-16 shrink-0"
+              aria-label={t("recurrence.editor_ends_after")}
+            />
+            <span className="text-muted-foreground truncate">{t("recurrence.editor_occurrences")}</span>
+          </>
+        )}
+      </div>
+
+      <div className="flex items-center justify-between gap-3 border-t border-border pt-3">
+        <p className="text-xs text-muted-foreground truncate min-w-0" title={summary ?? undefined}>
+          {summary}
+        </p>
+        <div className="flex gap-2 shrink-0">
+          <Button variant="outline" size="sm" onClick={onCancel}>
+            {t("form.cancel")}
+          </Button>
+          <Button size="sm" onClick={handleSave}>
+            {t("form.save")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/contacts/__tests__/contacts-sidebar.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen } from '@testing-library/react';
+import { fireEvent } from '@testing-library/dom';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { ContactsSidebar } from '../contacts-sidebar';
+import type { ContactCard } from '@/lib/jmap/types';
+
+// next-intl + next/navigation are mocked globally in vitest.setup (t returns the key).
+vi.mock('@/stores/account-store', () => {
+  const state = { accounts: [], activeAccountId: null };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  return { useAccountStore: hook };
+});
+
+const group = {
+  id: 'g1',
+  kind: 'group',
+  name: { full: 'Team' },
+  members: { '1': true },
+} as unknown as ContactCard;
+
+function renderSidebar(onComposeGroup = vi.fn()) {
+  render(
+    <ContactsSidebar
+      groups={[group]}
+      individuals={[]}
+      addressBooks={[]}
+      activeCategory="all"
+      onSelectCategory={vi.fn()}
+      onCreateGroup={vi.fn()}
+      onCreateContact={vi.fn()}
+      onEditGroup={vi.fn()}
+      onDeleteGroup={vi.fn()}
+      onComposeGroup={onComposeGroup}
+    />,
+  );
+  return onComposeGroup;
+}
+
+describe('ContactsSidebar — compose to group', () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it('shows a "Send email to group" submenu in the group context menu', () => {
+    renderSidebar();
+    fireEvent.contextMenu(screen.getByText('Team'));
+    expect(screen.getByText('groups.send_email')).toBeInTheDocument();
+    // and the existing Edit/Delete entries still render
+    expect(screen.getByText('groups.edit')).toBeInTheDocument();
+    expect(screen.getByText('form.delete')).toBeInTheDocument();
+  });
+
+  it('calls onComposeGroup(groupId, field) when a To/Cc/Bcc item is clicked', () => {
+    const onComposeGroup = renderSidebar();
+    fireEvent.contextMenu(screen.getByText('Team'));
+
+    // Open the submenu (hover) then click "Cc".
+    const trigger = screen.getByText('groups.send_email').closest('.relative')!;
+    fireEvent.mouseOver(trigger);
+    fireEvent.mouseEnter(trigger);
+
+    fireEvent.click(screen.getByText('groups.send_email_cc'));
+    expect(onComposeGroup).toHaveBeenCalledWith('g1', 'cc');
+  });
+});

components/contacts/contact-activity.tsx

@@ -172,7 +172,7 @@ export function ContactActivity({ contact }: ContactActivityProps) {
 
   const handleOpenEmail = (email: Email) => {
     selectEmail(email);
-    router.push("/mail");
+    router.push("/");
   };
 
   const handleOpenEvent = (event: CalendarEvent) => {

components/contacts/contact-detail.tsx

@@ -32,6 +32,8 @@ interface ContactDetailProps {
   onDelete: () => void;
   onAddToGroup?: () => void;
   onDuplicate?: () => void;
+  /** Compose an email to this contact in the app (no OS mailto handoff). */
+  onCompose?: () => void;
   isMobile?: boolean;
   className?: string;
 }
@@ -115,7 +117,7 @@ function formatDate(dateInput: AnniversaryDate): string {
   return dateStr;
 }
 
-export function ContactDetail({ contact, onEdit, onDelete, onAddToGroup, onDuplicate, isMobile, className }: ContactDetailProps) {
+export function ContactDetail({ contact, onEdit, onDelete, onAddToGroup, onDuplicate, onCompose, isMobile, className }: ContactDetailProps) {
   const t = useTranslations("contacts");
   const smimeStore = useSmimeStore();
   const [parsedCerts, setParsedCerts] = useState<Map<number, CertificateInfo>>(new Map());
@@ -201,7 +203,6 @@ export function ContactDetail({ contact, onEdit, onDelete, onAddToGroup, onDupli
   const notes = contact.notes ? Object.values(contact.notes) : [];
   const titles = contact.titles ? Object.values(contact.titles) : [];
   const jobTitles = titles.filter(t => t.kind !== "role");
-  const roles = titles.filter(t => t.kind === "role");
   const onlineServices = contact.onlineServices ? Object.values(contact.onlineServices) : [];
   const anniversaries = contact.anniversaries ? Object.values(contact.anniversaries) : [];
   const keywords = contact.keywords ? Object.keys(contact.keywords).filter(k => contact.keywords![k]) : [];
@@ -260,14 +261,16 @@ export function ContactDetail({ contact, onEdit, onDelete, onAddToGroup, onDupli
             </div>
           </div>
           <div className="flex gap-2 flex-shrink-0 flex-wrap">
-            {email && (
+            {email && onCompose && (
-              <a
+              <Button
-                href={`mailto:${email}`}
+                variant="outline"
-                className="inline-flex items-center justify-center rounded-md font-medium h-9 px-3 text-sm border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors touch-manipulation"
+                size="sm"
+                onClick={onCompose}
+                className="touch-manipulation"
               >
                 <Send className="w-4 h-4 mr-1" />
                 {t("detail.compose_email")}
-              </a>
+              </Button>
             )}
             {phone && (
               <a

components/contacts/contact-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo, useCallback, useEffect, useRef } from "react";
+import { useState, useMemo, useCallback, useRef } from "react";
 import { useTranslations } from "next-intl";
 import { X, Plus, ChevronDown, ChevronRight, User, Building, MapPin, Globe, Cake, Heart, Tag, StickyNote, Mail, Phone, Calendar, UserCircle, Book, Camera, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";

components/contacts/contact-group-detail.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { Users, Pencil, Trash2, UserMinus } from "lucide-react";
+import { Users, Pencil, Trash2, UserMinus, Mail } from "lucide-react";
 import { Avatar } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -15,6 +15,8 @@ interface ContactGroupDetailProps {
   onDelete: () => void;
   onRemoveMember: (memberId: string) => void;
   onSelectMember: (id: string) => void;
+  /** Compose an email to every member with the recipients placed in `field`. */
+  onComposeGroup?: (field: "to" | "cc" | "bcc") => void;
   isMobile?: boolean;
   className?: string;
 }
@@ -26,11 +28,13 @@ export function ContactGroupDetail({
   onDelete,
   onRemoveMember,
   onSelectMember,
+  onComposeGroup,
   isMobile,
   className,
 }: ContactGroupDetailProps) {
   const t = useTranslations("contacts");
   const groupName = getContactDisplayName(group);
+  const hasEmailMembers = members.some((m) => getContactPrimaryEmail(m).trim());
 
   return (
     <div className={cn("flex flex-col h-full overflow-y-auto", className)}>
@@ -62,6 +66,25 @@ export function ContactGroupDetail({
             </Button>
           </div>
         </div>
+        {onComposeGroup && hasEmailMembers && (
+          <div className="flex flex-wrap items-center gap-2 mt-4">
+            <Mail className="w-4 h-4 text-muted-foreground" aria-hidden />
+            <span className="text-sm text-muted-foreground">{t("groups.send_email")}</span>
+            <div className="inline-flex gap-1">
+              {(["to", "cc", "bcc"] as const).map((field) => (
+                <Button
+                  key={field}
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onComposeGroup(field)}
+                  className="touch-manipulation"
+                >
+                  {t(`groups.send_email_${field}`)}
+                </Button>
+              ))}
+            </div>
+          </div>
+        )}
       </div>
 
       <div className="px-6 py-4">

components/contacts/contacts-sidebar.tsx

@@ -2,10 +2,10 @@
 
 import { useMemo, useState, useCallback, useEffect, useRef, type DragEvent } from "react";
 import { useTranslations } from "next-intl";
-import { BookUser, User, Users, Plus, Share2, Book, ChevronRight, ChevronDown, UserPlus, UsersRound, Upload, Tag, Pencil, Trash2, Settings } from "lucide-react";
+import { BookUser, User, Users, Plus, Share2, Book, BookPlus, ChevronRight, ChevronDown, UserPlus, UsersRound, Upload, Tag, Pencil, Trash2, Settings, Mail } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
-import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from "@/components/ui/context-menu";
+import { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuSubMenu } from "@/components/ui/context-menu";
 import { useContextMenu } from "@/hooks/use-context-menu";
 import { cn } from "@/lib/utils";
 import type { ContactCard, AddressBook } from "@/lib/jmap/types";
@@ -22,9 +22,11 @@ interface ContactsSidebarProps {
   onSelectCategory: (category: ContactCategory) => void;
   onCreateGroup: () => void;
   onCreateContact: () => void;
+  onCreateAddressBook?: () => void;
   onImport?: () => void;
   onEditGroup?: (groupId: string) => void;
   onDeleteGroup?: (groupId: string) => void;
+  onComposeGroup?: (groupId: string, field: "to" | "cc" | "bcc") => void;
   onDropContacts?: (contactIds: string[], addressBook: AddressBook) => void;
   onDropContactsToCategory?: (contactIds: string[], keyword: string) => void;
   onRenameAddressBook?: (addressBook: AddressBook) => void;
@@ -90,9 +92,11 @@ export function ContactsSidebar({
   onSelectCategory,
   onCreateGroup,
   onCreateContact,
+  onCreateAddressBook,
   onImport,
   onEditGroup,
   onDeleteGroup,
+  onComposeGroup,
   onDropContacts,
   onDropContactsToCategory,
   onRenameAddressBook,
@@ -296,6 +300,15 @@ export function ContactsSidebar({
                 <UsersRound className="w-4 h-4" />
                 {t("groups.create")}
               </button>
+              {onCreateAddressBook && (
+                <button
+                  className="w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors text-left"
+                  onClick={() => { setShowMenu(false); onCreateAddressBook(); }}
+                >
+                  <BookPlus className="w-4 h-4" />
+                  {t("address_books.create")}
+                </button>
+              )}
               {onImport && (
                 <button
                   className="w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors text-left"
@@ -684,6 +697,21 @@ export function ContactsSidebar({
               onEditGroup?.(groupContextMenu.data!.id);
             }}
           />
+          {onComposeGroup && (
+            <ContextMenuSubMenu icon={Mail} label={t("groups.send_email")}>
+              {(["to", "cc", "bcc"] as const).map((field) => (
+                <ContextMenuItem
+                  key={field}
+                  label={t(`groups.send_email_${field}`)}
+                  onClick={() => {
+                    const groupId = groupContextMenu.data!.id;
+                    closeGroupContextMenu();
+                    onComposeGroup(groupId, field);
+                  }}
+                />
+              ))}
+            </ContextMenuSubMenu>
+          )}
           <ContextMenuSeparator />
           <ContextMenuItem
             icon={Trash2}

components/email/__tests__/contact-sidebar-edit.test.tsx

@@ -0,0 +1,106 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { ContactSidebarPanel } from '../email-viewer';
+import type { ContactCard } from '@/lib/jmap/types';
+
+const contact: ContactCard = {
+  id: 'c1',
+  addressBookIds: {},
+  name: {
+    components: [
+      { kind: 'given', value: 'Alice' },
+      { kind: 'surname', value: 'Smith' },
+    ],
+    isOrdered: true,
+  },
+  emails: { e0: { address: 'alice@example.com' } },
+};
+
+const unknownEmail = 'unknown@example.com';
+
+describe('ContactSidebarPanel', () => {
+  beforeEach(() => {
+    Object.assign(navigator, {
+      clipboard: { writeText: vi.fn().mockResolvedValue(undefined) },
+    });
+  });
+
+  it('shows Edit button when contact is known and onEditContact is provided', () => {
+    render(
+      <ContactSidebarPanel
+        email="alice@example.com"
+        contact={contact}
+        onClose={vi.fn()}
+        onEditContact={vi.fn()}
+      />,
+    );
+    // useTranslations mock returns the key, so we look for the common.edit key
+    expect(screen.getByTitle('contact_sidebar.action_edit_title')).toBeInTheDocument();
+    expect(screen.getByText('edit')).toBeInTheDocument();
+  });
+
+  it('calls onEditContact when Edit button is clicked', () => {
+    const onEditContact = vi.fn();
+    render(
+      <ContactSidebarPanel
+        email="alice@example.com"
+        contact={contact}
+        onClose={vi.fn()}
+        onEditContact={onEditContact}
+      />,
+    );
+    fireEvent.click(screen.getByTitle('contact_sidebar.action_edit_title'));
+    expect(onEditContact).toHaveBeenCalledOnce();
+  });
+
+  it('does not show Edit button when contact is null', () => {
+    render(
+      <ContactSidebarPanel
+        email={unknownEmail}
+        contact={null}
+        onClose={vi.fn()}
+        onEditContact={vi.fn()}
+      />,
+    );
+    expect(screen.queryByTitle('contact_sidebar.action_edit_title')).not.toBeInTheDocument();
+  });
+
+  it('does not show Edit button when onEditContact is not provided', () => {
+    render(
+      <ContactSidebarPanel
+        email="alice@example.com"
+        contact={contact}
+        onClose={vi.fn()}
+      />,
+    );
+    expect(screen.queryByTitle('contact_sidebar.action_edit_title')).not.toBeInTheDocument();
+  });
+
+  it('shows "not in contacts" message and Add button for unknown email', () => {
+    const onAddToContacts = vi.fn();
+    render(
+      <ContactSidebarPanel
+        email={unknownEmail}
+        contact={null}
+        onClose={vi.fn()}
+        onAddToContacts={onAddToContacts}
+      />,
+    );
+    expect(screen.getByText('contact_sidebar.not_in_contacts')).toBeInTheDocument();
+    fireEvent.click(screen.getByText('contact_sidebar.add_to_contacts'));
+    expect(onAddToContacts).toHaveBeenCalledWith(unknownEmail, undefined);
+  });
+
+  it('calls onClose when the close button is clicked', () => {
+    const onClose = vi.fn();
+    render(
+      <ContactSidebarPanel
+        email="alice@example.com"
+        contact={contact}
+        onClose={onClose}
+      />,
+    );
+    fireEvent.click(screen.getByLabelText('contact_sidebar.close'));
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+});

components/email/__tests__/email-list-item.test.tsx

@@ -68,10 +68,12 @@ describe('EmailListItem tag badge', () => {
     expect(screen.getByText('Blue')).toBeInTheDocument();
   });
 
-  it('does not show badge when keyword id not in settings', () => {
+  it('shows a gray fallback badge when keyword id is not in settings', () => {
     const email = makeEmail({ keywords: { $seen: true, '$label:unknown-tag': true } });
     render(<EmailListItem email={email} />);
-    expect(screen.queryByText('unknown-tag')).not.toBeInTheDocument();
+    // Unknown tags fall back to the raw id as label with a gray dot
+    // (see email-list-item.tsx: keywordDefs fallback).
+    expect(screen.getByText('unknown-tag')).toBeInTheDocument();
   });
 
   it('shows custom keyword label', () => {

components/email/__tests__/recipient-chip-drag.test.tsx

@@ -0,0 +1,364 @@
+import { render, screen, act } from '@testing-library/react';
+import { fireEvent } from '@testing-library/dom';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { EmailComposer } from '../email-composer';
+
+// ─── Heavy component mocks ────────────────────────────────────────────────────
+
+vi.mock('@/components/email/rich-text-editor', () => ({
+  RichTextEditor: ({ onChange }: { onChange?: (html: string) => void }) => (
+    React.createElement('div', { 'data-testid': 'rich-text-editor', onClick: () => onChange?.('') })
+  ),
+}));
+
+vi.mock('@/components/plugins/plugin-slot', () => ({ PluginSlot: () => null }));
+vi.mock('@/components/identity/sub-address-helper', () => ({ SubAddressHelper: () => null }));
+vi.mock('@/components/templates/template-picker', () => ({ TemplatePicker: () => null }));
+vi.mock('@/components/templates/template-form', () => ({ TemplateForm: () => null }));
+vi.mock('@/components/files/file-preview-modal', () => ({ FilePreviewModal: () => null }));
+vi.mock('@/hooks/use-focus-trap', () => ({
+  useFocusTrap: () => ({ ref: { current: null } }),
+}));
+vi.mock('@/hooks/use-pro-multi-account-identities', () => ({
+  useProMultiAccountIdentities: () => ({ enabled: false, groups: [], allIdentities: [] }),
+  stripCrossAccountIdentityPrefix: (id: string) => ({ localAccountId: null, rawId: id }),
+}));
+
+// ─── Store mocks ──────────────────────────────────────────────────────────────
+// vi.mock factories are hoisted, so all values must be defined inline.
+
+vi.mock('@/stores/auth-store', () => {
+  const state = {
+    client: null,
+    identities: [],
+    primaryIdentity: null,
+    isAuthenticated: false,
+    isDemoMode: false,
+    activeAccountId: null,
+    connectionLost: false,
+    getClientForAccount: () => undefined,
+    getAllConnectedClients: () => new Map(),
+    syncIdentities: () => {},
+    refreshIdentities: async () => {},
+  };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
+  return { useAuthStore: hook };
+});
+
+vi.mock('@/stores/identity-store', () => {
+  const state = { identities: [], defaultIdentityId: null };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
+  return { useIdentityStore: hook };
+});
+
+vi.mock('@/stores/account-store', () => {
+  const state = { accounts: [], getAccountById: () => undefined };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
+  return { useAccountStore: hook };
+});
+
+vi.mock('@/stores/smime-store', () => {
+  const state = {
+    certs: [],
+    signingEnabled: false,
+    encryptionEnabled: false,
+    defaultSigningCertId: null,
+    defaultEncryptionCertId: null,
+  };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
+  return { useSmimeStore: hook };
+});
+
+vi.mock('@/stores/email-store', () => {
+  const state = {
+    draftSaveEnabled: false,
+    sendRawEmail: async () => ({ sent: true }),
+  };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
+  return { useEmailStore: hook };
+});
+
+vi.mock('@/stores/settings-store', () => {
+  const state = {
+    timeFormat: '24h',
+    plainTextMode: false,
+    subAddressDelimiter: '+',
+    autoSelectReplyIdentity: true,
+    attachmentReminderEnabled: false,
+    attachmentReminderKeywords: [],
+    sendDelaySeconds: 0,
+    signaturePosition: 'above_quote',
+    signatureSeparatorEnabled: false,
+    requestReadReceiptDefault: false,
+    addTrustedSender: () => {},
+    trustedSendersAddressBook: null,
+  };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
+  return { useSettingsStore: hook };
+});
+
+vi.mock('@/stores/contact-store', () => {
+  const state = {
+    contacts: [],
+    getAutocomplete: async () => [],
+    addToTrustedSendersBook: async () => {},
+  };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
+  return { useContactStore: hook };
+});
+
+vi.mock('@/stores/template-store', () => {
+  const state = { templates: [], addTemplate: async () => {} };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
+  return { useTemplateStore: hook };
+});
+
+// ─── Misc dependency mocks ────────────────────────────────────────────────────
+
+vi.mock('@/stores/toast-store', () => ({
+  toast: { info: () => {}, error: () => {}, success: () => {} },
+}));
+
+vi.mock('@/lib/plugin-hooks', () => ({
+  emailHooks: {
+    onComposerOpen: { call: async () => [] },
+    onRecipientChange: { call: async () => [] },
+    getRecipientSuggestions: { call: async () => [] },
+    onSend: { call: async () => [] },
+    beforeSend: { call: async () => [] },
+  },
+  contactHooks: {
+    search: { call: async () => [] },
+  },
+}));
+
+vi.mock('@/lib/email-sanitization', () => ({
+  sanitizeSignatureHtml: (v: string) => v,
+  sanitizeEmailHtml: (v: string) => v,
+  parseHtmlSafely: (html: string) => new DOMParser().parseFromString(html, 'text/html'),
+}));
+
+vi.mock('@/lib/reply-identity', () => ({ resolveReplyFrom: () => null }));
+vi.mock('@/lib/email-threading', () => ({
+  computeReplyThreadingHeaders: () => ({ inReplyTo: [], references: [] }),
+}));
+vi.mock('@/lib/signature-utils', () => ({
+  appendPlainTextSignature: (body: string) => body,
+  getPlainTextSignature: () => '',
+}));
+vi.mock('@/lib/sub-addressing', () => ({ generateSubAddress: () => '' }));
+vi.mock('@/lib/smime/smime-sign', () => ({ smimeSign: async () => null }));
+vi.mock('@/lib/smime/smime-encrypt', () => ({ smimeEncrypt: async () => null }));
+vi.mock('@/lib/smime/mime-builder', () => ({
+  buildMimeMessage: () => null,
+  wrapCmsAsSmimeMessage: () => null,
+}));
+vi.mock('@/lib/debug', () => ({ debug: () => {} }));
+vi.mock('@/components/email/quoted-html', () => ({
+  buildQuotedHtmlBlock: () => '',
+  serializeEditorContent: () => '',
+}));
+vi.mock('@/lib/template-utils', () => ({ substitutePlaceholders: (s: string) => s }));
+
+// ─── DataTransfer polyfill ────────────────────────────────────────────────────
+
+/** jsdom's built-in DataTransfer doesn't fully support setData/getData in synthetic drag events. */
+class MockDataTransfer {
+  private _data: Record<string, string> = {};
+  types: string[] = [];
+  effectAllowed = '';
+  dropEffect = '';
+
+  setData(type: string, data: string) {
+    this._data[type] = data;
+    if (!this.types.includes(type)) this.types.push(type);
+  }
+
+  getData(type: string): string {
+    return this._data[type] ?? '';
+  }
+
+  setDragImage(_image: Element, _x: number, _y: number) {
+    // no-op: jsdom has no rendering, but the chip drag handler calls this.
+  }
+}
+
+// ─── Shared test data ─────────────────────────────────────────────────────────
+
+const BASE_DATA = {
+  to: 'alice@example.com, ',
+  cc: '',
+  bcc: '',
+  subject: '',
+  body: '',
+  showCc: true,
+  showBcc: true,
+  selectedIdentityId: null,
+  subAddressTag: '',
+  mode: 'compose' as const,
+  draftId: null,
+};
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe('RecipientChipInput drag and drop', () => {
+  beforeEach(() => { vi.clearAllMocks(); });
+
+  it('renders recipient chips with draggable="true"', async () => {
+    render(<EmailComposer initialData={BASE_DATA} />);
+
+    const chipText = await screen.findByText('alice@example.com');
+    const chipSpan = chipText.closest('[draggable]');
+    expect(chipSpan).not.toBeNull();
+    expect(chipSpan).toHaveAttribute('draggable', 'true');
+  });
+
+  it('onDragStart encodes the recipient and source field into dataTransfer', async () => {
+    render(<EmailComposer initialData={BASE_DATA} />);
+
+    const chipText = await screen.findByText('alice@example.com');
+    const chipSpan = chipText.closest('[draggable]') as HTMLElement;
+
+    const dt = new MockDataTransfer();
+    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' });
+  });
+
+  it('keeps a display name with a comma in a single chip (array model)', async () => {
+    render(<EmailComposer initialData={{ ...BASE_DATA, to: '"Doo, John" <john@doo.org>, ' }} />);
+
+    // One chip, displayed as "Doo, John (john@doo.org)" — not split on the comma.
+    const chip = await screen.findByText('Doo, John (john@doo.org)');
+    const chipSpan = chip.closest('[draggable]') as HTMLElement;
+    expect(chipSpan).not.toBeNull();
+
+    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' });
+  });
+
+  it('onDragEnd clears the opacity class on the chip', async () => {
+    render(<EmailComposer initialData={BASE_DATA} />);
+
+    const chipText = await screen.findByText('alice@example.com');
+    const chipSpan = chipText.closest('[draggable]') as HTMLElement;
+
+    fireEvent.dragStart(chipSpan, { dataTransfer: new MockDataTransfer() });
+    expect(chipSpan.className).toContain('opacity-50');
+
+    fireEvent.dragEnd(chipSpan);
+    expect(chipSpan.className).not.toContain('opacity-50');
+  });
+
+  it('dragOver on a different field container adds ring indicator; dragLeave removes it', async () => {
+    render(<EmailComposer initialData={BASE_DATA} />);
+
+    await screen.findByText('alice@example.com');
+
+    // The flex-wrap containers are the actual drop zones
+    const allContainers = Array.from(document.querySelectorAll('[class*="flex-wrap"]'));
+    // To-container has the draggable chip; cc-container doesn't
+    const toContainer = allContainers.find(el => el.querySelector('[draggable]')) as HTMLElement;
+    const ccContainer = allContainers.find(el => el !== toContainer) as HTMLElement;
+
+    if (!ccContainer) return;
+
+    const dt = new MockDataTransfer();
+    dt.setData('application/x-recipient-chip', JSON.stringify({ recipient: { email: 'alice@example.com' }, fromField: 'to' }));
+
+    fireEvent.dragOver(ccContainer, { dataTransfer: dt });
+    expect(ccContainer.className).toContain('ring-primary');
+
+    fireEvent.dragLeave(ccContainer, { relatedTarget: null });
+    expect(ccContainer.className).not.toContain('ring-primary');
+  });
+
+  it('drop on a different field container moves the chip', async () => {
+    render(<EmailComposer initialData={BASE_DATA} />);
+    await screen.findByText('alice@example.com');
+
+    const allContainers = Array.from(document.querySelectorAll('[class*="flex-wrap"]'));
+    const toContainer = allContainers.find(el => el.querySelector('[draggable]')) as HTMLElement;
+    const ccContainer = allContainers.find(el => el !== toContainer) as HTMLElement;
+
+    if (!toContainer || !ccContainer) return;
+
+    const dt = new MockDataTransfer();
+    dt.setData('application/x-recipient-chip', JSON.stringify({ recipient: { email: 'alice@example.com' }, fromField: 'to' }));
+    fireEvent.dragOver(ccContainer, { dataTransfer: dt });
+    act(() => {
+      fireEvent.drop(ccContainer, { dataTransfer: dt });
+    });
+
+    // Chip should still appear exactly once (moved, not duplicated or lost)
+    await screen.findByText('alice@example.com');
+    expect(screen.getAllByText('alice@example.com')).toHaveLength(1);
+
+    // The To container must now be empty
+    expect(toContainer.querySelectorAll('[draggable]')).toHaveLength(0);
+  });
+
+  it('drop on the same field container is a no-op', async () => {
+    render(<EmailComposer initialData={BASE_DATA} />);
+    await screen.findByText('alice@example.com');
+
+    const allContainers = Array.from(document.querySelectorAll('[class*="flex-wrap"]'));
+    const toContainer = allContainers.find(el => el.querySelector('[draggable]')) as HTMLElement;
+
+    const dt = new MockDataTransfer();
+    dt.setData('application/x-recipient-chip', JSON.stringify({ recipient: { email: 'alice@example.com' }, fromField: 'to' }));
+    fireEvent.dragOver(toContainer, { dataTransfer: dt });
+    act(() => {
+      fireEvent.drop(toContainer, { dataTransfer: dt });
+    });
+
+    // Chip stays present exactly once
+    expect(screen.getAllByText('alice@example.com')).toHaveLength(1);
+  });
+
+  it('dropping a chip onto the hidden Cc button shows the CC field', async () => {
+    render(<EmailComposer initialData={{ ...BASE_DATA, showCc: false, showBcc: false }} />);
+    await screen.findByText('alice@example.com');
+
+    const ccButton = screen.getByRole('button', { name: 'Cc' });
+
+    const dt = new MockDataTransfer();
+    dt.setData('application/x-recipient-chip', JSON.stringify({ recipient: { email: 'alice@example.com' }, fromField: 'to' }));
+    fireEvent.dragOver(ccButton, { dataTransfer: dt });
+    act(() => {
+      fireEvent.drop(ccButton, { dataTransfer: dt });
+    });
+
+    // cc_label is rendered by the mock translation as its key string
+    const ccLabel = await screen.findByText('cc_label');
+    expect(ccLabel).toBeInTheDocument();
+  });
+});

components/email/__tests__/recipient-paste.test.tsx

@@ -0,0 +1,317 @@
+import { render, screen } from '@testing-library/react';
+import { fireEvent } from '@testing-library/dom';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { EmailComposer } from '../email-composer';
+
+// ─── Heavy component mocks (mirrors recipient-chip-drag.test.tsx) ──────────────
+
+vi.mock('@/components/email/rich-text-editor', () => ({
+  RichTextEditor: ({ onChange }: { onChange?: (html: string) => void }) => (
+    React.createElement('div', { 'data-testid': 'rich-text-editor', onClick: () => onChange?.('') })
+  ),
+}));
+
+vi.mock('@/components/plugins/plugin-slot', () => ({ PluginSlot: () => null }));
+vi.mock('@/components/identity/sub-address-helper', () => ({ SubAddressHelper: () => null }));
+vi.mock('@/components/templates/template-picker', () => ({ TemplatePicker: () => null }));
+vi.mock('@/components/templates/template-form', () => ({ TemplateForm: () => null }));
+vi.mock('@/components/files/file-preview-modal', () => ({ FilePreviewModal: () => null }));
+vi.mock('@/hooks/use-focus-trap', () => ({
+  useFocusTrap: () => ({ ref: { current: null } }),
+}));
+vi.mock('@/hooks/use-pro-multi-account-identities', () => ({
+  useProMultiAccountIdentities: () => ({ enabled: false, groups: [], allIdentities: [] }),
+  stripCrossAccountIdentityPrefix: (id: string) => ({ localAccountId: null, rawId: id }),
+}));
+
+// ─── Store mocks ──────────────────────────────────────────────────────────────
+
+vi.mock('@/stores/auth-store', () => {
+  const state = {
+    client: null,
+    identities: [],
+    primaryIdentity: null,
+    isAuthenticated: false,
+    isDemoMode: false,
+    activeAccountId: null,
+    connectionLost: false,
+    getClientForAccount: () => undefined,
+    getAllConnectedClients: () => new Map(),
+    syncIdentities: () => {},
+    refreshIdentities: async () => {},
+  };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
+  return { useAuthStore: hook };
+});
+
+vi.mock('@/stores/identity-store', () => {
+  const state = { identities: [], defaultIdentityId: null };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
+  return { useIdentityStore: hook };
+});
+
+vi.mock('@/stores/account-store', () => {
+  const state = { accounts: [], getAccountById: () => undefined };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
+  return { useAccountStore: hook };
+});
+
+vi.mock('@/stores/smime-store', () => {
+  const state = {
+    certs: [],
+    signingEnabled: false,
+    encryptionEnabled: false,
+    defaultSigningCertId: null,
+    defaultEncryptionCertId: null,
+  };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
+  return { useSmimeStore: hook };
+});
+
+vi.mock('@/stores/email-store', () => {
+  const state = {
+    draftSaveEnabled: false,
+    sendRawEmail: async () => ({ sent: true }),
+  };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
+  return { useEmailStore: hook };
+});
+
+vi.mock('@/stores/settings-store', () => {
+  const state = {
+    timeFormat: '24h',
+    plainTextMode: false,
+    subAddressDelimiter: '+',
+    autoSelectReplyIdentity: true,
+    attachmentReminderEnabled: false,
+    attachmentReminderKeywords: [],
+    sendDelaySeconds: 0,
+    signaturePosition: 'above_quote',
+    signatureSeparatorEnabled: false,
+    requestReadReceiptDefault: false,
+    addTrustedSender: () => {},
+    trustedSendersAddressBook: null,
+  };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
+  return { useSettingsStore: hook };
+});
+
+vi.mock('@/stores/contact-store', () => {
+  const state = {
+    contacts: [],
+    getAutocomplete: async () => [],
+    addToTrustedSendersBook: async () => {},
+  };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
+  return { useContactStore: hook };
+});
+
+vi.mock('@/stores/template-store', () => {
+  const state = { templates: [], addTemplate: async () => {} };
+  const hook = (sel?: (s: typeof state) => unknown) =>
+    typeof sel === 'function' ? sel(state) : state;
+  hook.getState = () => state;
+  hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
+  return { useTemplateStore: hook };
+});
+
+// ─── Misc dependency mocks ────────────────────────────────────────────────────
+
+vi.mock('@/stores/toast-store', () => ({
+  toast: { info: () => {}, error: () => {}, success: () => {} },
+}));
+
+vi.mock('@/lib/plugin-hooks', () => ({
+  emailHooks: {
+    onComposerOpen: { call: async () => [] },
+    onRecipientChange: { call: async () => [] },
+    getRecipientSuggestions: { call: async () => [] },
+    onSend: { call: async () => [] },
+    beforeSend: { call: async () => [] },
+  },
+  contactHooks: {
+    search: { call: async () => [] },
+  },
+}));
+
+vi.mock('@/lib/email-sanitization', () => ({
+  sanitizeSignatureHtml: (v: string) => v,
+  sanitizeEmailHtml: (v: string) => v,
+  parseHtmlSafely: (html: string) => new DOMParser().parseFromString(html, 'text/html'),
+}));
+
+vi.mock('@/lib/reply-identity', () => ({ resolveReplyFrom: () => null }));
+vi.mock('@/lib/email-threading', () => ({
+  computeReplyThreadingHeaders: () => ({ inReplyTo: [], references: [] }),
+}));
+vi.mock('@/lib/signature-utils', () => ({
+  appendPlainTextSignature: (body: string) => body,
+  getPlainTextSignature: () => '',
+}));
+vi.mock('@/lib/sub-addressing', () => ({ generateSubAddress: () => '' }));
+vi.mock('@/lib/smime/smime-sign', () => ({ smimeSign: async () => null }));
+vi.mock('@/lib/smime/smime-encrypt', () => ({ smimeEncrypt: async () => null }));
+vi.mock('@/lib/smime/mime-builder', () => ({
+  buildMimeMessage: () => null,
+  wrapCmsAsSmimeMessage: () => null,
+}));
+vi.mock('@/lib/debug', () => ({ debug: () => {} }));
+vi.mock('@/components/email/quoted-html', () => ({
+  buildQuotedHtmlBlock: () => '',
+  serializeEditorContent: () => '',
+}));
+vi.mock('@/lib/template-utils', () => ({ substitutePlaceholders: (s: string) => s }));
+
+// ─── Shared test data ─────────────────────────────────────────────────────────
+
+const EMPTY_DATA = {
+  to: '',
+  cc: '',
+  bcc: '',
+  subject: '',
+  body: '',
+  showCc: true,
+  showBcc: true,
+  selectedIdentityId: null,
+  subAddressTag: '',
+  mode: 'compose' as const,
+  draftId: null,
+};
+
+/** next-intl is mocked to return the key, so the To placeholder is "to_placeholder". */
+const toInput = () => screen.getByPlaceholderText('to_placeholder') as HTMLInputElement;
+const ccInput = () => screen.getByPlaceholderText('cc_placeholder') as HTMLInputElement;
+
+const paste = (input: HTMLElement, text: string) =>
+  fireEvent.paste(input, { clipboardData: { getData: () => text } });
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe('RecipientChipInput paste', () => {
+  beforeEach(() => { vi.clearAllMocks(); });
+
+  it('splits a pasted list (comma / semicolon / whitespace) into one chip per address', () => {
+    render(<EmailComposer initialData={EMPTY_DATA} />);
+    const input = toInput(); // capture once — placeholder disappears once chips exist
+    paste(input, 'a@x.com b@y.com; c@z.com');
+
+    expect(screen.getByText('a@x.com')).toBeInTheDocument();
+    expect(screen.getByText('b@y.com')).toBeInTheDocument();
+    expect(screen.getByText('c@z.com')).toBeInTheDocument();
+    // all consumed → input cleared
+    expect(input.value).toBe('');
+  });
+
+  it('chips the valid addresses and leaves invalid text in the input', () => {
+    render(<EmailComposer initialData={EMPTY_DATA} />);
+    const input = toInput();
+    paste(input, 'foo bar a@x.com');
+
+    expect(screen.getByText('a@x.com')).toBeInTheDocument();
+    expect(input.value).toBe('foo bar');
+  });
+
+  it('does not pre-empt a single-address paste (no delimiter → normal editing)', () => {
+    render(<EmailComposer initialData={EMPTY_DATA} />);
+    paste(toInput(), 'single@x.com');
+
+    // The handler bailed out, so no chip was created from the single token.
+    expect(screen.queryByText('single@x.com')).not.toBeInTheDocument();
+  });
+
+  it('keeps display names from a fully-quoted "Name <email>" list', () => {
+    render(<EmailComposer initialData={EMPTY_DATA} />);
+    const input = toInput();
+    paste(input, '"Alice Smith <alice@x.com>", "Alex Smith <alex@x.com>"');
+
+    // Chips render as "Name (email)" when a display name is present.
+    expect(screen.getByText('Alice Smith (alice@x.com)')).toBeInTheDocument();
+    expect(screen.getByText('Alex Smith (alex@x.com)')).toBeInTheDocument();
+    expect(input.value).toBe('');
+  });
+
+  it('keeps a `Name <email>` pair as a single named chip', () => {
+    render(<EmailComposer initialData={EMPTY_DATA} />);
+    const input = toInput();
+    paste(input, 'John Doe <j@x.com>, jane@y.com');
+
+    expect(screen.getByText('John Doe (j@x.com)')).toBeInTheDocument();
+    expect(screen.getByText('jane@y.com')).toBeInTheDocument();
+    expect(input.value).toBe('');
+  });
+
+  it('keeps a comma inside a quoted display name intact', () => {
+    render(<EmailComposer initialData={EMPTY_DATA} />);
+    const input = toInput();
+    paste(input, '"Doe, John" <j@x.com>; bob@z.com');
+
+    expect(screen.getByText('Doe, John (j@x.com)')).toBeInTheDocument();
+    expect(screen.getByText('bob@z.com')).toBeInTheDocument();
+    expect(input.value).toBe('');
+  });
+
+  it('splits a newline-separated block (e.g. a spreadsheet column)', () => {
+    render(<EmailComposer initialData={EMPTY_DATA} />);
+    const input = toInput();
+    paste(input, 'a@x.com\nb@y.com\nc@z.com');
+
+    expect(screen.getByText('a@x.com')).toBeInTheDocument();
+    expect(screen.getByText('b@y.com')).toBeInTheDocument();
+    expect(screen.getByText('c@z.com')).toBeInTheDocument();
+    expect(input.value).toBe('');
+  });
+
+  it('dedupes case-insensitively within the paste and against existing chips', () => {
+    render(<EmailComposer initialData={EMPTY_DATA} />);
+    const input = toInput(); // DOM node persists across pastes (placeholder just clears)
+    paste(input, 'a@x.com, A@X.com, b@y.com'); // within-paste dup collapses
+    paste(input, 'A@X.COM, c@z.com'); // dup of an existing chip is dropped
+
+    expect(screen.getByText('b@y.com')).toBeInTheDocument();
+    expect(screen.getByText('c@z.com')).toBeInTheDocument();
+    // a@x.com appears exactly once despite three case variants across two pastes.
+    expect(screen.getAllByText('a@x.com')).toHaveLength(1);
+    expect(screen.queryByText('A@X.COM')).not.toBeInTheDocument();
+    expect(input.value).toBe('');
+  });
+
+  it('chips the valid (named) entries and leaves a non-address token behind', () => {
+    render(<EmailComposer initialData={EMPTY_DATA} />);
+    const input = toInput();
+    paste(input, '"VIP" <vip@x.com>, not-an-email, b@y.com');
+
+    expect(screen.getByText('VIP (vip@x.com)')).toBeInTheDocument();
+    expect(screen.getByText('b@y.com')).toBeInTheDocument();
+    expect(input.value).toBe('not-an-email');
+  });
+
+  it('works on the Cc field (shared handler)', () => {
+    render(<EmailComposer initialData={EMPTY_DATA} />);
+    paste(ccInput(), 'x@a.com; y@b.com');
+
+    expect(screen.getByText('x@a.com')).toBeInTheDocument();
+    expect(screen.getByText('y@b.com')).toBeInTheDocument();
+  });
+});

components/email/__tests__/signature-block.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+
+import { SignatureBlock, buildSignatureBlock, SIGNATURE_BLOCK_MARKER } from '../signature-block';
+import { serializeEditorContent } from '../quoted-html';
+
+describe('signature-block', () => {
+  it('buildSignatureBlock wraps html in the marker div', () => {
+    expect(buildSignatureBlock('<b>x</b>')).toBe(`<div ${SIGNATURE_BLOCK_MARKER}><b>x</b></div>`);
+  });
+
+  it('preserves an inline-styled signature through parse + serialize (no schema flattening)', () => {
+    const styled =
+      '<table style="background:#0a0e16;border-radius:8px"><tbody><tr>' +
+      '<td style="color:#c6f24e;font-family:\'Courier New\'">MV</td>' +
+      '</tr></tbody></table>';
+    const editor = new Editor({
+      element: document.createElement('div'),
+      extensions: [StarterKit, SignatureBlock],
+      content: `<p>Hello</p>${buildSignatureBlock(styled)}`,
+    });
+    try {
+      const out = serializeEditorContent(editor);
+      // Original inline styling survives - it is NOT re-parsed into the schema.
+      expect(out).toContain('background:#0a0e16');
+      expect(out).toContain('border-radius:8px');
+      expect(out).toContain('color:#c6f24e');
+      expect(out).toContain(SIGNATURE_BLOCK_MARKER);
+      // Surrounding body is preserved.
+      expect(out).toContain('Hello');
+      // The signature did not get the editor's generic table styling.
+      expect(out).not.toContain('rgb(204, 204, 204)');
+    } finally {
+      editor.destroy();
+    }
+  });
+});

components/email/calendar-invitation-banner.tsx

@@ -553,40 +553,10 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
     const replyToForRsvp = parsedEvent.replyTo
       || (parsedEvent.organizerCalendarAddress ? { imip: parsedEvent.organizerCalendarAddress } : null);
 
-    const imipStatus = status.toUpperCase() as 'ACCEPTED' | 'TENTATIVE' | 'DECLINED';
+    // The iMIP REPLY to the organizer is sent by the server: rsvpEvent /
-    const organizerEmail = parsedEvent?.replyTo?.imip?.replace('mailto:', '')
+    // updateEvent below pass sendSchedulingMessages=true to CalendarEvent/set
-      || parsedEvent?.organizerCalendarAddress?.replace('mailto:', '')
+    // and Stalwart queues the iTIP REPLY itself. A manual client-side reply
-      || summary?.organizerEmail
+    // here produced duplicate emails.
-      || null;
-
-    // Send the iMIP REPLY email to the organizer (client-side scheduling).
-    // Called after updating the local calendar event. Best-effort - if it
-    // fails we still report the RSVP as sent since the calendar was updated.
-    const sendImipReply = async () => {
-      if (!organizerEmail || !parsedEvent?.uid || !currentUserEmail) {
-        return;
-      }
-
-      try {
-        await client.sendImipReply({
-          organizerEmail,
-          organizerName: summary?.organizer || undefined,
-          attendeeEmail: currentUserEmail,
-          attendeeName: myParticipant?.participant.name || undefined,
-          uid: parsedEvent.uid,
-          summary: parsedEvent.title,
-          dtStart: parsedEvent.start || undefined,
-          dtEnd: summary?.end || undefined,
-          timeZone: parsedEvent.timeZone || undefined,
-          isAllDay: parsedEvent.showWithoutTime || false,
-          sequence: parsedEvent.sequence,
-          status: imipStatus,
-        });
-      } catch {
-        // Best-effort: don't block the RSVP success notification
-      }
-    };
-
     try {
       const eventForRsvp = existingEvent
         ? await resolveExistingEventForRsvp()
@@ -601,7 +571,6 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
       );
       if (eventForRsvp && existingEventParticipant) {
         await rsvpEvent(client, eventForRsvp.id, existingEventParticipant.id, status, replyToForRsvp);
-        await sendImipReply();
         setRsvpStatus(status);
         setActionNotice(t('rsvp_sent'));
         setState('parsed');
@@ -615,7 +584,6 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
             participants: repairedParticipants,
             replyTo: replyToForRsvp ?? undefined,
           }, true);
-          await sendImipReply();
           setRsvpStatus(status);
           setActionNotice(t('rsvp_sent'));
           setState('parsed');
@@ -632,7 +600,6 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
             || (newEvent && currentUserEmail ? findParticipantByEmail(newEvent, currentUserEmail) : null);
           if (newEvent && participant) {
             await rsvpEvent(client, newEvent.id, participant.id, status, replyToForRsvp);
-            await sendImipReply();
             setRsvpStatus(status);
             setActionNotice(t('rsvp_sent'));
           } else {

components/email/email-context-menu.tsx

@@ -34,6 +34,7 @@ import {
   XCircle,
 } from "lucide-react";
 import { cn, buildMailboxTree, MailboxNode } from "@/lib/utils";
+import { localizeMailboxName } from "@/lib/mailbox-label";
 import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";
 
 interface Position {
@@ -143,6 +144,7 @@ export function EmailContextMenu({
   onRescheduleScheduled,
 }: EmailContextMenuProps) {
   const t = useTranslations("context_menu");
+  const tSidebar = useTranslations("sidebar");
   const _tColor = useTranslations("email_viewer.color_tag");
   const emailKeywords = useSettingsStore((state) => state.emailKeywords);
   const isUnread = !email.keywords?.$seen;
@@ -302,12 +304,13 @@ export function EmailContextMenu({
               return nodes.map((node) => {
                 const Icon = getMailboxIcon(node.role);
                 const isTarget = moveTargetIds.has(node.id);
+                const nodeLabel = localizeMailboxName(node.role, node.name, (k) => tSidebar(`mailboxes.${k}`));
                 return (
                   <div key={node.id}>
                     {isTarget ? (
                       <ContextMenuItem
                         icon={Icon}
-                        label={node.name}
+                        label={nodeLabel}
                         onClick={() =>
                           handleAction(() =>
                             showBatchActions
@@ -319,7 +322,7 @@ export function EmailContextMenu({
                     ) : (
                       <div className="px-3 py-1.5 text-sm flex items-center gap-2 text-muted-foreground">
                         <Icon className="w-4 h-4 flex-shrink-0" />
-                        <span>{node.name}</span>
+                        <span>{nodeLabel}</span>
                       </div>
                     )}
                     {node.children.length > 0 && (

components/email/email-hover-actions.tsx

@@ -4,7 +4,7 @@ import { Email } from "@/lib/jmap/types";
 import { useSettingsStore } from "@/stores/settings-store";
 import type { HoverAction } from "@/stores/settings-store";
 import { cn } from "@/lib/utils";
-import { Trash2, Star, Mail, MailOpen, Archive, Tag, ShieldAlert } from "lucide-react";
+import { Trash2, Star, Mail, MailOpen, Archive, Tag, ShieldAlert, ShieldCheck } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useIsMobile } from "@/hooks/use-media-query";
 
@@ -17,6 +17,10 @@ interface EmailHoverActionsProps {
   onArchive?: () => void;
   onSetColorTag?: (color: string | null) => void;
   onMarkAsSpam?: () => void;
+  // When the email lives in a junk folder (incl. the aggregate "All Junk" view)
+  // the spam quick-action flips to "not spam".
+  isInJunk?: boolean;
+  onUndoSpam?: () => void;
 }
 
 const ACTION_CONFIG: Record<HoverAction, {
@@ -72,6 +76,8 @@ export function EmailHoverActions({
   onArchive,
   onSetColorTag,
   onMarkAsSpam,
+  isInJunk = false,
+  onUndoSpam,
 }: EmailHoverActionsProps) {
   const hoverActions = useSettingsStore((state) => state.hoverActions);
   const hoverActionsMode = useSettingsStore((state) => state.hoverActionsMode);
@@ -106,7 +112,8 @@ export function EmailHoverActions({
         onSetColorTag?.(null);
         break;
       case "spam":
-        onMarkAsSpam?.();
+        if (isInJunk) onUndoSpam?.();
+        else onMarkAsSpam?.();
         break;
     }
   };
@@ -116,20 +123,28 @@ export function EmailHoverActions({
     if (!config) return null;
     const Icon = config.icon;
 
+    // In a junk context the spam action becomes "not spam".
+    const isNotSpam = actionId === "spam" && isInJunk;
     const DisplayIcon = actionId === "markRead"
       ? (isUnread ? MailOpen : Mail)
       : actionId === "star" && isStarred
         ? Star
-        : Icon;
+        : isNotSpam
+          ? ShieldCheck
+          : Icon;
+    const title = isNotSpam ? t("not_spam") : t(config.titleKey);
+    const className = isNotSpam
+      ? "hover:text-green-600 dark:hover:text-green-400"
+      : config.className;
 
     return (
       <button
         key={actionId}
         onClick={(e) => handleAction(e, actionId)}
-        title={t(config.titleKey)}
+        title={title}
         className={cn(
           "p-1.5 rounded-md transition-colors duration-100 text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10",
-          config.className,
+          className,
         )}
       >
         <DisplayIcon

components/email/email-identity-badge.tsx

@@ -5,6 +5,7 @@ import { Mail, Tag } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { Email, Identity } from '@/lib/jmap/types';
 import { parseSubAddress } from '@/lib/sub-addressing';
+import { isAuthenticationSpoofed } from '@/lib/email-headers';
 import { useSettingsStore } from '@/stores/settings-store';
 
 interface EmailIdentityBadgeProps {
@@ -29,10 +30,17 @@ export function EmailIdentityBadge({
   // Parse the from address to check for sub-addressing
   const parsedFrom = parseSubAddress(fromAddress, subAddressDelimiter);
 
-  // Find matching identity (email sent BY the user)
+  // Find matching identity (email sent BY the user). When the message is
-  const matchingIdentity = identities.find(
+  // likely spoofed, the From address can't be trusted, so we ignore any
-    (identity) => identity.email === fromAddress || identity.email === `${parsedFrom.baseUser}@${parsedFrom.domain}`
+  // identity match — otherwise a forged From matching one of the user's own
-  );
+  // addresses would render a misleading "via <identity>" badge that implies
+  // legitimacy.
+  const spoofed = isAuthenticationSpoofed(email.authenticationResults);
+  const matchingIdentity = spoofed
+    ? undefined
+    : identities.find(
+        (identity) => identity.email === fromAddress || identity.email === `${parsedFrom.baseUser}@${parsedFrom.domain}`
+      );
 
   // Check if email was sent TO a sub-address (received email)
   let receivedToTag: string | null = null;

components/email/email-list-item.tsx

@@ -29,11 +29,12 @@ interface EmailListItemProps {
   onArchive?: () => void;
   onSetColorTag?: (color: string | null) => void;
   onMarkAsSpam?: () => void;
+  onUndoSpam?: () => void;
 }
 
-export function EmailListItem({ email, selected, onClick, onDoubleClick, onContextMenu, onToggleStar, onMarkAsRead, onDelete, onArchive, onSetColorTag, onMarkAsSpam }: EmailListItemProps) {
+export function EmailListItem({ email, selected, onClick, onDoubleClick, onContextMenu, onToggleStar, onMarkAsRead, onDelete, onArchive, onSetColorTag, onMarkAsSpam, onUndoSpam }: EmailListItemProps) {
   const t = useTranslations('email_viewer');
-  const { selectedEmailIds, toggleEmailSelection, selectRangeEmails, selectedMailbox, mailboxes, clearSelection } = useEmailStore();
+  const { selectedEmailIds, toggleEmailSelection, selectRangeEmails, selectedMailbox, mailboxes, clearSelection, isUnifiedView, unifiedRole } = useEmailStore();
   const showPreview = useSettingsStore((state) => state.showPreview);
   const density = useSettingsStore((state) => state.density);
   const mailLayout = useSettingsStore((state) => state.mailLayout);
@@ -46,8 +47,11 @@ export function EmailListItem({ email, selected, onClick, onDoubleClick, onConte
   const isImportant = email.keywords?.["$important"];
   const isAnswered = email.keywords?.$answered;
   const isForwarded = email.keywords?.$forwarded;
-  // In Sent/Drafts folders, show recipient instead of sender (which is always "me")
+  // In Sent/Drafts folders, show recipient instead of sender (which is always "me").
-  const currentMailboxRole = mailboxes.find(mb => mb.id === selectedMailbox)?.role;
+  // In aggregate role-views the selected mailbox is virtual → fall back to the
+  // unified role so junk-contextual UI (spam ↔ not-spam) and avatar hiding work.
+  const currentMailboxRole = mailboxes.find(mb => mb.id === selectedMailbox)?.role
+    ?? (isUnifiedView ? (unifiedRole ?? undefined) : undefined);
   const showRecipient = currentMailboxRole === 'sent' || currentMailboxRole === 'drafts';
   const sender = showRecipient ? (email.to?.[0] ?? email.from?.[0]) : email.from?.[0];
   const isMobile = useUIStore((state) => state.isMobile);
@@ -162,7 +166,7 @@ export function EmailListItem({ email, selected, onClick, onDoubleClick, onConte
 
         {/* Unread indicator */}
         {isUnread && (
-          <div className="absolute left-1 top-1/2 -translate-y-1/2">
+          <div className="absolute left-0.5 top-1/2 -translate-y-1/2">
             <Circle className="w-2 h-2 fill-unread text-unread" />
           </div>
         )}
@@ -191,13 +195,13 @@ export function EmailListItem({ email, selected, onClick, onDoubleClick, onConte
                 </span>
                 <div className="flex min-w-0 flex-1 items-center gap-2 text-sm">
                   <span className={cn(
-                    'shrink-0 truncate',
+                    'min-w-0 truncate',
                     isUnread ? 'font-semibold text-foreground' : 'text-foreground/90'
                   )}>
                     {email.subject || t('no_subject')}
                   </span>
                   {inlinePreview && (
-                    <span className="min-w-0 truncate text-muted-foreground">{inlinePreview}</span>
+                    <span className="min-w-0 shrink-[9999] truncate text-muted-foreground">{inlinePreview}</span>
                   )}
                 </div>
               </div>
@@ -321,6 +325,8 @@ export function EmailListItem({ email, selected, onClick, onDoubleClick, onConte
         onArchive={onArchive}
         onSetColorTag={onSetColorTag}
         onMarkAsSpam={onMarkAsSpam}
+        onUndoSpam={onUndoSpam}
+        isInJunk={currentMailboxRole === 'junk'}
       />
     </div>
   );

components/email/email-list.tsx

@@ -100,19 +100,32 @@ export function EmailList({
     isLoadingThread,
     toggleThreadExpansion,
     fetchThreadEmails,
+    markThreadAsRead,
+    collapseAllThreads,
+    threadEmailCounts,
     searchFilters,
     setSearchFilters,
     clearSearchFilters,
     advancedSearch,
     searchQuery,
+    isUnifiedView,
+    unifiedRole,
   } = useEmailStore();
 
+  // In aggregate role-views (e.g. "All Junk") the selected mailbox is virtual, so
+  // there is no concrete mailbox to read the role from. Fall back to the unified
+  // role so contextual actions (e.g. mark-as-spam ↔ not-spam) behave as if inside
+  // that role's folder.
+  const effectiveMailboxRole =
+    mailboxes.find(m => m.id === selectedMailbox)?.role
+    ?? (isUnifiedView ? (unifiedRole ?? undefined) : undefined);
+
   const disableThreading = useSettingsStore((state) => state.disableThreading);
 
   const threadGroups = useMemo(() => {
-    const groups = groupEmailsByThread(emails, disableThreading || isScheduledView);
+    const groups = groupEmailsByThread(emails, disableThreading || isScheduledView, threadEmailCounts);
     return sortThreadGroups(groups);
-  }, [emails, disableThreading, isScheduledView]);
+  }, [emails, disableThreading, isScheduledView, threadEmailCounts]);
 
   const { contextMenu, openContextMenu, closeContextMenu, menuRef } = useContextMenu<Email>();
   const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
@@ -250,10 +263,12 @@ export function EmailList({
     if (!isExpanded && client) {
       toggleThreadExpansion(threadId);
       await fetchThreadEmails(client, threadId);
+      // Mark all unread emails in this thread as read
+      void markThreadAsRead(client, threadId);
     } else {
       toggleThreadExpansion(threadId);
     }
-  }, [client, expandedThreadIds, toggleThreadExpansion, fetchThreadEmails]);
+  }, [client, expandedThreadIds, toggleThreadExpansion, fetchThreadEmails, markThreadAsRead]);
 
   // Range-based load more: trigger when last visible item is near the end.
   // Debounce to prevent rapid cascade when thread grouping reduces item
@@ -473,7 +488,18 @@ export function EmailList({
                       isLoading={isLoadingThread === thread.threadId}
                       expandedEmails={threadEmailsCache.get(thread.threadId)}
                       onToggleExpand={() => handleToggleThreadExpansion(thread.threadId)}
-                      onEmailSelect={(email) => onEmailSelect?.(email)}
+                      onCollapseAllThreads={collapseAllThreads}
+                      onEmailSelect={(email) => {
+                        // Collapse expanded threads when selecting an email outside the expanded thread
+                        const currentExpanded = useEmailStore.getState().expandedThreadIds;
+                        if (currentExpanded.size > 0) {
+                          // Check if the selected email belongs to any expanded thread via its threadId
+                          if (!email.threadId || !currentExpanded.has(email.threadId)) {
+                            collapseAllThreads();
+                          }
+                        }
+                        onEmailSelect?.(email);
+                      }}
                       onEmailDoubleClick={onEmailDoubleClick ? (email) => onEmailDoubleClick(email) : undefined}
                       onContextMenu={openContextMenu}
                       onOpenConversation={onOpenConversation}
@@ -483,6 +509,7 @@ export function EmailList({
                       onArchive={onArchive ? (email) => onArchive(email) : undefined}
                       onSetColorTag={onSetColorTag}
                       onMarkAsSpam={onMarkAsSpam ? (email) => onMarkAsSpam(email) : undefined}
+                      onUndoSpam={onUndoSpam ? (email) => onUndoSpam(email) : undefined}
                     />
                   </div>
                 );
@@ -516,7 +543,7 @@ export function EmailList({
           menuRef={menuRef}
           mailboxes={mailboxes}
           selectedMailbox={selectedMailbox}
-          currentMailboxRole={mailboxes.find(m => m.id === selectedMailbox)?.role}
+          currentMailboxRole={effectiveMailboxRole}
           isMultiSelect={selectedEmailIds.has(contextMenu.data.id)}
           selectedCount={selectedEmailIds.size}
           onReply={() => onReply?.(contextMenu.data!)}

components/email/email-viewer.tsx

@@ -3,9 +3,9 @@
 import { useState, useEffect, useLayoutEffect, useMemo, useRef, useCallback } from "react";
 import DOMPurify from "dompurify";
 import { Email, ContactCard, Mailbox } from "@/lib/jmap/types";
-import { emailExportFilename, attachmentDownloadFilename, DEFAULT_EMAIL_TEMPLATE, DEFAULT_ATTACHMENT_TEMPLATE } from "@/lib/download-filename";
+import { emailExportFilename, attachmentDownloadFilename, attachmentsBundleFilename, DEFAULT_EMAIL_TEMPLATE, DEFAULT_ATTACHMENT_TEMPLATE } from "@/lib/download-filename";
 import { EML_IMPORT_ACCEPT, expandImportableEmails } from "@/lib/eml-import";
-import { EMAIL_IFRAME_SANITIZE_CONFIG, collapseBlockedImageContainers, escapeHtml, plainTextToSafeHtml, sanitizeEmailHtml, sanitizePlainTextRenderedHtml } from "@/lib/email-sanitization";
+import { EMAIL_IFRAME_SANITIZE_CONFIG, blockExternalResourcesOnNode, collapseBlockedImageContainers, escapeHtml, plainTextToSafeHtml, sanitizeEmailHtml, sanitizePlainTextRenderedHtml } from "@/lib/email-sanitization";
 import { hasMeaningfulHtmlBody } from "@/lib/signature-utils";
 import { withBasePath } from "@/lib/browser-navigation";
 import { Button } from "@/components/ui/button";
@@ -83,6 +83,8 @@ import { useThemeStore } from "@/stores/theme-store";
 import { EmailIdentityBadge } from "./email-identity-badge";
 import { UnsubscribeBanner } from "./unsubscribe-banner";
 import { CalendarInvitationBanner } from "./calendar-invitation-banner";
+import { ReadReceiptBanner } from "./read-receipt-banner";
+import { stripCrossAccountIdentityPrefix } from "@/hooks/use-pro-multi-account-identities";
 import { useTour } from "@/components/tour/tour-provider";
 import { useIsEmbedded } from "@/hooks/use-is-embedded";
 import { SmimePassphraseDialog } from "@/components/settings/smime-passphrase-dialog";
@@ -607,19 +609,23 @@ function renderClickableRecipients(
 }
 
 // Contact sidebar panel that slides in from the right on desktop
-function ContactSidebarPanel({
+export function ContactSidebarPanel({
   email,
   contact,
   senderName,
   onClose,
   onAddToContacts,
+  onEditContact,
 }: {
   email: string;
   contact: ContactCard | null;
   senderName?: string;
   onClose: () => void;
   onAddToContacts?: (email: string, name?: string) => void;
+  onEditContact?: () => void;
 }) {
+  const t = useTranslations('email_viewer');
+  const tCommon = useTranslations('common');
   const name = contact ? getContactDisplayName(contact) : senderName || null;
   const primaryEmail = contact ? getContactPrimaryEmail(contact) : email;
   const emails = contact?.emails ? Object.values(contact.emails) : [];
@@ -631,9 +637,9 @@ function ContactSidebarPanel({
   const handleCopy = async (text: string) => {
     try {
       await navigator.clipboard.writeText(text);
-      toast.success("Copied!");
+      toast.success(t('contact_sidebar.copied'));
     } catch {
-      toast.error("Failed to copy");
+      toast.error(t('contact_sidebar.copy_failed'));
     }
   };
 
@@ -641,11 +647,11 @@ function ContactSidebarPanel({
     <div className="w-[320px] shrink-0 border-l border-border bg-background flex flex-col h-full animate-in slide-in-from-right-5 duration-200">
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3 border-b border-border">
-        <h3 className="text-sm font-semibold text-foreground truncate">Contact</h3>
+        <h3 className="text-sm font-semibold text-foreground truncate">{t('contact_sidebar.title')}</h3>
         <button
           onClick={onClose}
           className="p-1 rounded hover:bg-muted transition-colors"
-          aria-label="Close sidebar"
+          aria-label={t('contact_sidebar.close')}
         >
           <PanelRightClose className="w-4 h-4 text-muted-foreground" />
         </button>
@@ -683,19 +689,29 @@ function ContactSidebarPanel({
           <a
             href={`mailto:${primaryEmail}`}
             className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground px-3 py-2 rounded-md hover:bg-muted transition-colors border border-border"
-            title="Send email"
+            title={t('contact_sidebar.action_email_title')}
           >
             <Send className="w-3.5 h-3.5" />
-            Email
+            {t('contact_sidebar.action_email')}
           </a>
           <button
             onClick={() => handleCopy(primaryEmail)}
             className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground px-3 py-2 rounded-md hover:bg-muted transition-colors border border-border"
-            title="Copy email"
+            title={t('contact_sidebar.action_copy_title')}
           >
             <Copy className="w-3.5 h-3.5" />
-            Copy
+            {t('contact_sidebar.action_copy')}
           </button>
+          {contact && onEditContact && (
+            <button
+              onClick={onEditContact}
+              className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground px-3 py-2 rounded-md hover:bg-muted transition-colors border border-border"
+              title={t('contact_sidebar.action_edit_title')}
+            >
+              <EditIcon className="w-3.5 h-3.5" />
+              {tCommon('edit')}
+            </button>
+          )}
         </div>
 
         {/* Details sections */}
@@ -703,7 +719,7 @@ function ContactSidebarPanel({
           <div className="px-4 pb-4 space-y-4">
             {/* Emails */}
             {emails.length > 0 && (
-              <SidebarSection icon={Mail} title="Emails">
+              <SidebarSection icon={Mail} title={t('contact_sidebar.section_emails')}>
                 {emails.map((e, i) => (
                   <div key={i} className="flex items-center gap-2 group">
                     <a href={`mailto:${e.address}`} className="text-sm text-primary hover:underline truncate">
@@ -723,7 +739,7 @@ function ContactSidebarPanel({
 
             {/* Phones */}
             {phones.length > 0 && (
-              <SidebarSection icon={Phone} title="Phones">
+              <SidebarSection icon={Phone} title={t('contact_sidebar.section_phones')}>
                 {phones.map((p, i) => (
                   <div key={i} className="flex items-center gap-2 group">
                     <a href={`tel:${p.number}`} className="text-sm text-primary hover:underline">
@@ -743,7 +759,7 @@ function ContactSidebarPanel({
 
             {/* Organizations */}
             {orgs.length > 1 && (
-              <SidebarSection icon={Building} title="Organizations">
+              <SidebarSection icon={Building} title={t('contact_sidebar.section_organizations')}>
                 {orgs.map((o, i) => (
                   <div key={i} className="text-sm">
                     {o.name}
@@ -757,7 +773,7 @@ function ContactSidebarPanel({
 
             {/* Addresses */}
             {addresses.length > 0 && (
-              <SidebarSection icon={MapPin} title="Addresses">
+              <SidebarSection icon={MapPin} title={t('contact_sidebar.section_addresses')}>
                 {addresses.map((a, i) => (
                   <div key={i} className="text-sm text-muted-foreground">
                     {a.full || a.fullAddress
@@ -772,7 +788,7 @@ function ContactSidebarPanel({
 
             {/* Notes */}
             {notes.length > 0 && (
-              <SidebarSection icon={StickyNote} title="Notes">
+              <SidebarSection icon={StickyNote} title={t('contact_sidebar.section_notes')}>
                 {notes.map((n, i) => (
                   <p key={i} className="text-sm text-muted-foreground whitespace-pre-wrap">{n.note}</p>
                 ))}
@@ -785,7 +801,7 @@ function ContactSidebarPanel({
         {!contact && (
           <div className="px-4 pb-4 text-center space-y-3">
             <p className="text-xs text-muted-foreground">
-              Not in your contacts
+              {t('contact_sidebar.not_in_contacts')}
             </p>
             {onAddToContacts && (
               <button
@@ -793,7 +809,7 @@ function ContactSidebarPanel({
                 className="inline-flex items-center gap-1.5 text-xs font-medium text-primary hover:text-primary/80 px-3 py-2 rounded-md hover:bg-muted transition-colors border border-border"
               >
                 <Mail className="w-3.5 h-3.5" />
-                Add to contacts
+                {t('contact_sidebar.add_to_contacts')}
               </button>
             )}
           </div>
@@ -911,6 +927,7 @@ export function EmailViewer({
   const showToolbarLabels = useSettingsStore((state) => state.showToolbarLabels);
   const mailLayout = useSettingsStore((state) => state.mailLayout);
   const calendarInvitationParsingEnabled = useSettingsStore((state) => state.calendarInvitationParsingEnabled);
+  const readReceiptResponse = useSettingsStore((state) => state.readReceiptResponse);
   const hideInlineImageAttachments = useSettingsStore((state) => state.hideInlineImageAttachments);
   const attachmentImagePreviewsEnabled = useSettingsStore((state) => state.attachmentImagePreviewsEnabled);
   const dragOutActive = useMemo(() => isDragOutSupported(), []);
@@ -987,6 +1004,7 @@ export function EmailViewer({
   const [showAllBesideAttachments, setShowAllBesideAttachments] = useState(false);
   const [showAllMobileAttachments, setShowAllMobileAttachments] = useState(false);
   const [showAllBelowHeaderAttachments, setShowAllBelowHeaderAttachments] = useState(false);
+  const [isDownloadingAll, setIsDownloadingAll] = useState(false);
   const [visibleBelowHeaderCount, setVisibleBelowHeaderCount] = useState<number | null>(null);
   const belowHeaderRowRef = useRef<HTMLDivElement>(null);
   const belowHeaderGhostRef = useRef<HTMLDivElement>(null);
@@ -1031,12 +1049,29 @@ export function EmailViewer({
   const [embeddedEmailAttachments, setEmbeddedEmailAttachments] = useState<PostalMimeAttachment[]>([]);
   const [embeddedEmailUnwrapped, setEmbeddedEmailUnwrapped] = useState(false);
 
-  // Plugin detail sidebar state
+  // Plugin detail sidebar state. Collapsed/width persist across opens and
+  // sessions so the panel reopens the way the user last left it.
   const detailSlots = usePluginSlotOffers('email-detail-sidebar');
   const hasDetailSidebar = detailSlots.length > 0;
-  const [detailSidebarCollapsed, setDetailSidebarCollapsed] = useState(false);
+  const [detailSidebarCollapsed, setDetailSidebarCollapsed] = useState<boolean>(() => {
-  const [detailSidebarWidth, setDetailSidebarWidth] = useState(280);
+    if (typeof window === 'undefined') return false;
-  const detailSidebarWidthRef = useRef(280);
+    try { return localStorage.getItem('emailDetailSidebarCollapsed') === '1'; } catch { return false; }
+  });
+  const [detailSidebarWidth, setDetailSidebarWidth] = useState<number>(() => {
+    if (typeof window === 'undefined') return 280;
+    try {
+      const n = parseInt(localStorage.getItem('emailDetailSidebarWidth') ?? '', 10);
+      return Number.isFinite(n) ? Math.max(200, Math.min(500, n)) : 280;
+    } catch { return 280; }
+  });
+  const detailSidebarWidthRef = useRef(detailSidebarWidth);
+
+  useEffect(() => {
+    try { localStorage.setItem('emailDetailSidebarCollapsed', detailSidebarCollapsed ? '1' : '0'); } catch { /* ignore */ }
+  }, [detailSidebarCollapsed]);
+  useEffect(() => {
+    try { localStorage.setItem('emailDetailSidebarWidth', String(detailSidebarWidth)); } catch { /* ignore */ }
+  }, [detailSidebarWidth]);
 
   // Ensure S/MIME key records are loaded from IndexedDB
   useLayoutEffect(() => {
@@ -1297,6 +1332,10 @@ export function EmailViewer({
     }, markAsReadDelay);
 
     return () => clearTimeout(timeout);
+    // Keyed to email id + $seen only: depending on the whole `email` object
+    // would reset the mark-as-read delay timer whenever any unrelated email
+    // field updates (e.g. a background re-fetch).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [email?.id, email?.keywords?.$seen, onMarkAsRead]);
 
   // Reset external content permission and quick reply when email changes
@@ -2193,6 +2232,9 @@ export function EmailViewer({
       // Hide inline cid-referenced images when the user has opted to keep them
       // out of the attachment list (default on): these are embedded in the body.
       .filter(att => !(hideInlineImageAttachments && att.cid && att.disposition === 'inline' && (att.type || '').startsWith('image/')))
+      // Hide machine-readable report parts (MDN read-receipts, DSN bounce
+      // reports). These are required MIME parts, not real user attachments.
+      .filter(att => att.type !== 'message/disposition-notification' && att.type !== 'message/delivery-status')
       .map((attachment, index) => ({
         id: attachment.blobId || `${attachment.name || 'attachment'}-${index}`,
         name: attachment.name || null,
@@ -2223,6 +2265,11 @@ export function EmailViewer({
       }));
 
     return [...jmapAttachments, ...tnefExtracted, ...embeddedExtracted];
+    // The memo derives only from `email.attachments` (findCalendarAttachment
+    // scans that array); depending on the whole `email` object would rebuild the
+    // attachment list — and its downstream layout measurement — on every email
+    // field change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [email?.attachments, smimeDecryptedAttachments, tnefHtml, tnefText, tnefAttachments, embeddedEmailUnwrapped, embeddedEmailAttachments, calendarInvitationParsingEnabled, hideInlineImageAttachments]);
 
   // Measure attachment chips in the below-header row to determine how many fit
@@ -2416,7 +2463,7 @@ export function EmailViewer({
 
   // Sanitize and prepare email HTML content
   const emailContent = useMemo(() => {
-    if (!email) return { html: "", isHtml: false, hasStyleTag: false };
+    if (!email) return { html: "", isHtml: false, hasStyleTag: false, externalBlocked: false };
 
     // Check if we have body values
     if (email.bodyValues) {
@@ -2484,38 +2531,14 @@ export function EmailViewer({
         }
 
         DOMPurify.addHook('afterSanitizeAttributes', (node) => {
-          const htmlNode = node as HTMLElement;
-
           if (shouldBlockExternal) {
-            if (node.tagName === 'IMG') {
+            // Blocks every external-resource vector (img src incl.
-              const src = node.getAttribute('src');
+            // whitespace/newline tricks, srcset, <source>, <video poster>,
-              if (src && (src.startsWith('http://') || src.startsWith('https://') || src.startsWith('//'))) {
+            // media src, background attr, inline style url() incl. CSS
-                node.setAttribute('data-blocked-src', src);
+            // escapes). The strict iframe CSP below is the network backstop.
-                node.setAttribute('src', 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB2aWV3Qm94PSIwIDAgMSAxIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8L3N2Zz4=');
+            if (blockExternalResourcesOnNode(node)) {
-                node.setAttribute('alt', '');
-                htmlNode.style.display = 'none';
-                blockedExternalContent = true;
-              }
-            }
-
-            const bgAttr = node.getAttribute?.('background');
-            if (bgAttr && (bgAttr.startsWith('http://') || bgAttr.startsWith('https://') || bgAttr.startsWith('//'))) {
-              node.setAttribute('data-blocked-background', bgAttr);
-              node.removeAttribute('background');
               blockedExternalContent = true;
             }
-
-            if (htmlNode.style) {
-              const style = htmlNode.style.cssText;
-              if (style && style.includes('url(')) {
-                const urlMatch = style.match(/url\(['"]?(https?:\/\/[^'")\s]+)['"]?\)/gi);
-                if (urlMatch) {
-                  node.setAttribute('data-blocked-style', style);
-                  htmlNode.style.cssText = style.replace(/url\(['"]?https?:\/\/[^'")\s]+['"]?\)/gi, 'url()');
-                  blockedExternalContent = true;
-                }
-              }
-            }
           }
 
           if (node.tagName === 'A') {
@@ -2546,6 +2569,11 @@ export function EmailViewer({
           html: cleanHtml,
           isHtml: true,
           hasStyleTag: /<style[\s>]/i.test(htmlContent),
+          // Drives the strict iframe CSP: when we're in blocking mode the
+          // iframe forbids external img/media/font fetches entirely, so any
+          // vector the DOM walk above missed (e.g. <style>-tag url()) still
+          // can't phone home. Cleared once the user allows / trusts.
+          externalBlocked: shouldBlockExternal,
         };
       }
 
@@ -2557,6 +2585,7 @@ export function EmailViewer({
           html: plainTextToSafeHtml(textContent),
           isHtml: false,
           hasStyleTag: false,
+          externalBlocked: false,
         };
       }
     }
@@ -2572,6 +2601,7 @@ export function EmailViewer({
         html: `<div style="color: var(--color-muted-foreground); font-style: italic;">${previewHtml}</div>`,
         isHtml: false,
         hasStyleTag: false,
+        externalBlocked: false,
       };
     }
 
@@ -2579,12 +2609,16 @@ export function EmailViewer({
       html: `<p style="color: var(--color-muted-foreground); font-style: italic;">${t('no_body_content')}</p>`,
       isHtml: false,
       hasStyleTag: false,
+      externalBlocked: false,
     };
-    // Intentionally omit allowExternalContent and trust state from deps:
+    // Recompute when permission changes so the srcDoc rebuilds with the
-    // toggling permission imperatively unblocks content via restoreBlockedContent
+    // unblocked content AND the permissive CSP. The strict blocking-mode CSP
-    // in an effect below, so the iframe srcDoc stays stable and doesn't reload/flash.
+    // can't be relaxed in place (a document's CSP is fixed at load), so the
+    // "Load images" / "Trust sender" buttons (both flip allowExternalContent)
+    // intentionally trigger a fresh srcDoc. Trust selectors are read inside and
+    // re-read on that rebuild, so they're deliberately omitted from deps.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [email, externalContentPolicy, cidBlobUrls, t]);
+  }, [email, externalContentPolicy, allowExternalContent, cidBlobUrls, t]);
 
   // Override email content with S/MIME decrypted content when available
   const effectiveEmailContent = useMemo(() => {
@@ -2596,26 +2630,26 @@ export function EmailViewer({
         }
       );
       const cleanHtml = DOMPurify.sanitize(htmlWithCidUrls, EMAIL_IFRAME_SANITIZE_CONFIG);
-      return { html: cleanHtml, isHtml: true, hasStyleTag: /<style[\s>]/i.test(smimeDecryptedHtml) };
+      return { html: cleanHtml, isHtml: true, hasStyleTag: /<style[\s>]/i.test(smimeDecryptedHtml), externalBlocked: false };
     }
     if (smimeDecryptedText) {
-      return { html: plainTextToSafeHtml(smimeDecryptedText), isHtml: false, hasStyleTag: false };
+      return { html: plainTextToSafeHtml(smimeDecryptedText), isHtml: false, hasStyleTag: false, externalBlocked: false };
     }
     // TNEF (winmail.dat) extracted content
     if (tnefHtml) {
       const cleanHtml = DOMPurify.sanitize(tnefHtml, EMAIL_IFRAME_SANITIZE_CONFIG);
-      return { html: cleanHtml, isHtml: true, hasStyleTag: /<style[\s>]/i.test(tnefHtml) };
+      return { html: cleanHtml, isHtml: true, hasStyleTag: /<style[\s>]/i.test(tnefHtml), externalBlocked: false };
     }
     if (tnefText) {
-      return { html: plainTextToSafeHtml(tnefText), isHtml: false, hasStyleTag: false };
+      return { html: plainTextToSafeHtml(tnefText), isHtml: false, hasStyleTag: false, externalBlocked: false };
     }
     // Embedded message/rfc822 unwrapped content
     if (embeddedEmailHtml) {
       const cleanHtml = DOMPurify.sanitize(embeddedEmailHtml, EMAIL_IFRAME_SANITIZE_CONFIG);
-      return { html: cleanHtml, isHtml: true, hasStyleTag: /<style[\s>]/i.test(embeddedEmailHtml) };
+      return { html: cleanHtml, isHtml: true, hasStyleTag: /<style[\s>]/i.test(embeddedEmailHtml), externalBlocked: false };
     }
     if (embeddedEmailText) {
-      return { html: plainTextToSafeHtml(embeddedEmailText), isHtml: false, hasStyleTag: false };
+      return { html: plainTextToSafeHtml(embeddedEmailText), isHtml: false, hasStyleTag: false, externalBlocked: false };
     }
     return emailContent;
   }, [cidBlobUrls, emailContent, smimeDecryptedHtml, smimeDecryptedText, tnefHtml, tnefText, embeddedEmailHtml, embeddedEmailText]);
@@ -2756,6 +2790,86 @@ export function EmailViewer({
     setTimeout(() => URL.revokeObjectURL(objectUrl), 60_000);
   }, [onDownloadAttachment, email?.id, resolveAttachmentName]);
 
+  // Bundle every attachment of this email into a single .zip and download it.
+  // Fetches blob-backed attachments through the JMAP client and reuses already
+  // decoded bytes for S/MIME-decrypted and TNEF-extracted ones. Individual
+  // failures are skipped so a single bad blob doesn't sink the whole archive.
+  const handleDownloadAllAttachments = useCallback(async () => {
+    if (isDownloadingAll || effectiveAttachments.length === 0) return;
+    setIsDownloadingAll(true);
+    try {
+      const { default: JSZip } = await import('jszip');
+      const zip = new JSZip();
+      const used = new Set<string>();
+      // Zip entries must be unique; suffix collisions with " (n)" before the
+      // extension so duplicates stay recognisable.
+      const uniqueName = (raw: string): string => {
+        const base = raw || 'attachment';
+        if (!used.has(base)) { used.add(base); return base; }
+        const dot = base.lastIndexOf('.');
+        const stem = dot > 0 ? base.slice(0, dot) : base;
+        const ext = dot > 0 ? base.slice(dot) : '';
+        let i = 1;
+        let candidate = `${stem} (${i})${ext}`;
+        while (used.has(candidate)) { i++; candidate = `${stem} (${i})${ext}`; }
+        used.add(candidate);
+        return candidate;
+      };
+
+      let added = 0;
+      for (const attachment of effectiveAttachments) {
+        const entryName = uniqueName(getAttachmentDisplayName(attachment.name, attachment.type));
+        try {
+          if (attachment.blobId && client) {
+            const blob = await client.fetchBlob(attachment.blobId, attachment.name || entryName, attachment.type);
+            zip.file(entryName, blob);
+            added++;
+          } else if (attachment.tnefData) {
+            zip.file(entryName, attachment.tnefData);
+            added++;
+          } else if (attachment.decryptedAttachment) {
+            const bytes = getAttachmentContentBytes(attachment.decryptedAttachment);
+            if (bytes && bytes.byteLength > 0) {
+              zip.file(entryName, bytes);
+              added++;
+            }
+          }
+        } catch {
+          // Skip individual failures; remaining attachments still bundle.
+        }
+      }
+
+      if (added === 0) return;
+
+      const zipBlob = await zip.generateAsync({ type: 'blob', mimeType: 'application/zip' });
+      const objectUrl = URL.createObjectURL(zipBlob);
+      const anchor = document.createElement('a');
+      anchor.href = objectUrl;
+      anchor.download = attachmentsBundleFilename(email);
+      document.body.appendChild(anchor);
+      anchor.click();
+      anchor.remove();
+      setTimeout(() => URL.revokeObjectURL(objectUrl), 60_000);
+    } finally {
+      setIsDownloadingAll(false);
+    }
+  }, [isDownloadingAll, effectiveAttachments, client, email]);
+
+  // Shared "Download all" chip, shown only when bundling is worthwhile (2+).
+  const downloadAllButton = effectiveAttachments.length > 1 ? (
+    <button
+      onClick={(e) => { e.stopPropagation(); handleDownloadAllAttachments(); }}
+      disabled={isDownloadingAll}
+      title={t('download_all')}
+      className="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/60 rounded-md border border-border/50 transition-colors flex-shrink-0 disabled:opacity-60 disabled:cursor-wait"
+    >
+      {isDownloadingAll
+        ? <Loader2 className="w-3.5 h-3.5 animate-spin" />
+        : <FileArchive className="w-3.5 h-3.5" />}
+      {t('download_all')}
+    </button>
+  ) : null;
+
   // Pre-fetch object URLs for image attachments so their actual contents can be
   // rendered as thumbnails inside the chip. Skips images larger than 10 MB.
   useEffect(() => {
@@ -2836,31 +2950,44 @@ export function EmailViewer({
     // If email has native dark mode, let it handle its own theming
     // Otherwise, use CSS filter inversion for dark mode (preserves layout)
     // Re-invert leaf media elements so they appear normal.
-    // Container selectors (bgcolor, background, etc.) use :not(:has(...)) to avoid
+    //
-    // double re-inverting images nested inside those containers.
+    // Background-COLOR containers (bgcolor, background: shorthand) are
-    // Nested bgcolor containers must NOT add another invert layer: each filter
+    // re-inverted so their fill flips to a dark tone, but skipped when they
-    // toggles the inversion, so an odd number of stacked filters (e.g. body +
+    // wrap media: the inner image already gets its own re-invert, and a filter
-    // outer bgcolor table + inner bgcolor table) produces an inverted result -
+    // on the container would double-invert it. Nested color containers must NOT
-    // i.e. light-on-light. The second rule disables filter on bgcolor-like
+    // stack another invert either - each filter toggles the inversion, so an
-    // elements that are descendants of another bgcolor-like element.
+    // odd number of stacked filters (body + outer + inner) lands back on
+    // light-on-light; the descendant rule disables filter on a color container
+    // nested inside another.
+    //
+    // Background-IMAGE containers are different: a real photo and whatever is
+    // composited over it (headline text, logos) was designed by the sender to
+    // read together, so the whole subtree should return to its original
+    // light-mode appearance - even when it wraps media. We therefore re-invert
+    // these unconditionally (no :has guard) and cancel the per-image re-invert
+    // for media inside them, otherwise those images would flip back to inverted.
     const darkModeCSS = isDark && !emailHasNativeDarkMode ? `
       html { background: #121212; }
       body { filter: invert(1) hue-rotate(180deg); background: #ededed; }
       img, video, svg, canvas, object, embed, input[type="image"] {
         filter: invert(1) hue-rotate(180deg);
       }
-      [style*="background-image"]:not(:has(img, video, svg, canvas, object, embed)),
       [style*="background:"]:not(:has(img, video, svg, canvas, object, embed)),
-      [background]:not(:has(img, video, svg, canvas, object, embed)),
+      [bgcolor]:not(:has(img, video, svg, canvas, object, embed)) {
-      [bgcolor]:not(:has(img, video, svg, canvas, object, embed)),
-      td[background]:not(:has(img, video, svg, canvas, object, embed)),
-      table[background]:not(:has(img, video, svg, canvas, object, embed)) {
         filter: invert(1) hue-rotate(180deg);
       }
-      :where([style*="background-image"], [style*="background:"], [background], [bgcolor])
+      :where([style*="background:"], [bgcolor])
-        :where([style*="background-image"], [style*="background:"], [background], [bgcolor]):not(:has(img, video, svg, canvas, object, embed)) {
+        :where([style*="background:"], [bgcolor]):not(:has(img, video, svg, canvas, object, embed)) {
         filter: none !important;
       }
+      [style*="background-image"],
+      [background] {
+        filter: invert(1) hue-rotate(180deg);
+      }
+      [style*="background-image"] :where(img, video, svg, canvas, object, embed, input[type="image"]),
+      [background] :where(img, video, svg, canvas, object, embed, input[type="image"]) {
+        filter: none;
+      }
     ` : '';
 
     const colorScheme = isDark && emailHasNativeDarkMode ? 'light dark' : 'light';
@@ -2882,86 +3009,59 @@ export function EmailViewer({
       p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0 0 6px; }
     ` : '';
 
-    // Defense-in-depth CSP inside srcDoc: even if the sanitizer ever lets a
+    // Defense-in-depth CSP inside srcDoc. default-src 'none' forbids script
-    // <script> tag through, the iframe document forbids script execution
+    // execution even if the sanitizer ever lets a <script> through.
-    // (default-src 'none'). img/style/font remain permissive to match what the
+    //
-    // sanitizer is allowed to emit and what the host already permits when
+    // When external content is blocked, img/media/font are restricted to
-    // external content is loaded.
+    // data:/blob: only — this is the network-level backstop for every tracking
-    const iframeCsp = "default-src 'none'; img-src data: blob: http: https:; style-src 'unsafe-inline'; font-src data: http: https:; media-src data: blob: http: https:; base-uri 'none'; form-action 'none'; frame-src 'none'";
+    // vector, including ones the DOM-walk blocker can't see (CSS escapes,
+    // <style>-tag url(), @font-face). When the user loads/trusts the sender the
+    // srcDoc is rebuilt (see emailContent) with the permissive variant so real
+    // images, web fonts and media load. cid:/inline images are pre-rewritten to
+    // blob: URLs, so they survive the strict variant.
+    const iframeCsp = effectiveEmailContent.externalBlocked
+      ? "default-src 'none'; img-src data: blob:; style-src 'unsafe-inline'; font-src data:; media-src data: blob:; base-uri 'none'; form-action 'none'; frame-src 'none'"
+      : "default-src 'none'; img-src data: blob: http: https:; style-src 'unsafe-inline'; font-src data: http: https:; media-src data: blob: http: https:; base-uri 'none'; form-action 'none'; frame-src 'none'";
 
     return `<!DOCTYPE html>
 <html style="color-scheme: ${colorScheme};"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="Content-Security-Policy" content="${iframeCsp}">
+<meta name="referrer" content="no-referrer">
+<meta http-equiv="x-dns-prefetch-control" content="off">
 <style>
-  html, body { overflow: hidden; }
+  /* Force content height: some emails set html/body { height: 100% }, which -
-  body { margin: 0; padding: ${bodyPadding}; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.6; color: #1a1a1a; background: #ffffff; word-wrap: break-word; overflow-wrap: break-word; }
+     combined with overflow:hidden and our scrollHeight-based auto-resize -
+     collapses the measured height and clips everything below the fold. The
+     height reset is repeated in a trailing <style> after the body content
+     (see below): the email's own <style> is injected inside our <body> and so
+     lands later in source order, where - at equal specificity and !important -
+     it would otherwise win the cascade. */
+  /* overflow-y stays hidden so our scrollHeight-based height measurement works;
+     overflow-x is auto on the body so an intrinsically wide table (e.g. a
+     20-column data table) can scroll horizontally instead of being crushed to
+     fit - the latter wraps header text to one character per line, which reads
+     as 90deg-rotated vertical headers (issue #409). */
+  html { overflow: hidden; height: auto !important; }
+  body { margin: 0; padding: ${bodyPadding}; overflow-x: auto; overflow-y: hidden; height: auto !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.6; color: #1a1a1a; background: #ffffff; word-wrap: break-word; overflow-wrap: break-word; }
   @media (max-width: 640px) { body { padding-left: ${mobileBodyPaddingX}; padding-right: ${mobileBodyPaddingX}; } }
   img { max-width: 100% !important; height: auto !important; }
   a { color: #1a73e8; }
   table { max-width: 100% !important; table-layout: auto; overflow-wrap: break-word; }
-  td, th { overflow-wrap: anywhere; }
+  /* break-word (not anywhere): break only over-long single words, and keep each
+     word's min-content width so columns are not collapsed to a single char. */
+  td, th { overflow-wrap: break-word; }
   pre { white-space: pre-wrap; word-wrap: break-word; }
   ${wordHtmlCSS}
   ${darkModeCSS}
-</style></head><body>${effectiveEmailContent.html}</body></html>`;
+</style></head><body>${effectiveEmailContent.html}<style>html,body{height:auto!important;min-height:0!important;max-height:none!important}</style></body></html>`;
-  }, [effectiveEmailContent.html, effectiveEmailContent.isHtml, isDark, emailHasNativeDarkMode]);
+  }, [effectiveEmailContent.html, effectiveEmailContent.isHtml, effectiveEmailContent.hasStyleTag, effectiveEmailContent.externalBlocked, isDark, emailHasNativeDarkMode]);
 
-  // Imperatively restore blocked external content inside the iframe document.
+  // Unblocking external content is handled by rebuilding the iframe srcDoc:
-  // Avoids re-rendering the iframe srcDoc (which would reload and flash) when
+  // toggling allowExternalContent (both "Load images" and "Trust sender" set
-  // the user clicks "Load images" or "Trust sender".
+  // it) recomputes emailContent without blocking and swaps the strict CSP for
-  const restoreBlockedContent = useCallback(() => {
+  // the permissive one. In-place restore isn't possible because a document's
-    const doc = iframeRef.current?.contentDocument;
+  // CSP is fixed at load — the strict blocking-mode CSP would keep refusing the
-    if (!doc) return;
+  // restored URLs.
-
-    doc.querySelectorAll('img[data-blocked-src]').forEach((node) => {
-      const el = node as HTMLImageElement;
-      const src = el.getAttribute('data-blocked-src');
-      if (src) {
-        el.setAttribute('src', src);
-        el.style.display = '';
-        el.removeAttribute('data-blocked-src');
-      }
-    });
-
-    doc.querySelectorAll('[data-blocked-style]').forEach((node) => {
-      const el = node as HTMLElement;
-      const style = el.getAttribute('data-blocked-style');
-      if (style !== null) {
-        el.style.cssText = style;
-        el.removeAttribute('data-blocked-style');
-      }
-    });
-
-    doc.querySelectorAll('[data-blocked-background]').forEach((node) => {
-      const el = node as HTMLElement;
-      const bg = el.getAttribute('data-blocked-background');
-      if (bg) {
-        el.setAttribute('background', bg);
-        el.removeAttribute('data-blocked-background');
-      }
-    });
-
-    doc.querySelectorAll('[data-blocked-collapsed-style]').forEach((node) => {
-      const el = node as HTMLElement;
-      const style = el.getAttribute('data-blocked-collapsed-style');
-      if (style !== null) {
-        el.style.cssText = style;
-        el.removeAttribute('data-blocked-collapsed-style');
-      }
-    });
-  }, []);
-
-  // Whenever permission is granted (allow toggled, or sender becomes trusted),
-  // restore blocked content in the existing iframe - no srcDoc rebuild.
-  const senderEmailLower = email?.from?.[0]?.email?.toLowerCase();
-  const senderIsTrustedNow = senderEmailLower
-    ? isSenderTrusted(senderEmailLower) || (trustedSendersAddressBook && isTrustedAddressBookSender(senderEmailLower))
-    : false;
-  useEffect(() => {
-    if (!hasBlockedContent) return;
-    if (!allowExternalContent && !senderIsTrustedNow) return;
-    restoreBlockedContent();
-  }, [allowExternalContent, senderIsTrustedNow, hasBlockedContent, restoreBlockedContent]);
 
   // Tracks the last rendered body height so the loading skeleton can hold
   // the same size - avoids the body shrink/expand flash when switching emails.
@@ -3042,10 +3142,13 @@ export function EmailViewer({
               if (['IMG', 'VIDEO', 'SVG', 'CANVAS', 'OBJECT', 'EMBED'].includes(tag)) return;
               const computed = win.getComputedStyle(htmlEl);
               if (computed.backgroundImage && computed.backgroundImage !== 'none') {
-                // Only re-invert if this container doesn't have media children
+                // Re-invert so the background image returns to its original
-                if (!htmlEl.querySelector('img, video, svg, canvas, object, embed')) {
+                // appearance. Matches the CSS background-image rules: re-invert
-                  htmlEl.style.filter = 'invert(1) hue-rotate(180deg)';
+                // even when media is nested, then cancel the per-image
-                }
+                // re-invert on that media so it isn't left double-inverted.
+                htmlEl.style.filter = 'invert(1) hue-rotate(180deg)';
+                htmlEl.querySelectorAll('img, video, svg, canvas, object, embed, input[type="image"]')
+                  .forEach(m => { (m as HTMLElement).style.filter = 'none'; });
               }
             });
 
@@ -3252,6 +3355,106 @@ export function EmailViewer({
     ? calendarInvitationParsingEnabled && !!findCalendarAttachment(email)
     : false;
 
+  // ── Read receipt (MDN, RFC 8098) ──────────────────────────────
+  // Detect a Disposition-Notification-To request on the open message. The
+  // header is parsed into email.headers by the client; look it up
+  // case-insensitively and extract the bare address.
+  const readReceiptRequestedBy = useMemo(() => {
+    const headers = email?.headers as Record<string, string | string[]> | undefined;
+    if (!headers) return null;
+    let raw: string | undefined;
+    for (const key of Object.keys(headers)) {
+      if (key.toLowerCase() === 'disposition-notification-to') {
+        const v = headers[key];
+        raw = Array.isArray(v) ? v[0] : v;
+        break;
+      }
+    }
+    if (!raw) return null;
+    const m = raw.match(/<([^>]+)>/);
+    const addr = (m ? m[1] : raw).trim();
+    return addr || null;
+  }, [email?.headers]);
+
+  // The identity whose address received the original message — the MDN is sent
+  // "from" that address. Falls back to the primary identity.
+  const receiptIdentity = useMemo(() => {
+    if (!identities?.length) return null;
+    const recipients = [...(email?.to || []), ...(email?.cc || [])]
+      .map(r => r.email?.toLowerCase())
+      .filter(Boolean);
+    return identities.find(i => recipients.includes(i.email?.toLowerCase())) || identities[0];
+  }, [identities, email?.to, email?.cc]);
+
+  const mdnAlreadyHandled = email?.keywords?.['$mdnsent'] === true;
+  const [mdnHandledLocally, setMdnHandledLocally] = useState(false);
+  useEffect(() => { setMdnHandledLocally(false); }, [email?.id]);
+
+  // Only offer the receipt for mail you're actually reading in a "received"
+  // location. Suppress your own copies (sent/drafts), discarded mail (trash),
+  // and spam (junk) - never confirm your address to spammers. Inbox, Archive
+  // and user folders all qualify.
+  const inReceiptEligibleFolder = !['sent', 'drafts', 'trash', 'junk'].includes(currentMailboxRole || '');
+
+  const shouldOfferReadReceipt =
+    !!readReceiptRequestedBy &&
+    !mdnAlreadyHandled &&
+    !mdnHandledLocally &&
+    readReceiptResponse !== 'never' &&
+    inReceiptEligibleFolder &&
+    !isDraft &&
+    !!receiptIdentity;
+
+  const sendReadReceiptNow = useCallback(async (automatic: boolean) => {
+    if (!client || !email || !readReceiptRequestedBy || !receiptIdentity) return;
+    const { rawId } = stripCrossAccountIdentityPrefix(receiptIdentity.id);
+    try {
+      await client.sendReadReceipt({
+        to: readReceiptRequestedBy,
+        fromEmail: receiptIdentity.email,
+        fromName: receiptIdentity.name,
+        identityId: rawId ?? receiptIdentity.id,
+        originalMessageId: email.messageId,
+        originalSubject: email.subject,
+        originalRecipient: receiptIdentity.email,
+        automatic,
+        subject: t('read_receipt.mdn_subject', { subject: email.subject || '' }),
+        humanText: t('read_receipt.mdn_body', { recipient: receiptIdentity.email }),
+      });
+      await client.setKeyword(email.id, '$mdnsent');
+    } catch (err) {
+      // Surface the failure instead of silently resetting the banner so we can
+      // see which step (upload / import / submission) failed.
+      console.error('Read-receipt (MDN) send failed:', err);
+      toast.error(t('read_receipt.send_failed'), {
+        message: err instanceof Error ? err.message : String(err),
+      });
+      throw err;
+    }
+  }, [client, email, readReceiptRequestedBy, receiptIdentity, t]);
+
+  const ignoreReadReceipt = useCallback(async () => {
+    setMdnHandledLocally(true);
+    if (client && email) {
+      // $MDNSent is the RFC 3503 flag every IMAP/JMAP client honours, so the
+      // request is suppressed everywhere - not just locally.
+      try { await client.setKeyword(email.id, '$mdnsent'); } catch { /* best effort */ }
+    }
+  }, [client, email]);
+
+  // "always" mode: auto-send the MDN once when the message is opened.
+  const autoMdnRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (readReceiptResponse !== 'always') return;
+    if (!shouldOfferReadReceipt || !email) return;
+    if (autoMdnRef.current === email.id) return;
+    autoMdnRef.current = email.id;
+    sendReadReceiptNow(true).catch(() => { autoMdnRef.current = null; });
+    // email is already captured via email?.id and sendReadReceiptNow (which
+    // depends on `email`); the autoMdnRef guard prevents a double send.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [readReceiptResponse, shouldOfferReadReceipt, email?.id, sendReadReceiptNow]);
+
   // Show loading skeleton while email is being fetched
   if (isLoading && !email) {
     return (
@@ -3393,9 +3596,19 @@ export function EmailViewer({
         )}
         {isScheduled && canCancelScheduled && (
           <>
-            <Button variant="default" size="sm" onClick={onCancelScheduled} className="sm:flex sm:h-8" title={t('cancel_scheduled_send')}>
+            <Button
+              variant="default"
+              size="sm"
+              onClick={() => onRescheduleScheduled?.(new Date(Date.now() + 1000).toISOString())}
+              className="sm:flex sm:h-8"
+              title={t('send_now')}
+            >
+              <Send className="w-4 h-4" />
+              {showToolbarLabels && <span className="hidden sm:inline text-sm">{t('send_now')}</span>}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={onCancelScheduled} className="sm:flex sm:h-8" title={t('cancel_scheduled_send')}>
               <X className="w-4 h-4" />
-              <span className="hidden sm:inline text-sm">{t('cancel_scheduled_send')}</span>
+              {showToolbarLabels && <span className="hidden sm:inline text-sm">{t('cancel_scheduled_send')}</span>}
             </Button>
             <Button
               variant="ghost"
@@ -3682,17 +3895,17 @@ export function EmailViewer({
 
         {/* Dark/light mode toggle for HTML emails */}
         {effectiveEmailContent.isHtml && (
-          <Button
+        <Button
-            variant="ghost"
+          variant="ghost"
-            size="sm"
+          size="sm"
-            onClick={() => setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev)}
+          onClick={() => setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev)}
-            data-overflow-item
+          data-overflow-item
-            data-overflow-priority="11"
+          data-overflow-priority="11"
-            className="hidden sm:inline-flex h-8 gap-1.5"
+          className="hidden sm:inline-flex h-8 gap-1.5"
-            title={isDark ? 'View in light mode' : 'View in dark mode'}
+          title={isDark ? 'View in light mode' : 'View in dark mode'}
-          >
+        >
-            {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+          {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
-          </Button>
+        </Button>
         )}
 
         {/* More menu - click-based */}
@@ -3934,9 +4147,8 @@ export function EmailViewer({
 
   return (
     <div
-      key={email.id}
       data-tour="email-viewer"
-      className={cn("flex-1 flex flex-row h-full bg-background overflow-hidden animate-in fade-in duration-300 relative", className)}
+      className={cn("flex-1 flex flex-row h-full bg-background overflow-hidden relative", className)}
     >
     {/* Mobile More menu sidebar overlay */}
     {!isScheduled && isMobile && moreMenuOpen && (
@@ -4120,8 +4332,8 @@ export function EmailViewer({
           "bg-background border-b border-border",
           "max-lg:sticky max-lg:top-0 max-lg:z-10"
         )}>
-          <div className="px-2 sm:px-4 lg:px-6 py-1 sm:py-2">
+          <div className="px-2 sm:px-4 lg:px-6 h-14 flex items-center">
-            <div ref={toolbarRef} className="flex items-center justify-between gap-0.5 sm:gap-2">
+            <div ref={toolbarRef} className="flex items-center justify-between gap-0.5 sm:gap-2 w-full">
               {renderToolbarItems(true)}
             </div>
           </div>
@@ -4402,6 +4614,7 @@ export function EmailViewer({
                       +{effectiveAttachments.length - 2} {t('more')}
                     </button>
                   )}
+                  {downloadAllButton}
                   {/* Floating popup for remaining attachments */}
                   {showAllBesideAttachments && effectiveAttachments.length > 2 && (
                     <>
@@ -4711,9 +4924,27 @@ export function EmailViewer({
                   <section className="min-w-0">
                     <SectionHeader>{t('details.authentication_security')}</SectionHeader>
                     <div className="flex flex-wrap gap-1.5">
-                      {auth?.spf && (
+                      {auth?.spf && (() => {
-                        <AuthChip name="SPF" result={auth.spf.result} extra={auth.spf.domain} tooltip={t('authentication.tooltip_spf')} />
+                        // When multiple identities (HELO + MAIL FROM) were
-                      )}
+                        // evaluated, list each result in the tooltip for full
+                        // transparency; the chip itself shows the most severe.
+                        const breakdown = auth.spf.all && auth.spf.all.length > 1
+                          ? auth.spf.all
+                              .map((r) => {
+                                const label = r.identity === 'mailfrom' ? 'MAIL FROM' : r.identity === 'helo' ? 'HELO' : 'SPF';
+                                return `${label}: ${translateAuthResult(r.result)}${r.domain ? ` (${r.domain})` : ''}`;
+                              })
+                              .join('\n')
+                          : null;
+                        return (
+                          <AuthChip
+                            name="SPF"
+                            result={auth.spf.result}
+                            extra={auth.spf.domain}
+                            tooltip={breakdown ? `${t('authentication.tooltip_spf')}\n\n${breakdown}` : t('authentication.tooltip_spf')}
+                          />
+                        );
+                      })()}
                       {auth?.dkim && (
                         <AuthChip name="DKIM" result={auth.dkim.result} extra={auth.dkim.domain} tooltip={t('authentication.tooltip_dkim')} />
                       )}
@@ -4890,6 +5121,7 @@ export function EmailViewer({
               <div className="flex items-center gap-2">
                 {canCancelScheduled && (
                   <>
+                    <Button size="sm" variant="default" onClick={() => onRescheduleScheduled?.(new Date(Date.now() + 1000).toISOString())}>{t('send_now')}</Button>
                     <Button size="sm" variant="outline" onClick={onCancelScheduled}>{t('cancel_scheduled_send')}</Button>
                     <Button
                       size="sm"
@@ -4946,9 +5178,10 @@ export function EmailViewer({
           error={smimeUnlockError}
         />
 
-        {/* Unified Notification Banner - External Content + Calendar Invitation */}
+        {/* Unified Notification Banner - External Content + Calendar Invitation + Read Receipt */}
         {((hasBlockedContent && !allowExternalContent && externalContentPolicy !== 'allow') ||
-          hasCalendarInvitation) && (
+          hasCalendarInvitation ||
+          (readReceiptResponse === 'ask' && shouldOfferReadReceipt)) && (
           <div className="border-b border-border bg-muted/30 isolate">
             <div className="px-6 py-1.5">
               <div className="flex flex-col gap-3 isolate">
@@ -5003,6 +5236,17 @@ export function EmailViewer({
 
 
 
+                {/* Read-receipt (MDN) request banner — only in "ask" mode */}
+                {readReceiptResponse === 'ask' && shouldOfferReadReceipt && readReceiptRequestedBy && (
+                  <div className="py-1">
+                    <ReadReceiptBanner
+                      requestedBy={readReceiptRequestedBy}
+                      onSend={() => sendReadReceiptNow(false)}
+                      onIgnore={ignoreReadReceipt}
+                    />
+                  </div>
+                )}
+
                 {/* Calendar Invitation Banner */}
                 {hasCalendarInvitation && (
                   <div className="py-1">
@@ -5019,8 +5263,8 @@ export function EmailViewer({
       {/* === ATTACHMENTS below header (below-header mode, desktop only) === */}
       {attachmentPosition === 'below-header' && effectiveAttachments.length > 0 && (
         <div className="hidden lg:block bg-background border-b border-border px-4 lg:px-6 py-2">
-          <div className="relative">
+          <div className="relative flex items-center gap-2">
-          <div ref={belowHeaderRowRef} className="relative flex items-center gap-2 overflow-hidden">
+          <div ref={belowHeaderRowRef} className="relative flex items-center gap-2 overflow-hidden flex-1 min-w-0">
             {/* Hidden ghost row used purely for measuring chip widths */}
             <div
               ref={belowHeaderGhostRef}
@@ -5141,6 +5385,7 @@ export function EmailViewer({
               </button>
             )}
           </div>
+            {downloadAllButton}
             {showAllBelowHeaderAttachments && visibleBelowHeaderCount !== null && effectiveAttachments.length > visibleBelowHeaderCount && (
               <>
                 <div className="fixed inset-0 z-40" onClick={() => setShowAllBelowHeaderAttachments(false)} />
@@ -5278,6 +5523,7 @@ export function EmailViewer({
                   +{effectiveAttachments.length - 2} {t('more')}
                 </button>
               )}
+              {downloadAllButton}
               {showAllMobileAttachments && effectiveAttachments.length > 2 && (
                 <>
                   <div className="fixed inset-0 z-40" onClick={() => setShowAllMobileAttachments(false)} />
@@ -5660,6 +5906,10 @@ export function EmailViewer({
           return allRecipients.find(r => r.email.toLowerCase() === contactSidebarEmail.toLowerCase())?.name;
         })()}
         onClose={() => setContactSidebarEmail(null)}
+        onEditContact={sidebarContact ? () => {
+          router.push(`/contacts?contactId=${sidebarContact.id}&view=edit`);
+          setContactSidebarEmail(null);
+        } : undefined}
         onAddToContacts={(addr, name) => {
           const { createContact, addLocalContact, supportsSync } = useContactStore.getState();
           const client = useAuthStore.getState().client;

components/email/quoted-html.ts

@@ -0,0 +1,196 @@
+"use client";
+
+import { Node as TiptapNode, mergeAttributes } from "@tiptap/core";
+import { DOMSerializer } from "@tiptap/pm/model";
+import type { Editor } from "@tiptap/react";
+
+import { buildSignatureBlock } from "@/components/email/signature-block";
+
+// Marker attribute that identifies the quoted-original wrapper in serialized
+// HTML, so parseHTML can recognise it on the way back in.
+export const QUOTED_HTML_MARKER = "data-quoted-html";
+
+/**
+ * QuotedHtml — an atomic block node that carries the *verbatim* HTML of a
+ * quoted/forwarded original email. The HTML is stored in the `html` attribute
+ * and is NEVER parsed into the ProseMirror schema, so layout-heavy emails
+ * (nested tables, MJML, Outlook divs) survive a reply/forward 1:1.
+ *
+ * Behaviour:
+ *  - To ProseMirror it's a single atomic block: Backspace at the boundary or
+ *    Ctrl+A + Delete removes the whole quote in one go ("wie es sich gehört").
+ *  - Its NodeView renders an inner `contentEditable` region so the user can
+ *    still redact text inside the quote. Inner edits are synced back into the
+ *    `html` attribute (without polluting the undo history).
+ *
+ * Serialization: ProseMirror's DOM serializer can't emit an atom's inner raw
+ * HTML, so use `serializeEditorContent(editor)` (below) instead of
+ * `editor.getHTML()` to read the composer body for sending/draft-saving.
+ */
+export const QuotedHtml = TiptapNode.create({
+  name: "quotedHtml",
+  group: "block",
+  atom: true,
+  selectable: true,
+  draggable: false,
+  // Isolating keeps selection/gapcursor behaviour sane at the boundary.
+  isolating: true,
+
+  addAttributes() {
+    return {
+      html: {
+        default: "",
+        // Capture the verbatim inner HTML when parsing. Because the node is
+        // an atom, ProseMirror does NOT descend into the children, so they
+        // never hit the schema.
+        parseHTML: (el) => el.innerHTML,
+        // Not rendered as an attribute - the real content round-trips via the
+        // custom serializer. renderHTML below only needs the wrapper.
+        renderHTML: () => ({}),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: `div[${QUOTED_HTML_MARKER}]` }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    // Only used for ProseMirror's internal/clipboard round-trip. The send /
+    // draft path uses serializeEditorContent() which inlines attrs.html.
+    return ["div", mergeAttributes(HTMLAttributes, { [QUOTED_HTML_MARKER]: "" })];
+  },
+
+  addNodeView() {
+    return ({ node, editor, getPos }) => {
+      // Host element ProseMirror manages. A subtle left border echoes the
+      // classic email quote bar without touching the quoted content's styling.
+      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;";
+
+      // CRITICAL: render the quoted email inside a Shadow Root. The app's
+      // global CSS (Tailwind preflight, .tiptap table/td rules, box-sizing
+      // resets) would otherwise cascade INTO the quote and destroy its layout
+      // - even though the verbatim HTML serializes/sends perfectly. Shadow DOM
+      // isolates both directions: only the browser's UA defaults + the email's
+      // own inline styles apply, so the in-editor rendering matches the sent
+      // mail 1:1.
+      const shadow = dom.attachShadow({ mode: "open" });
+      const inner = document.createElement("div");
+      inner.contentEditable = "true";
+      inner.style.cssText = "outline:none;";
+      inner.innerHTML = node.attrs.html || "";
+      shadow.appendChild(inner);
+
+      // Track focus via focusin/focusout: inside a shadow root,
+      // document.activeElement is retargeted to the host, so we can't rely on
+      // it to detect "is the user editing in here".
+      let focused = false;
+      inner.addEventListener("focusin", () => {
+        focused = true;
+      });
+      inner.addEventListener("focusout", () => {
+        focused = false;
+      });
+
+      // Sync inner edits back into the node attribute. Coalesced via rAF so a
+      // burst of keystrokes is one transaction; addToHistory:false keeps
+      // redaction edits out of the editor's undo stack. The `input` event is
+      // composed and crosses the shadow boundary, so this listener fires.
+      let frame = 0;
+      const syncBack = () => {
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(() => {
+          if (typeof getPos !== "function") return;
+          const pos = getPos();
+          if (pos == null) return;
+          const current = inner.innerHTML;
+          if (current === node.attrs.html) return;
+          editor.view.dispatch(
+            editor.view.state.tr
+              .setNodeAttribute(pos, "html", current)
+              .setMeta("addToHistory", false)
+          );
+        });
+      };
+      inner.addEventListener("input", syncBack);
+
+      return {
+        dom,
+        // ProseMirror must not try to reconcile the foreign shadow content.
+        ignoreMutation: () => true,
+        // Events originating inside the island are retargeted to the host
+        // (`dom`) once they cross the shadow boundary, so dom.contains(target)
+        // is true for them → let the native shadow contentEditable handle
+        // them. Events from the surrounding doc (boundary Backspace,
+        // Ctrl+A+Delete) target other elements → fall through to ProseMirror
+        // so whole-block deletion still works.
+        stopEvent: (event) => {
+          const target = event.target as Node | null;
+          return !!target && dom.contains(target);
+        },
+        update: (updatedNode) => {
+          if (updatedNode.type.name !== "quotedHtml") return false;
+          // Don't clobber the caret while the user is redacting inside.
+          if (!focused && inner.innerHTML !== updatedNode.attrs.html) {
+            inner.innerHTML = updatedNode.attrs.html || "";
+          }
+          return true;
+        },
+        destroy: () => {
+          cancelAnimationFrame(frame);
+          inner.removeEventListener("input", syncBack);
+        },
+      };
+    };
+  },
+});
+
+/**
+ * Serialize the composer document to HTML for sending / draft-saving.
+ *
+ * Use this INSTEAD of `editor.getHTML()`: ProseMirror's DOM serializer cannot
+ * emit the raw inner HTML of an atom node, so it would drop the quoted body.
+ * Here we walk the top-level nodes, inline the quote node's verbatim `html`,
+ * and serialize everything else normally.
+ */
+export function serializeEditorContent(editor: Editor): string {
+  const serializer = DOMSerializer.fromSchema(editor.schema);
+  const parts: string[] = [];
+  editor.state.doc.forEach((node) => {
+    if (node.type.name === "quotedHtml") {
+      // Emit the SAME wrapper buildQuotedHtmlBlock produces, so a saved draft
+      // round-trips: re-opening parses this back into a QuotedHtml node
+      // instead of letting the schema mangle the raw table layout again.
+      parts.push(buildQuotedHtmlBlock((node.attrs.html as string) || ""));
+      return;
+    }
+    if (node.type.name === "signatureBlock") {
+      // Same rationale as quotedHtml: inline the verbatim signature HTML so the
+      // styled signature reaches the recipient (and a saved draft round-trips)
+      // instead of the schema-flattened version.
+      parts.push(buildSignatureBlock((node.attrs.html as string) || ""));
+      return;
+    }
+    const fragment = serializer.serializeNode(node);
+    const tmp = document.createElement("div");
+    tmp.appendChild(fragment);
+    parts.push(tmp.innerHTML);
+  });
+  return parts.join("");
+}
+
+/**
+ * Build the editor-content wrapper that the composer prepends/appends so the
+ * quoted original becomes a single QuotedHtml node. The inner HTML must be
+ * pre-sanitized (scripts/styles/head stripped, cid: images rewritten).
+ *
+ * The `data-quoted-html` marker is what parseHTML keys on, so this exact form
+ * must be what serializeEditorContent emits too (round-trip consistency).
+ */
+export function buildQuotedHtmlBlock(sanitizedInnerHtml: string): string {
+  return `<div ${QUOTED_HTML_MARKER}>${sanitizedInnerHtml}</div>`;
+}

components/email/read-receipt-banner.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { useState } from 'react';
+import { MailCheck, Loader2, CheckCircle } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+interface ReadReceiptBannerProps {
+  /** Address that requested the receipt (Disposition-Notification-To). */
+  requestedBy: string;
+  /** Sends the MDN. Should resolve when the receipt has been submitted. */
+  onSend: () => Promise<void>;
+  /** Suppresses the request without sending (sets $MDNSent server-side). */
+  onIgnore: () => void;
+}
+
+export function ReadReceiptBanner({ requestedBy, onSend, onIgnore }: ReadReceiptBannerProps) {
+  const t = useTranslations('email_viewer.read_receipt');
+  const [state, setState] = useState<'idle' | 'sending' | 'sent'>('idle');
+
+  if (state === 'sent') {
+    return (
+      <div className="flex items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
+        <CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400 shrink-0" />
+        <span>{t('sent')}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 rounded-md border border-amber-300/60 bg-amber-50 px-3 py-2 text-sm dark:border-amber-700/50 dark:bg-amber-950/30">
+      <MailCheck className="w-4 h-4 shrink-0 text-amber-600 dark:text-amber-400" />
+      <span className="text-foreground">{t('prompt')}</span>
+      <span className="break-all text-muted-foreground">{requestedBy}</span>
+      <div className="ml-auto flex items-center gap-2">
+        <button
+          onClick={async () => {
+            setState('sending');
+            try {
+              await onSend();
+              setState('sent');
+            } catch {
+              setState('idle');
+            }
+          }}
+          disabled={state === 'sending'}
+          className="inline-flex items-center gap-1.5 rounded-md bg-green-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {state === 'sending' && <Loader2 className="w-3 h-3 animate-spin" />}
+          {t('send')}
+        </button>
+        <button
+          onClick={onIgnore}
+          className="rounded-md bg-red-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-red-700"
+        >
+          {t('ignore')}
+        </button>
+      </div>
+    </div>
+  );
+}

components/email/rich-text-editor.tsx

@@ -16,6 +16,8 @@ import { Table } from "@tiptap/extension-table";
 import { TableRow } from "@tiptap/extension-table-row";
 import { TableHeader } from "@tiptap/extension-table-header";
 import { TableCell } from "@tiptap/extension-table-cell";
+import { QuotedHtml, serializeEditorContent } from "@/components/email/quoted-html";
+import { SignatureBlock } from "@/components/email/signature-block";
 import { cn } from "@/lib/utils";
 import {
   Bold,
@@ -231,6 +233,13 @@ export function RichTextEditor({
           style: "padding:6px 8px;border:1px solid #ccc;vertical-align:top;",
         },
       }),
+      // Quoted/forwarded original email body - held verbatim as an atomic
+      // node so layout-heavy HTML survives 1:1 (see quoted-html.ts).
+      QuotedHtml,
+      // Identity signature - held verbatim as a non-editable atomic node so
+      // rich/branded signatures keep their inline styling in the editor and
+      // in the sent mail (see signature-block.ts).
+      SignatureBlock,
     ],
     content,
     editorProps: {
@@ -281,14 +290,18 @@ export function RichTextEditor({
       },
     },
     onUpdate: ({ editor }) => {
-      onChange(editor.getHTML());
+      // serializeEditorContent (not getHTML) so the verbatim quoted-original
+      // HTML held in the QuotedHtml atom node is emitted intact.
+      onChange(serializeEditorContent(editor));
     },
     immediatelyRender: false,
   });
 
-  // Sync external content changes (e.g. template application)
+  // Sync external content changes (e.g. template application). Compare against
+  // the custom serialization so a doc that only differs inside a QuotedHtml
+  // island isn't needlessly re-parsed (which would reset the island DOM).
   useEffect(() => {
-    if (editor && content !== editor.getHTML()) {
+    if (editor && content !== serializeEditorContent(editor)) {
       editor.commands.setContent(content, { emitUpdate: false });
     }
   }, [content, editor]);

components/email/signature-block.ts

@@ -0,0 +1,105 @@
+"use client";
+
+import { Node as TiptapNode, mergeAttributes } from "@tiptap/core";
+
+// Marker attribute that identifies the signature wrapper in serialized HTML,
+// so parseHTML can recognise it on the way back in (initial content, drafts).
+export const SIGNATURE_BLOCK_MARKER = "data-signature-block-node";
+
+/**
+ * SignatureBlock — an atomic, NON-editable block node that carries the
+ * *verbatim* HTML of the user's identity signature in its `html` attribute.
+ *
+ * Why: the signature is embedded into the composer so it stays in the body,
+ * but parsing rich, table-based "brand" signatures into the ProseMirror schema
+ * strips their inline CSS (background/text colors, fonts, border-radius). By
+ * holding the signature as an atom it is never parsed into the schema, so the
+ * styling survives 1:1 — both in the editor (rendered by the NodeView below)
+ * and in the sent mail (emitted by serializeEditorContent in quoted-html.ts).
+ *
+ * Mirrors QuotedHtml, but the inner region is read-only: a signature is meant
+ * to be inserted/removed as a unit, not edited inline. Select the node and
+ * press Backspace/Delete to drop the whole signature.
+ */
+export const SignatureBlock = TiptapNode.create({
+  name: "signatureBlock",
+  group: "block",
+  atom: true,
+  selectable: true,
+  draggable: false,
+  // Isolating keeps selection/gapcursor behaviour sane at the boundary.
+  isolating: true,
+
+  addAttributes() {
+    return {
+      html: {
+        default: "",
+        // Capture the verbatim inner HTML when parsing. Because the node is an
+        // atom, ProseMirror does NOT descend into the children, so the rich
+        // signature markup never hits (and is never mangled by) the schema.
+        parseHTML: (el) => el.innerHTML,
+        // The real content round-trips via the custom serializer
+        // (serializeEditorContent); renderHTML below only needs the wrapper.
+        renderHTML: () => ({}),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: `div[${SIGNATURE_BLOCK_MARKER}]` }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    // Only used for ProseMirror's internal/clipboard round-trip. The send /
+    // draft path uses serializeEditorContent() which inlines attrs.html.
+    return ["div", mergeAttributes(HTMLAttributes, { [SIGNATURE_BLOCK_MARKER]: "" })];
+  },
+
+  addNodeView() {
+    return ({ node }) => {
+      const dom = document.createElement("div");
+      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 -
+      // exactly the corruption we are fixing. Shadow DOM isolates both
+      // directions, so only the browser's UA defaults + the signature's own
+      // inline styles apply and the in-editor preview matches the sent mail.
+      const shadow = dom.attachShadow({ mode: "open" });
+      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 || "";
+      shadow.appendChild(inner);
+
+      return {
+        dom,
+        // ProseMirror must not try to reconcile the foreign shadow content.
+        ignoreMutation: () => true,
+        // Let ProseMirror handle all events so clicking selects the atom and
+        // Backspace/Delete removes the whole signature.
+        stopEvent: () => false,
+        update: (updatedNode) => {
+          if (updatedNode.type.name !== "signatureBlock") return false;
+          if (inner.innerHTML !== (updatedNode.attrs.html || "")) {
+            inner.innerHTML = updatedNode.attrs.html || "";
+          }
+          return true;
+        },
+      };
+    };
+  },
+});
+
+/**
+ * Build the editor-content wrapper that embeds the signature as a single
+ * SignatureBlock node. The inner HTML must be pre-sanitized
+ * (sanitizeSignatureHtml). The `data-signature-block-node` marker is what
+ * parseHTML keys on, so this exact form must be what serializeEditorContent
+ * emits too (round-trip consistency).
+ */
+export function buildSignatureBlock(sanitizedInnerHtml: string): string {
+  return `<div ${SIGNATURE_BLOCK_MARKER}>${sanitizedInnerHtml}</div>`;
+}

components/email/thread-list-item.tsx

@@ -2,10 +2,10 @@
 
 import React, { useCallback } from "react";
 import { formatDate, formatDateTime, stripInvisibleLeading } from "@/lib/utils";
-import { Email, ThreadGroup } from "@/lib/jmap/types";
+import { Email, ThreadGroup, ALL_MAIL_MAILBOX_ID } from "@/lib/jmap/types";
 import { cn } from "@/lib/utils";
 import { Avatar } from "@/components/ui/avatar";
-import { Paperclip, Star, Circle, ChevronRight, ChevronDown, Loader2, MessageSquare, CheckSquare, Square, Reply, Forward, CalendarClock } from "lucide-react";
+import { Paperclip, Star, Circle, ChevronRight, ChevronDown, Loader2, MessageSquare, CheckSquare, Square, Reply, Forward, CalendarClock, Folder } from "lucide-react";
 import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";
 import { useUIStore } from "@/stores/ui-store";
 import { useEmailStore } from "@/stores/email-store";
@@ -17,6 +17,23 @@ import { ThreadEmailItem } from "./thread-email-item";
 import { EmailHoverActions } from "./email-hover-actions";
 import { useTranslations } from "next-intl";
 
+/**
+ * Small chip showing the originating folder of a message, rendered in the
+ * aggregate "All …" views (All Mail / unified / cross-account) where rows come
+ * from different folders. `email.sourceFolder` is stamped at fetch time.
+ */
+function SourceFolderTag({ name }: { name: string }) {
+  return (
+    <span
+      className="inline-flex max-w-[8rem] shrink-0 items-center gap-1 truncate rounded-full border border-border bg-muted/40 px-1.5 py-0.5 text-[11px] text-muted-foreground"
+      title={name}
+    >
+      <Folder className="h-3 w-3 shrink-0" />
+      <span className="truncate">{name}</span>
+    </span>
+  );
+}
+
 interface ThreadListItemProps {
   thread: ThreadGroup;
   isExpanded: boolean;
@@ -24,6 +41,7 @@ interface ThreadListItemProps {
   isLoading?: boolean;
   expandedEmails?: Email[];
   onToggleExpand: () => void;
+  onCollapseAllThreads?: () => void;
   onEmailSelect: (email: Email) => void;
   onEmailDoubleClick?: (email: Email) => void;
   onContextMenu?: (e: React.MouseEvent, email: Email) => void;
@@ -34,6 +52,7 @@ interface ThreadListItemProps {
   onArchive?: (email: Email) => void;
   onSetColorTag?: (emailId: string, color: string | null) => void;
   onMarkAsSpam?: (email: Email) => void;
+  onUndoSpam?: (email: Email) => void;
 }
 
 interface SingleEmailItemProps {
@@ -50,18 +69,22 @@ interface SingleEmailItemProps {
   onArchive?: () => void;
   onSetColorTag?: (color: string | null) => void;
   onMarkAsSpam?: () => void;
+  onUndoSpam?: () => void;
 }
 
 const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
-  function SingleEmailItem({ email, selected, onClick, onDoubleClick, onContextMenu, showPreview, colorTag, onToggleStar, onMarkAsRead, onDelete, onArchive, onSetColorTag, onMarkAsSpam }, ref) {
+  function SingleEmailItem({ email, selected, onClick, onDoubleClick, onContextMenu, showPreview, colorTag, onToggleStar, onMarkAsRead, onDelete, onArchive, onSetColorTag, onMarkAsSpam, onUndoSpam }, ref) {
     const t = useTranslations('email_viewer');
     const isUnread = !email.keywords?.$seen;
     const isStarred = email.keywords?.$flagged;
     const isAnswered = email.keywords?.$answered;
     const isForwarded = email.keywords?.$forwarded;
-    const { selectedMailbox, mailboxes, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection } = useEmailStore();
+    const { selectedMailbox, mailboxes, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection, isUnifiedView, unifiedRole } = useEmailStore();
-    // In Sent/Drafts folders, show recipient instead of sender (which is always "me")
+    // In Sent/Drafts folders, show recipient instead of sender (which is always
-    const currentMailboxRole = mailboxes.find(mb => mb.id === selectedMailbox)?.role;
+    // "me"). In aggregate role-views the selected mailbox is virtual → fall back
+    // to the unified role so junk-contextual UI and avatar hiding work.
+    const currentMailboxRole = mailboxes.find(mb => mb.id === selectedMailbox)?.role
+      ?? (isUnifiedView ? (unifiedRole ?? undefined) : undefined);
     const showRecipient = currentMailboxRole === 'sent' || currentMailboxRole === 'drafts';
     const sender = showRecipient ? (email.to?.[0] ?? email.from?.[0]) : email.from?.[0];
     const emailKeywords = useSettingsStore((state) => state.emailKeywords);
@@ -70,7 +93,8 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
     const timeFormat = useSettingsStore((state) => state.timeFormat);
     const showAvatarsInJunk = useSettingsStore((state) => state.showAvatarsInJunk);
     const hideJunkAvatarImages = currentMailboxRole === 'junk' && !showAvatarsInJunk;
-    const isUnifiedView = useEmailStore((state) => state.isUnifiedView);
+    // Show the originating folder in the aggregate "All …" views.
+    const showSourceFolder = (isUnifiedView || selectedMailbox === ALL_MAIL_MAILBOX_ID) && !!email.sourceFolder;
     const getAccountById = useAccountStore((state) => state.getAccountById);
     const accountColor = email.accountId ? getAccountById(email.accountId)?.avatarColor : undefined;
     const isChecked = selectedEmailIds.has(email.id);
@@ -187,7 +211,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
           )}
 
           {isUnread && (
-            <div className="absolute left-1 top-1/2 -translate-y-1/2">
+            <div className="absolute left-0.5 top-1/2 -translate-y-1/2">
               <Circle className="w-2 h-2 fill-unread text-unread" />
             </div>
           )}
@@ -221,13 +245,13 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
                   </span>
                   <div className="flex min-w-0 flex-1 items-center gap-2 text-sm">
                     <span className={cn(
-                      'shrink-0 truncate',
+                      'min-w-0 truncate',
                       isUnread ? 'font-semibold text-foreground' : 'text-foreground/90'
                     )}>
                       {email.subject || '(no subject)'}
                     </span>
                     {inlinePreview && (
-                      <span className="min-w-0 truncate text-muted-foreground">{inlinePreview}</span>
+                      <span className="min-w-0 shrink-[9999] truncate text-muted-foreground">{inlinePreview}</span>
                     )}
                   </div>
                 </div>
@@ -245,6 +269,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
                   {resolvedKeywordDefs.map((kd) => (
                     <span key={kd.id} className={cn('h-2.5 w-2.5 rounded-full', KEYWORD_PALETTE[kd.color]?.dot || 'bg-gray-400')} />
                   ))}
+                  {showSourceFolder && <SourceFolderTag name={email.sourceFolder!} />}
                   {scheduledSendLabel ? (
                     <span
                       className="inline-flex max-w-[11rem] shrink-0 items-center gap-1 truncate rounded-full border border-sky-500/20 bg-sky-500/10 px-2 py-0.5 text-xs font-medium tabular-nums text-sky-700 dark:text-sky-300"
@@ -313,6 +338,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
                         {kd.label}
                       </span>
                     ))}
+                    {showSourceFolder && <SourceFolderTag name={email.sourceFolder!} />}
                     {scheduledSendLabel ? (
                       <span
                         className="inline-flex max-w-[11rem] shrink-0 items-center gap-1 truncate rounded-full border border-sky-500/20 bg-sky-500/10 px-2 py-0.5 text-[11px] font-medium tabular-nums text-sky-700 dark:text-sky-300"
@@ -369,6 +395,8 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
             onArchive={onArchive}
             onSetColorTag={onSetColorTag}
             onMarkAsSpam={onMarkAsSpam}
+            onUndoSpam={onUndoSpam}
+            isInJunk={currentMailboxRole === 'junk'}
           />
         )}
       </div>
@@ -384,6 +412,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
     isLoading = false,
     expandedEmails,
     onToggleExpand,
+    onCollapseAllThreads,
     onEmailSelect,
     onEmailDoubleClick,
     onContextMenu,
@@ -394,6 +423,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
     onArchive,
     onSetColorTag,
     onMarkAsSpam,
+    onUndoSpam,
   }, ref) {
     const t = useTranslations('threads');
     const tEmailViewer = useTranslations('email_viewer');
@@ -412,11 +442,15 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
       ? formatDateTime(latestEmail.scheduledSendAt, timeFormat)
       : null;
 
-    const { selectedMailbox, mailboxes, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection, isUnifiedView } = useEmailStore();
+    const { selectedMailbox, mailboxes, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection, isUnifiedView, unifiedRole } = useEmailStore();
+    const showSourceFolder = (isUnifiedView || selectedMailbox === ALL_MAIL_MAILBOX_ID) && !!latestEmail.sourceFolder;
     const getAccountById = useAccountStore((state) => state.getAccountById);
     const threadAccountColor = latestEmail.accountId ? getAccountById(latestEmail.accountId)?.avatarColor : undefined;
-    // In Sent/Drafts folders, show recipient instead of sender (which is always "me")
+    // In Sent/Drafts folders, show recipient instead of sender (which is always
-    const currentMailboxRole = mailboxes.find(mb => mb.id === selectedMailbox)?.role;
+    // "me"). Aggregate role-views use a virtual selected mailbox → fall back to
+    // the unified role so junk-contextual UI and avatar hiding work.
+    const currentMailboxRole = mailboxes.find(mb => mb.id === selectedMailbox)?.role
+      ?? (isUnifiedView ? (unifiedRole ?? undefined) : undefined);
     const showRecipient = currentMailboxRole === 'sent' || currentMailboxRole === 'drafts';
     const displayNames = showRecipient
       ? Array.from(new Set(
@@ -470,6 +504,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
           onArchive={onArchive ? () => onArchive(latestEmail) : undefined}
           onSetColorTag={onSetColorTag ? (color) => onSetColorTag(latestEmail.id, color) : undefined}
           onMarkAsSpam={onMarkAsSpam ? () => onMarkAsSpam(latestEmail) : undefined}
+          onUndoSpam={onUndoSpam ? () => onUndoSpam(latestEmail) : undefined}
         />
       );
     }
@@ -515,6 +550,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
       } else {
         if (selectedEmailIds.size > 0) clearSelection();
         if (!isExpanded) {
+          onCollapseAllThreads?.();
           onToggleExpand();
         }
         onEmailSelect(latestEmail);
@@ -581,46 +617,49 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
               </button>
             )}
 
-            {!isMobile && !isFocusedMailLayout && (
-              <button
-                data-expand-toggle
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onToggleExpand();
-                }}
-                className={cn(
-                  "p-1 rounded mt-2 flex-shrink-0 transition-all duration-200",
-                  "hover:bg-muted/50 hover:scale-110",
-                  "active:scale-95",
-                  "text-muted-foreground hover:text-foreground"
-                )}
-                aria-expanded={isExpanded}
-                aria-label={t('toggle_thread')}
-              >
-                {isLoading ? (
-                  <Loader2 className="w-4 h-4 animate-spin" />
-                ) : isExpanded ? (
-                  <ChevronDown className="w-4 h-4" />
-                ) : (
-                  <ChevronRight className="w-4 h-4" />
-                )}
-              </button>
-            )}
-
             {hasUnread && (
-              <div className="absolute left-1 top-1/2 -translate-y-1/2">
+              <div className="absolute left-0.5 top-1/2 -translate-y-1/2">
                 <Circle className="w-2 h-2 fill-unread text-unread" />
               </div>
             )}
 
             {density !== 'extra-compact' && (
-              <Avatar
+              <div className="relative flex-shrink-0">
-                name={avatarPerson?.name}
+                <Avatar
-                email={avatarPerson?.email}
+                  name={avatarPerson?.name}
-                size={isFocusedMailLayout ? "sm" : "md"}
+                  email={avatarPerson?.email}
-                className="flex-shrink-0 shadow-sm"
+                  size={isFocusedMailLayout ? "sm" : "md"}
-                disableImages={hideJunkAvatarImages}
+                  className="shadow-sm"
-              />
+                  disableImages={hideJunkAvatarImages}
+                />
+                {!isMobile && !isFocusedMailLayout && (
+                  <button
+                    data-expand-toggle
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onToggleExpand();
+                    }}
+                    className={cn(
+                      "absolute -bottom-2.5 left-1/2 -translate-x-1/2 p-0.5 rounded-full",
+                      "transition-all duration-200",
+                      "hover:bg-muted/50 hover:scale-110",
+                      "active:scale-95",
+                      "text-muted-foreground hover:text-foreground",
+                      "bg-background border border-border"
+                    )}
+                    aria-expanded={isExpanded}
+                    aria-label={t('toggle_thread')}
+                  >
+                    {isLoading ? (
+                      <Loader2 className="w-3 h-3 animate-spin" />
+                    ) : isExpanded ? (
+                      <ChevronDown className="w-3 h-3" />
+                    ) : (
+                      <ChevronRight className="w-3 h-3" />
+                    )}
+                  </button>
+                )}
+              </div>
             )}
 
             <div className="flex-1 min-w-0">
@@ -652,13 +691,13 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                     </span>
                     <div className="flex min-w-0 flex-1 items-center gap-2 text-sm">
                       <span className={cn(
-                        'shrink-0 truncate',
+                        'min-w-0 truncate',
                         hasUnread ? 'font-semibold text-foreground' : 'text-foreground/90'
                       )}>
                         {latestEmail.subject || '(no subject)'}
                       </span>
                       {inlinePreview && (
-                        <span className="min-w-0 truncate text-muted-foreground">{inlinePreview}</span>
+                        <span className="min-w-0 shrink-[9999] truncate text-muted-foreground">{inlinePreview}</span>
                       )}
                     </div>
                   </div>
@@ -676,6 +715,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                     {keywordDef && (
                       <span className={cn('h-2.5 w-2.5 rounded-full', KEYWORD_PALETTE[keywordDef.color]?.dot || 'bg-gray-400')} />
                     )}
+                    {showSourceFolder && <SourceFolderTag name={latestEmail.sourceFolder!} />}
                     {scheduledSendLabel ? (
                       <span
                         className="inline-flex max-w-[11rem] shrink-0 items-center gap-1 truncate rounded-full border border-sky-500/20 bg-sky-500/10 px-2 py-0.5 text-xs font-medium tabular-nums text-sky-700 dark:text-sky-300"
@@ -756,6 +796,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                           {keywordDef.label}
                         </span>
                       )}
+                      {showSourceFolder && <SourceFolderTag name={latestEmail.sourceFolder!} />}
                       {scheduledSendLabel ? (
                         <span
                           className="inline-flex max-w-[11rem] shrink-0 items-center gap-1 truncate rounded-full border border-sky-500/20 bg-sky-500/10 px-2 py-0.5 text-[11px] font-medium tabular-nums text-sky-700 dark:text-sky-300"
@@ -812,6 +853,8 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
               onArchive={onArchive ? () => onArchive(latestEmail) : undefined}
               onSetColorTag={onSetColorTag ? (color) => onSetColorTag(latestEmail.id, color) : undefined}
               onMarkAsSpam={onMarkAsSpam ? () => onMarkAsSpam(latestEmail) : undefined}
+              onUndoSpam={onUndoSpam ? () => onUndoSpam(latestEmail) : undefined}
+              isInJunk={currentMailboxRole === 'junk'}
             />
           )}
         </div>

components/files/eml-preview.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Paperclip, Download } from "lucide-react";
+import { sanitizeEmailHtmlForIframe } from "@/lib/email-sanitization";
+
+// A parsed message/rfc822 (.eml), as produced by postal-mime. Only the fields
+// this preview renders are typed.
+export type ParsedEml = {
+  subject?: string;
+  from?: { name?: string; address?: string };
+  to?: Array<{ name?: string; address?: string }>;
+  date?: string;
+  html?: string;
+  text?: string;
+  attachments?: Array<{ filename?: string; mimeType?: string; content?: ArrayBuffer | Uint8Array }>;
+};
+
+function formatAddress(a?: { name?: string; address?: string }): string {
+  if (!a) return "";
+  if (a.name && a.address) return `${a.name} <${a.address}>`;
+  return a.address || a.name || "";
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+// Renders a .eml attachment like an email: header (from/to/subject/date) + the
+// body, plus the message's own attachments. The body is sanitized with
+// DOMPurify AND rendered in a fully-locked sandbox iframe (sandbox="" - no
+// scripts, no same-origin), so a script-bearing .eml can never execute in our
+// origin. Parsing happens in the caller (FilePreviewModal); this is pure
+// presentation.
+export function EmlPreview({ message }: { message: ParsedEml }) {
+  const t = useTranslations("email_viewer");
+
+  const bodyDoc = message.html
+    ? sanitizeEmailHtmlForIframe(message.html)
+    : message.text
+      ? `<pre style="white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,monospace;margin:0;padding:8px">${escapeHtml(message.text)}</pre>`
+      : "";
+
+  const downloadAttachment = (att: NonNullable<ParsedEml["attachments"]>[number]) => {
+    if (!att.content) return;
+    // content is a real ArrayBuffer/Uint8Array at runtime; cast for the strict
+    // BlobPart lib type (Uint8Array<ArrayBufferLike> vs ArrayBuffer).
+    const url = URL.createObjectURL(new Blob([att.content as BlobPart], { type: att.mimeType || "application/octet-stream" }));
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = att.filename || "attachment";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div
+      className="w-full max-w-3xl max-h-full self-start overflow-auto rounded-lg border border-border bg-background shadow-2xl p-4"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <h2 className="text-lg font-semibold text-foreground break-words">{message.subject || ""}</h2>
+      <div className="mt-2 space-y-0.5 text-sm text-muted-foreground border-b border-border pb-3">
+        {message.from && (
+          <div><span className="font-medium text-foreground">{t("from")}: </span>{formatAddress(message.from)}</div>
+        )}
+        {message.to && message.to.length > 0 && (
+          <div><span className="font-medium text-foreground">{t("to")}: </span>{message.to.map(formatAddress).join(", ")}</div>
+        )}
+        {message.date && (
+          <div><span className="font-medium text-foreground">{t("date")}: </span>{new Date(message.date).toLocaleString()}</div>
+        )}
+      </div>
+      {bodyDoc && (
+        <iframe
+          title={message.subject || "email"}
+          sandbox=""
+          srcDoc={bodyDoc}
+          className="w-full min-h-[55vh] mt-3 rounded bg-white"
+        />
+      )}
+      {message.attachments && message.attachments.length > 0 && (
+        <div className="mt-4 border-t border-border pt-3">
+          <div className="text-xs font-medium text-muted-foreground mb-2">{t("attachments")}</div>
+          <div className="flex flex-wrap gap-2">
+            {message.attachments.map((att, i) => (
+              <button
+                key={i}
+                type="button"
+                onClick={() => downloadAttachment(att)}
+                title={t("download")}
+                className="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm bg-muted text-foreground hover:bg-muted/70"
+              >
+                <Paperclip className="w-3 h-3 flex-shrink-0" />
+                <span className="max-w-[200px] truncate">{att.filename || "attachment"}</span>
+                <Download className="w-3 h-3 flex-shrink-0 text-muted-foreground" />
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

components/files/file-browser.tsx

@@ -11,7 +11,7 @@ import {
   AlertCircle, Star, Clock, FolderUp,
   FileArchive, FileSpreadsheet, Presentation, FileCode,
   Box, PenTool, Terminal as TerminalIcon, Database, Type as TypeIcon,
-  Menu,
+  Menu, Users, Share2,
 } from "lucide-react";
 import { useIsDesktop } from "@/hooks/use-media-query";
 import { Button } from "@/components/ui/button";
@@ -26,6 +26,9 @@ import { ResizeHandle } from "@/components/layout/resize-handle";
 import { Avatar } from "@/components/ui/avatar";
 import { getDroppedFilesAndFolders } from "@/lib/webdav/drop-utils";
 import type { FileResource } from "@/stores/file-store";
+import { ShareCollectionDialog } from "@/components/settings/share-collection-dialog";
+import type { IJMAPClient } from "@/lib/jmap/client-interface";
+import type { FileNodeRights } from "@/lib/jmap/types";
 
 type SortKey = "name" | "size" | "modified";
 type SortDir = "asc" | "desc";
@@ -95,6 +98,14 @@ interface FileBrowserProps {
   accountPickerMode?: boolean;
   /** Pro shell only: label of the currently-attached account, shown as a breadcrumb segment after Home. */
   accountLabel?: string | null;
+  /** JMAP client for the browsing account, used by the share dialog to list principals. */
+  client?: IJMAPClient | null;
+  /** Files account id of the browsing account; used to exclude self from the share picker. */
+  ownAccountId?: string | null;
+  /** True when the server supports JMAP Sharing (principals); gates the Share action. */
+  sharingEnabled?: boolean;
+  /** Add/update/remove a principal's share on a node. Set null rights to revoke. */
+  onShare?: (id: string, principalId: string, rights: FileNodeRights | null) => Promise<void>;
 }
 
 const IMAGE_EXTENSIONS = new Set(["jpg", "jpeg", "png", "gif", "svg", "webp", "bmp", "ico", "avif"]);
@@ -230,6 +241,33 @@ function getGridIcon(resource: FileResource) {
   return getFileIconByName(resource.name, "lg");
 }
 
+// Small inline indicator: a node shared out by the user (shareWith has entries)
+// or a node shared *with* the user by another principal (isShared).
+function ShareBadge({ resource, t }: { resource: FileResource; t: (key: string) => string }) {
+  const sharedOut = !!resource.shareWith && Object.keys(resource.shareWith).length > 0;
+  if (resource.isShared) {
+    return (
+      <Share2
+        className="w-3.5 h-3.5 text-primary shrink-0"
+        aria-label={t("shared_with_me")}
+      >
+        <title>{t("shared_with_me")}</title>
+      </Share2>
+    );
+  }
+  if (sharedOut) {
+    return (
+      <Users
+        className="w-3.5 h-3.5 text-primary shrink-0"
+        aria-label={t("shared")}
+      >
+        <title>{t("shared")}</title>
+      </Users>
+    );
+  }
+  return null;
+}
+
 function Thumbnail({ name, getImageUrl: fetchUrl, size = "sm" }: {
   name: string;
   getImageUrl: (n: string) => Promise<string>;
@@ -342,11 +380,25 @@ export function FileBrowser({
   onSelectAccount,
   accountPickerMode,
   accountLabel,
+  client,
+  ownAccountId,
+  sharingEnabled,
+  onShare,
 }: FileBrowserProps) {
   const t = useTranslations("files");
   const [showNewFolder, setShowNewFolder] = useState(false);
   const [renameTarget, setRenameTarget] = useState<string | null>(null);
+  const [shareTargetId, setShareTargetId] = useState<string | null>(null);
   const [isDraggingOver, setIsDraggingOver] = useState(false);
+  // The share dialog is bound to a node id (not name) so its shareWith stays
+  // live after a share refresh re-derives the resource list.
+  const shareTarget = shareTargetId ? resources.find(r => r.id === shareTargetId) ?? null : null;
+  // A node is shareable when the server supports JMAP Sharing, the viewer owns
+  // it (not a shared-with-me node), and holds the mayShare right (owned nodes
+  // report full rights; treat missing myRights as allowed).
+  const canShare = useCallback((r: FileResource | null | undefined): boolean =>
+    !!(sharingEnabled && onShare && client && r && !r.isShared && (r.myRights?.mayShare ?? true)),
+    [sharingEnabled, onShare, client]);
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number; name: string } | null>(null);
   const [emptyContextMenu, setEmptyContextMenu] = useState<{ x: number; y: number } | null>(null);
   const [showNewTextFile, setShowNewTextFile] = useState(false);
@@ -1440,8 +1492,9 @@ export function FileBrowser({
                     {showThumbnails && isImageFile(resource.name)
                       ? <Thumbnail name={resource.name} getImageUrl={getImageUrl} size="lg" />
                       : getGridIcon(resource)}
-                    <span className="text-xs truncate w-full text-center" title={resource.name}>
+                    <span className="text-xs truncate w-full text-center flex items-center justify-center gap-1" title={resource.name}>
-                      {resource.name}
+                      <span className="truncate">{resource.name}</span>
+                      <ShareBadge resource={resource} t={t} />
                     </span>
                   </div>
                 ))}
@@ -1590,6 +1643,7 @@ export function FileBrowser({
                         ? <Thumbnail name={resource.name} getImageUrl={getImageUrl} size="sm" />
                         : getFileIcon(resource)}
                       <span className="truncate">{resource.name}</span>
+                      <ShareBadge resource={resource} t={t} />
                     </div>
                   </td>
                   <td className="px-4 py-2.5 text-muted-foreground hidden md:table-cell tabular-nums">
@@ -1697,6 +1751,19 @@ export function FileBrowser({
                 {t("duplicate")}
               </button>
             )}
+            {canShare(resources.find(r => r.name === contextMenu.name)) && (
+              <button
+                className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted transition-colors text-left"
+                onClick={() => {
+                  const r = resources.find(res => res.name === contextMenu.name);
+                  if (r) setShareTargetId(r.id);
+                  setContextMenu(null);
+                }}
+              >
+                <Share2 className="w-4 h-4" />
+                {t("share")}
+              </button>
+            )}
             <div className="h-px bg-border my-1" />
             <button
               className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted transition-colors text-left"
@@ -1936,6 +2003,20 @@ export function FileBrowser({
           onCancel={() => setRenameTarget(null)}
         />
       )}
+
+      {/* Share dialog */}
+      {shareTarget && client && onShare && (
+        <ShareCollectionDialog
+          client={client}
+          kind="file"
+          collectionName={shareTarget.name}
+          shareWith={shareTarget.shareWith}
+          ownAccountId={ownAccountId || ""}
+          onShare={(principalId, rights) =>
+            onShare(shareTarget.id, principalId, rights as FileNodeRights | null)}
+          onClose={() => setShareTargetId(null)}
+        />
+      )}
     </div>
   );
 }

components/files/file-preview-modal.tsx

@@ -1,10 +1,48 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useTranslations } from "next-intl";
-import { X, Download, Loader2 } from "lucide-react";
+import { X, Download, Loader2, ExternalLink } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { getFilePreviewKind } from "@/lib/file-preview";
+import { getFilePreviewKind, isMimeTypeSafeForInlinePreview } from "@/lib/file-preview";
+import dynamic from "next/dynamic";
+import { EmlPreview, type ParsedEml } from "@/components/files/eml-preview";
+
+// pdf.js-based inline viewer for mobile (no native inline PDF viewer). Loaded
+// only on the mobile PDF path so pdfjs-dist + its worker never reach the
+// desktop bundle.
+const PdfMobileViewer = dynamic(
+  () => import("@/components/files/pdf-mobile-viewer").then((m) => m.PdfMobileViewer),
+  { ssr: false },
+);
+
+// Map a few well-known extensions back to canonical MIME types. Used when the
+// server returns application/octet-stream (or empty) for an attachment whose
+// actual type is obvious from the filename. The blob.type drives how browsers
+// render blob: URLs, so guessing wrong here means the inline preview silently
+// downgrades to a download.
+const EXT_TO_MIME: Record<string, string> = {
+  pdf: "application/pdf",
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  webp: "image/webp",
+  avif: "image/avif",
+  bmp: "image/bmp",
+  mp3: "audio/mpeg",
+  wav: "audio/wav",
+  ogg: "audio/ogg",
+  m4a: "audio/mp4",
+  mp4: "video/mp4",
+  webm: "video/webm",
+  ogv: "video/ogg",
+};
+
+function inferMimeFromName(name: string): string | undefined {
+  const ext = name.toLowerCase().split(".").pop();
+  return ext ? EXT_TO_MIME[ext] : undefined;
+}
 
 interface FilePreviewModalProps {
   name: string;
@@ -111,6 +149,54 @@ export function FilePreviewModal({ name, onClose, onDownload, getFileContent }:
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
   const [resolvedFileType, setResolvedFileType] = useState(() => getFilePreviewKind(name));
+  const [pdfInlineSupported, setPdfInlineSupported] = useState(true);
+  // Whether the resolved blob MIME is inert enough to open as a top-level
+  // navigation. Blob URLs inherit our origin, so opening a script-bearing type
+  // (text/html, image/svg+xml, ...) in a new tab would execute it in-origin.
+  const [canOpenInNewTab, setCanOpenInNewTab] = useState(false);
+  const [emlContent, setEmlContent] = useState<ParsedEml | null>(null);
+
+  // Decide whether to render the PDF in a plain <iframe> (desktop) or with the
+  // pdf.js canvas viewer (mobile). navigator.pdfViewerEnabled is the standard
+  // signal and correctly reports false on Android Chrome (no inline viewer).
+  // iOS Safari is the exception: it reports true (it can show PDFs on top-frame
+  // navigation) yet renders only the FIRST page inside an <iframe> - a
+  // long-standing WebKit limitation - so it must use pdf.js too. Detect iOS
+  // (incl. iPadOS, which spoofs a "Macintosh" UA but exposes touch points).
+  useEffect(() => {
+    const nav = navigator as Navigator & { pdfViewerEnabled?: boolean };
+    const isIOS =
+      /iPad|iPhone|iPod/.test(nav.userAgent) ||
+      (nav.maxTouchPoints > 1 && /Macintosh/.test(nav.userAgent));
+    if (isIOS) {
+      setPdfInlineSupported(false);
+    } else if (typeof nav.pdfViewerEnabled === "boolean") {
+      setPdfInlineSupported(nav.pdfViewerEnabled);
+    }
+  }, []);
+
+  // Keep the latest onClose for the back-button handler without re-subscribing.
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  // Make the Android/browser Back button close the preview instead of
+  // navigating the page underneath: push a throwaway history entry when the
+  // modal opens and close it on popstate. On a normal close (X / backdrop /
+  // Escape) the modal unmounts and we pop that entry ourselves, so the user's
+  // next Back isn't swallowed by it.
+  useEffect(() => {
+    window.history.pushState({ __filePreview: true }, "");
+    let poppedByBack = false;
+    const onPop = () => {
+      poppedByBack = true;
+      onCloseRef.current();
+    };
+    window.addEventListener("popstate", onPop);
+    return () => {
+      window.removeEventListener("popstate", onPop);
+      if (!poppedByBack) window.history.back();
+    };
+  }, []);
 
   const fileType = resolvedFileType;
 
@@ -120,6 +206,8 @@ export function FilePreviewModal({ name, onClose, onDownload, getFileContent }:
 
     setContent(null);
     setObjectUrl(null);
+    setCanOpenInNewTab(false);
+    setEmlContent(null);
     setLoading(true);
     setError(false);
     setResolvedFileType(getFilePreviewKind(name));
@@ -136,9 +224,36 @@ export function FilePreviewModal({ name, onClose, onDownload, getFileContent }:
         if (previewType === "text" || previewType === "markdown") {
           const text = await blob.text();
           if (!cancelled) setContent(text);
+        } else if (previewType === "eml") {
+          // Parse the embedded message (postal-mime, dynamic-imported so it
+          // stays off the bundle) and render it like an email via EmlPreview.
+          const { default: PostalMime } = await import("postal-mime");
+          const parsed = await new PostalMime().parse(await blob.arrayBuffer());
+          if (!cancelled) setEmlContent(parsed as ParsedEml);
         } else {
-          revokeUrl = URL.createObjectURL(blob);
+          // Stalwart's download endpoint can return generic
-          if (!cancelled) setObjectUrl(revokeUrl);
+          // application/octet-stream for attachments even when the email's
+          // MIME structure declared application/pdf (etc.). The blob inherits
+          // that, so a blob: URL plugged into <iframe> looks like a binary
+          // stream and Chrome/Edge silently download it (with the blob UUID
+          // as filename) instead of rendering inline. Re-wrap with the most
+          // specific MIME we can resolve - prefer explicit attachment type,
+          // then filename-derived MIME, then whatever the blob came with.
+          const inferredFromName = inferMimeFromName(name);
+          const isUseless = (ty?: string) =>
+            !ty || ty === "application/octet-stream" || ty === "binary/octet-stream";
+          const effectiveType =
+            (contentType && !isUseless(contentType) ? contentType : undefined)
+            ?? inferredFromName
+            ?? blob.type;
+          const typedBlob = blob.type !== effectiveType
+            ? new Blob([blob], { type: effectiveType })
+            : blob;
+          revokeUrl = URL.createObjectURL(typedBlob);
+          if (!cancelled) {
+            setObjectUrl(revokeUrl);
+            setCanOpenInNewTab(isMimeTypeSafeForInlinePreview(effectiveType));
+          }
         }
       } catch {
         if (!cancelled) setError(true);
@@ -173,6 +288,18 @@ export function FilePreviewModal({ name, onClose, onDownload, getFileContent }:
       <div className="flex items-center justify-between px-4 py-3 bg-background/90 backdrop-blur border-b border-border" onClick={(e) => e.stopPropagation()}>
         <h3 className="text-sm font-medium truncate">{name}</h3>
         <div className="flex items-center gap-2">
+          {objectUrl && canOpenInNewTab && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              title={t("open_in_new_tab")}
+              aria-label={t("open_in_new_tab")}
+              onClick={() => window.open(objectUrl, "_blank", "noopener,noreferrer")}
+            >
+              <ExternalLink className="w-4 h-4" />
+            </Button>
+          )}
           <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => void onDownload()}>
             <Download className="w-4 h-4" />
           </Button>
@@ -211,6 +338,10 @@ export function FilePreviewModal({ name, onClose, onDownload, getFileContent }:
           </div>
         )}
 
+        {!loading && !error && fileType === "eml" && emlContent && (
+          <EmlPreview message={emlContent} />
+        )}
+
         {!loading && !error && fileType === "image" && objectUrl && (
           <img
             src={objectUrl}
@@ -231,19 +362,29 @@ export function FilePreviewModal({ name, onClose, onDownload, getFileContent }:
           />
         )}
 
-        {!loading && !error && fileType === "pdf" && objectUrl && (
+        {!loading && !error && fileType === "pdf" && objectUrl && pdfInlineSupported && (
-          <object
+          // <iframe> renders PDFs reliably across desktop Chromium, Firefox,
-            data={objectUrl}
+          // and Safari from a blob: URL. <object> was prone to falling back to
-            type="application/pdf"
+          // a silent download when the blob's Content-Type wasn't recognised.
+          <iframe
+            src={objectUrl}
             className="w-full max-w-5xl h-full rounded-lg bg-white"
-            aria-label={name}
+            title={name}
+            onClick={(e) => e.stopPropagation()}
+          />
+        )}
+
+        {!loading && !error && fileType === "pdf" && objectUrl && !pdfInlineSupported && (
+          // Mobile browsers can't show a PDF inline in an <iframe> (Android: a
+          // blank frame / silent download; iOS: only the first page), so render
+          // it with pdf.js (canvas) instead. The header's open-in-new-tab /
+          // download actions are the fallback if pdf.js can't render the doc.
+          <div
+            className="w-full max-w-3xl h-full overflow-auto rounded-lg bg-neutral-200 dark:bg-neutral-800 p-2"
             onClick={(e) => e.stopPropagation()}
           >
-            <Button onClick={() => void onDownload()}>
+            <PdfMobileViewer url={objectUrl} />
-              <Download className="w-4 h-4 mr-2" />
+          </div>
-              {t("download")}
-            </Button>
-          </object>
         )}
 
         {!loading && !error && fileType === "audio" && objectUrl && (

components/files/folder-tree-sidebar.tsx

@@ -8,6 +8,7 @@ import {
   ChevronRight,
   ChevronDown,
   Home,
+  Share2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useFileStore, type FileResource } from "@/stores/file-store";
@@ -29,6 +30,8 @@ interface FolderTreeSidebarProps {
 export function FolderTreeSidebar({ currentPath, onNavigate, listByParentId, width = 256, isResizing }: FolderTreeSidebarProps) {
   const t = useTranslations("files");
   const client = useFileStore(s => s.client);
+  const sharedRoots = useFileStore(s => s.sharedRoots);
+  const loadSharedRoots = useFileStore(s => s.loadSharedRoots);
   const [rootChildren, setRootChildren] = useState<FolderNode[] | null>(null);
   const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set(["root"]));
   const [loadingIds, setLoadingIds] = useState<Set<string>>(new Set());
@@ -81,6 +84,8 @@ export function FolderTreeSidebar({ currentPath, onNavigate, listByParentId, wid
   useEffect(() => {
     if (client) {
       loadChildren(null, "/");
+      // Discover folders shared with the user by other principals.
+      loadSharedRoots();
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [client]);
@@ -180,6 +185,40 @@ export function FolderTreeSidebar({ currentPath, onNavigate, listByParentId, wid
             />
           ))
         )}
+
+        {/* Shared with me: folders another principal has shared with the user */}
+        {sharedRoots.filter(r => r.isDirectory).length > 0 && (
+          <div className="mt-2 pt-2 border-t border-border/60">
+            <div className="px-3 py-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
+              <Share2 className="w-3 h-3" />
+              <span className="truncate">{t("shared_with_me")}</span>
+            </div>
+            {sharedRoots.filter(r => r.isDirectory).map(r => {
+              const path = `/${r.name}`;
+              const isSelected = currentPath === path;
+              return (
+                <div
+                  key={r.id}
+                  style={{ paddingBlock: "var(--density-sidebar-py)" }}
+                  className={cn(
+                    "group w-full flex items-center max-lg:min-h-[44px] text-sm transition-all duration-200 px-2",
+                    isSelected ? "bg-accent text-accent-foreground" : "hover:bg-muted text-foreground"
+                  )}
+                >
+                  <button
+                    onClick={() => handleFolderClick(path, r.id)}
+                    className="flex items-center px-1 rounded transition-colors duration-150 flex-1 text-left min-w-0"
+                    style={{ paddingBlock: "var(--density-sidebar-py)", paddingLeft: "24px" }}
+                    title={r.ownerName ? t("shared_by", { name: r.ownerName }) : r.name}
+                  >
+                    <Folder className="w-4 h-4 flex-shrink-0 mr-2 text-primary" />
+                    <span className="truncate">{r.name}</span>
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        )}
       </div>
     </div>
   );

components/files/pdf-mobile-viewer.tsx

@@ -0,0 +1,223 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useTranslations } from "next-intl";
+import { Loader2, ExternalLink } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+// Real inline PDF preview for mobile browsers. Android Chrome / iOS WebKit have
+// no native inline PDF viewer, so the desktop <iframe src=blob:> approach
+// renders a blank frame. pdf.js rasterises each page to a <canvas> in pure JS,
+// so it works everywhere regardless of native PDF support.
+//
+// This component is dynamic-imported (ssr:false) only on the mobile PDF path,
+// and it dynamic-imports pdfjs-dist itself, so the (~hundreds of KB) library +
+// worker never reach the desktop bundle.
+
+// iOS WebKit caps total canvas area (~16 MP) and is memory-sensitive; keep each
+// page's backing store well under that so large pages don't render blank. The
+// backing store is rendered at ~2x the fit width (dpr), which also gives the
+// double-tap zoom some headroom before CSS upscaling softens the text.
+const MAX_CANVAS_AREA = 4_000_000; // ~4 MP per page
+
+// Double-tap zoom steps: fit -> 2x -> 3x -> fit. Implemented as the page
+// container's CSS width (so panning is native scrolling, not a transform).
+const ZOOM_STEPS = [1, 2, 3];
+const MAX_ZOOM = 4; // pinch can go a bit beyond the double-tap steps
+const DOUBLE_TAP_MS = 300;
+const DOUBLE_TAP_SLOP = 30; // px
+
+export function PdfMobileViewer({ url }: { url: string }) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const pagesRef = useRef<HTMLDivElement>(null);
+  const zoom = useRef({ step: 0, scale: 1 });
+  const [status, setStatus] = useState<"loading" | "ready" | "error">("loading");
+  const t = useTranslations("files");
+
+  // Render the PDF pages to canvases.
+  useEffect(() => {
+    let cancelled = false;
+    let loadingTask: import("pdfjs-dist").PDFDocumentLoadingTask | null = null;
+
+    // Reset zoom for a freshly loaded document.
+    zoom.current = { step: 0, scale: 1 };
+    if (pagesRef.current) pagesRef.current.style.width = "100%";
+
+    (async () => {
+      try {
+        const pdfjs = await import("pdfjs-dist");
+        pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+          "pdfjs-dist/build/pdf.worker.min.mjs",
+          import.meta.url,
+        ).toString();
+
+        loadingTask = pdfjs.getDocument({ url });
+        const doc = await loadingTask.promise;
+        if (cancelled) return;
+
+        const pages = pagesRef.current;
+        if (!pages) return;
+        pages.replaceChildren();
+
+        const dpr = Math.min(window.devicePixelRatio || 1, 2);
+        const cssWidth = Math.min(pages.clientWidth || 320, 900);
+
+        for (let n = 1; n <= doc.numPages; n++) {
+          if (cancelled) return;
+          const page = await doc.getPage(n);
+          const baseVp = page.getViewport({ scale: 1 });
+          let scale = (cssWidth / baseVp.width) * dpr;
+          const area = baseVp.width * scale * (baseVp.height * scale);
+          if (area > MAX_CANVAS_AREA) scale *= Math.sqrt(MAX_CANVAS_AREA / area);
+          const viewport = page.getViewport({ scale });
+
+          const canvas = document.createElement("canvas");
+          canvas.width = Math.floor(viewport.width);
+          canvas.height = Math.floor(viewport.height);
+          canvas.style.width = "100%";
+          canvas.style.height = "auto";
+          canvas.style.display = "block";
+          canvas.style.margin = "0 auto 8px";
+          canvas.style.background = "#fff";
+          pages.appendChild(canvas);
+          await page.render({ canvas, viewport }).promise;
+        }
+        if (!cancelled) setStatus("ready");
+      } catch {
+        if (!cancelled) setStatus("error");
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      void loadingTask?.destroy().catch(() => {});
+    };
+  }, [url]);
+
+  // Gesture zoom. 1-finger double-tap cycles the steps (fit -> 2x -> 3x ->
+  // fit); 2-finger pinch zooms continuously up to MAX_ZOOM. Both drive a
+  // per-page CSS-width zoom that pans via native scrolling and re-centre on the
+  // gesture point. touch-action (pan-x pan-y) keeps 1-finger panning native
+  // while disabling the browser's own pinch/double-tap page zoom, which we
+  // replace here.
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+
+    const distance = (a: Touch, b: Touch) =>
+      Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+
+    // Apply an absolute zoom scale, keeping (cx, cy) [relative to root] under
+    // the same content point.
+    const applyZoom = (target: number, cx: number, cy: number) => {
+      const pages = pagesRef.current;
+      if (!pages) return;
+      const next = Math.max(1, Math.min(MAX_ZOOM, target));
+      const ratio = next / zoom.current.scale;
+      if (ratio === 1) return;
+      pages.style.width = `${next * 100}%`;
+      void root.offsetWidth; // force reflow so the new scroll range is live
+      root.scrollLeft = (root.scrollLeft + cx) * ratio - cx;
+      root.scrollTop = (root.scrollTop + cy) * ratio - cy;
+      zoom.current.scale = next;
+    };
+
+    let lastTap = 0;
+    let lastX = 0;
+    let lastY = 0;
+    let pinching = false;
+    let pinchStartDist = 0;
+    let pinchStartScale = 1;
+    let didPinch = false;
+
+    const onStart = (e: TouchEvent) => {
+      if (e.touches.length === 2) {
+        pinching = true;
+        didPinch = true;
+        pinchStartDist = distance(e.touches[0], e.touches[1]) || 1;
+        pinchStartScale = zoom.current.scale;
+      }
+    };
+
+    const onMove = (e: TouchEvent) => {
+      if (!pinching || e.touches.length !== 2) return;
+      e.preventDefault(); // take over the 2-finger gesture from native pan
+      const rect = root.getBoundingClientRect();
+      const cx = (e.touches[0].clientX + e.touches[1].clientX) / 2 - rect.left;
+      const cy = (e.touches[0].clientY + e.touches[1].clientY) / 2 - rect.top;
+      applyZoom(pinchStartScale * (distance(e.touches[0], e.touches[1]) / pinchStartDist), cx, cy);
+    };
+
+    const onEnd = (e: TouchEvent) => {
+      if (pinching && e.touches.length < 2) {
+        pinching = false;
+        // Snap the step index to the current scale so double-tap stays sensible.
+        const s = zoom.current.scale;
+        zoom.current.step = s <= 1.01 ? 0 : s < 3 ? 1 : 2;
+      }
+      if (e.touches.length > 0) return; // fingers still down
+      if (didPinch) {
+        didPinch = false; // a pinch is not a tap
+        return;
+      }
+      if (e.changedTouches.length !== 1) return;
+      const touch = e.changedTouches[0];
+      const now = e.timeStamp;
+      const isDouble =
+        now - lastTap < DOUBLE_TAP_MS &&
+        Math.abs(touch.clientX - lastX) < DOUBLE_TAP_SLOP &&
+        Math.abs(touch.clientY - lastY) < DOUBLE_TAP_SLOP;
+      if (!isDouble) {
+        lastTap = now;
+        lastX = touch.clientX;
+        lastY = touch.clientY;
+        return;
+      }
+      lastTap = 0; // consume so a third tap starts fresh
+      e.preventDefault();
+      const rect = root.getBoundingClientRect();
+      zoom.current.step = (zoom.current.step + 1) % ZOOM_STEPS.length;
+      applyZoom(ZOOM_STEPS[zoom.current.step], touch.clientX - rect.left, touch.clientY - rect.top);
+    };
+
+    root.addEventListener("touchstart", onStart, { passive: true });
+    root.addEventListener("touchmove", onMove, { passive: false });
+    root.addEventListener("touchend", onEnd, { passive: false });
+    return () => {
+      root.removeEventListener("touchstart", onStart);
+      root.removeEventListener("touchmove", onMove);
+      root.removeEventListener("touchend", onEnd);
+    };
+  }, []);
+
+  return (
+    <div
+      ref={rootRef}
+      className="w-full h-full overflow-auto"
+      // Allow panning, but disable the browser's pinch/double-tap page zoom so
+      // our own double-tap zoom drives the PDF instead of the whole modal.
+      style={{ touchAction: "pan-x pan-y" }}
+    >
+      {status === "loading" && (
+        <div className="flex justify-center py-10">
+          <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+        </div>
+      )}
+      {status === "error" && (
+        // pdf.js couldn't render this document (corrupt/encrypted, worker load
+        // failure, ...). Offer the OS/native viewer instead of a stuck frame.
+        <div className="flex justify-center py-10">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => window.open(url, "_blank", "noopener,noreferrer")}
+          >
+            <ExternalLink className="w-4 h-4 mr-2" />
+            {t("open_in_new_tab")}
+          </Button>
+        </div>
+      )}
+      <div ref={pagesRef} className="w-full" />
+    </div>
+  );
+}

components/filters/filter-rule-modal.tsx

@@ -27,7 +27,7 @@ interface FilterRuleModalProps {
 }
 
 const ALL_FIELDS: FilterConditionField[] = [
-  "from", "to", "cc", "subject", "header", "size", "body",
+  "from", "to", "cc", "subject", "header", "size", "body", "attachment",
 ];
 
 const TEXT_COMPARATORS: FilterComparator[] = [
@@ -36,6 +36,14 @@ const TEXT_COMPARATORS: FilterComparator[] = [
 
 const SIZE_COMPARATORS: FilterComparator[] = ["greater_than", "less_than"];
 
+const ATTACHMENT_COMPARATORS: FilterComparator[] = ["has_any", "has_type"];
+
+function comparatorsFor(field: FilterConditionField): FilterComparator[] {
+  if (field === "size") return SIZE_COMPARATORS;
+  if (field === "attachment") return ATTACHMENT_COMPARATORS;
+  return TEXT_COMPARATORS;
+}
+
 const ALL_ACTION_TYPES: FilterActionType[] = [
   "move", "copy", "forward", "mark_read", "star", "add_label", "discard", "reject", "keep", "stop",
 ];
@@ -47,6 +55,27 @@ function makeEmptyCondition(): FilterCondition {
   return { field: "from", comparator: "contains", value: "" };
 }
 
+// Multi-value handling: conditions are stored as string | string[]. The UI
+// presents them as a single comma-separated text input — the user types
+// "a, b, c" and the saved value becomes ["a","b","c"]. Single entries stay
+// strings so existing single-value rules don't change shape.
+function valueToInputString(v: string | string[]): string {
+  if (Array.isArray(v)) return v.join(", ");
+  return v;
+}
+
+function inputStringToValue(s: string): string | string[] {
+  const parts = s.split(",").map((p) => p.trim()).filter((p) => p.length > 0);
+  if (parts.length === 0) return "";
+  if (parts.length === 1) return parts[0];
+  return parts;
+}
+
+function isConditionValueEmpty(v: string | string[]): boolean {
+  if (Array.isArray(v)) return v.length === 0 || v.every((x) => !x.trim());
+  return !v.trim();
+}
+
 function makeEmptyAction(): FilterAction {
   return { type: "move", value: "" };
 }
@@ -97,9 +126,23 @@ export function FilterRuleModal({
       return;
     }
 
-    const validConditions = conditions.filter(
+    // While editing, condition.value is always the raw string typed into the
-      (c) => c.value.trim()
+    // input (commas not yet split). Convert to array form here on save so a
-    );
+    // user typing "a, b, c" actually persists as ["a","b","c"]. This is the
+    // moment we know editing is finished - splitting earlier would eat any
+    // comma the user just typed mid-edit.
+    const validConditions = conditions
+      .filter((c) => {
+        if (c.field === "attachment" && c.comparator === "has_any") return true;
+        return !isConditionValueEmpty(c.value);
+      })
+      .map((c) => {
+        if (c.field === "attachment" && c.comparator === "has_any") return c;
+        if (c.field === "size") return c; // numeric, single-value only
+        if (typeof c.value !== "string") return c; // already structured
+        const parsed = inputStringToValue(c.value);
+        return { ...c, value: parsed };
+      });
     if (validConditions.length === 0) {
       toast.error(t("validation_empty_conditions"));
       return;
@@ -129,15 +172,27 @@ export function FilterRuleModal({
       prev.map((c, i) => {
         if (i !== index) return c;
         const updated = { ...c, ...updates };
-        if (updates.field === "size" && !SIZE_COMPARATORS.includes(c.comparator)) {
+        // Reconcile the comparator when the field changes so we never end up
-          updated.comparator = "greater_than";
+        // with e.g. (field=attachment, comparator=contains) — invalid for the
-        }
+        // Sieve generator. Each field has its own valid comparator set.
-        if (updates.field && updates.field !== "size" && SIZE_COMPARATORS.includes(c.comparator)) {
+        if (updates.field && updates.field !== c.field) {
-          updated.comparator = "contains";
+          const allowed = comparatorsFor(updates.field);
+          if (!allowed.includes(c.comparator)) {
+            updated.comparator = allowed[0];
+          }
         }
         if (updates.field && updates.field !== "header") {
           delete updated.headerName;
         }
+        // has_any takes no value; clear it so we don't leak old text into
+        // the generated Sieve.
+        if (updated.field === "attachment" && updated.comparator === "has_any") {
+          updated.value = "";
+        }
+        // Size is numeric, single value only - collapse any list to scalar.
+        if (updated.field === "size" && Array.isArray(updated.value)) {
+          updated.value = updated.value[0] ?? "";
+        }
         return updated;
       })
     );
@@ -281,24 +336,58 @@ export function FilterRuleModal({
                     className={selectClass}
                     aria-label={t("comparators.contains")}
                   >
-                    {(condition.field === "size" ? SIZE_COMPARATORS : TEXT_COMPARATORS).map(
+                    {comparatorsFor(condition.field).map((c) => (
-                      (c) => (
+                      <option key={c} value={c}>
-                        <option key={c} value={c}>
+                        {t(`comparators.${c}`)}
-                          {t(`comparators.${c}`)}
+                      </option>
-                        </option>
+                    ))}
-                      )
-                    )}
                   </select>
 
-                  <Input
+                  {/* has_any takes no value; render a stub so the row layout
-                    value={condition.value}
+                      stays consistent but no input is editable. */}
-                    onChange={(e) => updateCondition(index, { value: e.target.value })}
+                  {condition.field === "attachment" && condition.comparator === "has_any" ? (
-                    placeholder={
+                    <div className="flex-1 min-w-[120px]" />
-                      condition.field === "size" ? t("size_placeholder") : t("header_placeholder")
+                  ) : (
-                    }
+                    <Input
-                    className="flex-1 min-w-[120px]"
+                      value={valueToInputString(condition.value)}
-                    type={condition.field === "size" ? "number" : "text"}
+                      onChange={(e) =>
-                  />
+                        // Store the raw input string while typing. Splitting
+                        // commas into an array on every keystroke would eat
+                        // the comma the moment it's typed.
+                        updateCondition(index, { value: e.target.value })
+                      }
+                      onBlur={(e) => {
+                        // On blur: normalise comma-separated input into an
+                        // array (or single string when only one item). Size
+                        // stays numeric/single-value; attachment-has_any has
+                        // no value at all.
+                        if (condition.field === "size") return;
+                        if (
+                          condition.field === "attachment" &&
+                          condition.comparator === "has_any"
+                        )
+                          return;
+                        const parsed = inputStringToValue(e.target.value);
+                        // Only update if the normalised shape actually
+                        // differs - avoids triggering a no-op re-render and
+                        // resetting the user's cursor on every blur.
+                        if (
+                          JSON.stringify(parsed) !== JSON.stringify(condition.value)
+                        ) {
+                          updateCondition(index, { value: parsed });
+                        }
+                      }}
+                      placeholder={
+                        condition.field === "size"
+                          ? t("size_placeholder")
+                          : condition.field === "attachment"
+                            ? t("attachment_type_placeholder")
+                            : t("value_placeholder_multi")
+                      }
+                      className="flex-1 min-w-[120px]"
+                      type={condition.field === "size" ? "number" : "text"}
+                    />
+                  )}
 
                   <button
                     type="button"

components/identity/identity-form.tsx

@@ -8,7 +8,7 @@ import type { Identity, EmailAddress } from '@/lib/jmap/types';
 import { sanitizeSignatureHtml } from '@/lib/email-sanitization';
 import { getEmailValidationError, validateEmailList } from '@/lib/validation';
 
-// JMAP Identity/set caps signature fields at 2047 UTF-8 bytes per RFC 8621 §6.1.
+// Stalwarts JMAP Identity/set caps signature fields at 2047 UTF-8 bytes
 const SIGNATURE_MAX_BYTES = 2047;
 const utf8Encoder = new TextEncoder();
 

components/layout/navigation-rail.tsx

@@ -166,7 +166,6 @@ export function NavigationRail({
   collapsed = false,
   className,
   quota,
-  isPushConnected,
   onLogout,
   onShowShortcuts,
   onManageApps,
@@ -191,6 +190,7 @@ export function NavigationRail({
   const sidebarAppsEnabled = usePolicyStore((s) => s.isFeatureEnabled('sidebarAppsEnabled'));
   const filesEnabled = usePolicyStore((s) => s.isFeatureEnabled('filesEnabled'));
   const contactsEnabled = usePolicyStore((s) => s.isFeatureEnabled('contactsEnabled'));
+  const calendarEnabled = usePolicyStore((s) => s.isFeatureEnabled('calendarEnabled'));
   const visibleSidebarApps = sidebarAppsEnabled ? sidebarApps : [];
   const inboxUnread = mailboxes.find(m => m.role === "inbox")?.unreadEmails || 0;
   const [isStalwartAdmin, setIsStalwartAdmin] = useState(false);
@@ -269,7 +269,7 @@ export function NavigationRail({
 
   const navItems: NavItem[] = [
     { id: "mail", icon: Mail, labelKey: "mail", href: "/", badge: inboxUnread },
-    { id: "calendar", icon: Calendar, labelKey: "calendar", href: "/calendar", hidden: !supportsCalendar },
+    { id: "calendar", icon: Calendar, labelKey: "calendar", href: "/calendar", hidden: !supportsCalendar || !calendarEnabled },
     { id: "contacts", icon: BookUser, labelKey: "contacts", href: "/contacts", hidden: !supportsContacts || !contactsEnabled },
     { id: "files", icon: HardDrive, labelKey: "files", href: "/files", hidden: !supportsFiles || !filesEnabled },
   ];
@@ -546,7 +546,7 @@ export function NavigationRail({
         })}
 
         {/* Manage apps button */}
-        {onManageApps && (
+        {sidebarAppsEnabled && onManageApps && (
           <button
             onClick={onManageApps}
             className={cn(

components/layout/resize-handle.tsx

@@ -77,9 +77,11 @@ export function ResizeHandle({ onResizeStart, onResize, onResizeEnd, onDoubleCli
       onKeyDown={handleKeyDown}
       onDoubleClick={onDoubleClick}
       className={cn(
-        "flex-shrink-0 hover:bg-primary/30 active:bg-primary/50 transition-colors relative group",
+        // Centered over the seam with negative margins so the handle adds no
+        // net layout space (panes sit flush) while staying draggable.
+        "flex-shrink-0 hover:bg-primary/30 active:bg-primary/50 transition-colors relative group z-10",
         "focus-visible:outline-none focus-visible:bg-primary/40 focus-visible:ring-2 focus-visible:ring-primary/50",
-        isHorizontal ? "h-1 cursor-row-resize bg-border" : "w-1 cursor-col-resize",
+        isHorizontal ? "h-1 -my-0.5 cursor-row-resize bg-border" : "w-1 -mx-0.5 cursor-col-resize",
         className
       )}
     >

components/layout/sidebar.tsx

@@ -33,13 +33,16 @@ import {
   NotebookPen,
   CalendarClock,
   BellOff,
+  Mails,
+  MailOpen,
 } from "lucide-react";
 import { cn, buildMailboxTree, MailboxNode } from "@/lib/utils";
+import { localizeMailboxName } from "@/lib/mailbox-label";
 import { Mailbox } from "@/lib/jmap/types";
 import { useContextMenu } from "@/hooks/use-context-menu";
 import { MailboxContextMenu, type MailboxContextTarget } from "./mailbox-context-menu";
 import { useAccountStore } from '@/stores/account-store';
-import { UNIFIED_MAILBOX_IDS } from '@/lib/jmap/types';
+import { UNIFIED_MAILBOX_IDS, CROSS_VIEW_IDS } from '@/lib/jmap/types';
 import type { UnifiedMailboxRole } from '@/lib/jmap/types';
 import { useDragDropContext } from "@/contexts/drag-drop-context";
 import { useMailboxDrop } from "@/hooks/use-mailbox-drop";
@@ -76,6 +79,14 @@ interface SidebarProps {
   onRefreshMailboxes?: () => void;
   scheduledTotal?: number;
   showScheduledMailbox?: boolean;
+  /** Gated "All Mail" virtual folder that merges all of the account's folders. */
+  showAllMailMailbox?: boolean;
+  /** Gated cross-account views in the "All accounts" section. */
+  showCrossUnread?: boolean;
+  showCrossStarred?: boolean;
+  showCrossAll?: boolean;
+  /** Unread total across all cross-view folders (badge for unread/all). */
+  crossUnreadCount?: number;
   className?: string;
   /**
    * Multi-account (Pro) mode props. When `multiAccountMode` is true, the
@@ -166,7 +177,6 @@ function getIconClass(isSelected: boolean, isVirtual: boolean, colorful: boolean
 function SidebarRowCounts({
   unread,
   total,
-  isSelected,
   onUnreadClick,
 }: {
   unread?: number;
@@ -430,12 +440,14 @@ function MailboxTreeItem({
   onContextMenu?: (e: React.MouseEvent, node: MailboxNode) => void;
 }) {
   const tNotifications = useTranslations('notifications');
+  const tSidebar = useTranslations('sidebar');
   const hasChildren = node.children.length > 0;
   const isExpanded = expandedFolders.has(node.id);
   const Icon = getIconForMailbox(node.role, node.name, hasChildren, isExpanded, node.isShared, node.id);
   const isVirtualNode = node.id.startsWith('shared-');
   const isSelected = selectedMailbox === node.id;
   const roleKey = resolveRoleKey(node.role, node.name);
+  const label = localizeMailboxName(node.role, node.name, (k) => tSidebar(`mailboxes.${k}`));
 
   const { isDragging: globalDragging } = useDragDropContext();
   const { dropHandlers, isValidDropTarget, isInvalidDropTarget } = useMailboxDrop({
@@ -462,7 +474,7 @@ function MailboxTreeItem({
     <>
       <SidebarRow
         icon={<Icon className={getIconClass(isSelected, isVirtualNode, colorful, roleKey)} />}
-        label={node.name}
+        label={label}
         depth={node.depth}
         isSelected={isSelected}
         isVirtual={isVirtualNode}
@@ -678,6 +690,11 @@ export function Sidebar({
   onRefreshMailboxes,
   scheduledTotal = 0,
   showScheduledMailbox = false,
+  showAllMailMailbox = false,
+  showCrossUnread = false,
+  showCrossStarred = false,
+  showCrossAll = false,
+  crossUnreadCount = 0,
   className,
   multiAccountMode = false,
   accountMailboxes,
@@ -904,11 +921,11 @@ export function Sidebar({
   };
 
   const openFolderSettings = () => {
-    try { localStorage.setItem('settings-active-tab', 'folders'); } catch { /* */ }
+    try { sessionStorage.setItem('settings-deep-link-tab', 'folders'); } catch { /* */ }
     router.push('/settings');
   };
   const openKeywordSettings = () => {
-    try { localStorage.setItem('settings-active-tab', 'keywords'); } catch { /* */ }
+    try { sessionStorage.setItem('settings-deep-link-tab', 'keywords'); } catch { /* */ }
     router.push('/settings');
   };
 
@@ -942,30 +959,34 @@ export function Sidebar({
       {/* Header - hidden in the Pro shell, which owns its own chrome and
           would otherwise render an empty strip (no collapse, no switcher). */}
       {!isEmbedded && (
-        <div className={cn("flex items-center border-b border-border", isCollapsed ? "justify-center px-2 py-2" : "gap-1 px-2 py-2")}>
+        // Border lives on the wrapper (outside the h-14 box) so the bar's total
-          <Button
+        // height matches the search/reply toolbars, which border-b their wrapper too.
-            variant="ghost"
+        <div className="border-b border-border">
-            size="icon"
+          <div className={cn("flex items-center h-14", isCollapsed ? "justify-center px-2" : "gap-1 px-2")}>
-            onClick={onSidebarClose}
+            <Button
-            className="lg:hidden h-9 w-9 flex-shrink-0"
+              variant="ghost"
-            aria-label={t("close")}
+              size="icon"
-          >
+              onClick={onSidebarClose}
-            <X className="w-5 h-5" />
+              className="lg:hidden h-9 w-9 flex-shrink-0"
-          </Button>
+              aria-label={t("close")}
+            >
+              <X className="w-5 h-5" />
+            </Button>
 
-          <Button
+            <Button
-            variant="ghost"
+              variant="ghost"
-            size="icon"
+              size="icon"
-            onClick={toggleSidebarCollapsed}
+              onClick={toggleSidebarCollapsed}
-            className="hidden lg:flex h-8 w-8 flex-shrink-0"
+              className="hidden lg:flex h-8 w-8 flex-shrink-0"
-            title={isCollapsed ? t("expand_tooltip") : t("collapse_tooltip")}
+              title={isCollapsed ? t("expand_tooltip") : t("collapse_tooltip")}
-          >
+            >
-            {isCollapsed ? <ChevronsRight className="w-4 h-4" /> : <ChevronsLeft className="w-4 h-4" />}
+              {isCollapsed ? <ChevronsRight className="w-4 h-4" /> : <ChevronsLeft className="w-4 h-4" />}
-          </Button>
+            </Button>
 
-          {!isCollapsed && !hideAccountSwitcher && (
+            {!isCollapsed && !hideAccountSwitcher && (
-            <AccountSwitcher variant="expanded" className="flex-1" />
+              <AccountSwitcher variant="expanded" className="flex-1" />
-          )}
+            )}
+          </div>
         </div>
       )}
 
@@ -974,7 +995,17 @@ export function Sidebar({
 
       {/* Mailbox List */}
       <div className="flex-1 overflow-y-auto" data-tour="sidebar">
-        {showUnified && (
+        {showAllMailMailbox && (
+          <SidebarRow
+            icon={<Mails className={cn("w-4 h-4 flex-shrink-0", selectedMailbox === '__all_mail__' ? "text-foreground" : "text-muted-foreground")} />}
+            label={t('mailboxes.all_mail')}
+            depth={0}
+            isSelected={!selectedKeyword && selectedMailbox === '__all_mail__'}
+            onClick={() => onMailboxSelect?.('__all_mail__')}
+            isCollapsed={isCollapsed}
+          />
+        )}
+        {(showUnified || showCrossUnread || showCrossStarred || showCrossAll) && (
           <div>
             <SidebarSectionHeader
               label={t("all_accounts")}
@@ -985,7 +1016,7 @@ export function Sidebar({
             />
             {((unifiedExpanded && !isCollapsed) || isCollapsed) && (
               <>
-                {unifiedCounts.map((count) => {
+                {showUnified && unifiedCounts.map((count) => {
                   const unifiedId = UNIFIED_MAILBOX_IDS[count.role];
                   const Icon = getUnifiedIcon(count.role);
                   const isSelected = !selectedKeyword && selectedMailbox === unifiedId;
@@ -1003,6 +1034,26 @@ export function Sidebar({
                     />
                   );
                 })}
+                {[
+                  { show: showCrossUnread, id: CROSS_VIEW_IDS.unread, Icon: MailOpen, label: t('unified_all_unread'), unread: crossUnreadCount },
+                  { show: showCrossStarred, id: CROSS_VIEW_IDS.starred, Icon: Star, label: t('unified_all_starred'), unread: undefined as number | undefined },
+                  { show: showCrossAll, id: CROSS_VIEW_IDS.all, Icon: Mails, label: t('unified_all_mail'), unread: crossUnreadCount },
+                ].map(({ show, id, Icon, label, unread }) => {
+                  if (!show) return null;
+                  const isSelected = !selectedKeyword && selectedMailbox === id;
+                  return (
+                    <SidebarRow
+                      key={id}
+                      icon={<Icon className={getIconClass(isSelected, false, colorfulSidebarIcons)} />}
+                      label={label}
+                      depth={0}
+                      isSelected={isSelected}
+                      unread={unread}
+                      onClick={() => onMailboxSelect?.(id)}
+                      isCollapsed={isCollapsed}
+                    />
+                  );
+                })}
               </>
             )}
           </div>

components/plugins/plugin-dialog-host.tsx

@@ -7,6 +7,19 @@
 import React, { useEffect, useSyncExternalStore } from 'react';
 import { head, resolveHead, subscribe } from '@/lib/plugin-sandbox/host-dialog';
 
+// Lightweight **bold** support in plugin dialog messages. Everything else is
+// rendered literally (newlines come from the parent's white-space: pre-wrap).
+// Splitting on the ** delimiter yields alternating plain/bold segments (odd
+// indices are bold). Plugins control these strings, so the delimiters balance.
+function renderMessage(message?: string): React.ReactNode {
+  if (!message) return null;
+  return message.split('**').map((seg, i) =>
+    i % 2 === 1
+      ? <strong key={i}>{seg}</strong>
+      : <React.Fragment key={i}>{seg}</React.Fragment>,
+  );
+}
+
 export function PluginDialogHost(): React.JSX.Element | null {
   const current = useSyncExternalStore(subscribe, head, () => null);
 
@@ -50,9 +63,9 @@ export function PluginDialogHost(): React.JSX.Element | null {
     >
       <div
         style={{
-          background: 'var(--background, #fff)',
+          background: 'var(--color-popover, #fff)',
-          color: 'var(--foreground, #0f172a)',
+          color: 'var(--color-popover-foreground, #0f172a)',
-          border: '1px solid var(--border, #e2e8f0)',
+          border: '1px solid var(--color-border, #e2e8f0)',
           borderRadius: 12,
           padding: 20,
           maxWidth: 480,
@@ -63,8 +76,8 @@ export function PluginDialogHost(): React.JSX.Element | null {
         <h2 id="plugin-dialog-title" style={{ fontSize: 16, fontWeight: 600, margin: '0 0 10px 0' }}>
           {current.title}
         </h2>
-        <p style={{ fontSize: 13, lineHeight: 1.5, margin: '0 0 16px 0', color: 'var(--muted-foreground, #64748b)', whiteSpace: 'pre-wrap' }}>
+        <p style={{ fontSize: 13, lineHeight: 1.5, margin: '0 0 16px 0', color: 'var(--color-muted-foreground, #64748b)', whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }}>
-          {current.message}
+          {renderMessage(current.message)}
         </p>
         <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
           {current.kind === 'confirm' && (
@@ -78,7 +91,7 @@ export function PluginDialogHost(): React.JSX.Element | null {
                 fontSize: 13,
                 fontWeight: 500,
                 cursor: 'pointer',
-                border: '1px solid var(--border, #e2e8f0)',
+                border: '1px solid var(--color-border, #e2e8f0)',
                 background: 'transparent',
                 color: 'inherit',
               }}
@@ -97,14 +110,14 @@ export function PluginDialogHost(): React.JSX.Element | null {
               fontWeight: 500,
               cursor: 'pointer',
               border: '1px solid transparent',
-              background: current.danger ? '#dc2626' : '#3b82f6',
+              background: current.danger ? 'var(--color-destructive, #dc2626)' : 'var(--color-primary, #3b82f6)',
-              color: '#fff',
+              color: current.danger ? 'var(--color-destructive-foreground, #fff)' : 'var(--color-primary-foreground, #fff)',
             }}
           >
             {confirmLabel}
           </button>
         </div>
-        <div style={{ marginTop: 12, fontSize: 11, color: 'var(--muted-foreground, #94a3b8)', textAlign: 'right' }}>
+        <div style={{ marginTop: 12, fontSize: 11, color: 'var(--color-muted-foreground, #94a3b8)', textAlign: 'right' }}>
           From plugin: {current.pluginId}
         </div>
       </div>

components/plugins/plugin-iframe-slot.tsx

@@ -10,6 +10,8 @@ import React, { useEffect, useRef, useState } from 'react';
 import type { SlotName } from '@/lib/plugin-types';
 import { get as getActivePlugin } from '@/lib/plugin-sandbox/registry';
 import { createSlotInstance, type SandboxInstance } from '@/lib/plugin-sandbox/host-bridge';
+import { snapshotHostTheme } from '@/lib/plugin-sandbox/host-theme';
+import { useThemeStore } from '@/stores/theme-store';
 
 interface Props {
   pluginId: string;
@@ -69,6 +71,16 @@ export function PluginIframeSlot({ pluginId, slot, extraProps }: Props) {
     instanceRef.current?.updateProps(extraProps ?? {});
   }, [extraProps]);
 
+  // Re-theme the live slot iframe when the host theme changes (dark/light
+  // toggle or custom theme switch), without tearing down the iframe. Reacting
+  // to resolvedTheme + activeThemeId covers both; the snapshot reads the
+  // resolved DOM values so it picks up whichever is active.
+  const resolvedTheme = useThemeStore((s) => s.resolvedTheme);
+  const activeThemeId = useThemeStore((s) => s.activeThemeId);
+  useEffect(() => {
+    instanceRef.current?.setTheme(snapshotHostTheme());
+  }, [resolvedTheme, activeThemeId]);
+
   if (show !== true) return null;
   return <div ref={wrapperRef} style={{ height, minHeight: height }} data-plugin-iframe-slot={`${pluginId}:${slot}`} />;
 }

components/pro/pro-compose-tab-body.tsx

@@ -25,10 +25,9 @@ export function ProComposeTabBody({ tabId, data }: ProComposeTabBodyProps) {
   const t = useTranslations();
   const client = useAuthStore((s) => s.client);
   const sendEmail = useEmailStore((s) => s.sendEmail);
-  const fetchEmails = useEmailStore((s) => s.fetchEmails);
+  const refreshCurrentMailbox = useEmailStore((s) => s.refreshCurrentMailbox);
   const fetchScheduledEmails = useEmailStore((s) => s.fetchScheduledEmails);
   const refreshScheduledMetadata = useEmailStore((s) => s.refreshScheduledMetadata);
-  const selectedMailbox = useEmailStore((s) => s.selectedMailbox);
   const isScheduledView = useEmailStore((s) => s.isScheduledView);
   const closeTab = useProTabStore((s) => s.closeTab);
   const updateTabTitle = useProTabStore((s) => s.updateTabTitle);
@@ -92,13 +91,30 @@ export function ProComposeTabBody({ tabId, data }: ProComposeTabBodyProps) {
 
       // Refresh the currently-active mail list so the new sent message /
       // updated keyword status shows up.
-      await fetchEmails(client, selectedMailbox);
+      await refreshCurrentMailbox(client);
+      // Re-fetch the replied thread's cross-folder data so the expanded
+      // view shows the newly sent reply without collapsing.
+      if (data.sourceEmailId) {
+        const emailState = useEmailStore.getState();
+        const repliedEmail = emailState.emails.find(e => e.id === data.sourceEmailId);
+        if (repliedEmail?.threadId && emailState.expandedThreadIds.has(repliedEmail.threadId)) {
+          const accountId = client.getAccountId();
+          const fullEmails = await client.getThreadEmails(repliedEmail.threadId, accountId);
+          if (fullEmails.length > 0) {
+            useEmailStore.setState((state) => {
+              const c = new Map(state.threadEmailsCache);
+              c.set(repliedEmail.threadId!, fullEmails);
+              return { threadEmailsCache: c };
+            });
+          }
+        }
+      }
       closeTab(tabIdRef.current);
     } catch (error) {
       console.error('Failed to send email:', error);
       toast.error(t('notifications.error_sending'));
     }
-  }, [client, sendEmail, fetchEmails, selectedMailbox, closeTab, data.sourceEmailId, data.mode, t, handleScheduledSendCreated]);
+  }, [client, sendEmail, closeTab, data.sourceEmailId, data.mode, t, handleScheduledSendCreated, refreshCurrentMailbox]);
 
   const handleClose = useCallback(() => {
     closeTab(tabIdRef.current);

components/pro/pro-email-tab-body.tsx

@@ -10,6 +10,7 @@ import { useSettingsStore } from "@/stores/settings-store";
 import { toast } from "@/stores/toast-store";
 import { useProTabStore, type ProEmailTabData, type ProReplyContext } from "@/stores/pro-tab-store";
 import type { Email } from "@/lib/jmap/types";
+import { buildReplySubject, buildForwardSubject } from "@/lib/subject-prefix";
 
 interface ProEmailTabBodyProps {
   tabId: string;
@@ -104,7 +105,7 @@ export function ProEmailTabBody({ tabId, data }: ProEmailTabBodyProps) {
       replyTo: buildReplyContext(email),
       sourceEmailId: email.id,
       initialDraftText: draftText,
-      title: `Re: ${email.subject || t('email_composer.new_message')}`,
+      title: buildReplySubject(email.subject || t('email_composer.new_message'), t('email_composer.prefix.reply')),
     });
   }, [email, openComposeTab, t]);
 
@@ -116,7 +117,7 @@ export function ProEmailTabBody({ tabId, data }: ProEmailTabBodyProps) {
       mode: 'replyAll',
       replyTo: buildReplyContext(email),
       sourceEmailId: email.id,
-      title: `Re: ${email.subject || t('email_composer.new_message')}`,
+      title: buildReplySubject(email.subject || t('email_composer.new_message'), t('email_composer.prefix.reply')),
     });
   }, [email, openComposeTab, t]);
 
@@ -128,7 +129,7 @@ export function ProEmailTabBody({ tabId, data }: ProEmailTabBodyProps) {
       mode: 'forward',
       replyTo: buildReplyContext(email),
       sourceEmailId: email.id,
-      title: `Fwd: ${email.subject || t('email_composer.new_message')}`,
+      title: buildForwardSubject(email.subject || t('email_composer.new_message'), t('email_composer.prefix.forward')),
     });
   }, [email, openComposeTab, t]);
 

components/providers/intl-provider.tsx

@@ -8,7 +8,9 @@ import daMessages from '@/locales/da/common.json';
 import deMessages from '@/locales/de/common.json';
 import enMessages from '@/locales/en/common.json';
 import esMessages from '@/locales/es/common.json';
+import faMessages from '@/locales/fa/common.json';
 import frMessages from '@/locales/fr/common.json';
+import huMessages from '@/locales/hu/common.json';
 import itMessages from '@/locales/it/common.json';
 import jaMessages from '@/locales/ja/common.json';
 import koMessages from '@/locales/ko/common.json';
@@ -16,6 +18,7 @@ import lvMessages from '@/locales/lv/common.json';
 import nlMessages from '@/locales/nl/common.json';
 import plMessages from '@/locales/pl/common.json';
 import ptMessages from '@/locales/pt/common.json';
+import roMessages from '@/locales/ro/common.json';
 import ruMessages from '@/locales/ru/common.json';
 import trMessages from '@/locales/tr/common.json';
 import ukMessages from '@/locales/uk/common.json';
@@ -28,7 +31,9 @@ const ALL_MESSAGES = {
   de: deMessages,
   en: enMessages,
   es: esMessages,
+  fa: faMessages,
   fr: frMessages,
+  hu: huMessages,
   it: itMessages,
   ja: jaMessages,
   ko: koMessages,
@@ -36,6 +41,7 @@ const ALL_MESSAGES = {
   nl: nlMessages,
   pl: plMessages,
   pt: ptMessages,
+  ro: roMessages,
   ru: ruMessages,
   tr: trMessages,
   uk: ukMessages,
@@ -86,7 +92,7 @@ export function IntlProvider({ locale: initialLocale, children }: IntlProviderPr
   return (
     <NextIntlClientProvider
       locale={activeLocale}
-      messages={ALL_MESSAGES[activeLocale as keyof typeof ALL_MESSAGES]}
+      messages={ALL_MESSAGES[activeLocale as keyof typeof ALL_MESSAGES] ?? ALL_MESSAGES.en}
       timeZone={timeZone}
     >
       {children}

components/pwa-install-prompt.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
 import { X, Download } from "lucide-react";
 import { useConfig } from "@/hooks/use-config";
 import { withBasePath } from "@/lib/browser-navigation";
@@ -17,6 +18,7 @@ export function PWAInstallPrompt() {
     useState<BeforeInstallPromptEvent | null>(null);
   const [showPrompt, setShowPrompt] = useState(false);
   const { appName, faviconUrl, appLogoLightUrl, appLogoDarkUrl } = useConfig();
+  const t = useTranslations("pwa_install");
 
   useEffect(() => {
     if (localStorage.getItem(DISMISSED_KEY)) return;
@@ -84,17 +86,17 @@ export function PWAInstallPrompt() {
           )}
           <div>
             <h3 className="font-semibold text-sm text-neutral-900 dark:text-white">
-              Install {appName}
+              {t("title", { appName })}
             </h3>
             <p className="text-xs text-neutral-600 dark:text-neutral-400 mt-1">
-              Install our app for quick access and offline support.
+              {t("description")}
             </p>
           </div>
         </div>
         <button
           onClick={handleDismiss}
           className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
-          aria-label="Dismiss install prompt"
+          aria-label={t("dismiss_aria")}
         >
           <X className="w-4 h-4" />
         </button>
@@ -105,20 +107,20 @@ export function PWAInstallPrompt() {
             onClick={handleDismiss}
             className="flex-1 px-3 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800 rounded hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
           >
-            Not now
+            {t("not_now")}
           </button>
           <button
             onClick={handleInstall}
             className="flex-1 px-3 py-2 text-sm font-medium text-white bg-blue-600 rounded hover:bg-blue-700 transition-colors"
           >
-            Install
+            {t("install")}
           </button>
         </div>
         <button
           onClick={handleDismissForever}
           className="w-full text-xs text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors text-center"
         >
-          Don&apos;t remind me again
+          {t("dont_remind")}
         </button>
       </div>
     </div>

components/settings/account-security-settings.tsx

@@ -1,15 +1,18 @@
 'use client';
 
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import QRCode from 'qrcode';
 import * as OTPAuth from 'otpauth';
-import { Shield, Key, Smartphone, Lock, Trash2, Plus, Eye, EyeOff, Copy, Check, Loader2, Monitor, Terminal } from 'lucide-react';
+import { Shield, Key, Smartphone, Lock, Trash2, Plus, Eye, EyeOff, Copy, Check, Loader2, Monitor, Terminal, QrCode } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
 import { useAccountSecurityStore, type AppPasswordInfo, type ApiKeyInfo, type AppCredentialInput } from '@/stores/account-security-store';
 import { useAuthStore } from '@/stores/auth-store';
+import { useAccountStore } from '@/stores/account-store';
+import { apiFetch, getPathPrefix } from '@/lib/browser-navigation';
 import { toast } from '@/stores/toast-store';
 import { cn } from '@/lib/utils';
 import { sanitizeI18nHtml } from '@/lib/email-sanitization';
@@ -638,14 +641,156 @@ function EmailClientSection() {
   );
 }
 
+// Cross-device QR login. A signed-in (OAuth/SSO) session mints a short-lived
+// pairing code via /api/auth/pair/create; we render it as a QR that the mobile
+// app scans to sign in without re-typing credentials. The QR payload carries
+// only the server URL and the one-time code — never tokens.
+function LinkDeviceSection() {
+  const t = useTranslations('settings.security');
+  const params = useParams();
+  const locale = params.locale as string;
+  const [qrDataUrl, setQrDataUrl] = useState<string | null>(null);
+  const [remaining, setRemaining] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasGenerated, setHasGenerated] = useState(false);
+
+  // Tick the countdown down to zero, then drop the (now useless) QR so the
+  // user is nudged to generate a fresh one.
+  useEffect(() => {
+    if (remaining <= 0) {
+      setQrDataUrl(null);
+      return;
+    }
+    const timer = setInterval(() => setRemaining((r) => Math.max(0, r - 1)), 1000);
+    return () => clearInterval(timer);
+  }, [remaining]);
+
+  // Send the user to the IdP for a fresh login (prompt=login). On return the
+  // callback page sets the pairing re-auth proof and bounces back here, where
+  // the resume effect below re-runs generate().
+  const startReauth = useCallback(async () => {
+    try {
+      sessionStorage.setItem('pair_reauth_resume', '1');
+    } catch { /* sessionStorage unavailable */ }
+    const prefix = getPathPrefix(locale);
+    const redirectUri = `${window.location.origin}${prefix}/${locale}/auth/callback`;
+    const res = await apiFetch('/api/auth/sso/start', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ redirect_uri: redirectUri, locale, purpose: 'reauth' }),
+    });
+    if (!res.ok) {
+      setError(t('link_device.error'));
+      return;
+    }
+    const { authorize_url } = await res.json();
+    window.location.href = authorize_url;
+  }, [locale, t]);
+
+  // `fromResume` guards against a redirect loop: if we just completed re-auth
+  // and pair/create still demands it, surface an error instead of bouncing to
+  // the IdP again.
+  const generate = useCallback(async (fromResume = false) => {
+    setLoading(true);
+    setError(null);
+    try {
+      // Pair the account whose session cookie we'll actually refresh — the
+      // active account's slot.
+      const slot = useAccountStore.getState().getActiveAccount()?.cookieSlot ?? 0;
+      const res = await apiFetch('/api/auth/pair/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ slot }),
+      });
+      if (!res.ok) {
+        const errBody = await res.json().catch(() => null);
+        if (res.status === 401 && errBody?.error === 'reauth_required' && !fromResume) {
+          await startReauth();
+          return;
+        }
+        setError(t('link_device.error'));
+        return;
+      }
+      const data = await res.json();
+      const code = data.pairing_code as string;
+      const expiresIn = typeof data.expires_in === 'number' ? data.expires_in : 120;
+      // The phone redeems the code against THIS webmail (where the pairing
+      // record lives), so the QR carries the webmail base — origin plus any
+      // mount prefix — not the JMAP server URL. The JMAP server_url comes back
+      // in the redeem response.
+      const webmailBase = `${window.location.origin}${getPathPrefix()}`;
+      const payload = `bulwarkmail://pair?server=${encodeURIComponent(webmailBase)}&code=${encodeURIComponent(code)}`;
+      const dataUrl = await QRCode.toDataURL(payload, { width: 240, margin: 1 });
+      setQrDataUrl(dataUrl);
+      setRemaining(expiresIn);
+      setHasGenerated(true);
+    } catch {
+      setError(t('link_device.error'));
+    } finally {
+      setLoading(false);
+    }
+  }, [t, startReauth]);
+
+  // Auto-resume after returning from the step-up re-auth round-trip.
+  useEffect(() => {
+    let resume = false;
+    try {
+      resume = sessionStorage.getItem('pair_reauth_done') === '1';
+      if (resume) sessionStorage.removeItem('pair_reauth_done');
+    } catch { /* sessionStorage unavailable */ }
+    if (resume) void generate(true);
+  }, [generate]);
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <QrCode className="w-4 h-4 text-muted-foreground" />
+        <h4 className="text-sm font-medium text-foreground">{t('link_device.title')}</h4>
+      </div>
+      <p className="text-xs text-muted-foreground">{t('link_device.description')}</p>
+
+      {qrDataUrl && remaining > 0 && (
+        <div className="p-3 bg-muted/70 dark:bg-muted/40 rounded-md space-y-2">
+          <div className="flex justify-center">
+            <img src={qrDataUrl} alt="Pairing QR code" className="rounded bg-white p-2" />
+          </div>
+          <p className="text-xs text-muted-foreground text-center">{t('link_device.instructions')}</p>
+          <p className="text-[11px] text-muted-foreground text-center">
+            {t('link_device.expires_in', { seconds: remaining })}
+          </p>
+        </div>
+      )}
+
+      {error && <p className="text-xs text-destructive">{error}</p>}
+
+      <Button variant="outline" size="sm" onClick={() => void generate()} disabled={loading}>
+        {loading ? (
+          <Loader2 className="w-3 h-3 mr-1 animate-spin" />
+        ) : (
+          <QrCode className="w-3 h-3 mr-1" />
+        )}
+        {hasGenerated ? t('link_device.regenerate') : t('link_device.generate')}
+      </Button>
+    </div>
+  );
+}
+
 export function AccountSecuritySettings() {
   const t = useTranslations('settings.security');
   const { isStalwart, isProbing, probe, fetchAll, fetchAuthInfo } = useAccountSecurityStore();
-  const { isAuthenticated, authMode } = useAuthStore();
+  const { isAuthenticated, authMode, client } = useAuthStore();
   const isOAuth = authMode === 'oauth';
 
+  // Wait for `client` before probing. On reload the persisted `isAuthenticated`
+  // flips true before the async OAuth reconnect sets `client`; probing in that
+  // window reads a null client, decides the server isn't Stalwart, and caches
+  // that wrong verdict. Gating on `client` (which is set only after connect()
+  // populates the session capabilities) makes the probe run with real data.
   useEffect(() => {
-    if (isAuthenticated && isStalwart === null) {
+    if (isAuthenticated && client && isStalwart === null) {
       probe().then((detected) => {
         if (detected) {
           if (isOAuth) {
@@ -656,7 +801,7 @@ export function AccountSecuritySettings() {
         }
       });
     }
-  }, [isAuthenticated, isStalwart, probe, fetchAll, fetchAuthInfo, isOAuth]);
+  }, [isAuthenticated, client, isStalwart, probe, fetchAll, fetchAuthInfo, isOAuth]);
 
   if (isProbing) {
     return (
@@ -670,9 +815,25 @@ export function AccountSecuritySettings() {
   }
 
   if (isStalwart === false) {
+    // Even when Stalwart account-management isn't exposed (common for OAuth
+    // sessions, whose tokens may lack the management capability), the
+    // cross-device mobile pairing still works — it only needs the OAuth
+    // refresh-token cookie, not `urn:stalwart:jmap`. So surface the QR linker
+    // for OAuth sessions and show the "not available" note for the rest.
+    // Use t.raw (not t) because the message is hand-injected HTML; passing it
+    // through t() makes next-intl try to parse the <a> tag and throw
+    // INVALID_TAG.
     return (
       <SettingsSection title={t('title')} description={t('description')}>
-        <div className="text-sm text-muted-foreground py-4" dangerouslySetInnerHTML={{ __html: sanitizeI18nHtml(t('not_available')) }} />
+        {isOAuth ? (
+          <div className="space-y-6">
+            <LinkDeviceSection />
+            <div className="border-t border-border" />
+            <div className="text-sm text-muted-foreground" dangerouslySetInnerHTML={{ __html: sanitizeI18nHtml(t.raw('not_available')) }} />
+          </div>
+        ) : (
+          <div className="text-sm text-muted-foreground py-4" dangerouslySetInnerHTML={{ __html: sanitizeI18nHtml(t.raw('not_available')) }} />
+        )}
       </SettingsSection>
     );
   }
@@ -706,6 +867,8 @@ export function AccountSecuritySettings() {
           <>
             <div className="border-t border-border" />
             <EmailClientSection />
+            <div className="border-t border-border" />
+            <LinkDeviceSection />
           </>
         )}
 

components/settings/account-settings.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback, useMemo } from 'react';
 import { useTranslations } from 'next-intl';
-import { Check, GripVertical, Plus, Star, AlertCircle } from 'lucide-react';
+import { Check, GripVertical, Plus, Star, AlertCircle, ChevronRight } from 'lucide-react';
 import { useAuthStore } from '@/stores/auth-store';
 import { useEmailStore } from '@/stores/email-store';
 import { useAccountStore, type AccountEntry } from '@/stores/account-store';
+import { useManagedAccountStore } from '@/stores/managed-account-store';
+import type { SharedAccount } from '@/lib/jmap/types';
 import { SettingsSection, SettingItem } from './settings-section';
 import { Avatar } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
@@ -17,12 +19,30 @@ function hostnameOf(serverUrl: string): string {
   try { return new URL(serverUrl).hostname; } catch { return serverUrl; }
 }
 
+// First scoped settings tab to land on for a shared account, by capability.
+// Mirrors the scoped-tab gating in the settings page. null = nothing editable.
+function firstScopedTab(caps: SharedAccount['capabilities']): string | null {
+  if (caps.sieve) return 'filters';
+  if (caps.mail) return 'vacation';
+  if (caps.calendars) return 'calendar';
+  if (caps.contacts) return 'contacts';
+  return null;
+}
+
 export function AccountSettings() {
   const t = useTranslations('settings.account');
   const router = useRouter();
-  const { username, serverUrl, isDemoMode, primaryIdentity, authMode } = useAuthStore();
+  const { username, serverUrl, isDemoMode, primaryIdentity, authMode, client } = useAuthStore();
   const activeAccountId = useAuthStore((s) => s.activeAccountId);
   const switchAccount = useAuthStore((s) => s.switchAccount);
+  const setManagedAccount = useManagedAccountStore((s) => s.setManagedAccount);
+
+  // Shared/group accounts delegated to this session (excludes the user's own
+  // primary account). These can be drilled into for scoped settings editing.
+  const sharedAccounts = useMemo<SharedAccount[]>(
+    () => (client?.getSharedAccounts() ?? []).filter((a) => !a.isPrimary),
+    [client],
+  );
   const { quota } = useEmailStore();
   const accounts = useAccountStore((s) => s.accounts);
   const setDefaultAccount = useAccountStore((s) => s.setDefaultAccount);
@@ -82,6 +102,16 @@ export function AccountSettings() {
     router.push(`/login?mode=add-account` as never);
   }, [router]);
 
+  // Enter scoped settings mode for a shared/group account: set the managed
+  // account, then steer the settings panel to its first editable tab via the
+  // existing 'settings-tab-change' event the page already listens for.
+  const handleManageShared = useCallback((account: SharedAccount) => {
+    const tab = firstScopedTab(account.capabilities);
+    if (!tab) return;
+    setManagedAccount(account);
+    window.dispatchEvent(new CustomEvent('settings-tab-change', { detail: tab }));
+  }, [setManagedAccount]);
+
   return (
     <div className="space-y-8">
       <SettingsSection title={t('title')} description={t('description')}>
@@ -197,6 +227,44 @@ export function AccountSettings() {
           </div>
         </SettingsSection>
       )}
+
+      {/* Shared / group accounts delegated to this session. Clicking one drills
+          into a scoped settings view (filters, vacation, calendars, contacts). */}
+      {sharedAccounts.length > 0 && (
+        <SettingsSection title={t('shared_accounts.title')} description={t('shared_accounts.description')}>
+          <div className="space-y-2">
+            {sharedAccounts.map((acc) => {
+              const editable = firstScopedTab(acc.capabilities) !== null;
+              return (
+                <button
+                  key={acc.id}
+                  type="button"
+                  onClick={() => handleManageShared(acc)}
+                  disabled={!editable}
+                  className={cn(
+                    'flex items-center gap-3 w-full p-3 border border-border rounded-lg text-left transition-colors',
+                    editable ? 'hover:bg-muted/50 cursor-pointer' : 'opacity-60 cursor-not-allowed',
+                  )}
+                >
+                  <Avatar
+                    name={acc.name}
+                    size="sm"
+                    className="w-9 h-9 text-sm flex-shrink-0"
+                    disableFavicon
+                  />
+                  <div className="min-w-0 flex-1">
+                    <p className="text-sm font-medium truncate">{acc.name}</p>
+                    <p className="text-xs text-muted-foreground truncate">
+                      {t('shared_accounts.shared_label')}
+                    </p>
+                  </div>
+                  <ChevronRight className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                </button>
+              );
+            })}
+          </div>
+        </SettingsSection>
+      )}
     </div>
   );
 }

components/settings/address-book-management-settings.tsx

@@ -2,14 +2,16 @@
 
 import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
-import { Book, Pencil, Share2, Tag, Users } from "lucide-react";
+import { Book, BookPlus, Pencil, Share2, Tag, Users } from "lucide-react";
 import { useContactStore } from "@/stores/contact-store";
 import { useAuthStore } from "@/stores/auth-store";
+import { useManagedAccountStore } from "@/stores/managed-account-store";
 import { toast } from "@/stores/toast-store";
 import { SettingsSection } from "./settings-section";
 import { cn } from "@/lib/utils";
 import type { AddressBook, AddressBookRights } from "@/lib/jmap/types";
 import { ShareCollectionDialog } from "./share-collection-dialog";
+import { RenameDialog } from "@/components/files/rename-dialog";
 
 function AddressBookEditRow({
   initial,
@@ -71,10 +73,12 @@ export function AddressBookManagementSettings() {
   const tContacts = useTranslations("contacts");
   const tSettings = useTranslations("settings.contacts");
   const { client } = useAuthStore();
-  const { addressBooks, contacts, supportsSync, fetchAddressBooks, renameAddressBook, shareAddressBook, renameKeyword } = useContactStore();
+  const managedAccountId = useManagedAccountStore((s) => s.managedAccountId);
+  const { addressBooks, contacts, supportsSync, fetchAddressBooks, createAddressBook, renameAddressBook, shareAddressBook, renameKeyword } = useContactStore();
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editingKeyword, setEditingKeyword] = useState<string | null>(null);
   const [sharingId, setSharingId] = useState<string | null>(null);
+  const [creating, setCreating] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
@@ -83,6 +87,21 @@ export function AddressBookManagementSettings() {
     }
   }, [client, addressBooks.length, fetchAddressBooks]);
 
+  const handleCreate = async (name: string) => {
+    if (!client) return;
+    setIsLoading(true);
+    try {
+      await createAddressBook(client, name);
+      await fetchAddressBooks(client);
+      setCreating(false);
+      toast.success(t("created"));
+    } catch {
+      toast.error(t("create_failed"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const handleUpdate = async (book: AddressBook, newName: string) => {
     if (!client) return;
     setIsLoading(true);
@@ -205,9 +224,13 @@ export function AddressBookManagementSettings() {
     <>
     <SettingsSection title={tSettings("manage_title")} description={tSettings("manage_description")}>
       <div className="space-y-2">
-        {personal.map(renderBook)}
+        {/* In scoped mode (managing a shared account) hide the user's own
+            address books and show only the managed account's group. */}
+        {(managedAccountId ? [] : personal).map(renderBook)}
 
-        {Array.from(sharedGroups.entries()).map(([accountId, group]) => (
+        {Array.from(sharedGroups.entries())
+          .filter(([accountId]) => !managedAccountId || accountId === managedAccountId)
+          .map(([accountId, group]) => (
           <div key={accountId} className="mt-4 space-y-2">
             <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
               <Share2 className="w-3 h-3" />
@@ -220,9 +243,25 @@ export function AddressBookManagementSettings() {
         {addressBooks.length === 0 && (
           <p className="text-sm text-muted-foreground py-2">{tSettings("no_address_books")}</p>
         )}
+
+        {/* Creating targets the user's own account, so hide it while scoped to a
+            managed (shared) account. */}
+        {!managedAccountId && client && (
+          <button
+            type="button"
+            onClick={() => setCreating(true)}
+            className="flex items-center gap-2 py-2.5 px-3 w-full rounded-md border border-dashed border-border text-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+          >
+            <BookPlus className="w-4 h-4 flex-shrink-0" />
+            {t("create")}
+          </button>
+        )}
       </div>
     </SettingsSection>
 
+    {/* Contact categories come from the active account's contacts, not the
+        shared account, so hide them while scoped to a shared account. */}
+    {!managedAccountId && (
     <div className="mt-8">
       <SettingsSection title={tSettings("categories_title")} description={tSettings("categories_description")}>
         <div className="space-y-2">
@@ -267,6 +306,17 @@ export function AddressBookManagementSettings() {
         </div>
       </SettingsSection>
     </div>
+    )}
+
+    {creating && (
+      <RenameDialog
+        currentName=""
+        title={t("create")}
+        label={t("name_label")}
+        onCancel={() => setCreating(false)}
+        onConfirm={handleCreate}
+      />
+    )}
 
     {sharingId && client && (() => {
       const book = addressBooks.find((b) => b.id === sharingId);

components/settings/calendar-management-settings.tsx

@@ -14,26 +14,9 @@ import { cn, formatDateTime, redactUrlCredentials } from '@/lib/utils';
 import { ICalImportModal } from '@/components/calendar/ical-import-modal';
 import { ICalSubscriptionModal } from '@/components/calendar/ical-subscription-modal';
 import { useSettingsStore } from '@/stores/settings-store';
+import { useManagedAccountStore } from '@/stores/managed-account-store';
 import { apiFetch } from '@/lib/browser-navigation';
-
+import { CALENDAR_COLORS, sharedCalendarColorKey } from '@/lib/shared-calendar-colors';
-const CALENDAR_COLORS = [
-  "#3b82f6", // blue
-  "#ef4444", // red
-  "#22c55e", // green
-  "#f59e0b", // amber
-  "#8b5cf6", // violet
-  "#ec4899", // pink
-  "#14b8a6", // teal
-  "#f97316", // orange
-  "#06b6d4", // cyan
-  "#84cc16", // lime
-  "#6366f1", // indigo
-  "#a855f7", // purple
-  "#e11d48", // rose
-  "#0ea5e9", // sky
-  "#10b981", // emerald
-  "#d946ef", // fuchsia
-];
 
 function CalendarColorPicker({
   value,
@@ -155,6 +138,7 @@ export { CalendarColorPicker, CALENDAR_COLORS };
 export function CalendarManagementSettings() {
   const t = useTranslations('calendar.management');
   const { client, serverUrl, username } = useAuthStore();
+  const managedAccountId = useManagedAccountStore((s) => s.managedAccountId);
   const { calendars, updateCalendar, shareCalendar, createCalendar, removeCalendar, clearCalendarEvents, fetchCalendars, icalSubscriptions: allSubs, removeICalSubscription, refreshICalSubscription, isSubscriptionCalendar } = useCalendarStore();
   // Subscriptions are persisted globally but scoped per JMAP account via
   // accountId. Legacy entries with no accountId show in the active account.
@@ -182,6 +166,8 @@ export function CalendarManagementSettings() {
   const tImport = useTranslations('calendar.import');
   const tSub = useTranslations('calendar.subscription');
   const timeFormat = useSettingsStore((s) => s.timeFormat);
+  const sharedCalendarColors = useSettingsStore((s) => s.sharedCalendarColors);
+  const setSharedCalendarColor = useSettingsStore((s) => s.setSharedCalendarColor);
   const colorPickerRef = useRef<HTMLDivElement>(null);
 
   // Load calendars if not yet loaded
@@ -329,6 +315,15 @@ export function CalendarManagementSettings() {
 
   const handleColorChange = async (calendarId: string, color: string) => {
     if (!client) return;
+    // Shared calendars: recolor locally only - the viewer usually can't write
+    // the owner's calendar and it'd recolor it for everyone (see #345).
+    const cal = calendars.find((c) => c.id === calendarId);
+    if (cal?.isShared) {
+      setSharedCalendarColor(sharedCalendarColorKey(cal), color);
+      toast.success(t('color_updated'));
+      setColorPickerId(null);
+      return;
+    }
     try {
       await updateCalendar(client, calendarId, { color });
       toast.success(t('color_updated'));
@@ -395,8 +390,11 @@ export function CalendarManagementSettings() {
   return (
     <SettingsSection title={t('title')} description={t('description')}>
       <div className="space-y-2">
-        {calendars.filter(cal => !isSubscriptionCalendar(cal.id)).map((cal) => {
+        {calendars
-          const color = cal.color || '#3b82f6';
+          .filter(cal => !isSubscriptionCalendar(cal.id))
+          .filter(cal => !managedAccountId || cal.accountId === managedAccountId)
+          .map((cal) => {
+          const color = (cal.isShared && sharedCalendarColors[sharedCalendarColorKey(cal)]) || cal.color || '#3b82f6';
 
           if (editingId === cal.id) {
             return (

components/settings/composing-settings.tsx

@@ -22,12 +22,15 @@ export function ComposingSettings() {
 
   const {
     autoSelectReplyIdentity,
+    plainTextMode,
     attachmentReminderEnabled,
     attachmentReminderKeywords,
     sendDelaySeconds,
     subAddressDelimiter,
     signaturePosition,
     signatureSeparatorEnabled,
+    requestReadReceiptDefault,
+    readReceiptResponse,
     updateSetting,
   } = useSettingsStore();
   const { client } = useAuthStore();
@@ -42,6 +45,13 @@ export function ComposingSettings() {
         />
       </SettingItem>
 
+      <SettingItem label={t('plain_text_mode.label')} description={t('plain_text_mode.description')}>
+        <ToggleSwitch
+          checked={plainTextMode}
+          onChange={(checked) => updateSetting('plainTextMode', checked)}
+        />
+      </SettingItem>
+
       <SettingItem label={t('send_delay.label')} description={t('send_delay.description')}>
         <div className="flex flex-col items-end gap-1">
           <Select
@@ -78,6 +88,25 @@ export function ComposingSettings() {
         />
       </SettingItem>
 
+      <SettingItem label={t('request_read_receipt.label')} description={t('request_read_receipt.description')}>
+        <ToggleSwitch
+          checked={requestReadReceiptDefault}
+          onChange={(checked) => updateSetting('requestReadReceiptDefault', checked)}
+        />
+      </SettingItem>
+
+      <SettingItem label={t('read_receipt_response.label')} description={t('read_receipt_response.description')}>
+        <Select
+          value={readReceiptResponse}
+          onChange={(value) => updateSetting('readReceiptResponse', value as 'ask' | 'always' | 'never')}
+          options={[
+            { value: 'ask', label: t('read_receipt_response.ask') },
+            { value: 'always', label: t('read_receipt_response.always') },
+            { value: 'never', label: t('read_receipt_response.never') },
+          ]}
+        />
+      </SettingItem>
+
       <SettingItem
         label={t('sub_address_delimiter.label')}
         description={t('sub_address_delimiter.description', { delimiter: subAddressDelimiter })}

components/settings/filter-settings.tsx

@@ -12,7 +12,9 @@ import { useEmailStore } from "@/stores/email-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { toast } from "@/stores/toast-store";
 import type { FilterRule } from "@/lib/jmap/sieve-types";
+import type { Mailbox } from "@/lib/jmap/types";
 import { useVacationStore } from "@/stores/vacation-store";
+import { useManagedAccountStore } from "@/stores/managed-account-store";
 import {
   Plus,
   GripVertical,
@@ -36,7 +38,17 @@ function RuleSummary({ rule }: { rule: FilterRule }) {
   const conditions = rule.conditions.slice(0, 2).map((c) => {
     const field = t(`condition_fields.${c.field}`);
     const comparator = t(`comparators.${c.comparator}`);
-    return `${field} ${comparator} "${c.value}"`;
+    // has_any is a no-value test ("attachment is present"); appending
+    // `""` would look broken in the summary line.
+    if (c.field === "attachment" && c.comparator === "has_any") {
+      return `${field} ${comparator}`;
+    }
+    // Multi-value conditions render as "a" / "b" / "c" with the locale's
+    // OR-glue between items so the line still reads as natural language.
+    const valueStr = Array.isArray(c.value)
+      ? c.value.map((v) => `"${v}"`).join(` ${t("or")} `)
+      : `"${c.value}"`;
+    return `${field} ${comparator} ${valueStr}`;
   });
 
   const joiner = rule.matchType === "all" ? t("and") : t("or");
@@ -97,7 +109,22 @@ function VisualRuleSummary({ rule }: { rule: FilterRule }) {
               <span className="inline-flex items-baseline gap-1 px-1.5 py-px rounded-sm bg-muted/60 text-foreground">
                 <span className="font-medium text-blue-600 dark:text-blue-400">{field}</span>
                 <span className="text-muted-foreground">{comparator}</span>
-                <span className="text-foreground">“{c.value}”</span>
+                {!(c.field === "attachment" && c.comparator === "has_any") && (
+                  <span className="text-foreground">
+                    {Array.isArray(c.value)
+                      ? c.value.map((v, k) => (
+                          <span key={k}>
+                            {k > 0 && (
+                              <span className="text-muted-foreground/70 italic mx-0.5">
+                                {t("or")}
+                              </span>
+                            )}
+                            “{v}”
+                          </span>
+                        ))
+                      : <>“{c.value}”</>}
+                  </span>
+                )}
               </span>
             </span>
           );
@@ -132,7 +159,8 @@ export function FilterSettings() {
   const t = useTranslations("settings.filters");
   const tNotifications = useTranslations("notifications");
   const { client } = useAuthStore();
-  const mailboxes = useEmailStore((s) => s.mailboxes);
+  const storeMailboxes = useEmailStore((s) => s.mailboxes);
+  const fetchMailboxes = useEmailStore((s) => s.fetchMailboxes);
   const expandedFilterView = useSettingsStore((s) => s.expandedFilterView);
   const updateSetting = useSettingsStore((s) => s.updateSetting);
 
@@ -145,7 +173,7 @@ export function FilterSettings() {
     isOpaque,
     rawScript,
     vacationSettings,
-    fetchFilters,
+    selectAccount,
     saveFilters,
     addRule,
     updateRule,
@@ -157,7 +185,57 @@ export function FilterSettings() {
     validateScript,
   } = useFilterStore();
 
-  const vacationEnabled = useVacationStore((s) => s.isEnabled) || vacationSettings?.isEnabled;
+  // Scoped to a shared/group account when the settings panel is managing one.
+  const managedAccountId = useManagedAccountStore((s) => s.managedAccountId);
+  const isPrimaryAccount = !managedAccountId;
+
+  // Folders offered as "move to" targets in the rule editor must belong to the
+  // account whose filters we're editing. For a shared account, fetch that
+  // account's mailboxes (the email store only holds the active account's). They
+  // are this account's own folders within its Sieve context, so present them as
+  // non-shared — otherwise the rule modal filters them out (it drops isShared
+  // mailboxes, which are normally other accounts' folders merged into the view).
+  const [scopedMailboxes, setScopedMailboxes] = useState<Mailbox[]>([]);
+  useEffect(() => {
+    if (!client || !managedAccountId) {
+      setScopedMailboxes([]);
+      return;
+    }
+    let cancelled = false;
+    void client
+      .getMailboxes(managedAccountId)
+      .then((mbs) => {
+        if (!cancelled) setScopedMailboxes(mbs.map((mb) => ({ ...mb, isShared: false })));
+      })
+      .catch(() => {
+        if (!cancelled) setScopedMailboxes([]);
+      });
+    return () => { cancelled = true; };
+  }, [client, managedAccountId]);
+
+  // The "move to" folder list for the primary account comes from the email
+  // store, which is normally populated when the mail view mounts. When the app
+  // is opened or refreshed directly on Settings (the mail view never mounted),
+  // that store is empty, leaving the rule editor's folder dropdown blank. Fetch
+  // mailboxes on demand here so Filters never depends on having visited Inbox
+  // first. fetchMailboxes guards against transient empty results and selecting
+  // an inbox, so it's safe to call independently; a ref keeps it to one attempt
+  // per client.
+  const primaryFetchClientRef = useRef<typeof client | null>(null);
+  useEffect(() => {
+    if (managedAccountId || !client || storeMailboxes.length > 0) return;
+    if (primaryFetchClientRef.current === client) return;
+    primaryFetchClientRef.current = client;
+    void fetchMailboxes(client);
+  }, [client, managedAccountId, storeMailboxes.length, fetchMailboxes]);
+
+  const mailboxes = managedAccountId ? scopedMailboxes : storeMailboxes;
+
+  const vacationStoreEnabled = useVacationStore((s) => s.isEnabled);
+  // Vacation uses a separate per-(primary)-account mechanism (RFC 9661), so the
+  // "vacation active" banner only applies when editing the personal account.
+  const vacationEnabled =
+    isPrimaryAccount && (vacationStoreEnabled || vacationSettings?.isEnabled);
 
   const [editingRule, setEditingRule] = useState<FilterRule | undefined>();
   const [showRuleModal, setShowRuleModal] = useState(false);
@@ -169,9 +247,12 @@ export function FilterSettings() {
 
   useEffect(() => {
     if (client && isSupported) {
-      void fetchFilters(client);
+      // Always pass a concrete account id (managed shared account, or the
+      // primary Sieve account) so switching never falls back to a stale
+      // previously-selected account.
+      void selectAccount(client, managedAccountId ?? client.getSieveAccountId());
     }
-  }, [client, isSupported, fetchFilters]);
+  }, [client, isSupported, managedAccountId, selectAccount]);
 
   const handleToggle = useCallback(
     async (ruleId: string) => {

components/settings/layout-settings.tsx

@@ -2,6 +2,7 @@
 
 import { useMemo } from 'react';
 import { useTranslations } from 'next-intl';
+import { Check, Folder } from 'lucide-react';
 import { useSettingsStore, type ToolbarPosition, type MailLayout } from '@/stores/settings-store';
 import { SettingsSection, SettingItem, RadioGroup, ToggleSwitch } from './settings-section';
 import { cn } from '@/lib/utils';
@@ -117,11 +118,46 @@ function MailLayoutPreview({
 export function LayoutSettings() {
   const t = useTranslations('settings.appearance');
   const tEmail = useTranslations('settings.email_behavior');
-  const { toolbarPosition, showToolbarLabels, hideAccountSwitcher, showRailAccountList, enableUnifiedMailbox, includeGroupInUnified, colorfulSidebarIcons, mailLayout, proInterface, updateSetting } = useSettingsStore();
+  const { toolbarPosition, showToolbarLabels, hideAccountSwitcher, showRailAccountList, enableUnifiedMailbox, includeGroupInUnified, enableAllMailView, allMailFolderIds, enableCrossUnreadView, enableCrossStarredView, enableCrossAllView, colorfulSidebarIcons, mailLayout, proInterface, updateSetting } = useSettingsStore();
-  const { isSettingLocked, isSettingHidden } = usePolicyStore();
+  const { isSettingLocked, isSettingHidden, isFeatureEnabled } = usePolicyStore();
   const accounts = useAccountStore(s => s.accounts);
+  const activeAccountId = useAccountStore(s => s.activeAccountId);
   const mailboxes = useEmailStore(s => s.mailboxes);
   const hasGroupInboxes = useMemo(() => mailboxes.some(m => m.isShared), [mailboxes]);
+  const allMailViewAllowed = isFeatureEnabled('allMailViewEnabled');
+  // Cross-account "All accounts" views, each gated independently by the admin.
+  const crossViews = [
+    { setting: 'enableCrossUnreadView', value: enableCrossUnreadView, allowed: isFeatureEnabled('crossUnreadViewEnabled'), labelKey: 'cross_unread.label', descKey: 'cross_unread.description' },
+    { setting: 'enableCrossStarredView', value: enableCrossStarredView, allowed: isFeatureEnabled('crossStarredViewEnabled'), labelKey: 'cross_starred.label', descKey: 'cross_starred.description' },
+    { setting: 'enableCrossAllView', value: enableCrossAllView, allowed: isFeatureEnabled('crossAllViewEnabled'), labelKey: 'cross_all.label', descKey: 'cross_all.description' },
+  ] as const;
+
+  // Own (non-shared) folders and the active account's All Mail selection. The
+  // selection is per account: a missing entry = never configured, which
+  // defaults to all no-role folders; an explicit [] = no folders.
+  const ownMailboxes = useMemo(() => mailboxes.filter(m => !m.isShared), [mailboxes]);
+  const currentAllMailEntry = activeAccountId ? allMailFolderIds[activeAccountId] : undefined;
+  const allMailSelected = new Set(
+    currentAllMailEntry === undefined
+      ? ownMailboxes.filter(m => !m.role).map(m => m.id)
+      : currentAllMailEntry
+  );
+  const toggleAllMailFolder = (id: string) => {
+    if (!activeAccountId) return;
+    const next = new Set(allMailSelected);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    updateSetting('allMailFolderIds', {
+      ...allMailFolderIds,
+      [activeAccountId]: ownMailboxes.filter(m => next.has(m.id)).map(m => m.id),
+    });
+  };
+  // Name the account the selection applies to, but only when more than one is
+  // logged in (otherwise it's unambiguous).
+  const activeAccount = accounts.find(a => a.id === activeAccountId);
+  const allMailAccountHint = accounts.length > 1 && activeAccount
+    ? t('all_mail.account_hint', { account: activeAccount.displayName || activeAccount.email })
+    : null;
 
   return (
     <SettingsSection title={t('title')} description={t('description')}>
@@ -209,6 +245,79 @@ export function LayoutSettings() {
         </div>
       )}
 
+      {enableUnifiedMailbox && crossViews.some(c => c.allowed) && (
+        <div className="ml-4 border-l-2 border-border pl-4 -mt-2 space-y-2">
+          {crossViews.map(({ setting, value, allowed, labelKey, descKey }) => (
+            allowed && !isSettingHidden(setting) && (
+              <SettingItem
+                key={setting}
+                label={t(labelKey)}
+                description={t(descKey)}
+                locked={isSettingLocked(setting)}
+              >
+                <ToggleSwitch
+                  checked={value}
+                  onChange={(v) => updateSetting(setting, v)}
+                />
+              </SettingItem>
+            )
+          ))}
+        </div>
+      )}
+
+      {allMailViewAllowed && !isSettingHidden('enableAllMailView') && (
+        <SettingItem
+          label={t('all_mail.label')}
+          description={t('all_mail.description')}
+          locked={isSettingLocked('enableAllMailView')}
+        >
+          <ToggleSwitch
+            checked={enableAllMailView}
+            onChange={(v) => updateSetting('enableAllMailView', v)}
+          />
+        </SettingItem>
+      )}
+
+      {allMailViewAllowed && enableAllMailView && (
+        <div className="ml-4 border-l-2 border-border pl-4 -mt-2 space-y-2">
+          <div>
+            <div className="text-sm font-medium text-foreground">{t('all_mail.folders_label')}</div>
+            <div className="text-xs text-muted-foreground">{t('all_mail.folders_description')}</div>
+            {allMailAccountHint && (
+              <div className="text-xs italic text-muted-foreground mt-0.5">{allMailAccountHint}</div>
+            )}
+          </div>
+          {ownMailboxes.length === 0 ? (
+            <p className="text-xs text-muted-foreground">{t('all_mail.no_folders')}</p>
+          ) : (
+            <div className="space-y-0.5">
+              {ownMailboxes.map((mb) => {
+                const checked = allMailSelected.has(mb.id);
+                return (
+                  <button
+                    key={mb.id}
+                    type="button"
+                    onClick={() => toggleAllMailFolder(mb.id)}
+                    className="w-full flex items-center gap-2.5 py-1.5 px-2 rounded-md hover:bg-muted/50 text-left"
+                    role="checkbox"
+                    aria-checked={checked}
+                  >
+                    <span className={cn(
+                      "flex items-center justify-center w-4 h-4 rounded border flex-shrink-0 transition-colors",
+                      checked ? "bg-primary border-primary text-primary-foreground" : "border-border"
+                    )}>
+                      {checked && <Check className="w-3 h-3" />}
+                    </span>
+                    <Folder className={cn("w-4 h-4 flex-shrink-0", mb.role ? "text-primary" : "text-muted-foreground")} />
+                    <span className="text-sm text-foreground truncate">{mb.name}</span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
       <SettingItem label={t('pro_interface.label')} description={t('pro_interface.description')}>
         <ToggleSwitch
           checked={proInterface}

components/settings/reading-settings.tsx

@@ -22,10 +22,10 @@ export function ReadingSettings() {
     markAsReadDelay,
     deleteAction,
     permanentlyDeleteJunk,
+    returnToListAfterAction,
     showPreview,
     mailLayout,
     disableThreading,
-    plainTextMode,
     emailsPerPage,
     mailAttachmentAction,
     attachmentPosition,
@@ -177,6 +177,13 @@ export function ReadingSettings() {
         />
       </SettingItem>
 
+      <SettingItem label={t('return_to_list_after_action.label')} description={t('return_to_list_after_action.description')}>
+        <ToggleSwitch
+          checked={returnToListAfterAction}
+          onChange={(checked) => updateSetting('returnToListAfterAction', checked)}
+        />
+      </SettingItem>
+
       {!isSettingHidden('showPreview') && (
       <SettingItem
         label={t('show_preview.label')}
@@ -194,13 +201,6 @@ export function ReadingSettings() {
         />
       </SettingItem>
 
-      <SettingItem label={t('plain_text_mode.label')} description={t('plain_text_mode.description')}>
-        <ToggleSwitch
-          checked={plainTextMode}
-          onChange={(checked) => updateSetting('plainTextMode', checked)}
-        />
-      </SettingItem>
-
       <SettingItem label={t('hide_inline_image_attachments.label')} description={t('hide_inline_image_attachments.description')}>
         <ToggleSwitch
           checked={hideInlineImageAttachments}

components/settings/share-collection-dialog.tsx

@@ -6,11 +6,11 @@ import { Button } from "@/components/ui/button";
 import { Avatar } from "@/components/ui/avatar";
 import { X, Loader2, UserPlus, Trash2, Users, ChevronDown } from "lucide-react";
 import type { IJMAPClient } from "@/lib/jmap/client-interface";
-import type { Principal, CalendarRights, AddressBookRights } from "@/lib/jmap/types";
+import type { Principal, CalendarRights, AddressBookRights, FileNodeRights } from "@/lib/jmap/types";
 import { toast } from "@/stores/toast-store";
 
-type ShareKind = "calendar" | "addressBook";
+type ShareKind = "calendar" | "addressBook" | "file";
-type AnyRights = CalendarRights | AddressBookRights;
+type AnyRights = CalendarRights | AddressBookRights | FileNodeRights;
 
 type RolePreset = "freeBusy" | "read" | "readWrite" | "manager" | "custom";
 
@@ -39,6 +39,21 @@ const ADDRESS_BOOK_PRESETS: Record<Exclude<RolePreset, "custom" | "freeBusy">, A
   manager: { mayRead: true, mayWrite: true, mayShare: true, mayDelete: true },
 };
 
+const FILE_PRESETS: Record<Exclude<RolePreset, "custom" | "freeBusy">, FileNodeRights> = {
+  read: {
+    mayRead: true, mayAddChildren: false, mayRename: false,
+    mayDelete: false, mayModifyContent: false, mayShare: false,
+  },
+  readWrite: {
+    mayRead: true, mayAddChildren: true, mayRename: true,
+    mayDelete: true, mayModifyContent: true, mayShare: false,
+  },
+  manager: {
+    mayRead: true, mayAddChildren: true, mayRename: true,
+    mayDelete: true, mayModifyContent: true, mayShare: true,
+  },
+};
+
 function detectCalendarPreset(r: CalendarRights): RolePreset {
   for (const [name, preset] of Object.entries(CALENDAR_PRESETS) as [Exclude<RolePreset, "custom">, CalendarRights][]) {
     if ((Object.keys(preset) as (keyof CalendarRights)[]).every((k) => preset[k] === r[k])) {
@@ -58,6 +73,29 @@ function detectAddressBookPreset(r: AddressBookRights): RolePreset {
   return "custom";
 }
 
+function detectFilePreset(r: FileNodeRights): RolePreset {
+  for (const [name, preset] of Object.entries(FILE_PRESETS) as [Exclude<RolePreset, "custom" | "freeBusy">, FileNodeRights][]) {
+    const keys = Object.keys(preset) as (keyof FileNodeRights)[];
+    if (keys.every((k) => preset[k] === (r[k] ?? false))) {
+      return name;
+    }
+  }
+  return "custom";
+}
+
+function presetRights(kind: ShareKind, preset: RolePreset): AnyRights | undefined {
+  if (preset === "custom") return undefined;
+  if (kind === "calendar") return CALENDAR_PRESETS[preset as keyof typeof CALENDAR_PRESETS];
+  if (kind === "file") return FILE_PRESETS[preset as keyof typeof FILE_PRESETS];
+  return ADDRESS_BOOK_PRESETS[preset as keyof typeof ADDRESS_BOOK_PRESETS];
+}
+
+function detectPreset(kind: ShareKind, rights: AnyRights): RolePreset {
+  if (kind === "calendar") return detectCalendarPreset(rights as CalendarRights);
+  if (kind === "file") return detectFilePreset(rights as FileNodeRights);
+  return detectAddressBookPreset(rights as AddressBookRights);
+}
+
 interface ShareCollectionDialogProps {
   client: IJMAPClient;
   kind: ShareKind;
@@ -126,9 +164,7 @@ export function ShareCollectionDialog({
 
   const handleSetRights = async (principalId: string, preset: RolePreset) => {
     if (preset === "custom") return; // custom is read-only here
-    const rights = kind === "calendar"
+    const rights = presetRights(kind, preset);
-      ? CALENDAR_PRESETS[preset as keyof typeof CALENDAR_PRESETS]
-      : ADDRESS_BOOK_PRESETS[preset as keyof typeof ADDRESS_BOOK_PRESETS];
     if (!rights) return;
     setSavingId(principalId);
     try {
@@ -154,10 +190,8 @@ export function ShareCollectionDialog({
   };
 
   const handleAdd = async (principal: Principal) => {
-    const defaultPreset: RolePreset = "read";
+    const rights = presetRights(kind, "read");
-    const rights = kind === "calendar"
+    if (!rights) return;
-      ? CALENDAR_PRESETS[defaultPreset]
-      : ADDRESS_BOOK_PRESETS[defaultPreset];
     setSavingId(principal.id);
     try {
       await onShare(principal.id, rights);
@@ -226,9 +260,7 @@ export function ShareCollectionDialog({
             <ul className="divide-y divide-border rounded-md border border-border overflow-hidden">
               {sharedEntries.map(([principalId, rights]) => {
                 const principal = allPrincipalsById.get(principalId);
-                const preset = kind === "calendar"
+                const preset = detectPreset(kind, rights);
-                  ? detectCalendarPreset(rights as CalendarRights)
-                  : detectAddressBookPreset(rights as AddressBookRights);
                 return (
                   <li key={principalId} className="flex items-center gap-3 px-3 py-2.5">
                     <Avatar

components/settings/themes-settings.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useThemeStore } from '@/stores/theme-store';
 import { SettingsSection } from './settings-section';
 import { cn } from '@/lib/utils';
-import { Check, Palette, Lock } from 'lucide-react';
+import { Check, Lock } from 'lucide-react';
 import { toast } from '@/stores/toast-store';
 import { usePolicyStore } from '@/stores/policy-store';
 
@@ -14,6 +14,18 @@ export function ThemesSettings() {
   const themePolicy = getThemePolicy();
   const forcedThemeId = getForcedThemeId(installedThemes.map((theme) => theme.id));
 
+  // Render each preview in the variant matching the app's current mode, and
+  // keep it in sync when the user toggles light/dark elsewhere.
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    const root = document.documentElement;
+    const update = () => setIsDark(root.classList.contains('dark'));
+    update();
+    const obs = new MutationObserver(update);
+    obs.observe(root, { attributes: true, attributeFilter: ['class'] });
+    return () => obs.disconnect();
+  }, []);
+
   // Filter out themes disabled by admin policy
   const visibleThemes = installedThemes.filter(
     theme => !isThemeDisabled(theme.id, !!theme.builtIn)
@@ -36,6 +48,9 @@ export function ThemesSettings() {
   }, [activeThemeId, activateTheme, forcedThemeId, installedThemes, isThemeDisabled]);
 
   const handleActivate = (id: string | null) => {
+    // Clicking the already-active theme is a no-op (no re-apply, no toast).
+    if (id === activeThemeId) return;
+
     if (forcedThemeId && id !== forcedThemeId) {
       const forcedTheme = installedThemes.find((theme) => theme.id === forcedThemeId);
       toast.info(`Theme "${forcedTheme?.name ?? 'Admin theme'}" is forced by admin and cannot be changed`);
@@ -61,6 +76,9 @@ export function ThemesSettings() {
         <ThemeCard
           name="Default"
           author="Bulwark"
+          isDefaultTheme
+          variants={['light', 'dark']}
+          isDark={isDark}
           isActive={activeThemeId === null}
           isBuiltIn
           isDefault={!themePolicy.defaultThemeId}
@@ -77,6 +95,8 @@ export function ThemesSettings() {
               name={theme.name}
               author={theme.author}
               preview={theme.preview}
+              css={theme.css}
+              isDark={isDark}
               isActive={activeThemeId === theme.id}
               isBuiltIn={theme.builtIn}
               isDefault={themePolicy.defaultThemeId === theme.id}
@@ -98,6 +118,9 @@ interface ThemeCardProps {
   name: string;
   author: string;
   preview?: string;
+  css?: string;
+  isDark?: boolean;
+  isDefaultTheme?: boolean;
   isActive: boolean;
   isBuiltIn: boolean;
   isDefault?: boolean;
@@ -107,7 +130,8 @@ interface ThemeCardProps {
   onActivate: () => void;
 }
 
-function ThemeCard({ name, author, preview, isActive, isDefault, isForceEnabled, disabled, variants, onActivate }: ThemeCardProps) {
+function ThemeCard({ name, author, preview, css, isDark, isDefaultTheme, isActive, isDefault, isForceEnabled, disabled, variants, onActivate }: ThemeCardProps) {
+  const colors = resolveThemeColors({ css, variants, isDark: !!isDark, isDefaultTheme: !!isDefaultTheme });
   return (
     <div data-search-label={name} className="relative">
       <button
@@ -122,12 +146,13 @@ function ThemeCard({ name, author, preview, isActive, isDefault, isForceEnabled,
           disabled && !isActive && 'hover:border-border'
         )}
       >
-        {/* Preview / Placeholder */}
+        {/* Preview: marketplace image when shipped, otherwise a mini app
-        <div className="w-full aspect-[16/10] rounded-lg mb-2 overflow-hidden bg-muted flex items-center justify-center">
+            mockup painted from the theme's own colour tokens. */}
+        <div className="w-full aspect-[16/10] rounded-lg mb-2 overflow-hidden bg-muted">
           {preview ? (
             <img src={preview} alt={name} className="w-full h-full object-cover" />
           ) : (
-            <Palette className="w-8 h-8 text-muted-foreground/40" />
+            <ThemePreview colors={colors} />
           )}
         </div>
 
@@ -162,3 +187,141 @@ function ThemeCard({ name, author, preview, isActive, isDefault, isForceEnabled,
     </div>
   );
 }
+
+// ─── Theme Preview ───────────────────────────────────────────
+
+interface ThemeColors {
+  background: string;
+  sidebar: string;
+  card: string;
+  primary: string;
+  primaryForeground: string;
+  foreground: string;
+  mutedForeground: string;
+  border: string;
+}
+
+// The built-in "Default" theme has no `css` of its own (it's the app's base
+// tokens); these mirror app/globals.css so its card previews accurately.
+const DEFAULT_LIGHT: ThemeColors = {
+  background: '#ffffff', sidebar: '#f8fafc', card: '#ffffff', primary: '#3b82f6',
+  primaryForeground: '#ffffff', foreground: '#0f172a', mutedForeground: '#64748b', border: '#e2e8f0',
+};
+const DEFAULT_DARK: ThemeColors = {
+  background: '#0a0a0a', sidebar: '#0a0a0a', card: '#141414', primary: '#fafafa',
+  primaryForeground: '#171717', foreground: '#fafafa', mutedForeground: '#a3a3a3', border: '#262626',
+};
+
+// Pull a handful of structural colour tokens out of a theme's compiled CSS.
+// Themes declare light tokens under `:root { … }` and dark under `.dark { … }`;
+// neither block nests braces, so a non-greedy capture is enough.
+function extractThemeColors(css: string, dark: boolean): ThemeColors | null {
+  const block = css.match(dark ? /\.dark\s*\{([\s\S]*?)\}/ : /:root\s*\{([\s\S]*?)\}/);
+  if (!block) return null;
+  const body = block[1];
+  const get = (name: string): string | undefined => {
+    const m = body.match(new RegExp(`--color-${name}\\s*:\\s*([^;]+);`));
+    return m ? m[1].trim() : undefined;
+  };
+  const background = get('background');
+  if (!background) return null;
+  return {
+    background,
+    sidebar: get('sidebar') ?? background,
+    card: get('card') ?? background,
+    primary: get('primary') ?? '#888888',
+    primaryForeground: get('primary-foreground') ?? '#ffffff',
+    foreground: get('foreground') ?? '#000000',
+    mutedForeground: get('muted-foreground') ?? '#888888',
+    border: get('border') ?? 'rgba(128,128,128,0.3)',
+  };
+}
+
+function resolveThemeColors({ css, variants, isDark, isDefaultTheme }: {
+  css?: string;
+  variants?: ('light' | 'dark')[];
+  isDark: boolean;
+  isDefaultTheme: boolean;
+}): ThemeColors {
+  // Prefer the variant matching the app's current mode; fall back to the one
+  // the theme actually ships if it's single-variant.
+  const hasLight = !variants || variants.includes('light');
+  const hasDark = !variants || variants.includes('dark');
+  const wantDark = (isDark && hasDark) || !hasLight;
+
+  if (isDefaultTheme || !css) return wantDark ? DEFAULT_DARK : DEFAULT_LIGHT;
+  return (
+    extractThemeColors(css, wantDark) ??
+    extractThemeColors(css, !wantDark) ??
+    (wantDark ? DEFAULT_DARK : DEFAULT_LIGHT)
+  );
+}
+
+// A miniature of the real three-pane mailbox - icon nav rail, folder sidebar,
+// message list (first row selected) and reading pane - painted with the
+// theme's own colours, standing in for a screenshot.
+function ThemePreview({ colors }: { colors: ThemeColors }) {
+  const rail = `1px solid ${colors.border}`;
+  return (
+    <div className="w-full h-full flex overflow-hidden" style={{ backgroundColor: colors.background }}>
+      {/* Icon nav rail */}
+      <div
+        className="flex flex-col items-center gap-1 py-1.5 shrink-0"
+        style={{ width: '9%', backgroundColor: colors.sidebar, borderRight: rail }}
+      >
+        <div className="w-1.5 h-1.5 rounded-sm" style={{ backgroundColor: colors.primary }} />
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="w-1.5 h-1.5 rounded-sm" style={{ backgroundColor: colors.mutedForeground, opacity: 0.4 }} />
+        ))}
+      </div>
+
+      {/* Folder sidebar */}
+      <div
+        className="flex flex-col gap-1 p-1.5 shrink-0"
+        style={{ width: '25%', backgroundColor: colors.sidebar, borderRight: rail }}
+      >
+        <div className="flex items-center gap-1 mb-0.5">
+          <div className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: colors.mutedForeground, opacity: 0.5 }} />
+          <div className="h-1 rounded-full flex-1" style={{ backgroundColor: colors.foreground, opacity: 0.55 }} />
+        </div>
+        {[0.8, 0.65, 0.72, 0.5].map((w, i) => (
+          <div key={i} className="flex items-center gap-1">
+            <div className="w-1 h-1 rounded-sm shrink-0" style={{ backgroundColor: colors.mutedForeground, opacity: 0.45 }} />
+            <div className="h-1 rounded-full" style={{ width: `${w * 100}%`, backgroundColor: colors.mutedForeground, opacity: 0.4 }} />
+          </div>
+        ))}
+      </div>
+
+      {/* Message list */}
+      <div className="flex flex-col shrink-0" style={{ width: '36%', backgroundColor: colors.background, borderRight: rail }}>
+        {/* Selected row */}
+        <div className="flex items-start gap-1 p-1" style={{ backgroundColor: colors.primary }}>
+          <div className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: colors.primaryForeground, opacity: 0.85 }} />
+          <div className="flex-1 flex flex-col gap-0.5">
+            <div className="h-1 rounded-full" style={{ width: '70%', backgroundColor: colors.primaryForeground, opacity: 0.9 }} />
+            <div className="h-1 rounded-full" style={{ width: '90%', backgroundColor: colors.primaryForeground, opacity: 0.55 }} />
+          </div>
+        </div>
+        {/* Unread + read rows */}
+        {[0.6, 0.7, 0.55].map((w, i) => (
+          <div key={i} className="flex items-start gap-1 p-1" style={{ borderTop: rail }}>
+            <div className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: colors.mutedForeground, opacity: 0.4 }} />
+            <div className="flex-1 flex flex-col gap-0.5">
+              <div className="h-1 rounded-full" style={{ width: `${w * 100}%`, backgroundColor: colors.foreground, opacity: i === 0 ? 0.7 : 0.5 }} />
+              <div className="h-1 rounded-full" style={{ width: '85%', backgroundColor: colors.mutedForeground, opacity: 0.35 }} />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Reading pane */}
+      <div className="flex-1 flex flex-col gap-1 p-1.5 min-w-0">
+        <div className="h-1.5 rounded-full" style={{ width: '70%', backgroundColor: colors.foreground, opacity: 0.85 }} />
+        <div className="h-1 rounded-full mb-1" style={{ width: '40%', backgroundColor: colors.mutedForeground, opacity: 0.5 }} />
+        {[0.95, 0.85, 0.9, 0.6].map((w, i) => (
+          <div key={i} className="h-1 rounded-full" style={{ width: `${w * 100}%`, backgroundColor: colors.mutedForeground, opacity: 0.3 }} />
+        ))}
+      </div>
+    </div>
+  );
+}

components/settings/vacation-settings.tsx

@@ -6,6 +6,7 @@ import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
 import { Button } from '@/components/ui/button';
 import { useVacationStore } from '@/stores/vacation-store';
 import { useAuthStore } from '@/stores/auth-store';
+import { useManagedAccountStore } from '@/stores/managed-account-store';
 import { Loader2, AlertTriangle, Eye, EyeOff } from 'lucide-react';
 import { toast } from '@/stores/toast-store';
 
@@ -19,6 +20,7 @@ export function VacationSettings() {
   const t = useTranslations('settings.vacation');
   const tNotifications = useTranslations('notifications');
   const { client } = useAuthStore();
+  const managedAccountId = useManagedAccountStore((s) => s.managedAccountId);
   const {
     isEnabled,
     fromDate,
@@ -43,9 +45,9 @@ export function VacationSettings() {
 
   useEffect(() => {
     if (client && isSupported) {
-      void fetchVacationResponse(client);
+      void fetchVacationResponse(client, managedAccountId ?? undefined);
     }
-  }, [client, isSupported, fetchVacationResponse]);
+  }, [client, isSupported, managedAccountId, fetchVacationResponse]);
 
   useEffect(() => {
     setLocalEnabled(isEnabled);
@@ -101,7 +103,7 @@ export function VacationSettings() {
         toDate: localToDate || null,
         subject: localSubject,
         textBody: localTextBody,
-      });
+      }, managedAccountId ?? undefined);
 
       toast.success(tNotifications('vacation_saved'));
     } catch (error) {

components/tour/tour-provider.tsx

@@ -6,6 +6,7 @@ import { useAuthStore } from "@/stores/auth-store";
 import { useCalendarStore } from "@/stores/calendar-store";
 import { useWebDAVStore } from "@/stores/webdav-store";
 import { useSettingsStore } from "@/stores/settings-store";
+import { usePolicyStore } from "@/stores/policy-store";
 import { getTourSteps, type TourStep } from "./tour-steps";
 import { TourOverlay } from "./tour-overlay";
 
@@ -38,6 +39,7 @@ export function TourProvider({ children }: { children: ReactNode }) {
   const pathname = usePathname();
   const { isDemoMode } = useAuthStore();
   const { supportsCalendar } = useCalendarStore();
+  const calendarEnabled = usePolicyStore((s) => s.isFeatureEnabled('calendarEnabled'));
   const { supportsWebDAV } = useWebDAVStore();
   const tourCompleted = useSettingsStore((s) => s.tourCompleted);
   const showOnboardingOnNewDevices = useSettingsStore((s) => s.showOnboardingOnNewDevices);
@@ -47,7 +49,7 @@ export function TourProvider({ children }: { children: ReactNode }) {
   const [currentStep, setCurrentStep] = useState(0);
   const [hasCompletedTour, setHasCompletedTour] = useState(false);
 
-  const steps = getTourSteps({ isDemoMode, supportsCalendar, supportsWebDAV: supportsWebDAV !== false });
+  const steps = getTourSteps({ isDemoMode, supportsCalendar: supportsCalendar && calendarEnabled, supportsWebDAV: supportsWebDAV !== false });
 
   useEffect(() => {
     // One-time migration: if the legacy per-device flag is set but the synced

components/ui/avatar.tsx

@@ -270,6 +270,15 @@ export function Avatar({ name, email, contactPhotoUri, size = "md", className, d
           alt=""
           className="w-full h-full object-cover"
           onError={handleImgError}
+          // /api/favicon returns a 1x1 transparent PNG (HTTP 200) when no real
+          // favicon exists, to avoid spamming the DevTools console with 404s.
+          // Detect that sentinel by naturalWidth and fall back to initials.
+          onLoad={(e) => {
+            const img = e.currentTarget;
+            if (isFavicon && img.naturalWidth <= 1) {
+              handleImgError();
+            }
+          }}
         />
       ) : (
         getInitials()