chore: update version to 1.4.14

Two issues prevented tasks created in Thunderbird (or other CalDAV
clients) from appearing in the task view:

1. percentComplete was not in CALENDAR_TASK_PROPERTIES, so it was
   never requested from the server and the heuristic check for it
   was always false (dead code).

2. The hasTaskFields heuristic used strict value checks:
   - 'progress' in obj && typeof obj.progress === 'string'
     → fails when Stalwart returns progress: null instead of the
       RFC 8984 default "needs-action"
   - 'due' in obj && obj.due != null
     → fails when Stalwart includes due: null for tasks without a
       DUE date (key present, value null)

RFC 8984 §5.2 defines due, progress and percentComplete as Task-only
properties — a VEVENT will never include them in a JMAP response.
Checking for key presence alone (even when null) is therefore a
reliable discriminator, regardless of the actual value.

.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "WebFetch(domain:github.com)"
+    ]
+  }
+}

.env.dev.example

@@ -1,11 +1,11 @@
-# Bulwark Webmail — Development Configuration
+# Bulwark Webmail - Development Configuration
 # Copy this file to .env.local to run with the built-in mock JMAP server.
-# No external mail server required — great for UI development and testing.
+# No external mail server required - great for UI development and testing.
 #
 # Usage:
 #   cp .env.dev.example .env.local
 #   npm run dev
-#   Open http://localhost:3000 — log in with any username/password.
+#   Open http://localhost:3000 - log in with any username/password.
 
 # =============================================================================
 # Mock JMAP Server

.env.example

@@ -1,4 +1,4 @@
-# Bulwark Webmail — Production Configuration
+# Bulwark Webmail - Production Configuration
 # Copy this file to .env.local and fill in your values.
 # For development with the built-in mock server, see .env.dev.example instead.
 
@@ -6,7 +6,7 @@
 # JMAP Server (required)
 # =============================================================================
 
-# App name displayed in the UI
+# App name displayed in the UI, browser tab title, and PWA manifest.
 APP_NAME=Bulwark Webmail
 
 # URL of your JMAP-compatible mail server (required unless ALLOW_CUSTOM_JMAP_ENDPOINT is set)
@@ -48,6 +48,8 @@ JMAP_SERVER_URL=https://your-jmap-server.com
 
 # OAuth client secret (server-side only, never exposed to the browser)
 # OAUTH_CLIENT_SECRET=your-client-secret
+# Alternatively, you can specify the path to a file containing the OAuth client secret.
+# OAUTH_CLIENT_SECRET_FILE=/oauth-client-secret
 
 # OpenID Connect issuer URL for discovery
 # OAUTH_ISSUER_URL=https://your-idp.example.com
@@ -60,6 +62,8 @@ JMAP_SERVER_URL=https://your-jmap-server.com
 # Required for both "Remember me" and settings sync features.
 # Generate with: openssl rand -base64 32
 # SESSION_SECRET=your-secret-key-here
+# Alternatively, you can specify the path to a file containing the session secret.
+# SESSION_SECRET_FILE=/session-secret
 
 # =============================================================================
 # Settings Sync
@@ -72,7 +76,7 @@ JMAP_SERVER_URL=https://your-jmap-server.com
 
 # Directory for storing encrypted settings files (default: ./data/settings).
 # For Docker, the working directory is /app, so the default resolves to
-# /app/data/settings — mount a persistent volume there:
+# /app/data/settings - mount a persistent volume there:
 #   volumes:
 #     - bulwark-settings:/app/data/settings
 # SETTINGS_DATA_DIR=./data/settings
@@ -102,41 +106,81 @@ JMAP_SERVER_URL=https://your-jmap-server.com
 # Branding (all optional)
 # =============================================================================
 
-# Custom favicon for the browser tab.
+# ---------------------------------------------------------------------------
+# App identity
+# ---------------------------------------------------------------------------
+
+# Short name for the app, used in contexts where space is limited
+# (e.g. home screen label on mobile). Defaults to APP_NAME if not set.
+# APP_SHORT_NAME=Bulwark
+
+# Description shown in the PWA manifest (displayed by the OS during install).
+# Defaults to a generic Bulwark description if not set.
+# APP_DESCRIPTION=Your personal webmail
+
+# ---------------------------------------------------------------------------
+# Icons & favicon
+# ---------------------------------------------------------------------------
+
+# Custom favicon shown in the browser tab.
 # Supported formats: SVG (recommended), PNG, ICO.
-# Recommended size: 32×32px minimum, 512×512px maximum (or SVG for best scaling).
-# Can be an absolute URL or a path relative to the public/ directory.
+# Can be an absolute URL (https://...) or a path relative to the public/ directory.
 # Defaults to the Bulwark favicon if not set.
 # FAVICON_URL=/branding/my-favicon.svg
 
-# Custom logos for the sidebar (shown in the main app after login).
+# Source image used to auto-generate PWA icons (192×192 and 512×512 PNG).
+# Supported formats: SVG (recommended for best quality) or PNG (≥512×512px recommended).
+# Can be an absolute URL (https://...) or a path relative to the public/ directory.
+# Falls back to FAVICON_URL if not set, and to the default Bulwark icons if neither is set.
+# PWA_ICON_URL=/branding/my-icon.svg
+
+# ---------------------------------------------------------------------------
+# PWA appearance
+# ---------------------------------------------------------------------------
+
+# Color applied to the browser UI chrome when the app is installed as a PWA
+# (address bar, status bar on Android). Default: #ffffff
+# PWA_THEME_COLOR=#3b82f6
+
+# Background color shown on the PWA splash screen while the app is loading.
+# Should match your app's main background color. Default: #ffffff
+# PWA_BACKGROUND_COLOR=#ffffff
+
+# ---------------------------------------------------------------------------
+# Logos
+# ---------------------------------------------------------------------------
+
+# Logos shown in the sidebar (main app, after login).
 # Supported formats: SVG (recommended), PNG, WebP.
-# Recommended size: min 24×24px, max 128×128px
+# Recommended size: min 24×24px, max 128×128px.
 # Can be absolute URLs or paths relative to the public/ directory.
 # If not set, no logo is shown in the sidebar.
 # APP_LOGO_LIGHT_URL=/branding/my-logo-color.svg
 # APP_LOGO_DARK_URL=/branding/my-logo-white.svg
 
-# Custom logo images for the login page.
+# Logos shown on the login page.
 # Supported formats: SVG (recommended), PNG, WebP.
-# Recommended size: min 32×32px, max 512×512px
+# Recommended size: min 32×32px, max 512×512px.
 # Can be absolute URLs or paths relative to the public/ directory.
-# Light mode logo (shown on light backgrounds), defaults to Bulwark logo.
+# Light mode logo (shown on light backgrounds). Defaults to the Bulwark logo.
 LOGIN_LOGO_LIGHT_URL=/branding/Bulwark_Logo_Color.svg
-#
-# Dark mode logo (shown on dark backgrounds), defaults to Bulwark white logo.
+# Dark mode logo (shown on dark backgrounds). Defaults to the Bulwark white logo.
 LOGIN_LOGO_DARK_URL=/branding/Bulwark_Logo_Color.svg
 
-# Company or organization name displayed above the version on the login page
+# ---------------------------------------------------------------------------
+# Login page
+# ---------------------------------------------------------------------------
+
+# Company name shown above the version number on the login page.
 LOGIN_COMPANY_NAME=Bulwark Webmail
 
-# URL for the imprint/legal notice link on the login page
+# URL for the imprint / legal notice link on the login page.
 # LOGIN_IMPRINT_URL=https://example.com/imprint
 
-# URL for the privacy policy link on the login page
+# URL for the privacy policy link on the login page.
 # LOGIN_PRIVACY_POLICY_URL=https://example.com/privacy
 
-# URL for the company website link on the login page
+# URL for the company website link on the login page.
 LOGIN_WEBSITE_URL=https://bulwarkmail.org
 
 # =============================================================================

.github/workflows/docker-publish.yml

@@ -21,11 +21,23 @@ on:
       - ".github/workflows/docker-publish.yml"
   workflow_dispatch:
 
-env:
-  IMAGE_NAME: ghcr.io/${{ github.repository }}
-
 jobs:
+  prepare:
+    runs-on: ubuntu-latest
+    outputs:
+      image_name: ${{ steps.set.outputs.image_name }}
+    steps:
+      - name: Set image name
+        id: set
+        run: |
+          if [ "${{ github.ref_name }}" = "main" ]; then
+            echo "image_name=ghcr.io/${{ github.repository }}-beta" >> $GITHUB_OUTPUT
+          else
+            echo "image_name=ghcr.io/${{ github.repository }}-${{ github.ref_name }}" >> $GITHUB_OUTPUT
+          fi
+
   build:
+    needs: prepare
     strategy:
       fail-fast: false
       matrix:
@@ -57,7 +69,7 @@ jobs:
         id: meta
         uses: docker/metadata-action@v5
         with:
-          images: ${{ env.IMAGE_NAME }}
+          images: ${{ needs.prepare.outputs.image_name }}
 
       - name: Build and push by digest
         id: build
@@ -66,7 +78,7 @@ jobs:
           context: .
           platforms: ${{ matrix.platform }}
           labels: ${{ steps.meta.outputs.labels }}
-          outputs: type=image,name=${{ env.IMAGE_NAME }},push-by-digest=true,name-canonical=true,push=true
+          outputs: type=image,name=${{ needs.prepare.outputs.image_name }},push-by-digest=true,name-canonical=true,push=true
           cache-from: type=gha,scope=${{ matrix.platform }}
           cache-to: type=gha,mode=max,scope=${{ matrix.platform }}
 
@@ -86,7 +98,7 @@ jobs:
 
   merge:
     runs-on: ubuntu-latest
-    needs: build
+    needs: [prepare, build]
     permissions:
       contents: read
       packages: write
@@ -113,17 +125,17 @@ jobs:
         id: meta
         uses: docker/metadata-action@v5
         with:
-          images: ${{ env.IMAGE_NAME }}
+          images: ${{ needs.prepare.outputs.image_name }}
           tags: |
-            type=raw,value={{branch}}
-            type=sha,prefix={{branch}}-
+            type=raw,value=latest
+            type=sha
 
       - name: Create manifest list and push
         working-directory: /tmp/digests
         run: |
           docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
-            $(printf '${{ env.IMAGE_NAME }}@sha256:%s ' *)
+            $(printf '${{ needs.prepare.outputs.image_name }}@sha256:%s ' *)
 
       - name: Inspect image
         run: |
-          docker buildx imagetools inspect ${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}
+          docker buildx imagetools inspect ${{ needs.prepare.outputs.image_name }}:${{ steps.meta.outputs.version }}

.github/workflows/standalone-release.yml

@@ -0,0 +1,68 @@
+name: Publish Standalone Tarball on Release
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - os: ubuntu-latest
+            arch: amd64
+          - os: ubuntu-24.04-arm
+            arch: arm64
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build standalone
+        run: npm run build
+
+      - name: Package tarball
+        env:
+          REF_NAME: ${{ github.ref_name }}
+          ARCH: ${{ matrix.arch }}
+        run: |
+          VERSION="${REF_NAME#v}"
+          TARBALL="bulwark-standalone-${VERSION}-linux-${ARCH}.tar.gz"
+
+          mkdir -p bulwark-standalone
+          cp -r .next/standalone/. bulwark-standalone/
+          cp -r .next/static bulwark-standalone/.next/static
+          cp -r public bulwark-standalone/public
+
+          tar -czf "$TARBALL" bulwark-standalone/
+          echo "TARBALL=$TARBALL" >> "$GITHUB_ENV"
+
+      - name: Upload release asset
+        if: github.event_name == 'release'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAG_NAME: ${{ github.event.release.tag_name }}
+        run: gh release upload "$TAG_NAME" "$TARBALL" --clobber
+
+      - name: Upload artifact (workflow_dispatch)
+        if: github.event_name == 'workflow_dispatch'
+        uses: actions/upload-artifact@v4
+        with:
+          name: standalone-${{ matrix.arch }}
+          path: ${{ env.TARBALL }}
+          retention-days: 7

CHANGELOG.md

@@ -1,13 +1,90 @@
 # Changelog
 
+## 1.4.14 (2026-04-16)
+
+Thank you for your donations:
+
+- _You? [Become a sponsor!](https://github.com/sponsors/bulwarkmail)_
+
+**One-time**
+
+- [@mkorthaus-private](https://github.com/mkorthaus-private)
+- [@boris22100](https://github.com/boris22100)
+
+**Monthly**
+
+- [@pr0ton11](https://github.com/pr0ton11)
+
+### Features
+
+- **Email**: Add unified mailbox across accounts and sidebar icons toggle
+- **Email**: Enhance email deletion and spam handling with improved parameterization
+- **Sieve**: Enhance external rule handling in parser and store (#201)
+- **Plugins**: Add i18n API, render hooks, and new intercept hooks to plugin system
+- **PWA**: Dynamic PWA manifest with configurable name, description, and icons
+- **PWA**: Show app name and logo in install prompt
+- **i18n**: Add Ukrainian language with flags and missing translation keys
+- **i18n**: Configurable locale prefix via `NEXT_PUBLIC_LOCALE_PREFIX`
+- **API**: Add `apiFetch` helper for mount-prefix-aware API calls
+
+### Fixes
+
+- **Calendar**: Send iMIP invitation emails when creating or updating calendar events (#192)
+- **Calendar**: RFC 5545/6047 compliance for outgoing iMIP calendar emails
+- **Calendar**: Add `calendarAddress` and `replyTo` to participants for Stalwart compatibility (#189, #192)
+- **Calendar**: Improve CalDAV task detection for external clients like Thunderbird (#84)
+- **Email**: Hide ICS attachments from attachment list when invitation banner is shown
+- **Email**: Send before storing in Sent via `onSuccessUpdateEmail` (#188)
+- **Email**: Standardize tag naming and fix unknown keyword display (#184, #185)
+- **i18n**: Skip intl middleware for paths already containing a locale prefix
+- **Docs**: Document PWA and branding env vars in `.env.example`
+- **Docs**: Use `company` consistently in `.env.example` branding comments
+
+## 1.4.13 (2026-04-12)
+
+Thank you for your donations:
+
+**One-time**
+
+- [@boris22100](https://github.com/boris22100)
+- [@mkorthaus-private](https://github.com/mkorthaus-private)
+
+**Monthly**
+
+- _You? [Become a sponsor!](https://github.com/sponsors/bulwarkmail)_
+
+### Features
+
+- **Contacts**: Store trusted senders in a dedicated JMAP address book (#176)
+- **Email**: Warn on send when attachment keyword found but no file attached (#172)
+- **Email**: Enable keyword reordering (#174) and multi-tag support per email (#173)
+- **PWA**: Add "don't remind me again" option to install prompt
+- **Auth**: Add `SESSION_SECRET_FILE` and `OAUTH_CLIENT_SECRET_FILE` environment variable support
+- **Plugins**: Add `onAvatarResolve` plugin hook
+- **Docker**: Publish main and dev branches as separate GHCR packages
+
+### Fixes
+
+- **Email**: Style links in plain text emails
+- **Email**: Seed list history entry when app initializes on an email view
+- **Email**: Remount composer on draft edit and preserve identity (#60)
+- **Contacts**: Display contact names stored in `name.full` (#179)
+- **Contacts**: Fix category dropdown blocking Save button in contact form (#177)
+- **Contacts**: Resolve TS error from optional `name.components` in vCard parser
+- **Search**: Search all folders when filtering emails by tag (#175)
+- **Auth**: Include mount prefix in SSO redirect URI when app is served under a subpath
+- **PWA**: Correct PWA icons with proper sizing, transparency, and dark/light mode support
+
 ## 1.4.12 (2026-04-09)
 
 Thank you for your donations:
 
 **One-time**
+
 - [@mkorthaus-private](https://github.com/mkorthaus-private)
 
 **Monthly**
+
 - _You? [Become a sponsor!](https://github.com/sponsors/bulwarkmail)_
 
 ### Features
@@ -403,7 +480,7 @@ Thank you for your donations:
 ### Fixes
 
 - **Context menu**: Fix "Move to folder" submenu closing when scrolling the folder list or moving the mouse to the submenu (#19)
-- **Move to folder**: Fix emails not actually moving on the server — JMAP response errors were silently ignored and shared account IDs were not resolved correctly
+- **Move to folder**: Fix emails not actually moving on the server - JMAP response errors were silently ignored and shared account IDs were not resolved correctly
 - **Dependencies**: Update tailwindcss, lucide-react, @tanstack/react-virtual, @typescript-eslint/\*, globals, @types/node
 
 ## 1.1.1 (2026-02-28)
@@ -413,7 +490,7 @@ Thank you for your donations:
 - **Email viewer**: Show/hide details toggle now stays in place when expanded instead of jumping to the bottom of the details section (#18)
 - **Email viewer**: Details toggle text is now properly translated (was hardcoded in English)
 - **Instrumentation**: Resolve Edge Runtime warnings by splitting Node.js-only code into a separate module
-- **Security**: Patch minimatch ReDoS vulnerability (CVE-2026-27903) — upgrade 9.0.6→9.0.9 and 3.1.3→3.1.5
+- **Security**: Patch minimatch ReDoS vulnerability (CVE-2026-27903) - upgrade 9.0.6→9.0.9 and 3.1.3→3.1.5
 
 ## 1.1.0 (2026-02-28)
 

README.md

@@ -13,7 +13,7 @@ Built with Next.js and the JMAP protocol.
 
 [![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.4.12-green.svg?logo=git&logoColor=white)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/version-1.4.14-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)
 
 </div>
@@ -26,16 +26,16 @@ Built with Next.js and the JMAP protocol.
 <tr>
 <td width="50%">
 
-<img src="screenshots/inbox.png" width="100%" alt="Inbox — three-pane layout with sidebar, email list, and viewer (dark mode)">
+<img src="screenshots/inbox.png" width="100%" alt="Inbox - three-pane layout with sidebar, email list, and viewer (dark mode)">
 
-**Mail** — Three-pane layout with sidebar, email list, and viewer
+**Mail** - Three-pane layout with sidebar, email list, and viewer
 
 </td>
 <td width="50%">
 
 <img src="screenshots/calendar.png" width="100%" alt="Calendar">
 
-**Calendar** — Month, week, day, and agenda views with event management
+**Calendar** - Month, week, day, and agenda views with event management
 
 </td>
 </tr>
@@ -44,14 +44,14 @@ Built with Next.js and the JMAP protocol.
 
 <img src="screenshots/contacts.png" width="100%" alt="Contacts">
 
-**Contacts** — Contact management with groups and vCard support
+**Contacts** - Contact management with groups and vCard support
 
 </td>
 <td width="50%">
 
 <img src="screenshots/files.png" width="100%" alt="File browser">
 
-**Files** — Cloud file browser with upload, preview, and folder navigation
+**Files** - Cloud file browser with upload, preview, and folder navigation
 
 </td>
 </tr>
@@ -63,16 +63,16 @@ Built with Next.js and the JMAP protocol.
 <tr>
 <td width="50%">
 
-<img src="screenshots/inbox%20whitemode.png" width="100%" alt="Inbox — light mode">
+<img src="screenshots/inbox%20whitemode.png" width="100%" alt="Inbox - light mode">
 
-**Light mode** — Full theme support with intelligent color transformation
+**Light mode** - Full theme support with intelligent color transformation
 
 </td>
 <td width="50%">
 
 <img src="screenshots/settings.png" width="100%" alt="Settings">
 
-**Settings** — Appearance, identities, filters, templates, and more
+**Settings** - Appearance, identities, filters, templates, and more
 
 </td>
 </tr>
@@ -81,7 +81,7 @@ Built with Next.js and the JMAP protocol.
 
 <img src="screenshots/login.png" width="100%" alt="Login page">
 
-**Login** — Configurable branding with OAuth2/OIDC and 2FA support
+**Login** - Configurable branding with OAuth2/OIDC and 2FA support
 
 </td>
 <td width="50%">
@@ -94,34 +94,46 @@ Built with Next.js and the JMAP protocol.
 
 ### Mail
 
-- **Read, compose, reply, reply-all, forward** with rich HTML rendering
-- **Threading** — Gmail-style inline expansion with thread navigation
-- **Draft auto-save** with discard confirmation
-- **Attachments** — upload, download, and inline preview
-- **Search** — full-text with JMAP filter panel, search chips, cross-mailbox queries, wildcard support, and OR conditions
-- **Batch operations** — multi-select with checkboxes, archive, delete, move, tag
-- **Archive modes** — archive directly or organize archived mail by year or month
+- **Read, compose, reply, reply-all, forward** with rich HTML rendering and a Tiptap-based rich text editor (inline image upload, drag-and-drop embedding)
+- **Threading** - Gmail-style inline expansion with thread navigation; optional conversation threading toggle
+- **Unified mailbox** - view emails across all accounts in a single list
+- **Draft auto-save** with discard confirmation; full draft editing with identity preservation
+- **Attachments** - upload, download, and inline preview; attachment-keyword warning if a file is forgotten
+- **Search** - full-text with JMAP filter panel, search chips, cross-mailbox queries, wildcard support, and OR conditions
+- **Batch operations** - multi-select with checkboxes, archive, delete, move, tag
+- **Archive modes** - archive directly or organize archived mail by year or month
 - **Print** emails directly from the viewer
 - **Answered/forwarded status icons** in email list and thread views
-- **Color tags/labels** and star/unstar
+- **Multi-tag per email** with color labels, reorderable tags, and drag-and-drop tag assignment
+- **Star/unstar** with configurable mark-as-read delay
 - **Virtual scrolling** for large mailboxes
 - **Quick reply** from the viewer
-- **Sender avatars** — favicon-based with negative caching for performance
+- **Hover actions** - configurable quick-action buttons on email rows with customizable placement
+- **Sender avatars** - favicon-based with negative caching for performance
 - **Recipient popover** for quick contact interaction
-- **TNEF support** — extract Outlook `winmail.dat` message bodies and attachments automatically
-- **Folder management** — create, rename, delete folders with icon picker and subfolder support
-- **Tag counts** — unread and total counts displayed in sidebar
+- **Plain text composer mode** and auto-select reply identity
+- **Reply-to addresses** support in the composer
+- **TNEF support** - extract Outlook `winmail.dat` message bodies and attachments automatically
+- **message/rfc822 unwrapping** for embedded messages
+- **Folder management** - create, rename, delete folders with icon picker and subfolder support
+- **Tag counts** - unread and total counts displayed in sidebar
+- **Browser history sync** - back/forward navigation mirrors mail view state
 
 ### Calendar
 
-- **Month, week, day, and agenda views** with mini-calendar sidebar
-- **Event hover preview** popover with details
-- **Drag-and-drop rescheduling**, click-drag creation, edge-resize (15-min snap)
-- **Recurring events** with edit/delete scope (this / this and following / all)
-- **Participant scheduling** — iTIP invitations, organizer/attendee UI, RSVP
-- **Inline calendar invitations** in email viewer — auto-detect `.ics`, RSVP, import
-- **iCalendar import** with preview and bulk create
-- **Task management** — create, edit, and track tasks with due dates, priority, and completion status
+- **Month, week, day, and agenda views** with mini-calendar sidebar and a dedicated task list view
+- **Event hover preview** popover with configurable details
+- **Drag-and-drop rescheduling**, click-drag or double-click creation, edge-resize (15-min snap)
+- **Recurring events** with edit/delete scope (this / this and following / all) and client-side recurrence expansion
+- **Participant scheduling** - iMIP invitations sent on create and update (RFC 5545/6047 compliant), organizer/attendee UI, RSVP with trust assessment
+- **Inline calendar invitations** in email viewer - auto-detect `.ics`, RSVP, import
+- **iCalendar import** with preview, bulk create, and UID deduplication
+- **iCal / webcal subscriptions** with editing and batch import
+- **Birthday calendar** - auto-generated from contacts
+- **Virtual locations** - video conference URLs as first-class event fields
+- **Task management** - create, edit, and track tasks with due dates, priority, and completion status; external CalDAV client detection (Thunderbird)
+- **Shared calendars** with visual grouping in the sidebar
+- **CalDAV discovery** with automatic calendar home resolution for multi-account setups
 - **Week numbers** in mini-calendar sidebar
 - **Notifications** with configurable sound, alert persistence, and sound picker with preview playback
 - **Real-time sync** via JMAP push
@@ -129,77 +141,103 @@ Built with Next.js and the JMAP protocol.
 ### Contacts
 
 - **Contact management** with JMAP sync (RFC 9553/9610) and local fallback
+- **Multiple address books** - create, rename, drag-and-drop between books, with editor picker in contact form
+- **Collapsible sidebar** with address book grouping and bulk operations
 - **Contact groups** with group expansion and member management
 - **vCard import/export** (RFC 6350) with duplicate detection
+- **Trusted senders** stored in a dedicated JMAP address book
 - **Autocomplete** in composer (To/Cc/Bcc)
-- **Bulk operations** — multi-select, delete, group add, export
+- **Bulk operations** - multi-select, delete, group add, export
 
 ### Filters & Automation
 
 - **Server-side email filters** via JMAP Sieve Scripts (RFC 9661)
-- **Visual rule builder** — conditions (From, To, Subject, Size, Body…) and actions (Move, Forward, Star, Discard…)
+- **Visual rule builder** - conditions (From, To, Subject, Size, Body…) and actions (Move, Forward, Star, Discard…) with an expanded visual view
+- **External rule preservation** - rules authored in other clients are displayed and preserved
 - **Raw Sieve editor** with syntax validation
 - **Vacation responder** with date range scheduling and sidebar indicator
-- **Email templates** — reusable, categorized, with placeholder auto-fill (`{{recipientName}}`, `{{date}}`, etc.)
+- **Email templates** - reusable, categorized, with placeholder auto-fill (`{{recipientName}}`, `{{date}}`, etc.)
 
 ### Files
 
 - **File browser** with JMAP FileNode cloud storage (Stalwart native)
-- **Upload and download** files with progress tracking and folder upload support
+- **Upload and download** files with progress tracking, folder upload, and streamed WebDAV PUT (no in-memory buffering)
+- **Dynamic upload limits** - respects the server-configured maximum upload size
 - **Folder navigation** with breadcrumb path and tree sidebar
 - **Grid and list views** with sorting by name, size, or date
-- **Clipboard operations** — cut, copy, paste, duplicate files
+- **Clipboard operations** - cut, copy, paste, duplicate files
 - **File preview** for images, text, audio, video, and more
 - **Favorites and recent files** for quick access
-- **Bulk operations** — multi-select, delete, move, download
+- **Bulk operations** - multi-select, delete, move, download
 
 ### Security & Privacy
 
-- **External content blocked** by default — trusted senders list for auto-load
+- **External content blocked** by default - trusted senders list for auto-load
 - **HTML sanitization** via DOMPurify with XSS prevention
-- **S/MIME** — manage certificates, sign outgoing mail, encrypt to recipients, decrypt messages, and verify signatures
+- **S/MIME** - manage certificates, sign outgoing mail, encrypt to recipients, decrypt messages, and verify signatures; self-signed certificate detection; legacy 3DES / PBE support; per-account key isolation
 - **SPF/DKIM/DMARC** status indicators
-- **OAuth2/OIDC with PKCE** for SSO (Keycloak, Authentik, or built-in), with OAuth-only mode and non-interactive SSO for embedded/iframe deployments
+- **OAuth2/OIDC with PKCE** for SSO (Keycloak, Authentik, or built-in), with OAuth-only mode, OAuth app passwords, configurable scopes, and non-interactive SSO for embedded/iframe deployments
 - **TOTP two-factor authentication**
-- **Account security panel** — manage passwords and 2FA via Stalwart admin API
-- **"Remember me"** — AES-256-GCM encrypted httpOnly cookie (opt-in)
-- **Security headers** — CSP with per-request nonce, X-Frame-Options, Referrer-Policy
+- **Account security panel** - manage passwords and 2FA via Stalwart admin API
+- **"Remember me"** - AES-256-GCM encrypted httpOnly cookie (opt-in)
+- **Security headers** - enforced CSP with per-request nonce, X-Frame-Options, Referrer-Policy; SSRF redirect validation; PDF iframe sandbox; IP spoofing prevention
+- **Plugin hardening** - dangerous-pattern detection, admin approval required, secure HTTP proxy API (no auth-header exposure)
 - **Newsletter unsubscribe** (RFC 2369)
 
 ### Interface
 
-- **Three-pane layout** — sidebar, email list, viewer with resizable columns
+- **Three-pane layout** - sidebar, email list, viewer with resizable columns
 - **Dark and light themes** with intelligent email color transformation
 - **Always-light email rendering** option for problematic HTML messages in dark theme
-- **Responsive** — desktop sidebar + mobile bottom tab bar with tablet support
-- **Keyboard shortcuts** — full navigation without a mouse
+- **Responsive** - desktop sidebar + mobile bottom tab bar with tablet support
+- **Keyboard shortcuts** - full navigation without a mouse
 - **Drag-and-drop** email organization between mailboxes and tag assignment
-- **Interactive guided tour** — onboarding walkthrough for new users
+- **Interactive guided tour** - onboarding walkthrough for new users
 - **Right-click context menus**, toast notifications with undo, form validation with shake feedback
 - **Customizable toolbar** position, custom favicon, sidebar/login logos, and login page branding
-- **Sidebar apps** — pin custom tools to the navigation rail and open them inline or in a new tab
-- **Settings sync** — preferences synchronized with the server (encrypted)
+- **Sidebar apps** - pin custom tools to the navigation rail with drag-and-drop reordering, mobile visibility toggles, and inline or new-tab launch modes
+- **Settings sync** - preferences synchronized with the server (encrypted)
 - **Storage quota** display
-- **Shared folders** — multi-account access
-- **Accessibility** — WCAG AA contrast, reduced-motion support, focus trap, screen reader live regions
+- **Version badge** in settings
+- **Focused mode** with proper viewport bounds
+- **Accessibility** - WCAG AA contrast, reduced-motion support, focus trap, screen reader live regions
 
 ### Internationalization
 
-8 languages: English · Français · 日本語 · Español · Italiano · Deutsch · Nederlands · Português
+14 languages: English · Français · 日本語 · Español · Italiano · Deutsch · Nederlands · Português · Русский · 한국어 · Polski · Latviešu · 简体中文 · Українська
 
-Automatic browser detection with persistent preference.
+Automatic browser detection with persistent preference. Configurable locale URL prefix via `NEXT_PUBLIC_LOCALE_PREFIX`.
 
 ### Identity Management
 
 - **Multiple sender identities** with per-identity signatures
-- **Identity refresh** — keep the identity manager aligned with server-side changes after edits
-- **Sub-addressing** — `user+tag@domain.com` with contextual tag suggestions
+- **Automatic identity synchronization** and refresh to keep the identity manager aligned with server-side changes
+- **Sub-addressing** - `user+tag@domain.com` with contextual tag suggestions
 - **Identity badges** in viewer and email list
 
+### Multi-Account
+
+- **Up to 5 simultaneous accounts** with instant switching and per-account session persistence
+- **Account switcher** with connection status, default account selection, and per-account logout
+- **Per-account settings** - encrypted settings storage with server-side sync
+- **Shared folders** across accounts
+- **Custom JMAP server endpoints** - optionally let users connect to any JMAP server from the login form (`ALLOW_CUSTOM_JMAP_ENDPOINT`)
+
+### Admin & Extensibility
+
+- **Stalwart admin dashboard** - sidebar access with reorganized dashboard and dedicated policy sections
+- **Plugin system** - schema-driven admin config UI, render and intercept hooks, `onAvatarResolve` and i18n APIs, calendar event action slots, forced enable/disable and managed policy enforcement
+- **Themes** - upload, enforce, and manage admin-controlled themes with ZIP bundles
+- **Extension marketplace** - browse and install plugins/themes from a configurable directory (`EXTENSION_DIRECTORY_URL`)
+- **Bundled plugins** - Jitsi Meet calendar integration
+
 ### Operations
 
-- **Automatic update check** — server logs when a newer release is available
-- **Demo mode** — try the webmail with fixture data for emails, calendars, contacts, files, filters, identities, and mailboxes — no mail server required
+- **Progressive Web App (PWA)** - installable with service worker, install prompt, and dynamic manifest (app name, description, icons, theme and background colors)
+- **Automatic update check** - server logs when a newer release is available
+- **Logging categories** with `text` or `json` formats for log aggregation
+- **Docker images** - release (`main`) and development (`dev`) channels on GHCR
+- **Demo mode** - try the webmail with fixture data for emails, calendars, contacts, files, filters, identities, and mailboxes - no mail server required
 
 ---
 
@@ -217,7 +255,7 @@ Or with Docker Compose:
 
 ```bash
 cp .env.example .env.local
-# Edit .env.local — set JMAP_SERVER_URL
+# Edit .env.local - set JMAP_SERVER_URL
 docker compose up -d
 ```
 
@@ -228,7 +266,7 @@ git clone https://github.com/bulwarkmail/webmail.git
 cd webmail
 npm install
 cp .env.example .env.local
-# Edit .env.local — set JMAP_SERVER_URL
+# Edit .env.local - set JMAP_SERVER_URL
 npm run build && npm start
 ```
 
@@ -252,7 +290,7 @@ JMAP_SERVER_URL=https://mail.example.com
 APP_NAME=My Webmail
 ```
 
-All variables are **runtime** — Docker deployments can be configured without rebuilding.
+All variables are **runtime** - Docker deployments can be configured without rebuilding.
 
 <details>
 <summary>Server Listen Address</summary>
@@ -271,6 +309,7 @@ PORT=3000            # Default listen port
 OAUTH_ENABLED=true
 OAUTH_CLIENT_ID=webmail
 OAUTH_CLIENT_SECRET=              # optional, for confidential clients
+OAUTH_CLIENT_SECRET_FILE=         # Path to a file containing the client secret
 OAUTH_ISSUER_URL=                 # optional, for external IdPs (Keycloak, Authentik)
 ```
 
@@ -279,13 +318,79 @@ Endpoints are auto-discovered via `.well-known/oauth-authorization-server` or `.
 </details>
 
 <details>
-<summary>Remember Me</summary>
+<summary>Remember Me & Settings Sync</summary>
 
 ```env
-SESSION_SECRET=your-secret-key    # Generate with: openssl rand -base64 32
+SESSION_SECRET=your-secret-key       # Generate with: openssl rand -base64 32
+SESSION_SECRET_FILE=/session-secret  # Path to a file containing the session secret
+
+SETTINGS_SYNC_ENABLED=true           # Persist encrypted user settings on the server
+SETTINGS_DATA_DIR=./data/settings    # Storage location (mount a volume in Docker)
 ```
 
 Credentials encrypted with AES-256-GCM, stored in an httpOnly cookie (30-day expiry).
+Settings sync stores per-account preferences encrypted at rest and requires `SESSION_SECRET`.
+
+</details>
+
+<details>
+<summary>Custom JMAP Endpoint</summary>
+
+```env
+ALLOW_CUSTOM_JMAP_ENDPOINT=true      # Shows a "JMAP Server" field on login
+```
+
+Lets users connect to any JMAP-compatible server. External servers must CORS-allow the webmail origin.
+
+</details>
+
+<details>
+<summary>Branding & PWA</summary>
+
+```env
+APP_NAME=My Webmail
+APP_SHORT_NAME=Webmail               # Home-screen label on mobile
+APP_DESCRIPTION=Your personal mail   # Shown during PWA install
+
+FAVICON_URL=/branding/favicon.svg
+PWA_ICON_URL=/branding/icon.svg      # Falls back to FAVICON_URL
+PWA_THEME_COLOR=#3b82f6              # Browser chrome color
+PWA_BACKGROUND_COLOR=#ffffff         # PWA splash background
+
+APP_LOGO_LIGHT_URL=/branding/logo-light.svg
+APP_LOGO_DARK_URL=/branding/logo-dark.svg
+LOGIN_LOGO_LIGHT_URL=/branding/login-light.svg
+LOGIN_LOGO_DARK_URL=/branding/login-dark.svg
+
+LOGIN_COMPANY_NAME=My Company
+LOGIN_WEBSITE_URL=https://example.com
+LOGIN_IMPRINT_URL=https://example.com/imprint
+LOGIN_PRIVACY_POLICY_URL=https://example.com/privacy
+```
+
+</details>
+
+<details>
+<summary>Extension Directory</summary>
+
+```env
+EXTENSION_DIRECTORY_URL=https://extensions.bulwarkmail.org
+```
+
+Enables the admin marketplace for browsing and installing plugins and themes.
+
+</details>
+
+<details>
+<summary>Stalwart Integration & Logging</summary>
+
+```env
+STALWART_FEATURES=true               # Password change, sieve filters, etc.
+STALWART_API_URL=https://admin.example.com  # If reverse proxy doesn't forward /api/*
+
+LOG_FORMAT=text                      # "text" or "json"
+LOG_LEVEL=info                       # "error", "warn", "info", "debug"
+```
 
 </details>
 
@@ -319,7 +424,7 @@ Credentials encrypted with AES-256-GCM, stored in an httpOnly cookie (30-day exp
 
 ## Why Stalwart?
 
-[Stalwart](https://github.com/stalwartlabs/mail-server) is a mail server written in Rust with **native JMAP support** — not IMAP/SMTP with JMAP bolted on. It handles JMAP, IMAP, SMTP, and ManageSieve in a single binary. Self-hosted, no third-party dependencies.
+[Stalwart](https://github.com/stalwartlabs/mail-server) is a mail server written in Rust with **native JMAP support** - not IMAP/SMTP with JMAP bolted on. It handles JMAP, IMAP, SMTP, and ManageSieve in a single binary. Self-hosted, no third-party dependencies.
 
 ## Contributing
 

VERSION

@@ -1 +1 @@
-1.4.12
+1.4.14

app/[locale]/auth/callback/page.tsx

@@ -35,7 +35,7 @@ function OAuthCallbackInner() {
     const savedState = sessionStorage.getItem("oauth_state");
 
     if (savedState) {
-      // Classic flow — sessionStorage has the PKCE state (same-tab OAuth)
+      // Classic flow - sessionStorage has the PKCE state (same-tab OAuth)
       if (!state || state !== savedState) {
         setError("invalid_state");
         return;
@@ -76,7 +76,7 @@ function OAuthCallbackInner() {
           setError("token_exchange_failed");
         });
     } else if (state) {
-      // Server-side SSO flow — state was stored in encrypted httpOnly cookie
+      // Server-side SSO flow - state was stored in encrypted httpOnly cookie
       const ssoPrefix = getPathPrefix(params.locale as string);
       loginWithServerSso(code, state)
         .then((success) => {

app/[locale]/calendar/page.tsx

@@ -112,6 +112,16 @@ export default function CalendarPage() {
   // Swipe navigation ref (handlers defined after navigatePrev/navigateNext)
   const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null);
 
+  // Keep detailEvent in sync with store events (e.g. after update + refetch)
+  useEffect(() => {
+    if (detailEvent) {
+      const updated = events.find(e => e.id === detailEvent.id);
+      if (updated && updated !== detailEvent) {
+        setDetailEvent(updated);
+      }
+    }
+  }, [events, detailEvent]);
+
   // Check auth on mount
   useEffect(() => {
     checkAuth().finally(() => {

app/[locale]/login/page.tsx

@@ -10,6 +10,7 @@ import { useAuthStore } from "@/stores/auth-store";
 import { useThemeStore } from "@/stores/theme-store";
 import { useShallow } from "zustand/react/shallow";
 import { useConfig } from "@/hooks/use-config";
+import { apiFetch, getPathPrefix } 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";
@@ -231,8 +232,9 @@ export default function LoginPage() {
   const startServerSideSso = useCallback(async () => {
     setOauthLoading(true);
     try {
-      const redirectUri = `${window.location.origin}/${params.locale}/auth/callback`;
-      const res = await fetch('/api/auth/sso/start', {
+      const prefix = getPathPrefix(params.locale as string);
+      const redirectUri = `${window.location.origin}${prefix}/${params.locale}/auth/callback`;
+      const res = await apiFetch('/api/auth/sso/start', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         credentials: 'include',
@@ -253,7 +255,7 @@ export default function LoginPage() {
         try {
           window.top!.location.href = authorize_url;
         } catch {
-          // Cross-origin restriction — fall back to current frame
+          // Cross-origin restriction - fall back to current frame
           window.location.href = authorize_url;
         }
       } else {
@@ -757,7 +759,7 @@ export default function LoginPage() {
                   )}
                 </Button>
                 <p className="text-center text-xs text-muted-foreground">
-                  Dev mode — logging in as dev@localhost
+                  Dev mode - logging in as dev@localhost
                 </p>
               </div>
             ) : oauthOnly ? (

app/[locale]/page.tsx

@@ -9,11 +9,14 @@ import { EmailComposer } from "@/components/email/email-composer";
 import type { ComposerDraftData } from "@/components/email/email-composer";
 import { ThreadConversationView } from "@/components/email/thread-conversation-view";
 import { MobileHeader, MobileViewerHeader } from "@/components/layout/mobile-header";
-import { ThreadGroup, Email } from "@/lib/jmap/types";
+import { ThreadGroup, Email, isUnifiedMailboxId, UNIFIED_ROLE_BY_ID } from "@/lib/jmap/types";
+import { useAccountStore } from "@/stores/account-store";
+import type { UnifiedAccountClient } from "@/lib/unified-mailbox";
 import { KeyboardShortcutsModal } from "@/components/keyboard-shortcuts-modal";
 import { useEmailStore } from "@/stores/email-store";
 import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
 import { useSettingsStore } from "@/stores/settings-store";
+import { useContactStore } from "@/stores/contact-store";
 import { useIdentityStore } from "@/stores/identity-store";
 import { useUIStore } from "@/stores/ui-store";
 import { useDeviceDetection } from "@/hooks/use-media-query";
@@ -61,6 +64,7 @@ export default function Home() {
   const [composerMode, setComposerMode] = useState<'compose' | 'reply' | 'replyAll' | 'forward'>('compose');
   const [composerDraftText, setComposerDraftText] = useState("");
   const [pendingDraft, setPendingDraft] = useState<ComposerDraftData | null>(null);
+  const [composerSessionId, setComposerSessionId] = useState(0);
   const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
   const { showAppsModal, inlineApp, loadedApps, handleManageApps, handleInlineApp, closeInlineApp, closeAppsModal } = useSidebarApps();
   const [initialCheckDone, setInitialCheckDone] = useState(() => useAuthStore.getState().isAuthenticated && !!useAuthStore.getState().client);
@@ -79,6 +83,15 @@ export default function Home() {
   const { isAuthenticated, client, logout, checkAuth, isLoading: authLoading, connectionLost, isRateLimited, rateLimitUntil } = useAuthStore();
   const { identities } = useIdentityStore();
   useIdentitySync();
+  const trustedSendersAddressBook = useSettingsStore((state) => state.trustedSendersAddressBook);
+  const { loadTrustedSendersBook, trustedSendersLoaded } = useContactStore();
+
+  // Load trusted senders address book when feature is enabled
+  useEffect(() => {
+    if (trustedSendersAddressBook && client && !trustedSendersLoaded) {
+      loadTrustedSendersBook(client);
+    }
+  }, [trustedSendersAddressBook, client, trustedSendersLoaded, loadTrustedSendersBook]);
 
   useEffect(() => {
     if (!isRateLimited || !rateLimitUntil) {
@@ -144,8 +157,54 @@ export default function Home() {
     hasMoreEmails,
     fetchTagCounts,
     fetchEmailContent,
+    isUnifiedView,
+    fetchUnifiedEmails: fetchUnifiedEmailsAction,
+    refreshUnifiedCounts,
+    exitUnifiedView,
   } = useEmailStore();
 
+  const enableUnifiedMailbox = useSettingsStore((s) => s.enableUnifiedMailbox);
+  const accounts = useAccountStore((s) => s.accounts);
+  const connectedAccountsSignature = useMemo(
+    () => accounts.filter((a) => a.isConnected).map((a) => a.id).sort().join(","),
+    [accounts],
+  );
+
+  const buildUnifiedAccounts = useCallback((): UnifiedAccountClient[] => {
+    const connected = useAccountStore.getState().accounts.filter((a) => a.isConnected);
+    const clients = useAuthStore.getState().getAllConnectedClients();
+    const result: UnifiedAccountClient[] = [];
+    for (const account of connected) {
+      const accountClient = clients.get(account.id);
+      if (!accountClient) continue;
+      result.push({
+        accountId: account.id,
+        accountLabel: account.label || account.email,
+        client: accountClient,
+        mailboxes: [],
+      });
+    }
+    return result;
+  }, []);
+
+  const populateUnifiedAccountMailboxes = useCallback(
+    async (list: UnifiedAccountClient[]): Promise<UnifiedAccountClient[]> => {
+      const populated = await Promise.all(
+        list.map(async (entry) => {
+          try {
+            const mailboxes = await entry.client.getMailboxes();
+            return { ...entry, mailboxes };
+          } catch (err) {
+            debug.error('Failed to load mailboxes for unified account', entry.accountId, err);
+            return entry;
+          }
+        }),
+      );
+      return populated;
+    },
+    [],
+  );
+
   // Browser back / forward integration. The restore handler reads the
   // latest values from a ref so we don't have to recreate the callback on
   // every render (and so the popstate listener is never stale).
@@ -197,7 +256,7 @@ export default function Home() {
 
     // Restore conversation thread (mobile only). We can clear it directly,
     // but reopening requires the thread group; if the user pressed forward
-    // to return to a thread, we silently skip — back navigation always works.
+    // to return to a thread, we silently skip - back navigation always works.
     if ((state.threadId ?? null) !== ctx.conversationThreadId) {
       if (state.threadId === null) {
         setConversationThread(null);
@@ -474,13 +533,30 @@ export default function Home() {
     };
   }, [isAuthenticated, client, mailboxes.length, fetchMailboxes, fetchEmails, fetchQuota, fetchTagCounts, handleStateChange, setPushConnected]);
 
+  // Keep unified mailbox counts in sync when the feature is enabled and more
+  // than one account is connected. Runs whenever the set of connected accounts
+  // or the primary account's mailboxes change (a proxy for "something worth
+  // recounting happened").
+  useEffect(() => {
+    if (!enableUnifiedMailbox || !isAuthenticated || !client) return;
+    const built = buildUnifiedAccounts();
+    if (built.length < 2) return;
+    populateUnifiedAccountMailboxes(built).then((populated) => {
+      refreshUnifiedCounts(populated);
+    });
+  }, [enableUnifiedMailbox, isAuthenticated, client, mailboxes, connectedAccountsSignature, buildUnifiedAccounts, populateUnifiedAccountMailboxes, refreshUnifiedCounts]);
+
   // Auto-fetch full email content when an email is auto-selected (e.g. after delete/archive)
   useEffect(() => {
     if (!selectedEmail || !client) return;
     // If the email lacks bodyValues, it was auto-selected from the list and needs full content
     if (!selectedEmail.bodyValues) {
+      const perAccountClient = isUnifiedView && selectedEmail.accountId
+        ? useAuthStore.getState().getClientForAccount(selectedEmail.accountId)
+        : undefined;
+      const fetchClient = perAccountClient ?? client;
       setLoadingEmail(true);
-      fetchEmailContent(client, selectedEmail.id).finally(() => {
+      fetchEmailContent(fetchClient, selectedEmail.id).finally(() => {
         setLoadingEmail(false);
       });
     }
@@ -642,6 +718,16 @@ export default function Home() {
     const htmlBody = draft.htmlBody?.[0]?.partId && draft.bodyValues?.[draft.htmlBody[0].partId]
       ? draft.bodyValues[draft.htmlBody[0].partId].value
       : undefined;
+
+    // Try to find the identity that matches the draft's from address to preserve it
+    const draftFromEmail = draft.from?.[0]?.email;
+    const matchedIdentity = draftFromEmail
+      ? identities.find(id => id.email === draftFromEmail)
+      : null;
+
+    // Increment session ID to force the composer to remount with fresh state,
+    // even if it was already open (e.g. right-clicking a draft while composing).
+    setComposerSessionId(id => id + 1);
     setPendingDraft({
       to: draft.to?.map(a => a.email).filter(Boolean).join(', ') || '',
       cc: draft.cc?.map(a => a.email).filter(Boolean).join(', ') || '',
@@ -650,7 +736,7 @@ export default function Home() {
       body: htmlBody || bodyText,
       showCc: (draft.cc?.length || 0) > 0,
       showBcc: (draft.bcc?.length || 0) > 0,
-      selectedIdentityId: null,
+      selectedIdentityId: matchedIdentity?.id ?? null,
       subAddressTag: '',
       mode: 'compose',
       draftId: draft.id,
@@ -672,8 +758,8 @@ export default function Home() {
     if (isMobile) setActiveView('viewer');
   };
 
-  const handleDelete = async () => {
-    if (!client || !selectedEmail) return;
+  const handleDelete = async (emailToDelete: Email | null = selectedEmail) => {
+    if (!client || !emailToDelete) return;
 
     // Check if we're currently in the trash or junk folder
     const currentMailbox = mailboxes.find(m => m.id === selectedMailbox);
@@ -692,7 +778,7 @@ export default function Home() {
       if (!confirmed) return;
 
       try {
-        await deleteEmail(client, selectedEmail.id, true);
+        await deleteEmail(client, emailToDelete.id, true);
       } catch (error) {
         console.error("Failed to permanently delete email:", error);
       }
@@ -701,7 +787,7 @@ export default function Home() {
       const trashMailbox = mailboxes.find(m => m.role === 'trash' && !m.isShared);
       if (trashMailbox) {
         try {
-          await moveToMailbox(client, selectedEmail.id, trashMailbox.id);
+          await moveToMailbox(client, emailToDelete.id, trashMailbox.id);
         } catch (error) {
           console.error("Failed to move email to trash:", error);
         }
@@ -740,7 +826,7 @@ export default function Home() {
         if (archiveMode === 'year') {
           await moveThreadToMailbox(client, emailToArchive.id, yearMailbox.id);
         } else {
-          // archiveMode === 'month' — find or create month subfolder under year
+          // archiveMode === 'month' - find or create month subfolder under year
           const yearId = yearMailbox.originalId || yearMailbox.id;
           let monthMailbox = mailboxes.find(
             m => m.name === month && m.parentId === yearId
@@ -774,10 +860,10 @@ export default function Home() {
     }
   };
 
-  const handleMarkAsSpam = async () => {
-    if (!client || !selectedEmail) return;
+  const handleMarkAsSpam = async (emailToMark: Email | null = selectedEmail) => {
+    if (!client || !emailToMark) return;
 
-    const emailId = selectedEmail.id;
+    const emailId = emailToMark.id;
 
     try {
       await markAsSpam(client, emailId);
@@ -805,11 +891,11 @@ export default function Home() {
     }
   };
 
-  const handleUndoSpam = async () => {
-    if (!client || !selectedEmail) return;
+  const handleUndoSpam = async (emailToRestore: Email | null = selectedEmail) => {
+    if (!client || !emailToRestore) return;
 
     try {
-      await undoSpam(client, selectedEmail.id);
+      await undoSpam(client, emailToRestore.id);
 
       const toastInstance = (await import('sonner')).toast;
       toastInstance.success(t('email_viewer.spam.toast_not_spam_success'));
@@ -830,16 +916,22 @@ export default function Home() {
 
       const keywords = { ...email.keywords };
 
-      // Remove old label and legacy color tags - set to false for JMAP to remove them
-      Object.keys(keywords).forEach(key => {
-        if (key.startsWith("$label:") || key.startsWith("$color:")) {
-          keywords[key] = false;
+      if (color === null) {
+        // Remove all label/color tags
+        Object.keys(keywords).forEach(key => {
+          if (key.startsWith("$label:") || key.startsWith("$color:")) {
+            keywords[key] = false;
+          }
+        });
+      } else {
+        const jmapKey = `$label:${color}`;
+        if (keywords[jmapKey] === true) {
+          // Toggle off if already active
+          keywords[jmapKey] = false;
+        } else {
+          // Add the tag without disturbing others
+          keywords[jmapKey] = true;
         }
-      });
-
-      // Add new label tag if specified (using new $label: prefix)
-      if (color) {
-        keywords[`$label:${color}`] = true;
       }
 
       // Update email keywords via JMAP
@@ -859,6 +951,32 @@ export default function Home() {
   };
 
   const handleMailboxSelect = async (mailboxId: string) => {
+    if (isUnifiedMailboxId(mailboxId)) {
+      const role = UNIFIED_ROLE_BY_ID[mailboxId];
+      if (!role) return;
+
+      selectMailbox(mailboxId);
+      selectEmail(null);
+
+      if (isMobile) {
+        setSidebarOpen(false);
+        setActiveView("list");
+      }
+      if (isTablet) {
+        setTabletListVisible(true);
+      }
+
+      const built = buildUnifiedAccounts();
+      const populated = await populateUnifiedAccountMailboxes(built);
+      await fetchUnifiedEmailsAction(populated, role);
+      refreshUnifiedCounts(populated);
+      return;
+    }
+
+    if (isUnifiedView) {
+      exitUnifiedView();
+    }
+
     selectMailbox(mailboxId);
     selectEmail(null); // Clear selected email when switching mailboxes
 
@@ -942,6 +1060,7 @@ export default function Home() {
 
   const handleSearch = async (query: string) => {
     if (!client) return;
+    if (isUnifiedView) return;
     setSearchQuery(query);
     if (!isFilterEmpty(searchFilters)) {
       await advancedSearch(client);
@@ -960,6 +1079,7 @@ export default function Home() {
 
   const handleAdvancedSearch = async () => {
     if (!client) return;
+    if (isUnifiedView) return;
     await advancedSearch(client);
   };
 
@@ -969,9 +1089,9 @@ export default function Home() {
       clearTimeout(advancedSearchDebounceRef.current);
     }
     advancedSearchDebounceRef.current = setTimeout(() => {
-      if (client) advancedSearch(client);
+      if (client && !isUnifiedView) advancedSearch(client);
     }, 300);
-  }, [client, advancedSearch]);
+  }, [client, advancedSearch, isUnifiedView]);
 
   useEffect(() => {
     return () => {
@@ -1100,13 +1220,29 @@ export default function Home() {
 
     // Fetch the full content
     try {
-      // Find selected mailbox to determine accountId (for shared folders)
-      const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
-      // Only pass accountId for shared mailboxes
-      const accountId = mailbox?.isShared ? mailbox.accountId : undefined;
+      // In unified view each email carries its own accountId. Use that
+      // account's client so we fetch from the server that actually owns it.
+      const listEmail = emails.find(e => e.id === email.id);
+      const emailAccountId = isUnifiedView ? listEmail?.accountId : undefined;
+      const perAccountClient = emailAccountId
+        ? useAuthStore.getState().getClientForAccount(emailAccountId)
+        : undefined;
+      const fetchClient = perAccountClient ?? client;
 
-      const fullEmail = await client.getEmail(email.id, accountId);
+      // For shared folders on the primary client, we still need to pass the
+      // shared account's id. In unified view we use the per-account client
+      // directly, so no explicit accountId is needed.
+      const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
+      const accountId = perAccountClient
+        ? undefined
+        : mailbox?.isShared ? mailbox.accountId : undefined;
+
+      const fullEmail = await fetchClient.getEmail(email.id, accountId);
       if (fullEmail) {
+        if (emailAccountId) {
+          fullEmail.accountId = emailAccountId;
+          fullEmail.accountLabel = listEmail?.accountLabel;
+        }
         selectEmail(fullEmail);
         // Mark-as-read logic is now handled by useEffect
       }
@@ -1119,7 +1255,7 @@ export default function Home() {
 
   // Handle back navigation from viewer on mobile.
   // Delegate to the browser history stack so this button is equivalent to
-  // the OS back button / mouse back button — popstate then restores the
+  // the OS back button / mouse back button - popstate then restores the
   // previous snapshot via handleNavRestore. The viewer is only reachable
   // from a state that pushed history, so back() always lands on an app entry.
   const handleMobileBack = () => {
@@ -1370,6 +1506,8 @@ export default function Home() {
                       className={cn("pl-9 h-9", searchQuery && "pr-8")}
                       data-search-input
                       data-tour="search-input"
+                      disabled={isUnifiedView}
+                      title={isUnifiedView ? t("unified_mailbox.search_unavailable") : undefined}
                     />
                     {searchQuery && (
                       <button
@@ -1385,13 +1523,15 @@ export default function Home() {
                   <button
                     type="button"
                     onClick={toggleAdvancedSearch}
+                    disabled={isUnifiedView}
                     className={cn(
                       "relative flex-shrink-0 p-2 rounded-md transition-colors",
+                      isUnifiedView && "opacity-50 cursor-not-allowed",
                       isAdvancedSearchOpen || activeFilterCount(searchFilters) > 0
                         ? "bg-primary/10 text-primary"
                         : "text-muted-foreground hover:text-foreground hover:bg-muted"
                     )}
-                    title={t("advanced_search.toggle_filters")}
+                    title={isUnifiedView ? t("unified_mailbox.search_unavailable") : t("advanced_search.toggle_filters")}
                   >
                     <Filter className="w-4 h-4" />
                     {!isAdvancedSearchOpen && activeFilterCount(searchFilters) > 0 && (
@@ -1575,8 +1715,7 @@ export default function Home() {
                   }
                 }}
                 onDelete={async (email) => {
-                  selectEmail(email);
-                  await handleDelete();
+                  await handleDelete(email);
                 }}
                 onArchive={async (email) => {
                   await handleArchive(email);
@@ -1590,12 +1729,10 @@ export default function Home() {
                   }
                 }}
                 onMarkAsSpam={async (email) => {
-                  selectEmail(email);
-                  await handleMarkAsSpam();
+                  await handleMarkAsSpam(email);
                 }}
                 onUndoSpam={async (email) => {
-                  selectEmail(email);
-                  await handleUndoSpam();
+                  await handleUndoSpam(email);
                 }}
                 onEditDraft={(email) => {
                   handleEditDraft(email);
@@ -1656,8 +1793,9 @@ export default function Home() {
                 }}
               >
                 <EmailComposer
+                  key={composerSessionId}
                   mode={pendingDraft?.mode ?? composerMode}
-                  replyTo={pendingDraft?.replyTo ?? (selectedEmail ? {
+                  replyTo={pendingDraft !== null ? pendingDraft.replyTo : (selectedEmail ? {
                     from: selectedEmail.from,
                     replyToAddresses: selectedEmail.replyTo,
                     to: selectedEmail.to,

app/admin/auth/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { Save, Loader2, RotateCcw } from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
 
 interface ConfigEntry {
   value: unknown;
@@ -19,7 +20,7 @@ export default function AdminAuthPage() {
 
   async function fetchConfig() {
     setLoading(true);
-    const res = await fetch('/api/admin/config');
+    const res = await apiFetch('/api/admin/config');
     if (res.ok) setConfig(await res.json());
     setLoading(false);
   }
@@ -39,7 +40,7 @@ export default function AdminAuthPage() {
     setSaving(true);
     setMessage(null);
 
-    const res = await fetch('/api/admin/config', {
+    const res = await apiFetch('/api/admin/config', {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(edits),
@@ -57,7 +58,7 @@ export default function AdminAuthPage() {
   }
 
   async function handleRevert(key: string) {
-    const res = await fetch('/api/admin/config', {
+    const res = await apiFetch('/api/admin/config', {
       method: 'DELETE',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ key }),

app/admin/branding/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState } from 'react';
 import { Save, Loader2, RotateCcw, ImageIcon, Upload, Trash2 } from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
 
 interface ConfigEntry {
   value: unknown;
@@ -38,7 +39,7 @@ export default function AdminBrandingPage() {
 
   async function fetchConfig() {
     setLoading(true);
-    const res = await fetch('/api/admin/config');
+    const res = await apiFetch('/api/admin/config');
     if (res.ok) setConfig(await res.json());
     setLoading(false);
   }
@@ -58,7 +59,7 @@ export default function AdminBrandingPage() {
     setSaving(true);
     setMessage(null);
 
-    const res = await fetch('/api/admin/config', {
+    const res = await apiFetch('/api/admin/config', {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(edits),
@@ -83,7 +84,7 @@ export default function AdminBrandingPage() {
     formData.append('file', file);
     formData.append('slot', slot);
 
-    const res = await fetch('/api/admin/branding', {
+    const res = await apiFetch('/api/admin/branding', {
       method: 'POST',
       body: formData,
     });
@@ -112,7 +113,7 @@ export default function AdminBrandingPage() {
   async function handleDeleteUpload(slot: string) {
     setMessage(null);
 
-    const res = await fetch('/api/admin/branding', {
+    const res = await apiFetch('/api/admin/branding', {
       method: 'DELETE',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ slot }),
@@ -133,7 +134,7 @@ export default function AdminBrandingPage() {
   }
 
   async function handleRevert(key: string) {
-    const res = await fetch('/api/admin/config', {
+    const res = await apiFetch('/api/admin/config', {
       method: 'DELETE',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ key }),

app/admin/change-password/page.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { Lock } from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
 
 export default function ChangePasswordPage() {
   const router = useRouter();
@@ -28,7 +29,7 @@ export default function ChangePasswordPage() {
     }
 
     setLoading(true);
-    const res = await fetch('/api/admin/change-password', {
+    const res = await apiFetch('/api/admin/change-password', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ currentPassword, newPassword }),

app/admin/layout.tsx

@@ -27,6 +27,7 @@ import { useThemeStore } from '@/stores/theme-store';
 import { getActiveAccountSlotHeaders } from '@/lib/auth/active-account-slot';
 
 import { useAuthStore } from '@/stores/auth-store';
+import { apiFetch } from '@/lib/browser-navigation';
 
 const NAV_GROUPS = [
   {
@@ -85,7 +86,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
   async function checkAuth() {
     try {
       const jmapHeaders = getJmapHeaders();
-      const res = await fetch('/api/admin/auth', { headers: jmapHeaders });
+      const res = await apiFetch('/api/admin/auth', { headers: jmapHeaders });
       const data = await res.json();
 
       const stalwartAdmin = data.stalwartAdmin === true;
@@ -104,7 +105,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
 
       // If Stalwart admin but not yet authenticated, auto-login
       if (stalwartAdmin) {
-        const loginRes = await fetch('/api/admin/auth', {
+        const loginRes = await apiFetch('/api/admin/auth', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json', ...jmapHeaders },
           body: JSON.stringify({ stalwartAuth: true }),
@@ -122,7 +123,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
   }
 
   async function handleLogout() {
-    await fetch('/api/admin/auth', { method: 'DELETE' });
+    await apiFetch('/api/admin/auth', { method: 'DELETE' });
     router.replace('/admin/login');
   }
 

app/admin/login/page.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { Shield } from 'lucide-react';
 import { useConfig } from '@/hooks/use-config';
 import { useThemeStore } from '@/stores/theme-store';
+import { apiFetch } from '@/lib/browser-navigation';
 
 export default function AdminLoginPage() {
   const router = useRouter();
@@ -21,7 +22,7 @@ export default function AdminLoginPage() {
     setLoading(true);
 
     try {
-      const res = await fetch('/api/admin/auth', {
+      const res = await apiFetch('/api/admin/auth', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ password }),

app/admin/logs/page.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState, useCallback } from 'react';
 import { RefreshCw } from 'lucide-react';
 import type { AuditEntry } from '@/lib/admin/types';
+import { apiFetch } from '@/lib/browser-navigation';
 
 export default function AdminLogsPage() {
   const [entries, setEntries] = useState<AuditEntry[]>([]);
@@ -17,7 +18,7 @@ export default function AdminLogsPage() {
     const params = new URLSearchParams({ page: String(page), limit: String(limit) });
     if (actionFilter) params.set('action', actionFilter);
 
-    const res = await fetch(`/api/admin/audit?${params}`);
+    const res = await apiFetch(`/api/admin/audit?${params}`);
     if (res.ok) {
       const data = await res.json();
       setEntries(data.entries || []);
@@ -138,7 +139,7 @@ export default function AdminLogsPage() {
 }
 
 function formatDetail(detail: Record<string, unknown>): string {
-  if (!detail || Object.keys(detail).length === 0) return '—';
+  if (!detail || Object.keys(detail).length === 0) return '-';
   if (detail.reason) return String(detail.reason);
   if (detail.key) return `${detail.key}: ${JSON.stringify(detail.old)} → ${JSON.stringify(detail.new)}`;
   if (detail.changes && Array.isArray(detail.changes)) {

app/admin/marketplace/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState, useCallback } from 'react';
 import { Search, Download, Check, Loader2, Store, Puzzle, SwatchBook, Star, Filter } from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
 
 interface Extension {
   slug: string;
@@ -57,7 +58,7 @@ export default function AdminMarketplacePage() {
       params.set('perPage', String(perPage));
       params.set('sort', 'newest');
 
-      const res = await fetch(`/api/admin/marketplace?${params}`);
+      const res = await apiFetch(`/api/admin/marketplace?${params}`);
       if (!res.ok) {
         const data = await res.json().catch(() => ({}));
         setError(data.error || 'Failed to connect to extension directory');
@@ -95,7 +96,7 @@ export default function AdminMarketplacePage() {
     setMessage(null);
 
     try {
-      const res = await fetch('/api/admin/marketplace', {
+      const res = await apiFetch('/api/admin/marketplace', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
@@ -116,7 +117,7 @@ export default function AdminMarketplacePage() {
         setMessage({ type: 'error', text: data.error || 'Installation failed' });
       }
     } catch {
-      setMessage({ type: 'error', text: 'Installation failed — network error' });
+      setMessage({ type: 'error', text: 'Installation failed - network error' });
     } finally {
       setInstalling(null);
     }

app/admin/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { AlertTriangle } from 'lucide-react';
 import { SettingsSection, SettingItem, ToggleSwitch } from '@/components/settings/settings-section';
 import type { AuditEntry } from '@/lib/admin/types';
+import { apiFetch } from '@/lib/browser-navigation';
 
 interface AdminStatus {
   enabled: boolean;
@@ -38,13 +39,13 @@ export default function AdminDashboardPage() {
 
   async function fetchDashboardData() {
     const [statusRes, auditRes, configRes, adminConfigRes, pluginRes, themeRes, policyRes] = await Promise.all([
-      fetch('/api/admin/auth'),
-      fetch('/api/admin/audit?limit=10'),
-      fetch('/api/config'),
-      fetch('/api/admin/config'),
-      fetch('/api/admin/plugins').catch(() => null),
-      fetch('/api/admin/themes').catch(() => null),
-      fetch('/api/admin/policy').catch(() => null),
+      apiFetch('/api/admin/auth'),
+      apiFetch('/api/admin/audit?limit=10'),
+      apiFetch('/api/config'),
+      apiFetch('/api/admin/config'),
+      apiFetch('/api/admin/plugins').catch(() => null),
+      apiFetch('/api/admin/themes').catch(() => null),
+      apiFetch('/api/admin/policy').catch(() => null),
     ]);
 
     if (statusRes.ok) setStatus(await statusRes.json());
@@ -75,7 +76,7 @@ export default function AdminDashboardPage() {
 
     if (configData?.jmapServerUrl) {
       try {
-        const jmapRes = await fetch('/api/config');
+        const jmapRes = await apiFetch('/api/config');
         setJmapHealth(jmapRes.ok ? 'ok' : 'error');
       } catch {
         setJmapHealth('error');
@@ -98,8 +99,8 @@ export default function AdminDashboardPage() {
     setWarnings(w);
   }
 
-  const jmapUrl = config?.jmapServerUrl || '—';
-  const jmapHostname = jmapUrl !== '—' ? (() => { try { return new URL(jmapUrl).hostname; } catch { return jmapUrl; } })() : '—';
+  const jmapUrl = config?.jmapServerUrl || '-';
+  const jmapHostname = jmapUrl !== '-' ? (() => { try { return new URL(jmapUrl).hostname; } catch { return jmapUrl; } })() : '-';
 
   return (
     <div className="max-w-3xl space-y-8">
@@ -126,9 +127,9 @@ export default function AdminDashboardPage() {
       {/* Server Info */}
       <SettingsSection title="Server" description="Application and connection details">
         <SettingItem label="Application">
-          <span className="text-sm text-foreground">{config?.appName || '—'}</span>
+          <span className="text-sm text-foreground">{config?.appName || '-'}</span>
         </SettingItem>
-        <SettingItem label="JMAP Server" description={jmapUrl !== '—' ? jmapUrl : undefined}>
+        <SettingItem label="JMAP Server" description={jmapUrl !== '-' ? jmapUrl : undefined}>
           <span className="text-sm text-foreground">{jmapHostname}</span>
         </SettingItem>
         <SettingItem label="JMAP Connection">

app/admin/plugins/[id]/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
 import { Puzzle, ArrowLeft, Loader2, Eye, EyeOff } from 'lucide-react';
 import Link from 'next/link';
+import { apiFetch } from '@/lib/browser-navigation';
 
 interface ConfigField {
   type: 'string' | 'secret' | 'boolean' | 'number' | 'select';
@@ -68,8 +69,8 @@ export default function PluginConfigPage() {
     setLoading(true);
     try {
       const [pluginsRes, configRes] = await Promise.all([
-        fetch('/api/admin/plugins'),
-        fetch(`/api/admin/plugins/${encodeURIComponent(pluginId)}/config`),
+        apiFetch('/api/admin/plugins'),
+        apiFetch(`/api/admin/plugins/${encodeURIComponent(pluginId)}/config`),
       ]);
 
       if (pluginsRes.ok) {
@@ -117,7 +118,7 @@ export default function PluginConfigPage() {
 
         // Delete if clearing a non-required field
         if (!newVal && !field.required) {
-          const res = await fetch(`/api/admin/plugins/${encodeURIComponent(pluginId)}/config`, {
+          const res = await apiFetch(`/api/admin/plugins/${encodeURIComponent(pluginId)}/config`, {
             method: 'DELETE',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ key }),
@@ -130,7 +131,7 @@ export default function PluginConfigPage() {
           continue;
         }
 
-        const res = await fetch(`/api/admin/plugins/${encodeURIComponent(pluginId)}/config`, {
+        const res = await apiFetch(`/api/admin/plugins/${encodeURIComponent(pluginId)}/config`, {
           method: 'PUT',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ key, value }),
@@ -230,7 +231,7 @@ export default function PluginConfigPage() {
                     onChange={(e) => setFormValues(prev => ({ ...prev, [key]: e.target.value }))}
                     className="w-full h-9 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                   >
-                    <option value="">— Select —</option>
+                    <option value="">- Select -</option>
                     {field.options.map(opt => (
                       <option key={opt.value} value={opt.value}>{opt.label}</option>
                     ))}

app/admin/plugins/page.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { Upload, Trash2, Power, PowerOff, AlertTriangle, Loader2, Package, Save, Shield, Lock, LockOpen, Settings } from 'lucide-react';
 import type { SettingsPolicy } from '@/lib/admin/types';
 import { DEFAULT_POLICY } from '@/lib/admin/types';
+import { apiFetch } from '@/lib/browser-navigation';
 
 interface PluginEntry {
   id: string;
@@ -34,7 +35,7 @@ export default function AdminPluginsPage() {
 
   async function fetchPolicy() {
     try {
-      const res = await fetch('/api/admin/policy');
+      const res = await apiFetch('/api/admin/policy');
       if (res.ok) {
         const data = await res.json();
         setPolicy(data);
@@ -73,7 +74,7 @@ export default function AdminPluginsPage() {
     setSavingPolicy(true);
     setMessage(null);
     try {
-      const res = await fetch('/api/admin/policy', {
+      const res = await apiFetch('/api/admin/policy', {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(policy),
@@ -95,7 +96,7 @@ export default function AdminPluginsPage() {
   async function fetchPlugins() {
     setLoading(true);
     try {
-      const res = await fetch('/api/admin/plugins');
+      const res = await apiFetch('/api/admin/plugins');
       if (res.ok) setPlugins(await res.json());
     } finally {
       setLoading(false);
@@ -113,7 +114,7 @@ export default function AdminPluginsPage() {
     formData.append('file', file);
 
     try {
-      const res = await fetch('/api/admin/plugins', {
+      const res = await apiFetch('/api/admin/plugins', {
         method: 'POST',
         body: formData,
       });
@@ -136,7 +137,7 @@ export default function AdminPluginsPage() {
 
   async function togglePlugin(id: string, enabled: boolean) {
     setMessage(null);
-    const res = await fetch('/api/admin/plugins', {
+    const res = await apiFetch('/api/admin/plugins', {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ id, enabled }),
@@ -156,7 +157,7 @@ export default function AdminPluginsPage() {
     const body: Record<string, unknown> = { id, forceEnabled };
     if (forceEnabled) body.enabled = true;
 
-    const res = await fetch('/api/admin/plugins', {
+    const res = await apiFetch('/api/admin/plugins', {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(body),
@@ -190,7 +191,7 @@ export default function AdminPluginsPage() {
     }
     let failed = 0;
     for (const p of disabled) {
-      const res = await fetch('/api/admin/plugins', {
+      const res = await apiFetch('/api/admin/plugins', {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ id: p.id, enabled: true }),
@@ -216,7 +217,7 @@ export default function AdminPluginsPage() {
     }
     let failed = 0;
     for (const p of enabled) {
-      const res = await fetch('/api/admin/plugins', {
+      const res = await apiFetch('/api/admin/plugins', {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ id: p.id, enabled: false }),
@@ -236,7 +237,7 @@ export default function AdminPluginsPage() {
     if (!confirm(`Remove plugin "${name}"? This cannot be undone.`)) return;
 
     setMessage(null);
-    const res = await fetch('/api/admin/plugins', {
+    const res = await apiFetch('/api/admin/plugins', {
       method: 'DELETE',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ id }),

app/admin/policy/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { Save, Loader2, Lock } from 'lucide-react';
 import type { SettingsPolicy, FeatureGates } from '@/lib/admin/types';
 import { DEFAULT_FEATURE_GATES, DEFAULT_POLICY } from '@/lib/admin/types';
+import { apiFetch } from '@/lib/browser-navigation';
 
 // Feature gates managed on their own admin pages (excluded from this list)
 const EXCLUDED_FEATURE_GATES: (keyof FeatureGates)[] = ['pluginsEnabled', 'pluginsUploadEnabled', 'themesEnabled', 'userThemesEnabled'];
@@ -54,7 +55,7 @@ export default function AdminPolicyPage() {
   async function fetchPolicy() {
     setLoading(true);
     try {
-      const res = await fetch('/api/admin/policy');
+      const res = await apiFetch('/api/admin/policy');
       if (res.ok) {
         const data = await res.json();
         setPolicy(data);
@@ -106,7 +107,7 @@ export default function AdminPolicyPage() {
     setSaving(true);
     setMessage(null);
 
-    const res = await fetch('/api/admin/policy', {
+    const res = await apiFetch('/api/admin/policy', {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(policy),

app/admin/settings/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { Save, RotateCcw, Loader2 } from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
 
 interface ConfigEntry {
   value: unknown;
@@ -21,7 +22,7 @@ export default function AdminSettingsPage() {
 
   async function fetchConfig() {
     setLoading(true);
-    const res = await fetch('/api/admin/config');
+    const res = await apiFetch('/api/admin/config');
     if (res.ok) {
       setConfig(await res.json());
     }
@@ -43,7 +44,7 @@ export default function AdminSettingsPage() {
     setSaving(true);
     setMessage(null);
 
-    const res = await fetch('/api/admin/config', {
+    const res = await apiFetch('/api/admin/config', {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(edits),
@@ -61,7 +62,7 @@ export default function AdminSettingsPage() {
   }
 
   async function handleRevert(key: string) {
-    const res = await fetch('/api/admin/config', {
+    const res = await apiFetch('/api/admin/config', {
       method: 'DELETE',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ key }),

app/admin/themes/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState, useRef } from 'react';
 import { Upload, Trash2, Power, PowerOff, Loader2, Palette, Save, Shield, Lock, LockOpen } from 'lucide-react';
 import type { SettingsPolicy } from '@/lib/admin/types';
 import { DEFAULT_POLICY, DEFAULT_THEME_POLICY } from '@/lib/admin/types';
+import { apiFetch } from '@/lib/browser-navigation';
 
 const BUILTIN_THEME_OPTIONS = [
   { id: 'builtin-nord', name: 'Nord' },
@@ -38,7 +39,7 @@ export default function AdminThemesPage() {
 
   async function fetchPolicy() {
     try {
-      const res = await fetch('/api/admin/policy');
+      const res = await apiFetch('/api/admin/policy');
       if (res.ok) {
         const data = await res.json();
         setPolicy({
@@ -122,7 +123,7 @@ export default function AdminThemesPage() {
     setSavingPolicy(true);
     setMessage(null);
     try {
-      const res = await fetch('/api/admin/policy', {
+      const res = await apiFetch('/api/admin/policy', {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(policy),
@@ -144,7 +145,7 @@ export default function AdminThemesPage() {
   async function fetchThemes() {
     setLoading(true);
     try {
-      const res = await fetch('/api/admin/themes');
+      const res = await apiFetch('/api/admin/themes');
       if (res.ok) setThemes(await res.json());
     } finally {
       setLoading(false);
@@ -162,7 +163,7 @@ export default function AdminThemesPage() {
     formData.append('file', file);
 
     try {
-      const res = await fetch('/api/admin/themes', {
+      const res = await apiFetch('/api/admin/themes', {
         method: 'POST',
         body: formData,
       });
@@ -185,7 +186,7 @@ export default function AdminThemesPage() {
 
   async function toggleTheme(id: string, enabled: boolean) {
     setMessage(null);
-    const res = await fetch('/api/admin/themes', {
+    const res = await apiFetch('/api/admin/themes', {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ id, enabled }),
@@ -204,7 +205,7 @@ export default function AdminThemesPage() {
     const body: Record<string, unknown> = { id, forceEnabled };
     if (forceEnabled) body.enabled = true;
 
-    const res = await fetch('/api/admin/themes', {
+    const res = await apiFetch('/api/admin/themes', {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(body),
@@ -237,7 +238,7 @@ export default function AdminThemesPage() {
     }
     let failed = 0;
     for (const t of disabled) {
-      const res = await fetch('/api/admin/themes', {
+      const res = await apiFetch('/api/admin/themes', {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ id: t.id, enabled: true }),
@@ -262,7 +263,7 @@ export default function AdminThemesPage() {
     }
     let failed = 0;
     for (const t of enabled) {
-      const res = await fetch('/api/admin/themes', {
+      const res = await apiFetch('/api/admin/themes', {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ id: t.id, enabled: false }),
@@ -282,7 +283,7 @@ export default function AdminThemesPage() {
     if (!confirm(`Remove theme "${name}"? This cannot be undone.`)) return;
 
     setMessage(null);
-    const res = await fetch('/api/admin/themes', {
+    const res = await apiFetch('/api/admin/themes', {
       method: 'DELETE',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ id }),

app/api/admin/audit/route.ts

@@ -4,7 +4,7 @@ import { readAuditLog } from '@/lib/admin/audit';
 import { logger } from '@/lib/logger';
 
 /**
- * GET /api/admin/audit — Get paginated audit log entries (admin-protected)
+ * GET /api/admin/audit - Get paginated audit log entries (admin-protected)
  */
 export async function GET(request: NextRequest) {
   try {

app/api/admin/auth/route.ts

@@ -30,7 +30,7 @@ async function checkStalwartAdmin(request: NextRequest): Promise<boolean> {
 }
 
 /**
- * POST /api/admin/auth — Login
+ * POST /api/admin/auth - Login
  */
 export async function POST(request: NextRequest) {
   try {
@@ -92,7 +92,7 @@ export async function POST(request: NextRequest) {
 }
 
 /**
- * GET /api/admin/auth — Check session status
+ * GET /api/admin/auth - Check session status
  * Also checks if the user is a Stalwart admin (admin panel enabled even without password).
  */
 export async function GET(request: NextRequest) {
@@ -136,7 +136,7 @@ export async function GET(request: NextRequest) {
 }
 
 /**
- * DELETE /api/admin/auth — Logout
+ * DELETE /api/admin/auth - Logout
  */
 export async function DELETE(request: NextRequest) {
   try {

app/api/admin/branding/[filename]/route.ts

@@ -14,7 +14,7 @@ const MIME_TYPES: Record<string, string> = {
 };
 
 /**
- * GET /api/admin/branding/[filename] — Serve uploaded branding images
+ * GET /api/admin/branding/[filename] - Serve uploaded branding images
  *
  * This endpoint is public (no admin auth) so browsers can load images.
  * Only files in the branding directory are served; directory traversal is prevented.

app/api/admin/branding/route.ts

@@ -33,7 +33,7 @@ function sanitizeFilename(name: string): string {
 }
 
 /**
- * POST /api/admin/branding — Upload a branding image file
+ * POST /api/admin/branding - Upload a branding image file
  *
  * Expects multipart/form-data with:
  *   - file: the image file
@@ -105,7 +105,7 @@ export async function POST(request: NextRequest) {
 }
 
 /**
- * DELETE /api/admin/branding — Remove an uploaded branding file
+ * DELETE /api/admin/branding - Remove an uploaded branding file
  *
  * Expects JSON body: { slot: string }
  */

app/api/admin/change-password/route.ts

@@ -5,7 +5,7 @@ import { auditLog } from '@/lib/admin/audit';
 import { logger } from '@/lib/logger';
 
 /**
- * POST /api/admin/change-password — Change admin password
+ * POST /api/admin/change-password - Change admin password
  */
 export async function POST(request: NextRequest) {
   try {

app/api/admin/config/route.ts

@@ -6,7 +6,7 @@ import { CONFIG_ENV_MAP } from '@/lib/admin/types';
 import { logger } from '@/lib/logger';
 
 /**
- * GET /api/admin/config — Get full config with sources (admin-protected)
+ * GET /api/admin/config - Get full config with sources (admin-protected)
  */
 export async function GET() {
   try {
@@ -26,7 +26,7 @@ export async function GET() {
 }
 
 /**
- * PATCH /api/admin/config — Update config overrides (admin-protected)
+ * PATCH /api/admin/config - Update config overrides (admin-protected)
  */
 export async function PATCH(request: NextRequest) {
   try {
@@ -64,7 +64,7 @@ export async function PATCH(request: NextRequest) {
 }
 
 /**
- * DELETE /api/admin/config — Remove admin override for a key (revert to env/default)
+ * DELETE /api/admin/config - Remove admin override for a key (revert to env/default)
  */
 export async function DELETE(request: NextRequest) {
   try {

app/api/admin/marketplace/route.ts

@@ -17,7 +17,7 @@ import { sanitizeThemeCSS, validateThemeCSSSafety } from '@/lib/theme-loader';
 const DIRECTORY_URL = process.env.EXTENSION_DIRECTORY_URL || 'http://localhost:3001';
 
 /**
- * GET /api/admin/marketplace — Search/browse the extension directory
+ * GET /api/admin/marketplace - Search/browse the extension directory
  * Proxies to the extension directory API
  */
 export async function GET(request: NextRequest) {
@@ -75,7 +75,7 @@ export async function GET(request: NextRequest) {
 }
 
 /**
- * POST /api/admin/marketplace — Install an extension from the directory
+ * POST /api/admin/marketplace - Install an extension from the directory
  * Body: { slug: string, version: string, type: 'plugin' | 'theme' }
  */
 export async function POST(request: NextRequest) {

app/api/admin/plugins/[id]/bundle/route.ts

@@ -2,7 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import { getPluginBundle, getPlugin } from '@/lib/admin/plugin-registry';
 
 /**
- * GET /api/admin/plugins/[id]/bundle — Serve plugin JS bundle
+ * GET /api/admin/plugins/[id]/bundle - Serve plugin JS bundle
  *
  * Public endpoint so the client-side plugin loader can fetch bundles.
  * Only serves plugins that exist in the registry and are enabled.

app/api/admin/plugins/[id]/config/route.ts

@@ -4,7 +4,7 @@ import { getPluginConfig, setPluginConfig, deletePluginConfigKey } from '@/lib/a
 import { requireAdminAuth } from '@/lib/admin/session';
 
 /**
- * GET /api/admin/plugins/[id]/config — Read all config for a plugin
+ * GET /api/admin/plugins/[id]/config - Read all config for a plugin
  *
  * Returns the full config object for admin-configured plugin settings.
  * This endpoint is accessible from the client-side plugin API.
@@ -35,7 +35,7 @@ export async function GET(
 }
 
 /**
- * PUT /api/admin/plugins/[id]/config — Set a config key
+ * PUT /api/admin/plugins/[id]/config - Set a config key
  *
  * Body: { key: string, value: unknown }
  * Requires admin authentication (checked via admin session).
@@ -83,7 +83,7 @@ export async function PUT(
 }
 
 /**
- * DELETE /api/admin/plugins/[id]/config — Delete a config key
+ * DELETE /api/admin/plugins/[id]/config - Delete a config key
  *
  * Body: { key: string }
  */

app/api/admin/plugins/route.ts

@@ -23,7 +23,7 @@ const SUSPICIOUS_JS_PATTERNS = [
 ];
 
 /**
- * GET /api/admin/plugins — List all admin-managed plugins
+ * GET /api/admin/plugins - List all admin-managed plugins
  */
 export async function GET() {
   try {
@@ -41,7 +41,7 @@ export async function GET() {
 }
 
 /**
- * POST /api/admin/plugins — Upload and install a plugin ZIP
+ * POST /api/admin/plugins - Upload and install a plugin ZIP
  */
 export async function POST(request: NextRequest) {
   try {
@@ -181,7 +181,7 @@ export async function POST(request: NextRequest) {
 }
 
 /**
- * PATCH /api/admin/plugins — Update plugin metadata (enable/disable)
+ * PATCH /api/admin/plugins - Update plugin metadata (enable/disable)
  * Body: { id: string, enabled: boolean }
  */
 export async function PATCH(request: NextRequest) {
@@ -218,7 +218,7 @@ export async function PATCH(request: NextRequest) {
 }
 
 /**
- * DELETE /api/admin/plugins — Remove a plugin
+ * DELETE /api/admin/plugins - Remove a plugin
  * Body: { id: string }
  */
 export async function DELETE(request: NextRequest) {

app/api/admin/policy/route.ts

@@ -6,7 +6,7 @@ import { logger } from '@/lib/logger';
 import type { SettingsPolicy } from '@/lib/admin/types';
 
 /**
- * GET /api/admin/policy — Get settings policy (NOT admin-protected — users read this)
+ * GET /api/admin/policy - Get settings policy (NOT admin-protected - users read this)
  */
 export async function GET() {
   try {
@@ -22,7 +22,7 @@ export async function GET() {
 }
 
 /**
- * PUT /api/admin/policy — Update settings policy (admin-protected)
+ * PUT /api/admin/policy - Update settings policy (admin-protected)
  */
 export async function PUT(request: NextRequest) {
   try {

app/api/admin/stalwart-check/route.ts

@@ -5,7 +5,7 @@ import { getStalwartCredentials } from '@/lib/stalwart/credentials';
 /**
  * GET /api/admin/stalwart-check
  * Check if the currently logged-in user is a Stalwart admin.
- * Probes the admin-only principal-list endpoint — if the user can access it, they're an admin.
+ * Probes the admin-only principal-list endpoint - if the user can access it, they're an admin.
  */
 export async function GET(request: NextRequest) {
   try {

app/api/admin/themes/[id]/css/route.ts

@@ -3,7 +3,7 @@ import { getThemeCSS, getThemeRegistry } from '@/lib/admin/plugin-registry';
 import { logger } from '@/lib/logger';
 
 /**
- * GET /api/admin/themes/[id]/css — Serve theme CSS to clients
+ * GET /api/admin/themes/[id]/css - Serve theme CSS to clients
  */
 export async function GET(
   _request: NextRequest,

app/api/admin/themes/route.ts

@@ -14,7 +14,7 @@ import { MAX_THEME_SIZE } from '@/lib/plugin-types';
 import { sanitizeThemeCSS, validateThemeCSSSafety } from '@/lib/theme-loader';
 
 /**
- * GET /api/admin/themes — List all admin-managed themes
+ * GET /api/admin/themes - List all admin-managed themes
  */
 export async function GET() {
   try {
@@ -32,7 +32,7 @@ export async function GET() {
 }
 
 /**
- * POST /api/admin/themes — Upload and install a theme ZIP
+ * POST /api/admin/themes - Upload and install a theme ZIP
  */
 export async function POST(request: NextRequest) {
   try {
@@ -151,7 +151,7 @@ export async function POST(request: NextRequest) {
 }
 
 /**
- * PATCH /api/admin/themes — Update theme metadata (enable/disable)
+ * PATCH /api/admin/themes - Update theme metadata (enable/disable)
  * Body: { id: string, enabled: boolean }
  */
 export async function PATCH(request: NextRequest) {
@@ -188,7 +188,7 @@ export async function PATCH(request: NextRequest) {
 }
 
 /**
- * DELETE /api/admin/themes — Remove a theme
+ * DELETE /api/admin/themes - Remove a theme
  * Body: { id: string }
  */
 export async function DELETE(request: NextRequest) {

app/api/auth/session/route.ts

@@ -95,7 +95,7 @@ export async function GET(request: NextRequest) {
 }
 
 /**
- * PUT — retrieve full credentials (including password) for session restoration.
+ * PUT - retrieve full credentials (including password) for session restoration.
  * Protected by multiple Sec-Fetch-* headers to ensure only same-origin
  * browser fetch() requests succeed. Non-browser clients cannot forge these.
  */

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

@@ -7,13 +7,14 @@ import { getRequiredConfig } from '@/lib/oauth/token-exchange';
 import { discoverOAuth } from '@/lib/oauth/discovery';
 import { OAUTH_SCOPES } from '@/lib/oauth/tokens';
 import { getCookieOptions } from '@/lib/oauth/cookie-config';
+import { readFileEnv } from '@/lib/read-file-env';
 
 const SSO_PENDING_COOKIE = 'sso_pending';
 const SSO_PENDING_MAX_AGE = 300; // 5 minutes
 
 export async function POST(request: NextRequest) {
   try {
-    if (!process.env.SESSION_SECRET) {
+    if (!process.env.SESSION_SECRET && !readFileEnv(process.env.SESSION_SECRET_FILE)) {
       return NextResponse.json({ error: 'SESSION_SECRET is required for SSO' }, { status: 500 });
     }
 

app/api/auth/totp-token-exchange/route.ts

@@ -4,6 +4,7 @@ import { logger } from '@/lib/logger';
 import { discoverOAuth } from '@/lib/oauth/discovery';
 import { refreshTokenCookieName } from '@/lib/oauth/tokens';
 import { getCookieOptions } from '@/lib/oauth/cookie-config';
+import { readFileEnv } from '@/lib/read-file-env';
 
 /**
  * Exchange basic auth credentials (with TOTP appended) for OAuth tokens.
@@ -65,7 +66,7 @@ async function findTokenEndpoint(serverUrl: string): Promise<string | null> {
         return url;
       }
     } catch {
-      // Network error — endpoint not reachable
+      // Network error - endpoint not reachable
     }
   }
 
@@ -113,7 +114,7 @@ async function attemptAllStrategies(
   logger.info('TOTP token exchange: found token endpoint', { tokenEndpoint });
 
   const clientId = process.env.OAUTH_CLIENT_ID;
-  const clientSecret = process.env.OAUTH_CLIENT_SECRET;
+  const clientSecret = process.env.OAUTH_CLIENT_SECRET || readFileEnv(process.env.OAUTH_CLIENT_SECRET_FILE);
   const basicAuth = `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`;
   const attempts: Array<{ strategy: string; error: string }> = [];
 

app/api/config/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from 'next/server';
 import { logger } from '@/lib/logger';
 import { configManager } from '@/lib/admin/config-manager';
+import { readFileEnv } from '@/lib/read-file-env';
 
 /**
  * Runtime configuration endpoint
@@ -33,8 +34,8 @@ export async function GET() {
     oauthOnly,
     oauthClientId: configManager.get<string>('oauthClientId', ''),
     oauthIssuerUrl: configManager.get<string>('oauthIssuerUrl', ''),
-    rememberMeEnabled: !!process.env.SESSION_SECRET,
-    settingsSyncEnabled: configManager.get<boolean>('settingsSyncEnabled', false) && !!process.env.SESSION_SECRET,
+    rememberMeEnabled: !!process.env.SESSION_SECRET || !!readFileEnv(process.env.SESSION_SECRET_FILE),
+    settingsSyncEnabled: configManager.get<boolean>('settingsSyncEnabled', false) && (!!process.env.SESSION_SECRET || !!readFileEnv(process.env.SESSION_SECRET_FILE)),
     stalwartFeaturesEnabled,
     devMode: configManager.get<boolean>('devMode', false),
     faviconUrl: configManager.get<string>('faviconUrl', '/branding/Bulwark_Favicon.svg'),

app/api/plugins/route.ts

@@ -3,10 +3,10 @@ import { getPluginRegistry, getThemeRegistry } from '@/lib/admin/plugin-registry
 import { logger } from '@/lib/logger';
 
 /**
- * GET /api/plugins — Public endpoint for clients to discover server-managed plugins & themes
+ * GET /api/plugins - Public endpoint for clients to discover server-managed plugins & themes
  *
  * Returns all enabled plugins and themes so the client can sync them to IndexedDB.
- * No admin auth required — this is how regular users receive plugins/themes.
+ * No admin auth required - this is how regular users receive plugins/themes.
  */
 export async function GET() {
   try {

app/api/pwa-icon/[size]/route.ts

@@ -0,0 +1,66 @@
+import { NextRequest, NextResponse } from 'next/server';
+import sharp from 'sharp';
+import path from 'node:path';
+import { readFile } from 'node:fs/promises';
+
+const VALID_SIZES = new Set([192, 512]);
+
+// Cache resized images in memory to avoid reprocessing on every request
+const cache = new Map<number, Blob>();
+
+async function fetchSourceImage(iconUrl: string): Promise<Buffer> {
+  // Absolute URL (http/https)
+  if (iconUrl.startsWith('http://') || iconUrl.startsWith('https://')) {
+    const res = await fetch(iconUrl);
+    if (!res.ok) throw new Error(`Failed to fetch PWA icon: ${res.status}`);
+    return Buffer.from(await res.arrayBuffer());
+  }
+
+  // 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<{ size: string }> }
+) {
+  const { size: sizeParam } = await params;
+  const size = parseInt(sizeParam, 10);
+
+  if (!VALID_SIZES.has(size)) {
+    return new NextResponse('Invalid size. Allowed: 192, 512', { status: 400 });
+  }
+
+  const iconUrl = process.env.PWA_ICON_URL || process.env.FAVICON_URL;
+  if (!iconUrl) {
+    return new NextResponse('No PWA icon configured', { status: 404 });
+  }
+
+  const pngHeaders = {
+    'Content-Type': 'image/png',
+    'Cache-Control': 'public, max-age=86400',
+  };
+
+  try {
+    if (cache.has(size)) {
+      return new NextResponse(cache.get(size)!, { headers: pngHeaders });
+    }
+
+    const sourceBuffer = await fetchSourceImage(iconUrl);
+    const resized = await sharp(sourceBuffer)
+      .resize(size, size, { fit: 'contain', background: { r: 0, g: 0, b: 0, alpha: 0 } })
+      .png()
+      .toBuffer();
+
+    const ab = new ArrayBuffer(resized.byteLength);
+    new Uint8Array(ab).set(resized);
+    const blob = new Blob([ab], { type: 'image/png' });
+    cache.set(size, blob);
+
+    return new NextResponse(blob, { headers: pngHeaders });
+  } catch (err) {
+    console.error('Failed to generate PWA icon:', err);
+    return new NextResponse('Failed to generate icon', { status: 500 });
+  }
+}

app/api/settings/route.ts

@@ -6,6 +6,7 @@ import { sessionCookieName } from '@/lib/auth/session-cookie';
 import { readStalwartAuthContextFromStore } from '@/lib/stalwart/auth-context';
 import { saveUserSettings, loadUserSettings, deleteUserSettings } from '@/lib/settings-sync';
 import { configManager } from '@/lib/admin/config-manager';
+import { readFileEnv } from '@/lib/read-file-env';
 
 function classifyError(error: unknown): { message: string; status: number } {
   const code = (error as NodeJS.ErrnoException).code;
@@ -48,7 +49,7 @@ function classifyError(error: unknown): { message: string; status: number } {
 }
 
 function isEnabled(): boolean {
-  return process.env.SETTINGS_SYNC_ENABLED === 'true' && !!process.env.SESSION_SECRET;
+  return process.env.SETTINGS_SYNC_ENABLED === 'true' && (!!process.env.SESSION_SECRET || !!readFileEnv(process.env.SESSION_SECRET_FILE));
 }
 
 /** Strip trailing slashes so differently-formatted URLs still match. */
@@ -134,7 +135,7 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: 'Identity mismatch' }, { status: 403 });
     }
 
-    // Enforce admin policy — strip locked settings so users can't override them
+    // Enforce admin policy - strip locked settings so users can't override them
     await configManager.ensureLoaded();
     const policy = configManager.getPolicy();
     const filteredSettings = { ...settings };

app/globals.css

@@ -208,6 +208,11 @@ body {
   padding: 1rem 1.25rem;
 }
 
+.email-content-text a {
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
 .email-content {
   font-family:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",

app/icon.svg

@@ -1,3 +1,20 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Gravit.io -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 1000 1000" width="1000pt" height="1000pt"><defs><clipPath id="_clipPath_Sdk6Fary7vPYZxd20WRVIKca0qb2ogEk"><rect width="1000" height="1000"/></clipPath></defs><g clip-path="url(#_clipPath_Sdk6Fary7vPYZxd20WRVIKca0qb2ogEk)"><rect width="1000" height="1000" style="fill:rgb(0,0,0)" fill-opacity="0"/><path d=" M 483.028 563.647 L 63.713 187.183 C 59.029 182.978 55.226 174.454 55.226 168.159 L 55.226 122.542 C 55.226 116.247 60.206 109.988 66.339 108.573 L 215.181 74.225 C 221.314 72.809 226.293 76.77 226.293 83.065 L 226.293 176.92 L 352.034 147.895 C 358.167 146.479 363.147 140.219 363.147 133.925 L 363.147 51.483 C 363.147 45.189 368.126 38.93 374.259 37.514 L 488.888 11.061 C 495.021 9.646 504.979 9.646 511.112 11.061 L 625.741 37.514 C 631.874 38.93 636.853 45.189 636.853 51.483 L 636.853 133.925 C 636.853 140.219 641.833 146.479 647.966 147.895 L 773.707 176.92 L 773.707 83.065 C 773.707 76.77 778.686 72.809 784.819 74.225 L 933.661 108.573 C 939.794 109.988 944.774 116.247 944.774 122.542 L 944.774 168.159 C 944.774 174.454 940.971 182.978 936.287 187.183 L 516.972 563.647 C 507.605 572.056 492.395 572.056 483.028 563.647 Z " fill="rgb(219,45,84)"/><path d=" M 944.774 332.832 L 944.774 396.969 C 944.774 403.263 941.16 411.987 936.709 416.437 L 884.411 468.736 C 879.96 473.186 876.347 481.91 876.347 488.204 L 876.347 682.08 C 876.345 718.462 866.664 750.017 847.953 778.668 L 658.833 589.547 L 944.774 332.832 Z " fill="rgb(219,45,84)"/><path d=" M 55.226 332.832 L 55.226 385.564 C 55.226 398.153 62.453 415.6 71.355 424.501 L 107.525 460.671 C 116.426 469.573 123.653 487.02 123.653 499.609 L 123.653 682.08 C 123.655 718.462 133.336 750.017 152.047 778.668 L 341.167 589.547 L 55.226 332.832 Z " fill="rgb(219,45,84)"/><path d=" M 765.645 857.641 C 701.996 901.327 612.26 941.932 500 990 Q 500 990 500 990 C 387.74 941.932 298.004 901.327 234.355 857.641 L 427.917 664.079 C 435.604 668.703 443.74 672.579 452.215 675.636 C 467.543 681.179 483.703 684.007 500 683.996 C 516.297 684.007 532.457 681.179 547.785 675.636 C 556.261 672.579 564.396 668.703 572.083 664.079 L 765.645 857.641 Z " fill="rgb(219,45,84)"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 1000 1000">
+  <defs>
+    <clipPath id="_clipPath_ONeeZd4dujNSzmUupv5CE8R64LUE9BqV"><rect width="1000" height="1000"/></clipPath>
+    <style>
+      .icon-bg { fill: #ffffff; }
+      .icon-mark { fill: rgb(219,45,84); }
+      @media (prefers-color-scheme: dark) {
+        .icon-bg { fill: #18181b; }
+      }
+    </style>
+  </defs>
+  <g clip-path="url(#_clipPath_ONeeZd4dujNSzmUupv5CE8R64LUE9BqV)">
+    <rect width="1000" height="1000" class="icon-bg"/>
+    <path d=" M 489.315 575.068 L 225.342 338.071 C 222.394 335.424 220 330.058 220 326.095 L 220 297.377 C 220 293.415 223.135 289.474 226.996 288.583 L 320.697 266.96 C 324.558 266.069 327.692 268.563 327.692 272.525 L 327.692 331.61 L 406.851 313.338 C 410.712 312.446 413.846 308.506 413.846 304.543 L 413.846 252.643 C 413.846 248.681 416.981 244.741 420.842 243.85 L 493.004 227.197 C 496.865 226.306 503.135 226.306 506.996 227.197 L 579.158 243.85 C 583.019 244.741 586.154 248.681 586.154 252.643 L 586.154 304.543 C 586.154 308.506 589.288 312.446 593.149 313.338 L 672.308 331.61 L 672.308 272.525 C 672.308 268.563 675.442 266.069 679.303 266.96 L 773.004 288.583 C 776.865 289.474 780 293.415 780 297.377 L 780 326.095 C 780 330.058 777.606 335.424 774.658 338.071 L 510.685 575.068 C 504.788 580.362 495.212 580.362 489.315 575.068 Z " class="icon-mark"/>
+    <path d=" M 780 429.762 L 780 470.138 C 780 474.101 777.725 479.593 774.923 482.394 L 742 515.318 C 739.198 518.12 736.923 523.612 736.923 527.574 L 736.923 649.625 C 736.922 672.529 730.827 692.394 719.048 710.431 L 599.991 591.373 L 780 429.762 Z " class="icon-mark"/>
+    <path d=" M 220 429.762 L 220 462.959 C 220 470.884 224.55 481.867 230.153 487.471 L 252.924 510.241 C 258.527 515.845 263.077 526.829 263.077 534.754 L 263.077 649.625 C 263.078 672.529 269.173 692.394 280.952 710.431 L 400.009 591.373 L 220 429.762 Z " class="icon-mark"/>
+    <path d=" M 667.232 760.147 C 627.163 787.649 570.672 813.211 500 843.472 Q 500 843.472 500 843.472 C 429.328 813.211 372.837 787.649 332.768 760.147 L 454.622 638.293 C 459.461 641.204 464.582 643.644 469.918 645.569 C 479.567 649.058 489.741 650.839 500 650.832 C 510.259 650.839 520.433 649.058 530.082 645.569 C 535.418 643.644 540.539 641.204 545.378 638.293 L 667.232 760.147 Z " class="icon-mark"/>
+  </g>
+</svg>

app/layout.tsx

@@ -22,7 +22,6 @@ export async function generateMetadata(): Promise<Metadata> {
   return {
     title: process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || "Webmail",
     description: "Minimalist webmail client using JMAP protocol",
-    manifest: "/manifest.json",
     appleWebApp: {
       capable: true,
       statusBarStyle: "black-translucent",

app/manifest.ts

@@ -0,0 +1,53 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  const appName =
+    process.env.APP_NAME ||
+    process.env.NEXT_PUBLIC_APP_NAME ||
+    "Bulwark Webmail";
+
+  const shortName = process.env.APP_SHORT_NAME || appName;
+  const description =
+    process.env.APP_DESCRIPTION ||
+    "A modern webmail client built for Stalwart Mail Server";
+  const themeColor = process.env.PWA_THEME_COLOR || "#ffffff";
+  const backgroundColor = process.env.PWA_BACKGROUND_COLOR || "#ffffff";
+
+  // If PWA_ICON_URL or FAVICON_URL is configured, serve dynamically resized PNGs
+  // via /api/pwa-icon/[size]. Otherwise fall back to the default Bulwark PNGs.
+  const hasCustomIcon = !!(process.env.PWA_ICON_URL || process.env.FAVICON_URL);
+
+  const icons: MetadataRoute.Manifest["icons"] = hasCustomIcon
+    ? [
+        { src: "/api/pwa-icon/192", sizes: "192x192", type: "image/png", purpose: "any" },
+        { src: "/api/pwa-icon/512", sizes: "512x512", type: "image/png", purpose: "any" },
+        { src: "/api/pwa-icon/192", sizes: "192x192", type: "image/png", purpose: "maskable" },
+        { src: "/api/pwa-icon/512", sizes: "512x512", type: "image/png", purpose: "maskable" },
+      ]
+    : [
+        { src: "/icon-192x192.png", sizes: "192x192", type: "image/png", purpose: "any" },
+        { src: "/icon-512x512.png", sizes: "512x512", type: "image/png", purpose: "any" },
+        { src: "/icon-maskable-light-192x192.png", sizes: "192x192", type: "image/png", purpose: "maskable" },
+        { src: "/icon-maskable-light-512x512.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
+        { src: "/icon-maskable-dark-192x192.png", sizes: "192x192", type: "image/png", purpose: "maskable" },
+        { src: "/icon-maskable-dark-512x512.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
+      ];
+
+  return {
+    name: appName,
+    short_name: shortName,
+    description,
+    start_url: "/",
+    scope: "/",
+    display: "standalone",
+    orientation: "portrait-primary",
+    theme_color: themeColor,
+    background_color: backgroundColor,
+    icons,
+    categories: ["productivity"],
+    screenshots: [
+      { src: "/screenshot-540x720.png", sizes: "540x720", type: "image/png" },
+      { src: "/screenshot-1280x720.png", sizes: "1280x720", type: "image/png" },
+    ],
+  };
+}

components/calendar/event-modal.tsx

@@ -380,8 +380,10 @@ export function EventModal({
         { name: organizerName, email: organizerEmail },
         attendees
       ) as Record<string, CalendarParticipant>;
+      data.replyTo = { imip: `mailto:${organizerEmail}` };
     } else if (attendees.length === 0 && event?.participants) {
       data.participants = null;
+      data.replyTo = null;
     }
 
     const shouldSendScheduling = attendees.length > 0 && sendInvitations;

components/calendar/ical-import-modal.tsx

@@ -11,6 +11,7 @@ import { getEventStartDate } from "@/lib/calendar-utils";
 import { useCalendarStore } from "@/stores/calendar-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { toast } from "@/stores/toast-store";
+import { apiFetch } from "@/lib/browser-navigation";
 
 interface ICalImportModalProps {
   calendars: Calendar[];
@@ -126,7 +127,7 @@ export function ICalImportModal({ calendars, client, onClose }: ICalImportModalP
     setIsParsing(true);
 
     try {
-      const response = await fetch("/api/fetch-ical", {
+      const response = await apiFetch("/api/fetch-ical", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ url: trimmed }),

components/contacts/contact-detail.tsx

@@ -87,7 +87,7 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
         try {
           let derBytes: ArrayBuffer | string | null = null;
           if (key.uri.startsWith('data:')) {
-            // data URI — extract base64 content
+            // data URI - extract base64 content
             const commaIdx = key.uri.indexOf(',');
             if (commaIdx === -1) continue;
             const b64 = key.uri.substring(commaIdx + 1);
@@ -178,7 +178,7 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
           <div className="flex items-center gap-4">
             <Avatar name={name} email={email} size={isMobile ? "md" : "lg"} />
             <div className="min-w-0 flex-1">
-              <h2 className={cn("font-semibold truncate", isMobile ? "text-lg" : "text-xl")}>{name || "—"}</h2>
+              <h2 className={cn("font-semibold truncate", isMobile ? "text-lg" : "text-xl")}>{name || "-"}</h2>
               {hasNickname && (
                 <p className="text-sm text-muted-foreground truncate">&ldquo;{nicknames.map(n => n.name).join(", ")}&rdquo;</p>
               )}
@@ -278,7 +278,7 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
                 <div key={i} className="text-sm">
                   {o.name}
                   {o.units && o.units.length > 0 && (
-                    <span className="text-muted-foreground"> — {o.units.map(u => u.name).join(", ")}</span>
+                    <span className="text-muted-foreground"> - {o.units.map(u => u.name).join(", ")}</span>
                   )}
                 </div>
               ))}
@@ -371,7 +371,7 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
                 {contact.speakToAs.pronouns && (() => {
                   const firstPronoun = Object.values(contact.speakToAs!.pronouns!)[0]?.pronouns;
                   return firstPronoun ? (
-                    <span className="text-muted-foreground">{contact.speakToAs!.grammaticalGender ? " — " : ""}{firstPronoun}</span>
+                    <span className="text-muted-foreground">{contact.speakToAs!.grammaticalGender ? " - " : ""}{firstPronoun}</span>
                   ) : null;
                 })()}
               </div>

components/contacts/contact-form.tsx

@@ -507,7 +507,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
             </div>
           )}
 
-          {/* Name & Identity — full width */}
+          {/* Name & Identity - full width */}
           <div className="md:col-span-2 xl:col-span-3">
           <FormSection icon={User} title={t("section_identity")} category="contact">
             <div className="grid grid-cols-[auto_1fr_1fr_auto] gap-2">
@@ -575,7 +575,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
                         setEmails(next);
                       }}
                     >
-                      <option value="">—</option>
+                      <option value="">-</option>
                       <option value="work">{t("context_work")}</option>
                       <option value="private">{t("context_private")}</option>
                     </Select>
@@ -639,7 +639,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
                       setPhones(next);
                     }}
                   >
-                    <option value="">—</option>
+                    <option value="">-</option>
                     <option value="work">{t("context_work")}</option>
                     <option value="private">{t("context_private")}</option>
                   </Select>
@@ -677,7 +677,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
             </div>
           </FormSection>
 
-          {/* Addresses — full width */}
+          {/* Addresses - full width */}
           <div className="md:col-span-2 xl:col-span-3">
           <FormSection icon={MapPin} title={t("addresses")} collapsible defaultOpen category="location">
             <div className="space-y-3">
@@ -698,7 +698,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
                       value={addr.context}
                       onChange={(e) => { const n = [...addresses]; n[i] = { ...n[i], context: e.target.value as AddressEntry["context"] }; setAddresses(n); }}
                     >
-                      <option value="">—</option>
+                      <option value="">-</option>
                       <option value="work">{t("context_work")}</option>
                       <option value="private">{t("context_private")}</option>
                     </Select>
@@ -833,7 +833,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
               <div>
                 <label className="text-xs text-muted-foreground mb-1 block">{t("gender_sex")}</label>
                 <Select value={genderSex} onChange={(e) => setGenderSex(e.target.value)} className="w-full">
-                  <option value="">—</option>
+                  <option value="">-</option>
                   <option value="masculine">{t("gender_male")}</option>
                   <option value="feminine">{t("gender_female")}</option>
                   <option value="other">{t("gender_other")}</option>
@@ -866,7 +866,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
             </div>
           </FormSection>
 
-          {/* Notes — full width */}
+          {/* Notes - full width */}
           <div className="md:col-span-2 xl:col-span-3">
           <FormSection icon={StickyNote} title={t("note")} collapsible defaultOpen category="notes">
             <textarea
@@ -911,7 +911,6 @@ function CategoryComboBox({
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState("");
-  const wrapperRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
   // Parse current keywords from comma-separated string
@@ -946,17 +945,6 @@ function CategoryComboBox({
     onChange(next);
   }, [currentKeywords, onChange]);
 
-  // Close dropdown on outside click
-  useEffect(() => {
-    if (!isOpen) return;
-    const handler = (e: MouseEvent) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [isOpen]);
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === "Enter") {
@@ -970,7 +958,7 @@ function CategoryComboBox({
   };
 
   return (
-    <div ref={wrapperRef} className="relative">
+    <div className="relative">
       {/* Keyword badges */}
       {currentKeywords.length > 0 && (
         <div className="flex flex-wrap gap-1.5 mb-2">
@@ -998,6 +986,7 @@ function CategoryComboBox({
         value={inputValue}
         onChange={(e) => { setInputValue(e.target.value); setIsOpen(true); }}
         onFocus={() => setIsOpen(true)}
+        onBlur={() => setIsOpen(false)}
         onKeyDown={handleKeyDown}
         placeholder={currentKeywords.length === 0 ? placeholder : ""}
       />
@@ -1005,7 +994,7 @@ function CategoryComboBox({
 
       {/* Dropdown */}
       {isOpen && (suggestions.length > 0 || canAddNew) && (
-        <div className="absolute left-0 right-0 top-[calc(100%-1.5rem)] mt-1 rounded-md border border-border bg-popover text-popover-foreground shadow-md z-50 max-h-48 overflow-y-auto py-1">
+        <div className="absolute left-0 right-0 top-[calc(100%-1.5rem)] mt-1 rounded-md border border-border bg-popover text-popover-foreground shadow-md z-50 max-h-48 overflow-y-auto py-1" onMouseDown={(e) => e.preventDefault()}>
           {suggestions.map(kw => (
             <button
               key={kw}

components/contacts/contact-import-dialog.tsx

@@ -199,7 +199,7 @@ export function ContactImportDialog({
                     </div>
                     <FileText className="w-4 h-4 text-muted-foreground flex-shrink-0" />
                     <div className="flex-1 min-w-0">
-                      <div className="text-sm font-medium truncate">{cName || cEmail || "—"}</div>
+                      <div className="text-sm font-medium truncate">{cName || cEmail || "-"}</div>
                       {cEmail && cName && (
                         <div className="text-xs text-muted-foreground truncate">{cEmail}</div>
                       )}

components/contacts/contact-list-item.tsx

@@ -90,7 +90,7 @@ export function ContactListItem({ contact, isSelected, isChecked, hasSelection,
 
       <div className="flex-1 min-w-0">
         <div className="text-sm font-medium truncate">
-          {name || email || "—"}
+          {name || email || "-"}
         </div>
         {density !== 'extra-compact' && email && name && (
           <div className="text-xs text-muted-foreground truncate">{email}</div>

components/email/calendar-invitation-banner.tsx

@@ -527,7 +527,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
       || null;
 
     // Send the iMIP REPLY email to the organizer (client-side scheduling).
-    // Called after updating the local calendar event. Best-effort — if it
+    // 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) {

components/email/email-composer.tsx

@@ -12,6 +12,7 @@ import { toast } from "@/stores/toast-store";
 import { sanitizeEmailHtml } from "@/lib/email-sanitization";
 import { useAuthStore } from "@/stores/auth-store";
 import { useIdentityStore } from "@/stores/identity-store";
+import { useAccountStore } from "@/stores/account-store";
 import { useSmimeStore } from "@/stores/smime-store";
 import { useEmailStore } from "@/stores/email-store";
 import { useSettingsStore } from "@/stores/settings-store";
@@ -84,6 +85,7 @@ interface EmailComposerProps {
     body?: string;
     htmlBody?: string;
     receivedAt?: string;
+    accountId?: string;
   };
 }
 
@@ -103,6 +105,8 @@ export function EmailComposer({
   const timeFormat = useSettingsStore((state) => state.timeFormat);
   const plainTextMode = useSettingsStore((state) => state.plainTextMode);
   const autoSelectReplyIdentity = useSettingsStore((state) => state.autoSelectReplyIdentity);
+  const attachmentReminderEnabled = useSettingsStore((state) => state.attachmentReminderEnabled);
+  const attachmentReminderKeywords = useSettingsStore((state) => state.attachmentReminderKeywords);
 
   // Initialize with reply/forward data if provided
   const getInitialTo = () => {
@@ -212,6 +216,8 @@ export function EmailComposer({
   const [smimePassphrasePrompt, setSmimePassphrasePrompt] = useState<{ keyId: string; resolve: (passphrase: string) => void; reject: () => void } | null>(null);
   const [smimePassphraseInput, setSmimePassphraseInput] = useState('');
   const [smimePassphraseError, setSmimePassphraseError] = useState('');
+  const [showAttachmentWarning, setShowAttachmentWarning] = useState(false);
+  const [attachmentWarningKeyword, setAttachmentWarningKeyword] = useState('');
 
   const saveTemplateModalRef = useFocusTrap({
     isActive: showSaveAsTemplate,
@@ -225,6 +231,12 @@ export function EmailComposer({
     restoreFocus: true,
   });
 
+  const attachmentWarningRef = useFocusTrap({
+    isActive: showAttachmentWarning,
+    onEscape: () => setShowAttachmentWarning(false),
+    restoreFocus: true,
+  });
+
   const { client } = useAuthStore();
   const identities = useIdentityStore((s) => s.identities);
   const primaryIdentity = identities[0] ?? null;
@@ -244,12 +256,28 @@ export function EmailComposer({
 
     if (matchedIdentityId) {
       setSelectedIdentityId(matchedIdentityId);
+      return;
+    }
+
+    // Fallback: match identity by the account's email when replying from unified view
+    if (replyTo?.accountId) {
+      const account = useAccountStore.getState().getAccountById(replyTo.accountId);
+      if (account?.email) {
+        const accountEmail = account.email.trim().toLowerCase();
+        const accountIdentity = identities.find(
+          (identity) => identity.email.trim().toLowerCase() === accountEmail
+        );
+        if (accountIdentity) {
+          setSelectedIdentityId(accountIdentity.id);
+        }
+      }
     }
   }, [
     autoSelectReplyIdentity,
     identities,
     initialData?.selectedIdentityId,
     mode,
+    replyTo?.accountId,
     replyTo?.bcc,
     replyTo?.cc,
     replyTo?.to,
@@ -723,7 +751,7 @@ export function EmailComposer({
     return undefined;
   };
 
-  const handleSend = async () => {
+  const handleSend = async (skipAttachmentCheck = false) => {
     const ccAddresses = cc.split(",").map(e => e.trim()).filter(Boolean);
     const bccAddresses = bcc.split(",").map(e => e.trim()).filter(Boolean);
 
@@ -742,6 +770,21 @@ export function EmailComposer({
       return;
     }
 
+    // Attachment reminder check
+    if (!skipAttachmentCheck && attachmentReminderEnabled) {
+      const hasAttachments = attachments.some(att => att.blobId && !att.uploading && !att.error);
+      if (!hasAttachments) {
+        const bodyText = htmlToPlainText(body);
+        const searchText = `${subject} ${bodyText}`.toLowerCase();
+        const matched = attachmentReminderKeywords.find(kw => searchText.includes(kw.toLowerCase()));
+        if (matched) {
+          setAttachmentWarningKeyword(matched);
+          setShowAttachmentWarning(true);
+          return;
+        }
+      }
+    }
+
     let finalDraftId = draftId;
     if (saveTimeoutRef.current) {
       clearTimeout(saveTimeoutRef.current);
@@ -1002,7 +1045,7 @@ export function EmailComposer({
         </div>
         {/* Mobile: send button in header */}
         <Button
-          onClick={handleSend}
+          onClick={() => handleSend()}
           disabled={!canSend}
           title={getSendTooltip()}
           size="sm"
@@ -1367,7 +1410,7 @@ export function EmailComposer({
               {t('discard')}
             </button>
             <Button
-              onClick={handleSend}
+              onClick={() => handleSend()}
               disabled={!canSend}
               title={getSendTooltip()}
               className="hidden md:inline-flex"
@@ -1467,6 +1510,36 @@ export function EmailComposer({
         </div>
       )}
 
+      {showAttachmentWarning && (
+        <div
+          className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150"
+          onClick={() => setShowAttachmentWarning(false)}
+        >
+          <div
+            ref={attachmentWarningRef}
+            role="alertdialog"
+            aria-modal="true"
+            onClick={(e) => e.stopPropagation()}
+            className="bg-background border border-border rounded-lg shadow-xl w-full max-w-md animate-in zoom-in-95 duration-200"
+          >
+            <div className="p-6">
+              <h2 className="text-lg font-semibold text-foreground">{t('forgot_attachment.title')}</h2>
+              <p className="mt-2 text-sm text-muted-foreground">
+                {t('forgot_attachment.message', { keyword: attachmentWarningKeyword })}
+              </p>
+            </div>
+            <div className="flex items-center justify-end gap-3 px-6 pb-6">
+              <Button variant="outline" onClick={() => setShowAttachmentWarning(false)}>
+                {t('forgot_attachment.back')}
+              </Button>
+              <Button onClick={() => { setShowAttachmentWarning(false); handleSend(true); }}>
+                {t('forgot_attachment.send_anyway')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {showCloseDialog && (
         <div
           className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150"

components/email/email-context-menu.tsx

@@ -89,17 +89,18 @@ const getMailboxIcon = (role?: string) => {
   }
 };
 
-// Get current label/color from email keywords (supports both $label: and legacy $color:)
-const getCurrentColor = (keywords: Record<string, boolean> | undefined) => {
-  if (!keywords) return null;
+// Get all active label/color tag IDs from email keywords
+const getCurrentColors = (keywords: Record<string, boolean> | undefined): string[] => {
+  if (!keywords) return [];
+  const tags: string[] = [];
   for (const key of Object.keys(keywords)) {
     if ((key.startsWith("$label:") || key.startsWith("$color:")) && keywords[key] === true) {
-      return key.startsWith("$label:")
-        ? key.slice("$label:".length)
-        : key.slice("$color:".length);
+      tags.push(
+        key.startsWith("$label:") ? key.slice("$label:".length) : key.slice("$color:".length)
+      );
     }
   }
-  return null;
+  return tags;
 };
 
 export function EmailContextMenu({
@@ -137,7 +138,7 @@ export function EmailContextMenu({
   const isUnread = !email.keywords?.$seen;
   const isStarred = email.keywords?.$flagged;
   const isDraft = email.keywords?.['$draft'] === true;
-  const currentColor = getCurrentColor(email.keywords);
+  const currentColors = getCurrentColors(email.keywords);
   const showBatchActions = isMultiSelect && selectedCount > 1;
   const isInJunkFolder = currentMailboxRole === 'junk';
 
@@ -306,24 +307,27 @@ export function EmailContextMenu({
       {/* Set tag submenu - only for single email */}
       {!showBatchActions && (
         <ContextMenuSubMenu icon={Tag} label={t("color_tag")}>
-          {colorOptions.map((option) => (
-            <button
-              key={option.value}
-              role="menuitem"
-              onClick={() => handleAction(() => onSetColorTag?.(option.value))}
-              className={cn(
-                "w-full px-3 py-1.5 text-sm text-left flex items-center gap-2 hover:bg-muted cursor-pointer",
-                currentColor === option.value && "bg-accent font-medium"
-              )}
-            >
-              <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
-              <span className="flex-1">{option.name}</span>
-              {currentColor === option.value && (
-                <Check className="w-3.5 h-3.5 flex-shrink-0 text-foreground" />
-              )}
-            </button>
-          ))}
-          {currentColor && (
+          {colorOptions.map((option) => {
+            const isActive = currentColors.includes(option.value);
+            return (
+              <button
+                key={option.value}
+                role="menuitem"
+                onClick={() => handleAction(() => onSetColorTag?.(option.value))}
+                className={cn(
+                  "w-full px-3 py-1.5 text-sm text-left flex items-center gap-2 hover:bg-muted cursor-pointer",
+                  isActive && "bg-accent font-medium"
+                )}
+              >
+                <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
+                <span className="flex-1">{option.name}</span>
+                {isActive && (
+                  <Check className="w-3.5 h-3.5 flex-shrink-0 text-foreground" />
+                )}
+              </button>
+            );
+          })}
+          {currentColors.length > 0 && (
             <>
               <ContextMenuSeparator />
               <ContextMenuItem

components/email/email-list-item.tsx

@@ -15,7 +15,7 @@ import { useLongPress } from "@/hooks/use-long-press";
 import { useUIStore } from "@/stores/ui-store";
 import { EmailIdentityBadge } from "./email-identity-badge";
 import { EmailHoverActions } from "./email-hover-actions";
-import { getEmailColorTag } from "@/lib/thread-utils";
+import { getEmailColorTags } from "@/lib/thread-utils";
 
 interface EmailListItemProps {
   email: Email;
@@ -51,9 +51,11 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
   const isFocusedMailLayout = mailLayout === 'focus';
   const inlinePreview = showPreview && email.preview ? ` ${email.preview}` : '';
 
-  // Resolve color tag using keyword definitions from settings
-  const colorTagId = getEmailColorTag(email.keywords);
-  const keywordDef = colorTagId ? emailKeywords.find(k => k.id === colorTagId) : null;
+  // Resolve color tags using keyword definitions from settings; unknown tags fall back to gray
+  const colorTagIds = getEmailColorTags(email.keywords);
+  const keywordDefs = colorTagIds.map(id => emailKeywords.find(k => k.id === id) ?? { id, label: id, color: 'gray' });
+  // Use first tag for background coloring
+  const keywordDef = keywordDefs[0] ?? null;
   const colorTag = keywordDef ? KEYWORD_PALETTE[keywordDef.color]?.bg ?? null : null;
 
   // Drag and drop functionality
@@ -199,7 +201,9 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
                   </>
                 )}
                 {email.hasAttachment && <Paperclip className="w-3.5 h-3.5 text-muted-foreground" />}
-                {keywordDef && <span className={cn('h-2.5 w-2.5 rounded-full', KEYWORD_PALETTE[keywordDef.color]?.dot || 'bg-gray-400')} />}
+                {keywordDefs.map((kd) => (
+                  <span key={kd.id} className={cn('h-2.5 w-2.5 rounded-full', KEYWORD_PALETTE[kd.color]?.dot || 'bg-gray-400')} />
+                ))}
                 <span className={cn(
                   'text-xs tabular-nums',
                   isUnread ? 'text-foreground font-semibold' : 'text-muted-foreground'
@@ -249,15 +253,15 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
                   </div>
                 </div>
                 <div className="flex items-center gap-1.5 flex-shrink-0">
-                  {keywordDef && (
-                    <span className={cn(
+                  {keywordDefs.map((kd) => (
+                    <span key={kd.id} className={cn(
                       "inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded-full",
-                      KEYWORD_PALETTE[keywordDef.color]?.bg || "bg-muted"
+                      KEYWORD_PALETTE[kd.color]?.bg || "bg-muted"
                     )}>
-                      <span className={cn("w-1.5 h-1.5 rounded-full", KEYWORD_PALETTE[keywordDef.color]?.dot || "bg-gray-400")} />
-                      {keywordDef.label}
+                      <span className={cn("w-1.5 h-1.5 rounded-full", KEYWORD_PALETTE[kd.color]?.dot || "bg-gray-400")} />
+                      {kd.label}
                     </span>
-                  )}
+                  ))}
                   <span className={cn(
                     "text-xs tabular-nums",
                     isUnread

components/email/email-list.tsx

@@ -176,7 +176,7 @@ export function EmailList({
 
     setIsProcessing(true);
     try {
-      await batchDelete(client);
+      await batchDelete(client, isInTrash);
     } finally {
       setTimeout(() => setIsProcessing(false), 500);
     }

components/email/email-viewer.tsx

@@ -85,7 +85,7 @@ import { UnsubscribeBanner } from "./unsubscribe-banner";
 import { CalendarInvitationBanner } from "./calendar-invitation-banner";
 import { useTour } from "@/components/tour/tour-provider";
 import { SmimePassphraseDialog } from "@/components/settings/smime-passphrase-dialog";
-import { findCalendarAttachment } from "@/lib/calendar-invitation";
+import { findCalendarAttachment, isCalendarMimeType } from "@/lib/calendar-invitation";
 import { RecipientPopover } from "./recipient-popover";
 import { isFilePreviewable } from "@/lib/file-preview";
 import { SmimeStatusBanner } from "./smime-status-banner";
@@ -193,16 +193,17 @@ const getAttachmentDisplayName = (name: string | null | undefined, mimeType?: st
   return 'Attachment';
 };
 
-const getCurrentColor = (keywords: Record<string, boolean> | undefined) => {
-  if (!keywords) return null;
+const getCurrentColors = (keywords: Record<string, boolean> | undefined): string[] => {
+  if (!keywords) return [];
+  const tags: string[] = [];
   for (const key of Object.keys(keywords)) {
     if ((key.startsWith("$label:") || key.startsWith("$color:")) && keywords[key] === true) {
-      return key.startsWith("$label:")
-        ? key.slice("$label:".length)
-        : key.slice("$color:".length);
+      tags.push(
+        key.startsWith("$label:") ? key.slice("$label:".length) : key.slice("$color:".length)
+      );
     }
   }
-  return null;
+  return tags;
 };
 
 // Helper function to format recipients with contextual display
@@ -739,7 +740,7 @@ function ContactSidebarPanel({
                   <div key={i} className="text-sm">
                     {o.name}
                     {o.units && o.units.length > 0 && (
-                      <span className="text-muted-foreground"> — {o.units.map(u => u.name).join(", ")}</span>
+                      <span className="text-muted-foreground"> - {o.units.map(u => u.name).join(", ")}</span>
                     )}
                   </div>
                 ))}
@@ -887,6 +888,9 @@ export function EmailViewer({
   const attachmentPosition = useSettingsStore((state) => state.attachmentPosition);
   const addTrustedSender = useSettingsStore((state) => state.addTrustedSender);
   const isSenderTrusted = useSettingsStore((state) => state.isSenderTrusted);
+  const trustedSendersAddressBook = useSettingsStore((state) => state.trustedSendersAddressBook);
+  const isTrustedAddressBookSender = useContactStore((state) => state.isTrustedAddressBookSender);
+  const addToTrustedSendersBook = useContactStore((state) => state.addToTrustedSendersBook);
   const emailKeywords = useSettingsStore((state) => state.emailKeywords);
   const toolbarPosition = useSettingsStore((state) => state.toolbarPosition);
   const showToolbarLabels = useSettingsStore((state) => state.showToolbarLabels);
@@ -933,7 +937,8 @@ export function EmailViewer({
   const moveMenuRef = useRef<HTMLDivElement>(null);
   const toolbarRef = useRef<HTMLDivElement>(null);
   const [hiddenPriorities, setHiddenPriorities] = useState<Set<number>>(new Set());
-  const currentColor = getCurrentColor(email?.keywords);
+  const currentColors = getCurrentColors(email?.keywords);
+  const currentColor = currentColors[0] ?? null;
 
   // S/MIME state
   const [smimeStatus, setSmimeStatus] = useState<SmimeStatus | null>(null);
@@ -1165,7 +1170,7 @@ export function EmailViewer({
       return;
     }
 
-    // Already read — record that so manual unread toggle won't re-trigger auto-mark
+    // Already read - record that so manual unread toggle won't re-trigger auto-mark
     if (email.keywords?.$seen) {
       autoMarkedEmailRef.current = email.id;
       return;
@@ -1639,7 +1644,7 @@ export function EmailViewer({
             // Check if inner content is also signed
             const nestedSignedData = extractNestedSignedDataCandidate(parsed, result.mimeBytes);
             if (nestedSignedData) {
-              // Nested sign-then-encrypt — verify inner signature
+              // Nested sign-then-encrypt - verify inner signature
               const innerBytes = normalizeCmsBytes(nestedSignedData.bytes);
               smimeDebug('[S/MIME] nested signed-data candidate:', {
                 source: nestedSignedData.source,
@@ -1848,7 +1853,7 @@ export function EmailViewer({
 
     // Check if the email already has a usable HTML body with real content
     // Outlook often forwards TNEF emails with an HTML body that's just Word
-    // boilerplate (CSS + &nbsp;) — treat these as effectively empty.
+    // boilerplate (CSS + &nbsp;) - treat these as effectively empty.
     const htmlPartId = email.htmlBody?.[0]?.partId;
     const htmlValue = htmlPartId ? email.bodyValues?.[htmlPartId]?.value?.trim() : '';
     let hasRealHtmlBody = !!htmlValue;
@@ -1893,7 +1898,7 @@ export function EmailViewer({
           return;
         }
 
-        debug.log('email', 'TNEF parse result — htmlBody:', !!parsed.htmlBody, '(' + (parsed.htmlBody?.length ?? 0) + ' chars)', ', body:', !!parsed.body, '(' + (parsed.body?.length ?? 0) + ' chars)', ', attachments:', parsed.attachments.length);
+        debug.log('email', 'TNEF parse result - htmlBody:', !!parsed.htmlBody, '(' + (parsed.htmlBody?.length ?? 0) + ' chars)', ', body:', !!parsed.body, '(' + (parsed.body?.length ?? 0) + ' chars)', ', attachments:', parsed.attachments.length);
 
         if (parsed.htmlBody && !hasRealHtmlBody) {
           setTnefHtml(parsed.htmlBody);
@@ -1907,7 +1912,7 @@ export function EmailViewer({
         }
 
         if (!parsed.htmlBody && !parsed.body && parsed.attachments.length === 0) {
-          debug.warn('email', 'TNEF: Parsing succeeded but no content was extracted — the winmail.dat may use an unsupported format');
+          debug.warn('email', 'TNEF: Parsing succeeded but no content was extracted - the winmail.dat may use an unsupported format');
         }
 
         debug.groupEnd();
@@ -1970,7 +1975,7 @@ export function EmailViewer({
         const parsed = await parser.parse(new Uint8Array(blobBytes));
         if (cancelled) { debug.groupEnd(); return; }
 
-        debug.log('email', 'Embedded RFC822 parsed — html:', !!parsed.html, '(' + (parsed.html?.length ?? 0) + ' chars)',
+        debug.log('email', 'Embedded RFC822 parsed - html:', !!parsed.html, '(' + (parsed.html?.length ?? 0) + ' chars)',
           ', text:', !!parsed.text, '(' + (parsed.text?.length ?? 0) + ' chars)',
           ', attachments:', parsed.attachments?.length ?? 0);
 
@@ -2079,11 +2084,15 @@ export function EmailViewer({
       }));
     }
 
+    const hasCalInvitation = calendarInvitationParsingEnabled && !!email && !!findCalendarAttachment(email);
     const jmapAttachments = (email?.attachments ?? [])
       // Hide winmail.dat when we have successfully extracted TNEF content or attachments
       .filter(att => !(tnefHtml || tnefText || tnefAttachments.length > 0) || !isTnefAttachment(att.name, att.type))
       // Hide message/rfc822 when we have unwrapped the embedded email
       .filter(att => !embeddedEmailUnwrapped || att.type !== 'message/rfc822')
+      // Hide calendar MIME parts (text/calendar, application/ics) when the invitation
+      // banner is shown - prevents raw ICS files appearing as spurious attachments.
+      .filter(att => !hasCalInvitation || !isCalendarMimeType(att.type))
       .map((attachment, index) => ({
         id: attachment.blobId || `${attachment.name || 'attachment'}-${index}`,
         name: attachment.name || null,
@@ -2114,7 +2123,7 @@ export function EmailViewer({
       }));
 
     return [...jmapAttachments, ...tnefExtracted, ...embeddedExtracted];
-  }, [email?.attachments, smimeDecryptedAttachments, tnefHtml, tnefText, tnefAttachments, embeddedEmailUnwrapped, embeddedEmailAttachments]);
+  }, [email?.attachments, smimeDecryptedAttachments, tnefHtml, tnefText, tnefAttachments, embeddedEmailUnwrapped, embeddedEmailAttachments, calendarInvitationParsingEnabled]);
 
   // Generate email source for viewing
   const generateEmailSource = (email: Email): string => {
@@ -2309,9 +2318,11 @@ export function EmailViewer({
         // Use shared sanitization config as base (more secure)
         const sanitizeConfig = { ...EMAIL_SANITIZE_CONFIG };
 
-        // Check if sender is trusted
+        // Check if sender is trusted (localStorage list or address book)
         const senderEmail = email.from?.[0]?.email?.toLowerCase();
-        const senderIsTrusted = senderEmail ? isSenderTrusted(senderEmail) : false;
+        const senderIsTrusted = senderEmail
+          ? isSenderTrusted(senderEmail) || (trustedSendersAddressBook && isTrustedAddressBookSender(senderEmail))
+          : false;
 
         // Block external content based on policy:
         // 'allow' = never block, 'block' = always block (unless trusted), 'ask' = block until user allows or trusted
@@ -2418,7 +2429,7 @@ export function EmailViewer({
       html: '<p style="color: var(--color-muted-foreground);">No content available</p>',
       isHtml: false
     };
-  }, [email, allowExternalContent, hasBlockedContent, externalContentPolicy, isSenderTrusted, cidBlobUrls]);
+  }, [email, allowExternalContent, hasBlockedContent, externalContentPolicy, isSenderTrusted, isTrustedAddressBookSender, trustedSendersAddressBook, cidBlobUrls]);
 
   // Override email content with S/MIME decrypted content when available
   const effectiveEmailContent = useMemo(() => {
@@ -2950,7 +2961,7 @@ export function EmailViewer({
         <PluginSlot name="toolbar-actions" />
       </div>
 
-      {/* Right: Organize actions — order: archive, delete, move, star, tag, spam, read state, print, view source */}
+      {/* Right: Organize actions - order: archive, delete, move, star, tag, spam, read state, print, view source */}
       <div className="flex items-center gap-0 sm:gap-0.5">
         {isLoading && (
           <div className="mr-2 flex items-center gap-1.5 text-muted-foreground">
@@ -3047,7 +3058,7 @@ export function EmailViewer({
           <span className="text-[10px] leading-tight sm:hidden">{isStarred ? t('tooltips.unstar') : t('tooltips.star')}</span>
         </Button>
 
-        {/* Tag Picker — hidden on mobile, overflows to More menu */}
+        {/* Tag Picker - hidden on mobile, overflows to More menu */}
         <div data-overflow-item data-overflow-priority="6" className="hidden sm:flex items-center">
         <div className="w-px h-5 bg-border mx-0.5" />
         <div ref={tagMenuRef} className="relative">
@@ -3055,43 +3066,51 @@ export function EmailViewer({
             onClick={() => { setTagMenuOpen(!tagMenuOpen); setMoreMenuOpen(false); setMoveMenuOpen(false); }}
             className={cn(
               "h-8 rounded hover:bg-muted flex items-center gap-1.5 px-2",
-              currentColor && "bg-muted/50"
+              currentColors.length > 0 && "bg-muted/50"
             )}
             title={t('set_color')}
           >
-            {(() => {
-              const kw = currentColor ? emailKeywords.find(k => k.id === currentColor) : null;
-              const dotClass = kw ? KEYWORD_PALETTE[kw.color]?.dot : null;
-              return dotClass ? (
-                <>
-                  <span className={cn("w-3 h-3 rounded-full", dotClass)} />
-                  {showToolbarLabels && <span className="text-xs font-medium text-foreground">{kw!.label}</span>}
-                </>
-              ) : (
-                <>
-                  <Tag className="w-4 h-4 text-muted-foreground" />
-                  {showToolbarLabels && <span className="text-xs text-muted-foreground">{t('tag')}</span>}
-                </>
-              );
-            })()}
+            {currentColors.length > 0 ? (
+              <>
+                <span className="flex items-center gap-0.5">
+                  {currentColors.slice(0, 3).map((tagId) => {
+                    const kw = emailKeywords.find(k => k.id === tagId) ?? { id: tagId, label: tagId, color: 'gray' };
+                    return <span key={tagId} className={cn("w-3 h-3 rounded-full", KEYWORD_PALETTE[kw.color]?.dot || 'bg-gray-500')} />;
+                  })}
+                </span>
+                {showToolbarLabels && currentColors.length === 1 && (
+                  <span className="text-xs font-medium text-foreground">
+                    {emailKeywords.find(k => k.id === currentColors[0])?.label ?? currentColors[0]}
+                  </span>
+                )}
+              </>
+            ) : (
+              <>
+                <Tag className="w-4 h-4 text-muted-foreground" />
+                {showToolbarLabels && <span className="text-xs text-muted-foreground">{t('tag')}</span>}
+              </>
+            )}
           </button>
           {tagMenuOpen && (
             <div className="absolute right-0 top-full mt-1 py-1 w-40 bg-background rounded-lg shadow-lg border border-border z-10">
-              {colorOptions.map((option) => (
-                <button
-                  key={option.value}
-                  onClick={() => { if (email) onSetColorTag?.(email.id, option.value); setTagMenuOpen(false); }}
-                  className={cn(
-                    "w-full px-3 py-1.5 text-sm text-left hover:bg-muted flex items-center gap-2",
-                    currentColor === option.value && "bg-accent font-medium"
-                  )}
-                >
-                  <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
-                  <span className="truncate">{option.name}</span>
-                  {currentColor === option.value && <Check className="w-3 h-3 ml-auto flex-shrink-0 text-foreground" />}
-                </button>
-              ))}
-              {currentColor && (
+              {colorOptions.map((option) => {
+                const isActive = currentColors.includes(option.value);
+                return (
+                  <button
+                    key={option.value}
+                    onClick={() => { if (email) onSetColorTag?.(email.id, option.value); setTagMenuOpen(false); }}
+                    className={cn(
+                      "w-full px-3 py-1.5 text-sm text-left hover:bg-muted flex items-center gap-2",
+                      isActive && "bg-accent font-medium"
+                    )}
+                  >
+                    <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
+                    <span className="truncate">{option.name}</span>
+                    {isActive && <Check className="w-3 h-3 ml-auto flex-shrink-0 text-foreground" />}
+                  </button>
+                );
+              })}
+              {currentColors.length > 0 && (
                 <>
                   <div className="h-px bg-border my-1" />
                   <button
@@ -3108,7 +3127,7 @@ export function EmailViewer({
         </div>
         </div>
 
-        {/* Spam — hidden on mobile, overflows to More menu */}
+        {/* Spam - hidden on mobile, overflows to More menu */}
         {(onMarkAsSpam || onUndoSpam) && (
           <Button
             variant="ghost"
@@ -3130,7 +3149,7 @@ export function EmailViewer({
           </Button>
         )}
 
-        {/* Toggle read state — hidden on mobile, overflows to More menu */}
+        {/* Toggle read state - hidden on mobile, overflows to More menu */}
         <Button
           variant="ghost"
           size="sm"
@@ -3143,7 +3162,7 @@ export function EmailViewer({
           {isUnread ? <MailOpen className="w-4 h-4" /> : <Mail className="w-4 h-4" />}
         </Button>
 
-        {/* Print — hidden on mobile, overflows to More menu */}
+        {/* Print - hidden on mobile, overflows to More menu */}
         <Button
           variant="ghost"
           size="sm"
@@ -3157,7 +3176,7 @@ export function EmailViewer({
           {showToolbarLabels && <span className="hidden sm:inline text-sm">{t('print')}</span>}
         </Button>
 
-        {/* View source — hidden on mobile, overflows to More menu */}
+        {/* View source - hidden on mobile, overflows to More menu */}
         <Button
           variant="ghost"
           size="sm"
@@ -3185,7 +3204,7 @@ export function EmailViewer({
           </Button>
         )}
 
-        {/* More menu — click-based */}
+        {/* More menu - click-based */}
         <div ref={moreMenuRef} className="relative">
           <Button
             variant="ghost"
@@ -3231,7 +3250,7 @@ export function EmailViewer({
                 <Archive className="w-4 h-4" />
                 {t('archive')}
               </button>
-              {/* Overflow: move to folder — submenu */}
+              {/* Overflow: move to folder - submenu */}
               {moveTree.length > 0 && onMoveToMailbox && (
                 <div className={cn("relative", hiddenPriorities.has(5) ? "" : "sm:hidden")}
                   onMouseEnter={() => setMoreMenuSub('move')}
@@ -3283,7 +3302,7 @@ export function EmailViewer({
                   )}
                 </div>
               )}
-              {/* Overflow: tag — submenu */}
+              {/* Overflow: tag - submenu */}
               {colorOptions.length > 0 && (
                 <div className={cn("relative", hiddenPriorities.has(6) ? "" : "sm:hidden")}
                   onMouseEnter={() => setMoreMenuSub('tag')}
@@ -3299,21 +3318,24 @@ export function EmailViewer({
                   </button>
                   {moreMenuSub === 'tag' && (
                     <div className="absolute right-full top-0 mr-1 py-1 w-40 bg-background rounded-md shadow-lg border border-border z-10">
-                      {colorOptions.map((option) => (
-                        <button
-                          key={option.value}
-                          onClick={() => { if (email) onSetColorTag?.(email.id, option.value); setMoreMenuOpen(false); setMoreMenuSub(null); }}
-                          className={cn(
-                            "w-full px-3 py-1.5 text-sm text-left hover:bg-muted flex items-center gap-2",
-                            currentColor === option.value && "bg-accent font-medium"
-                          )}
-                        >
-                          <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
-                          <span className="truncate">{option.name}</span>
-                          {currentColor === option.value && <Check className="w-3 h-3 ml-auto flex-shrink-0 text-foreground" />}
-                        </button>
-                      ))}
-                      {currentColor && (
+                      {colorOptions.map((option) => {
+                        const isActive = currentColors.includes(option.value);
+                        return (
+                          <button
+                            key={option.value}
+                            onClick={() => { if (email) onSetColorTag?.(email.id, option.value); setMoreMenuOpen(false); setMoreMenuSub(null); }}
+                            className={cn(
+                              "w-full px-3 py-1.5 text-sm text-left hover:bg-muted flex items-center gap-2",
+                              isActive && "bg-accent font-medium"
+                            )}
+                          >
+                            <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
+                            <span className="truncate">{option.name}</span>
+                            {isActive && <Check className="w-3 h-3 ml-auto flex-shrink-0 text-foreground" />}
+                          </button>
+                        );
+                      })}
+                      {currentColors.length > 0 && (
                         <>
                           <div className="h-px bg-border my-1" />
                           <button
@@ -3489,21 +3511,24 @@ export function EmailViewer({
             <>
               <div className="h-px bg-border my-1" />
               <div className="px-4 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('tag')}</div>
-              {colorOptions.map((option) => (
-                <button
-                  key={option.value}
-                  onClick={() => { if (email) onSetColorTag?.(email.id, option.value); setMoreMenuOpen(false); }}
-                  className={cn(
-                    "w-full px-4 py-2.5 min-h-[44px] text-sm text-left hover:bg-muted flex items-center gap-3",
-                    currentColor === option.value && "bg-accent font-medium"
-                  )}
-                >
-                  <span className={cn("w-3.5 h-3.5 rounded-full flex-shrink-0", option.color)} />
-                  <span className="truncate">{option.name}</span>
-                  {currentColor === option.value && <Check className="w-4 h-4 ml-auto flex-shrink-0 text-foreground" />}
-                </button>
-              ))}
-              {currentColor && (
+              {colorOptions.map((option) => {
+                const isActive = currentColors.includes(option.value);
+                return (
+                  <button
+                    key={option.value}
+                    onClick={() => { if (email) onSetColorTag?.(email.id, option.value); setMoreMenuOpen(false); }}
+                    className={cn(
+                      "w-full px-4 py-2.5 min-h-[44px] text-sm text-left hover:bg-muted flex items-center gap-3",
+                      isActive && "bg-accent font-medium"
+                    )}
+                  >
+                    <span className={cn("w-3.5 h-3.5 rounded-full flex-shrink-0", option.color)} />
+                    <span className="truncate">{option.name}</span>
+                    {isActive && <Check className="w-4 h-4 ml-auto flex-shrink-0 text-foreground" />}
+                  </button>
+                );
+              })}
+              {currentColors.length > 0 && (
                 <button
                   onClick={() => { if (email) onSetColorTag?.(email.id, null); setMoreMenuOpen(false); }}
                   className="w-full px-4 py-2.5 min-h-[44px] text-sm text-left hover:bg-muted flex items-center gap-3 text-muted-foreground"
@@ -3649,14 +3674,18 @@ export function EmailViewer({
                     )} />
                   </button>
                 )}
-                {/* Color tag dot */}
-                {currentColor && (() => {
-                  const kw = emailKeywords.find(k => k.id === currentColor);
-                  const dotClass = kw ? KEYWORD_PALETTE[kw.color]?.dot : null;
-                  return dotClass ? (
-                    <span className={cn("w-2.5 h-2.5 rounded-full flex-shrink-0", dotClass)} title={kw!.label} />
-                  ) : null;
-                })()}
+                {/* Color tag dots */}
+                {currentColors.length > 0 && (
+                  <span className="flex items-center gap-0.5">
+                    {currentColors.map((tagId) => {
+                      const kw = emailKeywords.find(k => k.id === tagId) ?? { id: tagId, label: tagId, color: 'gray' };
+                      const dotClass = KEYWORD_PALETTE[kw.color]?.dot || 'bg-gray-500';
+                      return (
+                        <span key={tagId} className={cn("w-2.5 h-2.5 rounded-full flex-shrink-0", dotClass)} title={kw.label} />
+                      );
+                    })}
+                  </span>
+                )}
                 {isImportant && (
                   <span className="px-1.5 lg:px-2 py-0.5 bg-warning/15 text-warning rounded-full text-xs font-medium whitespace-nowrap flex-shrink-0 self-center">
                     {t('important')}
@@ -4010,7 +4039,7 @@ export function EmailViewer({
                                   <div className="flex-1">
                                     <div className="text-xs font-medium text-gray-900 dark:text-gray-100 flex items-center gap-1">
                                       Spam Score
-                                      <InfoTooltip text="A score assigned by the server based on spam analysis. Lower is better — scores above 5 are likely spam" />
+                                      <InfoTooltip text="A score assigned by the server based on spam analysis. Lower is better - scores above 5 are likely spam" />
                                     </div>
                                     <div className={cn(
                                       "text-xs",
@@ -4545,7 +4574,11 @@ export function EmailViewer({
                         onClick={() => {
                           const senderEmail = email.from?.[0]?.email;
                           if (senderEmail) {
-                            addTrustedSender(senderEmail);
+                            if (trustedSendersAddressBook && client) {
+                              addToTrustedSendersBook(client, senderEmail).catch(console.error);
+                            } else {
+                              addTrustedSender(senderEmail);
+                            }
                             setAllowExternalContent(true);
                           }
                         }}

components/email/recipient-popover.tsx

@@ -14,7 +14,7 @@ interface RecipientPopoverProps {
   email: string;
   /** Display label override (e.g. "me") */
   displayLabel?: string;
-  /** Called when user clicks "View contact" — receives the contact and email */
+  /** Called when user clicks "View contact" - receives the contact and email */
   onViewContact?: (contact: ContactCard | null, email: string) => void;
   className?: string;
 }

components/email/thread-conversation-view.tsx

@@ -31,6 +31,7 @@ import {
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useSettingsStore } from "@/stores/settings-store";
+import { useContactStore } from "@/stores/contact-store";
 import { useAuthStore } from "@/stores/auth-store";
 import { isFilePreviewable } from "@/lib/file-preview";
 
@@ -84,6 +85,10 @@ export function ThreadConversationView({
   const externalContentPolicy = useSettingsStore((state) => state.externalContentPolicy);
   const addTrustedSender = useSettingsStore((state) => state.addTrustedSender);
   const isSenderTrusted = useSettingsStore((state) => state.isSenderTrusted);
+  const trustedSendersAddressBook = useSettingsStore((state) => state.trustedSendersAddressBook);
+  const isTrustedAddressBookSender = useContactStore((state) => state.isTrustedAddressBookSender);
+  const addToTrustedSendersBook = useContactStore((state) => state.addToTrustedSendersBook);
+  const { client } = useAuthStore();
 
   // Track which emails are expanded (most recent by default)
   const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
@@ -164,7 +169,9 @@ export function ThreadConversationView({
         <div className="space-y-3" style={{ padding: 'var(--density-card-p)' }}>
           {emails.map((email, index) => {
             const senderEmail = email.from?.[0]?.email?.toLowerCase();
-            const senderIsTrusted = senderEmail ? isSenderTrusted(senderEmail) : false;
+            const senderIsTrusted = senderEmail
+              ? isSenderTrusted(senderEmail) || (trustedSendersAddressBook && isTrustedAddressBookSender(senderEmail))
+              : false;
             return (
               <EmailCard
                 key={email.id}
@@ -175,7 +182,11 @@ export function ThreadConversationView({
                 onToggleExpanded={() => toggleExpanded(email.id)}
                 onAllowExternal={() => toggleAllowExternal(email.id)}
                 onTrustSender={senderEmail ? () => {
-                  addTrustedSender(senderEmail);
+                  if (trustedSendersAddressBook && client) {
+                    addToTrustedSendersBook(client, senderEmail).catch(console.error);
+                  } else {
+                    addTrustedSender(senderEmail);
+                  }
                   toggleAllowExternal(email.id);
                 } : undefined}
                 onReply={onReply ? () => onReply(email) : undefined}

components/email/thread-list-item.tsx

@@ -9,7 +9,8 @@ import { Paperclip, Star, Circle, ChevronRight, ChevronDown, Loader2, MessageSqu
 import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";
 import { useUIStore } from "@/stores/ui-store";
 import { useEmailStore } from "@/stores/email-store";
-import { getThreadColorTag, getEmailColorTag } from "@/lib/thread-utils";
+import { useAccountStore } from "@/stores/account-store";
+import { getThreadColorTag, getEmailColorTags } from "@/lib/thread-utils";
 import { useEmailDrag } from "@/hooks/use-email-drag";
 import { useLongPress } from "@/hooks/use-long-press";
 import { ThreadEmailItem } from "./thread-email-item";
@@ -63,13 +64,17 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
     const emailKeywords = useSettingsStore((state) => state.emailKeywords);
     const density = useSettingsStore((state) => state.density);
     const mailLayout = useSettingsStore((state) => state.mailLayout);
+    const isUnifiedView = useEmailStore((state) => state.isUnifiedView);
+    const getAccountById = useAccountStore((state) => state.getAccountById);
+    const accountColor = email.accountId ? getAccountById(email.accountId)?.avatarColor : undefined;
     const isChecked = selectedEmailIds.has(email.id);
     const isFocusedMailLayout = mailLayout === 'focus';
     const inlinePreview = showPreview && email.preview ? ` ${email.preview}` : '';
 
-    // Resolve color and keyword definition from keyword definitions if not passed directly
-    const tagId = getEmailColorTag(email.keywords);
-    const resolvedKeywordDef = tagId ? emailKeywords.find(k => k.id === tagId) : null;
+    // Resolve color tags using keyword definitions; unknown tags fall back to gray
+    const tagIds = getEmailColorTags(email.keywords);
+    const resolvedKeywordDefs = tagIds.map(id => emailKeywords.find(k => k.id === id) ?? { id, label: id, color: 'gray' });
+    const resolvedKeywordDef = resolvedKeywordDefs[0] ?? null;
     const resolvedColorTag = (() => {
       if (colorTag) return colorTag;
       return resolvedKeywordDef ? KEYWORD_PALETTE[resolvedKeywordDef.color]?.bg ?? null : null;
@@ -183,6 +188,13 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
             {isFocusedMailLayout ? (
               <div className="flex items-center justify-between gap-3">
                 <div className="flex min-w-0 flex-1 items-center gap-3">
+                  {isUnifiedView && email.accountId && accountColor && (
+                    <span
+                      className="w-2 h-2 rounded-full flex-shrink-0"
+                      style={{ backgroundColor: accountColor }}
+                      title={email.accountLabel}
+                    />
+                  )}
                   <span className={cn(
                     'w-32 shrink-0 truncate text-sm lg:w-40',
                     isUnread ? 'font-semibold text-foreground' : 'font-medium text-foreground/80'
@@ -212,7 +224,9 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
                     </>
                   )}
                   {email.hasAttachment && <Paperclip className="w-3.5 h-3.5 text-muted-foreground" />}
-                  {resolvedKeywordDef && <span className={cn('h-2.5 w-2.5 rounded-full', KEYWORD_PALETTE[resolvedKeywordDef.color]?.dot || 'bg-gray-400')} />}
+                  {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')} />
+                  ))}
                   <span className={cn(
                     'text-xs tabular-nums',
                     isUnread ? 'text-foreground font-semibold' : 'text-muted-foreground'
@@ -225,6 +239,13 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
               <>
                 <div className="flex items-center justify-between gap-2 mb-1">
                   <div className="flex items-center gap-2 min-w-0 flex-1">
+                    {isUnifiedView && email.accountId && accountColor && (
+                      <span
+                        className="w-2 h-2 rounded-full flex-shrink-0"
+                        style={{ backgroundColor: accountColor }}
+                        title={email.accountLabel}
+                      />
+                    )}
                     <span className={cn(
                       "truncate text-sm",
                       isUnread
@@ -255,15 +276,15 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
                     </div>
                   </div>
                   <div className="flex items-center gap-1.5 flex-shrink-0">
-                    {resolvedKeywordDef && (
-                      <span className={cn(
+                    {resolvedKeywordDefs.map((kd) => (
+                      <span key={kd.id} className={cn(
                         "inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded-full",
-                        KEYWORD_PALETTE[resolvedKeywordDef.color]?.bg || "bg-muted"
+                        KEYWORD_PALETTE[kd.color]?.bg || "bg-muted"
                       )}>
-                        <span className={cn("w-1.5 h-1.5 rounded-full", KEYWORD_PALETTE[resolvedKeywordDef.color]?.dot || "bg-gray-400")} />
-                        {resolvedKeywordDef.label}
+                        <span className={cn("w-1.5 h-1.5 rounded-full", KEYWORD_PALETTE[kd.color]?.dot || "bg-gray-400")} />
+                        {kd.label}
                       </span>
-                    )}
+                    ))}
                     <span className={cn(
                       "text-xs tabular-nums",
                       isUnread
@@ -342,7 +363,9 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
     const isFocusedMailLayout = mailLayout === 'focus';
     const inlinePreview = showPreview && latestEmail.preview ? ` ${latestEmail.preview}` : '';
 
-    const { selectedMailbox, mailboxes, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection } = useEmailStore();
+    const { selectedMailbox, mailboxes, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection, isUnifiedView } = useEmailStore();
+    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")
     const currentMailboxRole = mailboxes.find(mb => mb.id === selectedMailbox)?.role;
     const showRecipient = currentMailboxRole === 'sent' || currentMailboxRole === 'drafts';
@@ -372,7 +395,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
 
     const threadColor = getThreadColorTag(thread.emails);
     const emailKeywordDefs = useSettingsStore((state) => state.emailKeywords);
-    const keywordDef = threadColor ? emailKeywordDefs.find(k => k.id === threadColor) : null;
+    const keywordDef = threadColor ? (emailKeywordDefs.find(k => k.id === threadColor) ?? { id: threadColor, label: threadColor, color: 'gray' }) : null;
     const colorTag = keywordDef ? KEYWORD_PALETTE[keywordDef.color]?.bg ?? null : null;
 
     const isSelected = selectedEmailId === latestEmail.id ||
@@ -545,6 +568,13 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
               {isFocusedMailLayout ? (
                 <div className="flex items-center justify-between gap-3">
                   <div className="flex min-w-0 flex-1 items-center gap-3">
+                    {isUnifiedView && latestEmail.accountId && threadAccountColor && (
+                      <span
+                        className="w-2 h-2 rounded-full flex-shrink-0"
+                        style={{ backgroundColor: threadAccountColor }}
+                        title={latestEmail.accountLabel}
+                      />
+                    )}
                     <span className={cn(
                       'w-32 shrink-0 truncate text-sm lg:w-44',
                       hasUnread ? 'font-semibold text-foreground' : 'font-medium text-foreground/80'
@@ -584,7 +614,9 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                       </>
                     )}
                     {hasAttachment && <Paperclip className="w-3.5 h-3.5 text-muted-foreground" />}
-                    {keywordDef && <span className={cn('h-2.5 w-2.5 rounded-full', KEYWORD_PALETTE[keywordDef.color]?.dot || 'bg-gray-400')} />}
+                    {keywordDef && (
+                      <span className={cn('h-2.5 w-2.5 rounded-full', KEYWORD_PALETTE[keywordDef.color]?.dot || 'bg-gray-400')} />
+                    )}
                     <span className={cn(
                       'text-xs tabular-nums',
                       hasUnread ? 'text-foreground font-semibold' : 'text-muted-foreground'
@@ -597,6 +629,13 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                 <>
                   <div className="flex items-center justify-between gap-2 mb-1">
                     <div className="flex items-center gap-2 min-w-0 flex-1">
+                      {isUnifiedView && latestEmail.accountId && threadAccountColor && (
+                        <span
+                          className="w-2 h-2 rounded-full flex-shrink-0"
+                          style={{ backgroundColor: threadAccountColor }}
+                          title={latestEmail.accountLabel}
+                        />
+                      )}
                       <span className={cn(
                         "truncate text-sm",
                         hasUnread

components/files/file-browser.tsx

@@ -412,7 +412,7 @@ export function FileBrowser({
   // Filter and sort resources
   const displayResources = useMemo(() => {
     let filtered = resources;
-    // In sidebar mode, folders are shown in the sidebar tree — hide them from the main list
+    // In sidebar mode, folders are shown in the sidebar tree - hide them from the main list
     if (folderLayout === "sidebar") {
       filtered = filtered.filter(r => !r.isDirectory);
     }
@@ -1466,7 +1466,7 @@ export function FileBrowser({
                     </div>
                   </td>
                   <td className="px-4 py-2.5 text-muted-foreground hidden md:table-cell tabular-nums">
-                    {resource.isDirectory ? "—" : formatFileSize(resource.contentLength)}
+                    {resource.isDirectory ? "-" : formatFileSize(resource.contentLength)}
                   </td>
                   <td className="px-4 py-2.5 text-muted-foreground hidden lg:table-cell tabular-nums">
                     {formatDate(resource.lastModified)}

components/files/folder-tree-sidebar.tsx

@@ -58,7 +58,7 @@ export function FolderTreeSidebar({ currentPath, onNavigate, listByParentId, wid
           };
         });
 
-      // Don't cache empty root results — empty root likely means client wasn't ready yet
+      // Don't cache empty root results - empty root likely means client wasn't ready yet
       if (folders.length > 0 || parentId !== null) {
         setChildrenCache(prev => new Map(prev).set(cacheKey, folders));
       }

components/filters/filter-rule-modal.tsx

@@ -17,6 +17,7 @@ import type {
 } from "@/lib/jmap/sieve-types";
 import type { Mailbox } from "@/lib/jmap/types";
 import { buildMailboxTree, flattenMailboxTree, type MailboxNode, generateUUID } from "@/lib/utils";
+import { useSettingsStore } from "@/stores/settings-store";
 
 interface FilterRuleModalProps {
   rule?: FilterRule;
@@ -58,6 +59,7 @@ export function FilterRuleModal({
 }: FilterRuleModalProps) {
   const t = useTranslations("settings.filters");
   const isEdit = !!rule;
+  const emailKeywords = useSettingsStore((state) => state.emailKeywords);
 
   const [name, setName] = useState(rule?.name || "");
   const [matchType, setMatchType] = useState<"all" | "any">(rule?.matchType || "all");
@@ -375,12 +377,17 @@ export function FilterRuleModal({
                   )}
 
                   {action.type === "add_label" && (
-                    <Input
+                    <select
                       value={action.value || ""}
                       onChange={(e) => updateAction(index, { value: e.target.value })}
-                      placeholder={t("label_placeholder")}
-                      className="flex-1 min-w-[140px]"
-                    />
+                      className={`${selectClass} flex-1 min-w-[140px]`}
+                      aria-label={t("label_placeholder")}
+                    >
+                      <option value="">{t("label_placeholder")}</option>
+                      {emailKeywords.map((kw) => (
+                        <option key={kw.id} value={kw.id}>{kw.label}</option>
+                      ))}
+                    </select>
                   )}
 
                   <button

components/layout/navigation-rail.tsx

@@ -22,6 +22,7 @@ import { getInitials } from "@/lib/account-utils";
 import { cn, formatFileSize } from "@/lib/utils";
 import { PluginSlot } from "@/components/plugins/plugin-slot";
 import { KeyboardShortcutsModal } from "@/components/keyboard-shortcuts-modal";
+import { apiFetch } from "@/lib/browser-navigation";
 
 interface NavItem {
   id: string;
@@ -222,13 +223,13 @@ export function NavigationRail({
     let cancelled = false;
     const headers = getActiveAccountSlotHeaders();
     if (!headers['X-JMAP-Cookie-Slot']) return;
-    fetch('/api/admin/stalwart-check', { headers })
+    apiFetch('/api/admin/stalwart-check', { headers })
       .then(res => res.json())
       .then(data => {
         if (!cancelled && data.isStalwartAdmin) {
           setIsStalwartAdmin(true);
           // Pre-create admin session so /admin works even after full page navigation
-          fetch('/api/admin/auth', {
+          apiFetch('/api/admin/auth', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json', ...headers },
             body: JSON.stringify({ stalwartAuth: true }),

components/layout/sidebar-apps-modal.tsx

@@ -155,7 +155,7 @@ function SidebarAppForm({
           {t('icon_label')} <span className="text-destructive">*</span>
           {SelectedIcon && (
             <span className="inline-flex items-center gap-1.5 ml-2 text-muted-foreground font-normal">
-              — <SelectedIcon className="w-4 h-4" /> {formData.icon}
+              - <SelectedIcon className="w-4 h-4" /> {formData.icon}
             </span>
           )}
         </label>

components/providers/intl-provider.tsx

@@ -15,6 +15,7 @@ import nlMessages from '@/locales/nl/common.json';
 import plMessages from '@/locales/pl/common.json';
 import ptMessages from '@/locales/pt/common.json';
 import ruMessages from '@/locales/ru/common.json';
+import ukMessages from '@/locales/uk/common.json';
 import zhMessages from '@/locales/zh/common.json';
 
 // Pre-loaded translations (loaded at build time, not runtime)
@@ -31,6 +32,7 @@ const ALL_MESSAGES = {
   pl: plMessages,
   pt: ptMessages,
   ru: ruMessages,
+  uk: ukMessages,
   zh: zhMessages,
 };
 

components/pwa-install-prompt.tsx

@@ -2,18 +2,24 @@
 
 import { useEffect, useState } from "react";
 import { X, Download } from "lucide-react";
+import { useConfig } from "@/hooks/use-config";
 
 interface BeforeInstallPromptEvent extends Event {
   prompt: () => Promise<void>;
   userChoice: Promise<{ outcome: "accepted" | "dismissed" }>;
 }
 
+const DISMISSED_KEY = "pwa-install-dismissed";
+
 export function PWAInstallPrompt() {
   const [deferredPrompt, setDeferredPrompt] =
     useState<BeforeInstallPromptEvent | null>(null);
   const [showPrompt, setShowPrompt] = useState(false);
+  const { appName, faviconUrl, appLogoLightUrl, appLogoDarkUrl } = useConfig();
 
   useEffect(() => {
+    if (localStorage.getItem(DISMISSED_KEY)) return;
+
     const handler = (e: Event) => {
       e.preventDefault();
       setDeferredPrompt(e as BeforeInstallPromptEvent);
@@ -43,18 +49,40 @@ export function PWAInstallPrompt() {
     setShowPrompt(false);
   };
 
+  const handleDismissForever = () => {
+    localStorage.setItem(DISMISSED_KEY, "1");
+    setShowPrompt(false);
+  };
+
   if (!showPrompt || !deferredPrompt) {
     return null;
   }
 
+  const logoSrc = appLogoLightUrl || faviconUrl;
+
   return (
     <div className="fixed bottom-4 right-4 z-50 bg-white dark:bg-neutral-900 rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-800 p-4 max-w-sm animate-in slide-in-from-bottom-4">
       <div className="flex items-start justify-between mb-3">
         <div className="flex items-start gap-3">
-          <Download className="w-5 h-5 mt-0.5 text-blue-600 dark:text-blue-400 flex-shrink-0" />
+          {logoSrc ? (
+            <img
+              src={logoSrc}
+              alt={appName}
+              className="w-8 h-8 shrink-0 object-contain dark:hidden"
+            />
+          ) : (
+            <Download className="w-5 h-5 mt-0.5 text-blue-600 dark:text-blue-400 shrink-0" />
+          )}
+          {logoSrc && (
+            <img
+              src={appLogoDarkUrl || faviconUrl}
+              alt={appName}
+              className="w-8 h-8 shrink-0 object-contain hidden dark:block"
+            />
+          )}
           <div>
             <h3 className="font-semibold text-sm text-neutral-900 dark:text-white">
-              Install Bulwark
+              Install {appName}
             </h3>
             <p className="text-xs text-neutral-600 dark:text-neutral-400 mt-1">
               Install our app for quick access and offline support.
@@ -69,18 +97,26 @@ export function PWAInstallPrompt() {
           <X className="w-4 h-4" />
         </button>
       </div>
-      <div className="flex gap-2">
+      <div className="flex flex-col gap-2">
+        <div className="flex gap-2">
+          <button
+            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
+          </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
+          </button>
+        </div>
         <button
-          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"
+          onClick={handleDismissForever}
+          className="w-full text-xs text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors text-center"
         >
-          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
+          Don&apos;t remind me again
         </button>
       </div>
     </div>

components/settings/appearance-settings.tsx

@@ -10,6 +10,7 @@ import { useTour } from '@/components/tour/tour-provider';
 import { Button } from '@/components/ui/button';
 import { PlayCircle } from 'lucide-react';
 import { usePolicyStore } from '@/stores/policy-store';
+import { useAccountStore } from '@/stores/account-store';
 
 const DENSITY_PREVIEW: Record<Density, { py: string; gap: string; showAvatar: boolean; showPreview: boolean }> = {
   'extra-compact': { py: 'py-0.5', gap: 'gap-1.5', showAvatar: false, showPreview: false },
@@ -21,7 +22,7 @@ const DENSITY_PREVIEW: Record<Density, { py: string; gap: string; showAvatar: bo
 function DensityPreview({ density }: { density: Density }) {
   const cfg = DENSITY_PREVIEW[density];
   const rows = [
-    { unread: true,  sender: 'Alice Johnson',  subject: 'Project update — Q1 roadmap', preview: 'Here are the latest numbers from…' },
+    { unread: true,  sender: 'Alice Johnson',  subject: 'Project update - Q1 roadmap', preview: 'Here are the latest numbers from…' },
     { unread: false, sender: 'Bob Smith',       subject: 'Re: Meeting notes',           preview: 'Thanks, will review and get back...' },
     { unread: true,  sender: 'Carol Lee',       subject: 'Invoice #4092',               preview: 'Please find attached the invoice…' },
   ];
@@ -67,9 +68,10 @@ export function AppearanceSettings() {
   const t = useTranslations('settings.appearance');
   const tTour = useTranslations('tour');
   const { theme, setTheme } = useThemeStore();
-  const { fontSize, density, animationsEnabled, toolbarPosition, showToolbarLabels, hideAccountSwitcher, showRailAccountList, updateSetting } = useSettingsStore();
+  const { fontSize, density, animationsEnabled, toolbarPosition, showToolbarLabels, hideAccountSwitcher, showRailAccountList, enableUnifiedMailbox, colorfulSidebarIcons, updateSetting } = useSettingsStore();
   const { startTour, resetTourCompletion } = useTour();
   const { isSettingLocked, isSettingHidden } = usePolicyStore();
+  const accounts = useAccountStore(s => s.accounts);
 
   return (
     <SettingsSection title={t('title')} description={t('description')}>
@@ -161,6 +163,27 @@ export function AppearanceSettings() {
         />
       </SettingItem>
 
+      {/* Colorful Sidebar Icons */}
+      <SettingItem label={t('colorful_sidebar_icons.label')} description={t('colorful_sidebar_icons.description')}>
+        <ToggleSwitch
+          checked={colorfulSidebarIcons}
+          onChange={(checked) => updateSetting('colorfulSidebarIcons', checked)}
+        />
+      </SettingItem>
+
+      {/* Unified Mailbox */}
+      {accounts.length > 1 && (
+        <SettingItem
+          label={t('unified_mailbox.label')}
+          description={t('unified_mailbox.description')}
+        >
+          <ToggleSwitch
+            checked={enableUnifiedMailbox}
+            onChange={(v) => updateSetting('enableUnifiedMailbox', v)}
+          />
+        </SettingItem>
+      )}
+
       {/* Animations */}
       {!isSettingHidden('animationsEnabled') && (
       <SettingItem label={t('animations.label')} description={t('animations.description')} locked={isSettingLocked('animationsEnabled')}>

components/settings/calendar-management-settings.tsx

@@ -12,6 +12,7 @@ import { cn, formatDateTime } 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 { apiFetch } from '@/lib/browser-navigation';
 
 const CALENDAR_COLORS = [
   "#3b82f6", // blue
@@ -202,7 +203,7 @@ export function CalendarManagementSettings() {
 
     const controller = new AbortController();
 
-    fetch('/api/caldav/discover', {
+    apiFetch('/api/caldav/discover', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

components/settings/email-settings.tsx

@@ -11,8 +11,9 @@ import { useEmailStore } from '@/stores/email-store';
 import { cn } from '@/lib/utils';
 import { RadioGroup, SettingsSection, SettingItem, Select, ToggleSwitch } from './settings-section';
 import { TrustedSendersModal } from '@/components/trusted-senders-modal';
-import { ChevronRight, AlertTriangle, FolderSync, Loader2, Mail } from 'lucide-react';
+import { ChevronRight, AlertTriangle, FolderSync, Loader2, Mail, X } from 'lucide-react';
 import { usePolicyStore } from '@/stores/policy-store';
+import { useContactStore } from '@/stores/contact-store';
 
 const MAIL_LAYOUT_PREVIEW_ROWS = [
   { sender: 'Alice', subject: 'Quarterly roadmap', preview: 'The draft is ready for review.', selected: false },
@@ -110,6 +111,8 @@ export function EmailSettings() {
     }
   }, []);
 
+  const [newKeyword, setNewKeyword] = useState('');
+
   const {
     markAsReadDelay,
     deleteAction,
@@ -129,12 +132,16 @@ export function EmailSettings() {
     hoverActionsMode,
     hoverActionsCorner,
     trustedSenders,
+    trustedSendersAddressBook,
+    attachmentReminderEnabled,
+    attachmentReminderKeywords,
     updateSetting,
   } = useSettingsStore();
+  const { trustedSenderEmails } = useContactStore();
 
   // Get count label for trusted senders button
   const getTrustedSendersCount = () => {
-    const count = trustedSenders.length;
+    const count = trustedSendersAddressBook ? trustedSenderEmails.length : trustedSenders.length;
     if (count === 0) return t('trusted_senders.count_zero');
     if (count === 1) return t('trusted_senders.count_one');
     return t('trusted_senders.count_other', { count });
@@ -337,6 +344,63 @@ export function EmailSettings() {
         />
       </SettingItem>
 
+      {/* Attachment Reminder */}
+      <SettingItem label={t('attachment_reminder.label')} description={t('attachment_reminder.description')}>
+        <ToggleSwitch
+          checked={attachmentReminderEnabled}
+          onChange={(checked) => updateSetting('attachmentReminderEnabled', checked)}
+        />
+      </SettingItem>
+      {attachmentReminderEnabled && (
+        <div className="py-3 border-b border-border space-y-2">
+          <div>
+            <label className="text-sm font-medium text-foreground">{t('attachment_reminder.keywords_label')}</label>
+            <p className="text-xs text-muted-foreground mt-1">{t('attachment_reminder.keywords_description')}</p>
+          </div>
+          <div className="flex flex-wrap gap-1.5">
+            {attachmentReminderKeywords.map((kw) => (
+              <span key={kw} className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-muted text-foreground">
+                {kw}
+                <button
+                  type="button"
+                  aria-label={t('attachment_reminder.remove')}
+                  onClick={() => updateSetting('attachmentReminderKeywords', attachmentReminderKeywords.filter(k => k !== kw))}
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  <X className="w-3 h-3" />
+                </button>
+              </span>
+            ))}
+          </div>
+          <form
+            className="flex gap-2"
+            onSubmit={(e) => {
+              e.preventDefault();
+              const trimmed = newKeyword.trim().toLowerCase();
+              if (trimmed && !attachmentReminderKeywords.includes(trimmed)) {
+                updateSetting('attachmentReminderKeywords', [...attachmentReminderKeywords, trimmed]);
+              }
+              setNewKeyword('');
+            }}
+          >
+            <input
+              type="text"
+              value={newKeyword}
+              onChange={(e) => setNewKeyword(e.target.value)}
+              placeholder={t('attachment_reminder.add_placeholder')}
+              className="flex-1 min-w-0 px-2 py-1 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-ring"
+            />
+            <button
+              type="submit"
+              disabled={!newKeyword.trim()}
+              className="px-3 py-1 text-sm bg-muted hover:bg-accent rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {t('attachment_reminder.add')}
+            </button>
+          </form>
+        </div>
+      )}
+
       {/* Quick Hover Actions */}
       {isFeatureEnabled('hoverActionsConfigEnabled') && (
       <div className="py-3 border-b border-border space-y-3">
@@ -511,6 +575,14 @@ export function EmailSettings() {
         </button>
       </SettingItem>
 
+      {/* Trusted Senders - address book storage */}
+      <SettingItem label={t('trusted_senders.use_address_book_label')} description={t('trusted_senders.use_address_book_description')}>
+        <ToggleSwitch
+          checked={trustedSendersAddressBook}
+          onChange={(checked) => updateSetting('trustedSendersAddressBook', checked)}
+        />
+      </SettingItem>
+
       {/* Trusted Senders Modal */}
       <TrustedSendersModal
         isOpen={showTrustedModal}

components/settings/files-settings.tsx

@@ -49,7 +49,7 @@ function getPreviewIcon(file: SampleFile, colored: boolean, size: "sm" | "lg") {
 }
 
 function formatSize(bytes: number): string {
-  if (bytes === 0) return "—";
+  if (bytes === 0) return "-";
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;

components/settings/filter-settings.tsx

@@ -23,8 +23,13 @@ import {
   Filter,
   RotateCcw,
   PalmtreeIcon,
+  Lock,
 } from "lucide-react";
 
+function isReadonlyRule(r: FilterRule): boolean {
+  return r.origin === "external" || r.origin === "opaque";
+}
+
 function RuleSummary({ rule }: { rule: FilterRule }) {
   const t = useTranslations("settings.filters");
 
@@ -429,90 +434,137 @@ export function FilterSettings() {
 
         {!isOpaque && rules.length > 0 && (
           <div className="space-y-1" role="list" aria-label={t("rule_list")}>
-            {rules.map((rule, index) => (
-              <div
-                key={rule.id}
-                role="listitem"
-                draggable
-                onDragStart={(e) => handleDragStart(e, index)}
-                onDragOver={(e) => handleDragOver(e, index)}
-                onDrop={(e) => handleDrop(e, index)}
-                onDragEnd={handleDragEnd}
-                className={`flex items-start gap-3 p-3 rounded-md border transition-colors ${
-                  dragOverIndex === index
-                    ? "border-primary bg-primary/5"
-                    : "border-border hover:bg-muted/50"
-                } ${!rule.enabled ? "opacity-60" : ""}`}
-              >
+            {rules.map((rule, index) => {
+              const readonly = isReadonlyRule(rule);
+
+              if (readonly) {
+                const label = rule.originLabel || t("origin_external");
+                const tooltip = t("managed_by_tooltip", { source: label });
+                const hasStructuredSummary =
+                  rule.origin === "external" &&
+                  rule.conditions.length > 0 &&
+                  rule.actions.length > 0;
+                return (
+                  <div
+                    key={rule.id}
+                    role="listitem"
+                    className="flex items-start gap-3 p-3 rounded-md border border-border"
+                    title={tooltip}
+                  >
+                    <div className="pt-0.5 text-muted-foreground" aria-label={tooltip}>
+                      <Lock className="w-4 h-4" />
+                    </div>
+
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <p className="text-sm font-medium text-foreground truncate">
+                          {rule.name}
+                        </p>
+                        <span className="inline-flex items-baseline px-1.5 py-px rounded-sm bg-muted/60 text-muted-foreground text-[10px]">
+                          {label}
+                        </span>
+                      </div>
+                      {hasStructuredSummary ? (
+                        expandedFilterView ? (
+                          <VisualRuleSummary rule={rule} />
+                        ) : (
+                          <RuleSummary rule={rule} />
+                        )
+                      ) : rule.rawBlock ? (
+                        <pre className="mt-1.5 text-xs font-mono whitespace-pre-wrap break-all text-muted-foreground bg-muted rounded p-2 max-h-32 overflow-y-auto">
+                          {rule.rawBlock.trim()}
+                        </pre>
+                      ) : null}
+                    </div>
+                  </div>
+                );
+              }
+
+              return (
                 <div
-                  className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground pt-0.5"
-                  aria-label={t("drag_to_reorder")}
+                  key={rule.id}
+                  role="listitem"
+                  draggable
+                  onDragStart={(e) => handleDragStart(e, index)}
+                  onDragOver={(e) => handleDragOver(e, index)}
+                  onDrop={(e) => handleDrop(e, index)}
+                  onDragEnd={handleDragEnd}
+                  className={`flex items-start gap-3 p-3 rounded-md border transition-colors ${
+                    dragOverIndex === index
+                      ? "border-primary bg-primary/5"
+                      : "border-border hover:bg-muted/50"
+                  } ${!rule.enabled ? "opacity-60" : ""}`}
                 >
-                  <GripVertical className="w-4 h-4" />
-                </div>
+                  <div
+                    className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground pt-0.5"
+                    aria-label={t("drag_to_reorder")}
+                  >
+                    <GripVertical className="w-4 h-4" />
+                  </div>
 
-                <div className="pt-0.5">
-                  <ToggleSwitch
-                    checked={rule.enabled}
-                    onChange={() => handleToggle(rule.id)}
-                  />
-                </div>
+                  <div className="pt-0.5">
+                    <ToggleSwitch
+                      checked={rule.enabled}
+                      onChange={() => handleToggle(rule.id)}
+                    />
+                  </div>
 
-                <div
-                  className="flex-1 min-w-0 cursor-pointer"
-                  onClick={() => {
-                    setEditingRule(rule);
-                    setShowRuleModal(true);
-                  }}
-                  role="button"
-                  tabIndex={0}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
+                  <div
+                    className="flex-1 min-w-0 cursor-pointer"
+                    onClick={() => {
                       setEditingRule(rule);
                       setShowRuleModal(true);
-                    }
-                  }}
-                >
-                  <p className="text-sm font-medium text-foreground truncate">
-                    {rule.name}
-                  </p>
-                  {expandedFilterView ? (
-                    <VisualRuleSummary rule={rule} />
+                    }}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        setEditingRule(rule);
+                        setShowRuleModal(true);
+                      }
+                    }}
+                  >
+                    <p className="text-sm font-medium text-foreground truncate">
+                      {rule.name}
+                    </p>
+                    {expandedFilterView ? (
+                      <VisualRuleSummary rule={rule} />
+                    ) : (
+                      <RuleSummary rule={rule} />
+                    )}
+                  </div>
+
+                  {deleteConfirmId === rule.id ? (
+                    <div className="flex items-center gap-1">
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        onClick={() => handleDelete(rule.id)}
+                      >
+                        {t("confirm_delete")}
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setDeleteConfirmId(null)}
+                      >
+                        {t("cancel")}
+                      </Button>
+                    </div>
                   ) : (
-                    <RuleSummary rule={rule} />
+                    <button
+                      type="button"
+                      onClick={() => setDeleteConfirmId(rule.id)}
+                      className="p-1.5 rounded hover:bg-muted text-muted-foreground hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                      aria-label={t("delete_rule")}
+                    >
+                      <X className="w-4 h-4" />
+                    </button>
                   )}
                 </div>
-
-                {deleteConfirmId === rule.id ? (
-                  <div className="flex items-center gap-1">
-                    <Button
-                      variant="destructive"
-                      size="sm"
-                      onClick={() => handleDelete(rule.id)}
-                    >
-                      {t("confirm_delete")}
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => setDeleteConfirmId(null)}
-                    >
-                      {t("cancel")}
-                    </Button>
-                  </div>
-                ) : (
-                  <button
-                    type="button"
-                    onClick={() => setDeleteConfirmId(rule.id)}
-                    className="p-1.5 rounded hover:bg-muted text-muted-foreground hover:text-red-600 dark:hover:text-red-400 transition-colors"
-                    aria-label={t("delete_rule")}
-                  >
-                    <X className="w-4 h-4" />
-                  </button>
-                )}
-              </div>
-            ))}
+              );
+            })}
           </div>
         )}
       </SettingsSection>

components/settings/folder-settings.tsx

@@ -490,7 +490,7 @@ export function FolderSettings() {
 
   return (
     <div className="space-y-8">
-      {/* Folder List — primary section */}
+      {/* Folder List - primary section */}
       <SettingsSection title={t('folder_list')} description={t('folder_list_description')}>
         <div className="space-y-0.5">
           {folderTree.length === 0 ? (
@@ -516,7 +516,7 @@ export function FolderSettings() {
         )}
       </SettingsSection>
 
-      {/* Standard Folder Roles — advanced section */}
+      {/* Standard Folder Roles - advanced section */}
       <SettingsSection title={t('standard_roles')} description={t('standard_roles_description')}>
         {STANDARD_ROLES.map((role) => {
           // Disambiguate duplicate folder names by appending parent path

components/settings/keyword-settings.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import React, { useState } from "react";
 import { useTranslations } from "next-intl";
 import { useSettingsStore, KEYWORD_PALETTE, DEFAULT_KEYWORDS, type KeywordDefinition } from "@/stores/settings-store";
 import { useAuthStore } from "@/stores/auth-store";
@@ -41,16 +41,39 @@ function KeywordRow({
   keyword,
   onEdit,
   onDelete,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+  isDragOver,
+  isDragging,
 }: {
   keyword: KeywordDefinition;
   onEdit: () => void;
   onDelete: () => void;
+  onDragStart: () => void;
+  onDragOver: (e: React.DragEvent) => void;
+  onDrop: () => void;
+  onDragEnd: () => void;
+  isDragOver: boolean;
+  isDragging: boolean;
 }) {
   const t = useTranslations("settings.keywords");
   const palette = KEYWORD_PALETTE[keyword.color];
 
   return (
-    <div className="flex items-center gap-3 py-2.5 px-3 rounded-md border border-border bg-background group">
+    <div
+      draggable
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+      onDragEnd={onDragEnd}
+      className={cn(
+        "flex items-center gap-3 py-2.5 px-3 rounded-md border bg-background group transition-opacity",
+        isDragging ? "opacity-40" : "opacity-100",
+        isDragOver ? "border-primary" : "border-border"
+      )}
+    >
       <GripVertical className="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-50 cursor-grab" />
       <div className={cn("w-5 h-5 rounded-full shrink-0", palette?.dot || "bg-gray-500")} />
       <span className="flex-1 text-sm font-medium truncate">{keyword.label}</span>
@@ -166,9 +189,39 @@ export function KeywordSettings() {
   const [editingId, setEditingId] = useState<string | null>(null);
   const [isAdding, setIsAdding] = useState(false);
   const [isMigrating, setIsMigrating] = useState(false);
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
 
   const existingIds = emailKeywords.map((k) => k.id);
 
+  const handleDragStart = (index: number) => {
+    setDragIndex(index);
+  };
+
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault();
+    if (index !== dragOverIndex) setDragOverIndex(index);
+  };
+
+  const handleDrop = (index: number) => {
+    if (dragIndex === null || dragIndex === index) {
+      setDragIndex(null);
+      setDragOverIndex(null);
+      return;
+    }
+    const reordered = [...emailKeywords];
+    const [moved] = reordered.splice(dragIndex, 1);
+    reordered.splice(index, 0, moved);
+    reorderKeywords(reordered);
+    setDragIndex(null);
+    setDragOverIndex(null);
+  };
+
+  const handleDragEnd = () => {
+    setDragIndex(null);
+    setDragOverIndex(null);
+  };
+
   const handleAdd = (keyword: KeywordDefinition) => {
     addKeyword(keyword);
     setIsAdding(false);
@@ -220,7 +273,7 @@ export function KeywordSettings() {
             {t("migrating")}
           </div>
         )}
-        {emailKeywords.map((keyword) =>
+        {emailKeywords.map((keyword, index) =>
           editingId === keyword.id ? (
             <KeywordEditForm
               key={keyword.id}
@@ -238,6 +291,12 @@ export function KeywordSettings() {
                 setIsAdding(false);
               }}
               onDelete={() => handleDelete(keyword.id)}
+              onDragStart={() => handleDragStart(index)}
+              onDragOver={(e) => handleDragOver(e, index)}
+              onDrop={() => handleDrop(index)}
+              onDragEnd={handleDragEnd}
+              isDragOver={dragOverIndex === index && dragIndex !== index}
+              isDragging={dragIndex === index}
             />
           )
         )}

components/settings/smime-certificate-modal.tsx

@@ -40,7 +40,7 @@ export function SmimeCertificateModal({
     { label: t("cert_email"), value: record.email },
     {
       label: t("cert_validity"),
-      value: `${new Date(record.notBefore).toLocaleDateString()} — ${new Date(record.notAfter).toLocaleDateString()}`,
+      value: `${new Date(record.notBefore).toLocaleDateString()} - ${new Date(record.notAfter).toLocaleDateString()}`,
     },
     { label: t("cert_fingerprint"), value: record.fingerprint },
   ];

components/settings/spam-siege-game.tsx

@@ -1,17 +1,19 @@
 "use client";
 
 import { useState, useEffect, useCallback, useRef } from "react";
-import { Shield, Mail, X, AlertTriangle, Trophy, RotateCcw, Inbox, MailCheck } from "lucide-react";
+import { Shield, Mail, X, AlertTriangle, MailCheck, RotateCcw } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 const GAME_WIDTH = 400;
 const GAME_HEIGHT = 520;
-const FORTRESS_Y = GAME_HEIGHT - 48;
-const SPAWN_INTERVAL_START = 850;
-const SPAWN_INTERVAL_MIN = 320;
+const INBOX_Y = GAME_HEIGHT - 40;
+const SPAWN_INTERVAL_START = 900;
+const SPAWN_INTERVAL_MIN = 340;
 const GAME_DURATION = 30;
 const ENEMY_SPEED_START = 1.2;
 const ENEMY_SPEED_INCREASE = 0.04;
+const MAX_MISSES = 3;
 
 interface Enemy {
   id: number;
@@ -21,81 +23,85 @@ interface Enemy {
   type: "spam" | "phishing" | "legit";
 }
 
-type GameState = "idle" | "playing" | "won" | "lost";
+type GameState = "idle" | "playing" | "over";
 
 export function SpamSiegeGame({ onClose }: { onClose: () => void }) {
   const [gameState, setGameState] = useState<GameState>("idle");
   const [enemies, setEnemies] = useState<Enemy[]>([]);
   const [score, setScore] = useState(0);
   const [timeLeft, setTimeLeft] = useState(GAME_DURATION);
-  const [shieldHealth, setShieldHealth] = useState(3);
-  const [hitEffects, setHitEffects] = useState<{ id: number; x: number; y: number; color: string }[]>([]);
-  const [destroyEffects, setDestroyEffects] = useState<{ id: number; x: number; y: number }[]>([]);
-  const [deliverEffects, setDeliverEffects] = useState<{ id: number; x: number; y: number }[]>([]);
+  const [misses, setMisses] = useState(0);
+  const [survived, setSurvived] = useState(false);
   const nextId = useRef(0);
   const animFrameRef = useRef<number>(0);
   const lastTimeRef = useRef<number>(0);
   const spawnTimerRef = useRef<number>(0);
   const gameStateRef = useRef<GameState>("idle");
   const elapsedRef = useRef(0);
-  const destroyedRef = useRef(new Set<number>());
+  const clickedRef = useRef(new Set<number>());
+  const enemiesRef = useRef<Enemy[]>([]);
+  const missesRef = useRef(0);
+  const scoreRef = useRef(0);
 
   useEffect(() => {
     gameStateRef.current = gameState;
   }, [gameState]);
 
+  const endGame = useCallback((didSurvive: boolean) => {
+    setSurvived(didSurvive);
+    setGameState("over");
+  }, []);
+
   const startGame = useCallback(() => {
     setGameState("playing");
     setEnemies([]);
     setScore(0);
     setTimeLeft(GAME_DURATION);
-    setShieldHealth(3);
-    setHitEffects([]);
-    setDestroyEffects([]);
-    setDeliverEffects([]);
+    setMisses(0);
+    setSurvived(false);
     nextId.current = 0;
     spawnTimerRef.current = 0;
     elapsedRef.current = 0;
-    destroyedRef.current = new Set();
+    clickedRef.current = new Set();
+    enemiesRef.current = [];
+    missesRef.current = 0;
+    scoreRef.current = 0;
     lastTimeRef.current = performance.now();
   }, []);
 
   const spawnEnemy = useCallback(() => {
     const id = nextId.current++;
     const rand = Math.random();
-    const type = rand > 0.7 ? "legit" : rand > 0.45 ? "phishing" : "spam";
+    const type = rand > 0.75 ? "legit" : rand > 0.45 ? "phishing" : "spam";
     const x = 20 + Math.random() * (GAME_WIDTH - 60);
-    const elapsed = elapsedRef.current;
-    const speed = ENEMY_SPEED_START + (elapsed / 1000) * ENEMY_SPEED_INCREASE;
-    setEnemies((prev) => [...prev, { id, x, y: -30, speed, type }]);
+    const speed = ENEMY_SPEED_START + (elapsedRef.current / 1000) * ENEMY_SPEED_INCREASE;
+    enemiesRef.current = [...enemiesRef.current, { id, x, y: -32, speed, type }];
+    setEnemies(enemiesRef.current);
   }, []);
 
-  const handleHover = useCallback((enemy: Enemy) => {
-    if (destroyedRef.current.has(enemy.id)) return;
-    destroyedRef.current.add(enemy.id);
+  const handleClick = useCallback(
+    (ev: React.MouseEvent, enemy: Enemy) => {
+      ev.stopPropagation();
+      if (clickedRef.current.has(enemy.id)) return;
+      clickedRef.current.add(enemy.id);
 
-    if (enemy.type === "legit") {
-      // Penalty for blocking legit mail
-      setShieldHealth((prev) => {
-        const nh = prev - 1;
-        if (nh <= 0) setGameState("lost");
-        return Math.max(0, nh);
-      });
-      setScore((prev) => Math.max(0, prev - 15));
-      const effectId = nextId.current++;
-      setHitEffects((p) => [...p, { id: effectId, x: enemy.x, y: enemy.y, color: "rgba(34, 197, 94, 0.5)" }]);
-      setTimeout(() => setHitEffects((p) => p.filter((h) => h.id !== effectId)), 500);
-    } else {
-      setScore((prev) => prev + 10);
-      const effectId = nextId.current++;
-      setDestroyEffects((prev) => [...prev, { id: effectId, x: enemy.x, y: enemy.y }]);
-      setTimeout(() => setDestroyEffects((prev) => prev.filter((e) => e.id !== effectId)), 400);
-    }
+      enemiesRef.current = enemiesRef.current.filter((e) => e.id !== enemy.id);
+      setEnemies(enemiesRef.current);
 
-    setEnemies((prev) => prev.filter((e) => e.id !== enemy.id));
-  }, []);
+      if (enemy.type === "legit") {
+        missesRef.current += 1;
+        setMisses(missesRef.current);
+        scoreRef.current = Math.max(0, scoreRef.current - 15);
+        setScore(scoreRef.current);
+        if (missesRef.current >= MAX_MISSES) endGame(false);
+      } else {
+        scoreRef.current += enemy.type === "phishing" ? 15 : 10;
+        setScore(scoreRef.current);
+      }
+    },
+    [endGame]
+  );
 
-  // Game loop
   useEffect(() => {
     if (gameState !== "playing") return;
 
@@ -106,15 +112,13 @@ export function SpamSiegeGame({ onClose }: { onClose: () => void }) {
       lastTimeRef.current = now;
       elapsedRef.current += dt;
 
-      // Timer
       const newTimeLeft = GAME_DURATION - Math.floor(elapsedRef.current / 1000);
       setTimeLeft(Math.max(0, newTimeLeft));
       if (newTimeLeft <= 0) {
-        setGameState("won");
+        endGame(true);
         return;
       }
 
-      // Spawn
       spawnTimerRef.current += dt;
       const spawnInterval = Math.max(
         SPAWN_INTERVAL_MIN,
@@ -125,261 +129,187 @@ export function SpamSiegeGame({ onClose }: { onClose: () => void }) {
         spawnEnemy();
       }
 
-      // Move enemies
-      setEnemies((prev) => {
-        const next: Enemy[] = [];
-        let spamBreached = false;
-        for (const e of prev) {
-          const ny = e.y + e.speed * (dt / 16);
-          if (ny >= FORTRESS_Y) {
-            if (e.type === "legit") {
-              // Legit mail delivered — bonus
-              setScore((s) => s + 5);
-              const effectId = nextId.current++;
-              setDeliverEffects((p) => [...p, { id: effectId, x: e.x, y: FORTRESS_Y }]);
-              setTimeout(() => setDeliverEffects((p) => p.filter((d) => d.id !== effectId)), 500);
-            } else {
-              spamBreached = true;
-              const effectId = nextId.current++;
-              setHitEffects((p) => [...p, { id: effectId, x: e.x, y: FORTRESS_Y, color: "rgba(219, 45, 84, 0.3)" }]);
-              setTimeout(() => setHitEffects((p) => p.filter((h) => h.id !== effectId)), 500);
-            }
-          } else {
-            next.push({ ...e, y: ny });
-          }
+      const nextEnemies: Enemy[] = [];
+      let missed = 0;
+      let scoreDelta = 0;
+      for (const e of enemiesRef.current) {
+        const ny = e.y + e.speed * (dt / 16);
+        if (ny >= INBOX_Y) {
+          if (e.type === "legit") scoreDelta += 5;
+          else missed++;
+        } else {
+          nextEnemies.push({ ...e, y: ny });
         }
-        if (spamBreached) {
-          setShieldHealth((prev) => {
-            const nh = prev - 1;
-            if (nh <= 0) setGameState("lost");
-            return Math.max(0, nh);
-          });
+      }
+      enemiesRef.current = nextEnemies;
+      setEnemies(nextEnemies);
+
+      if (scoreDelta > 0) {
+        scoreRef.current += scoreDelta;
+        setScore(scoreRef.current);
+      }
+      if (missed > 0) {
+        missesRef.current += missed;
+        setMisses(missesRef.current);
+        if (missesRef.current >= MAX_MISSES) {
+          endGame(false);
+          return;
         }
-        return next;
-      });
+      }
 
       animFrameRef.current = requestAnimationFrame(tick);
     };
 
     animFrameRef.current = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(animFrameRef.current);
-  }, [gameState, spawnEnemy]);
-
-  const getEnemyStyle = (type: Enemy["type"]) => {
-    switch (type) {
-      case "phishing":
-        return { bg: "rgba(234, 179, 8, 0.15)", border: "rgba(234, 179, 8, 0.4)", color: "rgb(234, 179, 8)" };
-      case "legit":
-        return { bg: "rgba(34, 197, 94, 0.12)", border: "rgba(34, 197, 94, 0.4)", color: "rgb(34, 197, 94)" };
-      default:
-        return { bg: "rgba(219, 45, 84, 0.1)", border: "rgba(219, 45, 84, 0.3)", color: "rgb(219, 45, 84)" };
-    }
-  };
+  }, [gameState, spawnEnemy, endGame]);
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
-      <div className="relative rounded-xl border border-border bg-card shadow-2xl overflow-hidden select-none"
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="relative rounded-lg border border-border bg-card shadow-xl overflow-hidden select-none"
         style={{ width: GAME_WIDTH, maxWidth: "95vw" }}
+        onClick={(e) => e.stopPropagation()}
       >
-        {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-card">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
           <div className="flex items-center gap-2">
-            <Shield className="w-4 h-4" style={{ color: "rgb(219, 45, 84)" }} />
-            <span className="text-sm font-semibold text-foreground">Spam Siege</span>
+            <Shield className="w-4 h-4 text-primary" />
+            <span className="text-sm font-medium text-foreground">Spam Siege</span>
           </div>
-          <button onClick={onClose} className="p-1 rounded hover:bg-muted transition-colors">
+          <button
+            onClick={onClose}
+            className="p-1 rounded hover:bg-muted transition-colors"
+            aria-label="Close"
+          >
             <X className="w-4 h-4 text-muted-foreground" />
           </button>
         </div>
 
-        {/* HUD */}
-        <div className="flex items-center justify-between px-4 py-2 bg-muted/30 border-b border-border text-xs">
-          <div className="flex items-center gap-3">
-            <span className="text-muted-foreground">Score: <span className="font-semibold text-foreground">{score}</span></span>
-            <span className="text-muted-foreground">Time: <span className="font-semibold text-foreground">{timeLeft}s</span></span>
-          </div>
-          <div className="flex items-center gap-1">
-            {[...Array(3)].map((_, i) => (
-              <Shield
-                key={i}
-                className="w-3.5 h-3.5 transition-colors"
-                style={{ color: i < shieldHealth ? "rgb(219, 45, 84)" : "rgb(100, 100, 100)" }}
-                fill={i < shieldHealth ? "rgb(219, 45, 84)" : "none"}
-                strokeWidth={i < shieldHealth ? 0 : 1.5}
-              />
-            ))}
+        <div className="flex items-center justify-between px-4 py-2 bg-muted/40 border-b border-border text-xs text-muted-foreground">
+          <div className="flex items-center gap-4">
+            <span>
+              Score <span className="font-medium text-foreground tabular-nums">{score}</span>
+            </span>
+            <span>
+              Time <span className="font-medium text-foreground tabular-nums">{timeLeft}s</span>
+            </span>
           </div>
+          <span>
+            Misses{" "}
+            <span
+              className={cn(
+                "font-medium tabular-nums",
+                misses >= MAX_MISSES - 1 ? "text-destructive" : "text-foreground"
+              )}
+            >
+              {misses}/{MAX_MISSES}
+            </span>
+          </span>
         </div>
 
-        {/* Game area */}
         <div
           className="relative bg-background overflow-hidden"
           style={{ height: GAME_HEIGHT }}
         >
-          {/* Grid lines for depth */}
-          <div className="absolute inset-0 opacity-[0.03]" style={{
-            backgroundImage: "linear-gradient(to bottom, currentColor 1px, transparent 1px), linear-gradient(to right, currentColor 1px, transparent 1px)",
-            backgroundSize: "40px 40px",
-          }} />
-
-          {/* Fortress wall */}
-          <div className="absolute left-0 right-0 bottom-0 flex flex-col items-center" style={{ height: GAME_HEIGHT - FORTRESS_Y }}>
-            <div className="relative w-full">
-              {/* Shield centered above the line */}
-              <div className="absolute -top-5 left-1/2 -translate-x-1/2 z-10">
-                <Shield
-                  className="w-7 h-7 drop-shadow-sm"
-                  style={{ color: shieldHealth > 0 ? "rgb(219, 45, 84)" : "rgb(100, 100, 100)" }}
-                  fill={shieldHealth > 0 ? "rgba(219, 45, 84, 0.2)" : "none"}
-                />
-              </div>
-              {/* Solid line */}
-              <div
-                className="h-[2px] w-full"
-                style={{ backgroundColor: shieldHealth > 0 ? "rgba(219, 45, 84, 0.35)" : "rgba(100, 100, 100, 0.3)" }}
-              />
-            </div>
-            {/* Subtle gradient fill below */}
-            <div
-              className="flex-1 w-full"
-              style={{
-                background: shieldHealth > 0
-                  ? "linear-gradient(to bottom, rgba(219, 45, 84, 0.06), transparent)"
-                  : "linear-gradient(to bottom, rgba(100, 100, 100, 0.04), transparent)",
-              }}
-            />
+          <div
+            className="absolute left-0 right-0 flex items-center gap-2 px-4"
+            style={{ top: INBOX_Y }}
+          >
+            <div className="h-px flex-1 bg-border" />
+            <span className="text-[10px] uppercase tracking-wider text-muted-foreground">
+              Inbox
+            </span>
+            <div className="h-px flex-1 bg-border" />
           </div>
 
-          {/* Enemies */}
           {enemies.map((e) => {
-            const style = getEnemyStyle(e.type);
+            const variant =
+              e.type === "phishing"
+                ? "text-warning border-warning/40 bg-warning/10 hover:bg-warning/20"
+                : e.type === "legit"
+                  ? "text-success border-success/40 bg-success/10 hover:bg-success/20"
+                  : "text-destructive border-destructive/40 bg-destructive/10 hover:bg-destructive/20";
+            const Icon =
+              e.type === "phishing" ? AlertTriangle : e.type === "legit" ? MailCheck : Mail;
             return (
-              <div
+              <button
                 key={e.id}
-                className="absolute flex items-center justify-center w-8 h-8 rounded-md transition-transform"
-                style={{
-                  left: e.x,
-                  top: e.y,
-                  backgroundColor: style.bg,
-                  border: `1px solid ${style.border}`,
-                }}
-                onMouseEnter={() => handleHover(e)}
-              >
-                {e.type === "phishing" ? (
-                  <AlertTriangle className="w-4 h-4" style={{ color: style.color }} />
-                ) : e.type === "legit" ? (
-                  <MailCheck className="w-4 h-4" style={{ color: style.color }} />
-                ) : (
-                  <Mail className="w-4 h-4" style={{ color: style.color }} />
+                type="button"
+                className={cn(
+                  "absolute flex items-center justify-center w-8 h-8 rounded-md border cursor-pointer",
+                  "active:scale-95 transition-transform",
+                  variant
                 )}
-              </div>
+                style={{ left: e.x, top: e.y }}
+                onMouseEnter={(ev) => handleClick(ev, e)}
+                onClick={(ev) => handleClick(ev, e)}
+              >
+                <Icon className="w-4 h-4" />
+              </button>
             );
           })}
 
-          {/* Destroy effects */}
-          {destroyEffects.map((e) => (
-            <div
-              key={e.id}
-              className="absolute pointer-events-none animate-ping"
-              style={{ left: e.x + 4, top: e.y + 4 }}
-            >
-              <X className="w-5 h-5 text-muted-foreground/50" />
-            </div>
-          ))}
-
-          {/* Deliver effects (legit mail arrived) */}
-          {deliverEffects.map((e) => (
-            <div
-              key={e.id}
-              className="absolute pointer-events-none animate-ping"
-              style={{ left: e.x + 4, top: e.y - 8 }}
-            >
-              <Inbox className="w-5 h-5" style={{ color: "rgb(34, 197, 94)" }} />
-            </div>
-          ))}
-
-          {/* Hit effects on fortress */}
-          {hitEffects.map((e) => (
-            <div
-              key={e.id}
-              className="absolute pointer-events-none"
-              style={{ left: e.x, top: e.y - 10 }}
-            >
-              <div className="w-6 h-6 rounded-full animate-ping" style={{ backgroundColor: e.color }} />
-            </div>
-          ))}
-
-          {/* Idle overlay */}
           {gameState === "idle" && (
-            <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-background/80">
-              <Shield className="w-14 h-14" style={{ color: "rgb(219, 45, 84)" }} fill="rgba(219, 45, 84, 0.1)" />
-              <div className="text-center">
-                <p className="text-base font-semibold text-foreground">Spam Siege</p>
-                <p className="text-xs text-muted-foreground mt-1.5 max-w-[280px] leading-relaxed">
-                  Hover over threats to block them. Let legitimate mail through. Survive {GAME_DURATION} seconds.
+            <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-background/95 px-8 text-center">
+              <Shield className="w-10 h-10 text-primary" />
+              <div className="space-y-1.5">
+                <p className="text-base font-medium text-foreground">Spam Siege</p>
+                <p className="text-xs text-muted-foreground leading-relaxed">
+                  Click spam and phishing before they hit your inbox. Don&apos;t block legitimate
+                  mail. Three misses and it&apos;s over.
                 </p>
-                <div className="flex items-center justify-center gap-4 mt-3 text-[11px] text-muted-foreground">
-                  <span className="inline-flex items-center gap-1">
-                    <Mail className="w-3 h-3" style={{ color: "rgb(219, 45, 84)" }} /> Spam
-                  </span>
-                  <span className="inline-flex items-center gap-1">
-                    <AlertTriangle className="w-3 h-3" style={{ color: "rgb(234, 179, 8)" }} /> Phishing
-                  </span>
-                  <span className="inline-flex items-center gap-1">
-                    <MailCheck className="w-3 h-3" style={{ color: "rgb(34, 197, 94)" }} /> Legit
-                  </span>
-                </div>
               </div>
-              <Button size="sm" onClick={startGame} className="mt-1 text-white" style={{ backgroundColor: "rgb(219, 45, 84)" }}>
-                <Shield className="w-3.5 h-3.5 mr-1.5" />
-                Defend
+              <div className="flex items-center gap-4 text-[11px] text-muted-foreground">
+                <span className="inline-flex items-center gap-1.5">
+                  <Mail className="w-3 h-3 text-destructive" />
+                  Spam
+                </span>
+                <span className="inline-flex items-center gap-1.5">
+                  <AlertTriangle className="w-3 h-3 text-warning" />
+                  Phishing
+                </span>
+                <span className="inline-flex items-center gap-1.5">
+                  <MailCheck className="w-3 h-3 text-success" />
+                  Legit
+                </span>
+              </div>
+              <Button size="sm" onClick={startGame}>
+                Start
               </Button>
             </div>
           )}
 
-          {/* Won overlay */}
-          {gameState === "won" && (
-            <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-background/80">
-              <Trophy className="w-14 h-14" style={{ color: "rgb(219, 45, 84)" }} />
-              <div className="text-center">
-                <p className="text-base font-semibold text-foreground">Fortress Secured</p>
-                <p className="text-xs text-muted-foreground mt-1">
-                  Score: <span className="font-semibold text-foreground">{score}</span>
+          {gameState === "over" && (
+            <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-background/95 px-8 text-center">
+              <Shield
+                className={cn(
+                  "w-10 h-10",
+                  survived ? "text-success" : "text-muted-foreground/40"
+                )}
+              />
+              <div className="space-y-1">
+                <p className="text-base font-medium text-foreground">
+                  {survived ? "Inbox held" : "Inbox overrun"}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  Final score{" "}
+                  <span className="font-medium text-foreground tabular-nums">{score}</span>
                 </p>
               </div>
-              <div className="flex gap-2 mt-1">
+              <div className="flex gap-2">
                 <Button size="sm" variant="outline" onClick={onClose}>
                   Close
                 </Button>
-                <Button size="sm" onClick={startGame} className="text-white" style={{ backgroundColor: "rgb(219, 45, 84)" }}>
+                <Button size="sm" onClick={startGame}>
                   <RotateCcw className="w-3.5 h-3.5 mr-1.5" />
                   Again
                 </Button>
               </div>
             </div>
           )}
-
-          {/* Lost overlay */}
-          {gameState === "lost" && (
-            <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-background/80">
-              <Shield className="w-14 h-14 text-muted-foreground/40" />
-              <div className="text-center">
-                <p className="text-base font-semibold text-foreground">Fortress Breached</p>
-                <p className="text-xs text-muted-foreground mt-1">
-                  Score: <span className="font-semibold text-foreground">{score}</span>
-                </p>
-              </div>
-              <div className="flex gap-2 mt-1">
-                <Button size="sm" variant="outline" onClick={onClose}>
-                  Close
-                </Button>
-                <Button size="sm" onClick={startGame} className="text-white" style={{ backgroundColor: "rgb(219, 45, 84)" }}>
-                  <RotateCcw className="w-3.5 h-3.5 mr-1.5" />
-                  Retry
-                </Button>
-              </div>
-            </div>
-          )}
         </div>
       </div>
     </div>

components/tour/tour-overlay.tsx

@@ -123,7 +123,7 @@ export function TourOverlay() {
   // Wait for target element to appear, then show
   useEffect(() => {
     if (!step) return;
-    console.log(`[Tour] Step ${currentStep + 1}/${totalSteps}: "${step.id}" — target: ${step.target}, placement: ${step.placement}, interactive: ${!!step.interactive}`);
+    console.log(`[Tour] Step ${currentStep + 1}/${totalSteps}: "${step.id}" - target: ${step.target}, placement: ${step.placement}, interactive: ${!!step.interactive}`);
     setVisible(false);
     // Keep old targetRect and tooltipPos so the cutout/tooltip animate to the new position
     // instead of disappearing and reappearing
@@ -178,7 +178,7 @@ export function TourOverlay() {
         clearInterval(interval);
         if (attempts >= maxAttempts && !cancelled) {
           // Skip this step if element never appears
-          console.warn(`[Tour] Step ${currentStep + 1} "${step.id}": SKIPPED — element never appeared after ${maxAttempts} attempts`);
+          console.warn(`[Tour] Step ${currentStep + 1} "${step.id}": SKIPPED - element never appeared after ${maxAttempts} attempts`);
           nextStepRef.current();
         }
       }

components/trusted-senders-modal.tsx

@@ -2,9 +2,11 @@
 
 import { useState, useEffect, useRef, useMemo } from "react";
 import { useTranslations } from "next-intl";
-import { X, ShieldCheck, Search, Trash2, Plus } from "lucide-react";
+import { X, ShieldCheck, Search, Trash2, Plus, Loader2 } from "lucide-react";
 import { Avatar } from "@/components/ui/avatar";
 import { useSettingsStore } from "@/stores/settings-store";
+import { useContactStore } from "@/stores/contact-store";
+import { useAuthStore } from "@/stores/auth-store";
 import { cn } from "@/lib/utils";
 
 interface TrustedSendersModalProps {
@@ -17,22 +19,43 @@ export function TrustedSendersModal({ isOpen, onClose }: TrustedSendersModalProp
   const modalRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const { trustedSenders, addTrustedSender, removeTrustedSender } = useSettingsStore();
+  const { trustedSenders, addTrustedSender, removeTrustedSender, trustedSendersAddressBook } = useSettingsStore();
+  const {
+    trustedSenderEmails,
+    trustedSendersLoaded,
+    trustedSendersLoading,
+    loadTrustedSendersBook,
+    addToTrustedSendersBook,
+    removeFromTrustedSendersBook,
+  } = useContactStore();
+  const { client } = useAuthStore();
 
   const [searchQuery, setSearchQuery] = useState("");
   const [isAdding, setIsAdding] = useState(false);
   const [newEmail, setNewEmail] = useState("");
   const [emailError, setEmailError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // When address book mode is on, load the book on first open
+  useEffect(() => {
+    if (isOpen && trustedSendersAddressBook && client && !trustedSendersLoaded) {
+      loadTrustedSendersBook(client);
+    }
+  }, [isOpen, trustedSendersAddressBook, client, trustedSendersLoaded, loadTrustedSendersBook]);
+
+  // The active list depends on mode
+  const activeSenders = trustedSendersAddressBook ? trustedSenderEmails : trustedSenders;
+  const isLoading = trustedSendersAddressBook && (!trustedSendersLoaded || trustedSendersLoading);
 
   // Filter senders based on search query
   const filteredSenders = useMemo(() => {
-    if (!searchQuery.trim()) return trustedSenders;
+    if (!searchQuery.trim()) return activeSenders;
     const query = searchQuery.toLowerCase();
-    return trustedSenders.filter((email) => email.toLowerCase().includes(query));
-  }, [trustedSenders, searchQuery]);
+    return activeSenders.filter((email) => email.toLowerCase().includes(query));
+  }, [activeSenders, searchQuery]);
 
   // Show search only when 5+ senders
-  const showSearch = trustedSenders.length >= 5;
+  const showSearch = activeSenders.length >= 5;
 
   // Close on Escape key
   useEffect(() => {
@@ -90,7 +113,7 @@ export function TrustedSendersModal({ isOpen, onClose }: TrustedSendersModalProp
     return emailRegex.test(email);
   };
 
-  const handleAddSender = () => {
+  const handleAddSender = async () => {
     const trimmedEmail = newEmail.trim().toLowerCase();
 
     if (!trimmedEmail) {
@@ -103,15 +126,34 @@ export function TrustedSendersModal({ isOpen, onClose }: TrustedSendersModalProp
       return;
     }
 
-    if (trustedSenders.includes(trimmedEmail)) {
+    if (activeSenders.includes(trimmedEmail)) {
       setEmailError(t("already_added"));
       return;
     }
 
-    addTrustedSender(trimmedEmail);
-    setNewEmail("");
-    setIsAdding(false);
-    setEmailError("");
+    setIsSubmitting(true);
+    try {
+      if (trustedSendersAddressBook && client) {
+        await addToTrustedSendersBook(client, trimmedEmail);
+      } else {
+        addTrustedSender(trimmedEmail);
+      }
+      setNewEmail("");
+      setIsAdding(false);
+      setEmailError("");
+    } catch {
+      setEmailError(t("save_error"));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleRemoveSender = async (email: string) => {
+    if (trustedSendersAddressBook && client) {
+      await removeFromTrustedSendersBook(client, email);
+    } else {
+      removeTrustedSender(email);
+    }
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -170,7 +212,11 @@ export function TrustedSendersModal({ isOpen, onClose }: TrustedSendersModalProp
 
         {/* Content */}
         <div className="flex-1 overflow-y-auto">
-          {trustedSenders.length === 0 ? (
+          {isLoading ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+            </div>
+          ) : activeSenders.length === 0 ? (
             /* Empty State */
             <div className="flex flex-col items-center justify-center py-12 px-6 text-center">
               <ShieldCheck className="w-12 h-12 text-muted-foreground/50 mb-4" />
@@ -209,7 +255,7 @@ export function TrustedSendersModal({ isOpen, onClose }: TrustedSendersModalProp
                     {email}
                   </span>
                   <button
-                    onClick={() => removeTrustedSender(email)}
+                    onClick={() => handleRemoveSender(email)}
                     className="p-1.5 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100"
                     aria-label={`${t("remove")} ${email}`}
                   >
@@ -222,7 +268,7 @@ export function TrustedSendersModal({ isOpen, onClose }: TrustedSendersModalProp
         </div>
 
         {/* Footer - Add sender */}
-        {trustedSenders.length > 0 && (
+        {!isLoading && activeSenders.length > 0 && (
           <div className="px-6 py-4 border-t border-border flex-shrink-0">
             {isAdding ? (
               <div className="space-y-2">
@@ -244,9 +290,10 @@ export function TrustedSendersModal({ isOpen, onClose }: TrustedSendersModalProp
                   />
                   <button
                     onClick={handleAddSender}
-                    className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors text-sm font-medium"
+                    disabled={isSubmitting}
+                    className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors text-sm font-medium disabled:opacity-50"
                   >
-                    {t("add_button")}
+                    {isSubmitting ? <Loader2 className="w-4 h-4 animate-spin" /> : t("add_button")}
                   </button>
                 </div>
                 {emailError && (

components/ui/avatar.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useState, useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo, useEffect } from "react";
 import { cn } from "@/lib/utils";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useContactStore, getContactPhotoUri } from "@/stores/contact-store";
 import { useConfig } from "@/hooks/use-config";
+import { avatarHooks } from "@/lib/plugin-hooks";
 
 const IS_DEV = process.env.NODE_ENV !== "production";
 
@@ -143,10 +144,26 @@ interface AvatarProps {
 
 export function Avatar({ name, email, contactPhotoUri, size = "md", className }: AvatarProps) {
   const [imgError, setImgError] = useState(false);
+  const [pluginAvatarUrl, setPluginAvatarUrl] = useState<string | null>(null);
+  const [pluginAvatarFailed, setPluginAvatarFailed] = useState(false);
   const senderFavicons = useSettingsStore((s) => s.senderFavicons);
   const contacts = useContactStore((s) => s.contacts);
   const { devMode } = useConfig();
 
+  // Ask plugins (e.g. Gravatar) to resolve an avatar URL for this email address.
+  // Runs whenever email or name changes; resets plugin avatar state on each change.
+  useEffect(() => {
+    setPluginAvatarUrl(null);
+    setPluginAvatarFailed(false);
+    if (!email || avatarHooks.onAvatarResolve.size === 0) return;
+    let cancelled = false;
+    avatarHooks.onAvatarResolve
+      .transform(null as string | null, { email, name })
+      .then((url) => { if (!cancelled) setPluginAvatarUrl(url); })
+      .catch(() => { if (!cancelled) setPluginAvatarFailed(true); });
+    return () => { cancelled = true; };
+  }, [email, name]);
+
   // Look up contact photo by email from the contact store
   const resolvedContactPhoto = useMemo(() => {
     if (contactPhotoUri) return contactPhotoUri;
@@ -202,19 +219,25 @@ export function Avatar({ name, email, contactPhotoUri, size = "md", className }:
   const showFavicon =
     senderFavicons && faviconDomain && !PERSONAL_DOMAINS.has(faviconDomain) && !imgError && !domainFailed;
 
-  // Priority: contact photo > custom avatar > profile picture > company favicon > initials
+  // Priority: contact photo > plugin avatar (e.g. Gravatar) > custom avatar > profile picture > company favicon > initials
   const customAvatar = devMode && email ? CUSTOM_AVATARS[email.toLowerCase()] : null;
+  const pluginAvatar = pluginAvatarFailed ? null : pluginAvatarUrl;
   const imgSrc = !imgError && !domainFailed
-    ? resolvedContactPhoto || customAvatar || profilePic || (showFavicon ? `/api/favicon?domain=${encodeURIComponent(faviconDomain!)}` : null)
-    : (resolvedContactPhoto || customAvatar || profilePic || null);
+    ? resolvedContactPhoto || pluginAvatar || customAvatar || profilePic || (showFavicon ? `/api/favicon?domain=${encodeURIComponent(faviconDomain!)}` : null)
+    : (resolvedContactPhoto || pluginAvatar || customAvatar || profilePic || null);
 
   const handleImgError = useCallback(() => {
+    // If the plugin avatar just failed, mark it and fall through to the next source
+    if (pluginAvatar && imgSrc === pluginAvatar) {
+      setPluginAvatarFailed(true);
+      return;
+    }
     setImgError(true);
-    // If this was a favicon URL (not a contact photo, custom avatar or profile pic), remember the domain
-    if (faviconDomain && !resolvedContactPhoto && !customAvatar && !profilePic) {
+    // If this was a favicon URL (not a contact photo, plugin avatar, custom avatar or profile pic), remember the domain
+    if (faviconDomain && !resolvedContactPhoto && !pluginAvatar && !customAvatar && !profilePic) {
       failedFaviconDomains.add(faviconDomain);
     }
-  }, [faviconDomain, resolvedContactPhoto, customAvatar, profilePic]);
+  }, [imgSrc, pluginAvatar, faviconDomain, resolvedContactPhoto, customAvatar, profilePic]);
 
   return (
     <div

components/ui/flag-icons.tsx

@@ -0,0 +1,184 @@
+import { type SVGProps, type ReactElement } from "react";
+
+type FlagProps = SVGProps<SVGSVGElement>;
+
+const flagClass = "inline-block rounded-[2px] shrink-0";
+const W = 20;
+const H = 15;
+
+/** Great Britain – Union Jack (simplified) */
+export function FlagGB(props: FlagProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width={W} height={H} className={flagClass} {...props}>
+      <rect width="60" height="30" fill="#012169" />
+      <path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" strokeWidth="6" />
+      <path d="M0,0 L60,30 M60,0 L0,30" stroke="#C8102E" strokeWidth="2" />
+      <path d="M30,0 V30 M0,15 H60" stroke="#fff" strokeWidth="10" />
+      <path d="M30,0 V30 M0,15 H60" stroke="#C8102E" strokeWidth="6" />
+    </svg>
+  );
+}
+
+/** France – Blue, White, Red vertical */
+export function FlagFR(props: FlagProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" width={W} height={H} className={flagClass} {...props}>
+      <rect width="1" height="2" fill="#002395" />
+      <rect x="1" width="1" height="2" fill="#fff" />
+      <rect x="2" width="1" height="2" fill="#ED2939" />
+    </svg>
+  );
+}
+
+/** Japan – White with red circle */
+export function FlagJP(props: FlagProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" width={W} height={H} className={flagClass} {...props}>
+      <rect width="3" height="2" fill="#fff" />
+      <circle cx="1.5" cy="1" r="0.6" fill="#BC002D" />
+    </svg>
+  );
+}
+
+/** South Korea – Simplified */
+export function FlagKR(props: FlagProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" width={W} height={H} className={flagClass} {...props}>
+      <rect width="3" height="2" fill="#fff" />
+      <circle cx="1.5" cy="1" r="0.55" fill="#CD2E3A" />
+      <path d="M1.5,1 a0.275,0.275 0 0,1 0,0.55 a0.275,0.275 0 0,0 0,-0.55" fill="#0047A0" />
+      <path d="M1.5,1 a0.275,0.275 0 0,0 0,-0.55 a0.275,0.275 0 0,1 0,0.55" fill="#0047A0" />
+    </svg>
+  );
+}
+
+/** Spain – Red, Yellow, Red horizontal */
+export function FlagES(props: FlagProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" width={W} height={H} className={flagClass} {...props}>
+      <rect width="3" height="0.5" fill="#AA151B" />
+      <rect y="0.5" width="3" height="1" fill="#F1BF00" />
+      <rect y="1.5" width="3" height="0.5" fill="#AA151B" />
+    </svg>
+  );
+}
+
+/** Italy – Green, White, Red vertical */
+export function FlagIT(props: FlagProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" width={W} height={H} className={flagClass} {...props}>
+      <rect width="1" height="2" fill="#009246" />
+      <rect x="1" width="1" height="2" fill="#fff" />
+      <rect x="2" width="1" height="2" fill="#CE2B37" />
+    </svg>
+  );
+}
+
+/** Germany – Black, Red, Gold horizontal */
+export function FlagDE(props: FlagProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3" width={W} height={H} className={flagClass} {...props}>
+      <rect width="5" height="1" fill="#000" />
+      <rect y="1" width="5" height="1" fill="#DD0000" />
+      <rect y="2" width="5" height="1" fill="#FFCC00" />
+    </svg>
+  );
+}
+
+/** Latvia – Maroon, White, Maroon horizontal */
+export function FlagLV(props: FlagProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 10" width={W} height={H} className={flagClass} {...props}>
+      <rect width="20" height="4" fill="#9E3039" />
+      <rect y="4" width="20" height="2" fill="#fff" />
+      <rect y="6" width="20" height="4" fill="#9E3039" />
+    </svg>
+  );
+}
+
+/** Netherlands – Red, White, Blue horizontal */
+export function FlagNL(props: FlagProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 6" width={W} height={H} className={flagClass} {...props}>
+      <rect width="9" height="2" fill="#AE1C28" />
+      <rect y="2" width="9" height="2" fill="#fff" />
+      <rect y="4" width="9" height="2" fill="#21468B" />
+    </svg>
+  );
+}
+
+/** Poland – White, Red horizontal */
+export function FlagPL(props: FlagProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 5" width={W} height={H} className={flagClass} {...props}>
+      <rect width="8" height="2.5" fill="#fff" />
+      <rect y="2.5" width="8" height="2.5" fill="#DC143C" />
+    </svg>
+  );
+}
+
+/** Brazil – Green, yellow diamond (simplified) */
+export function FlagBR(props: FlagProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14" width={W} height={H} className={flagClass} {...props}>
+      <rect width="20" height="14" fill="#009B3A" />
+      <polygon points="10,1.5 18.5,7 10,12.5 1.5,7" fill="#FEDF00" />
+      <circle cx="10" cy="7" r="3" fill="#002776" />
+    </svg>
+  );
+}
+
+/** Russia – White, Blue, Red horizontal */
+export function FlagRU(props: FlagProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 6" width={W} height={H} className={flagClass} {...props}>
+      <rect width="9" height="2" fill="#fff" />
+      <rect y="2" width="9" height="2" fill="#0039A6" />
+      <rect y="4" width="9" height="2" fill="#D52B1E" />
+    </svg>
+  );
+}
+
+/** Ukraine – Blue, Yellow horizontal */
+export function FlagUA(props: FlagProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" width={W} height={H} className={flagClass} {...props}>
+      <rect width="3" height="1" fill="#005BBB" />
+      <rect y="1" width="3" height="1" fill="#FFD500" />
+    </svg>
+  );
+}
+
+/** China – Red with yellow stars (simplified) */
+export function FlagCN(props: FlagProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20" width={W} height={H} className={flagClass} {...props}>
+      <rect width="30" height="20" fill="#DE2910" />
+      <g fill="#FFDE00">
+        <polygon points="5,2 6,5 3.2,3.2 6.8,3.2 4,5" />
+        <polygon points="10,1 10.6,2.7 9,1.8 11,1.8 9.4,2.7" />
+        <polygon points="12,3 12.6,4.7 11,3.8 13,3.8 11.4,4.7" />
+        <polygon points="12,6 12.6,7.7 11,6.8 13,6.8 11.4,7.7" />
+        <polygon points="10,8 10.6,9.7 9,8.8 11,8.8 9.4,9.7" />
+      </g>
+    </svg>
+  );
+}
+
+/** Map locale codes to flag components */
+export const flagComponents: Record<string, (props: FlagProps) => ReactElement> = {
+  en: FlagGB,
+  fr: FlagFR,
+  ja: FlagJP,
+  ko: FlagKR,
+  es: FlagES,
+  it: FlagIT,
+  de: FlagDE,
+  lv: FlagLV,
+  nl: FlagNL,
+  pl: FlagPL,
+  pt: FlagBR,
+  ru: FlagRU,
+  uk: FlagUA,
+  zh: FlagCN,
+};

components/ui/language-switcher.tsx

@@ -1,36 +1,110 @@
 "use client";
 
+import { useState, useRef, useEffect } from "react";
 import { useLocale } from 'next-intl';
 import { useLocaleStore } from '@/stores/locale-store';
-import { Select } from '@/components/settings/settings-section';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { flagComponents } from './flag-icons';
+
+const languages = [
+  { value: 'en', label: 'English' },
+  { value: 'fr', label: 'Français' },
+  { value: 'ja', label: '日本語' },
+  { value: 'ko', label: '한국어' },
+  { value: 'es', label: 'Español' },
+  { value: 'it', label: 'Italiano' },
+  { value: 'de', label: 'Deutsch' },
+  { value: 'lv', label: 'Latviešu' },
+  { value: 'nl', label: 'Nederlands' },
+  { value: 'pl', label: 'Polski' },
+  { value: 'pt', label: 'Português' },
+  { value: 'ru', label: 'Русский' },
+  { value: 'uk', label: 'Українська' },
+  { value: 'zh', label: '简体中文' },
+];
+
+function FlagIcon({ locale }: { locale: string }) {
+  const Flag = flagComponents[locale];
+  if (!Flag) return null;
+  return <Flag />;
+}
 
 export function LanguageSwitcher({ className }: { className?: string }) {
   const currentLocale = useLocale();
   const setLocale = useLocaleStore((state) => state.setLocale);
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
 
-  const languages = [
-    { value: 'en', label: 'English' },
-    { value: 'fr', label: 'Français' },
-    { value: 'ja', label: '日本語' },
-    { value: 'ko', label: '한국어' },
-    { value: 'es', label: 'Español' },
-    { value: 'it', label: 'Italiano' },
-    { value: 'de', label: 'Deutsch' },
-    { value: 'lv', label: 'Latviešu' },
-    { value: 'nl', label: 'Nederlands' },
-    { value: 'pl', label: 'Polski' },
-    { value: 'pt', label: 'Português' },
-    { value: 'ru', label: 'Русский' },
-    { value: 'zh', label: '简体中文' }
-  ];
+  const current = languages.find((l) => l.value === currentLocale) ?? languages[0];
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+
+  // Close on Escape
+  useEffect(() => {
+    if (!open) return;
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open]);
 
   return (
-    <div className={className}>
-      <Select
-        value={currentLocale}
-        onChange={setLocale}
-        options={languages}
-      />
+    <div ref={containerRef} className={cn("relative", className)}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="flex items-center gap-2 px-3 py-1.5 text-sm rounded-md bg-muted border border-border text-foreground hover:border-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors duration-150 cursor-pointer w-full"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+      >
+        <FlagIcon locale={current.value} />
+        <span className="flex-1 text-left">{current.label}</span>
+        <ChevronDown className={cn("h-3.5 w-3.5 text-muted-foreground transition-transform duration-150", open && "rotate-180")} />
+      </button>
+
+      {open && (
+        <ul
+          ref={listRef}
+          role="listbox"
+          aria-activedescendant={`lang-${currentLocale}`}
+          className="absolute z-50 mt-1 w-full max-h-60 overflow-auto rounded-md border border-border bg-background shadow-lg py-1"
+        >
+          {languages.map((lang) => (
+            <li
+              key={lang.value}
+              id={`lang-${lang.value}`}
+              role="option"
+              aria-selected={lang.value === currentLocale}
+              onClick={() => {
+                setLocale(lang.value);
+                setOpen(false);
+              }}
+              className={cn(
+                "flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer transition-colors duration-100",
+                lang.value === currentLocale
+                  ? "bg-accent text-accent-foreground font-medium"
+                  : "text-foreground hover:bg-accent/50"
+              )}
+            >
+              <FlagIcon locale={lang.value} />
+              <span>{lang.label}</span>
+            </li>
+          ))}
+        </ul>
+      )}
     </div>
   );
 }

hooks/use-browser-navigation.ts

@@ -85,8 +85,8 @@ export function useBrowserNavigation({
       const state = raw ? (raw[STATE_KEY] as StoredNavState | undefined) : undefined;
       if (!state) return;
 
-      // Hold the "applying pop" flag for the entire restore — including any
-      // async work like fetching email content — so the resulting state
+      // Hold the "applying pop" flag for the entire restore - including any
+      // async work like fetching email content - so the resulting state
       // updates don't trigger a fresh history push that would undo the
       // user's back / forward navigation.
       popDepthRef.current += 1;
@@ -147,9 +147,38 @@ export function useBrowserNavigation({
 
     if (!initializedRef.current) {
       initializedRef.current = true;
-      // Replace the current entry on the very first run so we don't
-      // create an extra step the user has to back through to leave the app.
-      window.history.replaceState(newState, "");
+
+      if (emailId || threadId) {
+        // The app is initializing directly on an email/thread view (e.g. the
+        // user navigated here from /settings or an external link).  Seed a
+        // "list" history entry first so that the toolbar back button returns
+        // to the list instead of leaving the app entirely.
+        const listSnapshot: NavSnapshot = {
+          mailboxId,
+          emailId: null,
+          threadId: null,
+          composerOpen: false,
+          sidebarOpen,
+        };
+        const listStored: StoredNavState = {
+          ...listSnapshot,
+          navId: ++navIdCounter,
+        };
+        const baseState = (window.history.state ?? {}) as Record<
+          string,
+          unknown
+        >;
+        window.history.replaceState(
+          { ...baseState, [STATE_KEY]: listStored },
+          "",
+        );
+        // Now push the actual email state on top of the synthetic list entry.
+        window.history.pushState(newState, "");
+      } else {
+        // Replace the current entry on the very first run so we don't
+        // create an extra step the user has to back through to leave the app.
+        window.history.replaceState(newState, "");
+      }
     } else {
       window.history.pushState(newState, "");
     }

hooks/use-config.ts

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { usePolicyStore } from '@/stores/policy-store';
+import { apiFetch } from '@/lib/browser-navigation';
 
 interface ConfigData {
   appName: string;
@@ -50,7 +51,7 @@ export async function fetchConfig(): Promise<ConfigData> {
   }
 
   // Start a new fetch
-  configPromise = fetch('/api/config')
+  configPromise = apiFetch('/api/config')
     .then((res) => {
       if (!res.ok) {
         throw new Error('Failed to fetch config');

hooks/use-tag-drop.ts

@@ -78,14 +78,7 @@ export function useTagDrop({ tagId, onSuccess, onError }: UseTagDropOptions): Us
         const email = currentEmails.find(em => em.id === emailId);
         const keywords = { ...(email?.keywords || {}) };
 
-        // Remove old label/color keywords
-        Object.keys(keywords).forEach(key => {
-          if (key.startsWith("$label:") || key.startsWith("$color:")) {
-            keywords[key] = false;
-          }
-        });
-
-        // Add the new tag
+        // Add the tag without removing existing ones
         keywords[`$label:${tagId}`] = true;
 
         await client.updateEmailKeywords(emailId, keywords);

i18n/request.ts

@@ -44,6 +44,9 @@ export default getRequestConfig(async ({ requestLocale }) => {
     case 'ru':
       messages = (await import('../locales/ru/common.json')).default;
       break;
+    case 'uk':
+      messages = (await import('../locales/uk/common.json')).default;
+      break;
     case 'zh':
       messages = (await import('../locales/zh/common.json')).default;
       break;

i18n/routing.ts

@@ -1,9 +1,21 @@
 import { defineRouting } from 'next-intl/routing';
 
+// Locale prefix mode can be configured via NEXT_PUBLIC_LOCALE_PREFIX.
+// - "never"    (default): /settings - locale from cookie/Accept-Language
+// - "always":             /en/settings - locale always in the URL
+// - "as-needed":          /settings for default locale, /fr/settings otherwise
+// When proxying Bulwark under a sub-path (NEXT_PUBLIC_BASE_PATH), "always" is
+// recommended to avoid next-intl rewrite loops caused by locale detection
+// conflicting with the proxy's path rewriting.
+const localePrefix = (process.env.NEXT_PUBLIC_LOCALE_PREFIX ?? 'never') as
+  | 'never'
+  | 'always'
+  | 'as-needed';
+
 export const routing = defineRouting({
-  locales: ['en', 'fr', 'de', 'es', 'it', 'ja', 'ko', 'lv', 'nl', 'pl', 'pt', 'ru', 'zh'],
+  locales: ['en', 'fr', 'de', 'es', 'it', 'ja', 'ko', 'lv', 'nl', 'pl', 'pt', 'ru', 'uk', 'zh'],
   defaultLocale: 'en',
-  localePrefix: 'never'
+  localePrefix
 });
 
 export const locales = routing.locales;

instrumentation.node.ts

@@ -38,7 +38,7 @@ if (process.env.NODE_ENV === "production") {
       if (!SEMVER_RE.test(remote)) return;
       if (compareVersions(current, remote) > 0) {
         console.info(
-          `Update available: v${remote} — https://github.com/bulwarkmail/webmail`
+          `Update available: v${remote} - https://github.com/bulwarkmail/webmail`
         );
       }
     })

lib/__tests__/config-route.test.ts

@@ -1,3 +1,4 @@
+import { unlink, writeFileSync } from "fs";
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 
 // Mock NextResponse before importing the route
@@ -24,6 +25,7 @@ describe('config API route', () => {
     delete process.env.OAUTH_CLIENT_ID;
     delete process.env.OAUTH_ISSUER_URL;
     delete process.env.SESSION_SECRET;
+    delete process.env.SESSION_SECRET_FILE;
     delete process.env.SETTINGS_SYNC_ENABLED;
     delete process.env.STALWART_FEATURES;
     delete process.env.DEV_MOCK_JMAP;
@@ -128,6 +130,19 @@ describe('config API route', () => {
 
     const config = await getConfig();
 
+    expect(config.rememberMeEnabled).toBe(true);
+	});
+
+  it('should enable rememberMe when SESSION_SECRET_FILE is set', async () => {
+    writeFileSync('./session-secret', 'test-secret');
+    process.env.SESSION_SECRET_FILE = './session-secret';
+
+    const config = await getConfig();
+
+    unlink('./session-secret', (err) => {
+      if (err) throw err;
+    });
+
     expect(config.rememberMeEnabled).toBe(true);
   });
 
@@ -138,6 +153,23 @@ describe('config API route', () => {
 
     process.env.SESSION_SECRET = 'test-secret';
     const config2 = await getConfig();
+    expect(config2.settingsSyncEnabled).toBe(true);
+	});
+
+  it('should enable settingsSync only when both SESSION_SECRET_FILE and SETTINGS_SYNC_ENABLED are set', async () => {
+    process.env.SETTINGS_SYNC_ENABLED = 'true';
+    const config1 = await getConfig();
+    expect(config1.settingsSyncEnabled).toBe(false);
+
+    writeFileSync('./session-secret', 'test-secret');
+    process.env.SESSION_SECRET_FILE = './session-secret';
+
+    const config2 = await getConfig();
+
+    unlink('./session-secret', (err) => {
+      if (err) throw err;
+    });
+
     expect(config2.settingsSyncEnabled).toBe(true);
   });
 

lib/__tests__/dev-jmap-mock.test.ts

@@ -69,7 +69,7 @@ describe('dev-jmap mock server', () => {
     });
   });
 
-  describe('POST /api — Mailbox/get', () => {
+  describe('POST /api - Mailbox/get', () => {
     it('should return list of mailboxes', async () => {
       const req = makeRequest('http://localhost:3000/api/dev-jmap/api', {
         method: 'POST',
@@ -88,7 +88,7 @@ describe('dev-jmap mock server', () => {
     });
   });
 
-  describe('POST /api — Email/query', () => {
+  describe('POST /api - Email/query', () => {
     it('should filter by mailbox', async () => {
       const req = makeRequest('http://localhost:3000/api/dev-jmap/api', {
         method: 'POST',
@@ -117,7 +117,7 @@ describe('dev-jmap mock server', () => {
     });
   });
 
-  describe('POST /api — Email/get', () => {
+  describe('POST /api - Email/get', () => {
     it('should return emails by ids', async () => {
       const req = makeRequest('http://localhost:3000/api/dev-jmap/api', {
         method: 'POST',
@@ -150,7 +150,7 @@ describe('dev-jmap mock server', () => {
     });
   });
 
-  describe('POST /api — Email/set', () => {
+  describe('POST /api - Email/set', () => {
     it('should update email keywords', async () => {
       const req = makeRequest('http://localhost:3000/api/dev-jmap/api', {
         method: 'POST',
@@ -166,7 +166,7 @@ describe('dev-jmap mock server', () => {
     });
   });
 
-  describe('POST /api — Identity/get', () => {
+  describe('POST /api - Identity/get', () => {
     it('should return identities', async () => {
       const req = makeRequest('http://localhost:3000/api/dev-jmap/api', {
         method: 'POST',
@@ -183,7 +183,7 @@ describe('dev-jmap mock server', () => {
     });
   });
 
-  describe('POST /api — unknown method', () => {
+  describe('POST /api - unknown method', () => {
     it('should return error for unknown methods', async () => {
       const req = makeRequest('http://localhost:3000/api/dev-jmap/api', {
         method: 'POST',
@@ -199,7 +199,7 @@ describe('dev-jmap mock server', () => {
     });
   });
 
-  describe('POST /api — back-references', () => {
+  describe('POST /api - back-references', () => {
     it('should resolve #ids from Email/query result', async () => {
       const req = makeRequest('http://localhost:3000/api/dev-jmap/api', {
         method: 'POST',
@@ -220,7 +220,7 @@ describe('dev-jmap mock server', () => {
     });
   });
 
-  describe('POST /api — invalid request', () => {
+  describe('POST /api - invalid request', () => {
     it('should return 400 for missing methodCalls', async () => {
       const req = makeRequest('http://localhost:3000/api/dev-jmap/api', {
         method: 'POST',

lib/__tests__/jmap-client-resilience.test.ts

@@ -68,7 +68,7 @@ describe('JMAPClient resilience', () => {
     return client;
   }
 
-  describe('authenticatedFetch — network error retry', () => {
+  describe('authenticatedFetch - network error retry', () => {
     it('retries once on transient network error', async () => {
       const client = await createConnectedClient();
       const echoResponse = { methodResponses: [['Core/echo', { ping: 'pong' }, '0']] };
@@ -95,7 +95,7 @@ describe('JMAPClient resilience', () => {
     });
   });
 
-  describe('authenticatedFetch — basic auth 401 session refresh', () => {
+  describe('authenticatedFetch - basic auth 401 session refresh', () => {
     it('refreshes session and retries on 401 for API requests', async () => {
       const client = await createConnectedClient();
       const refreshedSession = makeSession({ apiUrl: 'https://mail.example.com/jmap/api-v2' });
@@ -138,12 +138,12 @@ describe('JMAPClient resilience', () => {
 
       // connect() should throw without trying to refresh session (would cause infinite recursion)
       await expect(client.connect()).rejects.toThrow('Invalid username or password');
-      // Only one fetch call — no refresh attempt
+      // Only one fetch call - no refresh attempt
       expect(fetchSpy).toHaveBeenCalledTimes(1);
     });
   });
 
-  describe('authenticatedFetch — bearer token refresh', () => {
+  describe('authenticatedFetch - bearer token refresh', () => {
     it('refreshes token and retries on 401 for bearer mode', async () => {
       const tokenRefresh = vi.fn().mockResolvedValue('new-token-456');
       const session = makeSession();
@@ -172,7 +172,7 @@ describe('JMAPClient resilience', () => {
     });
   });
 
-  describe('authenticatedFetch — 429 rate limiting', () => {
+  describe('authenticatedFetch - 429 rate limiting', () => {
     it('stops sending authenticated requests until the retry window expires', async () => {
       const client = await createConnectedClient();
 
@@ -258,7 +258,7 @@ describe('JMAPClient resilience', () => {
       // So ping throws, keep-alive catches it, fires false
       // Then reconnect → connect() → authenticatedFetch(sessionUrl) succeeds
       fetchSpy
-        // ping fails — network error, retry also fails
+        // ping fails - network error, retry also fails
         .mockRejectedValueOnce(new TypeError('Failed to fetch'))
         .mockRejectedValueOnce(new TypeError('Failed to fetch'))
         // reconnect → connect() → session URL succeeds

lib/__tests__/mailbox-deep-nesting.test.ts

@@ -267,13 +267,13 @@ describe('GitHub #118: duplicate subfolder names cause depth-4 orphaning', () =>
   it('should keep nested folders when a subfolder has the same name as a role mailbox', () => {
     // Reporter's exact scenario: two subfolders with the same name.
     // The dedup uses substring matching and removes non-role folders whose name
-    // matches a role folder — even if they're deep in the tree with children.
+    // matches a role folder - even if they're deep in the tree with children.
     const mailboxes = [
       makeMailbox({ id: 'inbox', name: 'Inbox', role: 'inbox' }),
       makeMailbox({ id: 'sent-role', name: 'Sent', role: 'sent' }),
       // User-created subfolder also named "Sent" nested under Inbox
       makeMailbox({ id: 'sent-custom', name: 'Sent', parentId: 'inbox' }),
-      // Child of the custom "Sent" folder — becomes orphaned if parent is deduped
+      // Child of the custom "Sent" folder - becomes orphaned if parent is deduped
       makeMailbox({ id: 'sent-child', name: 'Archive', parentId: 'sent-custom' }),
     ];
 
@@ -281,7 +281,7 @@ describe('GitHub #118: duplicate subfolder names cause depth-4 orphaning', () =>
     const flat = flattenMailboxTree(tree);
     const rootIds = tree.map(n => n.id);
 
-    // sent-custom MUST be kept because it has children — removing it orphans sent-child
+    // sent-custom MUST be kept because it has children - removing it orphans sent-child
     const sentCustom = flat.find(n => n.id === 'sent-custom');
     expect(sentCustom).toBeDefined();
     expect(sentCustom!.depth).toBe(1); // nested under Inbox
@@ -293,7 +293,7 @@ describe('GitHub #118: duplicate subfolder names cause depth-4 orphaning', () =>
   });
 
   it('should keep nested folders when name is substring of a role name', () => {
-    // "Draft" is a substring of "Drafts" — dedup removes it, orphaning children
+    // "Draft" is a substring of "Drafts" - dedup removes it, orphaning children
     const mailboxes = [
       makeMailbox({ id: 'inbox', name: 'Inbox', role: 'inbox' }),
       makeMailbox({ id: 'drafts-role', name: 'Drafts', role: 'drafts' }),
@@ -343,22 +343,22 @@ describe('GitHub #118: duplicate subfolder names cause depth-4 orphaning', () =>
 
   it('should only dedup root-level non-role mailboxes that duplicate role mailboxes', () => {
     // Dedup should only remove mailboxes that are BOTH:
-    // 1. At root level (no parentId) — same structural position as role mailbox
+    // 1. At root level (no parentId) - same structural position as role mailbox
     // 2. Name-matching a role mailbox
     // Nested mailboxes with matching names should always be kept.
     const mailboxes = [
       makeMailbox({ id: 'inbox', name: 'Inbox', role: 'inbox' }),
       makeMailbox({ id: 'sent-role', name: 'Sent', role: 'sent' }),
-      makeMailbox({ id: 'sent-dup', name: 'Sent Mail' }), // root-level duplicate — OK to remove
+      makeMailbox({ id: 'sent-dup', name: 'Sent Mail' }), // root-level duplicate - OK to remove
       makeMailbox({ id: 'proj', name: 'Projects', parentId: 'inbox' }),
-      makeMailbox({ id: 'sent-nested', name: 'Sent', parentId: 'proj' }), // nested — must keep
+      makeMailbox({ id: 'sent-nested', name: 'Sent', parentId: 'proj' }), // nested - must keep
       makeMailbox({ id: 'report', name: 'Report', parentId: 'sent-nested' }),
     ];
 
     const tree = buildMailboxTree(mailboxes);
     const flat = flattenMailboxTree(tree);
 
-    // "Sent Mail" at root (no parentId) can be deduped — that's fine
+    // "Sent Mail" at root (no parentId) can be deduped - that's fine
     // But "Sent" nested under Projects must be kept
     const sentNested = flat.find(n => n.id === 'sent-nested');
     expect(sentNested).toBeDefined();
@@ -377,7 +377,7 @@ describe('mailbox orphan behavior (missing parent)', () => {
     const mailboxes = [
       makeMailbox({ id: 'inbox', name: 'INBOX', role: 'inbox' }),
       makeMailbox({ id: 'privat', name: 'PRIVAT', parentId: 'inbox' }),
-      // 'bookings' is MISSING — simulating truncated JMAP response
+      // 'bookings' is MISSING - simulating truncated JMAP response
       makeMailbox({ id: 'hotel2', name: 'HOTEL2', parentId: 'bookings' }),
       makeMailbox({ id: 'restaurant', name: 'RESTAURANT', parentId: 'hotel2' }),
     ];

lib/__tests__/oauth-discovery.test.ts

@@ -92,7 +92,7 @@ describe('oauth/discovery', () => {
     expect(consoleSpy).toHaveBeenCalled();
   });
 
-  it('caches results — second call for same server URL does not re-fetch', async () => {
+  it('caches results - second call for same server URL does not re-fetch', async () => {
     vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce({
       ok: true,
       json: () => Promise.resolve(VALID_METADATA),

lib/__tests__/sieve-generator.test.ts

@@ -196,10 +196,15 @@ describe('sieve generator', () => {
       expect(result.vacation?.isEnabled).toBe(true);
     });
 
-    it('should mark as opaque when real filter rules exist alongside vacation', () => {
+    it('parses filter rules alongside vacation as external when no metadata is present', () => {
       const script = `require ["vacation", "fileinto"];\n\nvacation "Away";\n\nif header :contains "From" "boss@example.com" {\n    fileinto "Important";\n}\n`;
       const result = parseScript(script);
-      expect(result.isOpaque).toBe(true);
+      // New behavior: preserve both the vacation statement (as opaque) and
+      // the if-block (as a structured external rule) instead of dropping them.
+      expect(result.isOpaque).toBe(false);
+      const ifRule = result.rules.find(r => r.origin === 'external');
+      expect(ifRule?.conditions[0]).toMatchObject({ field: 'from', comparator: 'contains', value: 'boss@example.com' });
+      expect(ifRule?.actions[0]).toEqual({ type: 'move', value: 'Important' });
     });
 
     it('should handle Stalwart :mime format vacation script', () => {