chore: update version to 1.5.2

Co-authored-by: Copilot <copilot@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,12 +6,19 @@
 # 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)
+# URL of your JMAP-compatible mail server (required unless ALLOW_CUSTOM_JMAP_ENDPOINT is set)
 JMAP_SERVER_URL=https://your-jmap-server.com
 
+# Allow users to specify a custom JMAP server URL on the login form.
+# When enabled, a "JMAP Server" field appears on the login page.
+# Users can connect to any JMAP-compatible server.
+# NOTE: External JMAP servers must include this domain in their CORS
+# Access-Control-Allow-Origin header, or browser requests will be blocked.
+# ALLOW_CUSTOM_JMAP_ENDPOINT=true
+
 # =============================================================================
 # Stalwart Mail Server Integration
 # =============================================================================
@@ -20,11 +27,6 @@ JMAP_SERVER_URL=https://your-jmap-server.com
 # Set to "false" to disable if using a non-Stalwart JMAP server.
 # STALWART_FEATURES=true
 
-# If your reverse proxy doesn't forward Stalwart management API paths
-# (/api/account/*, /api/principal/*), set this to the URL where Stalwart's
-# HTTP listener is directly reachable. Defaults to JMAP_SERVER_URL if not set.
-# STALWART_API_URL=https://admin.example.com
-
 # =============================================================================
 # OAuth / OpenID Connect (optional)
 # =============================================================================
@@ -41,6 +43,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
@@ -53,6 +57,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
@@ -65,11 +71,19 @@ 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 (see docker-compose.yml).
-#   volumes:
-#     - bulwark-settings:/app/data/settings
 # SETTINGS_DATA_DIR=./data/settings
 
+# =============================================================================
+# Admin Dashboard Data
+# =============================================================================
+
+# Directory for admin dashboard state: config overrides, admin password hash,
+# installed plugins/themes, and audit logs (default: ./data/admin).
+# For Docker, the default resolves to /app/data/admin - mount a persistent
+# volume there (see docker-compose.yml).
+# ADMIN_DATA_DIR=./data/admin
+
 # =============================================================================
 # Server Listen Address
 # =============================================================================
@@ -95,41 +109,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 (https://...) or a path relative to the public/ directory.
-# Can be an absolute URL 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 the Bulwark white logo.
-# Dark mode logo (shown on dark backgrounds), defaults to 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/FUNDING.yml

@@ -0,0 +1,4 @@
+# Bulwark Webmail – Funding configuration
+# https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository
+
+github: [bulwarkmail]

.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=raw,value=latest
-            type=sha,prefix={{branch}}-
+            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

.husky/commit-msg

@@ -1,7 +0,0 @@
-# Check for AI attribution in commit message
-if grep -qi "co-authored-by.*claude\|co-authored-by.*anthropic\|claude code\|claude sonnet\|claude opus" "$1"; then
-  echo "❌ ERROR: Commit message contains AI attribution (Claude/Anthropic)"
-  echo "   This violates project policy in CLAUDE.md"
-  echo "   Remove 'Co-Authored-By: Claude' and similar references"
-  exit 1
-fi

CHANGELOG.md

@@ -1,5 +1,279 @@
 # Changelog
 
+## 1.5.2 (2026-04-27)
+
+### Features
+
+- **Plugins**: New `composer-sidebar` slot and `ui:composer-sidebar` permission — plugins can now render a panel on either side of the New Message dialog. See `repos/subway-surfers` for an example
+- **Plugins**: Manifests can declare `frameOrigins` — a strictly-validated list of `https://host` origins the plugin needs to embed. The proxy reads the union from enabled plugins and merges it into the host CSP `frame-src`, so the host CSP no longer needs to know about specific embed providers
+- **Calendar/Contacts**: JMAP sharing for calendars and address books
+- **i18n**: Czech language support
+
+### Fixes
+
+- **Security**: Validate URLs before outbound fetch
+- **Calendar**: Prevent drag creation on touch events in the time grid
+- **Contacts**: Emit RFC 9553 name kinds and decode QUOTED-PRINTABLE in vCard import (#224, #187)
+- **Mail**: Hide preview line in compact density to match settings preview (#223)
+- **Proxy**: Inline matcher for Next.js proxy and drop unnecessary Node.js runtime config
+- **i18n**: Portuguese fixes for "ficheiro" and "contactos" variants
+
+## 1.5.1 (2026-04-25)
+
+### Features
+
+- **Stalwart**: OAuth auto-setup with dialog and validation for origin and issuer URLs
+- **Mail**: Right-click context menu on the folders sidebar
+- **Mail**: Replace folder `prompt()` calls with a proper modal dialog
+- **Calendar**: Add 'Today' button to the desktop calendar toolbar
+- **Junk**: Setting to show avatars in the Junk folder (off by default)
+
+### Fixes
+
+- **Admin**: Restore admin panel after Stalwart v0.16 REST API removal
+- **Viewer**: Restore broken viewer toolbar actions and improve the mobile menu (#220)
+- **Folders**: Stop flicker on background folder refresh
+- **Email**: Preserve search/filter on batch move and archive
+- **Email**: Preserve search/filter when moving emails via drag-drop
+- **i18n**: Improve Korean flag
+
+## 1.5.0 (2026-04-22)
+
+### Breaking Changes
+
+- **Self-service portal now needs Stalwart 0.16+**: Stalwart dropped its self-service HTTP API in 0.16.0 and replaced it with JMAP. Bulwark Webmail only talks to the new JMAP endpoint, so the self-service portal (account settings, app passwords, API keys) requires Stalwart 0.16 or newer. `STALWART_API_URL` is deprecated, these actions go through the normal JMAP session.
+
+### Features
+
+- **Stalwart**: Migrate Stalwart management API to JMAP `x:` methods for Stalwart 0.16
+- **Admin**: Add API Keys management and IP allowlist for App Passwords
+- **Contacts**: Revamp contact detail view with filters, photo, print, and duplicate actions
+- **Contacts**: Add contact activity component showing recent emails and upcoming events
+- **Contacts**: Add right-click context menu
+- **Contacts**: Group contacts by first letter with sticky section headers, toggleable in settings
+- **Calendar**: Support resizing events from the top edge
+- **Calendar**: Add timezone-aware formatting for event start times and update `utcEnd` on duration change
+- **Calendar**: Optimize layout of overlapping events
+- **Calendar**: Add collapsible details to calendar invitation banner
+- **Email**: Implement batch archiving and bulk moving of emails
+- **Email**: Show full folder path in move/drop toast
+- **Settings**: Reorganize settings into 6 groups with clearer tabs
+- **Navigation**: Add account-addition button to the navigation rail
+- **Mobile**: Streamline email viewer header layout
+- **Mobile**: Pass `isMobile` through calendar views and time-grid interactions
+
+### Fixes
+
+- **Mailbox**: Retry mailbox fetch on first login to handle lazy provisioning (#217)
+- **Mailbox**: Use fresh state in archive handling to avoid stale mailbox data
+- **Mailbox**: Improve error message on mailbox creation failure
+- **Auth**: Skip `checkAuth` on route change when already authenticated
+- **Auth**: Clean up unused imports and improve TOTP QR code rendering
+- **UI**: Align hover styles and selection-toggle target with focused item
+- **UI**: Read `matchMedia` synchronously on client to prevent layout flicker
+
+### Refactor
+
+- **Settings**: Remove Stalwart API URL configuration (now derived via JMAP)
+
+### Chore
+
+- **i18n**: Add missing translation keys
+- **Deps**: Bump dependencies to latest compatible versions
+
+## 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
+
+- **PWA**: Add PWA support with service worker and install prompt
+- **Calendar**: Add birthday calendar feature with settings and localization
+- **Calendar**: Clamp February 29 birthdays in non-leap years
+- **Identity**: Add automatic identity synchronization (#167)
+- **Plugins**: Disable plugins by default and require admin approval
+- **Plugins**: Replace auth header exposure with a secure HTTP proxy API for plugins
+- **Auth**: Add configurable OAuth scopes and cookie security via environment variables
+- **Email**: Sync mail view to browser history for back/forward navigation
+- **Contacts**: Add ability to rename address books (#152)
+- **UI**: Add version badge in settings
+- **i18n**: Add Latvian (lv) locale support
+- **i18n**: Add Polish language support
+- **i18n**: Add Korean language support
+- **i18n**: Add Simplified Chinese (zh_CN) locale support
+
+### Fixes
+
+- **Email**: Show recipient instead of sender in Sent and Drafts folder lists
+- **Email**: Embed dropped images as data URLs and prevent duplicate attachments (#163)
+- **Email**: Fix logic for marking email as read in EmailViewer
+- **Email**: Fix archive action passing MouseEvent as argument
+- **Mailbox**: Preserve search filters on push-triggered mailbox refresh (#164)
+- **Mailbox**: Align shared account folders with primary folders (#151)
+- **Mailbox**: Fetch mailboxes on mount in FolderSettings when store is empty
+- **Mailbox**: Improve mailbox deletion error handling
+- **Calendar**: Improve calendar event retrieval by batching requests to avoid server limits (#141)
+- **Calendar**: Compute per-occurrence UTC start/end in recurrence expansion (#116)
+- **Calendar**: Guard against undefined trigger in calendar event alert popover (#143)
+- **Files**: Stream WebDAV PUT uploads to avoid buffering in memory (#162)
+- **Files**: Prune recent files against server nodes on refresh (#146)
+- **Files**: Fix file deletion logic to update recent files and handle errors (#146)
+- **Files**: Extend file drop zone to fill remaining viewport height
+- **Files**: Fallback to application/octet-stream for long MIME types
+- **Security**: Replace unguarded crypto.randomUUID() with safe generateUUID() utility
+- **Security**: Validate plugin HTTP post URL against origin with regression tests
+- **Security**: Allow blob images in CSP for inline drag-and-drop (#163)
+- **Auth**: Resolve settings sync identity mismatch for OAuth/SSO sessions (#127)
+- **Contacts**: Fix address book ID namespacing for shared contacts in create and update operations (#133)
+- **UI**: Fix focused mode expanding beyond screen bounds (#156)
+- **API**: Handle 403 on principal fetch without console error
+- **API**: Enhance error handling in Stalwart API responses
+
+## 1.4.11 (2026-03-31)
+
+### Features
+
+- **Logging**: Add logging categories for better log management
+
+### Fixes
+
+- **Security**: Harden security with CSP enforcement, SSRF redirect validation, reenabled S/MIME chain verify, IP spoofing prevention, and PDF iframe sandbox
+- **Security**: Harden proxy authentication and SSRF defenses
+- **Security**: Block plugins with dangerous JS patterns and enforce strict session secret length validation
+- **S/MIME**: Add self-signed certificate detection and update status messages for S/MIME signatures
+- **Email**: Auto-focus input fields in email composer for improved user experience (#126)
+- **Mailbox**: Prevent orphaning of nested mailboxes by restricting deduplication to root-level folders
+- **JMAP**: Strip server-immutable fields from updates before sending to JMAP (#128)
+- **Files**: Update file feature disabled messages and add stability warnings
+- **i18n**: Add missing translation keys to all non-English locales
+
+## 1.4.10 (2026-03-31)
+
+### Features
+
+- **Plugins**: Add plugin configuration UI with schema-driven admin config page, calendar event action slot, and Jitsi Meet plugin
+- **Calendar**: Implement client-side recurrence expansion for calendar events
+- **Calendar**: Add iCal subscription editing and batch event import
+- **Calendar**: Add hover preview settings and functionality
+- **Calendar**: Add virtual location input for calendar events (#121)
+- **Email**: Add reply-to addresses support in email composer
+- **Email**: Add mail layout settings and update email list components
+- **Email**: Add auto-select reply identity feature with settings and localization
+- **Email**: Enhance compose functionality with button integration and translations
+- **Filters**: Preserve activation state when updating or creating Sieve scripts to avoid deactivating server-managed vacation scripts
+- **Filters**: Skip server-managed vacation script in Sieve script handling
+- **Settings**: Add support for custom JMAP server endpoints in login and settings
+- **Settings**: Add folder expansion state management and settings navigation
+- **UI**: Add options to hide account switcher and show account avatars on navigation rail
+- **i18n**: Add JMAP server endpoint labels and hints in multiple languages
+- **i18n**: Add missing translation keys to all non-English locales
+
+### Fixes
+
+- **Security**: Patch critical auth bypass and credential leak vulnerabilities
+- **Security**: Support 3DES S/MIME decryption by importing legacy RSAES-PKCS1-v1_5 keys and add diagnostic logging (#35)
+- **Security**: Account isolation, auto-import signer certs, and no-key error handling (#35)
+- **Calendar**: Fix JSCalendar 2.0 recurrenceRule single-object compatibility (#116)
+- **Calendar**: Enhance calendar event handling to distinguish between events and tasks
+- **Calendar**: Link existing events to target calendar during iCal import instead of skipping (#113)
+- **Calendar**: Deduplicate UIDs during iCal import to prevent mass failures (#113)
+- **Calendar**: Fix events disappearing after iCal import/subscription refresh
+- **Calendar**: Enhance calendar event handling with full-day detection and layout adjustments
+- **Calendar**: Use UTC timestamps for timed event rendering
+- **Calendar**: Work around Stalwart not returning Task objects via CalendarEvent/query
+- **Email**: Enhance email loading and deduplication logic in email store (#119)
+- **Email**: Ensure draft editing function is called correctly in EmailViewer component (#60)
+- **Email**: Match hover action background to selected row state
+- **Email**: Align tag counts with mailbox folder counts in sidebar
+- **Auth**: Handle 2FA/TOTP session expiry with basic auth (#117)
+- **Mailbox**: Improve mailbox tree logic and enhance mailbox handling with logging (#118)
+- **UI**: Improve dark mode handling for media elements and background images
+- **UI**: Adjust account list spacing and remove push connection indicator
+- **UI**: Fix nested button in theme card
+
 ## 1.4.9 (2026-03-27)
 
 ### Features
@@ -287,7 +561,7 @@
 ### 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)
@@ -297,7 +571,7 @@
 - **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)
 

CONTRIBUTING.md

@@ -1,9 +1,9 @@
 <div align="center">
 
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="public/branding/Bulwark%20Logo%20with%20Lettering%20White%20and%20Color.svg" />
+  <source media="(prefers-color-scheme: dark)" srcset="public/branding/Bulwark_Logo_with_Lettering_White_and_Color.svg" />
-  <source media="(prefers-color-scheme: light)" srcset="public/branding/Bulwark%20Logo%20with%20Lettering%20Dark%20Color.svg" />
+  <source media="(prefers-color-scheme: light)" srcset="public/branding/Bulwark_Logo_with_Lettering_Dark_Color.svg" />
-  <img src="public/branding/Bulwark%20Logo%20with%20Lettering%20Dark%20Color.svg" alt="Bulwark Webmail" width="220" />
+  <img src="public/branding/Bulwark_Logo_with_Lettering_Dark_Color.svg" alt="Bulwark Webmail" width="280" />
 </picture>
 
 </div>
@@ -12,6 +12,17 @@
 
 Thank you for your interest in contributing to Bulwark Webmail! This document provides guidelines and information for contributors.
 
+## Join our Community
+**New to the project or looking for a place to start?** You don't need to be an expert to contribute! Whether you need help setting up your environment, want to report a bug, or are interested in helping with translations, our Discord is the best place to connect.
+
+* **Get Support:** Get real-time help with development hurdles.
+* **Contribute:** Share ideas, suggest features, or help us improve documentation.
+* **Collaborate:** Meet the team and other contributors working to make Bulwark better.
+
+[**Join the Bulwark Discord Server**](https://discord.gg/tYCujymGrT)
+
+---
+
 ## Getting Started
 
 ### Development Setup
@@ -195,7 +206,7 @@ webmail/
 - **Never commit sensitive data** (API keys, passwords, etc.)
 - **Sanitize user input** and email content
 - **Block external content** by default for privacy
-- Report security vulnerabilities privately
+- Report security vulnerabilities privately (e.g. bulwark@rbm.systems)
 
 ## Questions?
 

FEATURES.md

@@ -0,0 +1,124 @@
+# Features
+
+## Mail
+
+- Read, compose, reply, reply-all, and forward with a Tiptap rich text editor (inline images, drag-and-drop embedding)
+- Gmail-style threading with inline expansion and an optional conversation toggle
+- Unified mailbox view across all connected accounts
+- Draft auto-save with identity preservation
+- Attachment upload, download, and inline preview; forgotten-attachment warning
+- Full-text search with JMAP filter panel, search chips, wildcards, OR conditions, and cross-mailbox queries
+- Batch operations – multi-select, archive, delete, move, tag
+- Archive modes – direct, by year, or by month
+- Multi-tag support with color labels, reordering, and drag-and-drop assignment
+- Star/unstar with configurable mark-as-read delay
+- Virtual scrolling for large mailboxes
+- Quick reply, hover actions, sender avatars (favicon-based), and recipient popovers
+- Plain-text composer mode and Reply-To support
+- TNEF (`winmail.dat`) extraction and `message/rfc822` unwrapping
+- Folder management with icon picker, subfolders, and sidebar counts
+- Print directly from the viewer
+- Browser history sync for back/forward navigation
+
+## Calendar
+
+- Month, week, day, and agenda views with a mini-calendar sidebar and task list
+- Drag-to-reschedule, click-drag creation, and edge-resize with 15-minute snap
+- Recurring events with scoped edit/delete (this / this and following / all)
+- iMIP invitations on create and update (RFC 5545 / 6047), organizer/attendee UI, and RSVP with trust assessment
+- Inline calendar invitations in the email viewer – auto-detect `.ics`, RSVP, import
+- iCalendar import with preview, bulk create, and UID deduplication
+- iCal / webcal subscriptions with editing and batch import
+- Auto-generated birthday calendar from contacts
+- Virtual locations (video conference URLs) as first-class event fields
+- Task management with due dates, priority, and completion status
+- Shared calendars with CalDAV discovery and multi-account home resolution
+- Week numbers, event hover preview, notifications with sound picker
+- Real-time sync via JMAP push
+
+## Contacts
+
+- JMAP sync (RFC 9553 / 9610) with local fallback
+- Multiple address books with drag-and-drop between books
+- Contact groups with member management
+- vCard import/export (RFC 6350) with duplicate detection
+- Trusted senders stored in a dedicated JMAP address book
+- Autocomplete in the composer (To / Cc / Bcc)
+
+## Filters & Templates
+
+- Server-side filters via JMAP Sieve Scripts (RFC 9661)
+- Visual rule builder with expanded view; conditions (From, To, Subject, Size, Body…) and actions (Move, Forward, Star, Discard…)
+- Preserves rules authored in other clients
+- Raw Sieve editor with syntax validation
+- Vacation responder with date range scheduling
+- Reusable email templates with placeholder auto-fill (`{{recipientName}}`, `{{date}}`, …)
+
+## Files
+
+- JMAP FileNode browser (Stalwart native cloud storage)
+- Streamed WebDAV PUT upload and folder upload with progress tracking
+- Dynamic upload limits based on server configuration
+- Grid and list views with sorting by name, size, or date
+- Previews for images, text, audio, and video
+- Clipboard operations (cut, copy, paste, duplicate), favorites, and recent files
+
+## Security & Privacy
+
+- External content blocked by default, with a trusted senders list
+- HTML sanitization via DOMPurify
+- S/MIME – manage certificates, sign, encrypt, decrypt, and verify; legacy 3DES / PBE support; per-account key isolation
+- SPF / DKIM / DMARC status indicators
+- OAuth2 / OIDC with PKCE (Keycloak, Authentik, or built-in), OAuth-only mode, OAuth app passwords, and non-interactive SSO for embedded deployments
+- TOTP two-factor authentication
+- Account security panel for password and 2FA management via the Stalwart admin API
+- Optional "Remember me" via AES-256-GCM encrypted httpOnly cookie
+- Enforced CSP with per-request nonce, SSRF redirect validation, PDF iframe sandbox, and IP spoofing prevention
+- Plugin hardening with dangerous-pattern detection and admin approval
+- Newsletter unsubscribe (RFC 2369)
+
+## Interface
+
+- Three-pane layout with resizable columns
+- Dark and light themes with intelligent email color transformation
+- Responsive desktop, tablet, and mobile layouts
+- Full keyboard navigation
+- Drag-and-drop email organization and tag assignment
+- Interactive guided tour for new users
+- Right-click context menus, toast notifications with undo
+- Customizable toolbar position, favicon, and login branding
+- Pinnable sidebar apps with drag-and-drop reordering
+- Encrypted settings sync across devices
+- Storage quota display
+- WCAG AA contrast, reduced-motion support, focus trap, and screen reader live regions
+
+## Internationalization
+
+14 languages: English · Français · 日本語 · Español · Italiano · Deutsch · Nederlands · Português · Русский · 한국어 · Polski · Latviešu · 简体中文 · Українська
+
+Automatic browser detection with persistent preference. Configurable locale URL prefix via `NEXT_PUBLIC_LOCALE_PREFIX`.
+
+## Identity & Multi-Account
+
+- Up to 5 simultaneous accounts with instant switching and per-account session persistence
+- Account switcher with connection status and default account selection
+- Multiple sender identities with per-identity signatures, automatic sync, and badges in viewer/list
+- Sub-addressing (`user+tag@domain.com`) with contextual tag suggestions
+- Shared folders across accounts
+- Optional custom JMAP endpoints on the login form (`ALLOW_CUSTOM_JMAP_ENDPOINT`)
+
+## Admin & Extensibility
+
+- Stalwart admin dashboard with dedicated policy sections
+- Plugin system – schema-driven config UI, render and intercept hooks, `onAvatarResolve` and i18n APIs, calendar event slots, and managed policy enforcement
+- Themes – upload, enforce, and manage admin-controlled themes as ZIP bundles
+- Extension marketplace – browse and install plugins and themes from a configurable directory (`EXTENSION_DIRECTORY_URL`)
+- Bundled plugins including Jitsi Meet calendar integration
+
+## Operations
+
+- Progressive Web App with service worker, install prompt, and dynamic manifest
+- Automatic update check with server-side logging of new releases
+- Structured logging (`text` or `json`) with category-based levels
+- Release (`main`) and development (`dev`) Docker images on GHCR
+- Demo mode with fixture data – no mail server required

README.md

@@ -8,12 +8,11 @@
 
 # Bulwark Webmail
 
-A modern, self-hosted webmail client for [Stalwart Mail Server](https://stalw.art/).<br/>
+A modern, self-hosted webmail client for [Stalwart Mail Server](https://stalw.art/), built with Next.js and the JMAP protocol.
-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.9-green.svg?logo=git&logoColor=white)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/version-1.5.2-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>
@@ -22,190 +21,56 @@ Built with Next.js and the JMAP protocol.
 
 ## Screenshots
 
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="screenshots/mail-dark.png" />
+  <img src="screenshots/mail-white.png" alt="Mail view" width="100%" />
+</picture>
+
 <table>
 <tr>
-<td width="50%">
+<td width="50%"><img src="screenshots/calendar.png" alt="Calendar" /></td>
-
+<td width="50%"><img src="screenshots/contacts.png" alt="Contacts" /></td>
-<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
-
-</td>
-<td width="50%">
-
-<img src="screenshots/calendar.png" width="100%" alt="Calendar">
-
-**Calendar** — Month, week, day, and agenda views with event management
-
-</td>
 </tr>
 <tr>
-<td width="50%">
+<td><sub><b>Calendar</b> – month, week, day, and agenda views with drag-to-reschedule, iMIP invitations, and CalDAV subscriptions.</sub></td>
-
+<td><sub><b>Contacts</b> – multiple address books, groups, vCard import/export, and autocomplete in the composer.</sub></td>
-<img src="screenshots/contacts.png" width="100%" alt="Contacts">
+</tr>
-
+<tr>
-**Contacts** — Contact management with groups and vCard support
+<td><img src="screenshots/theme.png" alt="Themes" /></td>
-
+<td><img src="screenshots/plugins.png" alt="Plugins" /></td>
-</td>
+</tr>
-<td width="50%">
+<tr>
-
+<td><sub><b>Themes</b> – bundled color themes or upload your own as ZIP bundles; admins can enforce presets.</sub></td>
-<img src="screenshots/files.png" width="100%" alt="File browser">
+<td><sub><b>Plugins</b> – extend the client with bundled or third-party plugins installed from a .zip file.</sub></td>
-
+</tr>
-**Files** — Cloud file browser with upload, preview, and folder navigation
+<tr>
-
+<td><img src="screenshots/mail-white.png" alt="Light mode" /></td>
-</td>
+<td><img src="screenshots/settings.png" alt="Settings" /></td>
+</tr>
+<tr>
+<td><sub><b>Light mode</b> – full theme support with intelligent color transformation for HTML emails.</sub></td>
+<td><sub><b>Settings</b> – appearance, identities, filters, templates, security, and more.</sub></td>
 </tr>
 </table>
 
-<details>
+## Overview
-<summary>More screenshots</summary>
-<table>
-<tr>
-<td width="50%">
 
-<img src="screenshots/inbox%20whitemode.png" width="100%" alt="Inbox — light mode">
+Bulwark is a full webmail suite – not just an inbox. It bundles the four apps most self-hosters end up wanting on the same login:
 
-**Light mode** — Full theme support with intelligent color transformation
+- **Mail** – threading, unified inbox, full-text search, Sieve filters, S/MIME, templates
+- **Calendar** – month/week/day/agenda, recurring events, iMIP invitations, CalDAV subscriptions
+- **Contacts** – multiple address books, groups, vCard import/export
+- **Files** – Stalwart's JMAP FileNode storage with previews and folder upload
 
-</td>
+Plus the infrastructure around them: OAuth2 / OIDC SSO, TOTP 2FA, multi-account (up to 5 at once), 15 languages, PWA install, dark/light themes, a plugin system with an extension marketplace, and a admin dashboard.
-<td width="50%">
 
-<img src="screenshots/settings.png" width="100%" alt="Settings">
+Full feature list: **[FEATURES.md](FEATURES.md)**.
-
-**Settings** — Appearance, identities, filters, templates, and more
-
-</td>
-</tr>
-<tr>
-<td width="50%">
-
-<img src="screenshots/login.png" width="100%" alt="Login page">
-
-**Login** — Configurable branding with OAuth2/OIDC and 2FA support
-
-</td>
-<td width="50%">
-</td>
-</tr>
-</table>
-</details>
-
-## Features
-
-### 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
-- **Print** emails directly from the viewer
-- **Answered/forwarded status icons** in email list and thread views
-- **Color tags/labels** and star/unstar
-- **Virtual scrolling** for large mailboxes
-- **Quick reply** from the viewer
-- **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
-
-### 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
-- **Week numbers** in mini-calendar sidebar
-- **Notifications** with configurable sound, alert persistence, and sound picker with preview playback
-- **Real-time sync** via JMAP push
-
-### Contacts
-
-- **Contact management** with JMAP sync (RFC 9553/9610) and local fallback
-- **Contact groups** with group expansion and member management
-- **vCard import/export** (RFC 6350) with duplicate detection
-- **Autocomplete** in composer (To/Cc/Bcc)
-- **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…)
-- **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.)
-
-### Files
-
-- **File browser** with JMAP FileNode cloud storage (Stalwart native)
-- **Upload and download** files with progress tracking and folder upload support
-- **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
-- **File preview** for images, text, audio, video, and more
-- **Favorites and recent files** for quick access
-- **Bulk operations** — multi-select, delete, move, download
-
-### Security & Privacy
-
-- **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
-- **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
-- **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
-- **Newsletter unsubscribe** (RFC 2369)
-
-### Interface
-
-- **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
-- **Drag-and-drop** email organization between mailboxes and tag assignment
-- **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)
-- **Storage quota** display
-- **Shared folders** — multi-account access
-- **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
-
-Automatic browser detection with persistent preference.
-
-### 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
-- **Identity badges** in viewer and email list
-
-### 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
 
 ---
 
 ## Quick Start
 
-### Docker (recommended)
+### Docker
 
 ```bash
 docker run -d -p 3000:3000 \
@@ -217,7 +82,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,21 +93,21 @@ 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
 ```
 
 ### Development
 
 ```bash
-npm run dev        # Start dev server (mock JMAP server included)
+npm run dev        # Dev server with a mock JMAP server
-npm run typecheck  # Type checking
+npm run typecheck
-npm run lint       # Linting
+npm run lint
 ```
 
 ## Configuration
 
-Edit `.env.local`:
+All variables are evaluated at runtime, so Docker deployments can be reconfigured without rebuilding. Edit `.env.local`:
 
 ```env
 # Required
@@ -252,26 +117,25 @@ JMAP_SERVER_URL=https://mail.example.com
 APP_NAME=My Webmail
 ```
 
-All variables are **runtime** — Docker deployments can be configured without rebuilding.
-
 <details>
-<summary>Server Listen Address</summary>
+<summary>Server listen address</summary>
 
 ```env
 HOSTNAME=0.0.0.0    # Default; use "::" for IPv6
-PORT=3000            # Default listen port
+PORT=3000
 ```
 
 </details>
 
 <details>
-<summary>OAuth2/OIDC (SSO)</summary>
+<summary>OAuth2 / OIDC</summary>
 
 ```env
 OAUTH_ENABLED=true
 OAUTH_CLIENT_ID=webmail
 OAUTH_CLIENT_SECRET=              # optional, for confidential clients
-OAUTH_ISSUER_URL=                 # optional, for external IdPs (Keycloak, Authentik)
+OAUTH_CLIENT_SECRET_FILE=         # path to a file containing the secret
+OAUTH_ISSUER_URL=                 # optional, for external IdPs
 ```
 
 Endpoints are auto-discovered via `.well-known/oauth-authorization-server` or `.well-known/openid-configuration`.
@@ -279,13 +143,77 @@ Endpoints are auto-discovered via `.well-known/oauth-authorization-server` or `.
 </details>
 
 <details>
-<summary>Remember Me</summary>
+<summary>Session & settings sync</summary>
 
 ```env
-SESSION_SECRET=your-secret-key    # Generate with: openssl rand -base64 32
+SESSION_SECRET=                      # openssl rand -base64 32
+SESSION_SECRET_FILE=/session-secret  # path to a file containing the secret
+
+SETTINGS_SYNC_ENABLED=true
+SETTINGS_DATA_DIR=./data/settings    # mount as a volume in Docker
 ```
 
-Credentials encrypted with AES-256-GCM, stored in an httpOnly cookie (30-day expiry).
+Credentials are encrypted with AES-256-GCM and 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 the login form. External servers must CORS-allow the webmail origin.
+
+</details>
+
+<details>
+<summary>Branding & PWA</summary>
+
+```env
+APP_NAME=My Webmail
+APP_SHORT_NAME=Webmail
+APP_DESCRIPTION=Your personal mail
+
+FAVICON_URL=/branding/favicon.svg
+PWA_ICON_URL=/branding/icon.svg      # falls back to FAVICON_URL
+PWA_THEME_COLOR=#3b82f6
+PWA_BACKGROUND_COLOR=#ffffff
+
+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.
+
+LOG_FORMAT=text                      # "text" or "json"
+LOG_LEVEL=info                       # error | warn | info | debug
+```
 
 </details>
 
@@ -319,19 +247,16 @@ 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 Rust mail server with native JMAP support – not IMAP/SMTP with JMAP bolted on. It handles JMAP, IMAP, SMTP, and ManageSieve in a single self-hosted binary with no third-party dependencies.
 
 ## Contributing
 
-See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
+See [CONTRIBUTING.md](CONTRIBUTING.md).
 
 ## License
 
-[GNU AGPL v3](LICENSE)
+[GNU AGPL v3](LICENSE). This repository preserves the original MIT attribution for the fork lineage in [NOTICE](NOTICE).
-
-This repository also preserves the original MIT attribution notice for the
-fork lineage in [NOTICE](NOTICE).
 
 ## Acknowledgments
 
-Thanks to [root-fr/jmap-webmail](https://github.com/root-fr/jmap-webmail/) and [@ma2t](https://github.com/ma2t) for doing most of the groundwork that this project builds upon.
+Thanks to [root-fr/jmap-webmail](https://github.com/root-fr/jmap-webmail/) and [@ma2t](https://github.com/ma2t) for the groundwork this project builds upon.

VERSION

@@ -1 +1 @@
-1.4.9
+1.5.2

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

@@ -30,6 +30,10 @@ import { MiniCalendar } from "@/components/calendar/mini-calendar";
 import { CalendarSidebarPanel } from "@/components/calendar/calendar-sidebar-panel";
 import { EventModal, type PendingEventPreview } from "@/components/calendar/event-modal";
 import { EventDetailPopover } from "@/components/calendar/event-detail-popover";
+import { EventContextMenu } from "@/components/calendar/event-context-menu";
+import { useContextMenu } from "@/hooks/use-context-menu";
+import { useRefreshGesture } from "@/hooks/use-refresh-gesture";
+import { downloadEventICS } from "@/lib/calendar-ics-export";
 import { ICalImportModal } from "@/components/calendar/ical-import-modal";
 import { ICalSubscriptionModal } from "@/components/calendar/ical-subscription-modal";
 import { RecurrenceScopeDialog, type RecurrenceEditScope } from "@/components/calendar/recurrence-scope-dialog";
@@ -39,10 +43,17 @@ import { InlineAppView } from "@/components/layout/inline-app-view";
 import { useSidebarApps } from "@/hooks/use-sidebar-apps";
 import { ResizeHandle } from "@/components/layout/resize-handle";
 import { sanitizeOutgoingCalendarEventData } from "@/lib/calendar-event-normalization";
+import { getEventStartDate } from "@/lib/calendar-utils";
 import { useTaskStore } from "@/stores/task-store";
+import { useContactStore } from "@/stores/contact-store";
 import { cn } from "@/lib/utils";
-import type { CalendarEvent, CalendarParticipant } from "@/lib/jmap/types";
+import type { Calendar, CalendarEvent, CalendarParticipant, CalendarRights } from "@/lib/jmap/types";
+import { ShareCollectionDialog } from "@/components/settings/share-collection-dialog";
+import { ConfirmDialog } from "@/components/ui/confirm-dialog";
+import { useConfirmDialog } from "@/hooks/use-confirm-dialog";
+import { CreateCalendarModal } from "@/components/calendar/create-calendar-modal";
 import { getUserParticipantId } from "@/lib/calendar-participants";
+import { generateBirthdayEvents, createBirthdayCalendar, BIRTHDAY_CALENDAR_ID } from "@/lib/birthday-calendar";
 import { debug } from "@/lib/debug";
 
 type PendingScopeAction =
@@ -65,13 +76,15 @@ export default function CalendarPage() {
     calendars, events, selectedDate, viewMode, selectedCalendarIds,
     isLoading, isLoadingEvents, supportsCalendar, error,
     fetchCalendars, fetchEvents, createEvent, updateEvent, deleteEvent, rsvpEvent,
-    setSelectedDate, setViewMode, toggleCalendarVisibility, updateCalendar,
+    setSelectedDate, setViewMode, toggleCalendarVisibility, updateCalendar, shareCalendar,
-    refreshAllSubscriptions,
+    removeCalendar, clearCalendarEvents,
+    refreshAllSubscriptions, icalSubscriptions,
   } = useCalendarStore();
-  const { firstDayOfWeek, timeFormat, showWeekNumbers, enableCalendarTasks, showTasksOnCalendar } = useSettingsStore();
+  const { firstDayOfWeek, timeFormat, showWeekNumbers, enableCalendarTasks, showTasksOnCalendar, calendarHoverPreview, showBirthdayCalendar, birthdayCalendarColor, updateSetting } = useSettingsStore();
   const taskStore = useTaskStore();
   const fetchTasksFn = useTaskStore(state => state.fetchTasks);
   const { identities } = useIdentityStore();
+  const contacts = useContactStore((s) => s.contacts);
   const normalizedViewMode = isCalendarViewMode(viewMode) ? viewMode : "month";
 
   const currentUserEmails = useMemo(() =>
@@ -82,6 +95,12 @@ export default function CalendarPage() {
   const [showEventModal, setShowEventModal] = useState(false);
   const [showImportModal, setShowImportModal] = useState(false);
   const [showSubscriptionModal, setShowSubscriptionModal] = useState(false);
+  const [editingSubscription, setEditingSubscription] = useState<string | null>(null);
+  const [sharingCalendarId, setSharingCalendarId] = useState<string | null>(null);
+  const [defaultCalendarIdForCreate, setDefaultCalendarIdForCreate] = useState<string | undefined>(undefined);
+  const [showCreateCalendar, setShowCreateCalendar] = useState(false);
+  const { dialogProps: confirmDialogProps, confirm: confirmAction } = useConfirmDialog();
+  const tMgmt = useTranslations("calendar.management");
   const [editEvent, setEditEvent] = useState<CalendarEvent | null>(null);
   const [defaultModalDate, setDefaultModalDate] = useState<Date | undefined>();
   const [defaultModalEndDate, setDefaultModalEndDate] = useState<Date | undefined>();
@@ -107,8 +126,25 @@ export default function CalendarPage() {
   // Swipe navigation ref (handlers defined after navigatePrev/navigateNext)
   const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null);
 
-  // Check auth on mount
+  // 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 – skip when already authenticated so that navigating
+  // between routes doesn't retrigger checkAuth's transient `{ client: null,
+  // isLoading: true }` reset, which was flashing the spinner on every nav.
+  useEffect(() => {
+    const state = useAuthStore.getState();
+    if (state.isAuthenticated && state.client) {
+      setInitialCheckDone(true);
+      return;
+    }
     checkAuth().finally(() => {
       setInitialCheckDone(true);
     });
@@ -146,6 +182,18 @@ export default function CalendarPage() {
     return () => clearInterval(interval);
   }, [client, refreshAllSubscriptions]);
 
+  // Auto-add birthday calendar to selected IDs only when the setting flips
+  // off→on. Firing on every mount would undo a user's manual hide via the
+  // sidebar each time they navigate back to the calendar (see #204).
+  const prevShowBirthdayRef = useRef(showBirthdayCalendar);
+  useEffect(() => {
+    const wasShown = prevShowBirthdayRef.current;
+    prevShowBirthdayRef.current = showBirthdayCalendar;
+    if (!wasShown && showBirthdayCalendar && !selectedCalendarIds.includes(BIRTHDAY_CALENDAR_ID)) {
+      toggleCalendarVisibility(BIRTHDAY_CALENDAR_ID);
+    }
+  }, [showBirthdayCalendar]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const dateRange = useMemo(() => {
     const d = selectedDate;
     switch (normalizedViewMode) {
@@ -335,20 +383,42 @@ export default function CalendarPage() {
     openEditModal(event);
   }, [closeDetail, openEditModal]);
 
+  const {
+    contextMenu: eventContextMenu,
+    openContextMenu: openEventContextMenu,
+    closeContextMenu: closeEventContextMenu,
+    menuRef: eventContextMenuRef,
+  } = useContextMenu<CalendarEvent>();
+
+  const handleContextMenuEvent = useCallback((e: React.MouseEvent, event: CalendarEvent) => {
+    closeDetail();
+    openEventContextMenu(e, event);
+  }, [closeDetail, openEventContextMenu]);
+
   const handleHoverEvent = useCallback((event: CalendarEvent, anchorRect: DOMRect) => {
     if (isMobile) return;
+    if (calendarHoverPreview === 'off') return;
     if (hoverTimerRef.current) { clearTimeout(hoverTimerRef.current); hoverTimerRef.current = null; }
     // Don't show hover popover if the sidebar is already open for this event
     if (showEventModal && editEvent?.id === event.id) return;
-    setDetailEvent(event);
+    if (calendarHoverPreview === 'delay-500ms' || calendarHoverPreview === 'delay-1s' || calendarHoverPreview === 'delay-2s') {
-    setDetailAnchorRect(anchorRect);
+      const ms = calendarHoverPreview === 'delay-500ms' ? 500 : calendarHoverPreview === 'delay-1s' ? 1000 : 2000;
-  }, [isMobile, showEventModal, editEvent]);
+      hoverTimerRef.current = setTimeout(() => {
+        setDetailEvent(event);
+        setDetailAnchorRect(anchorRect);
+      }, ms);
+    } else {
+      setDetailEvent(event);
+      setDetailAnchorRect(anchorRect);
+    }
+  }, [isMobile, calendarHoverPreview, showEventModal, editEvent]);
 
   const handleHoverLeave = useCallback(() => {
+    if (hoverTimerRef.current) { clearTimeout(hoverTimerRef.current); hoverTimerRef.current = null; }
     hoverTimerRef.current = setTimeout(() => {
       setDetailEvent(null);
       setDetailAnchorRect(null);
-    }, 200);
+    }, 300);
   }, []);
 
   const handleEditFromDetail = useCallback(() => {
@@ -385,12 +455,30 @@ export default function CalendarPage() {
     }
   }, [client, fetchEvents]);
 
-  const focusCalendarOnEvent = useCallback((event: Pick<CalendarEvent, "start">) => {
+  // Intercept browser refresh gestures (F5, Ctrl/Cmd+R, pull-to-refresh)
+  // and refresh calendar data via JMAP instead of reloading the page.
+  useRefreshGesture({
+    enabled: isAuthenticated && !!client,
+    onRefresh: async () => {
+      if (!client) return;
+      await Promise.all([
+        fetchCalendars(client),
+        refetchCurrentRange(),
+        refreshAllSubscriptions(client),
+      ]);
+    },
+  });
+
+  const focusCalendarOnEvent = useCallback((event: Pick<Partial<CalendarEvent>, "start" | "utcStart" | "showWithoutTime">) => {
     if (!event.start) {
       return;
     }
 
-    const eventDate = parseISO(event.start);
+    const eventDate = getEventStartDate({
+      start: event.start,
+      utcStart: event.utcStart ?? null,
+      showWithoutTime: event.showWithoutTime ?? false,
+    });
     if (Number.isNaN(eventDate.getTime())) {
       return;
     }
@@ -696,6 +784,73 @@ export default function CalendarPage() {
     }
   }, [detailEvent, client, updateEvent, t]);
 
+  const handleDuplicateContextMenu = useCallback(async (event: CalendarEvent) => {
+    if (!client) { toast.error(t("notifications.event_error")); return; }
+    const start = parseISO(event.start);
+    const newStart = addDays(start, 1);
+    const data = sanitizeOutgoingCalendarEventData<Partial<CalendarEvent>>({
+      title: event.title,
+      description: event.description,
+      start: format(newStart, "yyyy-MM-dd'T'HH:mm:ss"),
+      duration: event.duration,
+      timeZone: event.timeZone,
+      showWithoutTime: event.showWithoutTime,
+      calendarIds: { ...event.calendarIds },
+      status: "confirmed",
+      freeBusyStatus: event.freeBusyStatus,
+      privacy: event.privacy,
+    });
+    if (event.locations) data.locations = structuredClone(event.locations);
+    if (event.recurrenceRules) data.recurrenceRules = structuredClone(event.recurrenceRules);
+    if (event.alerts) data.alerts = structuredClone(event.alerts);
+    if (event.participants) data.participants = structuredClone(event.participants);
+    try {
+      const created = await createEvent(client, data);
+      if (created) {
+        toast.success(t("notifications.event_duplicated"));
+        openEditModal(created);
+      }
+    } catch {
+      toast.error(t("notifications.event_error"));
+    }
+  }, [client, createEvent, openEditModal, t]);
+
+  const handleExportICS = useCallback((event: CalendarEvent) => {
+    try {
+      downloadEventICS(event);
+      toast.success(t("notifications.event_exported"));
+    } catch {
+      toast.error(t("notifications.event_error"));
+    }
+  }, [t]);
+
+  const handleCopyTitle = useCallback(async (event: CalendarEvent) => {
+    try {
+      await navigator.clipboard.writeText(event.title || "");
+      toast.success(t("notifications.title_copied"));
+    } catch {
+      toast.error(t("notifications.event_error"));
+    }
+  }, [t]);
+
+  const handleCopyMeetingLink = useCallback(async (event: CalendarEvent) => {
+    const uri = event.virtualLocations
+      ? Object.values(event.virtualLocations).find((v) => v.uri)?.uri
+      : undefined;
+    if (!uri) return;
+    try {
+      await navigator.clipboard.writeText(uri);
+      toast.success(t("notifications.link_copied"));
+    } catch {
+      toast.error(t("notifications.event_error"));
+    }
+  }, [t]);
+
+  const handleDeleteContextMenu = useCallback((event: CalendarEvent) => {
+    const hasParticipants = event.participants && Object.keys(event.participants).length > 0;
+    handleDeleteEvent(event.id, hasParticipants || undefined);
+  }, [handleDeleteEvent]);
+
   const handleRsvpFromDetail = useCallback(async (status: CalendarParticipant['participationStatus']) => {
     if (!detailEvent || !client) return;
     const participantId = getUserParticipantId(detailEvent, currentUserEmails);
@@ -727,14 +882,31 @@ export default function CalendarPage() {
     return () => window.removeEventListener("keydown", handleKey);
   }, [navigatePrev, navigateNext, goToToday, setViewMode, openCreateModal, showEventModal, detailEvent, enableCalendarTasks]);
 
-  const visibleEvents = useMemo(() =>
+  const birthdayEvents = useMemo(() => {
-    events.filter((e) => {
+    if (!showBirthdayCalendar || !dateRange) return [];
+    return generateBirthdayEvents(contacts, dateRange.start, dateRange.end);
+  }, [showBirthdayCalendar, contacts, dateRange]);
+
+  const birthdayCalendarName = (() => {
+    try { return t('birthday_calendar'); } catch { return 'Birthdays'; }
+  })();
+
+  const allCalendars = useMemo(() => {
+    if (!showBirthdayCalendar) return calendars;
+    return [...calendars, createBirthdayCalendar(birthdayCalendarName, birthdayCalendarColor)];
+  }, [calendars, showBirthdayCalendar, birthdayCalendarName, birthdayCalendarColor]);
+
+  const visibleEvents = useMemo(() => {
+    const filtered = events.filter((e) => {
       if (!e.start || !e.calendarIds) return false;
       const calIds = Object.keys(e.calendarIds);
       return calIds.some((id) => selectedCalendarIds.includes(id));
-    }),
+    });
-    [events, selectedCalendarIds]
+    if (showBirthdayCalendar && selectedCalendarIds.includes(BIRTHDAY_CALENDAR_ID)) {
-  );
+      return [...filtered, ...birthdayEvents];
+    }
+    return filtered;
+  }, [events, selectedCalendarIds, showBirthdayCalendar, birthdayEvents]);
 
   useEffect(() => {
     const hiddenEvents = events.filter((event) => {
@@ -749,7 +921,7 @@ export default function CalendarPage() {
       return;
     }
 
-    debug.log('Calendar visibility summary', {
+    debug.log('calendar', 'Calendar visibility summary', {
       totalEvents: events.length,
       visibleEvents: visibleEvents.length,
       hiddenEvents: hiddenEvents.length,
@@ -783,11 +955,12 @@ export default function CalendarPage() {
             <CalendarMonthView
               selectedDate={selectedDate}
               events={visibleEvents}
-              calendars={calendars}
+              calendars={allCalendars}
               onSelectDate={handleSelectDate}
               onSelectEvent={handleSelectEvent}
               onHoverEvent={handleHoverEvent}
               onHoverLeave={handleHoverLeave}
+              onContextMenuEvent={handleContextMenuEvent}
               onCreateAtTime={openCreateModal}
               firstDayOfWeek={firstDayOfWeek}
               isMobile={isMobile}
@@ -799,11 +972,12 @@ export default function CalendarPage() {
             <CalendarWeekView
               selectedDate={selectedDate}
               events={visibleEvents}
-              calendars={calendars}
+              calendars={allCalendars}
               onSelectDate={handleSelectDate}
               onSelectEvent={handleSelectEvent}
               onHoverEvent={handleHoverEvent}
               onHoverLeave={handleHoverLeave}
+              onContextMenuEvent={handleContextMenuEvent}
               onCreateAtTime={openCreateModal}
               firstDayOfWeek={firstDayOfWeek}
               timeFormat={timeFormat}
@@ -818,10 +992,11 @@ export default function CalendarPage() {
             <CalendarDayView
               selectedDate={selectedDate}
               events={visibleEvents}
-              calendars={calendars}
+              calendars={allCalendars}
               onSelectEvent={handleSelectEvent}
               onHoverEvent={handleHoverEvent}
               onHoverLeave={handleHoverLeave}
+              onContextMenuEvent={handleContextMenuEvent}
               onCreateAtTime={openCreateModal}
               timeFormat={timeFormat}
               isMobile={isMobile}
@@ -835,10 +1010,11 @@ export default function CalendarPage() {
             <CalendarAgendaView
               selectedDate={selectedDate}
               events={visibleEvents}
-              calendars={calendars}
+              calendars={allCalendars}
               onSelectEvent={handleSelectEvent}
               onHoverEvent={handleHoverEvent}
               onHoverLeave={handleHoverLeave}
+              onContextMenuEvent={handleContextMenuEvent}
               timeFormat={timeFormat}
             />
           );
@@ -873,7 +1049,7 @@ export default function CalendarPage() {
     })();
 
     return (
-      <div className="relative flex-1 flex flex-col overflow-hidden">
+      <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
         {viewContent}
         {isLoadingEvents && calendars.length > 0 && events.length === 0 && (
           <div className="absolute inset-0 bg-background/50 flex items-center justify-center pointer-events-none">
@@ -926,13 +1102,54 @@ export default function CalendarPage() {
               showWeekNumbers={showWeekNumbers}
             />
             <CalendarSidebarPanel
-              calendars={calendars}
+              calendars={allCalendars}
               selectedCalendarIds={selectedCalendarIds}
               onToggleVisibility={toggleCalendarVisibility}
               onColorChange={client ? (calendarId, color) => {
+                if (calendarId === BIRTHDAY_CALENDAR_ID) {
+                  updateSetting('birthdayCalendarColor', color);
+                  return;
+                }
                 updateCalendar(client, calendarId, { color });
               } : undefined}
+              onShareCalendar={client ? (cal) => setSharingCalendarId(cal.id) : undefined}
+              onCreateEvent={(cal: Calendar) => {
+                setDefaultCalendarIdForCreate(cal.id);
+                openCreateModal();
+              }}
+              onClearCalendar={client ? async (cal: Calendar) => {
+                const ok = await confirmAction({
+                  title: tMgmt("clear_events"),
+                  message: tMgmt("confirm_clear", { name: cal.name }),
+                  variant: "destructive",
+                  confirmText: tMgmt("clear_events"),
+                });
+                if (!ok) return;
+                try {
+                  const count = await clearCalendarEvents(client, cal.id);
+                  toast.success(tMgmt("events_cleared", { count }));
+                } catch {
+                  toast.error(tMgmt("error_clear"));
+                }
+              } : undefined}
+              onDeleteCalendar={client ? async (cal: Calendar) => {
+                const ok = await confirmAction({
+                  title: tMgmt("delete"),
+                  message: tMgmt("confirm_delete", { name: cal.name }),
+                  variant: "destructive",
+                  confirmText: tMgmt("delete"),
+                });
+                if (!ok) return;
+                try {
+                  await removeCalendar(client, cal.id);
+                  toast.success(tMgmt("calendar_deleted"));
+                } catch {
+                  toast.error(tMgmt("error_delete"));
+                }
+              } : undefined}
+              onCreateCalendar={client ? () => setShowCreateCalendar(true) : undefined}
               onSubscribe={() => setShowSubscriptionModal(true)}
+              onEditSubscription={(subId) => setEditingSubscription(subId)}
               client={client}
             />
           </div>
@@ -994,11 +1211,12 @@ export default function CalendarPage() {
                 calendars={calendars}
                 defaultDate={defaultModalDate}
                 defaultEndDate={defaultModalEndDate}
+                defaultCalendarId={defaultCalendarIdForCreate}
                 onSave={handleSaveEvent}
                 onDelete={handleDeleteEvent}
                 onDuplicate={handleDuplicateEvent}
                 onRsvp={handleRsvp}
-                onClose={() => { setShowEventModal(false); setEditEvent(null); setPendingPreview(null); }}
+                onClose={() => { setShowEventModal(false); setEditEvent(null); setPendingPreview(null); setDefaultCalendarIdForCreate(undefined); }}
                 onPreviewChange={setPendingPreview}
                 currentUserEmails={currentUserEmails}
                 isMobile={false}
@@ -1048,6 +1266,22 @@ export default function CalendarPage() {
         </div>
       )}
 
+      {eventContextMenu.data && (
+        <EventContextMenu
+          event={eventContextMenu.data}
+          position={eventContextMenu.position}
+          isOpen={eventContextMenu.isOpen}
+          onClose={closeEventContextMenu}
+          menuRef={eventContextMenuRef}
+          onEdit={() => openEditModal(eventContextMenu.data!)}
+          onDuplicate={() => handleDuplicateContextMenu(eventContextMenu.data!)}
+          onExportICS={() => handleExportICS(eventContextMenu.data!)}
+          onCopyTitle={() => handleCopyTitle(eventContextMenu.data!)}
+          onCopyMeetingLink={() => handleCopyMeetingLink(eventContextMenu.data!)}
+          onDelete={() => handleDeleteContextMenu(eventContextMenu.data!)}
+        />
+      )}
+
       {detailEvent && detailAnchorRect && (
         <EventDetailPopover
           event={detailEvent}
@@ -1074,11 +1308,12 @@ export default function CalendarPage() {
           calendars={calendars}
           defaultDate={defaultModalDate}
           defaultEndDate={defaultModalEndDate}
+          defaultCalendarId={defaultCalendarIdForCreate}
           onSave={handleSaveEvent}
           onDelete={handleDeleteEvent}
           onDuplicate={handleDuplicateEvent}
           onRsvp={handleRsvp}
-          onClose={() => { setShowEventModal(false); setEditEvent(null); }}
+          onClose={() => { setShowEventModal(false); setEditEvent(null); setDefaultCalendarIdForCreate(undefined); }}
           currentUserEmails={currentUserEmails}
           isMobile={true}
         />
@@ -1099,6 +1334,18 @@ export default function CalendarPage() {
         />
       )}
 
+      {editingSubscription && client && (() => {
+        const sub = icalSubscriptions.find(s => s.id === editingSubscription);
+        if (!sub) return null;
+        return (
+          <ICalSubscriptionModal
+            client={client}
+            editSubscription={sub}
+            onClose={() => setEditingSubscription(null)}
+          />
+        );
+      })()}
+
       <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
       <RecurrenceScopeDialog
         isOpen={!!pendingScopeAction}
@@ -1106,6 +1353,33 @@ export default function CalendarPage() {
         onSelect={handleScopeSelect}
         onClose={() => setPendingScopeAction(null)}
       />
+
+      <ConfirmDialog {...confirmDialogProps} />
+
+      {showCreateCalendar && client && (
+        <CreateCalendarModal
+          client={client}
+          onClose={() => setShowCreateCalendar(false)}
+        />
+      )}
+
+      {sharingCalendarId && client && (() => {
+        const cal = allCalendars.find((c) => c.id === sharingCalendarId);
+        if (!cal) return null;
+        return (
+          <ShareCollectionDialog
+            client={client}
+            kind="calendar"
+            collectionName={cal.name}
+            shareWith={cal.shareWith}
+            ownAccountId={client.getAccountId()}
+            onShare={async (principalId, rights) => {
+              await shareCalendar(client, cal.id, principalId, rights as CalendarRights | null);
+            }}
+            onClose={() => setSharingCalendarId(null)}
+          />
+        );
+      })()}
     </div>
   );
 }

app/[locale]/contacts/page.tsx

@@ -13,19 +13,22 @@ import { ContactGroupForm } from "@/components/contacts/contact-group-form";
 import { ContactGroupDetail } from "@/components/contacts/contact-group-detail";
 import { ContactsSidebar, type ContactCategory } from "@/components/contacts/contacts-sidebar";
 import { ContactImportDialog } from "@/components/contacts/contact-import-dialog";
+import { RenameDialog } from "@/components/files/rename-dialog";
 import { exportContacts } from "@/components/contacts/contact-export";
 import { useContactStore, getContactDisplayName } from "@/stores/contact-store";
 import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
 import { useEmailStore } from "@/stores/email-store";
 import { toast } from "@/stores/toast-store";
-import { cn } from "@/lib/utils";
+import { cn, generateUUID } from "@/lib/utils";
 import { NavigationRail } from "@/components/layout/navigation-rail";
 import { SidebarAppsModal } from "@/components/layout/sidebar-apps-modal";
 import { InlineAppView } from "@/components/layout/inline-app-view";
 import { useSidebarApps } from "@/hooks/use-sidebar-apps";
 import { ResizeHandle } from "@/components/layout/resize-handle";
 import { useIsMobile } from "@/hooks/use-media-query";
-import type { ContactCard, AddressBook } from "@/lib/jmap/types";
+import { useRefreshGesture } from "@/hooks/use-refresh-gesture";
+import type { ContactCard, AddressBook, AddressBookRights } from "@/lib/jmap/types";
+import { ShareCollectionDialog } from "@/components/settings/share-collection-dialog";
 
 type View =
   | "list"
@@ -72,12 +75,20 @@ export default function ContactsPage() {
     bulkDeleteContacts,
     bulkAddToGroup,
     moveContactToAddressBook,
+    renameAddressBook,
+    removeAddressBook,
+    shareAddressBook,
+    renameKeyword,
     importContacts,
   } = useContactStore();
 
   const [view, setView] = useState<View>("list");
   const [activeCategory, setActiveCategory] = useState<ContactCategory>("all");
   const [showImportDialog, setShowImportDialog] = useState(false);
+  const [renamingAddressBook, setRenamingAddressBook] = useState<AddressBook | null>(null);
+  const [sharingAddressBookId, setSharingAddressBookId] = useState<string | null>(null);
+  const [defaultBookIdForCreate, setDefaultBookIdForCreate] = useState<string | undefined>(undefined);
+  const [renamingKeyword, setRenamingKeyword] = useState<string | null>(null);
   const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
   const hasFetched = useRef(false);
   const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
@@ -92,13 +103,20 @@ export default function ContactsPage() {
 
   // Panel resize state - contact list
   const [listWidth, setListWidth] = useState(() => {
-    try { const v = localStorage.getItem("contacts-list-width"); return v ? Number(v) : 320; } catch { return 320; }
+    try { const v = localStorage.getItem("contacts-list-width"); return v ? Number(v) : 384; } catch { return 384; }
   });
   const [isListResizing, setIsListResizing] = useState(false);
-  const listDragStartWidth = useRef(320);
+  const listDragStartWidth = useRef(384);
 
-  // Check auth on mount
+  // Check auth on mount – skip when already authenticated so that navigating
+  // between routes doesn't retrigger checkAuth's transient `{ client: null,
+  // isLoading: true }` reset, which was flashing the spinner on every nav.
   useEffect(() => {
+    const state = useAuthStore.getState();
+    if (state.isAuthenticated && state.client) {
+      setInitialCheckDone(true);
+      return;
+    }
     checkAuth().finally(() => {
       setInitialCheckDone(true);
     });
@@ -118,6 +136,16 @@ export default function ContactsPage() {
     }
   }, [client, supportsSync, fetchContacts]);
 
+  // Intercept browser refresh gestures (F5, Ctrl/Cmd+R, pull-to-refresh)
+  // and refresh contacts via JMAP instead of reloading the page.
+  useRefreshGesture({
+    enabled: isAuthenticated && !!client && supportsSync,
+    onRefresh: async () => {
+      if (!client) return;
+      await fetchContacts(client);
+    },
+  });
+
   const groups = useMemo(() => contacts.filter(c => c.kind === 'group'), [contacts]);
   const individuals = useMemo(() => contacts.filter(c => c.kind !== 'group'), [contacts]);
   const selectedContact = contacts.find((c) => c.id === selectedContactId) || null;
@@ -156,21 +184,6 @@ export default function ContactsPage() {
     return getGroupMembers(activeCategory.groupId);
   }, [activeCategory, individuals, getGroupMembers]);
 
-  // Label for the current category
-  const categoryLabel = useMemo(() => {
-    if (activeCategory === "all") return t("tabs.all");
-    if (activeCategory === "uncategorized") return t("no_category");
-    if ("addressBookId" in activeCategory) {
-      const book = addressBooks.find(b => b.id === activeCategory.addressBookId);
-      return book?.name || t("tabs.all");
-    }
-    if ("keyword" in activeCategory) {
-      return activeCategory.keyword;
-    }
-    const group = contacts.find(c => c.id === activeCategory.groupId);
-    return group ? getContactDisplayName(group) : t("tabs.all");
-  }, [activeCategory, contacts, addressBooks, t]);
-
   const handleSelectCategory = useCallback((category: ContactCategory) => {
     setActiveCategory(category);
     clearSelection();
@@ -243,9 +256,7 @@ export default function ContactsPage() {
     setView("edit");
   };
 
-  const handleDelete = async () => {
+  const deleteContactById = useCallback(async (contactId: string) => {
-    if (!selectedContact) return;
-
     const confirmed = await confirmDialog({
       title: t("delete_confirm_title"),
       message: t("delete_confirm"),
@@ -256,31 +267,74 @@ export default function ContactsPage() {
 
     try {
       if (supportsSync && client) {
-        await deleteContact(client, selectedContact.id);
+        await deleteContact(client, contactId);
       } else {
-        deleteLocalContact(selectedContact.id);
+        deleteLocalContact(contactId);
       }
       toast.success(t("toast.deleted"));
-      setView("list");
+      if (selectedContactId === contactId) setView("list");
     } catch (error) {
       console.error('Failed to delete contact:', error);
       toast.error(t("toast.error_delete"));
     }
+  }, [confirmDialog, t, supportsSync, client, deleteContact, deleteLocalContact, selectedContactId]);
+
+  const handleDelete = async () => {
+    if (!selectedContact) return;
+    await deleteContactById(selectedContact.id);
   };
 
+  const handleEditContact = useCallback((id: string) => {
+    setSelectedContact(id);
+    setView("edit");
+  }, [setSelectedContact]);
+
+  const handleDeleteContact = useCallback((contact: ContactCard) => {
+    void deleteContactById(contact.id);
+  }, [deleteContactById]);
+
+  const handleAddContactToGroup = useCallback((id: string) => {
+    clearSelection();
+    toggleContactSelection(id);
+    if (groups.length === 0) {
+      setView("group-create");
+      return;
+    }
+    setView("bulk-add-to-group");
+  }, [clearSelection, toggleContactSelection, groups.length]);
+
+  const handleDuplicateContact = useCallback(async (source: ContactCard) => {
+    const { id: _id, created: _created, updated: _updated, ...rest } = source;
+    void _id; void _created; void _updated;
+    const data: Partial<ContactCard> = JSON.parse(JSON.stringify(rest));
+    if (supportsSync && client) {
+      await createContact(client, data);
+      toast.success(t("toast.created"));
+    } else {
+      const localContact: ContactCard = {
+        id: `local-${generateUUID()}`,
+        addressBookIds: data.addressBookIds || {},
+        ...data,
+      };
+      addLocalContact(localContact);
+      toast.success(t("toast.created"));
+    }
+  }, [supportsSync, client, createContact, addLocalContact, t]);
+
   const handleSaveNew = useCallback(async (data: Partial<ContactCard>) => {
     if (supportsSync && client) {
       await createContact(client, data);
       toast.success(t("toast.created"));
     } else {
       const localContact: ContactCard = {
-        id: `local-${crypto.randomUUID()}`,
+        id: `local-${generateUUID()}`,
         addressBookIds: {},
         ...data,
       };
       addLocalContact(localContact);
       toast.success(t("toast.created"));
     }
+    setDefaultBookIdForCreate(undefined);
     setView("list");
   }, [supportsSync, client, createContact, addLocalContact, t]);
 
@@ -298,6 +352,7 @@ export default function ContactsPage() {
   }, [supportsSync, client, selectedContact, updateContact, updateLocalContact, t]);
 
   const handleCancel = () => {
+    setDefaultBookIdForCreate(undefined);
     if (view === "group-create" || view === "group-edit") {
       setView(selectedGroup ? "group-detail" : "list");
     } else if (view === "bulk-add-to-group") {
@@ -469,7 +524,7 @@ export default function ContactsPage() {
   const renderRightPanel = () => {
     switch (view) {
       case "create":
-        return <ContactForm addressBooks={addressBooks} allKeywords={allKeywords} onSave={handleSaveNew} onCancel={handleCancel} />;
+        return <ContactForm addressBooks={addressBooks} allKeywords={allKeywords} defaultAddressBookId={defaultBookIdForCreate} onSave={handleSaveNew} onCancel={handleCancel} />;
 
       case "edit":
         if (!selectedContact) return null;
@@ -569,6 +624,16 @@ export default function ContactsPage() {
             contact={selectedContact}
             onEdit={handleEdit}
             onDelete={handleDelete}
+            onAddToGroup={
+              selectedContact
+                ? () => handleAddContactToGroup(selectedContact.id)
+                : undefined
+            }
+            onDuplicate={
+              selectedContact
+                ? () => void handleDuplicateContact(selectedContact)
+                : undefined
+            }
             isMobile={isMobile}
           />
         );
@@ -631,6 +696,28 @@ export default function ContactsPage() {
                       onDeleteGroup={handleDeleteGroupFromSidebar}
                       onDropContacts={handleDropContacts}
                       onDropContactsToCategory={handleDropContactsToCategory}
+                      onRenameAddressBook={client ? (book) => setRenamingAddressBook(book) : undefined}
+                      onShareAddressBook={client ? (book) => setSharingAddressBookId(book.id) : undefined}
+                      onCreateContactInBook={(book) => {
+                        setDefaultBookIdForCreate(book.id);
+                        handleCreateNew();
+                      }}
+                      onDeleteAddressBook={client ? async (book) => {
+                        const ok = await confirmDialog({
+                          title: t("address_books.delete"),
+                          message: t("address_books.confirm_delete", { name: book.name }),
+                          variant: "destructive",
+                          confirmText: t("address_books.delete"),
+                        });
+                        if (!ok) return;
+                        try {
+                          await removeAddressBook(client, book);
+                          toast.success(t("address_books.deleted"));
+                        } catch {
+                          toast.error(t("address_books.delete_failed"));
+                        }
+                      } : undefined}
+                      onRenameKeyword={(kw) => setRenamingKeyword(kw)}
                     />
                   </div>
                   <ResizeHandle
@@ -662,7 +749,6 @@ export default function ContactsPage() {
                   onSearchChange={setSearchQuery}
                   onSelectContact={handleSelectContact}
                   onCreateNew={handleCreateNew}
-                  categoryLabel={categoryLabel}
                   className="flex-1"
                   selectedContactIds={selectedContactIds}
                   onToggleSelection={toggleContactSelection}
@@ -672,6 +758,9 @@ export default function ContactsPage() {
                   onBulkDelete={handleBulkDelete}
                   onBulkAddToGroup={handleBulkAddToGroup}
                   onBulkExport={handleBulkExport}
+                  onEditContact={handleEditContact}
+                  onDeleteContact={handleDeleteContact}
+                  onAddContactToGroup={handleAddContactToGroup}
                 />
               </div>
 
@@ -683,7 +772,7 @@ export default function ContactsPage() {
                     setIsListResizing(false);
                     localStorage.setItem("contacts-list-width", String(listWidth));
                   }}
-                  onDoubleClick={() => { setListWidth(320); localStorage.setItem("contacts-list-width", "320"); }}
+                  onDoubleClick={() => { setListWidth(384); localStorage.setItem("contacts-list-width", "384"); }}
                 />
               )}
             </>
@@ -725,6 +814,46 @@ export default function ContactsPage() {
 
       <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
       <ConfirmDialog {...confirmDialogProps} />
+      {renamingKeyword !== null && (
+        <RenameDialog
+          currentName={renamingKeyword}
+          title={t("rename_category")}
+          label={t("category_name_label")}
+          onCancel={() => setRenamingKeyword(null)}
+          onConfirm={async (newName) => {
+            try {
+              await renameKeyword(supportsSync && client ? client : null, renamingKeyword, newName);
+              toast.success(t("category_renamed"));
+              if (typeof activeCategory === "object" && "keyword" in activeCategory && activeCategory.keyword === renamingKeyword) {
+                setActiveCategory({ keyword: newName.trim() });
+              }
+              setRenamingKeyword(null);
+            } catch (err) {
+              console.error("Failed to rename category:", err);
+              toast.error(t("category_rename_failed"));
+            }
+          }}
+        />
+      )}
+      {renamingAddressBook && (
+        <RenameDialog
+          currentName={renamingAddressBook.name}
+          title={t("address_books.rename")}
+          label={t("address_books.name_label")}
+          onCancel={() => setRenamingAddressBook(null)}
+          onConfirm={async (newName) => {
+            if (!client) return;
+            try {
+              await renameAddressBook(client, renamingAddressBook, newName);
+              toast.success(t("address_books.renamed"));
+              setRenamingAddressBook(null);
+            } catch (err) {
+              console.error("Failed to rename address book:", err);
+              toast.error(t("address_books.rename_failed"));
+            }
+          }}
+        />
+      )}
       {showImportDialog && (
         <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
           <div className="bg-background rounded-lg border border-border shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
@@ -736,6 +865,23 @@ export default function ContactsPage() {
           </div>
         </div>
       )}
+      {sharingAddressBookId && client && (() => {
+        const book = addressBooks.find((b) => b.id === sharingAddressBookId);
+        if (!book) return null;
+        return (
+          <ShareCollectionDialog
+            client={client}
+            kind="addressBook"
+            collectionName={book.name}
+            shareWith={book.shareWith}
+            ownAccountId={client.getAccountId()}
+            onShare={async (principalId, rights) => {
+              await shareAddressBook(client, book, principalId, rights as AddressBookRights | null);
+            }}
+            onClose={() => setSharingAddressBookId(null)}
+          />
+        );
+      })()}
     </div>
   );
 }

app/[locale]/files/page.tsx

@@ -17,15 +17,19 @@ import { SidebarAppsModal } from "@/components/layout/sidebar-apps-modal";
 import { InlineAppView } from "@/components/layout/inline-app-view";
 import { useSidebarApps } from "@/hooks/use-sidebar-apps";
 import { useIsMobile } from "@/hooks/use-media-query";
+import { useRefreshGesture } from "@/hooks/use-refresh-gesture";
+import { usePolicyStore } from "@/stores/policy-store";
 import { FileBrowser } from "@/components/files/file-browser";
 import { ImagePreviewModal } from "@/components/files/image-preview-modal";
 import { FilePreviewModal } from "@/components/files/file-preview-modal";
 import { loadFilesSettings } from "@/components/files/files-settings-dialog";
 import type { FolderLayout } from "@/components/files/files-settings-dialog";
+import { AlertTriangle } from "lucide-react";
 
 export default function FilesPage() {
   const router = useRouter();
   const t = useTranslations("files");
+  const filesEnabled = usePolicyStore((s) => s.isFeatureEnabled('filesEnabled'));
   const { isAuthenticated, logout, checkAuth, isLoading: authLoading, client } = useAuthStore();
   const { showAppsModal, inlineApp, loadedApps, handleManageApps, handleInlineApp, closeInlineApp, closeAppsModal } = useSidebarApps();
   const [initialCheckDone, setInitialCheckDone] = useState(() => useAuthStore.getState().isAuthenticated && !!useAuthStore.getState().client);
@@ -101,8 +105,15 @@ export default function FilesPage() {
 
   const detailResource = detailName ? resources.find(r => r.name === detailName) || null : null;
 
-  // Check auth on mount
+  // Check auth on mount – skip when already authenticated so that navigating
+  // between routes doesn't retrigger checkAuth's transient `{ client: null,
+  // isLoading: true }` reset, which was flashing the spinner on every nav.
   useEffect(() => {
+    const state = useAuthStore.getState();
+    if (state.isAuthenticated && state.client) {
+      setInitialCheckDone(true);
+      return;
+    }
     checkAuth().finally(() => {
       setInitialCheckDone(true);
     });
@@ -124,6 +135,15 @@ export default function FilesPage() {
     }
   }, [isAuthenticated, client, initClient]);
 
+  // Intercept browser refresh gestures (F5, Ctrl/Cmd+R, pull-to-refresh)
+  // and refresh files via JMAP instead of reloading the page.
+  useRefreshGesture({
+    enabled: isAuthenticated && !!client && supportsFiles === true,
+    onRefresh: async () => {
+      await refresh();
+    },
+  });
+
   // Check support and load root after client is initialized
   const storeClient = useFileStore(s => s.client);
   useEffect(() => {
@@ -392,12 +412,25 @@ export default function FilesPage() {
               </div>
             )}
 
-            <div className="flex-1 min-h-0">
+            <div className="flex-1 min-h-0 flex flex-col">
-              {supportsFiles === false ? (
+              {!filesEnabled ? (
+                <div className="flex items-center justify-center h-full">
+                  <div className="max-w-lg text-center space-y-3 px-4">
+                    <AlertTriangle className="w-10 h-10 text-yellow-500 mx-auto" />
+                    <p className="text-sm font-medium">{t("disabled_title")}</p>
+                    <p className="text-xs text-muted-foreground">{t("disabled_description")}</p>
+                  </div>
+                </div>
+              ) : supportsFiles === false ? (
                 <div className="flex items-center justify-center h-full">
                   <p className="text-sm text-muted-foreground">{t("not_available")}</p>
                 </div>
               ) : (
+                <div className="flex flex-col flex-1 min-h-0">
+                  <div className="mx-4 mt-3 mb-1 flex items-start gap-2 rounded-md border border-yellow-500/30 bg-yellow-500/10 px-3 py-2">
+                    <AlertTriangle className="w-4 h-4 text-yellow-500 shrink-0 mt-0.5" />
+                    <p className="text-xs text-yellow-700 dark:text-yellow-400">{t("stability_warning")}</p>
+                  </div>
                 <FileBrowser
                   currentPath={currentPath}
                   resources={resources}
@@ -442,6 +475,7 @@ export default function FilesPage() {
                   onToggleDetails={handleToggleDetails}
                   detailResource={detailResource}
                 />
+                </div>
               )}
             </div>
           </div>

app/[locale]/login/page.tsx

@@ -10,13 +10,15 @@ 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 } from "lucide-react";
+import { AlertCircle, Loader2, X, Info, Eye, EyeOff, LogIn, Sun, Moon, Monitor, Check, Shield, Play, Copy } from "lucide-react";
 import { discoverOAuth, type OAuthMetadata } from "@/lib/oauth/discovery";
 import { generateCodeVerifier, generateCodeChallenge, generateState } from "@/lib/oauth/pkce";
 import { OAUTH_SCOPES } from "@/lib/oauth/tokens";
 
-const APP_VERSION = "1.4.9";
+const APP_VERSION = process.env.NEXT_PUBLIC_APP_VERSION || "0.0.0";
+const GIT_COMMIT = process.env.NEXT_PUBLIC_GIT_COMMIT || "unknown";
 
 const THEME_OPTIONS = [
   { value: "light" as const, icon: Sun, label: "Light" },
@@ -24,6 +26,41 @@ const THEME_OPTIONS = [
   { value: "system" as const, icon: Monitor, label: "System" },
 ];
 
+function VersionBadge() {
+  const [copied, setCopied] = useState(false);
+  const versionInfo = `Version: ${APP_VERSION}\nBuild: ${GIT_COMMIT}`;
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(versionInfo).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  return (
+    <div className="relative inline-flex justify-center">
+      <p className="peer text-center text-xs text-muted-foreground/40 cursor-default">
+        v{APP_VERSION}
+      </p>
+      <div className="absolute top-full left-1/2 -translate-x-1/2 mt-1.5 px-3 py-2 rounded-md bg-popover text-popover-foreground text-xs shadow-md border border-border opacity-0 peer-hover:opacity-100 hover:opacity-100 transition-opacity whitespace-nowrap z-10">
+        <div className="flex items-center gap-2">
+          <div className="space-y-0.5">
+            <p>Version: <span className="font-medium">{APP_VERSION}</span></p>
+            <p>Build: <span className="font-medium">{GIT_COMMIT}</span></p>
+          </div>
+          <button
+            onClick={handleCopy}
+            className="p-1 rounded hover:bg-muted transition-colors"
+            aria-label="Copy version info"
+          >
+            {copied ? <Check className="w-3.5 h-3.5 text-green-500" /> : <Copy className="w-3.5 h-3.5" />}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function LoginPage() {
   const router = useRouter();
   const t = useTranslations("login");
@@ -32,13 +69,14 @@ export default function LoginPage() {
   const isAddAccountMode = searchParams.get("mode") === "add-account";
   const { login, loginDemo, isLoading, error, clearError, isAuthenticated } = useAuthStore();
   const { theme, setTheme, initializeTheme } = useThemeStore(useShallow((s) => ({ theme: s.theme, setTheme: s.setTheme, initializeTheme: s.initializeTheme })));
-  const { appName, jmapServerUrl: serverUrl, oauthEnabled, oauthOnly, oauthClientId, oauthIssuerUrl, rememberMeEnabled, devMode, demoMode, loginLogoLightUrl, loginLogoDarkUrl, loginCompanyName, loginImprintUrl, loginPrivacyPolicyUrl, loginWebsiteUrl, isLoading: configLoading, error: configError, autoSsoEnabled, embeddedMode: _embeddedMode } = useConfig();
+  const { appName, jmapServerUrl: serverUrl, oauthEnabled, oauthOnly, oauthClientId, oauthIssuerUrl, rememberMeEnabled, devMode, demoMode, loginLogoLightUrl, loginLogoDarkUrl, loginCompanyName, loginImprintUrl, loginPrivacyPolicyUrl, loginWebsiteUrl, isLoading: configLoading, error: configError, autoSsoEnabled, embeddedMode: _embeddedMode, allowCustomJmapEndpoint } = useConfig();
   const resolvedTheme = useThemeStore((s) => s.resolvedTheme);
 
   const [formData, setFormData] = useState({
     username: "",
     password: "",
   });
+  const [jmapEndpoint, setJmapEndpoint] = useState("");
   const [totpCode, setTotpCode] = useState("");
   const [showTotpField, setShowTotpField] = useState(false);
   const [rememberMe, setRememberMe] = useState(false);
@@ -73,6 +111,12 @@ export default function LoginPage() {
     }
   }, [appName, serverUrl]);
 
+  useEffect(() => {
+    if (serverUrl && !jmapEndpoint) {
+      setJmapEndpoint(serverUrl);
+    }
+  }, [serverUrl, jmapEndpoint]);
+
   useEffect(() => {
     try {
       if (sessionStorage.getItem('session_expired') === 'true') {
@@ -91,6 +135,14 @@ export default function LoginPage() {
     prevError.current = error;
   }, [error]);
 
+  // Auto-show and focus TOTP field when server requires it
+  useEffect(() => {
+    if (error === 'totp_required') {
+      setShowTotpField(true);
+      setTimeout(() => totpInputRef.current?.focus(), 100);
+    }
+  }, [error]);
+
   useEffect(() => {
     if (!serverUrl) return;
     const saved = localStorage.getItem("webmail_usernames");
@@ -180,8 +232,9 @@ export default function LoginPage() {
   const startServerSideSso = useCallback(async () => {
     setOauthLoading(true);
     try {
-      const redirectUri = `${window.location.origin}/${params.locale}/auth/callback`;
+      const prefix = getPathPrefix(params.locale as string);
-      const res = await fetch('/api/auth/sso/start', {
+      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',
@@ -202,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 {
@@ -264,7 +317,7 @@ export default function LoginPage() {
     );
   }
 
-  if (!serverUrl && !demoMode) {
+  if (!serverUrl && !demoMode && !allowCustomJmapEndpoint) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/30">
         <div className="w-full max-w-md mx-auto px-4 text-center">
@@ -362,7 +415,7 @@ export default function LoginPage() {
 
     sessionStorage.setItem("oauth_code_verifier", verifier);
     sessionStorage.setItem("oauth_state", state);
-    sessionStorage.setItem("oauth_server_url", serverUrl!);
+    sessionStorage.setItem("oauth_server_url", allowCustomJmapEndpoint ? jmapEndpoint : serverUrl!);
     if (isAddAccountMode) {
       sessionStorage.setItem("oauth_add_account_mode", "true");
     }
@@ -382,8 +435,9 @@ export default function LoginPage() {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
+    const effectiveServerUrl = allowCustomJmapEndpoint ? jmapEndpoint : serverUrl;
     const success = await login(
-      serverUrl,
+      effectiveServerUrl,
       formData.username,
       formData.password,
       totpCode || undefined,
@@ -563,9 +617,7 @@ export default function LoginPage() {
                 )}
               </div>
             )}
-            <p className="text-center text-xs text-muted-foreground/40">
+            <VersionBadge />
-              v{APP_VERSION}
-            </p>
           </div>
         </div>
       </div>
@@ -707,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 ? (
@@ -749,6 +801,27 @@ export default function LoginPage() {
               /* Login Form */
               <form onSubmit={handleSubmit} className="space-y-5">
                 <fieldset disabled={isLoading} className="space-y-4">
+                  {/* JMAP Endpoint field (when custom endpoints are allowed) */}
+                  {allowCustomJmapEndpoint && (
+                    <div className="space-y-1.5">
+                      <label htmlFor="jmap-endpoint" className="block text-sm font-medium text-foreground">
+                        {t("jmap_endpoint_label")}
+                      </label>
+                      <Input
+                        id="jmap-endpoint"
+                        type="url"
+                        value={jmapEndpoint}
+                        onChange={(e) => setJmapEndpoint(e.target.value)}
+                        className="h-11 px-3.5 bg-muted/40 border-border/60 rounded-xl focus:bg-background focus:border-primary/50 transition-all duration-200"
+                        placeholder={t("jmap_endpoint_placeholder")}
+                        required
+                      />
+                      <p className="text-[11px] text-muted-foreground leading-snug">
+                        {t("jmap_endpoint_cors_hint")}
+                      </p>
+                    </div>
+                  )}
+
                   {/* Username field */}
                   <div className="space-y-1.5">
                     <label htmlFor="username" className="block text-sm font-medium text-foreground">
@@ -861,7 +934,10 @@ export default function LoginPage() {
                         maxLength={6}
                         value={totpCode}
                         onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, ''))}
-                        className="h-11 px-3.5 bg-muted/40 border-border/60 rounded-xl focus:bg-background focus:border-primary/50 transition-all duration-200 text-center font-mono tracking-widest"
+                        className={cn(
+                          "h-11 px-3.5 bg-muted/40 border-border/60 rounded-xl focus:bg-background focus:border-primary/50 transition-all duration-200 text-center font-mono tracking-widest",
+                          error === 'totp_required' && "border-primary ring-2 ring-primary/30"
+                        )}
                         placeholder={t("totp_placeholder")}
                         autoComplete="one-time-code"
                         aria-label={t("totp_label")}
@@ -1035,9 +1111,7 @@ export default function LoginPage() {
               )}
             </div>
           )}
-          <p className="text-center text-xs text-muted-foreground/40">
+          <VersionBadge />
-            v{APP_VERSION}
-          </p>
         </div>
       </div>
     </div>

app/[locale]/settings/page.tsx

@@ -9,7 +9,6 @@ import {
   LogOut,
   Settings as SettingsIcon,
   Palette,
-  Mail,
   User,
   Shield,
   UserPen,
@@ -20,25 +19,37 @@ import {
   FolderOpen,
   Tags,
   HardDrive,
-  Wrench,
   BookUser,
   KeyRound,
   PanelLeftClose,
   Bell,
   Puzzle,
+  LayoutGrid,
+  BookOpen,
+  PenLine,
+  EyeOff,
+  Languages,
+  Info,
+  Bug,
   type LucideIcon,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { AppearanceSettings } from '@/components/settings/appearance-settings';
-import { EmailSettings } from '@/components/settings/email-settings';
+import { LayoutSettings } from '@/components/settings/layout-settings';
+import { LanguageSettings } from '@/components/settings/language-settings';
+import { ReadingSettings } from '@/components/settings/reading-settings';
+import { ComposingSettings } from '@/components/settings/composing-settings';
+import { ContentSendersSettings } from '@/components/settings/content-senders-settings';
 import { AccountSettings } from '@/components/settings/account-settings';
 import { IdentitySettings } from '@/components/settings/identity-settings';
 import { VacationSettings } from '@/components/settings/vacation-settings';
 import { CalendarSettings } from '@/components/settings/calendar-settings';
 import { CalendarManagementSettings } from '@/components/settings/calendar-management-settings';
+import { AddressBookManagementSettings } from '@/components/settings/address-book-management-settings';
 import { FilterSettings } from '@/components/settings/filter-settings';
 import { TemplateSettings } from '@/components/settings/template-settings';
-import { AdvancedSettings } from '@/components/settings/advanced-settings';
+import { AboutDataSettings } from '@/components/settings/about-data-settings';
+import { DebugSettings } from '@/components/settings/debug-settings';
 import { FolderSettings } from '@/components/settings/folder-settings';
 import { KeywordSettings } from '@/components/settings/keyword-settings';
 import { AccountSecuritySettings } from '@/components/settings/account-security-settings';
@@ -61,8 +72,33 @@ import { useConfig } from '@/hooks/use-config';
 import { usePolicyStore } from '@/stores/policy-store';
 import { cn } from '@/lib/utils';
 
-type Tab = 'appearance' | 'email' | 'notifications' | 'account' | 'security' | 'identities' | 'encryption' | 'vacation' | 'calendar' | 'contacts' | 'filters' | 'templates' | 'folders' | 'keywords' | 'files' | 'sidebar_apps' | 'themes' | 'plugins' | 'advanced';
+type Tab =
-type TabGroup = 'general' | 'account' | 'organization' | 'apps' | 'system';
+  | 'account'
+  | 'language'
+  | 'notifications'
+  | 'appearance'
+  | 'layout'
+  | 'reading'
+  | 'composing'
+  | 'identities'
+  | 'vacation'
+  | 'filters'
+  | 'templates'
+  | 'folders'
+  | 'keywords'
+  | 'security'
+  | 'encryption'
+  | 'content_senders'
+  | 'calendar'
+  | 'contacts'
+  | 'files'
+  | 'sidebar_apps'
+  | 'about_data'
+  | 'themes'
+  | 'plugins'
+  | 'debug';
+
+type TabGroup = 'general' | 'appearance' | 'mail' | 'privacy' | 'apps' | 'advanced';
 
 interface TabDef {
   id: Tab;
@@ -73,28 +109,54 @@ interface TabDef {
 }
 
 const tabIcons: Record<Tab, LucideIcon> = {
-  appearance: Palette,
-  email: Mail,
-  notifications: Bell,
   account: User,
-  security: Shield,
+  language: Languages,
+  notifications: Bell,
+  appearance: Palette,
+  layout: LayoutGrid,
+  reading: BookOpen,
+  composing: PenLine,
   identities: UserPen,
-  encryption: KeyRound,
   vacation: PalmtreeIcon,
-  calendar: Calendar,
-  contacts: BookUser,
   filters: Filter,
   templates: FileText,
   folders: FolderOpen,
   keywords: Tags,
+  security: Shield,
+  encryption: KeyRound,
+  content_senders: EyeOff,
+  calendar: Calendar,
+  contacts: BookUser,
   files: HardDrive,
   sidebar_apps: PanelLeftClose,
+  about_data: Info,
   themes: Palette,
   plugins: Puzzle,
-  advanced: Wrench,
+  debug: Bug,
 };
 
-const tabGroupOrder: TabGroup[] = ['general', 'account', 'organization', 'apps', 'system'];
+const tabGroupOrder: TabGroup[] = ['general', 'appearance', 'mail', 'privacy', 'apps', 'advanced'];
+
+// Map legacy tab IDs to current ones; runs once on read of localStorage.
+const LEGACY_TAB_MAP: Record<string, Tab> = {
+  email: 'reading',
+  advanced: 'about_data',
+};
+
+function readPersistedTab(): Tab {
+  try {
+    const saved = localStorage.getItem('settings-active-tab');
+    if (!saved) return 'appearance';
+    if (saved in LEGACY_TAB_MAP) {
+      const migrated = LEGACY_TAB_MAP[saved];
+      try { localStorage.setItem('settings-active-tab', migrated); } catch { /* ignore */ }
+      return migrated;
+    }
+    return saved as Tab;
+  } catch {
+    return 'appearance';
+  }
+}
 
 export default function SettingsPage() {
   const router = useRouter();
@@ -106,13 +168,7 @@ export default function SettingsPage() {
   const { quota, isPushConnected } = useEmailStore();
   const { stalwartFeaturesEnabled } = useConfig();
   const { isFeatureEnabled } = usePolicyStore();
-  const [activeTab, setActiveTab] = useState<Tab>(() => {
+  const [activeTab, setActiveTab] = useState<Tab>(readPersistedTab);
-    try {
-      const saved = localStorage.getItem('settings-active-tab');
-      if (saved) return saved as Tab;
-    } catch { /* ignore */ }
-    return 'appearance';
-  });
   const [mobileShowContent, setMobileShowContent] = useState(false);
   const isDesktop = useIsDesktop();
 
@@ -123,21 +179,28 @@ export default function SettingsPage() {
   const [isResizing, setIsResizing] = useState(false);
   const dragStartWidth = useRef(256);
 
-  // Check auth on mount
+  // Check auth on mount – skip when already authenticated so that navigating
+  // between routes doesn't retrigger checkAuth's transient `{ client: null,
+  // isLoading: true }` reset, which was flashing the spinner on every nav.
   useEffect(() => {
+    const state = useAuthStore.getState();
+    if (state.isAuthenticated && state.client) {
+      setInitialCheckDone(true);
+      return;
+    }
     checkAuth().finally(() => {
       setInitialCheckDone(true);
     });
   }, [checkAuth]);
 
-  // Listen for tab change events from child components
+  // Listen for tab change events from child components (with legacy migration)
   useEffect(() => {
     const handler = (e: Event) => {
-      const tab = (e as CustomEvent).detail as Tab;
+      const raw = (e as CustomEvent).detail as string;
-      if (tab) {
+      if (!raw) return;
-        setActiveTab(tab);
+      const tab = (LEGACY_TAB_MAP[raw] ?? raw) as Tab;
-        try { localStorage.setItem('settings-active-tab', tab); } catch { /* ignore */ }
+      setActiveTab(tab);
-      }
+      try { localStorage.setItem('settings-active-tab', tab); } catch { /* ignore */ }
     };
     window.addEventListener('settings-tab-change', handler);
     return () => window.removeEventListener('settings-tab-change', handler);
@@ -160,25 +223,41 @@ export default function SettingsPage() {
   const supportsFiles = client?.supportsFiles() ?? false;
 
   const tabs: TabDef[] = [
-    { id: 'appearance', label: t('tabs.appearance'), icon: tabIcons.appearance, group: 'general' },
+    // General
-    { id: 'email', label: t('tabs.email'), icon: tabIcons.email, group: 'general' },
+    { id: 'account', label: t('tabs.account'), icon: tabIcons.account, group: 'general' },
+    { id: 'language', label: t('tabs.language'), icon: tabIcons.language, group: 'general' },
     { id: 'notifications', label: t('tabs.notifications'), icon: tabIcons.notifications, group: 'general' },
-    { id: 'account', label: t('tabs.account'), icon: tabIcons.account, group: 'account' },
+
-    ...(stalwartFeaturesEnabled ? [{ id: 'security' as Tab, label: t('tabs.security'), icon: tabIcons.security, group: 'account' as TabGroup }] : []),
+    // Appearance
-    { id: 'identities', label: t('tabs.identities'), icon: tabIcons.identities, group: 'account' },
+    { id: 'appearance', label: t('tabs.appearance'), icon: tabIcons.appearance, group: 'appearance' },
-    ...(isFeatureEnabled('smimeEnabled') ? [{ id: 'encryption' as Tab, label: t('tabs.encryption'), icon: tabIcons.encryption, group: 'account' as TabGroup }] : []),
+    { id: 'layout', label: t('tabs.layout'), icon: tabIcons.layout, group: 'appearance' },
-    ...(supportsVacation ? [{ id: 'vacation' as Tab, label: t('tabs.vacation'), icon: tabIcons.vacation, group: 'account' as TabGroup }] : []),
+
-    ...(supportsSieve ? [{ id: 'filters' as Tab, label: t('tabs.filters'), icon: tabIcons.filters, group: 'organization' as TabGroup }] : []),
+    // Mail
-    ...(isFeatureEnabled('templatesEnabled') ? [{ id: 'templates' as Tab, label: t('tabs.templates'), icon: tabIcons.templates, group: 'organization' as TabGroup }] : []),
+    { id: 'reading', label: t('tabs.reading'), icon: tabIcons.reading, group: 'mail' },
-    { id: 'folders', label: t('tabs.folders'), icon: tabIcons.folders, group: 'organization' },
+    { id: 'composing', label: t('tabs.composing'), icon: tabIcons.composing, group: 'mail' },
-    ...(isFeatureEnabled('customKeywordsEnabled') ? [{ id: 'keywords' as Tab, label: t('tabs.keywords'), icon: tabIcons.keywords, group: 'organization' as TabGroup }] : []),
+    { id: 'identities', label: t('tabs.identities'), icon: tabIcons.identities, group: 'mail' },
+    ...(supportsVacation ? [{ id: 'vacation' as Tab, label: t('tabs.vacation'), icon: tabIcons.vacation, group: 'mail' as TabGroup }] : []),
+    ...(supportsSieve ? [{ id: 'filters' as Tab, label: t('tabs.filters'), icon: tabIcons.filters, group: 'mail' as TabGroup }] : []),
+    ...(isFeatureEnabled('templatesEnabled') ? [{ id: 'templates' as Tab, label: t('tabs.templates'), icon: tabIcons.templates, group: 'mail' as TabGroup }] : []),
+    { id: 'folders', label: t('tabs.folders'), icon: tabIcons.folders, group: 'mail' },
+    ...(isFeatureEnabled('customKeywordsEnabled') ? [{ id: 'keywords' as Tab, label: t('tabs.keywords'), icon: tabIcons.keywords, group: 'mail' as TabGroup }] : []),
+
+    // Privacy & Security
+    ...(stalwartFeaturesEnabled ? [{ id: 'security' as Tab, label: t('tabs.security'), icon: tabIcons.security, group: 'privacy' as TabGroup }] : []),
+    ...(isFeatureEnabled('smimeEnabled') ? [{ id: 'encryption' as Tab, label: t('tabs.encryption'), icon: tabIcons.encryption, group: 'privacy' as TabGroup }] : []),
+    { id: 'content_senders', label: t('tabs.content_senders'), icon: tabIcons.content_senders, group: 'privacy' },
+
+    // Apps
     ...(supportsCalendar ? [{ id: 'calendar' as Tab, label: t('tabs.calendar'), icon: tabIcons.calendar, group: 'apps' as TabGroup }] : []),
     { id: 'contacts', label: t('tabs.contacts'), icon: tabIcons.contacts, group: 'apps' },
     ...(supportsFiles ? [{ id: 'files' as Tab, label: t('tabs.files'), icon: tabIcons.files, group: 'apps' as TabGroup }] : []),
     ...(isFeatureEnabled('sidebarAppsEnabled') ? [{ id: 'sidebar_apps' as Tab, label: t('tabs.sidebar_apps'), icon: tabIcons.sidebar_apps, group: 'apps' as TabGroup }] : []),
-    ...(isFeatureEnabled('themesEnabled') ? [{ id: 'themes' as Tab, label: 'Themes', icon: tabIcons.themes, group: 'system' as TabGroup, experimental: true }] : []),
+
-    ...(isFeatureEnabled('pluginsEnabled') ? [{ id: 'plugins' as Tab, label: 'Plugins', icon: tabIcons.plugins, group: 'system' as TabGroup, experimental: true }] : []),
+    // Advanced
-    { id: 'advanced', label: t('tabs.advanced'), icon: tabIcons.advanced, group: 'system' },
+    { id: 'about_data', label: t('tabs.about_data'), icon: tabIcons.about_data, group: 'advanced' },
+    ...(isFeatureEnabled('themesEnabled') ? [{ id: 'themes' as Tab, label: 'Themes', icon: tabIcons.themes, group: 'advanced' as TabGroup, experimental: true }] : []),
+    ...(isFeatureEnabled('pluginsEnabled') ? [{ id: 'plugins' as Tab, label: 'Plugins', icon: tabIcons.plugins, group: 'advanced' as TabGroup, experimental: true }] : []),
+    ...(isFeatureEnabled('debugModeEnabled') ? [{ id: 'debug' as Tab, label: t('tabs.debug'), icon: tabIcons.debug, group: 'advanced' as TabGroup }] : []),
   ];
 
   // Group tabs by category
@@ -190,6 +269,10 @@ export default function SettingsPage() {
     }))
     .filter((g) => g.items.length > 0);
 
+  // If active tab is not in the visible list (e.g., feature disabled), fall back.
+  const isActiveVisible = tabs.some((tab) => tab.id === activeTab);
+  const effectiveActiveTab: Tab = isActiveVisible ? activeTab : 'appearance';
+
   const handleTabSelect = (tabId: Tab) => {
     setActiveTab(tabId);
     try { localStorage.setItem('settings-active-tab', tabId); } catch { /* ignore */ }
@@ -198,39 +281,42 @@ export default function SettingsPage() {
     }
   };
 
-  const activeTabLabel = tabs.find((tab) => tab.id === activeTab)?.label ?? '';
+  const activeTabLabel = tabs.find((tab) => tab.id === effectiveActiveTab)?.label ?? '';
 
   const renderTabContent = () => (
     <>
-      {activeTab === 'appearance' && <AppearanceSettings />}
+      {effectiveActiveTab === 'account' && <AccountSettings />}
-      {activeTab === 'email' && <EmailSettings />}
+      {effectiveActiveTab === 'language' && <LanguageSettings />}
-      {activeTab === 'notifications' && <NotificationSettings />}
+      {effectiveActiveTab === 'notifications' && <NotificationSettings />}
-      {activeTab === 'account' && <AccountSettings />}
+      {effectiveActiveTab === 'appearance' && <AppearanceSettings />}
-      {activeTab === 'security' && <AccountSecuritySettings />}
+      {effectiveActiveTab === 'layout' && <LayoutSettings />}
-      {activeTab === 'identities' && <IdentitySettings />}
+      {effectiveActiveTab === 'reading' && <ReadingSettings />}
-      {activeTab === 'encryption' && <SmimeSettings />}
+      {effectiveActiveTab === 'composing' && <ComposingSettings />}
-      {activeTab === 'vacation' && <VacationSettings />}
+      {effectiveActiveTab === 'identities' && <IdentitySettings />}
-      {activeTab === 'calendar' && <><CalendarSettings /><div className="mt-8"><CalendarManagementSettings /></div></>}
+      {effectiveActiveTab === 'vacation' && <VacationSettings />}
-      {activeTab === 'contacts' && <ContactsSettings />}
+      {effectiveActiveTab === 'filters' && <FilterSettings />}
-      {activeTab === 'filters' && <FilterSettings />}
+      {effectiveActiveTab === 'templates' && <TemplateSettings />}
-      {activeTab === 'templates' && <TemplateSettings />}
+      {effectiveActiveTab === 'folders' && <FolderSettings />}
-      {activeTab === 'folders' && <FolderSettings />}
+      {effectiveActiveTab === 'keywords' && <KeywordSettings />}
-      {activeTab === 'keywords' && <KeywordSettings />}
+      {effectiveActiveTab === 'security' && <AccountSecuritySettings />}
-      {activeTab === 'files' && <FilesSettingsComponent />}
+      {effectiveActiveTab === 'encryption' && <SmimeSettings />}
-      {activeTab === 'sidebar_apps' && <SidebarAppsSettings />}
+      {effectiveActiveTab === 'content_senders' && <ContentSendersSettings />}
-      {activeTab === 'themes' && <ThemesSettings />}
+      {effectiveActiveTab === 'calendar' && <><CalendarSettings /><div className="mt-8"><CalendarManagementSettings /></div></>}
-      {activeTab === 'plugins' && <PluginsSettings />}
+      {effectiveActiveTab === 'contacts' && <><ContactsSettings /><div className="mt-8"><AddressBookManagementSettings /></div></>}
-      {activeTab === 'advanced' && <AdvancedSettings />}
+      {effectiveActiveTab === 'files' && <FilesSettingsComponent />}
+      {effectiveActiveTab === 'sidebar_apps' && <SidebarAppsSettings />}
+      {effectiveActiveTab === 'about_data' && <AboutDataSettings />}
+      {effectiveActiveTab === 'themes' && <ThemesSettings />}
+      {effectiveActiveTab === 'plugins' && <PluginsSettings />}
+      {effectiveActiveTab === 'debug' && <DebugSettings />}
     </>
   );
 
   // Mobile layout
   if (!isDesktop) {
-    // Mobile: show content view
     if (mobileShowContent) {
       return (
         <div className="flex flex-col h-dvh bg-background">
-          {/* Mobile content header */}
           <div className="flex items-center gap-2 px-4 h-14 border-b border-border bg-background shrink-0">
             <Button
               variant="ghost"
@@ -243,14 +329,12 @@ export default function SettingsPage() {
             <h1 className="font-semibold text-lg truncate">{activeTabLabel}</h1>
           </div>
 
-          {/* Content */}
           <div className="flex-1 overflow-y-auto p-4">
             <div className="bg-card border border-border rounded-lg p-4">
               {renderTabContent()}
             </div>
           </div>
 
-          {/* Bottom Navigation */}
           <NavigationRail
             orientation="horizontal"
             onManageApps={handleManageApps}
@@ -263,10 +347,8 @@ export default function SettingsPage() {
       );
     }
 
-    // Mobile: show tab list
     return (
       <div className="flex flex-col h-dvh bg-background">
-        {/* Mobile header */}
         <div className="flex items-center gap-2 px-4 h-14 border-b border-border bg-background shrink-0">
           <Button
             variant="ghost"
@@ -282,7 +364,6 @@ export default function SettingsPage() {
           </div>
         </div>
 
-        {/* Tab list */}
         <div className="flex-1 overflow-y-auto">
           <div className="py-2">
             {groupedTabs.map((group, groupIndex) => (
@@ -318,7 +399,6 @@ export default function SettingsPage() {
             ))}
           </div>
 
-          {/* Logout */}
           <div className="border-t border-border px-5 py-3">
             <button
               onClick={logout}
@@ -330,7 +410,6 @@ export default function SettingsPage() {
           </div>
         </div>
 
-        {/* Bottom Navigation */}
         <NavigationRail
           orientation="horizontal"
           onManageApps={handleManageApps}
@@ -346,7 +425,6 @@ export default function SettingsPage() {
   // Desktop layout
   return (
     <div className="flex h-dvh bg-background">
-      {/* Navigation Rail */}
       <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
         <NavigationRail
           collapsed
@@ -365,7 +443,6 @@ export default function SettingsPage() {
       )}
       {!inlineApp && (
       <>
-      {/* Settings Sidebar */}
       <div
         className={cn(
           "border-r border-border bg-secondary flex flex-col",
@@ -373,7 +450,6 @@ export default function SettingsPage() {
         )}
         style={{ width: `${settingsSidebarWidth}px` }}
       >
-        {/* Header */}
         <div className="p-4 border-b border-border">
           <Button
             variant="ghost"
@@ -386,7 +462,6 @@ export default function SettingsPage() {
           </Button>
         </div>
 
-        {/* Tabs */}
         <div className="flex-1 overflow-y-auto py-2" data-tour="settings-tabs">
           <div className="px-2 space-y-0.5">
             {groupedTabs.map((group, groupIndex) => (
@@ -405,14 +480,14 @@ export default function SettingsPage() {
                       onClick={() => setActiveTab(tab.id)}
                       className={cn(
                         'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
-                        activeTab === tab.id
+                        effectiveActiveTab === tab.id
                           ? 'bg-accent text-accent-foreground font-medium'
                           : 'hover:bg-muted text-foreground'
                       )}
                     >
                       <Icon className={cn(
                         'w-4 h-4 shrink-0',
-                        activeTab === tab.id ? 'text-accent-foreground' : 'text-muted-foreground'
+                        effectiveActiveTab === tab.id ? 'text-accent-foreground' : 'text-muted-foreground'
                       )} />
                       {tab.label}
                       {tab.experimental && (
@@ -429,7 +504,6 @@ export default function SettingsPage() {
         </div>
       </div>
 
-      {/* Sidebar resize handle */}
       <ResizeHandle
         onResizeStart={() => { dragStartWidth.current = settingsSidebarWidth; setIsResizing(true); }}
         onResize={(delta) => setSettingsSidebarWidth(Math.max(180, Math.min(400, dragStartWidth.current + delta)))}
@@ -440,10 +514,8 @@ export default function SettingsPage() {
         onDoubleClick={() => { setSettingsSidebarWidth(256); localStorage.setItem('settings-sidebar-width', '256'); }}
       />
 
-      {/* Settings Content */}
       <div className="flex-1 overflow-y-auto">
         <div className="max-w-3xl mx-auto p-8">
-          {/* Page Header */}
           <div className="mb-6">
             <div className="flex items-center gap-2.5 mb-2">
               <SettingsIcon className="w-6 h-6 text-muted-foreground" />
@@ -451,7 +523,6 @@ export default function SettingsPage() {
             </div>
           </div>
 
-          {/* Active Tab Content */}
           <div className="bg-card border border-border rounded-lg p-6">
             {renderTabContent()}
           </div>

app/admin/auth/page.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { Save, Loader2, RotateCcw } from 'lucide-react';
+import { Save, Loader2, RotateCcw, Sparkles } 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 }),
@@ -68,6 +69,58 @@ export default function AdminAuthPage() {
     }
   }
 
+  const [setupRunning, setSetupRunning] = useState(false);
+  const [setupOpen, setSetupOpen] = useState(false);
+  const [setupOrigin, setSetupOrigin] = useState('');
+  const [setupIssuer, setSetupIssuer] = useState('');
+  const [setupOauthOnly, setSetupOauthOnly] = useState(false);
+
+  function openSetupDialog() {
+    if (typeof window === 'undefined') return;
+    const origin = window.location.origin;
+    const jmapUrl = (currentValue('jmapServerUrl') as string | undefined)?.replace(/\/+$/, '') || '';
+    setSetupOrigin(origin);
+    setSetupIssuer(jmapUrl || origin);
+    setSetupOauthOnly(currentValue('oauthOnly') === true);
+    setSetupOpen(true);
+  }
+
+  async function handleAutoSetup() {
+    setSetupRunning(true);
+    setMessage(null);
+    try {
+      const res = await apiFetch('/api/admin/oauth/setup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          origin: setupOrigin.trim().replace(/\/+$/, ''),
+          issuerUrl: setupIssuer.trim().replace(/\/+$/, ''),
+          oauthOnly: setupOauthOnly,
+        }),
+      });
+      const data = await res.json();
+      if (res.ok) {
+        setMessage({
+          type: 'success',
+          text: `OAuth client ${data.action} on Stalwart (${data.issuerUrl}). ${data.redirectUriCount} redirect URI(s) registered for ${data.origin}.`,
+        });
+        setEdits({});
+        setSetupOpen(false);
+        await fetchConfig();
+      } else {
+        const detail = data.detail ? ` (${typeof data.detail === 'string' ? data.detail : JSON.stringify(data.detail).slice(0, 200)})` : '';
+        setMessage({ type: 'error', text: (data.error || 'Setup failed') + detail });
+      }
+    } catch (err) {
+      setMessage({ type: 'error', text: err instanceof Error ? err.message : 'Setup failed' });
+    } finally {
+      setSetupRunning(false);
+    }
+  }
+
+  const setupOriginValid = /^https?:\/\/[^/]+$/.test(setupOrigin.trim().replace(/\/+$/, ''));
+  const setupIssuerValid = /^https?:\/\/[^/]+$/.test(setupIssuer.trim().replace(/\/+$/, ''));
+
   const hasEdits = Object.keys(edits).length > 0;
 
   if (loading) {
@@ -99,6 +152,119 @@ export default function AdminAuthPage() {
         </div>
       )}
 
+      {/* Auto-setup */}
+      <div className="rounded-lg border border-primary/30 bg-primary/5 p-4">
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <Sparkles className="w-4 h-4 text-primary shrink-0" />
+              <h3 className="text-sm font-medium text-foreground">Auto-configure OAuth (Stalwart)</h3>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              Registers an OAuth client on the connected Stalwart server, generates a client secret, and saves the settings here.
+              Requires your Stalwart account to have admin permissions.
+            </p>
+          </div>
+          <button
+            onClick={openSetupDialog}
+            disabled={setupRunning}
+            className="shrink-0 inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
+          >
+            {setupRunning ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
+            {setupRunning ? 'Configuring…' : 'Set up automagically'}
+          </button>
+        </div>
+      </div>
+
+      {/* Auto-setup dialog */}
+      {setupOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="oauth-setup-title"
+          onClick={(e) => { if (e.target === e.currentTarget && !setupRunning) setSetupOpen(false); }}
+        >
+          <div className="w-full max-w-md rounded-lg border border-border bg-background shadow-xl">
+            <div className="px-5 py-4 border-b border-border">
+              <h3 id="oauth-setup-title" className="text-base font-medium text-foreground">Auto-configure OAuth</h3>
+              <p className="text-xs text-muted-foreground mt-1">
+                Verify the URLs below before continuing. The webmail and Stalwart can live on different domains.
+              </p>
+            </div>
+            <div className="px-5 py-4 space-y-4">
+              <div>
+                <label htmlFor="setup-origin" className="block text-xs font-medium text-foreground mb-1">
+                  Webmail origin
+                </label>
+                <input
+                  id="setup-origin"
+                  type="url"
+                  value={setupOrigin}
+                  onChange={(e) => setSetupOrigin(e.target.value)}
+                  disabled={setupRunning}
+                  placeholder="https://webmail.example.com"
+                  className="w-full h-9 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                />
+                <p className="text-[11px] text-muted-foreground mt-1">
+                  Used to register redirect URIs (one per locale: <code>{setupOrigin.trim().replace(/\/+$/, '') || 'https://…'}/&lt;locale&gt;/auth/callback</code>) on Stalwart.
+                </p>
+                {!setupOriginValid && setupOrigin.length > 0 && (
+                  <p className="text-[11px] text-destructive mt-1">Must be like https://host with no path.</p>
+                )}
+              </div>
+              <div>
+                <label htmlFor="setup-issuer" className="block text-xs font-medium text-foreground mb-1">
+                  Stalwart issuer URL
+                </label>
+                <input
+                  id="setup-issuer"
+                  type="url"
+                  value={setupIssuer}
+                  onChange={(e) => setSetupIssuer(e.target.value)}
+                  disabled={setupRunning}
+                  placeholder="https://mail.example.com"
+                  className="w-full h-9 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                />
+                <p className="text-[11px] text-muted-foreground mt-1">
+                  Where Stalwart serves <code>/.well-known/oauth-authorization-server</code>. Saved as <code>OAUTH_ISSUER_URL</code>. Pre-filled from your JMAP server URL.
+                </p>
+                {!setupIssuerValid && setupIssuer.length > 0 && (
+                  <p className="text-[11px] text-destructive mt-1">Must be like https://host with no path.</p>
+                )}
+              </div>
+              <label className="inline-flex items-center gap-2 text-xs text-foreground select-none cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={setupOauthOnly}
+                  onChange={(e) => setSetupOauthOnly(e.target.checked)}
+                  className="h-3.5 w-3.5 rounded border-input"
+                  disabled={setupRunning}
+                />
+                Also enable “OAuth only” (hide password login)
+              </label>
+            </div>
+            <div className="px-5 py-3 border-t border-border flex items-center justify-end gap-2 bg-muted/30 rounded-b-lg">
+              <button
+                onClick={() => setSetupOpen(false)}
+                disabled={setupRunning}
+                className="h-9 px-3 rounded-md border border-input bg-background text-sm text-foreground hover:bg-muted disabled:opacity-50 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleAutoSetup}
+                disabled={setupRunning || !setupOriginValid || !setupIssuerValid}
+                className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
+              >
+                {setupRunning ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
+                {setupRunning ? 'Configuring…' : 'Configure'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* OAuth */}
       <Section title="OAuth / OpenID Connect">
         <Toggle label="OAuth Enabled" configKey="oauthEnabled" value={currentValue('oauthEnabled') as boolean} source={config.oauthEnabled?.source} onChange={handleChange} onRevert={handleRevert} />

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

@@ -24,8 +24,10 @@ import {
 import { cn } from '@/lib/utils';
 import { useConfig } from '@/hooks/use-config';
 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 = [
   {
@@ -63,6 +65,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
   const router = useRouter();
   const pathname = usePathname();
   const [authenticated, setAuthenticated] = useState<boolean | null>(null);
+  const [authError, setAuthError] = useState<string | null>(null);
   const [isStalwartAdmin, setIsStalwartAdmin] = useState(false);
   const { appLogoLightUrl, appLogoDarkUrl, loginLogoLightUrl, loginLogoDarkUrl } = useConfig();
   const resolvedTheme = useThemeStore((s) => s.resolvedTheme);
@@ -71,63 +74,62 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
     : (appLogoLightUrl || appLogoDarkUrl || loginLogoLightUrl);
 
   useEffect(() => {
-    if (pathname !== '/admin/login') {
+    if (pathname === '/admin/login') return;
-      checkAuth();
+    let cancelled = false;
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pathname]);
 
-  function getJmapHeaders(): Record<string, string> {
+    async function checkAuth() {
-    const client = useAuthStore.getState().client;
+      try {
-    if (!client) return {};
+        const jmapHeaders = getActiveAccountSlotHeaders();
-    return {
+        const res = await apiFetch('/api/admin/auth', { headers: jmapHeaders });
-      'Authorization': client.getAuthHeader(),
+        const data = await res.json();
-      'X-JMAP-Server-URL': client.getServerUrl(),
+        if (cancelled) return;
-      'X-JMAP-Username': client.getUsername(),
-    };
-  }
 
-  async function checkAuth() {
+        const stalwartAdmin = data.stalwartAdmin === true;
-    try {
+        setIsStalwartAdmin(stalwartAdmin);
-      const jmapHeaders = getJmapHeaders();
-      const res = await fetch('/api/admin/auth', { headers: jmapHeaders });
-      const data = await res.json();
 
-      const stalwartAdmin = data.stalwartAdmin === true;
+        // If neither password-based admin nor Stalwart admin, redirect away
-      setIsStalwartAdmin(stalwartAdmin);
+        if (!data.enabled && !stalwartAdmin) {
+          router.replace('/');
+          return;
+        }
 
-      // If neither password-based admin nor Stalwart admin, redirect away
+        if (data.authenticated) {
-      if (!data.enabled && !stalwartAdmin) {
-        router.replace('/');
-        return;
-      }
-
-      if (data.authenticated) {
-        setAuthenticated(true);
-        return;
-      }
-
-      // If Stalwart admin but not yet authenticated, auto-login
-      if (stalwartAdmin) {
-        const loginRes = await fetch('/api/admin/auth', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json', ...jmapHeaders },
-          body: JSON.stringify({ stalwartAuth: true }),
-        });
-        if (loginRes.ok) {
           setAuthenticated(true);
           return;
         }
-      }
 
-      router.replace('/admin/login');
+        // If Stalwart admin but not yet authenticated, auto-login
-    } catch {
+        if (stalwartAdmin) {
-      router.replace('/admin/login');
+          const loginRes = await apiFetch('/api/admin/auth', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', ...jmapHeaders },
+            body: JSON.stringify({ stalwartAuth: true }),
+          });
+          if (cancelled) return;
+          if (loginRes.ok) {
+            setAuthenticated(true);
+            return;
+          }
+          const body = await loginRes.json().catch(() => ({}));
+          setAuthError(body?.error || `Admin auto-login failed (HTTP ${loginRes.status})`);
+          setAuthenticated(false);
+          return;
+        }
+
+        router.replace('/admin/login');
+      } catch (err) {
+        if (cancelled) return;
+        setAuthError(err instanceof Error ? err.message : 'Network error during admin check');
+        setAuthenticated(false);
+      }
     }
-  }
+
+    checkAuth();
+    return () => { cancelled = true; };
+  }, [pathname, router]);
 
   async function handleLogout() {
-    await fetch('/api/admin/auth', { method: 'DELETE' });
+    await apiFetch('/api/admin/auth', { method: 'DELETE' });
     router.replace('/admin/login');
   }
 
@@ -136,14 +138,6 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
     return <>{children}</>;
   }
 
-  if (authenticated === null) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-background">
-        <div className="animate-pulse text-muted-foreground text-sm">Loading...</div>
-      </div>
-    );
-  }
-
   return (
     <div className="min-h-screen flex bg-background">
       {/* Slim webmail nav rail */}
@@ -273,7 +267,18 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
       {/* Main content */}
       <main className="flex-1 overflow-auto">
         <div className="max-w-4xl mx-auto p-6">
-          {children}
+          {authError ? (
+            <div className="rounded-lg border border-destructive/40 bg-destructive/10 p-4 text-sm text-destructive">
+              <p className="font-medium">Admin authentication failed</p>
+              <p className="mt-1 text-destructive/80">{authError}</p>
+            </div>
+          ) : authenticated === null ? (
+            <div className="py-12 text-center text-sm text-muted-foreground animate-pulse">
+              Loading admin panel…
+            </div>
+          ) : authenticated ? (
+            children
+          ) : null}
         </div>
       </main>
     </div>

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'),
+      apiFetch('/api/admin/auth'),
-      fetch('/api/admin/audit?limit=10'),
+      apiFetch('/api/admin/audit?limit=10'),
-      fetch('/api/config'),
+      apiFetch('/api/config'),
-      fetch('/api/admin/config'),
+      apiFetch('/api/admin/config'),
-      fetch('/api/admin/plugins').catch(() => null),
+      apiFetch('/api/admin/plugins').catch(() => null),
-      fetch('/api/admin/themes').catch(() => null),
+      apiFetch('/api/admin/themes').catch(() => null),
-      fetch('/api/admin/policy').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 jmapUrl = config?.jmapServerUrl || '-';
-  const jmapHostname = jmapUrl !== '—' ? (() => { try { return new URL(jmapUrl).hostname; } catch { return jmapUrl; } })() : '—';
+  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

@@ -0,0 +1,286 @@
+'use client';
+
+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';
+  label: string;
+  description?: string;
+  required?: boolean;
+  default?: unknown;
+  placeholder?: string;
+  options?: { label: string; value: string }[];
+}
+
+interface PluginConfig {
+  [key: string]: unknown;
+}
+
+interface PluginInfo {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  author: string;
+  type: string;
+  permissions: string[];
+  enabled: boolean;
+  configSchema?: Record<string, ConfigField>;
+}
+
+export default function PluginConfigPage() {
+  const params = useParams();
+  const pluginId = params.id as string;
+  const [plugin, setPlugin] = useState<PluginInfo | null>(null);
+  const [config, setConfig] = useState<PluginConfig>({});
+  const [formValues, setFormValues] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [revealSecrets, setRevealSecrets] = useState<Record<string, boolean>>({});
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  useEffect(() => {
+    fetchData();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pluginId]);
+
+  // Initialize form values from config + schema defaults when data loads
+  useEffect(() => {
+    if (!plugin?.configSchema) return;
+    const initial: Record<string, string> = {};
+    for (const [key, field] of Object.entries(plugin.configSchema)) {
+      const stored = config[key];
+      if (stored !== undefined && stored !== null) {
+        initial[key] = String(stored);
+      } else if (field.default !== undefined) {
+        initial[key] = String(field.default);
+      } else {
+        initial[key] = '';
+      }
+    }
+    setFormValues(initial);
+  }, [plugin, config]);
+
+  async function fetchData() {
+    setLoading(true);
+    try {
+      const [pluginsRes, configRes] = await Promise.all([
+        apiFetch('/api/admin/plugins'),
+        apiFetch(`/api/admin/plugins/${encodeURIComponent(pluginId)}/config`),
+      ]);
+
+      if (pluginsRes.ok) {
+        const plugins: PluginInfo[] = await pluginsRes.json();
+        setPlugin(plugins.find(p => p.id === pluginId) || null);
+      }
+
+      if (configRes.ok) {
+        setConfig(await configRes.json());
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleSaveAll() {
+    if (!plugin?.configSchema) return;
+    setSaving(true);
+    setMessage(null);
+
+    // Validate required fields
+    for (const [key, field] of Object.entries(plugin.configSchema)) {
+      if (field.required && !formValues[key]?.trim()) {
+        setMessage({ type: 'error', text: `"${field.label}" is required` });
+        setSaving(false);
+        return;
+      }
+    }
+
+    try {
+      // Save each changed field
+      let hasError = false;
+      for (const [key, field] of Object.entries(plugin.configSchema)) {
+        const newVal = formValues[key] ?? '';
+        const oldVal = config[key] !== undefined ? String(config[key]) : '';
+
+        // Skip unchanged fields (and skip secret fields that show as empty when they have a stored value)
+        if (newVal === oldVal) continue;
+        if (field.type === 'secret' && !newVal && config[key]) continue;
+
+        // Convert types
+        let value: unknown = newVal;
+        if (field.type === 'boolean') value = newVal === 'true';
+        else if (field.type === 'number') value = Number(newVal);
+
+        // Delete if clearing a non-required field
+        if (!newVal && !field.required) {
+          const res = await apiFetch(`/api/admin/plugins/${encodeURIComponent(pluginId)}/config`, {
+            method: 'DELETE',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ key }),
+          });
+          if (res.ok) {
+            setConfig(prev => { const next = { ...prev }; delete next[key]; return next; });
+          } else {
+            hasError = true;
+          }
+          continue;
+        }
+
+        const res = await apiFetch(`/api/admin/plugins/${encodeURIComponent(pluginId)}/config`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ key, value }),
+        });
+        if (res.ok) {
+          setConfig(prev => ({ ...prev, [key]: value }));
+        } else {
+          hasError = true;
+        }
+      }
+
+      setMessage(hasError
+        ? { type: 'error', text: 'Some settings failed to save' }
+        : { type: 'success', text: 'Configuration saved' }
+      );
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to save configuration' });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">
+        <Loader2 className="w-4 h-4 animate-spin mr-2" />
+        Loading...
+      </div>
+    );
+  }
+
+  if (!plugin) {
+    return (
+      <div className="space-y-4">
+        <Link href="/admin/plugins" className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground">
+          <ArrowLeft className="w-4 h-4" /> Back to Plugins
+        </Link>
+        <p className="text-sm text-destructive">Plugin not found: {pluginId}</p>
+      </div>
+    );
+  }
+
+  const schema = plugin.configSchema;
+  const hasSchema = schema && Object.keys(schema).length > 0;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-3">
+        <Link href="/admin/plugins" className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground">
+          <ArrowLeft className="w-4 h-4" />
+        </Link>
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground flex items-center gap-2">
+            <Puzzle className="w-5 h-5" />
+            {plugin.name} Configuration
+          </h1>
+          <p className="text-sm text-muted-foreground mt-0.5">
+            v{plugin.version} by {plugin.author}
+          </p>
+        </div>
+      </div>
+
+      {message && (
+        <div className={`text-sm rounded-md px-3 py-2 ${message.type === 'success' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300' : 'bg-destructive/10 text-destructive'}`}>
+          {message.text}
+        </div>
+      )}
+
+      {hasSchema ? (
+        <div className="border border-border rounded-lg">
+          <div className="px-4 py-3 border-b border-border bg-muted/30">
+            <h2 className="text-sm font-medium text-foreground">Settings</h2>
+          </div>
+          <div className="p-4 space-y-5">
+            {Object.entries(schema).map(([key, field]) => (
+              <div key={key}>
+                <label className="text-sm font-medium text-foreground block mb-1">
+                  {field.label}
+                  {field.required && <span className="text-destructive ml-0.5">*</span>}
+                </label>
+                {field.description && (
+                  <p className="text-xs text-muted-foreground mb-1.5">{field.description}</p>
+                )}
+
+                {field.type === 'boolean' ? (
+                  <select
+                    value={formValues[key] ?? String(field.default ?? 'false')}
+                    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="true">Enabled</option>
+                    <option value="false">Disabled</option>
+                  </select>
+                ) : field.type === 'select' && field.options ? (
+                  <select
+                    value={formValues[key] ?? ''}
+                    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>
+                    {field.options.map(opt => (
+                      <option key={opt.value} value={opt.value}>{opt.label}</option>
+                    ))}
+                  </select>
+                ) : field.type === 'secret' ? (
+                  <div className="relative">
+                    <input
+                      type={revealSecrets[key] ? 'text' : 'password'}
+                      value={formValues[key] ?? ''}
+                      onChange={(e) => setFormValues(prev => ({ ...prev, [key]: e.target.value }))}
+                      placeholder={config[key] ? '••••••••  (unchanged)' : (field.placeholder || '')}
+                      className="w-full h-9 px-3 pr-10 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring font-mono"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setRevealSecrets(prev => ({ ...prev, [key]: !prev[key] }))}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground"
+                      aria-label={revealSecrets[key] ? 'Hide' : 'Show'}
+                    >
+                      {revealSecrets[key] ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                  </div>
+                ) : (
+                  <input
+                    type={field.type === 'number' ? 'number' : 'text'}
+                    value={formValues[key] ?? ''}
+                    onChange={(e) => setFormValues(prev => ({ ...prev, [key]: e.target.value }))}
+                    placeholder={field.placeholder || ''}
+                    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"
+                  />
+                )}
+              </div>
+            ))}
+
+            <button
+              onClick={handleSaveAll}
+              disabled={saving}
+              className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
+            >
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
+              Save Configuration
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="border border-border rounded-lg p-8 text-center">
+          <p className="text-sm text-muted-foreground">This plugin does not declare any configuration settings.</p>
+        </div>
+      )}
+    </div>
+  );
+}

app/admin/plugins/page.tsx

@@ -1,9 +1,11 @@
 'use client';
 
 import { useEffect, useState, useRef } from 'react';
-import { Upload, Trash2, Power, PowerOff, AlertTriangle, Loader2, Package, Save, Shield, Lock, LockOpen } from 'lucide-react';
+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;
@@ -33,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);
@@ -59,11 +61,20 @@ export default function AdminPluginsPage() {
     setMessage(null);
   }
 
+  function toggleRequirePluginApproval() {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, requirePluginApproval: !prev.features.requirePluginApproval },
+    }));
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
   async function handleSavePolicy() {
     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),
@@ -85,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);
@@ -103,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,
       });
@@ -126,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 }),
@@ -146,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),
@@ -180,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 }),
@@ -206,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 }),
@@ -226,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 }),
@@ -247,6 +258,7 @@ export default function AdminPluginsPage() {
 
   const pluginsEnabled = policy.features.pluginsEnabled ?? true;
   const pluginsUploadEnabled = policy.features.pluginsUploadEnabled ?? true;
+  const requirePluginApproval = policy.features.requirePluginApproval ?? true;
 
   return (
     <div className="space-y-6">
@@ -319,6 +331,17 @@ export default function AdminPluginsPage() {
             </button>
           </div>
 
+          <div className="px-4 py-3 flex items-center justify-between gap-4">
+            <div>
+              <span className="text-sm text-foreground">Require Admin Approval</span>
+              <p className="text-xs text-muted-foreground mt-0.5">User-uploaded plugins must be approved by an admin before they can be enabled</p>
+            </div>
+            <button onClick={toggleRequirePluginApproval}
+              className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${requirePluginApproval ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
+              <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${requirePluginApproval ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+            </button>
+          </div>
+
           {/* Force enable / disable all */}
           {plugins.length > 0 && (
             <div className="px-4 py-3 flex items-center justify-between gap-4">
@@ -396,6 +419,13 @@ export default function AdminPluginsPage() {
               </div>
 
               <div className="flex items-center gap-2">
+                <Link
+                  href={`/admin/plugins/${plugin.id}`}
+                  title="Configure"
+                  className="p-2 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <Settings className="w-4 h-4" />
+                </Link>
                 <button
                   onClick={() => toggleForceEnabled(plugin.id, !plugin.forceEnabled)}
                   title={plugin.forceEnabled ? 'Remove force-enable (users can disable)' : 'Force enable (users cannot disable)'}

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'];
@@ -19,6 +20,7 @@ const FEATURE_GATE_LABELS: Partial<Record<keyof FeatureGates, { label: string; d
   debugModeEnabled: { label: 'Debug Mode', description: 'Allow users to enable debug/diagnostic mode' },
   folderIconsEnabled: { label: 'Folder Icons', description: 'Allow custom folder icon picker' },
   hoverActionsConfigEnabled: { label: 'Hover Actions Config', description: 'Allow users to customize email hover actions' },
+  filesEnabled: { label: 'Files (WebDAV)', description: 'Enable file storage via WebDAV. WARNING: Large uploads can cause Stalwart/RocksDB instability. Not recommended for production.' },
 };
 
 const RESTRICTABLE_SETTINGS = [
@@ -28,10 +30,12 @@ const RESTRICTABLE_SETTINGS = [
   { key: 'markAsReadDelay', label: 'Mark as Read Delay', category: 'Email', type: 'number' },
   { key: 'deleteAction', label: 'Delete Action', category: 'Email', type: 'enum', allowedValues: ['trash', 'permanent'] },
   { key: 'showPreview', label: 'Show Preview', category: 'Email', type: 'boolean' },
+  { key: 'mailLayout', label: 'Mail Layout', category: 'Email', type: 'enum', allowedValues: ['split', 'focus'] },
   { key: 'emailsPerPage', label: 'Emails Per Page', category: 'Email', type: 'number' },
   { key: 'externalContentPolicy', label: 'External Content Policy', category: 'Email', type: 'enum', allowedValues: ['allow', 'block', 'ask'] },
   { key: 'sendConfirmation', label: 'Send Confirmation', category: 'Composer', type: 'boolean' },
   { key: 'defaultReplyMode', label: 'Default Reply Mode', category: 'Composer', type: 'enum', allowedValues: ['reply', 'reply-all'] },
+  { key: 'autoSelectReplyIdentity', label: 'Auto-select Reply Identity', category: 'Composer', type: 'boolean' },
   { key: 'plainTextMode', label: 'Plain Text Only', category: 'Composer', type: 'boolean' },
   { key: 'sessionTimeout', label: 'Session Timeout', category: 'Privacy', type: 'number' },
   { key: 'emailNotificationsEnabled', label: 'Email Notifications', category: 'Notifications', type: 'boolean' },
@@ -51,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);
@@ -103,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 }),
@@ -112,8 +113,15 @@ export default function AdminSettingsPage() {
       <SettingsSection title="General">
         <TextSetting label="Application Name" configKey="appName" value={currentValue('appName') as string} source={config.appName?.source} onChange={handleChange} onRevert={handleRevert} />
         <TextSetting label="JMAP Server URL" configKey="jmapServerUrl" value={currentValue('jmapServerUrl') as string} source={config.jmapServerUrl?.source} onChange={handleChange} onRevert={handleRevert} placeholder="https://mail.example.com" />
+        <ToggleSetting label="Allow Custom JMAP Endpoint" description="Show a JMAP server URL field on the login form, allowing users to connect to any JMAP server" configKey="allowCustomJmapEndpoint" value={currentValue('allowCustomJmapEndpoint') as boolean} source={config.allowCustomJmapEndpoint?.source} onChange={handleChange} onRevert={handleRevert} />
+        {!!currentValue('allowCustomJmapEndpoint') && (
+          <div className="px-4 py-2.5 bg-amber-50 dark:bg-amber-950/30 border-l-2 border-amber-400 dark:border-amber-600">
+            <p className="text-xs text-amber-800 dark:text-amber-300 leading-relaxed">
+              <strong>CORS warning:</strong> External JMAP servers must include this domain in their CORS <code className="text-[11px] bg-amber-100 dark:bg-amber-900/50 px-1 py-0.5 rounded">Access-Control-Allow-Origin</code> header, or requests from the browser will be blocked.
+            </p>
+          </div>
+        )}
         <ToggleSetting label="Stalwart Features" description="Enable Stalwart Mail Server-specific features" configKey="stalwartFeaturesEnabled" value={currentValue('stalwartFeaturesEnabled') as boolean} source={config.stalwartFeaturesEnabled?.source} onChange={handleChange} onRevert={handleRevert} />
-        <TextSetting label="Stalwart API URL" configKey="stalwartApiUrl" value={currentValue('stalwartApiUrl') as string} source={config.stalwartApiUrl?.source} onChange={handleChange} onRevert={handleRevert} placeholder="https://mail.example.com/api" />
         <ToggleSetting label="Demo Mode" description="Enable demo mode with sample data" configKey="demoMode" value={currentValue('demoMode') as boolean} source={config.demoMode?.source} onChange={handleChange} onRevert={handleRevert} />
       </SettingsSection>
 

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/account/stalwart/auth/route.ts

@@ -1,72 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { logger } from '@/lib/logger';
-import { getStalwartCredentials } from '@/lib/stalwart/credentials';
-
-/**
- * GET /api/account/stalwart/auth
- * Proxy to Stalwart GET /api/account/auth
- */
-export async function GET(request: NextRequest) {
-  try {
-    const creds = await getStalwartCredentials(request);
-    if (!creds) {
-      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
-    }
-
-    const response = await fetch(`${creds.apiUrl}/api/account/auth`, {
-      method: 'GET',
-      headers: { 'Authorization': creds.authHeader },
-    });
-
-    if (!response.ok) {
-      const text = await response.text();
-      logger.warn('Stalwart auth info failed', { status: response.status });
-      return NextResponse.json(
-        { error: 'Failed to fetch auth info', details: text },
-        { status: response.status }
-      );
-    }
-
-    const data = await response.json();
-    return NextResponse.json(data);
-  } catch (error) {
-    logger.error('Stalwart auth proxy error', { error: error instanceof Error ? error.message : 'Unknown' });
-    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
-  }
-}
-
-/**
- * POST /api/account/stalwart/auth
- * Proxy to Stalwart POST /api/account/auth
- */
-export async function POST(request: NextRequest) {
-  try {
-    const creds = await getStalwartCredentials(request);
-    if (!creds) {
-      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
-    }
-
-    const body = await request.json();
-
-    const response = await fetch(`${creds.apiUrl}/api/account/auth`, {
-      method: 'POST',
-      headers: {
-        'Authorization': creds.authHeader,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(body),
-    });
-
-    const data = await response.json();
-
-    if (!response.ok) {
-      logger.warn('Stalwart auth update failed', { status: response.status });
-      return NextResponse.json(data, { status: response.status });
-    }
-
-    return NextResponse.json(data);
-  } catch (error) {
-    logger.error('Stalwart auth update proxy error', { error: error instanceof Error ? error.message : 'Unknown' });
-    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
-  }
-}

app/api/account/stalwart/crypto/route.ts

@@ -1,72 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { logger } from '@/lib/logger';
-import { getStalwartCredentials } from '@/lib/stalwart/credentials';
-
-/**
- * GET /api/account/stalwart/crypto
- * Proxy to Stalwart GET /api/account/crypto
- */
-export async function GET(request: NextRequest) {
-  try {
-    const creds = await getStalwartCredentials(request);
-    if (!creds) {
-      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
-    }
-
-    const response = await fetch(`${creds.apiUrl}/api/account/crypto`, {
-      method: 'GET',
-      headers: { 'Authorization': creds.authHeader },
-    });
-
-    if (!response.ok) {
-      const text = await response.text();
-      logger.warn('Stalwart crypto info failed', { status: response.status });
-      return NextResponse.json(
-        { error: 'Failed to fetch crypto info', details: text },
-        { status: response.status }
-      );
-    }
-
-    const data = await response.json();
-    return NextResponse.json(data);
-  } catch (error) {
-    logger.error('Stalwart crypto proxy error', { error: error instanceof Error ? error.message : 'Unknown' });
-    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
-  }
-}
-
-/**
- * POST /api/account/stalwart/crypto
- * Proxy to Stalwart POST /api/account/crypto
- */
-export async function POST(request: NextRequest) {
-  try {
-    const creds = await getStalwartCredentials(request);
-    if (!creds) {
-      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
-    }
-
-    const body = await request.json();
-
-    const response = await fetch(`${creds.apiUrl}/api/account/crypto`, {
-      method: 'POST',
-      headers: {
-        'Authorization': creds.authHeader,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(body),
-    });
-
-    const data = await response.json();
-
-    if (!response.ok) {
-      logger.warn('Stalwart crypto update failed', { status: response.status });
-      return NextResponse.json(data, { status: response.status });
-    }
-
-    return NextResponse.json(data);
-  } catch (error) {
-    logger.error('Stalwart crypto update proxy error', { error: error instanceof Error ? error.message : 'Unknown' });
-    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
-  }
-}

app/api/account/stalwart/jmap/route.ts

@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { logger } from '@/lib/logger';
+import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+
+/**
+ * POST /api/account/stalwart/jmap
+ *
+ * Passthrough to Stalwart's JMAP endpoint using the stored basic-auth
+ * context so the browser does not need access to the user's credentials.
+ *
+ * Body: standard JMAP request `{ using: string[], methodCalls: [...] }`
+ *
+ * In Stalwart 0.16 all management operations (password change, app
+ * passwords, API keys, account settings, etc.) are exposed as JMAP
+ * methods under the `x:` namespace on the same endpoint.
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) {
+      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    const body = await request.text();
+
+    const response = await fetch(`${creds.serverUrl}/jmap/`, {
+      method: 'POST',
+      headers: {
+        'Authorization': creds.authHeader,
+        'Content-Type': 'application/json',
+      },
+      body,
+    });
+
+    const responseText = await response.text();
+    return new NextResponse(responseText, {
+      status: response.status,
+      headers: { 'Content-Type': response.headers.get('Content-Type') || 'application/json' },
+    });
+  } catch (error) {
+    logger.error('Stalwart JMAP passthrough error', {
+      error: error instanceof Error ? error.message : 'Unknown',
+    });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/account/stalwart/password/route.ts

@@ -1,83 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { cookies } from 'next/headers';
-import { logger } from '@/lib/logger';
-import { encryptSession } from '@/lib/auth/crypto';
-import { SESSION_COOKIE, SESSION_COOKIE_MAX_AGE } from '@/lib/auth/session-cookie';
-import { getStalwartCredentials } from '@/lib/stalwart/credentials';
-
-const COOKIE_OPTIONS = {
-  httpOnly: true,
-  secure: process.env.NODE_ENV === 'production',
-  sameSite: 'lax' as const,
-  path: '/',
-  maxAge: SESSION_COOKIE_MAX_AGE,
-};
-
-/**
- * POST /api/account/stalwart/password
- * Change user password via Stalwart PATCH /api/principal/{name}
- *
- * Body: { currentPassword: string, newPassword: string }
- */
-export async function POST(request: NextRequest) {
-  try {
-    const creds = await getStalwartCredentials(request);
-    if (!creds) {
-      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
-    }
-
-    const { currentPassword, newPassword } = await request.json();
-
-    if (!currentPassword || !newPassword) {
-      return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
-    }
-
-    if (newPassword.length < 8) {
-      return NextResponse.json({ error: 'Password must be at least 8 characters' }, { status: 400 });
-    }
-
-    // Verify current password by attempting to authenticate
-    const verifyAuth = `Basic ${Buffer.from(`${creds.username}:${currentPassword}`).toString('base64')}`;
-    const verifyResponse = await fetch(`${creds.serverUrl}/.well-known/jmap`, {
-      method: 'GET',
-      headers: { 'Authorization': verifyAuth },
-    });
-
-    if (!verifyResponse.ok) {
-      return NextResponse.json({ error: 'Current password is incorrect' }, { status: 403 });
-    }
-
-    // Change password via Stalwart principal API
-    const response = await fetch(`${creds.apiUrl}/api/principal/${encodeURIComponent(creds.username)}`, {
-      method: 'PATCH',
-      headers: {
-        'Authorization': creds.authHeader,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify([
-        { action: 'set', field: 'secrets', value: newPassword },
-      ]),
-    });
-
-    if (!response.ok) {
-      const text = await response.text();
-      logger.warn('Stalwart password change failed', { status: response.status });
-      return NextResponse.json(
-        { error: 'Failed to change password', details: text },
-        { status: response.status }
-      );
-    }
-
-    // If session cookie exists, update it with the new password
-    if (creds.hasSessionCookie) {
-      const newToken = encryptSession(creds.serverUrl, creds.username, newPassword);
-      const cookieStore = await cookies();
-      cookieStore.set(SESSION_COOKIE, newToken, COOKIE_OPTIONS);
-    }
-
-    return NextResponse.json({ ok: true });
-  } catch (error) {
-    logger.error('Stalwart password change proxy error', { error: error instanceof Error ? error.message : 'Unknown' });
-    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
-  }
-}

app/api/account/stalwart/principal/route.ts

@@ -1,81 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { logger } from '@/lib/logger';
-import { getStalwartCredentials } from '@/lib/stalwart/credentials';
-
-/**
- * GET /api/account/stalwart/principal
- * Proxy to Stalwart GET /api/principal/{username}
- */
-export async function GET(request: NextRequest) {
-  try {
-    const creds = await getStalwartCredentials(request);
-    if (!creds) {
-      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
-    }
-
-    const response = await fetch(`${creds.apiUrl}/api/principal/${encodeURIComponent(creds.username)}`, {
-      method: 'GET',
-      headers: { 'Authorization': creds.authHeader },
-    });
-
-    if (!response.ok) {
-      const text = await response.text();
-      logger.warn('Stalwart principal fetch failed', { status: response.status });
-      return NextResponse.json(
-        { error: 'Failed to fetch principal', details: text },
-        { status: response.status }
-      );
-    }
-
-    const data = await response.json();
-    return NextResponse.json(data);
-  } catch (error) {
-    logger.error('Stalwart principal proxy error', { error: error instanceof Error ? error.message : 'Unknown' });
-    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
-  }
-}
-
-/**
- * PATCH /api/account/stalwart/principal
- * Proxy to Stalwart PATCH /api/principal/{username}
- * Body: PrincipalUpdateAction[] (array of {action, field, value})
- */
-export async function PATCH(request: NextRequest) {
-  try {
-    const creds = await getStalwartCredentials(request);
-    if (!creds) {
-      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
-    }
-
-    const body = await request.json();
-
-    // Prevent secrets field from being changed through this endpoint (use /password instead)
-    if (Array.isArray(body)) {
-      const hasSecrets = body.some((action: { field?: string }) => action.field === 'secrets');
-      if (hasSecrets) {
-        return NextResponse.json({ error: 'Use /api/account/stalwart/password to change passwords' }, { status: 400 });
-      }
-    }
-
-    const response = await fetch(`${creds.apiUrl}/api/principal/${encodeURIComponent(creds.username)}`, {
-      method: 'PATCH',
-      headers: {
-        'Authorization': creds.authHeader,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(body),
-    });
-
-    const data = await response.json();
-
-    if (!response.ok) {
-      logger.warn('Stalwart principal update failed', { status: response.status });
-      return NextResponse.json(data, { status: response.status });
-    }
-
-    return NextResponse.json(data);
-  } catch (error) {
-    logger.error('Stalwart principal update proxy error', { error: error instanceof Error ? error.message : 'Unknown' });
-    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
-  }
-}

app/api/account/stalwart/probe/route.ts

@@ -1,44 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { logger } from '@/lib/logger';
-import { getStalwartCredentials } from '@/lib/stalwart/credentials';
-
-/**
- * GET /api/account/stalwart/probe
- * Detect whether the JMAP server is Stalwart by probing /api/account/auth
- */
-export async function GET(request: NextRequest) {
-  try {
-    const creds = await getStalwartCredentials(request);
-    if (!creds) {
-      return NextResponse.json({ isStalwart: false });
-    }
-
-    const controller = new AbortController();
-    const timeout = setTimeout(() => controller.abort(), 5000);
-
-    try {
-      const response = await fetch(`${creds.apiUrl}/api/account/auth`, {
-        method: 'GET',
-        headers: { 'Authorization': creds.authHeader },
-        signal: controller.signal,
-      });
-
-      clearTimeout(timeout);
-
-      if (!response.ok) {
-        return NextResponse.json({ isStalwart: false });
-      }
-
-      const data = await response.json();
-      const isStalwart = data.data !== undefined && typeof data.data.otpEnabled === 'boolean';
-
-      return NextResponse.json({ isStalwart });
-    } catch {
-      clearTimeout(timeout);
-      return NextResponse.json({ isStalwart: false });
-    }
-  } catch (error) {
-    logger.error('Stalwart probe error', { error: error instanceof Error ? error.message : 'Unknown' });
-    return NextResponse.json({ isStalwart: false });
-  }
-}

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/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

@@ -10,6 +10,10 @@ import {
   type ServerPlugin,
   type ServerTheme,
 } from '@/lib/admin/plugin-registry';
+import {
+  sanitizeFrameOrigins,
+  invalidateFrameOriginsCache,
+} from '@/lib/admin/csp-frame-origins';
 import JSZip from 'jszip';
 import { MAX_PLUGIN_SIZE, MAX_THEME_SIZE, ALL_PERMISSIONS, ALLOWED_PLUGIN_FILES } from '@/lib/plugin-types';
 import { sanitizeThemeCSS, validateThemeCSSSafety } from '@/lib/theme-loader';
@@ -17,7 +21,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 +79,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) {
@@ -196,6 +200,26 @@ export async function POST(request: NextRequest) {
 
       const code = await jsFile.async('string');
 
+      // Block plugins with dangerous JS patterns
+      const DANGEROUS_JS_PATTERNS = [
+        { pattern: /\beval\s*\(/g, label: 'eval()' },
+        { pattern: /\bnew\s+Function\s*\(/g, label: 'new Function()' },
+        { pattern: /document\.cookie/g, label: 'document.cookie' },
+        { pattern: /document\.write/g, label: 'document.write' },
+        { pattern: /innerHTML\s*=/g, label: 'innerHTML assignment' },
+      ];
+      const dangerousFindings: string[] = [];
+      for (const { pattern, label } of DANGEROUS_JS_PATTERNS) {
+        if (pattern.test(code)) dangerousFindings.push(label);
+        pattern.lastIndex = 0;
+      }
+      if (dangerousFindings.length > 0) {
+        return NextResponse.json(
+          { error: `Plugin rejected: contains ${dangerousFindings.join(', ')}. These patterns are not allowed for security reasons.` },
+          { status: 400 },
+        );
+      }
+
       // Validate permissions
       const permissions = Array.isArray(manifest.permissions) ? manifest.permissions as string[] : [];
       const validPerms = new Set(ALL_PERMISSIONS as readonly string[]);
@@ -206,6 +230,22 @@ export async function POST(request: NextRequest) {
         warnings.push(`Unknown permissions: ${unknownPerms.join(', ')}`);
       }
 
+      // Plugins may declare iframe origins they need for embedded content.
+      // Anything that doesn't pass strict origin validation is silently
+      // dropped — the plugin still installs, but those origins are not
+      // added to the host CSP.
+      const declaredFrameOrigins = sanitizeFrameOrigins(manifest.frameOrigins);
+      const droppedFrameOrigins = Array.isArray(manifest.frameOrigins)
+        ? (manifest.frameOrigins as unknown[]).filter(
+            (v) => typeof v !== 'string' || !declaredFrameOrigins.includes(v),
+          )
+        : [];
+      if (droppedFrameOrigins.length > 0) {
+        warnings.push(
+          `Ignored invalid frameOrigins: ${droppedFrameOrigins.join(', ')}`,
+        );
+      }
+
       const plugin: ServerPlugin = {
         id: (manifest.id as string) || slug,
         name: (manifest.name as string) || slug,
@@ -218,10 +258,14 @@ export async function POST(request: NextRequest) {
         enabled: true,
         installedAt: now,
         updatedAt: now,
+        ...(declaredFrameOrigins.length > 0
+          ? { frameOrigins: declaredFrameOrigins }
+          : {}),
       };
 
       await savePlugin(plugin, code);
-      await auditLog('marketplace.install_plugin', { id: plugin.id, name: plugin.name, version: plugin.version, slug }, ip);
+      invalidateFrameOriginsCache();
+      await auditLog('marketplace.install_plugin', { id: plugin.id, name: plugin.name, version: plugin.version, slug, frameOrigins: declaredFrameOrigins }, ip);
 
       return NextResponse.json({ success: true, plugin, warnings });
     }

app/api/admin/oauth/setup/route.ts

@@ -0,0 +1,253 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { randomBytes } from 'node:crypto';
+import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+import { configManager } from '@/lib/admin/config-manager';
+import { auditLog } from '@/lib/admin/audit';
+import { logger } from '@/lib/logger';
+import { locales as ALL_LOCALES } from '@/i18n/routing';
+
+const CLIENT_ID = 'bulwark-webmail';
+const CLIENT_DESCRIPTION = 'Bulwark Webmail (auto-configured)';
+const JMAP_TIMEOUT_MS = 10_000;
+
+interface JmapMethodCall {
+  using: string[];
+  methodCalls: Array<[string, Record<string, unknown>, string]>;
+}
+
+interface JmapMethodResponse {
+  methodResponses?: Array<[string, Record<string, unknown>, string]>;
+}
+
+async function fetchWithTimeout(url: string, init: Parameters<typeof fetch>[1]): Promise<Response> {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), JMAP_TIMEOUT_MS);
+  try {
+    return await fetch(url, { ...init, signal: controller.signal });
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+async function jmapCall(
+  serverUrl: string,
+  authHeader: string,
+  body: JmapMethodCall,
+): Promise<JmapMethodResponse> {
+  const res = await fetchWithTimeout(`${serverUrl}/jmap/`, {
+    method: 'POST',
+    headers: { 'Authorization': authHeader, 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => '');
+    throw new Error(`JMAP HTTP ${res.status} ${text.slice(0, 200)}`);
+  }
+  return res.json() as Promise<JmapMethodResponse>;
+}
+
+async function getStalwartAccountId(
+  serverUrl: string,
+  authHeader: string,
+): Promise<string | null> {
+  const res = await fetchWithTimeout(`${serverUrl}/.well-known/jmap`, {
+    method: 'GET',
+    headers: { 'Authorization': authHeader },
+  });
+  if (!res.ok) return null;
+  const session = await res.json() as { primaryAccounts?: Record<string, string> };
+  return session.primaryAccounts?.['urn:stalwart:jmap']
+    ?? session.primaryAccounts?.['urn:ietf:params:jmap:mail']
+    ?? Object.values(session.primaryAccounts ?? {})[0]
+    ?? null;
+}
+
+function buildRedirectUris(origin: string, localeList: readonly string[]): Record<string, true> {
+  const out: Record<string, true> = {};
+  for (const loc of localeList) {
+    out[`${origin}/${loc}/auth/callback`] = true;
+  }
+  return out;
+}
+
+interface SetupRequestBody {
+  origin?: string;
+  issuerUrl?: string;
+  locales?: string[];
+  oauthOnly?: boolean;
+}
+
+function isValidOriginUrl(value: string): boolean {
+  return /^https?:\/\/[^/]+$/.test(value);
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const auth = await requireAdminAuth();
+    if ('error' in auth) return auth.error;
+
+    const ip = getClientIP(request);
+    const creds = await getStalwartCredentials(request);
+    if (!creds) {
+      return NextResponse.json(
+        { error: 'No Stalwart session available. Sign in to your mail account in another tab and retry.' },
+        { status: 400 },
+      );
+    }
+
+    const body = await request.json() as SetupRequestBody;
+    const origin = (body.origin ?? '').trim().replace(/\/+$/, '');
+    if (!isValidOriginUrl(origin)) {
+      return NextResponse.json(
+        { error: 'Webmail origin must be a URL like "https://webmail.example.com" with no path.' },
+        { status: 400 },
+      );
+    }
+    const issuerUrl = (body.issuerUrl ?? origin).trim().replace(/\/+$/, '');
+    if (!isValidOriginUrl(issuerUrl)) {
+      return NextResponse.json(
+        { error: 'Stalwart issuer URL must be a URL like "https://mail.example.com" with no path.' },
+        { status: 400 },
+      );
+    }
+    const localeList = Array.isArray(body.locales) && body.locales.length > 0
+      ? body.locales.filter(l => typeof l === 'string' && /^[a-z]{2,5}(-[A-Za-z0-9]+)*$/.test(l))
+      : Array.from(ALL_LOCALES);
+    if (localeList.length === 0) {
+      return NextResponse.json({ error: 'No valid locales supplied.' }, { status: 400 });
+    }
+    const oauthOnly = body.oauthOnly === true;
+
+    const accountId = await getStalwartAccountId(creds.serverUrl, creds.authHeader);
+    if (!accountId) {
+      return NextResponse.json(
+        { error: 'Could not resolve Stalwart account from JMAP session.' },
+        { status: 502 },
+      );
+    }
+
+    const queryRes = await jmapCall(creds.serverUrl, creds.authHeader, {
+      using: ['urn:ietf:params:jmap:core', 'urn:stalwart:jmap'],
+      methodCalls: [[
+        'x:OAuthClient/query',
+        { accountId, filter: { clientId: CLIENT_ID } },
+        '0',
+      ]],
+    });
+
+    const queryEntry = queryRes.methodResponses?.[0];
+    if (!queryEntry || queryEntry[0] === 'error') {
+      return NextResponse.json({
+        error: 'Stalwart denied OAuthClient/query — your Stalwart account likely lacks admin permissions.',
+        detail: queryEntry?.[1],
+      }, { status: 403 });
+    }
+    const existingIds = (queryEntry[1].ids as string[] | undefined) ?? [];
+
+    const secret = randomBytes(32).toString('base64url');
+    const redirectUris = buildRedirectUris(origin, localeList);
+
+    let setArgs: Record<string, unknown>;
+    let action: 'created' | 'updated';
+    if (existingIds.length > 0) {
+      const targetId = existingIds[0];
+      action = 'updated';
+      setArgs = {
+        accountId,
+        update: {
+          [targetId]: {
+            secret,
+            redirectUris,
+            description: CLIENT_DESCRIPTION,
+          },
+        },
+      };
+    } else {
+      action = 'created';
+      setArgs = {
+        accountId,
+        create: {
+          new: {
+            clientId: CLIENT_ID,
+            description: CLIENT_DESCRIPTION,
+            secret,
+            redirectUris,
+            contacts: { [creds.username]: true },
+          },
+        },
+      };
+    }
+
+    const setRes = await jmapCall(creds.serverUrl, creds.authHeader, {
+      using: ['urn:ietf:params:jmap:core', 'urn:stalwart:jmap'],
+      methodCalls: [['x:OAuthClient/set', setArgs, '0']],
+    });
+
+    const setEntry = setRes.methodResponses?.[0];
+    if (!setEntry || setEntry[0] === 'error') {
+      return NextResponse.json({
+        error: 'Stalwart denied OAuthClient/set — admin permissions required.',
+        detail: setEntry?.[1],
+      }, { status: 403 });
+    }
+    const setBody = setEntry[1] as {
+      notCreated?: Record<string, unknown>;
+      notUpdated?: Record<string, unknown>;
+    };
+    if (setBody.notCreated && Object.keys(setBody.notCreated).length > 0) {
+      return NextResponse.json(
+        { error: 'Stalwart refused to create the OAuth client.', detail: setBody.notCreated },
+        { status: 502 },
+      );
+    }
+    if (setBody.notUpdated && Object.keys(setBody.notUpdated).length > 0) {
+      return NextResponse.json(
+        { error: 'Stalwart refused to update the OAuth client.', detail: setBody.notUpdated },
+        { status: 502 },
+      );
+    }
+
+    await configManager.ensureLoaded();
+    const updates: Record<string, unknown> = {
+      oauthEnabled: true,
+      oauthClientId: CLIENT_ID,
+      oauthClientSecret: secret,
+      oauthIssuerUrl: issuerUrl,
+    };
+    if (oauthOnly) updates.oauthOnly = true;
+    await configManager.setAdminConfig(updates);
+
+    await auditLog('admin.oauth_setup', {
+      action,
+      clientId: CLIENT_ID,
+      origin,
+      issuer: issuerUrl,
+      redirectUriCount: localeList.length,
+      oauthOnly,
+    }, ip);
+
+    logger.info('Admin OAuth setup', {
+      action,
+      clientId: CLIENT_ID,
+      origin,
+      issuer: issuerUrl,
+      locales: localeList.length,
+    });
+
+    return NextResponse.json({
+      ok: true,
+      action,
+      clientId: CLIENT_ID,
+      origin,
+      issuerUrl,
+      redirectUriCount: localeList.length,
+    });
+  } catch (error) {
+    logger.error('Admin OAuth setup error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Internal server error' },
+      { status: 500 },
+    );
+  }
+}

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

@@ -0,0 +1,120 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getPlugin } from '@/lib/admin/plugin-registry';
+import { getPluginConfig, setPluginConfig, deletePluginConfigKey } from '@/lib/admin/plugin-config';
+import { requireAdminAuth } from '@/lib/admin/session';
+
+/**
+ * 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.
+ */
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  try {
+    const { id } = await params;
+
+    if (!/^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(id)) {
+      return NextResponse.json({ error: 'Invalid plugin ID' }, { status: 400 });
+    }
+
+    const plugin = await getPlugin(id);
+    if (!plugin) {
+      return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
+    }
+
+    const config = await getPluginConfig(id);
+    return NextResponse.json(config, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch {
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * PUT /api/admin/plugins/[id]/config - Set a config key
+ *
+ * Body: { key: string, value: unknown }
+ * Requires admin authentication (checked via admin session).
+ */
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const { id } = await params;
+
+    if (!/^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(id)) {
+      return NextResponse.json({ error: 'Invalid plugin ID' }, { status: 400 });
+    }
+
+    const plugin = await getPlugin(id);
+    if (!plugin) {
+      return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
+    }
+
+    let body: { key?: string; value?: unknown };
+    try {
+      body = await request.json();
+    } catch {
+      return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
+    }
+
+    if (!body.key || typeof body.key !== 'string') {
+      return NextResponse.json({ error: 'key is required and must be a string' }, { status: 400 });
+    }
+
+    // Validate key format (alphanumeric, hyphens, underscores, dots)
+    if (!/^[a-zA-Z0-9._-]+$/.test(body.key)) {
+      return NextResponse.json({ error: 'Invalid key format' }, { status: 400 });
+    }
+
+    await setPluginConfig(id, body.key, body.value);
+    return NextResponse.json({ ok: true });
+  } catch {
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * DELETE /api/admin/plugins/[id]/config - Delete a config key
+ *
+ * Body: { key: string }
+ */
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const { id } = await params;
+
+    if (!/^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(id)) {
+      return NextResponse.json({ error: 'Invalid plugin ID' }, { status: 400 });
+    }
+
+    let body: { key?: string };
+    try {
+      body = await request.json();
+    } catch {
+      return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
+    }
+
+    if (!body.key || typeof body.key !== 'string') {
+      return NextResponse.json({ error: 'key is required' }, { status: 400 });
+    }
+
+    await deletePluginConfigKey(id, body.key);
+    return NextResponse.json({ ok: true });
+  } catch {
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/plugins/route.ts

@@ -8,6 +8,10 @@ import {
   deletePlugin as removePlugin,
   type ServerPlugin,
 } from '@/lib/admin/plugin-registry';
+import {
+  sanitizeFrameOrigins,
+  invalidateFrameOriginsCache,
+} from '@/lib/admin/csp-frame-origins';
 
 // Server-side extraction using the same validation logic
 // ZIP parsing needs to happen on the server for admin-uploaded plugins
@@ -23,7 +27,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 +45,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 {
@@ -139,12 +143,20 @@ export async function POST(request: NextRequest) {
     }
     const code = await entryFile.async('string');
 
-    // Security warnings (logged but not blocking for admin)
+    // Security: block plugins containing dangerous JS patterns
     const warnings: string[] = [];
     for (const { pattern, label } of SUSPICIOUS_JS_PATTERNS) {
       if (pattern.test(code)) warnings.push(`Contains ${label}`);
       pattern.lastIndex = 0;
     }
+    if (warnings.length > 0) {
+      return NextResponse.json(
+        { error: `Plugin rejected: ${warnings.join(', ')}. These patterns are not allowed for security reasons.` },
+        { status: 400 },
+      );
+    }
+
+    const declaredFrameOrigins = sanitizeFrameOrigins(manifest.frameOrigins);
 
     const now = new Date().toISOString();
     const plugin: ServerPlugin = {
@@ -157,14 +169,21 @@ export async function POST(request: NextRequest) {
       permissions: (manifest.permissions as string[]) || [],
       entrypoint: manifest.entrypoint as string,
       enabled: true,
+      ...(manifest.configSchema && typeof manifest.configSchema === 'object'
+        ? { configSchema: manifest.configSchema as ServerPlugin['configSchema'] }
+        : {}),
+      ...(declaredFrameOrigins.length > 0
+        ? { frameOrigins: declaredFrameOrigins }
+        : {}),
       installedAt: now,
       updatedAt: now,
     };
 
     await savePlugin(plugin, code);
-    await auditLog('plugin.install', { id: plugin.id, name: plugin.name, version: plugin.version, warnings }, ip);
+    invalidateFrameOriginsCache();
+    await auditLog('plugin.install', { id: plugin.id, name: plugin.name, version: plugin.version, frameOrigins: declaredFrameOrigins }, ip);
 
-    return NextResponse.json({ plugin, warnings });
+    return NextResponse.json({ plugin });
   } catch (error) {
     logger.error('Plugin install error', { error: error instanceof Error ? error.message : 'Unknown error' });
     return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
@@ -172,7 +191,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) {
@@ -200,6 +219,11 @@ export async function PATCH(request: NextRequest) {
       return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
     }
 
+    // Enable/disable changes the set of plugins contributing frame origins.
+    if (typeof updates.enabled === 'boolean' || typeof updates.forceEnabled === 'boolean') {
+      invalidateFrameOriginsCache();
+    }
+
     await auditLog('plugin.update', { id, ...updates }, ip);
     return NextResponse.json({ plugin: updated });
   } catch (error) {
@@ -209,7 +233,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) {
@@ -229,6 +253,7 @@ export async function DELETE(request: NextRequest) {
       return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
     }
 
+    invalidateFrameOriginsCache();
     await auditLog('plugin.delete', { id }, ip);
     return NextResponse.json({ success: true });
   } catch (error) {

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

@@ -1,41 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { logger } from '@/lib/logger';
-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.
- */
-export async function GET(request: NextRequest) {
-  try {
-    const creds = await getStalwartCredentials(request);
-    if (!creds) {
-      return NextResponse.json({ isStalwartAdmin: false }, {
-        headers: { 'Cache-Control': 'no-store' },
-      });
-    }
-
-    // Probe an admin-only endpoint: listing principals requires admin privileges.
-    // Use limit=1 to minimize payload.
-    const url = `${creds.apiUrl}/api/principal?limit=1`;
-    const response = await fetch(url, {
-      method: 'GET',
-      headers: { 'Authorization': creds.authHeader },
-    });
-
-    const isStalwartAdmin = response.ok;
-    logger.info('Stalwart admin check', { username: creds.username, status: response.status, isStalwartAdmin });
-
-    return NextResponse.json({ isStalwartAdmin }, {
-      headers: { 'Cache-Control': 'no-store' },
-    });
-  } catch (error) {
-    logger.error('Stalwart admin check error', {
-      error: error instanceof Error ? error.message : 'Unknown',
-    });
-    return NextResponse.json({ isStalwartAdmin: false }, {
-      headers: { 'Cache-Control': 'no-store' },
-    });
-  }
-}

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

@@ -4,6 +4,12 @@ import { logger } from '@/lib/logger';
 import { encryptSession, decryptSession } from '@/lib/auth/crypto';
 import { SESSION_COOKIE_MAX_AGE, sessionCookieName } from '@/lib/auth/session-cookie';
 import { getCookieOptions } from '@/lib/oauth/cookie-config';
+import { JmapAuthVerificationError, verifyJmapAuth } from '@/lib/auth/verify-jmap-auth';
+import {
+  clearStalwartAuthContextInStore,
+  setStalwartAuthContextInStore,
+} from '@/lib/stalwart/auth-context';
+import { configManager } from '@/lib/admin/config-manager';
 
 const COOKIE_OPTIONS = {
   ...getCookieOptions(),
@@ -20,7 +26,9 @@ function getSlot(request: NextRequest): number {
 
 export async function POST(request: NextRequest) {
   try {
-    if (process.env.OAUTH_ENABLED === 'true' && process.env.OAUTH_ONLY === 'true') {
+    const oauthEnabled = configManager.get<boolean>('oauthEnabled', false);
+    const oauthOnly = configManager.get<boolean>('oauthOnly', false);
+    if (oauthEnabled && oauthOnly) {
       return NextResponse.json({ error: 'Basic authentication is disabled' }, { status: 403 });
     }
 
@@ -31,12 +39,23 @@ export async function POST(request: NextRequest) {
 
     const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot <= 4 ? bodySlot : getSlot(request);
     const cookieName = sessionCookieName(slot);
-    const token = encryptSession(serverUrl, username, password);
+    const authHeader = `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`;
+    const normalizedServerUrl = await verifyJmapAuth(serverUrl, authHeader);
+    const token = encryptSession(normalizedServerUrl, username, password);
     const cookieStore = await cookies();
     cookieStore.set(cookieName, token, COOKIE_OPTIONS);
+    setStalwartAuthContextInStore(cookieStore, slot, {
+      serverUrl: normalizedServerUrl,
+      username,
+      authHeader,
+    });
 
     return NextResponse.json({ ok: true });
   } catch (error) {
+    if (error instanceof JmapAuthVerificationError) {
+      return NextResponse.json({ error: error.message }, { status: error.status });
+    }
+
     logger.error('Session store error', { error: error instanceof Error ? error.message : 'Unknown error' });
     return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
   }
@@ -56,9 +75,66 @@ export async function GET(request: NextRequest) {
     const credentials = decryptSession(token);
     if (!credentials) {
       cookieStore.delete(cookieName);
+      clearStalwartAuthContextInStore(cookieStore, slot);
       return NextResponse.json({ error: 'Invalid session' }, { status: 401 });
     }
 
+    setStalwartAuthContextInStore(cookieStore, slot, {
+      serverUrl: credentials.serverUrl,
+      username: credentials.username,
+      authHeader: `Basic ${Buffer.from(`${credentials.username}:${credentials.password}`).toString('base64')}`,
+    });
+
+    // Only return non-sensitive fields. Use PUT to retrieve full credentials.
+    const { serverUrl, username } = credentials;
+    return NextResponse.json(
+      { serverUrl, username },
+      { headers: { 'Cache-Control': 'no-store, no-cache, must-revalidate' } },
+    );
+  } catch (error) {
+    logger.error('Session read error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * 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.
+ */
+export async function PUT(request: NextRequest) {
+  try {
+    // Require all Sec-Fetch-* headers to match a same-origin fetch() call.
+    // Browsers set these automatically and they cannot be overridden by JS.
+    const secFetchSite = request.headers.get('sec-fetch-site');
+    const secFetchMode = request.headers.get('sec-fetch-mode');
+    const secFetchDest = request.headers.get('sec-fetch-dest');
+    if (secFetchSite !== 'same-origin' || secFetchMode !== 'cors' || secFetchDest !== 'empty') {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
+    }
+
+    const slot = getSlot(request);
+    const cookieName = sessionCookieName(slot);
+    const cookieStore = await cookies();
+    const token = cookieStore.get(cookieName)?.value;
+
+    if (!token) {
+      return NextResponse.json({ error: 'No session' }, { status: 401 });
+    }
+
+    const credentials = decryptSession(token);
+    if (!credentials) {
+      cookieStore.delete(cookieName);
+      clearStalwartAuthContextInStore(cookieStore, slot);
+      return NextResponse.json({ error: 'Invalid session' }, { status: 401 });
+    }
+
+    setStalwartAuthContextInStore(cookieStore, slot, {
+      serverUrl: credentials.serverUrl,
+      username: credentials.username,
+      authHeader: `Basic ${Buffer.from(`${credentials.username}:${credentials.password}`).toString('base64')}`,
+    });
+
     return NextResponse.json(credentials, {
       headers: { 'Cache-Control': 'no-store, no-cache, must-revalidate' },
     });
@@ -77,10 +153,12 @@ export async function DELETE(request: NextRequest) {
       // Delete all session cookies (slots 0-4)
       for (let i = 0; i <= 4; i++) {
         cookieStore.delete(sessionCookieName(i));
+        clearStalwartAuthContextInStore(cookieStore, i);
       }
     } else {
       const slot = getSlot(request);
       cookieStore.delete(sessionCookieName(slot));
+      clearStalwartAuthContextInStore(cookieStore, slot);
     }
 
     return NextResponse.json({ ok: true });

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/stalwart-context/route.ts

@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { logger } from '@/lib/logger';
+import { JmapAuthVerificationError, verifyJmapAuth } from '@/lib/auth/verify-jmap-auth';
+import { setStalwartAuthContext } from '@/lib/stalwart/auth-context';
+
+function getSlot(request: NextRequest, bodySlot: unknown): number {
+  if (typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot <= 4) {
+    return bodySlot;
+  }
+
+  const raw = request.nextUrl.searchParams.get('slot');
+  if (raw === null) return 0;
+
+  const slot = parseInt(raw, 10);
+  return Number.isNaN(slot) || slot < 0 || slot > 4 ? 0 : slot;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { serverUrl, username, authHeader, slot: bodySlot } = await request.json();
+
+    if (!serverUrl || !username || !authHeader) {
+      return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
+    }
+
+    const slot = getSlot(request, bodySlot);
+    const normalizedServerUrl = await verifyJmapAuth(serverUrl, authHeader);
+
+    await setStalwartAuthContext(slot, {
+      serverUrl: normalizedServerUrl,
+      username,
+      authHeader,
+    });
+
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    if (error instanceof JmapAuthVerificationError) {
+      return NextResponse.json({ error: error.message }, { status: error.status });
+    }
+
+    logger.error('Failed to store Stalwart auth context', {
+      error: error instanceof Error ? error.message : 'Unknown error',
+    });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

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

@@ -0,0 +1,190 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+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';
+import { configManager } from '@/lib/admin/config-manager';
+
+/**
+ * Exchange basic auth credentials (with TOTP appended) for OAuth tokens.
+ *
+ * This allows 2FA users who log in with basic auth + TOTP to upgrade
+ * to token-based auth, avoiding session expiry when the TOTP rotates.
+ *
+ * Tries three strategies:
+ * 1. ROPC grant with client_id (if OAUTH_CLIENT_ID is set)
+ * 2. ROPC grant without client_id
+ * 3. ROPC grant authenticated via Basic Auth header (Stalwart-style)
+ */
+
+async function tryTokenRequest(
+  tokenEndpoint: string,
+  params: URLSearchParams,
+  extraHeaders?: Record<string, string>,
+): Promise<{ ok: true; tokens: { access_token: string; expires_in?: number; refresh_token?: string } } | { ok: false; status: number; error: string }> {
+  try {
+    const headers: Record<string, string> = { 'Content-Type': 'application/x-www-form-urlencoded', ...extraHeaders };
+    const response = await fetch(tokenEndpoint, {
+      method: 'POST',
+      headers,
+      body: params.toString(),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return { ok: false, status: response.status, error: errorText.substring(0, 500) };
+    }
+
+    const tokens = await response.json();
+    if (!tokens.access_token) {
+      return { ok: false, status: 502, error: 'Response missing access_token' };
+    }
+
+    return { ok: true, tokens };
+  } catch (err) {
+    return { ok: false, status: 0, error: err instanceof Error ? err.message : String(err) };
+  }
+}
+
+async function findTokenEndpoint(serverUrl: string): Promise<string | null> {
+  // 1. Try OAuth discovery
+  const metadata = await discoverOAuth(serverUrl);
+  if (metadata?.token_endpoint) return metadata.token_endpoint;
+
+  // 2. Try common Stalwart token endpoint paths directly
+  const candidates = [
+    `${serverUrl}/auth/token`,
+    `${serverUrl}/api/oauth/token`,
+  ];
+
+  for (const url of candidates) {
+    try {
+      // A POST with no body should return 400 (bad request) rather than 404 if the endpoint exists
+      const probe = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'grant_type=probe' });
+      if (probe.status !== 404 && probe.status !== 405) {
+        return url;
+      }
+    } catch {
+      // Network error - endpoint not reachable
+    }
+  }
+
+  return null;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { serverUrl, username, password, slot: bodySlot } = await request.json();
+
+    if (!serverUrl || !username || !password) {
+      return NextResponse.json({ error: 'Missing required parameters' }, { status: 400 });
+    }
+
+    const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot <= 4 ? bodySlot : 0;
+
+    // Use the server-side JMAP_SERVER_URL if set (may differ from the
+    // public URL the browser uses, e.g. inside Docker).
+    const internalServerUrl = process.env.JMAP_SERVER_URL || process.env.NEXT_PUBLIC_JMAP_SERVER_URL || serverUrl;
+
+    const tokenEndpoint = await findTokenEndpoint(internalServerUrl);
+    if (!tokenEndpoint) {
+      // Also try with the client-provided URL in case the internal one differs
+      const clientEndpoint = internalServerUrl !== serverUrl ? await findTokenEndpoint(serverUrl) : null;
+      if (!clientEndpoint) {
+        logger.warn('TOTP token exchange: no token endpoint found', { serverUrl, internalServerUrl });
+        return NextResponse.json({ error: 'no_token_endpoint', detail: 'Could not discover OAuth token endpoint on the mail server' }, { status: 404 });
+      }
+      return await attemptAllStrategies(clientEndpoint, username, password, slot);
+    }
+
+    return await attemptAllStrategies(tokenEndpoint, username, password, slot);
+  } catch (error) {
+    logger.error('TOTP token exchange error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+async function attemptAllStrategies(
+  tokenEndpoint: string,
+  username: string,
+  password: string,
+  slot: number,
+): Promise<NextResponse> {
+  logger.info('TOTP token exchange: found token endpoint', { tokenEndpoint });
+
+  const clientId = configManager.get<string>('oauthClientId', '') || process.env.OAUTH_CLIENT_ID;
+  const clientSecret = configManager.get<string>('oauthClientSecret', '') || 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 }> = [];
+
+  // Strategy 1: ROPC with client_id (if configured)
+  if (clientId) {
+    const params = new URLSearchParams({ grant_type: 'password', username, password, client_id: clientId });
+    if (clientSecret) params.set('client_secret', clientSecret);
+    const result = await tryTokenRequest(tokenEndpoint, params);
+    if (result.ok) {
+      logger.info('TOTP token exchange succeeded (ROPC with client_id)');
+      return await storeAndRespond(result.tokens, slot);
+    }
+    attempts.push({ strategy: 'ROPC with client_id', error: result.error });
+  }
+
+  // Strategy 2: ROPC without client_id
+  {
+    const params = new URLSearchParams({ grant_type: 'password', username, password });
+    const result = await tryTokenRequest(tokenEndpoint, params);
+    if (result.ok) {
+      logger.info('TOTP token exchange succeeded (ROPC without client_id)');
+      return await storeAndRespond(result.tokens, slot);
+    }
+    attempts.push({ strategy: 'ROPC without client_id', error: result.error });
+  }
+
+  // Strategy 3: Basic Auth header on token endpoint (some servers accept this)
+  {
+    const params = new URLSearchParams({ grant_type: 'password' });
+    const result = await tryTokenRequest(tokenEndpoint, params, { 'Authorization': basicAuth });
+    if (result.ok) {
+      logger.info('TOTP token exchange succeeded (Basic Auth header)');
+      return await storeAndRespond(result.tokens, slot);
+    }
+    attempts.push({ strategy: 'Basic Auth header', error: result.error });
+  }
+
+  // Strategy 4: client_credentials with Basic Auth (last resort)
+  {
+    const params = new URLSearchParams({ grant_type: 'client_credentials' });
+    const result = await tryTokenRequest(tokenEndpoint, params, { 'Authorization': basicAuth });
+    if (result.ok) {
+      logger.info('TOTP token exchange succeeded (client_credentials + Basic Auth)');
+      return await storeAndRespond(result.tokens, slot);
+    }
+    attempts.push({ strategy: 'client_credentials + Basic Auth', error: result.error });
+  }
+
+  logger.warn('TOTP token exchange: all strategies failed', { attempts });
+  return NextResponse.json({
+    error: 'token_exchange_failed',
+    detail: 'All token exchange strategies failed',
+    attempts,
+  }, { status: 502 });
+}
+
+async function storeAndRespond(
+  tokens: { access_token: string; expires_in?: number; refresh_token?: string },
+  slot: number,
+): Promise<NextResponse> {
+  if (tokens.refresh_token) {
+    const cookieName = refreshTokenCookieName(slot);
+    const cookieStore = await cookies();
+    cookieStore.set(cookieName, tokens.refresh_token, getCookieOptions());
+  }
+
+  return NextResponse.json({
+    access_token: tokens.access_token,
+    expires_in: tokens.expires_in || 3600,
+    has_refresh_token: !!tokens.refresh_token,
+  });
+}

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,
+    rememberMeEnabled: !!process.env.SESSION_SECRET || !!readFileEnv(process.env.SESSION_SECRET_FILE),
-    settingsSyncEnabled: configManager.get<boolean>('settingsSyncEnabled', false) && !!process.env.SESSION_SECRET,
+    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'),
@@ -47,6 +48,7 @@ export async function GET() {
     loginPrivacyPolicyUrl: configManager.get<string>('loginPrivacyPolicyUrl', ''),
     loginWebsiteUrl: configManager.get<string>('loginWebsiteUrl', ''),
     demoMode: configManager.get<boolean>('demoMode', false),
+    allowCustomJmapEndpoint: configManager.get<boolean>('allowCustomJmapEndpoint', false),
     autoSsoEnabled: configManager.get<boolean>('autoSsoEnabled', false),
     embeddedMode: !!allowedFrameAncestors && allowedFrameAncestors !== "'none'",
     parentOrigin: configManager.get<string>('parentOrigin', ''),

app/api/fetch-ical/route.ts

@@ -1,47 +1,9 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { isPublicHttpUrl } from '@/lib/security/url-guard';
 
 const MAX_RESPONSE_SIZE = 10 * 1024 * 1024; // 10MB
 const FETCH_TIMEOUT_MS = 15000;
 
-function isValidExternalUrl(urlString: string): boolean {
-  let url: URL;
-  try {
-    url = new URL(urlString);
-  } catch {
-    return false;
-  }
-
-  if (url.protocol !== 'https:' && url.protocol !== 'http:') {
-    return false;
-  }
-
-  const hostname = url.hostname.toLowerCase();
-
-  // Block private/internal hostnames
-  if (
-    hostname === 'localhost' ||
-    hostname === '127.0.0.1' ||
-    hostname === '::1' ||
-    hostname === '0.0.0.0' ||
-    hostname.endsWith('.local') ||
-    hostname.endsWith('.internal') ||
-    hostname.endsWith('.arpa') ||
-    hostname.startsWith('10.') ||
-    hostname.startsWith('192.168.') ||
-    hostname.startsWith('169.254.') ||
-    /^172\.(1[6-9]|2\d|3[01])\./.test(hostname)
-  ) {
-    return false;
-  }
-
-  // Block URLs with credentials
-  if (url.username || url.password) {
-    return false;
-  }
-
-  return true;
-}
-
 export async function POST(request: NextRequest) {
   let body: { url?: string };
   try {
@@ -56,7 +18,7 @@ export async function POST(request: NextRequest) {
     return NextResponse.json({ error: 'URL is required' }, { status: 400 });
   }
 
-  if (!isValidExternalUrl(url)) {
+  if (!(await isPublicHttpUrl(url))) {
     return NextResponse.json({ error: 'Invalid or disallowed URL' }, { status: 400 });
   }
 
@@ -64,20 +26,42 @@ export async function POST(request: NextRequest) {
     const controller = new AbortController();
     const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
 
-    const response = await fetch(url, {
+    const MAX_REDIRECTS = 5;
-      signal: controller.signal,
+    let currentUrl = url;
-      headers: {
+    let response: Response | undefined;
-        'Accept': 'text/calendar, application/ics, text/plain, */*',
+
-        'User-Agent': 'JMAP-Webmail/1.0 Calendar-Fetcher',
+    for (let i = 0; i <= MAX_REDIRECTS; i++) {
-      },
+      if (!(await isPublicHttpUrl(currentUrl))) {
-      redirect: 'follow',
+        clearTimeout(timeout);
-    });
+        return NextResponse.json({ error: 'Redirect to disallowed URL' }, { status: 400 });
+      }
+
+      response = await fetch(currentUrl, {
+        signal: controller.signal,
+        headers: {
+          'Accept': 'text/calendar, application/ics, text/plain, */*',
+          'User-Agent': 'JMAP-Webmail/1.0 Calendar-Fetcher',
+        },
+        redirect: 'manual',
+      });
+
+      if (response.status >= 300 && response.status < 400) {
+        const location = response.headers.get('location');
+        if (!location) {
+          clearTimeout(timeout);
+          return NextResponse.json({ error: 'Redirect without Location header' }, { status: 502 });
+        }
+        currentUrl = new URL(location, currentUrl).toString();
+        continue;
+      }
+      break;
+    }
 
     clearTimeout(timeout);
 
-    if (!response.ok) {
+    if (!response || !response.ok) {
       return NextResponse.json(
-        { error: `Remote server returned ${response.status}` },
+        { error: `Remote server returned ${response?.status ?? 'unknown'}` },
         { status: 502 }
       );
     }

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

@@ -3,8 +3,10 @@ import { cookies } from 'next/headers';
 import { logger } from '@/lib/logger';
 import { decryptSession } from '@/lib/auth/crypto';
 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;
@@ -47,33 +49,43 @@ 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. */
+function normalizeUrl(url: string): string {
+  return url.replace(/\/+$/, '');
 }
 
 /**
  * Verify identity against session cookies across all account slots.
  * With multi-account, the requesting account may be on any slot (0-4).
- * Returns true if any slot matches OR if no session cookies exist at all.
+ * Checks both basic-auth session cookies and stalwart auth context cookies
+ * (used by OAuth/SSO and TOTP-upgraded sessions).
+ * Returns true only if a matching cookie is found.
  */
 async function verifyIdentity(username: string, serverUrl: string): Promise<boolean> {
   const cookieStore = await cookies();
-  let hasAnyCookie = false;
+  const normalizedServerUrl = normalizeUrl(serverUrl);
 
   for (let slot = 0; slot <= 4; slot++) {
+    // Check basic-auth session cookie
     const token = cookieStore.get(sessionCookieName(slot))?.value;
-    if (!token) continue;
+    if (token) {
-    hasAnyCookie = true;
+      const session = decryptSession(token);
+      if (session && session.username === username && normalizeUrl(session.serverUrl) === normalizedServerUrl) {
+        return true;
+      }
+    }
 
-    const session = decryptSession(token);
+    // Check stalwart auth context cookie (set for all auth modes)
-    if (session && session.username === username && session.serverUrl === serverUrl) {
+    const ctx = readStalwartAuthContextFromStore(cookieStore, slot);
-      return true; // Found a matching slot
+    if (ctx && ctx.username === username && normalizeUrl(ctx.serverUrl) === normalizedServerUrl) {
+      return true;
     }
   }
 
-  // No cookies at all → can't verify, allow (same-origin protection applies)
+  // No matching session found (or no cookies at all) → reject
-  if (!hasAnyCookie) return true;
-
-  // Cookies exist but none matched → identity mismatch
   return false;
 }
 
@@ -123,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/api/webdav/route.ts

@@ -4,6 +4,32 @@ import { getStalwartCredentials } from '@/lib/stalwart/credentials';
 
 const ALLOWED_METHODS = new Set(['PROPFIND', 'MKCOL', 'GET', 'PUT', 'DELETE', 'MOVE', 'COPY']);
 
+function normalizeDavRelativePath(rawPath: string): string {
+  const sanitized = rawPath.replace(/\\/g, '/').split(/[?#]/, 1)[0] ?? '';
+  const segments = sanitized.split('/').filter(Boolean);
+
+  return segments.map((segment) => {
+    let decoded: string;
+    try {
+      decoded = decodeURIComponent(segment);
+    } catch {
+      throw new Error('Invalid WebDAV path encoding');
+    }
+
+    if (decoded === '.' || decoded === '..' || decoded.includes('/') || decoded.includes('\\') || decoded.includes('\0')) {
+      throw new Error('Invalid WebDAV path segment');
+    }
+
+    return encodeURIComponent(decoded);
+  }).join('/');
+}
+
+function buildDavTargetUrl(baseUrl: string, username: string, rawPath: string): string {
+  const rootUrl = new URL(`${baseUrl.replace(/\/$/, '')}/dav/file/${encodeURIComponent(username)}/`);
+  const relativePath = normalizeDavRelativePath(rawPath);
+  return relativePath ? new URL(relativePath, rootUrl).toString() : rootUrl.toString();
+}
+
 /**
  * POST /api/webdav
  * Proxies WebDAV requests to the Stalwart server.
@@ -29,11 +55,8 @@ export async function POST(request: NextRequest) {
     }
 
     const davPath = request.headers.get('X-WebDAV-Path') || '/';
-    const cleanPath = davPath.replace(/^\/+/, '');
+    const baseUrl = creds.serverUrl.replace(/\/$/, '');
-    const baseUrl = creds.apiUrl.replace(/\/$/, '');
+    const targetUrl = buildDavTargetUrl(baseUrl, creds.username, davPath);
-    const targetUrl = cleanPath
-      ? `${baseUrl}/dav/file/${encodeURIComponent(creds.username)}/${cleanPath}`
-      : `${baseUrl}/dav/file/${encodeURIComponent(creds.username)}/`;
 
     // Build headers for the upstream request
     const upstreamHeaders: Record<string, string> = {
@@ -50,19 +73,20 @@ export async function POST(request: NextRequest) {
     // For MOVE/COPY, construct the full Destination URL from the relative path
     const destination = request.headers.get('X-WebDAV-Destination');
     if (destination) {
-      const cleanDest = destination.replace(/^\/+/, '');
+      upstreamHeaders['Destination'] = buildDavTargetUrl(baseUrl, creds.username, destination);
-      upstreamHeaders['Destination'] = cleanDest
-        ? `${baseUrl}/dav/file/${encodeURIComponent(creds.username)}/${cleanDest}`
-        : `${baseUrl}/dav/file/${encodeURIComponent(creds.username)}/`;
     }
 
     const overwrite = request.headers.get('Overwrite');
     if (overwrite) upstreamHeaders['Overwrite'] = overwrite;
 
-    // Forward request body for methods that need it
+    // Forward request body for methods that need it.
-    let body: ArrayBuffer | null = null;
+    // PUT streams directly to upstream to avoid buffering large uploads in memory.
-    if (method === 'PROPFIND' || method === 'PUT') {
+    // PROPFIND bodies are small XML and are read fully.
+    let body: ArrayBuffer | ReadableStream<Uint8Array> | null = null;
+    if (method === 'PROPFIND') {
       body = await request.arrayBuffer();
+    } else if (method === 'PUT') {
+      body = request.body;
     }
 
     const response = await fetch(targetUrl, {
@@ -70,7 +94,9 @@ export async function POST(request: NextRequest) {
       headers: upstreamHeaders,
       body,
       redirect: 'follow',
-    });
+      // `duplex: 'half'` is required by undici when sending a streaming request body.
+      ...(method === 'PUT' ? { duplex: 'half' } : {}),
+    } as Parameters<typeof fetch>[1] & { duplex?: 'half' });
 
     // For file downloads (GET), stream the response back
     if (method === 'GET') {
@@ -104,6 +130,10 @@ export async function POST(request: NextRequest) {
       status: response.status,
     });
   } catch (error) {
+    if (error instanceof Error && error.message.startsWith('Invalid WebDAV path')) {
+      return NextResponse.json({ error: error.message }, { status: 400 });
+    }
+
     logger.error('WebDAV proxy error', { error: error instanceof Error ? error.message : 'Unknown' });
     return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
   }

app/globals.css

@@ -208,6 +208,15 @@ body {
   padding: 1rem 1.25rem;
 }
 
+.email-content-text a {
+  color: #2563eb;
+  text-decoration: underline;
+}
+
+.dark .email-content-text a {
+  color: #60a5fa;
+}
+
 .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">
-<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>
+  <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

@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import { headers } from "next/headers";
 import { getLocale } from "next-intl/server";
+import { PWAInstallPrompt } from "@/components/pwa-install-prompt";
+import { ServiceWorkerRegistration } from "@/components/service-worker-registration";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -20,6 +22,14 @@ 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",
+    appleWebApp: {
+      capable: true,
+      statusBarStyle: "black-translucent",
+      title: process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || "Webmail",
+    },
+    formatDetection: {
+      telephone: false,
+    },
     ...(faviconUrl ? { icons: { icon: faviconUrl } } : {}),
   };
 }
@@ -36,6 +46,14 @@ export default async function RootLayout({
   return (
     <html lang={locale} suppressHydrationWarning>
       <head>
+        <meta name="theme-color" content="#ffffff" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta
+          name="apple-mobile-web-app-title"
+          content={process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || "Webmail"}
+        />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
         {parentOrigin && (
           <meta name="parent-origin" content={parentOrigin} />
         )}
@@ -63,7 +81,9 @@ export default async function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
+        <ServiceWorkerRegistration />
         {children}
+        <PWAInstallPrompt />
       </body>
     </html>
   );

app/manifest.ts

@@ -0,0 +1,55 @@
+import type { MetadataRoute } from "next";
+
+export const dynamic = "force-dynamic";
+
+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/calendar-agenda-view.tsx

@@ -2,11 +2,11 @@
 
 import { useMemo, useRef, useEffect, useCallback } from "react";
 import { useTranslations, useFormatter } from "next-intl";
-import { format, parseISO, isToday, isTomorrow, startOfDay } from "date-fns";
+import { format, isToday, isTomorrow, startOfDay } from "date-fns";
 import { MapPin, Users } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { parseDuration, getEventColor } from "./event-card";
-import { getEventDayBounds, getPrimaryCalendarId } from "@/lib/calendar-utils";
+import { getEventDayBounds, getEventEndDate, getEventStartDate, getPrimaryCalendarId } from "@/lib/calendar-utils";
 import { getParticipantCount } from "@/lib/calendar-participants";
 import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
 
@@ -17,6 +17,7 @@ interface CalendarAgendaViewProps {
   onSelectEvent: (event: CalendarEvent, anchorRect: DOMRect) => void;
   onHoverEvent?: (event: CalendarEvent, anchorRect: DOMRect) => void;
   onHoverLeave?: () => void;
+  onContextMenuEvent?: (e: React.MouseEvent, event: CalendarEvent) => void;
   timeFormat?: "12h" | "24h";
 }
 
@@ -33,6 +34,7 @@ export function CalendarAgendaView({
   onSelectEvent,
   onHoverEvent,
   onHoverLeave,
+  onContextMenuEvent,
   timeFormat = "24h",
 }: CalendarAgendaViewProps) {
   const t = useTranslations("calendar");
@@ -49,7 +51,7 @@ export function CalendarAgendaView({
 
   const grouped = useMemo(() => {
     const sorted = [...events].sort((a, b) =>
-      parseISO(a.start).getTime() - parseISO(b.start).getTime()
+      getEventStartDate(a).getTime() - getEventStartDate(b).getTime()
     );
 
     const groups: DayGroup[] = [];
@@ -144,9 +146,9 @@ export function CalendarAgendaView({
               const calId = getPrimaryCalendarId(ev);
               const calendar = calId ? calendarMap.get(calId) : undefined;
               const color = getEventColor(ev, calendar);
-              const start = parseISO(ev.start);
+              const start = getEventStartDate(ev);
               const durMin = parseDuration(ev.duration);
-              const end = new Date(start.getTime() + durMin * 60000);
+              const end = getEventEndDate(ev);
               const locationName = ev.locations
                 ? Object.values(ev.locations)[0]?.name
                 : null;
@@ -157,6 +159,7 @@ export function CalendarAgendaView({
                   onClick={(e) => onSelectEvent(ev, e.currentTarget.getBoundingClientRect())}
                   onMouseEnter={(e) => onHoverEvent?.(ev, e.currentTarget.getBoundingClientRect())}
                   onMouseLeave={() => onHoverLeave?.()}
+                  onContextMenu={onContextMenuEvent ? (e) => onContextMenuEvent(e, ev) : undefined}
                   className="w-full flex items-start px-4 hover:bg-muted/50 transition-colors text-left"
                   style={{ gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
                 >

components/calendar/calendar-day-view.tsx

@@ -5,9 +5,9 @@ import { useTranslations, useFormatter } from "next-intl";
 import { format, isSameDay, isToday, parseISO } from "date-fns";
 import { cn } from "@/lib/utils";
 import { Check } from "lucide-react";
-import { EventCard, parseDuration } from "./event-card";
+import { EventCard } from "./event-card";
 import { QuickEventInput } from "./quick-event-input";
-import { formatSnapTime, getEventDayBounds, getPrimaryCalendarId, layoutOverlappingEvents } from "@/lib/calendar-utils";
+import { formatSnapTime, getEventDayBounds, getPrimaryCalendarId, isTimedEventFullDayOnDate, layoutOverlappingEvents } from "@/lib/calendar-utils";
 import type { CalendarEvent, Calendar, CalendarTask } from "@/lib/jmap/types";
 import { useTimeGridInteractions } from "@/hooks/use-time-grid-interactions";
 import type { PendingEventPreview } from "./event-modal";
@@ -19,6 +19,7 @@ interface CalendarDayViewProps {
   onSelectEvent: (event: CalendarEvent, anchorRect: DOMRect) => void;
   onHoverEvent?: (event: CalendarEvent, anchorRect: DOMRect) => void;
   onHoverLeave?: () => void;
+  onContextMenuEvent?: (e: React.MouseEvent, event: CalendarEvent) => void;
   onCreateAtTime: (date: Date, endDate?: Date) => void;
   timeFormat?: "12h" | "24h";
   isMobile?: boolean;
@@ -37,6 +38,7 @@ export function CalendarDayView({
   onSelectEvent,
   onHoverEvent,
   onHoverLeave,
+  onContextMenuEvent,
   onCreateAtTime,
   timeFormat = "24h",
   isMobile,
@@ -66,7 +68,7 @@ export function CalendarDayView({
         const spansThisDay = startDay.getTime() <= selDay.getTime() && endDay.getTime() >= selDay.getTime();
         if (!spansThisDay) return;
 
-        if (ev.showWithoutTime) allDay.push(ev);
+        if (ev.showWithoutTime || isTimedEventFullDayOnDate(ev, selectedDate)) allDay.push(ev);
         else timed.push(ev);
       } catch { /* skip invalid dates */ }
     });
@@ -117,6 +119,7 @@ export function CalendarDayView({
       created: t("notifications.event_created"),
       error: t("notifications.event_error"),
     },
+    isMobile,
   });
 
   const formatHour = (h: number): string => {
@@ -127,10 +130,10 @@ export function CalendarDayView({
     return format(new Date(2000, 0, 1, h), "HH:mm");
   };
 
-  const layouted = useMemo(() => layoutOverlappingEvents(timedEvents), [timedEvents]);
+  const layouted = useMemo(() => layoutOverlappingEvents(timedEvents, selectedDate), [timedEvents, selectedDate]);
 
   return (
-    <div className="flex flex-col flex-1 overflow-hidden" role="grid" aria-label={intlFormatter.dateTime(selectedDate, { weekday: "long", month: "long", day: "numeric", year: "numeric" })}>
+    <div className="flex min-h-0 flex-col flex-1 overflow-hidden" role="grid" aria-label={intlFormatter.dateTime(selectedDate, { weekday: "long", month: "long", day: "numeric", year: "numeric" })}>
       <div className={cn("px-4 py-3 border-b border-border", isMobile && "px-3 py-2")}>
         <h3 className={cn("font-semibold", isMobile ? "text-base" : "text-lg", today && "text-primary")}>
           {isMobile
@@ -157,6 +160,7 @@ export function CalendarDayView({
                       onClick={(rect) => onSelectEvent(ev, rect)}
                       onMouseEnter={(rect) => onHoverEvent?.(ev, rect)}
                       onMouseLeave={onHoverLeave}
+                      onContextMenu={onContextMenuEvent}
                     />
                   );
                 })}
@@ -200,7 +204,7 @@ export function CalendarDayView({
         </div>
       )}
 
-      <div ref={scrollRef} className="flex-1 overflow-y-auto">
+      <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto">
         <div className="flex relative" style={{ height: 24 * HOUR_HEIGHT }}>
           <div className={cn("flex-shrink-0", isMobile ? "w-10" : "w-16")}>
             {HOURS.map((h) => (
@@ -241,13 +245,13 @@ export function CalendarDayView({
               />
             ))}
 
-            {layouted.map(({ event: ev, column, totalColumns }) => {
+            {layouted.map(({ event: ev, column, totalColumns, startMinutes, endMinutes }) => {
-              const start = parseISO(ev.start);
+              const durMin = Math.max(15, endMinutes - startMinutes);
-              const startMin = start.getHours() * 60 + start.getMinutes();
+              const baseTop = (startMinutes / 60) * HOUR_HEIGHT;
-              const durMin = Math.max(15, parseDuration(ev.duration));
-              const top = (startMin / 60) * HOUR_HEIGHT;
               const baseHeight = Math.max(24, (durMin / 60) * HOUR_HEIGHT);
-              const height = resizeVisual?.eventId === ev.id ? resizeVisual.heightPx : baseHeight;
+              const isResizing = resizeVisual?.eventId === ev.id;
+              const top = isResizing ? resizeVisual!.topPx : baseTop;
+              const height = isResizing ? resizeVisual!.heightPx : baseHeight;
               const calId = getPrimaryCalendarId(ev);
               const leftPct = (column / totalColumns) * 100;
               const widthPct = (1 / totalColumns) * 100;
@@ -266,13 +270,24 @@ export function CalendarDayView({
                     onClick={(rect) => onSelectEvent(ev, rect)}
                     onMouseEnter={(rect) => onHoverEvent?.(ev, rect)}
                     onMouseLeave={onHoverLeave}
+                    onContextMenu={onContextMenuEvent}
                     draggable
                   />
+                  <div
+                    data-resize-handle
+                    className="absolute top-0 left-1 right-1 h-3 cursor-n-resize z-20 flex items-start justify-center opacity-0 group-hover/event:opacity-100 transition-opacity"
+                    aria-label={t("events.resize")}
+                    onPointerDown={(e) => handleResizePointerDown(ev.id, "top", startMinutes, durMin, e)}
+                    onPointerMove={handleResizePointerMove}
+                    onPointerUp={handleResizePointerUp}
+                  >
+                    <div className="w-8 h-1 rounded-full bg-foreground/30 mt-0.5" />
+                  </div>
                   <div
                     data-resize-handle
                     className="absolute bottom-0 left-1 right-1 h-3 cursor-s-resize z-20 flex items-end justify-center opacity-0 group-hover/event:opacity-100 transition-opacity"
                     aria-label={t("events.resize")}
-                    onPointerDown={(e) => handleResizePointerDown(ev.id, durMin, e)}
+                    onPointerDown={(e) => handleResizePointerDown(ev.id, "bottom", startMinutes, durMin, e)}
                     onPointerMove={handleResizePointerMove}
                     onPointerUp={handleResizePointerUp}
                   >

components/calendar/calendar-month-view.tsx

@@ -23,6 +23,7 @@ interface CalendarMonthViewProps {
   onSelectEvent: (event: CalendarEvent, anchorRect: DOMRect) => void;
   onHoverEvent?: (event: CalendarEvent, anchorRect: DOMRect) => void;
   onHoverLeave?: () => void;
+  onContextMenuEvent?: (e: React.MouseEvent, event: CalendarEvent) => void;
   onCreateAtTime?: (date: Date) => void;
   firstDayOfWeek?: number;
   isMobile?: boolean;
@@ -37,6 +38,7 @@ export function CalendarMonthView({
   onSelectEvent,
   onHoverEvent,
   onHoverLeave,
+  onContextMenuEvent,
   onCreateAtTime,
   firstDayOfWeek = 1,
   isMobile,
@@ -279,6 +281,7 @@ export function CalendarMonthView({
                         onClick={(rect) => onSelectEvent(segment.event, rect)}
                         onMouseEnter={(rect) => onHoverEvent?.(segment.event, rect)}
                         onMouseLeave={onHoverLeave}
+                        onContextMenu={onContextMenuEvent}
                         draggable
                       />
                     </div>

components/calendar/calendar-sidebar-panel.tsx

@@ -1,15 +1,18 @@
 "use client";
 
-import { useState, useRef, useEffect, useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useTranslations } from "next-intl";
-import { Globe, ListTodo, RefreshCw, Share2, Trash2 } from "lucide-react";
+import { Globe, ListTodo, Pencil, RefreshCw, Share2, Trash2, Cake, Users, Plus, Eraser, Palette } from "lucide-react";
 import { cn, formatDateTime } from "@/lib/utils";
 import type { Calendar } from "@/lib/jmap/types";
 import { CalendarColorPicker } from "@/components/settings/calendar-management-settings";
 import { useCalendarStore } from "@/stores/calendar-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useTaskStore } from "@/stores/task-store";
+import { BIRTHDAY_CALENDAR_ID } from "@/lib/birthday-calendar";
 import { toast } from "@/stores/toast-store";
+import { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuSubMenu } from "@/components/ui/context-menu";
+import { useContextMenu } from "@/hooks/use-context-menu";
 import type { IJMAPClient } from '@/lib/jmap/client-interface';
 
 interface CalendarSidebarPanelProps {
@@ -17,7 +20,13 @@ interface CalendarSidebarPanelProps {
   selectedCalendarIds: string[];
   onToggleVisibility: (id: string) => void;
   onColorChange?: (calendarId: string, color: string) => void;
+  onShareCalendar?: (calendar: Calendar) => void;
+  onCreateEvent?: (calendar: Calendar) => void;
+  onClearCalendar?: (calendar: Calendar) => void;
+  onDeleteCalendar?: (calendar: Calendar) => void;
+  onCreateCalendar?: () => void;
   onSubscribe?: () => void;
+  onEditSubscription?: (subscriptionId: string) => void;
   client?: IJMAPClient | null;
 }
 
@@ -26,11 +35,18 @@ export function CalendarSidebarPanel({
   selectedCalendarIds,
   onToggleVisibility,
   onColorChange,
+  onShareCalendar,
+  onCreateEvent,
+  onClearCalendar,
+  onDeleteCalendar,
+  onCreateCalendar,
   onSubscribe,
+  onEditSubscription,
   client,
 }: CalendarSidebarPanelProps) {
   const t = useTranslations("calendar");
   const tSub = useTranslations("calendar.subscription");
+  const tMgmt = useTranslations("calendar.management");
   const isSubscriptionCalendar = useCalendarStore((s) => s.isSubscriptionCalendar);
   const icalSubscriptions = useCalendarStore((s) => s.icalSubscriptions);
   const refreshICalSubscription = useCalendarStore((s) => s.refreshICalSubscription);
@@ -46,11 +62,8 @@ export function CalendarSidebarPanel({
     return tasks.filter(t => t.progress !== 'completed' && t.progress !== 'cancelled' && t.due && new Date(t.due) < now).length;
   }, [tasks]);
 
-  const [colorPickerId, setColorPickerId] = useState<string | null>(null);
+  const { contextMenu, openContextMenu, closeContextMenu, menuRef } = useContextMenu<Calendar>();
-  const [contextMenuCalId, setContextMenuCalId] = useState<string | null>(null);
   const [refreshingSubId, setRefreshingSubId] = useState<string | null>(null);
-  const colorPickerRef = useRef<HTMLDivElement>(null);
-  const contextMenuRef = useRef<HTMLDivElement>(null);
 
   const personalCalendars = useMemo(() => calendars.filter(c => !c.isShared), [calendars]);
   const sharedAccountGroups = useMemo(() => {
@@ -66,30 +79,6 @@ export function CalendarSidebarPanel({
     return Array.from(groups.values());
   }, [calendars]);
 
-  useEffect(() => {
-    if (!colorPickerId && !contextMenuCalId) return;
-    const handleClick = (e: MouseEvent) => {
-      if (colorPickerRef.current && !colorPickerRef.current.contains(e.target as Node)) {
-        setColorPickerId(null);
-      }
-      if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
-        setContextMenuCalId(null);
-      }
-    };
-    const handleKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        setColorPickerId(null);
-        setContextMenuCalId(null);
-      }
-    };
-    document.addEventListener('mousedown', handleClick);
-    document.addEventListener('keydown', handleKey);
-    return () => {
-      document.removeEventListener('mousedown', handleClick);
-      document.removeEventListener('keydown', handleKey);
-    };
-  }, [colorPickerId, contextMenuCalId]);
-
   const getSubscriptionForCalendar = (calendarId: string) => {
     return icalSubscriptions.find(s => s.calendarId === calendarId);
   };
@@ -97,7 +86,6 @@ export function CalendarSidebarPanel({
   const handleRefreshSubscription = async (subId: string) => {
     if (!client) return;
     setRefreshingSubId(subId);
-    setContextMenuCalId(null);
     try {
       await refreshICalSubscription(client, subId);
       toast.success(tSub('refresh_success'));
@@ -110,7 +98,6 @@ export function CalendarSidebarPanel({
 
   const handleUnsubscribe = async (subId: string) => {
     if (!client) return;
-    setContextMenuCalId(null);
     try {
       await removeICalSubscription(client, subId);
       toast.success(tSub('deleted'));
@@ -124,21 +111,13 @@ export function CalendarSidebarPanel({
   const renderCalendarItem = (cal: Calendar) => {
     const isVisible = selectedCalendarIds.includes(cal.id);
     const color = cal.color || "#3b82f6";
+    const hasMenu = isSubscriptionCalendar(cal.id) ? !!client : true;
 
     return (
       <div key={cal.id} className="relative">
         <button
           onClick={() => onToggleVisibility(cal.id)}
-          onContextMenu={(e) => {
+          onContextMenu={hasMenu ? (e) => openContextMenu(e, cal) : undefined}
-            e.preventDefault();
-            if (isSubscriptionCalendar(cal.id) && client) {
-              setContextMenuCalId(contextMenuCalId === cal.id ? null : cal.id);
-              setColorPickerId(null);
-            } else if (onColorChange) {
-              setColorPickerId(colorPickerId === cal.id ? null : cal.id);
-              setContextMenuCalId(null);
-            }
-          }}
           className={cn(
             "flex items-center gap-2 w-full px-1.5 py-1 rounded-md text-sm transition-colors duration-150",
             "hover:bg-muted"
@@ -162,61 +141,105 @@ export function CalendarSidebarPanel({
               )}
             </>
           )}
+          {cal.id === BIRTHDAY_CALENDAR_ID && (
+            <Cake className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+          )}
         </button>
-
-        {/* Subscription context menu on right-click */}
-        {contextMenuCalId === cal.id && isSubscriptionCalendar(cal.id) && client && (() => {
-          const sub = getSubscriptionForCalendar(cal.id);
-          if (!sub) return null;
-          return (
-            <div
-              ref={contextMenuRef}
-              className="absolute left-6 top-full mt-1 z-50 bg-background border border-border rounded-lg shadow-lg py-1 w-48"
-            >
-              <button
-                onClick={() => handleRefreshSubscription(sub.id)}
-                className="flex items-center gap-2 w-full px-3 py-1.5 text-sm hover:bg-muted transition-colors"
-              >
-                <RefreshCw className="w-3.5 h-3.5" />
-                {tSub('refresh')}
-              </button>
-              <button
-                onClick={() => handleUnsubscribe(sub.id)}
-                className="flex items-center gap-2 w-full px-3 py-1.5 text-sm text-destructive hover:bg-destructive/10 transition-colors"
-              >
-                <Trash2 className="w-3.5 h-3.5" />
-                {tSub('unsubscribe')}
-              </button>
-              {sub.lastRefreshed && (
-                <div className="px-3 py-1.5 text-xs text-muted-foreground border-t border-border mt-1 pt-1">
-                  {tSub('last_refreshed', { time: formatDateTime(sub.lastRefreshed, timeFormat, { month: 'short', day: 'numeric', year: 'numeric' }) })}
-                </div>
-              )}
-            </div>
-          );
-        })()}
-
-        {/* Color picker popover on right-click */}
-        {colorPickerId === cal.id && onColorChange && (
-          <div
-            ref={colorPickerRef}
-            className="absolute left-6 top-full mt-1 z-50 bg-background border border-border rounded-lg shadow-lg p-3 w-56"
-          >
-            <p className="text-xs font-medium text-muted-foreground mb-2">{t("management.change_color")}</p>
-            <CalendarColorPicker
-              value={color}
-              onChange={(c) => {
-                onColorChange(cal.id, c);
-                setColorPickerId(null);
-              }}
-              allowCustom
-            />
-          </div>
-        )}
       </div>
     );
   };
 
+  const renderCalendarMenu = () => {
+    const cal = contextMenu.data;
+    if (!cal) return null;
+
+    if (isSubscriptionCalendar(cal.id)) {
+      const sub = getSubscriptionForCalendar(cal.id);
+      if (!sub || !client) return null;
+      return (
+        <ContextMenu ref={menuRef} isOpen={contextMenu.isOpen} position={contextMenu.position} onClose={closeContextMenu}>
+          <ContextMenuItem
+            icon={Pencil}
+            label={tSub('edit')}
+            onClick={() => { closeContextMenu(); onEditSubscription?.(sub.id); }}
+          />
+          <ContextMenuItem
+            icon={RefreshCw}
+            label={tSub('refresh')}
+            onClick={() => { closeContextMenu(); handleRefreshSubscription(sub.id); }}
+          />
+          <ContextMenuSeparator />
+          <ContextMenuItem
+            icon={Trash2}
+            label={tSub('unsubscribe')}
+            onClick={() => { closeContextMenu(); handleUnsubscribe(sub.id); }}
+            destructive
+          />
+          {sub.lastRefreshed && (
+            <div className="px-3 py-1.5 text-xs text-muted-foreground border-t border-border mt-1 pt-1">
+              {tSub('last_refreshed', { time: formatDateTime(sub.lastRefreshed, timeFormat, { month: 'short', day: 'numeric', year: 'numeric' }) })}
+            </div>
+          )}
+        </ContextMenu>
+      );
+    }
+
+    const isBirthday = cal.id === BIRTHDAY_CALENDAR_ID;
+    const canCreate = onCreateEvent && !isBirthday && cal.myRights?.mayWriteOwn !== false;
+    const canShare = onShareCalendar && cal.myRights?.mayShare && !cal.isShared;
+    const canChangeColor = !!onColorChange;
+    const canClear = onClearCalendar && !isBirthday && cal.myRights?.mayDelete !== false;
+    const canDelete = onDeleteCalendar && !isBirthday && !cal.isDefault && !cal.isShared;
+    const showSeparator = (canCreate || canShare || canChangeColor) && (canClear || canDelete);
+    const color = cal.color || "#3b82f6";
+
+    return (
+      <ContextMenu ref={menuRef} isOpen={contextMenu.isOpen} position={contextMenu.position} onClose={closeContextMenu}>
+        {canCreate && (
+          <ContextMenuItem
+            icon={Plus}
+            label={tMgmt('new_event_in_calendar')}
+            onClick={() => { closeContextMenu(); onCreateEvent(cal); }}
+          />
+        )}
+        {canShare && (
+          <ContextMenuItem
+            icon={Users}
+            label={tMgmt('share')}
+            onClick={() => { closeContextMenu(); onShareCalendar(cal); }}
+          />
+        )}
+        {canChangeColor && (
+          <ContextMenuSubMenu icon={Palette} label={tMgmt('change_color')}>
+            <div className="px-2 py-1.5 w-[200px]">
+              <CalendarColorPicker
+                value={color}
+                onChange={(c) => { onColorChange(cal.id, c); closeContextMenu(); }}
+                allowCustom
+              />
+            </div>
+          </ContextMenuSubMenu>
+        )}
+        {showSeparator && <ContextMenuSeparator />}
+        {canClear && (
+          <ContextMenuItem
+            icon={Eraser}
+            label={tMgmt('clear_events')}
+            onClick={() => { closeContextMenu(); onClearCalendar(cal); }}
+          />
+        )}
+        {canDelete && (
+          <ContextMenuItem
+            icon={Trash2}
+            label={tMgmt('delete')}
+            onClick={() => { closeContextMenu(); onDeleteCalendar(cal); }}
+            destructive
+          />
+        )}
+      </ContextMenu>
+    );
+  };
+
   return (
     <div className="mt-4">
       {enableCalendarTasks && (
@@ -234,9 +257,22 @@ export function CalendarSidebarPanel({
           )}
         </button>
       )}
-      <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">
+      <div className="flex items-center justify-between mb-2 px-1 group">
-        {t("my_calendars")}
+        {onCreateCalendar ? (
-      </h3>
+          <button
+            onClick={onCreateCalendar}
+            className="text-xs font-medium text-muted-foreground uppercase tracking-wider hover:text-foreground transition-colors flex items-center gap-1.5"
+            title={tMgmt('add_calendar')}
+          >
+            {t('my_calendars')}
+            <Plus className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" />
+          </button>
+        ) : (
+          <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+            {t('my_calendars')}
+          </h3>
+        )}
+      </div>
       <div className="space-y-0.5">
         {personalCalendars.map(renderCalendarItem)}
       </div>
@@ -252,6 +288,8 @@ export function CalendarSidebarPanel({
           </div>
         </div>
       ))}
+
+      {renderCalendarMenu()}
     </div>
   );
 }

components/calendar/calendar-toolbar.tsx

@@ -260,6 +260,9 @@ export function CalendarToolbar({
       {/* ── DESKTOP TOOLBAR ── */}
       {!isMobile && (
         <div className="flex items-center gap-1">
+          <Button variant="outline" size="sm" onClick={onToday} className="h-8 mr-1">
+            {t("views.today")}
+          </Button>
           <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onPrev} aria-label={t("nav_prev")}>
             <ChevronLeft className="w-4 h-4" />
           </Button>
@@ -279,14 +282,14 @@ export function CalendarToolbar({
       <div className="flex-1" />
 
       {!isMobile && (
-        <div className="flex border border-border rounded-md overflow-hidden">
+        <div className="flex h-8 border border-border rounded-md overflow-hidden">
           {views.map((v) => (
             <button
               key={v}
               onClick={() => onViewModeChange(v)}
               title={t(`views.${v}_hint`)}
               className={cn(
-                "px-3 py-1.5 text-xs font-medium transition-colors",
+                "inline-flex items-center px-3 text-xs font-medium transition-colors",
                 v === viewMode
                   ? "bg-primary text-primary-foreground"
                   : "hover:bg-muted text-muted-foreground"
@@ -300,7 +303,7 @@ export function CalendarToolbar({
 
       {(onImport || onSubscribe) && !isMobile && (
         <div className="relative" ref={importDropdownRef}>
-          <Button variant="outline" size="sm" onClick={() => setShowImportDropdown((v) => !v)}>
+          <Button variant="outline" size="sm" className="h-8" onClick={() => setShowImportDropdown((v) => !v)}>
             <Upload className="w-4 h-4 mr-1" />
             {t("import.title")}
             <ChevronDown className="w-3 h-3 ml-1" />
@@ -331,7 +334,7 @@ export function CalendarToolbar({
       )}
 
       {!isMobile && (
-        <Button size="sm" onClick={onCreateEvent} data-tour="create-event-button">
+        <Button size="sm" className="h-8" onClick={onCreateEvent} data-tour="create-event-button">
           <Plus className="w-4 h-4 mr-1" />
           {t("events.create")}
         </Button>

components/calendar/calendar-week-view.tsx

@@ -7,9 +7,9 @@ import {
 } from "date-fns";
 import { cn } from "@/lib/utils";
 import { Check } from "lucide-react";
-import { EventCard, parseDuration } from "./event-card";
+import { EventCard } from "./event-card";
 import { QuickEventInput } from "./quick-event-input";
-import { buildWeekSegments, formatSnapTime, getEventDayBounds, getPrimaryCalendarId, layoutOverlappingEvents } from "@/lib/calendar-utils";
+import { buildTimedFullDayWeekSegments, buildWeekSegmentsRaw, formatSnapTime, getEventDayBounds, getPrimaryCalendarId, isTimedEventFullDayOnDate, layoutOverlappingEvents, packWeekSegments } from "@/lib/calendar-utils";
 import type { CalendarEvent, Calendar, CalendarTask } from "@/lib/jmap/types";
 import { useTimeGridInteractions } from "@/hooks/use-time-grid-interactions";
 import type { PendingEventPreview } from "./event-modal";
@@ -22,6 +22,7 @@ interface CalendarWeekViewProps {
   onSelectEvent: (event: CalendarEvent, anchorRect: DOMRect) => void;
   onHoverEvent?: (event: CalendarEvent, anchorRect: DOMRect) => void;
   onHoverLeave?: () => void;
+  onContextMenuEvent?: (e: React.MouseEvent, event: CalendarEvent) => void;
   onCreateAtTime: (date: Date, endDate?: Date) => void;
   firstDayOfWeek?: number;
   timeFormat?: "12h" | "24h";
@@ -42,6 +43,7 @@ export function CalendarWeekView({
   onSelectEvent,
   onHoverEvent,
   onHoverLeave,
+  onContextMenuEvent,
   onCreateAtTime,
   firstDayOfWeek = 1,
   timeFormat = "24h",
@@ -77,7 +79,7 @@ export function CalendarWeekView({
         const cursor = new Date(startDay);
         while (cursor <= endDay) {
           const key = format(cursor, "yyyy-MM-dd");
-          if (!ev.showWithoutTime) {
+          if (!ev.showWithoutTime && !isTimedEventFullDayOnDate(ev, cursor)) {
             const arr = timed.get(key) || [];
             arr.push(ev);
             timed.set(key, arr);
@@ -89,10 +91,18 @@ export function CalendarWeekView({
     return timed;
   }, [events]);
 
-  const allDaySegments = useMemo(() => buildWeekSegments(
+  const allDaySegments = useMemo(() => {
-    events.filter((event) => event.showWithoutTime),
+    const explicitAllDay = buildWeekSegmentsRaw(
-    weekDays,
+      events.filter((event) => event.showWithoutTime),
-  ), [events, weekDays]);
+      weekDays,
+    );
+    const timedFullDay = buildTimedFullDayWeekSegments(
+      events.filter((event) => !event.showWithoutTime),
+      weekDays,
+    );
+
+    return packWeekSegments([...explicitAllDay, ...timedFullDay]);
+  }, [events, weekDays]);
 
   const allDayRowCount = useMemo(() => {
     return allDaySegments.reduce((maxRows, segment) => Math.max(maxRows, segment.row + 1), 0);
@@ -173,6 +183,7 @@ export function CalendarWeekView({
       created: t("notifications.event_created"),
       error: t("notifications.event_error"),
     },
+    isMobile,
   });
 
   const formatHour = (h: number): string => {
@@ -189,13 +200,13 @@ export function CalendarWeekView({
     <div
       ref={rootRef}
       className={cn(
-        "flex flex-col flex-1",
+        "flex min-h-0 min-w-0 flex-col flex-1",
         isMobile ? "overflow-x-auto overflow-y-hidden" : "overflow-hidden"
       )}
       role="grid"
       aria-label={t("views.week")}
     >
-      <div className={cn("flex flex-col flex-1", isMobile && "min-w-[880px]")}>      {hasAllDay && (
+      <div className={cn("flex min-h-0 flex-col flex-1", isMobile && "min-w-[880px]")}>      {hasAllDay && (
         <div className="flex border-b border-border">
           <div
             className={cn("flex-shrink-0 text-[10px] text-muted-foreground p-1 text-right", isMobile ? "w-10 sticky left-0 z-10 bg-background" : "w-14")}
@@ -234,6 +245,7 @@ export function CalendarWeekView({
                       onClick={(rect) => onSelectEvent(segment.event, rect)}
                       onMouseEnter={(rect) => onHoverEvent?.(segment.event, rect)}
                       onMouseLeave={onHoverLeave}
+                      onContextMenu={onContextMenuEvent}
                     />
                   </div>
                 );
@@ -321,7 +333,7 @@ export function CalendarWeekView({
         </div>
       </div>
 
-      <div ref={scrollRef} className="flex-1 overflow-y-auto">
+      <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto">
         <div className="flex relative" style={{ height: 24 * HOUR_HEIGHT }}>
           <div className={cn("flex-shrink-0", isMobile ? "w-10 sticky left-0 z-10 bg-background" : "w-14")}>
             {HOURS.map((h) => (
@@ -344,7 +356,7 @@ export function CalendarWeekView({
               const key = format(day, "yyyy-MM-dd");
               const dayEvents = timedEvents.get(key) || [];
               const todayCol = isToday(day);
-              const layouted = layoutOverlappingEvents(dayEvents);
+              const layouted = layoutOverlappingEvents(dayEvents, day);
 
               return (
                 <div
@@ -371,13 +383,13 @@ export function CalendarWeekView({
                     />
                   ))}
 
-                  {layouted.map(({ event: ev, column, totalColumns }) => {
+                  {layouted.map(({ event: ev, column, totalColumns, startMinutes, endMinutes }) => {
-                    const start = parseISO(ev.start);
+                    const durMin = Math.max(15, endMinutes - startMinutes);
-                    const startMin = start.getHours() * 60 + start.getMinutes();
+                    const baseTop = (startMinutes / 60) * HOUR_HEIGHT;
-                    const durMin = Math.max(15, parseDuration(ev.duration));
-                    const top = (startMin / 60) * HOUR_HEIGHT;
                     const baseHeight = Math.max(20, (durMin / 60) * HOUR_HEIGHT);
-                    const height = resizeVisual?.eventId === ev.id ? resizeVisual.heightPx : baseHeight;
+                    const isResizing = resizeVisual?.eventId === ev.id;
+                    const top = isResizing ? resizeVisual!.topPx : baseTop;
+                    const height = isResizing ? resizeVisual!.heightPx : baseHeight;
                     const calId = getPrimaryCalendarId(ev);
                     const leftPct = (column / totalColumns) * 100;
                     const widthPct = (1 / totalColumns) * 100;
@@ -396,13 +408,24 @@ export function CalendarWeekView({
                           onClick={(rect) => onSelectEvent(ev, rect)}
                           onMouseEnter={(rect) => onHoverEvent?.(ev, rect)}
                           onMouseLeave={onHoverLeave}
+                          onContextMenu={onContextMenuEvent}
                           draggable
                         />
+                        <div
+                          data-resize-handle
+                          className="absolute top-0 left-1 right-1 h-3 cursor-n-resize z-20 flex items-start justify-center opacity-0 group-hover/event:opacity-100 transition-opacity"
+                          aria-label={t("events.resize")}
+                          onPointerDown={(e) => handleResizePointerDown(ev.id, "top", startMinutes, durMin, e)}
+                          onPointerMove={handleResizePointerMove}
+                          onPointerUp={handleResizePointerUp}
+                        >
+                          <div className="w-8 h-1 rounded-full bg-foreground/30 mt-0.5" />
+                        </div>
                         <div
                           data-resize-handle
                           className="absolute bottom-0 left-1 right-1 h-3 cursor-s-resize z-20 flex items-end justify-center opacity-0 group-hover/event:opacity-100 transition-opacity"
                           aria-label={t("events.resize")}
-                          onPointerDown={(e) => handleResizePointerDown(ev.id, durMin, e)}
+                          onPointerDown={(e) => handleResizePointerDown(ev.id, "bottom", startMinutes, durMin, e)}
                           onPointerMove={handleResizePointerMove}
                           onPointerUp={handleResizePointerUp}
                         >

components/calendar/create-calendar-modal.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { X, Loader2, Calendar as CalendarIcon } from "lucide-react";
+import type { IJMAPClient } from "@/lib/jmap/client-interface";
+import { useCalendarStore } from "@/stores/calendar-store";
+import { CalendarColorPicker } from "@/components/settings/calendar-management-settings";
+import { toast } from "@/stores/toast-store";
+
+interface CreateCalendarModalProps {
+  client: IJMAPClient;
+  onClose: () => void;
+}
+
+export function CreateCalendarModal({ client, onClose }: CreateCalendarModalProps) {
+  const t = useTranslations("calendar.management");
+  const tCommon = useTranslations("common");
+  const createCalendar = useCalendarStore((s) => s.createCalendar);
+
+  const [name, setName] = useState("");
+  const [color, setColor] = useState("#3b82f6");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const isValid = name.trim().length > 0;
+
+  const handleSubmit = useCallback(async () => {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    setIsSubmitting(true);
+    try {
+      const created = await createCalendar(client, { name: trimmed, color });
+      if (created) {
+        toast.success(t("calendar_created"));
+        onClose();
+      } else {
+        toast.error(t("error_create"));
+      }
+    } catch {
+      toast.error(t("error_create"));
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [name, color, client, createCalendar, onClose, t]);
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && !isSubmitting) onClose();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [onClose, isSubmitting]);
+
+  useEffect(() => {
+    const modal = modalRef.current;
+    if (!modal) return;
+    const focusableEls = modal.querySelectorAll<HTMLElement>(
+      'input, select, textarea, button, [tabindex]:not([tabindex="-1"])'
+    );
+    const firstEl = focusableEls[0];
+    const lastEl = focusableEls[focusableEls.length - 1];
+
+    const handler = (e: KeyboardEvent) => {
+      if (e.key !== "Tab") return;
+      if (e.shiftKey && document.activeElement === firstEl) {
+        e.preventDefault();
+        lastEl?.focus();
+      } else if (!e.shiftKey && document.activeElement === lastEl) {
+        e.preventDefault();
+        firstEl?.focus();
+      }
+    };
+    modal.addEventListener("keydown", handler);
+    firstEl?.focus();
+    return () => modal.removeEventListener("keydown", handler);
+  }, []);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-[1px]"
+        onClick={() => !isSubmitting && onClose()}
+        aria-hidden="true"
+      />
+      <div
+        ref={modalRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={t("add_calendar")}
+        className="relative bg-background border border-border rounded-lg shadow-xl w-full max-w-md mx-4 animate-in zoom-in-95 duration-200"
+      >
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+          <div className="flex items-center gap-2">
+            <CalendarIcon className="w-5 h-5 text-primary" />
+            <h2 className="text-lg font-semibold">{t("add_calendar")}</h2>
+          </div>
+          <button
+            onClick={onClose}
+            disabled={isSubmitting}
+            className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground disabled:opacity-50"
+            aria-label={tCommon("close")}
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="px-6 py-4 space-y-4">
+          <div>
+            <label className="text-xs font-medium text-muted-foreground mb-1 block">
+              {t("name")}
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={t("name_placeholder")}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              disabled={isSubmitting}
+              onKeyDown={(e) => { if (e.key === "Enter" && isValid) handleSubmit(); }}
+            />
+          </div>
+
+          <div>
+            <label className="text-xs font-medium text-muted-foreground mb-1 block">
+              {t("color")}
+            </label>
+            <CalendarColorPicker value={color} onChange={setColor} allowCustom />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-border">
+          <Button variant="outline" onClick={onClose} disabled={isSubmitting}>
+            {tCommon("cancel")}
+          </Button>
+          <Button onClick={handleSubmit} disabled={!isValid || isSubmitting}>
+            {isSubmitting ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin mr-2" />
+                {tCommon("loading")}
+              </>
+            ) : (
+              t("create")
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/calendar/event-card.tsx

@@ -4,9 +4,10 @@ import { useCallback, useState, type CSSProperties, type DragEvent } from "react
 import { useTranslations } from "next-intl";
 import { cn } from "@/lib/utils";
 import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
-import { format, parseISO } from "date-fns";
+import { format } from "date-fns";
 import { Users } from "lucide-react";
 import { getParticipantCount } from "@/lib/calendar-participants";
+import { getEventEndDate, getEventStartDate } from "@/lib/calendar-utils";
 import { useSettingsStore } from "@/stores/settings-store";
 
 interface EventCardProps {
@@ -16,6 +17,7 @@ interface EventCardProps {
   onClick?: (anchorRect: DOMRect) => void;
   onMouseEnter?: (anchorRect: DOMRect) => void;
   onMouseLeave?: () => void;
+  onContextMenu?: (e: React.MouseEvent, event: CalendarEvent) => void;
   isSelected?: boolean;
   draggable?: boolean;
   continuesBefore?: boolean;
@@ -64,18 +66,18 @@ function createEventDragPreview(title: string, timeRange: string, color: string)
   return el;
 }
 
-export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onMouseLeave, isSelected, draggable: isDraggable, continuesBefore = false, continuesAfter = false, className, style }: EventCardProps) {
+export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onMouseLeave, onContextMenu, isSelected, draggable: isDraggable, continuesBefore = false, continuesAfter = false, className, style }: EventCardProps) {
   const t = useTranslations("calendar");
   const [isBeingDragged, setIsBeingDragged] = useState(false);
   const color = getEventColor(event, calendar);
-  const startDate = parseISO(event.start);
+  const startDate = getEventStartDate(event);
   const timeFormat = useSettingsStore((state) => state.timeFormat);
   const showTimeInMonthView = useSettingsStore((state) => state.showTimeInMonthView);
   const timeFmt = timeFormat === "12h" ? "h:mm a" : "HH:mm";
 
   const calendarName = calendar?.name || "";
   const durationMinutes = parseDuration(event.duration);
-  const endTime = new Date(startDate.getTime() + durationMinutes * 60000);
+  const endTime = getEventEndDate(event);
   const timeString = `${format(startDate, timeFmt)} – ${format(endTime, timeFmt)}`;
   const ariaLabel = `${event.title || t("events.no_title")}, ${timeString}${calendarName ? `, ${calendarName}` : ""}`;
 
@@ -108,12 +110,15 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
     "aria-roledescription": "draggable event",
   } : {};
 
+  const handleContextMenu = onContextMenu ? (e: React.MouseEvent) => onContextMenu(e, event) : undefined;
+
   if (variant === "chip") {
     return (
       <button
         onClick={(e) => { e.stopPropagation(); onClick?.(e.currentTarget.getBoundingClientRect()); }}
         onMouseEnter={(e) => onMouseEnter?.(e.currentTarget.getBoundingClientRect())}
         onMouseLeave={() => onMouseLeave?.()}
+        onContextMenu={handleContextMenu}
         aria-label={ariaLabel}
         {...dragProps}
         className={cn(
@@ -141,6 +146,7 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
         onClick={(e) => { e.stopPropagation(); onClick?.(e.currentTarget.getBoundingClientRect()); }}
         onMouseEnter={(e) => onMouseEnter?.(e.currentTarget.getBoundingClientRect())}
         onMouseLeave={() => onMouseLeave?.()}
+        onContextMenu={handleContextMenu}
         aria-label={ariaLabel}
         {...dragProps}
         className={cn(
@@ -171,6 +177,7 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
       onClick={(e) => { e.stopPropagation(); onClick?.(e.currentTarget.getBoundingClientRect()); }}
       onMouseEnter={(e) => onMouseEnter?.(e.currentTarget.getBoundingClientRect())}
       onMouseLeave={() => onMouseLeave?.()}
+      onContextMenu={handleContextMenu}
       aria-label={ariaLabel}
       {...dragProps}
       data-calendar-event

components/calendar/event-context-menu.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import {
+  ContextMenu,
+  ContextMenuItem,
+  ContextMenuSeparator,
+} from "@/components/ui/context-menu";
+import {
+  Pencil,
+  Copy,
+  Download,
+  ClipboardCopy,
+  Link as LinkIcon,
+  Trash2,
+} from "lucide-react";
+import type { CalendarEvent } from "@/lib/jmap/types";
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+interface EventContextMenuProps {
+  event: CalendarEvent;
+  position: Position;
+  isOpen: boolean;
+  onClose: () => void;
+  menuRef: React.RefObject<HTMLDivElement | null>;
+  onEdit: () => void;
+  onDuplicate: () => void;
+  onExportICS: () => void;
+  onCopyTitle: () => void;
+  onCopyMeetingLink?: () => void;
+  onDelete: () => void;
+}
+
+export function EventContextMenu({
+  event,
+  position,
+  isOpen,
+  onClose,
+  menuRef,
+  onEdit,
+  onDuplicate,
+  onExportICS,
+  onCopyTitle,
+  onCopyMeetingLink,
+  onDelete,
+}: EventContextMenuProps) {
+  const t = useTranslations("calendar");
+
+  const handle = (fn: () => void) => () => {
+    fn();
+    onClose();
+  };
+
+  const hasMeetingLink = !!(
+    event.virtualLocations && Object.values(event.virtualLocations).some((v) => v.uri)
+  );
+
+  return (
+    <ContextMenu ref={menuRef} isOpen={isOpen} position={position} onClose={onClose}>
+      <ContextMenuItem icon={Pencil} label={t("events.edit")} onClick={handle(onEdit)} />
+      <ContextMenuItem icon={Copy} label={t("events.duplicate")} onClick={handle(onDuplicate)} />
+      <ContextMenuSeparator />
+      <ContextMenuItem
+        icon={Download}
+        label={t("events.export_ics")}
+        onClick={handle(onExportICS)}
+      />
+      <ContextMenuItem
+        icon={ClipboardCopy}
+        label={t("events.copy_title")}
+        onClick={handle(onCopyTitle)}
+      />
+      {hasMeetingLink && onCopyMeetingLink && (
+        <ContextMenuItem
+          icon={LinkIcon}
+          label={t("events.copy_link")}
+          onClick={handle(onCopyMeetingLink)}
+        />
+      )}
+      <ContextMenuSeparator />
+      <ContextMenuItem
+        icon={Trash2}
+        label={t("events.delete")}
+        onClick={handle(onDelete)}
+        destructive
+      />
+    </ContextMenu>
+  );
+}

components/calendar/event-detail-popover.tsx

@@ -12,6 +12,7 @@ import { format, parseISO } from "date-fns";
 import { cn } from "@/lib/utils";
 import type { CalendarEvent, Calendar, CalendarParticipant } from "@/lib/jmap/types";
 import { parseDuration, getEventColor } from "./event-card";
+import { getEventEndDate, getEventStartDate } from "@/lib/calendar-utils";
 import {
   isOrganizer,
   getUserParticipantId,
@@ -87,7 +88,7 @@ function formatDurationDisplay(minutes: number): string {
 function getAlertLabel(event: CalendarEvent, t: ReturnType<typeof useTranslations>): string | null {
   if (!event.alerts) return null;
   const first = Object.values(event.alerts)[0];
-  if (!first || first.trigger["@type"] !== "OffsetTrigger") return null;
+  if (!first || !first.trigger || first.trigger["@type"] !== "OffsetTrigger") return null;
   const offset = first.trigger.offset;
   if (offset === "PT0S") return t("alerts.at_time");
   const minMatch = offset.match(/-?PT?(\d+)M$/);
@@ -138,9 +139,9 @@ export function EventDetailPopover({
   const [isSavingNote, setIsSavingNote] = useState(false);
 
   const color = getEventColor(event, calendar);
-  const startDate = parseISO(event.start);
+  const startDate = getEventStartDate(event);
   const durationMinutes = parseDuration(event.duration);
-  const endDate = new Date(startDate.getTime() + durationMinutes * 60000);
+  const endDate = getEventEndDate(event);
 
   const locationName = useMemo(() => {
     if (!event.locations) return null;

components/calendar/event-modal.tsx

@@ -8,8 +8,8 @@ import { X, Trash2, Check, Users, CalendarDays, Copy, Pencil, Clock, MapPin, Vid
 import { format, parseISO, addHours, addDays } from "date-fns";
 import type { CalendarEvent, Calendar, CalendarParticipant } from "@/lib/jmap/types";
 import { parseDuration, getEventColor } from "./event-card";
-import { buildAllDayDuration, getEventDisplayEndDate, getPrimaryCalendarId } from "@/lib/calendar-utils";
+import { buildAllDayDuration, getEventDisplayEndDate, getEventEndDate, getEventStartDate, getPrimaryCalendarId } from "@/lib/calendar-utils";
-import { ParticipantInput } from "./participant-input";
+import { ParticipantInput, type ParticipantInputHandle } from "./participant-input";
 import {
   isOrganizer,
   getUserParticipantId,
@@ -18,7 +18,9 @@ import {
   getStatusCounts,
   buildParticipantMap,
 } from "@/lib/calendar-participants";
+import { PluginSlot } from "@/components/plugins/plugin-slot";
 import { useSettingsStore } from "@/stores/settings-store";
+import { generateUUID } from "@/lib/utils";
 
 export interface PendingEventPreview {
   start: Date;
@@ -33,6 +35,7 @@ interface EventModalProps {
   calendars: Calendar[];
   defaultDate?: Date;
   defaultEndDate?: Date;
+  defaultCalendarId?: string;
   onSave: (data: Partial<CalendarEvent>, sendSchedulingMessages?: boolean) => void | Promise<void>;
   onDelete?: (id: string, sendSchedulingMessages?: boolean) => void;
   onDuplicate?: (data: Partial<CalendarEvent>) => void;
@@ -111,6 +114,7 @@ export function EventModal({
   calendars,
   defaultDate,
   defaultEndDate,
+  defaultCalendarId,
   onSave,
   onDelete,
   onDuplicate,
@@ -159,7 +163,7 @@ export function EventModal({
   }, [event, existingParticipants]);
 
   const getInitialStart = (): Date => {
-    if (event?.start) return parseISO(event.start);
+    if (event?.start) return getEventStartDate(event);
     if (defaultDate) {
       const d = new Date(defaultDate);
       if (defaultEndDate) return d;
@@ -177,9 +181,7 @@ export function EventModal({
       if (event.showWithoutTime) {
         return getEventDisplayEndDate(event);
       }
-      const s = parseISO(event.start);
+      return getEventEndDate(event);
-      const dur = parseDuration(event.duration);
-      return new Date(s.getTime() + dur * 60000);
     }
     if (defaultEndDate) return new Date(defaultEndDate);
     return addHours(getInitialStart(), 1);
@@ -190,6 +192,9 @@ export function EventModal({
   const [location, setLocation] = useState(
     event?.locations ? Object.values(event.locations)[0]?.name || "" : ""
   );
+  const [virtualLocation, setVirtualLocation] = useState(
+    event?.virtualLocations ? Object.values(event.virtualLocations)[0]?.uri || "" : ""
+  );
   const [startDate, setStartDate] = useState(formatDateInput(getInitialStart()));
   const [startTime, setStartTime] = useState(formatTimeInput(getInitialStart()));
   const [endDate, setEndDate] = useState(formatDateInput(getInitialEnd()));
@@ -197,6 +202,7 @@ export function EventModal({
   const [allDay, setAllDay] = useState(event?.showWithoutTime || false);
   const [calendarId, setCalendarId] = useState<string>(() => {
     if (event?.calendarIds) return getPrimaryCalendarId(event) || calendars[0]?.id || "";
+    if (defaultCalendarId && calendars.some(c => c.id === defaultCalendarId)) return defaultCalendarId;
     const defaultCal = calendars.find(c => c.isDefault);
     return defaultCal?.id || calendars[0]?.id || "";
   });
@@ -230,6 +236,7 @@ export function EventModal({
       .map(p => ({ name: p.name, email: p.email }));
   });
   const [sendInvitations, setSendInvitations] = useState(true);
+  const participantInputRef = useRef<ParticipantInputHandle>(null);
 
   // Report live preview to parent for grid outline
   useEffect(() => {
@@ -261,6 +268,9 @@ export function EventModal({
     if (!trimmedTitle || isSaving) return;
     if (trimmedTitle.length > 500 || description.trim().length > 10000 || location.trim().length > 500) return;
 
+    const pendingAttendee = participantInputRef.current?.flush() ?? null;
+    const effectiveAttendees = pendingAttendee ? [...attendees, pendingAttendee] : attendees;
+
     const startStr = allDay
       ? `${startDate}T00:00:00`
       : `${startDate}T${startTime}:00`;
@@ -298,6 +308,10 @@ export function EventModal({
       privacy: "public",
     };
 
+    if (!event) {
+      data.uid = generateUUID();
+    }
+
     if (location.trim()) {
       data.locations = {
         loc1: {
@@ -315,6 +329,20 @@ export function EventModal({
       data.locations = null;
     }
 
+    if (virtualLocation.trim()) {
+      data.virtualLocations = {
+        vl1: {
+          "@type": "VirtualLocation",
+          name: null,
+          description: null,
+          uri: virtualLocation.trim(),
+          features: null,
+        },
+      };
+    } else if (event && event.virtualLocations && Object.keys(event.virtualLocations).length > 0) {
+      data.virtualLocations = null;
+    }
+
     if (recurrence !== "none") {
       data.recurrenceRules = [{
         "@type": "RecurrenceRule",
@@ -356,25 +384,27 @@ export function EventModal({
       data.alerts = null;
     }
 
-    if (attendees.length > 0 && currentUserEmails.length > 0) {
+    if (effectiveAttendees.length > 0 && currentUserEmails.length > 0) {
       const organizerEmail = currentUserEmails[0];
       const organizerName = existingParticipants.find(p => p.isOrganizer)?.name || "";
       data.participants = buildParticipantMap(
         { name: organizerName, email: organizerEmail },
-        attendees
+        effectiveAttendees
       ) as Record<string, CalendarParticipant>;
-    } else if (attendees.length === 0 && event?.participants) {
+      data.replyTo = { imip: `mailto:${organizerEmail}` };
+    } else if (effectiveAttendees.length === 0 && event?.participants) {
       data.participants = null;
+      data.replyTo = null;
     }
 
-    const shouldSendScheduling = attendees.length > 0 && sendInvitations;
+    const shouldSendScheduling = effectiveAttendees.length > 0 && sendInvitations;
     setIsSaving(true);
     try {
       await onSave(data, shouldSendScheduling);
     } finally {
       setIsSaving(false);
     }
-  }, [title, description, location, startDate, startTime, endDate, endTime, allDay, calendarId, recurrence, alert, attendees, sendInvitations, currentUserEmails, existingParticipants, event, onSave, isSaving]);
+  }, [title, description, location, virtualLocation, startDate, startTime, endDate, endTime, allDay, calendarId, recurrence, alert, attendees, sendInvitations, currentUserEmails, existingParticipants, event, onSave, isSaving]);
 
   const handleRsvp = useCallback((status: CalendarParticipant['participationStatus']) => {
     if (!event || !userParticipantId || !onRsvp) return;
@@ -384,11 +414,9 @@ export function EventModal({
 
   const handleDuplicate = useCallback(() => {
     if (!event || !onDuplicate) return;
-    const start = parseISO(event.start);
+    const start = getEventStartDate(event);
     const newStart = addDays(start, 1);
-    const newUid = typeof crypto !== 'undefined' && crypto.randomUUID
+    const newUid = generateUUID();
-      ? crypto.randomUUID()
-      : `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
     const data: Partial<CalendarEvent> = {
       uid: newUid,
       title: event.title,
@@ -403,6 +431,7 @@ export function EventModal({
       privacy: event.privacy,
     };
     if (event.locations) data.locations = structuredClone(event.locations);
+    if (event.virtualLocations) data.virtualLocations = structuredClone(event.virtualLocations);
     if (event.recurrenceRules) data.recurrenceRules = structuredClone(event.recurrenceRules);
     if (event.alerts) data.alerts = structuredClone(event.alerts);
     if (event.participants) data.participants = structuredClone(event.participants);
@@ -456,9 +485,9 @@ export function EventModal({
   const hasParticipants = attendees.length > 0 || (event?.participants && Object.keys(event.participants).length > 0);
 
   if (isAttendeeMode && event) {
-    const startD = parseISO(event.start);
+    const startD = getEventStartDate(event);
     const durMin = parseDuration(event.duration);
-    const endD = new Date(startD.getTime() + durMin * 60000);
+    const endD = getEventEndDate(event);
     const locationName = event.locations ? Object.values(event.locations)[0]?.name : null;
     const participants = getParticipantList(event);
 
@@ -567,9 +596,9 @@ export function EventModal({
 
   // View mode: read-only display of event details with Edit button
   if (mode === "view" && event) {
-    const startD = parseISO(event.start);
+    const startD = getEventStartDate(event);
     const durMin = parseDuration(event.duration);
-    const endD = new Date(startD.getTime() + durMin * 60000);
+    const endD = getEventEndDate(event);
     const locationName = event.locations ? Object.values(event.locations)[0]?.name || null : null;
     const virtualLoc = event.virtualLocations ? Object.values(event.virtualLocations)[0]?.uri || null : null;
     const viewParticipants = getParticipantList(event);
@@ -780,6 +809,39 @@ export function EventModal({
             />
           </div>
 
+          <div>
+            <label className="text-sm font-medium mb-1 block">
+              <span className="flex items-center gap-1.5">
+                <Video className="w-4 h-4" />
+                {t("form.meeting_link")}
+              </span>
+            </label>
+            <Input
+              type="url"
+              value={virtualLocation}
+              onChange={(e) => setVirtualLocation(e.target.value)}
+              placeholder="https://meet.example.com/..."
+              maxLength={2000}
+            />
+            <PluginSlot
+              name="calendar-event-actions"
+              className="mt-2 flex flex-wrap gap-2"
+              extraProps={{
+                eventData: {
+                  title,
+                  description,
+                  start: startDate + 'T' + startTime,
+                  end: endDate + 'T' + endTime,
+                  isAllDay: allDay,
+                  location,
+                  virtualLocation,
+                  calendarId,
+                },
+                setVirtualLocation,
+              }}
+            />
+          </div>
+
           <div>
             <label className="text-sm font-medium mb-1 block">
               <span className="flex items-center gap-1.5">
@@ -788,6 +850,7 @@ export function EventModal({
               </span>
             </label>
             <ParticipantInput
+              ref={participantInputRef}
               participants={attendees}
               onAdd={handleAddAttendee}
               onRemove={handleRemoveAttendee}

components/calendar/ical-import-modal.tsx

@@ -7,9 +7,11 @@ import { X, Upload, Check, Loader2, RefreshCw, Globe } from "lucide-react";
 import { format, parseISO } from "date-fns";
 import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
 import type { IJMAPClient } from '@/lib/jmap/client-interface';
+import { getEventStartDate } from "@/lib/calendar-utils";
 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[];
@@ -17,7 +19,7 @@ interface ICalImportModalProps {
   onClose: () => void;
 }
 
-const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
 const ACCEPTED_EXTENSIONS = [".ics", ".ical"];
 
 type ImportStep = "select" | "preview" | "importing";
@@ -125,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 }),
@@ -195,7 +197,7 @@ export function ICalImportModal({ calendars, client, onClose }: ICalImportModalP
   const formatEventDate = (event: Partial<CalendarEvent>): string => {
     if (!event.start) return "";
     try {
-      const date = parseISO(event.start);
+      const date = getEventStartDate(event as CalendarEvent);
       const timeFmt = timeFormat === "12h" ? "h:mm a" : "HH:mm";
       return event.showWithoutTime
         ? format(date, "MMM d, yyyy")

components/calendar/ical-subscription-modal.tsx

@@ -5,24 +5,28 @@ import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { X, Loader2, Globe } from "lucide-react";
 import type { IJMAPClient } from '@/lib/jmap/client-interface';
-import { useCalendarStore } from "@/stores/calendar-store";
+import { useCalendarStore, type ICalSubscription } from "@/stores/calendar-store";
 import { CalendarColorPicker } from "@/components/settings/calendar-management-settings";
 import { toast } from "@/stores/toast-store";
 
 interface ICalSubscriptionModalProps {
   client: IJMAPClient;
   onClose: () => void;
+  editSubscription?: ICalSubscription;
 }
 
-export function ICalSubscriptionModal({ client, onClose }: ICalSubscriptionModalProps) {
+export function ICalSubscriptionModal({ client, onClose, editSubscription }: ICalSubscriptionModalProps) {
   const t = useTranslations("calendar.subscription");
   const tCommon = useTranslations("common");
   const addICalSubscription = useCalendarStore((s) => s.addICalSubscription);
+  const updateICalSubscription = useCalendarStore((s) => s.updateICalSubscription);
 
-  const [url, setUrl] = useState("");
+  const isEdit = !!editSubscription;
-  const [name, setName] = useState("");
+
-  const [color, setColor] = useState("#3b82f6");
+  const [url, setUrl] = useState(editSubscription?.url || "");
-  const [refreshInterval, setRefreshInterval] = useState(60);
+  const [name, setName] = useState(editSubscription?.name || "");
+  const [color, setColor] = useState(editSubscription?.color || "#3b82f6");
+  const [refreshInterval, setRefreshInterval] = useState(editSubscription?.refreshInterval || 60);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const modalRef = useRef<HTMLDivElement>(null);
@@ -49,15 +53,26 @@ export function ICalSubscriptionModal({ client, onClose }: ICalSubscriptionModal
     setIsSubmitting(true);
 
     try {
-      const subscription = await addICalSubscription(client, trimmedUrl, name.trim(), color, refreshInterval);
+      if (isEdit && editSubscription) {
-      if (subscription) {
+        const updates: { url?: string; name?: string; color?: string; refreshInterval?: number } = {};
-        toast.success(t("success", { name: name.trim() }));
+        if (trimmedUrl !== editSubscription.url) updates.url = trimmedUrl;
+        if (name.trim() !== editSubscription.name) updates.name = name.trim();
+        if (color !== editSubscription.color) updates.color = color;
+        if (refreshInterval !== editSubscription.refreshInterval) updates.refreshInterval = refreshInterval;
+        await updateICalSubscription(client, editSubscription.id, updates);
+        toast.success(t("updated", { name: name.trim() }));
         onClose();
       } else {
-        setError(t("error"));
+        const subscription = await addICalSubscription(client, trimmedUrl, name.trim(), color, refreshInterval);
+        if (subscription) {
+          toast.success(t("success", { name: name.trim() }));
+          onClose();
+        } else {
+          setError(t("error"));
+        }
       }
     } catch {
-      setError(t("error"));
+      setError(isEdit ? t("update_error") : t("error"));
     } finally {
       setIsSubmitting(false);
     }
@@ -108,7 +123,7 @@ export function ICalSubscriptionModal({ client, onClose }: ICalSubscriptionModal
         <div className="flex items-center justify-between px-6 py-4 border-b border-border">
           <div className="flex items-center gap-2">
             <Globe className="w-5 h-5 text-primary" />
-            <h2 className="text-lg font-semibold">{t("title")}</h2>
+            <h2 className="text-lg font-semibold">{isEdit ? t("edit_title") : t("title")}</h2>
           </div>
           <button
             onClick={onClose}
@@ -192,10 +207,10 @@ export function ICalSubscriptionModal({ client, onClose }: ICalSubscriptionModal
             {isSubmitting ? (
               <>
                 <Loader2 className="w-4 h-4 animate-spin mr-2" />
-                {t("subscribing")}
+                {isEdit ? t("saving") : t("subscribing")}
               </>
             ) : (
-              t("subscribe")
+              isEdit ? t("save") : t("subscribe")
             )}
           </Button>
         </div>

components/calendar/mini-calendar.tsx

@@ -7,9 +7,10 @@ import {
   startOfMonth, endOfMonth, startOfWeek, endOfWeek,
   addMonths, subMonths, addYears, subYears, setMonth, setYear,
   eachDayOfInterval, getMonth, getYear, getISOWeek, getWeek,
-  isSameDay, isSameMonth, isToday, format, parseISO,
+  isSameDay, isSameMonth, isToday, format,
 } from "date-fns";
 import { cn } from "@/lib/utils";
+import { getEventDayBounds } from "@/lib/calendar-utils";
 import type { CalendarEvent } from "@/lib/jmap/types";
 
 type PickerView = "days" | "months" | "years";
@@ -54,7 +55,14 @@ export function MiniCalendar({
   const eventDates = useMemo(() => {
     const set = new Set<string>();
     events.forEach(e => {
-      try { set.add(format(parseISO(e.start), "yyyy-MM-dd")); } catch { /* skip */ }
+      try {
+        const { startDay, endDay } = getEventDayBounds(e);
+        const cursor = new Date(startDay);
+        while (cursor <= endDay) {
+          set.add(format(cursor, "yyyy-MM-dd"));
+          cursor.setDate(cursor.getDate() + 1);
+        }
+      } catch { /* skip */ }
     });
     return set;
   }, [events]);

components/calendar/participant-input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useRef, useCallback, useEffect } from "react";
+import { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHandle } from "react";
 import { useTranslations } from "next-intl";
 import { X } from "lucide-react";
 import { Input } from "@/components/ui/input";
@@ -18,9 +18,13 @@ interface ParticipantInputProps {
   disabled?: boolean;
 }
 
+export interface ParticipantInputHandle {
+  flush: () => Participant | null;
+}
+
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
-export function ParticipantInput({ participants, onAdd, onRemove, disabled }: ParticipantInputProps) {
+export const ParticipantInput = forwardRef<ParticipantInputHandle, ParticipantInputProps>(function ParticipantInput({ participants, onAdd, onRemove, disabled }, ref) {
   const t = useTranslations("calendar.participants");
   const [query, setQuery] = useState("");
   const [suggestions, setSuggestions] = useState<Participant[]>([]);
@@ -86,8 +90,26 @@ export function ParticipantInput({ participants, onAdd, onRemove, disabled }: Pa
   }, [showSuggestions, activeIndex, suggestions, query, addParticipant]);
 
   const handleBlur = useCallback(() => {
+    const trimmed = query.trim();
+    if (trimmed && EMAIL_REGEX.test(trimmed)) {
+      addParticipant({ name: "", email: trimmed });
+    }
     setTimeout(() => setShowSuggestions(false), 200);
-  }, []);
+  }, [query, addParticipant]);
+
+  useImperativeHandle(ref, () => ({
+    flush: () => {
+      const trimmed = query.trim();
+      if (!trimmed || !EMAIL_REGEX.test(trimmed)) return null;
+      if (participants.some(e => e.email.toLowerCase() === trimmed.toLowerCase())) return null;
+      const p = { name: "", email: trimmed };
+      onAdd(p);
+      setQuery("");
+      setSuggestions([]);
+      setShowSuggestions(false);
+      return p;
+    },
+  }), [query, participants, onAdd]);
 
   return (
     <div className="space-y-2">
@@ -143,7 +165,22 @@ export function ParticipantInput({ participants, onAdd, onRemove, disabled }: Pa
               key={`${p.email}-${i}`}
               className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full bg-muted text-foreground max-w-[200px]"
             >
-              <span className="truncate">{p.name || p.email}</span>
+              {!disabled ? (
+                <button
+                  type="button"
+                  onClick={() => {
+                    onRemove(p.email);
+                    setQuery(p.email);
+                    setTimeout(() => inputRef.current?.focus(), 0);
+                  }}
+                  className="truncate hover:underline focus:outline-none focus:underline cursor-text"
+                  aria-label={`${t("edit")} ${p.name || p.email}`}
+                >
+                  {p.name || p.email}
+                </button>
+              ) : (
+                <span className="truncate">{p.name || p.email}</span>
+              )}
               {!disabled && (
                 <button
                   type="button"
@@ -160,4 +197,4 @@ export function ParticipantInput({ participants, onAdd, onRemove, disabled }: Pa
       )}
     </div>
   );
-}
+});

components/contacts/__tests__/contact-detail.test.tsx

@@ -60,10 +60,8 @@ describe('ContactDetail', () => {
   it('calls onDelete when delete button is clicked', () => {
     const onDelete = vi.fn();
     render(<ContactDetail contact={contact} onEdit={vi.fn()} onDelete={onDelete} />);
-    const deleteButton = screen.getAllByRole('button').find(
+    fireEvent.click(screen.getByLabelText('detail.more_actions'));
-      btn => btn.className.includes('text-red')
+    fireEvent.click(screen.getByRole('menuitem', { name: /context_menu\.delete/ }));
-    );
-    fireEvent.click(deleteButton!);
     expect(onDelete).toHaveBeenCalledOnce();
   });
 });

components/contacts/__tests__/contact-list.test.tsx

@@ -36,7 +36,6 @@ const defaultProps = {
   onSearchChange: vi.fn(),
   onSelectContact: vi.fn(),
   onCreateNew: vi.fn(),
-  categoryLabel: 'All Contacts',
   selectedContactIds: new Set<string>(),
   onToggleSelection: vi.fn(),
   onSelectRangeContacts: vi.fn(),
@@ -45,6 +44,9 @@ const defaultProps = {
   onBulkDelete: vi.fn(),
   onBulkAddToGroup: vi.fn(),
   onBulkExport: vi.fn(),
+  onEditContact: vi.fn(),
+  onDeleteContact: vi.fn(),
+  onAddContactToGroup: vi.fn(),
 };
 
 describe('ContactList', () => {
@@ -76,8 +78,4 @@ describe('ContactList', () => {
     expect(screen.getByText('bulk.export')).toBeInTheDocument();
   });
 
-  it('shows category label with count', () => {
-    render(<ContactList {...defaultProps} />);
-    expect(screen.getByText('All Contacts (2)')).toBeInTheDocument();
-  });
 });

components/contacts/contact-activity.tsx

@@ -0,0 +1,306 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTranslations, useFormatter } from "next-intl";
+import { Loader2 } from "lucide-react";
+import { useRouter } from "@/i18n/navigation";
+import { useAuthStore } from "@/stores/auth-store";
+import { useEmailStore } from "@/stores/email-store";
+import { useCalendarStore } from "@/stores/calendar-store";
+import { Avatar } from "@/components/ui/avatar";
+import { Section } from "./contact-detail";
+import type { ContactCard, Email, CalendarEvent } from "@/lib/jmap/types";
+
+const EMAIL_LIMIT = 5;
+const EVENT_LIMIT = 5;
+const EVENT_LOOKAHEAD_DAYS = 365;
+
+interface ContactActivityProps {
+  contact: ContactCard;
+}
+
+function getContactEmails(contact: ContactCard): string[] {
+  if (!contact.emails) return [];
+  const seen = new Set<string>();
+  const result: string[] = [];
+  for (const e of Object.values(contact.emails)) {
+    const addr = e.address?.trim().toLowerCase();
+    if (addr && !seen.has(addr)) {
+      seen.add(addr);
+      result.push(addr);
+    }
+  }
+  return result;
+}
+
+function buildEmailFilter(addresses: string[]): Record<string, unknown> {
+  const conditions: Record<string, unknown>[] = [];
+  for (const addr of addresses) {
+    conditions.push({ from: addr });
+    conditions.push({ to: addr });
+  }
+  if (conditions.length === 1) return conditions[0];
+  return { operator: "OR", conditions };
+}
+
+function eventInvolvesContact(event: CalendarEvent, addresses: Set<string>): boolean {
+  if (event.participants) {
+    for (const p of Object.values(event.participants)) {
+      const email = p.email?.trim().toLowerCase();
+      if (email && addresses.has(email)) return true;
+      if (p.sendTo) {
+        for (const target of Object.values(p.sendTo)) {
+          const m = typeof target === "string" ? target.match(/mailto:(.+)/i) : null;
+          if (m && addresses.has(m[1].trim().toLowerCase())) return true;
+        }
+      }
+    }
+  }
+  if (event.organizerCalendarAddress) {
+    const m = event.organizerCalendarAddress.match(/mailto:(.+)/i);
+    const org = m ? m[1].trim().toLowerCase() : event.organizerCalendarAddress.trim().toLowerCase();
+    if (addresses.has(org)) return true;
+  }
+  return false;
+}
+
+function getEmailSender(email: Email): { name: string; address: string } {
+  const from = email.from?.[0];
+  return {
+    name: from?.name?.trim() || from?.email || "",
+    address: from?.email || "",
+  };
+}
+
+function groupEventsByDate(events: CalendarEvent[]): Map<string, CalendarEvent[]> {
+  const groups = new Map<string, CalendarEvent[]>();
+  for (const e of events) {
+    const d = new Date(e.start);
+    const key = isNaN(d.getTime()) ? e.start : d.toISOString().slice(0, 10);
+    const arr = groups.get(key) || [];
+    arr.push(e);
+    groups.set(key, arr);
+  }
+  return groups;
+}
+
+export function ContactActivity({ contact }: ContactActivityProps) {
+  const t = useTranslations("contacts.activity");
+  const format = useFormatter();
+  const router = useRouter();
+  const client = useAuthStore((s) => s.client);
+  const selectEmail = useEmailStore((s) => s.selectEmail);
+  const setSelectedEventId = useCalendarStore((s) => s.setSelectedEventId);
+  const setSelectedDate = useCalendarStore((s) => s.setSelectedDate);
+
+  const [emails, setEmails] = useState<Email[] | null>(null);
+  const [events, setEvents] = useState<CalendarEvent[] | null>(null);
+  const [emailsLoading, setEmailsLoading] = useState(false);
+  const [eventsLoading, setEventsLoading] = useState(false);
+  const [emailsError, setEmailsError] = useState(false);
+  const [eventsError, setEventsError] = useState(false);
+
+  const addresses = getContactEmails(contact);
+  const addressKey = addresses.join(",");
+
+  useEffect(() => {
+    if (!client || addresses.length === 0) {
+      setEmails([]);
+      return;
+    }
+    let cancelled = false;
+    setEmailsLoading(true);
+    setEmailsError(false);
+    client
+      .advancedSearchEmails(buildEmailFilter(addresses), undefined, EMAIL_LIMIT, 0)
+      .then((res) => {
+        if (cancelled) return;
+        setEmails(res.emails);
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setEmailsError(true);
+        setEmails([]);
+      })
+      .finally(() => {
+        if (!cancelled) setEmailsLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, addressKey]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (!client || addresses.length === 0) {
+      setEvents([]);
+      return;
+    }
+    let cancelled = false;
+    setEventsLoading(true);
+    setEventsError(false);
+    const now = new Date();
+    const before = new Date(now.getTime() + EVENT_LOOKAHEAD_DAYS * 24 * 60 * 60 * 1000);
+    const addrSet = new Set(addresses);
+    client
+      .queryAllCalendarEvents(
+        { after: now.toISOString(), before: before.toISOString() },
+        [{ property: "start", isAscending: true }],
+        500,
+      )
+      .then((all) => {
+        if (cancelled) return;
+        const matching = all
+          .filter((e) => eventInvolvesContact(e, addrSet))
+          .sort((a, b) => a.start.localeCompare(b.start))
+          .slice(0, EVENT_LIMIT);
+        setEvents(matching);
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setEventsError(true);
+        setEvents([]);
+      })
+      .finally(() => {
+        if (!cancelled) setEventsLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, addressKey]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (addresses.length === 0) return null;
+
+  const handleOpenEmail = (email: Email) => {
+    selectEmail(email);
+    router.push("/mail");
+  };
+
+  const handleOpenEvent = (event: CalendarEvent) => {
+    const start = new Date(event.start);
+    if (!isNaN(start.getTime())) setSelectedDate(start);
+    setSelectedEventId(event.id);
+    router.push("/calendar");
+  };
+
+  const formatEmailDate = (dateStr: string) => {
+    const d = new Date(dateStr);
+    if (isNaN(d.getTime())) return dateStr;
+    const now = new Date();
+    const sameYear = d.getFullYear() === now.getFullYear();
+    return format.dateTime(d, sameYear
+      ? { month: "short", day: "numeric" }
+      : { year: "numeric", month: "short", day: "numeric" });
+  };
+
+  const formatEventTime = (event: CalendarEvent) => {
+    if (event.showWithoutTime) return t("all_day");
+    const d = new Date(event.start);
+    if (isNaN(d.getTime())) return "";
+    return format.dateTime(d, { hour: "numeric", minute: "2-digit" });
+  };
+
+  const formatEventDateHeader = (isoDate: string) => {
+    const d = new Date(isoDate);
+    if (isNaN(d.getTime())) return isoDate;
+    const now = new Date();
+    const sameYear = d.getFullYear() === now.getFullYear();
+    return format.dateTime(d, sameYear
+      ? { weekday: "long", month: "long", day: "numeric" }
+      : { weekday: "long", year: "numeric", month: "long", day: "numeric" });
+  };
+
+  const eventGroups = events ? Array.from(groupEventsByDate(events).entries()) : [];
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 lg:gap-x-8">
+      <Section title={t("recent_emails")}>
+        {emailsLoading ? (
+          <LoadingRow />
+        ) : emailsError ? (
+          <p className="text-sm text-muted-foreground">{t("load_failed")}</p>
+        ) : !emails || emails.length === 0 ? (
+          <p className="text-sm text-muted-foreground">{t("no_emails")}</p>
+        ) : (
+          <div className="-mx-2">
+            {emails.map((email) => {
+              const sender = getEmailSender(email);
+              return (
+                <button
+                  key={email.id}
+                  type="button"
+                  onClick={() => handleOpenEmail(email)}
+                  className="w-full text-left flex items-start gap-3 px-2 py-2 rounded-md hover:bg-muted/60 transition-colors touch-manipulation"
+                >
+                  <Avatar name={sender.name} email={sender.address} size="sm" />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-baseline justify-between gap-2">
+                      <span className="text-sm font-medium truncate">
+                        {sender.name || t("unknown_sender")}
+                      </span>
+                      <span className="text-xs text-muted-foreground flex-shrink-0">
+                        {formatEmailDate(email.receivedAt)}
+                      </span>
+                    </div>
+                    <div className="text-sm truncate">
+                      {email.subject || t("no_subject")}
+                    </div>
+                    {email.preview && (
+                      <p className="text-xs text-muted-foreground truncate mt-0.5">
+                        {email.preview}
+                      </p>
+                    )}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </Section>
+
+      <Section title={t("upcoming_events")}>
+        {eventsLoading ? (
+          <LoadingRow />
+        ) : eventsError ? (
+          <p className="text-sm text-muted-foreground">{t("load_failed")}</p>
+        ) : !events || events.length === 0 ? (
+          <p className="text-sm text-muted-foreground">{t("no_events")}</p>
+        ) : (
+          <div className="space-y-4">
+            {eventGroups.map(([dateKey, group]) => (
+              <div key={dateKey}>
+                <div className="text-xs font-medium text-muted-foreground mb-1.5">
+                  {formatEventDateHeader(dateKey)}
+                </div>
+                <div className="-mx-2">
+                  {group.map((event) => (
+                    <button
+                      key={event.id}
+                      type="button"
+                      onClick={() => handleOpenEvent(event)}
+                      className="w-full text-left flex items-baseline gap-3 px-2 py-2 rounded-md hover:bg-muted/60 transition-colors touch-manipulation"
+                    >
+                      <span className="text-xs text-muted-foreground tabular-nums w-20 flex-shrink-0">
+                        {formatEventTime(event)}
+                      </span>
+                      <span className="text-sm truncate flex-1 min-w-0">
+                        {event.title || t("no_title")}
+                      </span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </Section>
+    </div>
+  );
+}
+
+function LoadingRow() {
+  return (
+    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+      <Loader2 className="w-4 h-4 animate-spin" />
+    </div>
+  );
+}

components/contacts/contact-context-menu.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import {
+  ContextMenu,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuHeader,
+} from "@/components/ui/context-menu";
+import {
+  Eye,
+  Pencil,
+  Mail,
+  Phone,
+  ClipboardCopy,
+  Download,
+  Users,
+  Trash2,
+  Copy,
+  Printer,
+} from "lucide-react";
+import type { ContactCard } from "@/lib/jmap/types";
+import { getContactPrimaryEmail } from "@/stores/contact-store";
+import { exportContact } from "./contact-export";
+import { printContact } from "./contact-print";
+import { toast } from "@/stores/toast-store";
+
+function getContactPrimaryPhone(contact: ContactCard): string {
+  if (!contact.phones) return "";
+  return Object.values(contact.phones)[0]?.number || "";
+}
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+interface ContactContextMenuProps {
+  contact: ContactCard;
+  position: Position;
+  isOpen: boolean;
+  onClose: () => void;
+  menuRef: React.RefObject<HTMLDivElement | null>;
+  isMultiSelect?: boolean;
+  selectedCount?: number;
+  onOpen: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+  onAddToGroup: () => void;
+  onDuplicate?: () => void;
+  onBatchExport?: () => void;
+  onBatchAddToGroup?: () => void;
+  onBatchDelete?: () => void;
+}
+
+export function ContactContextMenu({
+  contact,
+  position,
+  isOpen,
+  onClose,
+  menuRef,
+  isMultiSelect = false,
+  selectedCount = 1,
+  onOpen,
+  onEdit,
+  onDelete,
+  onAddToGroup,
+  onDuplicate,
+  onBatchExport,
+  onBatchAddToGroup,
+  onBatchDelete,
+}: ContactContextMenuProps) {
+  const t = useTranslations("contacts");
+  const email = getContactPrimaryEmail(contact);
+  const phone = getContactPrimaryPhone(contact);
+  const showBatchActions = isMultiSelect && selectedCount > 1;
+
+  const handle = (fn: () => void) => () => {
+    fn();
+    onClose();
+  };
+
+  const handleSendEmail = () => {
+    if (!email) return;
+    window.location.href = `mailto:${email}`;
+  };
+
+  const handleCall = () => {
+    if (!phone) return;
+    window.location.href = `tel:${phone}`;
+  };
+
+  const handleCopy = async (value: string) => {
+    if (!value) return;
+    try {
+      await navigator.clipboard.writeText(value);
+      toast.success(t("detail.copied"));
+    } catch {
+      toast.error(t("detail.copy_failed"));
+    }
+  };
+
+  const handleExport = () => {
+    exportContact(contact);
+    toast.success(t("export.success", { count: 1 }));
+  };
+
+  const handlePrint = () => {
+    printContact(contact);
+  };
+
+  if (showBatchActions) {
+    return (
+      <ContextMenu ref={menuRef} isOpen={isOpen} position={position} onClose={onClose}>
+        <ContextMenuHeader>
+          {t("bulk.selected", { count: selectedCount })}
+        </ContextMenuHeader>
+        <ContextMenuItem
+          icon={Users}
+          label={t("bulk.add_to_group")}
+          onClick={handle(() => onBatchAddToGroup?.())}
+          disabled={!onBatchAddToGroup}
+        />
+        <ContextMenuItem
+          icon={Download}
+          label={t("bulk.export")}
+          onClick={handle(() => onBatchExport?.())}
+          disabled={!onBatchExport}
+        />
+        <ContextMenuSeparator />
+        <ContextMenuItem
+          icon={Trash2}
+          label={t("bulk.delete")}
+          onClick={handle(() => onBatchDelete?.())}
+          disabled={!onBatchDelete}
+          destructive
+        />
+      </ContextMenu>
+    );
+  }
+
+  return (
+    <ContextMenu ref={menuRef} isOpen={isOpen} position={position} onClose={onClose}>
+      <ContextMenuItem icon={Eye} label={t("context_menu.open")} onClick={handle(onOpen)} />
+      <ContextMenuItem icon={Pencil} label={t("context_menu.edit")} onClick={handle(onEdit)} />
+      {(email || phone) && <ContextMenuSeparator />}
+      {email && (
+        <ContextMenuItem
+          icon={Mail}
+          label={t("context_menu.send_email")}
+          onClick={handle(handleSendEmail)}
+        />
+      )}
+      {phone && (
+        <ContextMenuItem
+          icon={Phone}
+          label={t("context_menu.call")}
+          onClick={handle(handleCall)}
+        />
+      )}
+      {email && (
+        <ContextMenuItem
+          icon={ClipboardCopy}
+          label={t("detail.copy_email")}
+          onClick={handle(() => handleCopy(email))}
+        />
+      )}
+      {phone && (
+        <ContextMenuItem
+          icon={ClipboardCopy}
+          label={t("detail.copy_phone")}
+          onClick={handle(() => handleCopy(phone))}
+        />
+      )}
+      <ContextMenuSeparator />
+      <ContextMenuItem
+        icon={Users}
+        label={t("context_menu.add_to_group")}
+        onClick={handle(onAddToGroup)}
+      />
+      {onDuplicate && (
+        <ContextMenuItem
+          icon={Copy}
+          label={t("context_menu.duplicate")}
+          onClick={handle(onDuplicate)}
+        />
+      )}
+      <ContextMenuItem
+        icon={Download}
+        label={t("context_menu.export_vcard")}
+        onClick={handle(handleExport)}
+      />
+      <ContextMenuItem
+        icon={Printer}
+        label={t("context_menu.print")}
+        onClick={handle(handlePrint)}
+      />
+      <ContextMenuSeparator />
+      <ContextMenuItem
+        icon={Trash2}
+        label={t("context_menu.delete")}
+        onClick={handle(onDelete)}
+        destructive
+      />
+    </ContextMenu>
+  );
+}

components/contacts/contact-detail.tsx

@@ -1,22 +1,37 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useTranslations } from "next-intl";
-import { Mail, Phone, Building, MapPin, StickyNote, Pencil, Trash2, BookUser, Copy, Send, Globe, Cake, Tag, KeyRound, Users, Briefcase, Heart, Languages, Calendar, UserCircle, ShieldCheck, ShieldAlert, Download } from "lucide-react";
+import { Mail, Phone, Building, MapPin, StickyNote, Pencil, Trash2, BookUser, Copy, Send, Globe, Cake, KeyRound, Users, Briefcase, Heart, Languages, Calendar, UserCircle, ShieldCheck, ShieldAlert, Download, MoreHorizontal, Printer } from "lucide-react";
 import { Avatar } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import type { ContactCard, AnniversaryDate, PartialDate } from "@/lib/jmap/types";
-import { getContactDisplayName, getContactPrimaryEmail } from "@/stores/contact-store";
+import { getContactDisplayName, getContactPrimaryEmail, getContactPhotoUri } from "@/stores/contact-store";
+import { ContactActivity } from "./contact-activity";
 import { useSmimeStore } from "@/stores/smime-store";
 import { parseCertificatePemOrDer, extractCertificateInfo } from "@/lib/smime/certificate-utils";
 import type { CertificateInfo } from "@/lib/smime/types";
 import { toast } from "@/stores/toast-store";
+import { exportContact } from "./contact-export";
+import { printContact } from "./contact-print";
+
+type MoreItem =
+  | {
+      icon: React.ComponentType<{ className?: string }>;
+      label: string;
+      onClick: () => void;
+      destructive?: boolean;
+      separator?: false;
+    }
+  | { separator: true };
 
 interface ContactDetailProps {
   contact: ContactCard | null;
   onEdit: () => void;
   onDelete: () => void;
+  onAddToGroup?: () => void;
+  onDuplicate?: () => void;
   isMobile?: boolean;
   className?: string;
 }
@@ -26,9 +41,45 @@ function formatPhoneFeatures(features?: Record<string, boolean>): string {
   return Object.keys(features).filter(k => features[k]).join(", ");
 }
 
+function getDateParts(dateInput: AnniversaryDate): { year?: number; month?: number; day?: number } {
+  if (typeof dateInput === "object" && dateInput !== null) {
+    if (dateInput["@type"] === "Timestamp" && typeof dateInput.utc === "string") {
+      const d = new Date(dateInput.utc);
+      if (!isNaN(d.getTime())) {
+        return { year: d.getUTCFullYear(), month: d.getUTCMonth() + 1, day: d.getUTCDate() };
+      }
+      return {};
+    }
+    const pd = dateInput as PartialDate;
+    return { year: pd.year, month: pd.month, day: pd.day };
+  }
+  const s = String(dateInput);
+  if (s.startsWith("--")) {
+    const parts = s.substring(2).split("-");
+    return { month: parseInt(parts[0], 10), day: parts[1] ? parseInt(parts[1], 10) : undefined };
+  }
+  const d = new Date(s);
+  if (!isNaN(d.getTime())) {
+    return { year: d.getFullYear(), month: d.getMonth() + 1, day: d.getDate() };
+  }
+  return {};
+}
+
+function getCompletedYears(dateInput: AnniversaryDate): number | null {
+  const { year, month, day } = getDateParts(dateInput);
+  if (!year) return null;
+  const now = new Date();
+  let years = now.getFullYear() - year;
+  const m = month ?? 1;
+  const d = day ?? 1;
+  const nowM = now.getMonth() + 1;
+  const nowD = now.getDate();
+  if (nowM < m || (nowM === m && nowD < d)) years -= 1;
+  if (years < 0) return null;
+  return years;
+}
+
 function formatDate(dateInput: AnniversaryDate): string {
-  // Handle RFC 9553 PartialDate objects: { year?, month?, day?, calendarScale? }
-  // Handle RFC 9553 Timestamp objects: { "@type": "Timestamp", utc: "..." }
   if (typeof dateInput === 'object' && dateInput !== null) {
     if (dateInput['@type'] === 'Timestamp' && typeof dateInput.utc === 'string') {
       try {
@@ -40,20 +91,15 @@ function formatDate(dateInput: AnniversaryDate): string {
       return String(dateInput.utc);
     }
     const pd = dateInput as PartialDate;
-    const year = pd.year;
-    const month = pd.month;
-    const day = pd.day;
     const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
     const parts: string[] = [];
-    if (month && monthNames[month - 1]) parts.push(monthNames[month - 1]);
+    if (pd.month && monthNames[pd.month - 1]) parts.push(monthNames[pd.month - 1]);
-    if (day) parts.push(String(day));
+    if (pd.day) parts.push(String(pd.day));
-    if (year) parts.push(String(year));
+    if (pd.year) parts.push(String(pd.year));
     return parts.join(' ') || String(dateInput);
   }
   const dateStr = String(dateInput);
-  // Handle both ISO dates and partial dates like 1990-01-15 or --01-15
   if (dateStr.startsWith("--")) {
-    // Partial date without year
     const parts = dateStr.substring(2).split("-");
     const month = parseInt(parts[0], 10);
     const day = parts[1] ? parseInt(parts[1], 10) : undefined;
@@ -69,7 +115,7 @@ function formatDate(dateInput: AnniversaryDate): string {
   return dateStr;
 }
 
-export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }: ContactDetailProps) {
+export function ContactDetail({ contact, onEdit, onDelete, onAddToGroup, onDuplicate, isMobile, className }: ContactDetailProps) {
   const t = useTranslations("contacts");
   const smimeStore = useSmimeStore();
   const [parsedCerts, setParsedCerts] = useState<Map<number, CertificateInfo>>(new Map());
@@ -87,7 +133,6 @@ 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
             const commaIdx = key.uri.indexOf(',');
             if (commaIdx === -1) continue;
             const b64 = key.uri.substring(commaIdx + 1);
@@ -96,7 +141,6 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
             for (let j = 0; j < binary.length; j++) bytes[j] = binary.charCodeAt(j);
             derBytes = bytes.buffer;
           } else if (key.uri.startsWith('-----BEGIN')) {
-            // PEM-encoded certificate inline
             derBytes = key.uri;
           }
           if (!derBytes) continue;
@@ -127,6 +171,29 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
 
   const name = getContactDisplayName(contact);
   const email = getContactPrimaryEmail(contact);
+  const photoUri = getContactPhotoUri(contact);
+  const phone = contact.phones ? Object.values(contact.phones)[0]?.number : undefined;
+
+  const handleExport = () => {
+    exportContact(contact);
+    toast.success(t("export.success", { count: 1 }));
+  };
+
+  const handlePrint = () => {
+    printContact(contact, name);
+  };
+
+  const moreItems: MoreItem[] = [];
+  if (onAddToGroup) {
+    moreItems.push({ icon: Users, label: t("context_menu.add_to_group"), onClick: onAddToGroup });
+  }
+  if (onDuplicate) {
+    moreItems.push({ icon: Copy, label: t("context_menu.duplicate"), onClick: onDuplicate });
+  }
+  moreItems.push({ icon: Download, label: t("context_menu.export_vcard"), onClick: handleExport });
+  moreItems.push({ icon: Printer, label: t("context_menu.print"), onClick: handlePrint });
+  moreItems.push({ separator: true });
+  moreItems.push({ icon: Trash2, label: t("context_menu.delete"), onClick: onDelete, destructive: true });
   const emails = contact.emails ? Object.values(contact.emails) : [];
   const phones = contact.phones ? Object.values(contact.phones) : [];
   const orgs = contact.organizations ? Object.values(contact.organizations) : [];
@@ -170,255 +237,259 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
 
   const hasNickname = nicknames.length > 0;
   const titleLine = jobTitles.length > 0 ? jobTitles.map(t => t.name).join(", ") : undefined;
+  const subtitleParts = [titleLine, orgs[0]?.name].filter(Boolean) as string[];
+  const hasContactDetails = emails.length > 0 || phones.length > 0 || addresses.length > 0 || onlineServices.length > 0;
+  const hasWork = titles.length > 0 || orgs.length > 0;
+  const hasGender = !!(contact.speakToAs && (contact.speakToAs.grammaticalGender || contact.speakToAs.pronouns));
+  const hasPersonal = anniversaries.length > 0 || personalInfo.length > 0 || hasGender || preferredLanguages.length > 0;
 
   return (
     <div className={cn("flex flex-col h-full overflow-y-auto", className)}>
       <div className={cn("border-b border-border", isMobile ? "px-4 py-4" : "px-6 py-6")}>
         <div className={cn("flex gap-4", isMobile ? "flex-col" : "items-start justify-between")}>
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-4 min-w-0 flex-1">
-            <Avatar name={name} email={email} size={isMobile ? "md" : "lg"} />
+            <Avatar name={name} email={email} contactPhotoUri={photoUri} 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>
               )}
-              {titleLine && (
+              {subtitleParts.length > 0 && (
-                <p className="text-sm text-muted-foreground truncate">{titleLine}</p>
+                <p className="text-sm text-muted-foreground truncate">{subtitleParts.join(" · ")}</p>
-              )}
-              {orgs.length > 0 && orgs[0].name && (
-                <p className="text-sm text-muted-foreground truncate">{orgs[0].name}</p>
               )}
             </div>
           </div>
-          <div className="flex gap-2">
+          <div className="flex gap-2 flex-shrink-0 flex-wrap">
+            {email && (
+              <a
+                href={`mailto:${email}`}
+                className="inline-flex items-center justify-center rounded-md font-medium h-9 px-3 text-sm border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors touch-manipulation"
+              >
+                <Send className="w-4 h-4 mr-1" />
+                {t("detail.compose_email")}
+              </a>
+            )}
+            {phone && (
+              <a
+                href={`tel:${phone}`}
+                className="inline-flex items-center justify-center rounded-md font-medium h-9 px-3 text-sm border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors touch-manipulation"
+              >
+                <Phone className="w-4 h-4 mr-1" />
+                {t("context_menu.call")}
+              </a>
+            )}
             <Button variant="outline" size="sm" onClick={onEdit} className="touch-manipulation">
               <Pencil className="w-4 h-4 mr-1" />
               {t("form.edit_title")}
             </Button>
-            <Button variant="outline" size="sm" onClick={onDelete} className="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-950 touch-manipulation">
+            <MoreActionsMenu items={moreItems} label={t("detail.more_actions")} />
-              <Trash2 className="w-4 h-4" />
-            </Button>
           </div>
         </div>
       </div>
 
-      <div className="px-6 py-6">
+      <div className={cn("divide-y divide-border/60", isMobile ? "px-4" : "px-6")}>
-        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+        {hasContactDetails && (
-          {/* Contact info */}
+          <Section title={t("detail.section_contact")}>
-          {emails.length > 0 && (
+            <div className="space-y-3">
-            <Section icon={Mail} title={t("detail.emails")} category="contact">
               {emails.map((e, i) => (
-                <div key={i} className="flex items-center gap-2 group">
+                <FieldRow key={`em${i}`} icon={Mail} label={e.label || formatContexts(e.contexts) || t("detail.email_default_label")}>
-                  <a href={`mailto:${e.address}`} className="text-sm text-primary hover:underline">
+                  <div className="flex items-center gap-2 group">
-                    {e.address}
+                    <a href={`mailto:${e.address}`} className="text-sm text-primary hover:underline break-all">
-                  </a>
+                      {e.address}
-                  {e.contexts && <ContextBadge contexts={e.contexts} />}
-                  {e.label && <span className="text-xs text-muted-foreground">({e.label})</span>}
-                  <div className={cn(
-                    "flex items-center gap-0.5 transition-opacity",
-                    isMobile ? "opacity-100" : "opacity-0 group-hover:opacity-100"
-                  )}>
-                    <a
-                      href={`mailto:${e.address}`}
-                      className="p-1.5 rounded hover:bg-muted transition-colors touch-manipulation"
-                      title={t("detail.compose_email")}
-                      aria-label={t("detail.compose_email")}
-                    >
-                      <Send className="w-3.5 h-3.5 text-muted-foreground" />
                     </a>
-                    <CopyButton value={e.address} label={t("detail.copy_email")} successMsg={t("detail.copied")} failMsg={t("detail.copy_failed")} />
+                    <RowActions>
+                      <a
+                        href={`mailto:${e.address}`}
+                        className="p-1.5 rounded hover:bg-muted transition-colors touch-manipulation"
+                        title={t("detail.compose_email")}
+                        aria-label={t("detail.compose_email")}
+                      >
+                        <Send className="w-3.5 h-3.5 text-muted-foreground" />
+                      </a>
+                      <CopyButton value={e.address} label={t("detail.copy_email")} successMsg={t("detail.copied")} failMsg={t("detail.copy_failed")} />
+                    </RowActions>
                   </div>
-                </div>
+                </FieldRow>
               ))}
-            </Section>
-          )}
 
-          {phones.length > 0 && (
-            <Section icon={Phone} title={t("detail.phones")} category="contact">
               {phones.map((p, i) => {
-                const featureStr = formatPhoneFeatures(p.features);
+                const features = formatPhoneFeatures(p.features);
+                const labelParts = [p.label, formatContexts(p.contexts), features].filter(Boolean) as string[];
                 return (
-                  <div key={i} className="flex items-center gap-2 group">
+                  <FieldRow key={`ph${i}`} icon={Phone} label={labelParts.length ? labelParts.join(" · ") : t("detail.phone_default_label")}>
-                    <a href={`tel:${p.number}`} className="text-sm text-primary hover:underline">
+                    <div className="flex items-center gap-2 group">
-                      {p.number}
+                      <a href={`tel:${p.number}`} className="text-sm text-primary hover:underline">
-                    </a>
+                        {p.number}
-                    {p.contexts && <ContextBadge contexts={p.contexts} />}
+                      </a>
-                    {featureStr && (
+                      <RowActions>
-                      <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{featureStr}</span>
+                        <CopyButton value={p.number} label={t("detail.copy_phone")} successMsg={t("detail.copied")} failMsg={t("detail.copy_failed")} />
-                    )}
+                      </RowActions>
-                    <CopyButton
+                    </div>
-                      value={p.number}
+                  </FieldRow>
-                      label={t("detail.copy_phone")}
-                      successMsg={t("detail.copied")}
-                      failMsg={t("detail.copy_failed")}
-                      className={isMobile ? "opacity-100" : "opacity-0 group-hover:opacity-100"}
-                    />
-                  </div>
                 );
               })}
-            </Section>
-          )}
 
-          {(roles.length > 0 || jobTitles.length > 1) && (
+              {addresses.map((a, i) => {
-            <Section icon={Briefcase} title={t("detail.titles")} category="work">
+                const lines: string[] = [];
-              {titles.map((tl, i) => (
+                if (a.full || a.fullAddress) {
-                <div key={i} className="text-sm flex items-center gap-2">
+                  lines.push((a.full || a.fullAddress) as string);
-                  <span>{tl.name}</span>
+                } else if (a.components && a.components.length > 0) {
-                  {tl.kind && (
+                  const joined = a.components.filter(c => c.kind !== 'separator').map(c => c.value).filter(Boolean).join(", ");
-                    <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{tl.kind}</span>
+                  if (joined) lines.push(joined);
-                  )}
+                } else {
-                </div>
+                  const parts = [a.street, [a.postcode, a.locality].filter(Boolean).join(" "), a.region, a.country]
-              ))}
+                    .map(s => (typeof s === "string" ? s.trim() : ""))
-            </Section>
+                    .filter(Boolean) as string[];
-          )}
+                  lines.push(...parts);
-
+                }
-          {orgs.length > 0 && (
+                return (
-            <Section icon={Building} title={t("detail.organizations")} category="work">
+                  <FieldRow key={`ad${i}`} icon={MapPin} label={formatContexts(a.contexts) || t("detail.address_default_label")}>
-              {orgs.map((o, i) => (
+                    <div className="text-sm space-y-0.5">
-                <div key={i} className="text-sm">
+                      {lines.map((line, idx) => (
-                  {o.name}
+                        <div key={idx}>{line}</div>
-                  {o.units && o.units.length > 0 && (
+                      ))}
-                    <span className="text-muted-foreground"> — {o.units.map(u => u.name).join(", ")}</span>
-                  )}
-                </div>
-              ))}
-            </Section>
-          )}
-
-          {/* Addresses span full width */}
-          {addresses.length > 0 && (
-            <div className="md:col-span-2 xl:col-span-3">
-              <Section icon={MapPin} title={t("detail.addresses")} category="location">
-                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
-                  {addresses.map((a, i) => (
-                    <div key={i} className="text-sm space-y-0.5 rounded-md border border-border/60 bg-muted/30 p-3">
-                      <div>
-                        {a.full || a.fullAddress
-                          ? (a.full || a.fullAddress)
-                          : a.components && a.components.length > 0
-                            ? a.components.filter(c => c.kind !== 'separator').map(c => c.value).filter(Boolean).join(", ")
-                            : [a.street, a.locality, a.region, a.postcode, a.country].filter(Boolean).join(", ")}
-                        {a.contexts && <ContextBadge contexts={a.contexts} />}
-                      </div>
                       {a.timeZone && (
                         <div className="text-xs text-muted-foreground">{t("detail.timezone")}: {a.timeZone}</div>
                       )}
                     </div>
-                  ))}
+                  </FieldRow>
-                </div>
+                );
-              </Section>
+              })}
-            </div>
-          )}
 
-          {onlineServices.length > 0 && (
-            <Section icon={Globe} title={t("detail.online_services")} category="digital">
               {onlineServices.map((svc, i) => (
-                <div key={i} className="flex items-center gap-2 group">
+                <FieldRow
-                  {typeof svc.uri === 'string' && svc.uri.startsWith("http") ? (
+                  key={`os${i}`}
-                    <a href={svc.uri} target="_blank" rel="noopener noreferrer" className="text-sm text-primary hover:underline break-all">
+                  icon={Globe}
-                      {svc.user || svc.uri}
+                  label={[svc.service, formatContexts(svc.contexts)].filter(Boolean).join(" · ") || t("detail.online_service_default_label")}
-                    </a>
+                >
-                  ) : (
+                  <div className="flex items-center gap-2 group">
-                    <span className="text-sm break-all">{svc.user || String(svc.uri ?? '')}</span>
+                    {typeof svc.uri === 'string' && svc.uri.startsWith("http") ? (
-                  )}
+                      <a href={svc.uri} target="_blank" rel="noopener noreferrer" className="text-sm text-primary hover:underline break-all">
-                  {svc.service && (
+                        {svc.user || svc.uri}
-                    <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{svc.service}</span>
+                      </a>
-                  )}
+                    ) : (
-                  {svc.contexts && <ContextBadge contexts={svc.contexts} />}
+                      <span className="text-sm break-all">{svc.user || String(svc.uri ?? '')}</span>
-                  <CopyButton
+                    )}
-                    value={svc.user || svc.uri}
+                    <RowActions>
-                    label={t("detail.copy_url")}
+                      <CopyButton value={svc.user || svc.uri} label={t("detail.copy_url")} successMsg={t("detail.copied")} failMsg={t("detail.copy_failed")} />
-                    successMsg={t("detail.copied")}
+                    </RowActions>
-                    failMsg={t("detail.copy_failed")}
+                  </div>
-                    className={isMobile ? "opacity-100" : "opacity-0 group-hover:opacity-100"}
+                </FieldRow>
-                  />
-                </div>
               ))}
-            </Section>
+            </div>
-          )}
+          </Section>
+        )}
 
-          {anniversaries.length > 0 && (
+        {hasWork && (
-            <Section icon={Cake} title={t("detail.anniversaries")} category="personal">
+          <Section title={t("detail.section_work")}>
-              {anniversaries.map((ann, i) => (
+            <div className="space-y-3">
-                <div key={i} className="flex items-center gap-2 text-sm">
+              {orgs.map((o, i) => (
-                  <span>{formatDate(ann.date)}</span>
+                <FieldRow key={`org${i}`} icon={Building} label={t("detail.organization_label")}>
-                  <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                  <div className="text-sm">
-                    {t(`detail.anniversary_${ann.kind}`)}
+                    {o.name}
-                  </span>
+                    {o.units && o.units.length > 0 && (
-                </div>
+                      <span className="text-muted-foreground"> · {o.units.map(u => u.name).join(", ")}</span>
+                    )}
+                  </div>
+                </FieldRow>
               ))}
-            </Section>
+              {titles.map((tl, i) => (
-          )}
+                <FieldRow
-
+                  key={`tl${i}`}
-          {personalInfo.length > 0 && (
+                  icon={Briefcase}
-            <Section icon={Heart} title={t("detail.personal_info")} category="personal">
+                  label={tl.kind === "role" ? t("detail.role_label") : t("detail.title_label")}
-              {personalInfo.map((pi, i) => (
+                >
-                <div key={i} className="flex items-center gap-2 text-sm">
+                  <div className="text-sm">{tl.name}</div>
-                  <span>{pi.value}</span>
+                </FieldRow>
-                  <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{t(`detail.personal_${pi.kind}`)}</span>
-                  {pi.level && (
-                    <span className="text-xs text-muted-foreground">({pi.level})</span>
-                  )}
-                </div>
               ))}
-            </Section>
+            </div>
-          )}
+          </Section>
+        )}
 
-          {contact.speakToAs && (contact.speakToAs.grammaticalGender || contact.speakToAs.pronouns) && (
+        {hasPersonal && (
-            <Section icon={UserCircle} title={t("detail.gender")} category="personal">
+          <Section title={t("detail.section_personal")}>
-              <div className="text-sm">
+            <div className="space-y-3">
-                {contact.speakToAs.grammaticalGender && <span>{t(`detail.gender_${contact.speakToAs.grammaticalGender}`, { defaultValue: contact.speakToAs.grammaticalGender })}</span>}
+              {anniversaries.map((ann, i) => {
-                {contact.speakToAs.pronouns && (() => {
+                const years = getCompletedYears(ann.date);
-                  const firstPronoun = Object.values(contact.speakToAs!.pronouns!)[0]?.pronouns;
+                const suffixKey = ann.kind === "birth" ? "detail.age_years" : "detail.years_since";
-                  return firstPronoun ? (
+                return (
-                    <span className="text-muted-foreground">{contact.speakToAs!.grammaticalGender ? " — " : ""}{firstPronoun}</span>
+                  <FieldRow key={`an${i}`} icon={Cake} label={t(`detail.anniversary_${ann.kind}`)}>
-                  ) : null;
+                    <div className="text-sm">
-                })()}
+                      {formatDate(ann.date)}
-              </div>
+                      {years !== null && (
-            </Section>
+                        <span className="text-muted-foreground"> · {t(suffixKey, { count: years })}</span>
-          )}
+                      )}
-
+                    </div>
-          {preferredLanguages.length > 0 && (
+                  </FieldRow>
-            <Section icon={Languages} title={t("detail.languages")} category="personal">
+                );
+              })}
+              {hasGender && (
+                <FieldRow icon={UserCircle} label={t("detail.gender")}>
+                  <div className="text-sm">
+                    {contact.speakToAs?.grammaticalGender && (
+                      <span>{t(`detail.gender_${contact.speakToAs.grammaticalGender}`, { defaultValue: contact.speakToAs.grammaticalGender })}</span>
+                    )}
+                    {contact.speakToAs?.pronouns && (() => {
+                      const firstPronoun = Object.values(contact.speakToAs!.pronouns!)[0]?.pronouns;
+                      return firstPronoun ? (
+                        <span className="text-muted-foreground">{contact.speakToAs!.grammaticalGender ? " · " : ""}{firstPronoun}</span>
+                      ) : null;
+                    })()}
+                  </div>
+                </FieldRow>
+              )}
               {preferredLanguages.map((lang, i) => (
-                <div key={i} className="flex items-center gap-2 text-sm">
+                <FieldRow
-                  <span>{lang.language}</span>
+                  key={`lg${i}`}
-                  {lang.contexts && <ContextBadge contexts={lang.contexts} />}
+                  icon={Languages}
-                </div>
+                  label={formatContexts(lang.contexts) || t("detail.language_label")}
+                >
+                  <div className="text-sm">{lang.language}</div>
+                </FieldRow>
               ))}
-            </Section>
+              {personalInfo.map((pi, i) => (
-          )}
+                <FieldRow
+                  key={`pi${i}`}
+                  icon={Heart}
+                  label={`${t(`detail.personal_${pi.kind}`)}${pi.level ? ` · ${pi.level}` : ""}`}
+                >
+                  <div className="text-sm">{pi.value}</div>
+                </FieldRow>
+              ))}
+            </div>
+          </Section>
+        )}
 
-          {keywords.length > 0 && (
+        {keywords.length > 0 && (
-            <Section icon={Tag} title={t("detail.categories")} category="digital">
+          <Section title={t("detail.categories")}>
-              <div className="flex flex-wrap gap-1.5">
+            <div className="flex flex-wrap gap-1.5">
-                {keywords.map((kw, i) => (
+              {keywords.map((kw, i) => (
-                  <span key={i} className="text-xs px-2 py-1 rounded-full bg-primary/10 text-primary">
+                <span key={i} className="text-xs px-2 py-1 rounded-full bg-primary/10 text-primary">
-                    {kw}
+                  {kw}
-                  </span>
+                </span>
-                ))}
+              ))}
-              </div>
+            </div>
-            </Section>
+          </Section>
-          )}
+        )}
 
-          {relatedTo.length > 0 && (
+        {relatedTo.length > 0 && (
-            <Section icon={Users} title={t("detail.related_contacts")} category="personal">
+          <Section title={t("detail.related_contacts")}>
+            <div className="space-y-2">
               {relatedTo.map(([uri, rel], i) => {
                 const relType = rel.relation ? Object.keys(rel.relation).find(k => rel.relation![k]) : undefined;
                 return (
-                  <div key={i} className="flex items-center gap-2 text-sm">
+                  <FieldRow key={`rel${i}`} icon={Users} label={relType || t("detail.related_default_label")}>
-                    <span>{uri}</span>
+                    <div className="text-sm break-all">{uri}</div>
-                    {relType && (
+                  </FieldRow>
-                      <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{relType}</span>
-                    )}
-                  </div>
                 );
               })}
-            </Section>
+            </div>
-          )}
+          </Section>
+        )}
 
-          {cryptoKeys.length > 0 && (
+        {cryptoKeys.length > 0 && (
-            <Section icon={KeyRound} title={t("detail.crypto_keys")} category="digital">
+          <Section title={t("detail.crypto_keys")}>
+            <div className="space-y-3">
               {cryptoKeys.map((key, i) => {
                 const certInfo = parsedCerts.get(i);
                 const isExpired = certInfo ? new Date(certInfo.notAfter) < new Date() : false;
@@ -427,7 +498,7 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
                   : false;
 
                 return (
-                  <div key={i} className="p-3 rounded-lg border border-border space-y-1">
+                  <div key={i} className="rounded-md border border-border/60 bg-muted/30 p-3 space-y-1">
                     {certInfo ? (
                       <>
                         <div className="flex items-center gap-2">
@@ -448,12 +519,7 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
                           {certInfo.algorithm && <p>{t("detail.cert_algorithm")}: {certInfo.algorithm}</p>}
                         </div>
                         {!alreadyImported && (
-                          <Button
+                          <Button variant="ghost" size="sm" className="ml-4 mt-1" onClick={() => handleImportContactCert(i)}>
-                            variant="ghost"
-                            size="sm"
-                            className="ml-4 mt-1"
-                            onClick={() => handleImportContactCert(i)}
-                          >
                             <Download className="w-3 h-3 mr-1" />
                             {t("detail.import_to_smime")}
                           </Button>
@@ -463,7 +529,8 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
                         )}
                       </>
                     ) : (
-                      <div className="text-sm break-all">
+                      <div className="flex items-start gap-2 text-sm break-all">
+                        <KeyRound className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
                         {typeof key.uri === 'string' && key.uri.startsWith("http") ? (
                           <a href={key.uri} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
                             {key.uri}
@@ -476,91 +543,168 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
                   </div>
                 );
               })}
-            </Section>
+            </div>
-          )}
+          </Section>
+        )}
 
-          {(contact.calendarUri || contact.schedulingUri || contact.freeBusyUri) && (
+        {(contact.calendarUri || contact.schedulingUri || contact.freeBusyUri) && (
-            <Section icon={Calendar} title={t("detail.calendar")} category="calendar">
+          <Section title={t("detail.calendar")}>
+            <div className="space-y-3">
               {contact.calendarUri && (
-                <div className="text-sm">
+                <FieldRow icon={Calendar} label={t("detail.calendar_uri")}>
-                  <span className="text-muted-foreground">{t("detail.calendar_uri")}: </span>
+                  <a href={contact.calendarUri} target="_blank" rel="noopener noreferrer" className="text-sm text-primary hover:underline break-all">
-                  <a href={contact.calendarUri} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline break-all">{contact.calendarUri}</a>
+                    {contact.calendarUri}
-                </div>
+                  </a>
+                </FieldRow>
               )}
               {contact.schedulingUri && (
-                <div className="text-sm">
+                <FieldRow icon={Calendar} label={t("detail.scheduling_uri")}>
-                  <span className="text-muted-foreground">{t("detail.scheduling_uri")}: </span>
+                  <a href={contact.schedulingUri} target="_blank" rel="noopener noreferrer" className="text-sm text-primary hover:underline break-all">
-                  <a href={contact.schedulingUri} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline break-all">{contact.schedulingUri}</a>
+                    {contact.schedulingUri}
-                </div>
+                  </a>
+                </FieldRow>
               )}
               {contact.freeBusyUri && (
-                <div className="text-sm">
+                <FieldRow icon={Calendar} label={t("detail.freebusy_uri")}>
-                  <span className="text-muted-foreground">{t("detail.freebusy_uri")}: </span>
+                  <a href={contact.freeBusyUri} target="_blank" rel="noopener noreferrer" className="text-sm text-primary hover:underline break-all">
-                  <a href={contact.freeBusyUri} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline break-all">{contact.freeBusyUri}</a>
+                    {contact.freeBusyUri}
-                </div>
+                  </a>
+                </FieldRow>
               )}
-            </Section>
+            </div>
-          )}
+          </Section>
+        )}
 
-          {/* Notes span full width */}
+        {notes.length > 0 && (
-          {notes.length > 0 && (
+          <Section title={t("detail.notes")}>
-            <div className="md:col-span-2 xl:col-span-3">
+            <div className="flex items-start gap-3">
-              <Section icon={StickyNote} title={t("detail.notes")} category="notes">
+              <StickyNote className="w-4 h-4 text-muted-foreground mt-1 flex-shrink-0" />
+              <div className="text-sm space-y-2 flex-1 min-w-0">
                 {notes.map((n, i) => (
-                  <p key={i} className="text-sm whitespace-pre-wrap">{n.note}</p>
+                  <p key={i} className="whitespace-pre-wrap">{n.note}</p>
                 ))}
-              </Section>
+              </div>
             </div>
-          )}
+          </Section>
+        )}
 
-          {/* Timestamps span full width */}
+        <ContactActivity contact={contact} />
-          {(contact.created || contact.updated) && (
+
-            <div className="md:col-span-2 xl:col-span-3 pt-2 border-t border-border text-xs text-muted-foreground space-y-1">
+        {(contact.created || contact.updated) && (
-              {contact.created && <div>{t("detail.created")}: {formatDate(contact.created)}</div>}
+          <div className="py-4 text-xs text-muted-foreground space-y-1">
-              {contact.updated && <div>{t("detail.updated")}: {formatDate(contact.updated)}</div>}
+            {contact.created && <div>{t("detail.created")}: {formatDate(contact.created)}</div>}
-            </div>
+            {contact.updated && <div>{t("detail.updated")}: {formatDate(contact.updated)}</div>}
-          )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function formatContexts(contexts?: Record<string, boolean>): string {
+  if (!contexts) return "";
+  return Object.keys(contexts).filter(k => contexts[k]).join(", ");
+}
+
+export function Section({ title, children, className }: { title: string; children: React.ReactNode; className?: string }) {
+  return (
+    <section className={cn("py-6", className)}>
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-3">{title}</h3>
+      {children}
+    </section>
+  );
+}
+
+function FieldRow({ icon: Icon, label, children }: { icon: React.ComponentType<{ className?: string }>; label?: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-start gap-3">
+      <Icon className="w-4 h-4 text-muted-foreground mt-1 flex-shrink-0" />
+      <div className="flex-1 min-w-0">
+        {label && <div className="text-xs text-muted-foreground mb-0.5">{label}</div>}
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function RowActions({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+      {children}
+    </div>
+  );
+}
+
+function MoreActionsMenu({ items, label }: { items: MoreItem[]; label: string }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDocMouseDown = (e: MouseEvent) => {
+      if (!ref.current?.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDocMouseDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocMouseDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  if (items.length === 0) return null;
+
+  return (
+    <div ref={ref} className="relative">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => setOpen((o) => !o)}
+        title={label}
+        aria-label={label}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        className="touch-manipulation"
+      >
+        <MoreHorizontal className="w-4 h-4" />
+      </Button>
+      {open && (
+        <div
+          role="menu"
+          className="absolute right-0 top-full mt-1 z-30 min-w-[200px] rounded-md border border-border bg-popover text-popover-foreground shadow-lg py-1 animate-in fade-in-0 zoom-in-95 duration-100"
+        >
+          {items.map((item, i) => {
+            if (item.separator) {
+              return <div key={i} role="separator" className="my-1 h-px bg-border" />;
+            }
+            return (
+              <button
+                key={i}
+                type="button"
+                role="menuitem"
+                onClick={() => {
+                  item.onClick();
+                  setOpen(false);
+                }}
+                className={cn(
+                  "w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-muted focus:bg-muted focus:outline-none transition-colors",
+                  item.destructive && "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950 focus:bg-red-50 dark:focus:bg-red-950",
+                )}
+              >
+                <item.icon className={cn("w-4 h-4 flex-shrink-0", item.destructive ? "text-red-600 dark:text-red-400" : "text-muted-foreground")} />
+                <span className="flex-1">{item.label}</span>
+              </button>
+            );
+          })}
         </div>
-      </div>
+      )}
     </div>
   );
 }
 
-type SectionCategory = "contact" | "work" | "location" | "personal" | "digital" | "calendar" | "notes";
-
-const categoryStyles: Record<SectionCategory, string> = {
-  contact: "border-l-blue-400 dark:border-l-blue-500",
-  work: "border-l-amber-400 dark:border-l-amber-500",
-  location: "border-l-emerald-400 dark:border-l-emerald-500",
-  personal: "border-l-violet-400 dark:border-l-violet-500",
-  digital: "border-l-cyan-400 dark:border-l-cyan-500",
-  calendar: "border-l-rose-400 dark:border-l-rose-500",
-  notes: "border-l-stone-400 dark:border-l-stone-500",
-};
-
-function Section({ icon: Icon, title, children, category = "contact" }: { icon: React.ComponentType<{ className?: string }>; title: string; children: React.ReactNode; category?: SectionCategory }) {
-  return (
-    <div className={cn("rounded-lg border border-border bg-card p-4 border-l-[3px]", categoryStyles[category])}>
-      <div className="flex items-center gap-2 mb-2.5">
-        <Icon className="w-4 h-4 text-muted-foreground" />
-        <h3 className="text-sm font-medium text-muted-foreground">{title}</h3>
-      </div>
-      <div className="space-y-1.5 pl-6">{children}</div>
-    </div>
-  );
-}
-
-function ContextBadge({ contexts }: { contexts: Record<string, boolean> }) {
-  const labels = Object.keys(contexts).filter(k => contexts[k]);
-  if (labels.length === 0) return null;
-
-  return (
-    <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground ml-1">
-      {labels.join(", ")}
-    </span>
-  );
-}
-
 function CopyButton({ value, label, successMsg, failMsg, className }: { value: string; label: string; successMsg: string; failMsg: string; className?: string }) {
   return (
     <button
@@ -572,7 +716,7 @@ function CopyButton({ value, label, successMsg, failMsg, className }: { value: s
           toast.error(failMsg);
         }
       }}
-      className={cn("p-1.5 rounded hover:bg-muted transition-colors touch-manipulation transition-opacity", className)}
+      className={cn("p-1.5 rounded hover:bg-muted transition-colors touch-manipulation", className)}
       title={label}
       aria-label={label}
     >

components/contacts/contact-form.tsx

@@ -2,11 +2,12 @@
 
 import { useState, useMemo, useCallback, useEffect, useRef } from "react";
 import { useTranslations } from "next-intl";
-import { X, Plus, ChevronDown, ChevronRight, User, Building, MapPin, Globe, Cake, Heart, Tag, StickyNote, Mail, Phone, Calendar, UserCircle, Book } from "lucide-react";
+import { X, Plus, ChevronDown, ChevronRight, User, Building, MapPin, Globe, Cake, Heart, Tag, StickyNote, Mail, Phone, Calendar, UserCircle, Book, Camera, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Avatar } from "@/components/ui/avatar";
 import { cn } from "@/lib/utils";
-import type { ContactCard, ContactOnlineService, ContactAnniversary, ContactPersonalInfo, AddressBook, AnniversaryDate, PartialDate, ContactAddress } from "@/lib/jmap/types";
+import type { ContactCard, ContactOnlineService, ContactAnniversary, ContactPersonalInfo, AddressBook, AnniversaryDate, PartialDate, ContactAddress, ContactMedia } from "@/lib/jmap/types";
 
 interface EmailEntry {
   address: string;
@@ -49,59 +50,78 @@ interface ContactFormProps {
   contact?: ContactCard | null;
   addressBooks?: AddressBook[];
   allKeywords?: string[];
+  defaultAddressBookId?: string;
   onSave: (data: Partial<ContactCard>) => Promise<void>;
   onCancel: () => void;
 }
 
-type FormCategory = "contact" | "work" | "location" | "personal" | "digital" | "calendar" | "notes";
+function FormSection({ icon: Icon, title, children, collapsible, defaultOpen = true }: {
-
-const formCategoryStyles: Record<FormCategory, string> = {
-  contact: "border-l-blue-400 dark:border-l-blue-500",
-  work: "border-l-amber-400 dark:border-l-amber-500",
-  location: "border-l-emerald-400 dark:border-l-emerald-500",
-  personal: "border-l-violet-400 dark:border-l-violet-500",
-  digital: "border-l-cyan-400 dark:border-l-cyan-500",
-  calendar: "border-l-rose-400 dark:border-l-rose-500",
-  notes: "border-l-stone-400 dark:border-l-stone-500",
-};
-
-function FormSection({ icon: Icon, title, children, collapsible, defaultOpen = false, category = "contact" }: {
   icon: React.ComponentType<{ className?: string }>;
   title: string;
   children: React.ReactNode;
   collapsible?: boolean;
   defaultOpen?: boolean;
-  category?: FormCategory;
 }) {
-  const [open, setOpen] = useState(defaultOpen || !collapsible);
+  const [open, setOpen] = useState(defaultOpen);
 
   return (
-    <div className={cn("rounded-lg border border-border bg-card border-l-[3px] px-4 py-3", formCategoryStyles[category])}>
+    <section className="py-5">
       <button
         type="button"
         className={cn(
-          "flex items-center gap-2 w-full py-0.5 text-sm font-medium text-foreground transition-colors",
+          "flex items-center gap-2 w-full text-left",
-          collapsible && "hover:text-muted-foreground cursor-pointer",
+          collapsible ? "cursor-pointer" : "cursor-default"
-          !collapsible && "cursor-default"
         )}
         onClick={() => collapsible && setOpen(!open)}
         tabIndex={collapsible ? 0 : -1}
       >
         <Icon className="w-4 h-4 text-muted-foreground shrink-0" />
-        <span className="flex-1 text-left">{title}</span>
+        <h3 className="flex-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">{title}</h3>
         {collapsible && (
           open ? <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" /> : <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />
         )}
       </button>
-      {open && (
+      {(open || !collapsible) && (
-        <div className="space-y-3 pt-3 pb-1">
+        <div className="space-y-3 mt-3">
           {children}
         </div>
       )}
-    </div>
+    </section>
   );
 }
 
+const MAX_PHOTO_DIM = 512;
+const PHOTO_QUALITY = 0.85;
+
+async function processImageFile(file: File): Promise<{ uri: string; mediaType: string }> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const img = new Image();
+      img.onload = () => {
+        const ratio = Math.min(1, MAX_PHOTO_DIM / Math.max(img.width, img.height));
+        const w = Math.max(1, Math.round(img.width * ratio));
+        const h = Math.max(1, Math.round(img.height * ratio));
+        const canvas = document.createElement("canvas");
+        canvas.width = w;
+        canvas.height = h;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          reject(new Error("canvas-unsupported"));
+          return;
+        }
+        ctx.drawImage(img, 0, 0, w, h);
+        const uri = canvas.toDataURL("image/jpeg", PHOTO_QUALITY);
+        resolve({ uri, mediaType: "image/jpeg" });
+      };
+      img.onerror = () => reject(new Error("invalid-image"));
+      img.src = reader.result as string;
+    };
+    reader.onerror = () => reject(new Error("read-failed"));
+    reader.readAsDataURL(file);
+  });
+}
+
 function Select({ value, onChange, children, className }: {
   value: string;
   onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
@@ -124,11 +144,13 @@ function Select({ value, onChange, children, className }: {
   );
 }
 
-export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCancel }: ContactFormProps) {
+export function ContactForm({ contact, addressBooks, allKeywords, defaultAddressBookId, onSave, onCancel }: ContactFormProps) {
   const t = useTranslations("contacts.form");
   const isEditing = !!contact;
 
-  const findComponent = (kind: string) => contact?.name?.components?.find(c => c.kind === kind)?.value || "";
+  // Accept JSContact-standard kinds (RFC 9553) and legacy vCard-style aliases.
+  const findComponent = (...kinds: string[]) =>
+    contact?.name?.components?.find(c => kinds.includes(c.kind))?.value || "";
 
   // Convert RFC 9553 AnniversaryDate to ISO date string for HTML date input
   function anniversaryDateToString(date: AnniversaryDate): string {
@@ -191,11 +213,11 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
     };
   }
 
-  const [prefix, setPrefix] = useState(findComponent("prefix"));
+  const [prefix, setPrefix] = useState(findComponent("title", "prefix"));
   const [givenName, setGivenName] = useState(findComponent("given"));
-  const [additionalName, setAdditionalName] = useState(findComponent("additional"));
+  const [additionalName, setAdditionalName] = useState(findComponent("given2", "additional", "middle"));
   const [surname, setSurname] = useState(findComponent("surname"));
-  const [suffix, setSuffix] = useState(findComponent("suffix"));
+  const [suffix, setSuffix] = useState(findComponent("generation", "suffix"));
 
   const [nickname, setNickname] = useState(
     contact?.nicknames ? Object.values(contact.nicknames)[0]?.name || "" : ""
@@ -304,22 +326,66 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
     if (contact?.addressBookIds) {
       const ids = Object.keys(contact.addressBookIds).filter(k => contact.addressBookIds[k]);
       if (ids.length > 0) {
-        // For shared contacts, the addressBookIds uses the original (non-namespaced) id
+        // addressBookIds are already namespaced for shared contacts (e.g. "accountId:bookId")
-        // but we need the namespaced id to match addressBooks entries
+        // so we can use them directly to match addressBook entries
-        if (contact.isShared && contact.accountId) {
-          return `${contact.accountId}:${ids[0]}`;
-        }
         return ids[0];
       }
     }
+    if (defaultAddressBookId && addressBooks?.some(b => b.id === defaultAddressBookId)) {
+      return defaultAddressBookId;
+    }
     return "";
-  }, [contact]);
+  }, [contact, defaultAddressBookId, addressBooks]);
   const [selectedBookId, setSelectedBookId] = useState(currentBookId);
 
+  const initialPhotoEntry = useMemo(() => {
+    if (!contact?.media) return null;
+    for (const [key, m] of Object.entries(contact.media)) {
+      if (m.kind === "photo" && m.uri) return { key, uri: m.uri, mediaType: m.mediaType };
+    }
+    return null;
+  }, [contact]);
+  const [photoUri, setPhotoUri] = useState<string | undefined>(initialPhotoEntry?.uri);
+  const [photoMediaType, setPhotoMediaType] = useState<string | undefined>(initialPhotoEntry?.mediaType);
+  const [photoError, setPhotoError] = useState<string | null>(null);
+  const [photoUploading, setPhotoUploading] = useState(false);
+  const photoInputRef = useRef<HTMLInputElement>(null);
+
   const [isSaving, setIsSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [emailErrors, setEmailErrors] = useState<Record<number, string>>({});
 
+  const handlePhotoSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      setPhotoError(t("photo_invalid"));
+      return;
+    }
+    if (file.size > 10 * 1024 * 1024) {
+      setPhotoError(t("photo_too_large"));
+      return;
+    }
+    setPhotoError(null);
+    setPhotoUploading(true);
+    try {
+      const { uri, mediaType } = await processImageFile(file);
+      setPhotoUri(uri);
+      setPhotoMediaType(mediaType);
+    } catch {
+      setPhotoError(t("photo_invalid"));
+    } finally {
+      setPhotoUploading(false);
+    }
+  };
+
+  const handlePhotoRemove = () => {
+    setPhotoUri(undefined);
+    setPhotoMediaType(undefined);
+    setPhotoError(null);
+  };
+
   const validateEmail = (address: string): boolean => {
     if (!address.trim()) return true;
     return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(address.trim());
@@ -376,12 +442,13 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
       phonesMap[`p${i}`] = obj;
     });
 
+    // Emit JSContact-standard kinds (RFC 9553) so the JMAP server stores them losslessly.
     const nameComponents = [];
-    if (prefix.trim()) nameComponents.push({ kind: "prefix" as const, value: prefix.trim() });
+    if (prefix.trim()) nameComponents.push({ kind: "title" as const, value: prefix.trim() });
     if (givenName.trim()) nameComponents.push({ kind: "given" as const, value: givenName.trim() });
-    if (additionalName.trim()) nameComponents.push({ kind: "additional" as const, value: additionalName.trim() });
+    if (additionalName.trim()) nameComponents.push({ kind: "given2" as const, value: additionalName.trim() });
     if (surname.trim()) nameComponents.push({ kind: "surname" as const, value: surname.trim() });
-    if (suffix.trim()) nameComponents.push({ kind: "suffix" as const, value: suffix.trim() });
+    if (suffix.trim()) nameComponents.push({ kind: "generation" as const, value: suffix.trim() });
 
     const titlesMap: Record<string, { name: string; kind?: "title" | "role" }> = {};
     if (jobTitle.trim()) titlesMap["t0"] = { name: jobTitle.trim(), kind: "title" };
@@ -430,6 +497,17 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
       });
     }
 
+    const mediaMap: Record<string, ContactMedia> = {};
+    if (contact?.media) {
+      for (const [key, m] of Object.entries(contact.media)) {
+        if (m.kind !== "photo") mediaMap[key] = m;
+      }
+    }
+    if (photoUri) {
+      const photoKey = initialPhotoEntry?.key || "photo";
+      mediaMap[photoKey] = { kind: "photo", uri: photoUri, mediaType: photoMediaType };
+    }
+
     const data: Partial<ContactCard> = {
       name: { components: nameComponents, isOrdered: true },
       nicknames: nickname.trim() ? { n0: { name: nickname.trim() } } : undefined,
@@ -456,6 +534,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
       calendarUri: calendarUri.trim() || undefined,
       schedulingUri: schedulingUri.trim() || undefined,
       freeBusyUri: freeBusyUri.trim() || undefined,
+      media: Object.keys(mediaMap).length > 0 ? mediaMap : undefined,
       ...(selectedBookId ? { addressBookIds: { [selectedBookId]: true } } : {}),
     };
 
@@ -469,6 +548,9 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
     }
   };
 
+  const previewName = [givenName, surname].filter(Boolean).join(" ").trim();
+  const previewEmail = emails.find(e => e.address.trim())?.address.trim() || "";
+
   return (
     <form onSubmit={handleSubmit} className="flex flex-col h-full bg-background">
       <div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
@@ -481,38 +563,82 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
       </div>
 
       <div className="flex-1 overflow-y-auto">
-        <div className="px-6 py-4">
+        <div className="px-6 py-4 max-w-3xl">
           {error && (
             <div className="text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950 px-3 py-2 rounded-lg border border-red-200 dark:border-red-900 mb-4">
               {error}
             </div>
           )}
 
-          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+          <div className="flex items-center gap-4 pb-4">
-
+            <button
-          {/* Address Book Selector */}
+              type="button"
-          {addressBooks && addressBooks.length > 1 && (
+              onClick={() => photoInputRef.current?.click()}
-            <div className="md:col-span-2 xl:col-span-3">
+              disabled={photoUploading}
-              <FormSection icon={Book} title={t("section_address_book") || "Directory"} category="contact">
+              className="relative group rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-60"
-                <select
+              title={t("upload_photo")}
-                  value={selectedBookId}
+              aria-label={t("upload_photo")}
-                  onChange={(e) => setSelectedBookId(e.target.value)}
+            >
-                  className="w-full px-3 py-2 rounded-md border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
+              <Avatar
+                name={previewName || undefined}
+                email={previewEmail || undefined}
+                contactPhotoUri={photoUri}
+                size="lg"
+                className="!w-20 !h-20 !text-xl"
+              />
+              <span
+                aria-hidden="true"
+                className="absolute inset-0 rounded-full bg-black/55 text-white flex flex-col items-center justify-center gap-0.5 opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 transition-opacity"
+              >
+                <Camera className="w-5 h-5" />
+                <span className="text-[10px] font-medium leading-none">{t("change_photo")}</span>
+              </span>
+              <input
+                ref={photoInputRef}
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={handlePhotoSelect}
+              />
+            </button>
+            <div className="flex flex-col gap-1 min-w-0 flex-1">
+              <p className="text-xs text-muted-foreground">{t("photo_hint")}</p>
+              {photoError && (
+                <p className="text-xs text-red-600 dark:text-red-400">{photoError}</p>
+              )}
+              {photoUri && (
+                <button
+                  type="button"
+                  onClick={handlePhotoRemove}
+                  className="inline-flex items-center gap-1 self-start text-xs text-muted-foreground hover:text-destructive transition-colors"
                 >
-                  <option value="">{t("select_address_book") || "Select a directory..."}</option>
+                  <Trash2 className="w-3 h-3" />
-                  {addressBooks.map((book) => (
+                  {t("remove_photo")}
-                    <option key={book.id} value={book.id}>
+                </button>
-                      {book.accountName ? `${book.name} (${book.accountName})` : book.name}
+              )}
-                    </option>
-                  ))}
-                </select>
-              </FormSection>
             </div>
+          </div>
+
+          <div className="divide-y divide-border/60">
+
+          {addressBooks && addressBooks.length > 1 && (
+            <FormSection icon={Book} title={t("section_address_book") || "Directory"}>
+              <select
+                value={selectedBookId}
+                onChange={(e) => setSelectedBookId(e.target.value)}
+                className="w-full px-3 py-2 rounded-md border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
+              >
+                <option value="">{t("select_address_book") || "Select a directory..."}</option>
+                {addressBooks.map((book) => (
+                  <option key={book.id} value={book.id}>
+                    {book.accountName ? `${book.name} (${book.accountName})` : book.name}
+                  </option>
+                ))}
+              </select>
+            </FormSection>
           )}
 
-          {/* Name & Identity — full width */}
+          <FormSection icon={User} title={t("section_identity")}>
-          <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">
               <div>
                 <label className="text-xs text-muted-foreground mb-1 block">{t("prefix")}</label>
@@ -546,10 +672,9 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
               </div>
             </div>
           </FormSection>
-          </div>
 
           {/* Email */}
-          <FormSection icon={Mail} title={t("email")} collapsible defaultOpen category="contact">
+          <FormSection icon={Mail} title={t("email")}>
             <div className="space-y-2">
               {emails.map((entry, i) => (
                 <div key={i}>
@@ -578,7 +703,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>
@@ -601,7 +726,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
           </FormSection>
 
           {/* Phone */}
-          <FormSection icon={Phone} title={t("phone")} collapsible defaultOpen category="contact">
+          <FormSection icon={Phone} title={t("phone")}>
             <div className="space-y-2">
               {phones.map((entry, i) => (
                 <div key={i} className="flex items-center gap-2">
@@ -642,7 +767,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>
@@ -659,7 +784,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
           </FormSection>
 
           {/* Work & Organization */}
-          <FormSection icon={Building} title={t("section_work")} collapsible defaultOpen category="work">
+          <FormSection icon={Building} title={t("section_work")} collapsible defaultOpen={!!(organization || department || jobTitle || role)}>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
               <div>
                 <label className="text-xs text-muted-foreground mb-1 block">{t("organization")}</label>
@@ -680,9 +805,8 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
             </div>
           </FormSection>
 
-          {/* Addresses — full width */}
+          {/* Addresses */}
-          <div className="md:col-span-2 xl:col-span-3">
+          <FormSection icon={MapPin} title={t("addresses")} collapsible defaultOpen={addresses.length > 0}>
-          <FormSection icon={MapPin} title={t("addresses")} collapsible defaultOpen category="location">
             <div className="space-y-3">
               {addresses.map((addr, i) => (
                 <div key={i} className="rounded-md border border-border/60 bg-muted/20 p-3 space-y-2 relative">
@@ -701,7 +825,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>
@@ -714,10 +838,9 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
               </Button>
             </div>
           </FormSection>
-          </div>
 
           {/* Online Services */}
-          <FormSection icon={Globe} title={t("online_services")} collapsible defaultOpen category="digital">
+          <FormSection icon={Globe} title={t("online_services")} collapsible defaultOpen={onlineServices.length > 0}>
             <div className="space-y-2">
               {onlineServices.map((svc, i) => (
                 <div key={i} className="flex items-center gap-2">
@@ -746,7 +869,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
           </FormSection>
 
           {/* Anniversaries */}
-          <FormSection icon={Cake} title={t("anniversaries")} collapsible defaultOpen category="personal">
+          <FormSection icon={Cake} title={t("anniversaries")} collapsible defaultOpen={anniversaries.length > 0}>
             <div className="space-y-2">
               {anniversaries.map((ann, i) => (
                 <div key={i} className="flex items-center gap-2">
@@ -778,7 +901,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
           </FormSection>
 
           {/* Personal Info */}
-          <FormSection icon={Heart} title={t("personal_info")} collapsible defaultOpen category="personal">
+          <FormSection icon={Heart} title={t("personal_info")} collapsible defaultOpen={personalInfoEntries.length > 0}>
             <div className="space-y-2">
               {personalInfoEntries.map((pi, i) => (
                 <div key={i} className="flex items-center gap-2">
@@ -819,7 +942,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
           </FormSection>
 
           {/* Categories */}
-          <FormSection icon={Tag} title={t("categories")} collapsible defaultOpen category="digital">
+          <FormSection icon={Tag} title={t("categories")} collapsible defaultOpen={!!keywordsStr}>
             <CategoryComboBox
               keywordsStr={keywordsStr}
               onChange={setKeywordsStr}
@@ -831,12 +954,12 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
           </FormSection>
 
           {/* Gender */}
-          <FormSection icon={UserCircle} title={t("gender")} collapsible defaultOpen category="personal">
+          <FormSection icon={UserCircle} title={t("gender")} collapsible defaultOpen={!!(genderSex || genderIdentity)}>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
               <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>
@@ -852,7 +975,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
           </FormSection>
 
           {/* Calendar */}
-          <FormSection icon={Calendar} title={t("calendar")} collapsible defaultOpen category="calendar">
+          <FormSection icon={Calendar} title={t("calendar")} collapsible defaultOpen={!!(calendarUri || schedulingUri || freeBusyUri)}>
             <div className="space-y-3">
               <div>
                 <label className="text-xs text-muted-foreground mb-1 block">{t("calendar_uri")}</label>
@@ -869,9 +992,8 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
             </div>
           </FormSection>
 
-          {/* Notes — full width */}
+          {/* Notes */}
-          <div className="md:col-span-2 xl:col-span-3">
+          <FormSection icon={StickyNote} title={t("note")} collapsible defaultOpen={!!note}>
-          <FormSection icon={StickyNote} title={t("note")} collapsible defaultOpen category="notes">
             <textarea
               value={note}
               onChange={(e) => setNote(e.target.value)}
@@ -879,7 +1001,6 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
               className="w-full min-h-[100px] rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground resize-y outline-none focus:ring-2 focus:ring-ring"
             />
           </FormSection>
-          </div>
 
           </div>
         </div>
@@ -914,7 +1035,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
@@ -949,17 +1069,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") {
@@ -973,7 +1082,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">
@@ -1001,6 +1110,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 : ""}
       />
@@ -1008,7 +1118,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

@@ -17,9 +17,10 @@ interface ContactListItemProps {
   selectedContactIds: Set<string>;
   onClick: (e: React.MouseEvent) => void;
   onCheckboxClick: (e: React.MouseEvent) => void;
+  onContextMenu?: (e: React.MouseEvent, contact: ContactCard) => void;
 }
 
-export function ContactListItem({ contact, isSelected, isChecked, hasSelection, density, selectedContactIds, onClick, onCheckboxClick }: ContactListItemProps) {
+export function ContactListItem({ contact, isSelected, isChecked, hasSelection, density, selectedContactIds, onClick, onCheckboxClick, onContextMenu }: ContactListItemProps) {
   const name = getContactDisplayName(contact);
   const email = getContactPrimaryEmail(contact);
   const org = contact.organizations
@@ -56,6 +57,7 @@ export function ContactListItem({ contact, isSelected, isChecked, hasSelection,
       draggable
       onDragStart={handleDragStart}
       onClick={onClick}
+      onContextMenu={onContextMenu ? (e) => onContextMenu(e, contact) : undefined}
       className={cn(
         "w-full flex items-center cursor-pointer select-none transition-all duration-200 border-b border-border",
         isSelected
@@ -90,7 +92,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/contacts/contact-list.tsx

@@ -1,16 +1,98 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
-import { useTranslations } from "next-intl";
+import { useTranslations, useLocale } from "next-intl";
-import { Search, BookUser, Trash2, Users, Download, X, UserPlus, CheckSquare, Square } from "lucide-react";
+import { Search, BookUser, Trash2, Users, Download, X, UserPlus, CheckSquare, Square, Filter, Mail, Phone, Image as ImageIcon, RotateCcw } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { ContactListItem } from "./contact-list-item";
+import { ContactContextMenu } from "./contact-context-menu";
+import { useContextMenu } from "@/hooks/use-context-menu";
 import { cn } from "@/lib/utils";
-import type { ContactCard } from "@/lib/jmap/types";
+import type { AnniversaryDate, ContactCard } from "@/lib/jmap/types";
-import { getContactDisplayName } from "@/stores/contact-store";
+import { getContactDisplayName, getContactPhotoUri } from "@/stores/contact-store";
 import { useSettingsStore } from "@/stores/settings-store";
 
+type TriState = boolean | null;
+
+interface ListFilters {
+  organization: string;
+  jobTitle: string;
+  location: string;
+  emailDomain: string;
+  birthdayMonth: number | null;
+  hasEmail: TriState;
+  hasPhone: TriState;
+  hasPhoto: TriState;
+}
+
+const EMPTY_FILTERS: ListFilters = {
+  organization: "",
+  jobTitle: "",
+  location: "",
+  emailDomain: "",
+  birthdayMonth: null,
+  hasEmail: null,
+  hasPhone: null,
+  hasPhoto: null,
+};
+
+function cycleTri(v: TriState): TriState {
+  return v === null ? true : v === true ? false : null;
+}
+
+function countActiveFilters(f: ListFilters): number {
+  let n = 0;
+  if (f.organization.trim()) n++;
+  if (f.jobTitle.trim()) n++;
+  if (f.location.trim()) n++;
+  if (f.emailDomain.trim()) n++;
+  if (f.birthdayMonth !== null) n++;
+  if (f.hasEmail !== null) n++;
+  if (f.hasPhone !== null) n++;
+  if (f.hasPhoto !== null) n++;
+  return n;
+}
+
+function matchTri(actual: boolean, filter: TriState): boolean {
+  if (filter === null) return true;
+  return actual === filter;
+}
+
+function getAnniversaryMonth(date: AnniversaryDate): number | null {
+  if (typeof date === "string") {
+    const iso = date.match(/^(\d{4})-(\d{2})/);
+    if (iso) return parseInt(iso[2], 10);
+    const partial = date.match(/^--(\d{2})/);
+    if (partial) return parseInt(partial[1], 10);
+    return null;
+  }
+  if ("month" in date && date.month) return date.month;
+  if ("utc" in date && date.utc) {
+    const d = new Date(date.utc);
+    return isNaN(d.getTime()) ? null : d.getMonth() + 1;
+  }
+  return null;
+}
+
+function ToggleChip({ icon, label, value, onClick }: { icon: React.ReactNode; label: string; value: TriState; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs transition-colors border",
+        value === true && "bg-primary/10 border-primary/30 text-primary",
+        value === false && "bg-muted border-border text-muted-foreground line-through",
+        value === null && "bg-background border-border text-muted-foreground hover:text-foreground hover:border-muted-foreground",
+      )}
+    >
+      {icon}
+      {label}
+    </button>
+  );
+}
+
 interface ContactListProps {
   contacts: ContactCard[];
   selectedContactId: string | null;
@@ -18,7 +100,6 @@ interface ContactListProps {
   onSearchChange: (query: string) => void;
   onSelectContact: (id: string) => void;
   onCreateNew: () => void;
-  categoryLabel: string;
   className?: string;
   selectedContactIds: Set<string>;
   onToggleSelection: (id: string) => void;
@@ -28,6 +109,9 @@ interface ContactListProps {
   onBulkDelete: () => void;
   onBulkAddToGroup: () => void;
   onBulkExport: () => void;
+  onEditContact: (id: string) => void;
+  onDeleteContact: (contact: ContactCard) => void;
+  onAddContactToGroup: (id: string) => void;
 }
 
 export function ContactList({
@@ -37,7 +121,6 @@ export function ContactList({
   onSearchChange,
   onSelectContact,
   onCreateNew,
-  categoryLabel,
   className,
   selectedContactIds,
   onToggleSelection,
@@ -47,32 +130,99 @@ export function ContactList({
   onBulkDelete,
   onBulkAddToGroup,
   onBulkExport,
+  onEditContact,
+  onDeleteContact,
+  onAddContactToGroup,
 }: ContactListProps) {
   const t = useTranslations("contacts");
+  const locale = useLocale();
   const density = useSettingsStore((state) => state.density);
+  const groupByLetter = useSettingsStore((state) => state.groupContactsByLetter);
+  const { contextMenu, openContextMenu, closeContextMenu, menuRef } = useContextMenu<ContactCard>();
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [filters, setFilters] = useState<ListFilters>(EMPTY_FILTERS);
+  const activeFilters = countActiveFilters(filters);
+
+  const monthNames = useMemo(() => {
+    const fmt = new Intl.DateTimeFormat(locale, { month: "long" });
+    return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(2000, i, 1)));
+  }, [locale]);
 
   const filtered = useMemo(() => {
-    if (!searchQuery) return contacts;
+    const lower = searchQuery.trim().toLowerCase();
-    const lower = searchQuery.toLowerCase();
+    const orgLower = filters.organization.trim().toLowerCase();
+    const jobLower = filters.jobTitle.trim().toLowerCase();
+    const locLower = filters.location.trim().toLowerCase();
+    const domainLower = filters.emailDomain.trim().toLowerCase().replace(/^@/, "");
+
     return contacts.filter((c) => {
+      const emails = c.emails ? Object.values(c.emails) : [];
+      const phones = c.phones ? Object.values(c.phones) : [];
+      const orgs = c.organizations ? Object.values(c.organizations) : [];
+      const titles = c.titles ? Object.values(c.titles) : [];
+      const addresses = c.addresses ? Object.values(c.addresses) : [];
+      const anniversaries = c.anniversaries ? Object.values(c.anniversaries) : [];
+
+      if (!matchTri(emails.length > 0, filters.hasEmail)) return false;
+      if (!matchTri(phones.length > 0, filters.hasPhone)) return false;
+      if (!matchTri(!!getContactPhotoUri(c), filters.hasPhoto)) return false;
+
+      if (orgLower) {
+        const match = orgs.some((o) => {
+          if (o.name?.toLowerCase().includes(orgLower)) return true;
+          if (o.units?.some((u) => u.name?.toLowerCase().includes(orgLower))) return true;
+          return false;
+        });
+        if (!match) return false;
+      }
+
+      if (jobLower) {
+        if (!titles.some((ti) => ti.name?.toLowerCase().includes(jobLower))) return false;
+      }
+
+      if (locLower) {
+        const match = addresses.some((a) => {
+          const parts: string[] = [];
+          if (a.full) parts.push(a.full);
+          if (a.fullAddress) parts.push(a.fullAddress);
+          if (a.locality) parts.push(a.locality);
+          if (a.region) parts.push(a.region);
+          if (a.country) parts.push(a.country);
+          if (a.postcode) parts.push(a.postcode);
+          if (a.street) parts.push(a.street);
+          if (a.components) {
+            for (const comp of a.components) {
+              if (comp.value) parts.push(comp.value);
+            }
+          }
+          return parts.some((p) => p.toLowerCase().includes(locLower));
+        });
+        if (!match) return false;
+      }
+
+      if (domainLower) {
+        const match = emails.some((e) => {
+          const at = e.address?.toLowerCase().split("@");
+          return at && at.length > 1 && at[1].includes(domainLower);
+        });
+        if (!match) return false;
+      }
+
+      if (filters.birthdayMonth !== null) {
+        const target = filters.birthdayMonth;
+        const match = anniversaries.some((a) => a.kind === "birth" && getAnniversaryMonth(a.date) === target);
+        if (!match) return false;
+      }
+
+      if (!lower) return true;
       const name = getContactDisplayName(c).toLowerCase();
-      const emails = c.emails
+      if (name.includes(lower)) return true;
-        ? Object.values(c.emails).map((e) => e.address.toLowerCase())
+      if (emails.some((e) => e.address?.toLowerCase().includes(lower))) return true;
-        : [];
+      if (phones.some((p) => p.number?.toLowerCase().includes(lower))) return true;
-      const phones = c.phones
+      if (orgs.some((o) => o.name?.toLowerCase().includes(lower))) return true;
-        ? Object.values(c.phones).map((p) => p.number?.toLowerCase() || "")
+      return false;
-        : [];
-      const org = c.organizations
-        ? Object.values(c.organizations).map((o) => o.name?.toLowerCase() || "")
-        : [];
-      return (
-        name.includes(lower) ||
-        emails.some((e) => e.includes(lower)) ||
-        phones.some((p) => p.includes(lower)) ||
-        org.some((o) => o.includes(lower))
-      );
     });
-  }, [contacts, searchQuery]);
+  }, [contacts, searchQuery, filters]);
 
   const sorted = useMemo(() => {
     return [...filtered].sort((a, b) => {
@@ -84,29 +234,214 @@ export function ContactList({
 
   const sortedIds = useMemo(() => sorted.map(c => c.id), [sorted]);
 
+  // Group sorted contacts by first letter of display name. Non-letter
+  // starters (digits, symbols, empty) collect under "#" which sorts last.
+  const groupedSections = useMemo(() => {
+    const collator = new Intl.Collator(locale, { sensitivity: "base" });
+    const groups = new Map<string, ContactCard[]>();
+    for (const contact of sorted) {
+      const name = getContactDisplayName(contact).trim();
+      const first = name.charAt(0);
+      const letter = first && first.toLocaleUpperCase(locale).match(/\p{L}/u)
+        ? first.toLocaleUpperCase(locale)
+        : "#";
+      const bucket = groups.get(letter);
+      if (bucket) bucket.push(contact);
+      else groups.set(letter, [contact]);
+    }
+    return Array.from(groups.entries())
+      .sort(([a], [b]) => {
+        if (a === "#") return 1;
+        if (b === "#") return -1;
+        return collator.compare(a, b);
+      })
+      .map(([letter, items]) => ({ letter, items }));
+  }, [sorted, locale]);
+
   const hasSelection = selectedContactIds.size > 0;
   const allSelected = sorted.length > 0 && sorted.every(c => selectedContactIds.has(c.id));
 
   return (
     <div className={cn("flex flex-col h-full", className)}>
-      {/* Search header */}
+      {/* Toolbar: select / search / filter */}
-      <div className="px-3 border-b border-border space-y-1.5" style={{ paddingBlock: 'var(--density-header-py)' }}>
+      <div className="border-b border-border bg-background">
-        <div className="flex items-center justify-between">
+        <div className="px-3 py-3">
-          <span className="text-xs font-medium text-muted-foreground truncate">
+          <div className="flex items-center gap-1.5">
-            {categoryLabel} ({contacts.length})
+            <button
-          </span>
+              type="button"
-        </div>
+              onClick={() => {
-        <div className="relative">
+                if (hasSelection) {
-          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
+                  if (allSelected) onClearSelection();
-          <Input
+                  else onSelectAll(sortedIds);
-            placeholder={t("search_placeholder")}
+                } else if (sortedIds.length > 0) {
-            value={searchQuery}
+                  const target = selectedContactId && sortedIds.includes(selectedContactId)
-            onChange={(e) => onSearchChange(e.target.value)}
+                    ? selectedContactId
-            className="pl-8 h-8 text-sm"
+                    : sortedIds[0];
-          />
+                  onToggleSelection(target);
+                }
+              }}
+              className={cn(
+                "flex-shrink-0 p-2 rounded-md transition-colors",
+                hasSelection
+                  ? "bg-primary/10 text-primary"
+                  : "text-muted-foreground hover:text-foreground hover:bg-muted",
+              )}
+              title={hasSelection ? (allSelected ? t("bulk.clear") : t("bulk.select_all")) : t("filters.select")}
+            >
+              {hasSelection ? <CheckSquare className="w-4 h-4" /> : <Square className="w-4 h-4" />}
+            </button>
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Input
+                type="text"
+                placeholder={t("search_placeholder")}
+                value={searchQuery}
+                onChange={(e) => onSearchChange(e.target.value)}
+                className={cn("pl-9 h-9", searchQuery && "pr-8")}
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => onSearchChange("")}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                  aria-label={t("clear_search")}
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+            <button
+              type="button"
+              onClick={() => setFiltersOpen((v) => !v)}
+              className={cn(
+                "relative flex-shrink-0 p-2 rounded-md transition-colors",
+                filtersOpen || activeFilters > 0
+                  ? "bg-primary/10 text-primary"
+                  : "text-muted-foreground hover:text-foreground hover:bg-muted",
+              )}
+              title={t("filters.toggle")}
+              aria-label={t("filters.toggle")}
+            >
+              <Filter className="w-4 h-4" />
+              {!filtersOpen && activeFilters > 0 && (
+                <span className="absolute -top-1 -right-1 flex items-center justify-center w-4 h-4 text-[10px] font-bold rounded-full bg-primary text-primary-foreground">
+                  {activeFilters}
+                </span>
+              )}
+            </button>
+          </div>
         </div>
+
       </div>
 
+      {filtersOpen && (
+        <div className="border-b border-border bg-muted/30 animate-in slide-in-from-top-2 fade-in duration-200">
+          <div className="px-4 py-3 space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium text-foreground">{t("filters.title")}</span>
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setFilters(EMPTY_FILTERS)}
+                  className="h-7 px-2 text-xs"
+                >
+                  <RotateCcw className="w-3 h-3 mr-1" />
+                  {t("filters.clear")}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setFiltersOpen(false)}
+                  className="h-7 w-7"
+                  aria-label={t("filters.close")}
+                >
+                  <X className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2">
+              <div>
+                <label className="text-xs text-muted-foreground mb-1 block">{t("filters.organization")}</label>
+                <Input
+                  value={filters.organization}
+                  onChange={(e) => setFilters((f) => ({ ...f, organization: e.target.value }))}
+                  placeholder={t("filters.organization_placeholder")}
+                  className="h-8 text-sm"
+                />
+              </div>
+              <div>
+                <label className="text-xs text-muted-foreground mb-1 block">{t("filters.job_title")}</label>
+                <Input
+                  value={filters.jobTitle}
+                  onChange={(e) => setFilters((f) => ({ ...f, jobTitle: e.target.value }))}
+                  placeholder={t("filters.job_title_placeholder")}
+                  className="h-8 text-sm"
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2">
+              <div>
+                <label className="text-xs text-muted-foreground mb-1 block">{t("filters.location")}</label>
+                <Input
+                  value={filters.location}
+                  onChange={(e) => setFilters((f) => ({ ...f, location: e.target.value }))}
+                  placeholder={t("filters.location_placeholder")}
+                  className="h-8 text-sm"
+                />
+              </div>
+              <div>
+                <label className="text-xs text-muted-foreground mb-1 block">{t("filters.email_domain")}</label>
+                <Input
+                  value={filters.emailDomain}
+                  onChange={(e) => setFilters((f) => ({ ...f, emailDomain: e.target.value }))}
+                  placeholder={t("filters.email_domain_placeholder")}
+                  className="h-8 text-sm"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="text-xs text-muted-foreground mb-1 block">{t("filters.birthday_month")}</label>
+              <select
+                value={filters.birthdayMonth ?? ""}
+                onChange={(e) => setFilters((f) => ({ ...f, birthdayMonth: e.target.value === "" ? null : Number(e.target.value) }))}
+                className="h-8 w-full text-sm rounded-md border border-input bg-background px-2"
+                aria-label={t("filters.birthday_month")}
+              >
+                <option value="">{t("filters.any_month")}</option>
+                {monthNames.map((name, i) => (
+                  <option key={i} value={i + 1}>{name}</option>
+                ))}
+              </select>
+            </div>
+
+            <div className="flex items-center gap-2 flex-wrap">
+              <ToggleChip
+                icon={<Mail className="w-3.5 h-3.5" />}
+                label={t("filters.has_email")}
+                value={filters.hasEmail}
+                onClick={() => setFilters((f) => ({ ...f, hasEmail: cycleTri(f.hasEmail) }))}
+              />
+              <ToggleChip
+                icon={<Phone className="w-3.5 h-3.5" />}
+                label={t("filters.has_phone")}
+                value={filters.hasPhone}
+                onClick={() => setFilters((f) => ({ ...f, hasPhone: cycleTri(f.hasPhone) }))}
+              />
+              <ToggleChip
+                icon={<ImageIcon className="w-3.5 h-3.5" />}
+                label={t("filters.has_photo")}
+                value={filters.hasPhoto}
+                onClick={() => setFilters((f) => ({ ...f, hasPhoto: cycleTri(f.hasPhoto) }))}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Bulk action bar */}
       {hasSelection && (
         <div className="px-3 py-1.5 border-b border-border bg-accent/30 flex items-center gap-2 flex-wrap">
@@ -157,19 +492,32 @@ export function ContactList({
       <div className="flex-1 overflow-y-auto">
         {sorted.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full px-6 text-center">
-            {searchQuery ? (
+            {searchQuery || activeFilters > 0 ? (
               <>
-                <Search className="w-10 h-10 mb-3 text-muted-foreground/30" />
+                {activeFilters > 0 && !searchQuery ? (
-                <p className="text-sm font-medium text-foreground">{t("empty_search")}</p>
+                  <Filter className="w-10 h-10 mb-3 text-muted-foreground/30" />
-                <p className="text-xs text-muted-foreground mt-1">{t("empty_search_hint")}</p>
+                ) : (
-                <Button
+                  <Search className="w-10 h-10 mb-3 text-muted-foreground/30" />
-                  variant="outline"
+                )}
-                  size="sm"
+                <p className="text-sm font-medium text-foreground">
-                  className="mt-3"
+                  {searchQuery ? t("empty_search") : t("empty_filtered")}
-                  onClick={() => onSearchChange("")}
+                </p>
-                >
+                <p className="text-xs text-muted-foreground mt-1">
-                  {t("clear_search")}
+                  {searchQuery ? t("empty_search_hint") : t("empty_filtered_hint")}
-                </Button>
+                </p>
+                <div className="flex gap-2 mt-3">
+                  {searchQuery && (
+                    <Button variant="outline" size="sm" onClick={() => onSearchChange("")}>
+                      {t("clear_search")}
+                    </Button>
+                  )}
+                  {activeFilters > 0 && (
+                    <Button variant="outline" size="sm" onClick={() => setFilters(EMPTY_FILTERS)}>
+                      <RotateCcw className="w-3.5 h-3.5 mr-1" />
+                      {t("filters.clear")}
+                    </Button>
+                  )}
+                </div>
               </>
             ) : (
               <>
@@ -184,8 +532,8 @@ export function ContactList({
             )}
           </div>
         ) : (
-          <div>
+          (() => {
-            {sorted.map((contact) => (
+            const renderItem = (contact: ContactCard) => (
               <ContactListItem
                 key={contact.id}
                 contact={contact}
@@ -210,11 +558,45 @@ export function ContactList({
                   e.stopPropagation();
                   onToggleSelection(contact.id);
                 }}
+                onContextMenu={(e, c) => openContextMenu(e, c)}
               />
-            ))}
+            );
-          </div>
+            return groupByLetter ? (
+              <div>
+                {groupedSections.map(({ letter, items }) => (
+                  <section key={letter}>
+                    <div className="sticky top-0 z-10 px-4 py-0.5 bg-background/90 backdrop-blur-sm text-[11px] font-medium text-muted-foreground/70 uppercase tracking-wide">
+                      {letter}
+                    </div>
+                    {items.map(renderItem)}
+                  </section>
+                ))}
+              </div>
+            ) : (
+              <div>{sorted.map(renderItem)}</div>
+            );
+          })()
         )}
       </div>
+
+      {contextMenu.data && (
+        <ContactContextMenu
+          contact={contextMenu.data}
+          position={contextMenu.position}
+          isOpen={contextMenu.isOpen}
+          onClose={closeContextMenu}
+          menuRef={menuRef}
+          isMultiSelect={selectedContactIds.has(contextMenu.data.id)}
+          selectedCount={selectedContactIds.size}
+          onOpen={() => onSelectContact(contextMenu.data!.id)}
+          onEdit={() => onEditContact(contextMenu.data!.id)}
+          onDelete={() => onDeleteContact(contextMenu.data!)}
+          onAddToGroup={() => onAddContactToGroup(contextMenu.data!.id)}
+          onBatchExport={onBulkExport}
+          onBatchAddToGroup={onBulkAddToGroup}
+          onBatchDelete={onBulkDelete}
+        />
+      )}
     </div>
   );
 }

components/contacts/contact-print.ts

@@ -0,0 +1,120 @@
+import type { ContactCard, PartialDate } from "@/lib/jmap/types";
+import { getContactDisplayName, getContactPhotoUri } from "@/stores/contact-store";
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+export function printContact(contact: ContactCard, displayName?: string): void {
+  const printWindow = window.open("", "_blank");
+  if (!printWindow) return;
+
+  const name = displayName || getContactDisplayName(contact);
+  const photoUri = getContactPhotoUri(contact);
+  const emails = contact.emails ? Object.values(contact.emails) : [];
+  const phones = contact.phones ? Object.values(contact.phones) : [];
+  const orgs = contact.organizations ? Object.values(contact.organizations) : [];
+  const titles = contact.titles ? Object.values(contact.titles) : [];
+  const addresses = contact.addresses ? Object.values(contact.addresses) : [];
+  const onlineServices = contact.onlineServices ? Object.values(contact.onlineServices) : [];
+  const notes = contact.notes ? Object.values(contact.notes) : [];
+  const anniversaries = contact.anniversaries ? Object.values(contact.anniversaries) : [];
+
+  const rows: string[] = [];
+  const section = (title: string, items: string[]) => {
+    if (items.length === 0) return;
+    rows.push(`<section><h2>${escapeHtml(title)}</h2><dl>${items.join("")}</dl></section>`);
+  };
+  const row = (label: string, value: string) =>
+    `<dt>${escapeHtml(label)}</dt><dd>${escapeHtml(value)}</dd>`;
+
+  section("Email", emails.map(e => row(e.label || "Email", e.address || "")));
+  section("Phone", phones.map(p => row(p.label || "Phone", p.number || "")));
+  section(
+    "Organization",
+    orgs.map(o => {
+      const units = o.units ? Object.values(o.units).map(u => u.name).filter(Boolean).join(", ") : "";
+      const value = [o.name, units].filter(Boolean).join(" \u2014 ");
+      return row("Organization", value);
+    }),
+  );
+  section("Title", titles.map(t => row(t.kind === "role" ? "Role" : "Title", t.name || "")));
+  section(
+    "Address",
+    addresses.map(a => {
+      const parts = [a.street, a.locality, a.region, a.postcode, a.country]
+        .map(p => (typeof p === "string" ? p : ""))
+        .filter(Boolean);
+      return row(a.label || "Address", parts.join(", "));
+    }),
+  );
+  section(
+    "Online",
+    onlineServices.map(s => row(s.label || s.service || "Online", s.uri || s.user || "")),
+  );
+  section(
+    "Anniversary",
+    anniversaries.map(a => {
+      const date = a.date;
+      let formatted = "";
+      if (typeof date === "object" && date !== null) {
+        if ("utc" in date && typeof date.utc === "string") formatted = date.utc;
+        else {
+          const parts: string[] = [];
+          const pd = date as PartialDate;
+          if (pd.year) parts.push(String(pd.year));
+          if (pd.month) parts.push(String(pd.month).padStart(2, "0"));
+          if (pd.day) parts.push(String(pd.day).padStart(2, "0"));
+          formatted = parts.join("-");
+        }
+      } else if (date) {
+        formatted = String(date);
+      }
+      return row(a.kind || "Date", formatted);
+    }),
+  );
+  section("Notes", notes.map(n => row("", n.note || "")));
+
+  const photoTag = photoUri
+    ? `<img class="photo" src="${escapeHtml(photoUri)}" alt="" />`
+    : `<div class="photo placeholder">${escapeHtml((name || "?").charAt(0).toUpperCase())}</div>`;
+
+  const html = `<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>${escapeHtml(name || "Contact")}</title>
+<style>
+  * { box-sizing: border-box; }
+  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #111; margin: 32px; }
+  header { display: flex; align-items: center; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid #ccc; }
+  .photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
+  .photo.placeholder { background: #e5e7eb; color: #4b5563; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 600; }
+  h1 { margin: 0; font-size: 22px; }
+  section { margin-top: 20px; }
+  h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #555; margin: 0 0 8px; }
+  dl { margin: 0; display: grid; grid-template-columns: 140px 1fr; row-gap: 6px; column-gap: 16px; font-size: 14px; }
+  dt { color: #555; }
+  dd { margin: 0; word-break: break-word; }
+  @media print { body { margin: 16mm; } }
+</style>
+</head>
+<body>
+<header>
+  ${photoTag}
+  <div><h1>${escapeHtml(name || "Contact")}</h1></div>
+</header>
+${rows.join("")}
+</body>
+</html>`;
+
+  printWindow.document.write(html);
+  printWindow.document.close();
+  printWindow.focus();
+  printWindow.print();
+}

components/contacts/contacts-sidebar.tsx

@@ -2,7 +2,8 @@
 
 import { useMemo, useState, useCallback, useEffect, useRef, type DragEvent } from "react";
 import { useTranslations } from "next-intl";
-import { BookUser, Users, Plus, Share2, Book, ChevronRight, ChevronDown, UserPlus, UsersRound, Upload, Tag, Pencil, Trash2 } from "lucide-react";
+import { BookUser, Users, Plus, Share2, Book, ChevronRight, ChevronDown, UserPlus, UsersRound, Upload, Tag, Pencil, Trash2, Settings } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from "@/components/ui/context-menu";
 import { useContextMenu } from "@/hooks/use-context-menu";
@@ -25,6 +26,11 @@ interface ContactsSidebarProps {
   onDeleteGroup?: (groupId: string) => void;
   onDropContacts?: (contactIds: string[], addressBook: AddressBook) => void;
   onDropContactsToCategory?: (contactIds: string[], keyword: string) => void;
+  onRenameAddressBook?: (addressBook: AddressBook) => void;
+  onShareAddressBook?: (addressBook: AddressBook) => void;
+  onCreateContactInBook?: (addressBook: AddressBook) => void;
+  onDeleteAddressBook?: (addressBook: AddressBook) => void;
+  onRenameKeyword?: (keyword: string) => void;
   className?: string;
 }
 
@@ -58,10 +64,18 @@ export function ContactsSidebar({
   onDeleteGroup,
   onDropContacts,
   onDropContactsToCategory,
+  onRenameAddressBook,
+  onShareAddressBook,
+  onCreateContactInBook,
+  onDeleteAddressBook,
+  onRenameKeyword,
   className,
 }: ContactsSidebarProps) {
   const t = useTranslations("contacts");
+  const router = useRouter();
   const { contextMenu: groupContextMenu, openContextMenu: openGroupContextMenu, closeContextMenu: closeGroupContextMenu, menuRef: groupMenuRef } = useContextMenu<ContactCard>();
+  const { contextMenu: bookContextMenu, openContextMenu: openBookContextMenu, closeContextMenu: closeBookContextMenu, menuRef: bookMenuRef } = useContextMenu<AddressBook>();
+  const { contextMenu: keywordContextMenu, openContextMenu: openKeywordContextMenu, closeContextMenu: closeKeywordContextMenu, menuRef: keywordMenuRef } = useContextMenu<string>();
 
   const [collapsed, setCollapsed] = useState<Record<string, boolean>>(loadCollapsed);
   const [showMenu, setShowMenu] = useState(false);
@@ -246,19 +260,32 @@ export function ContactsSidebar({
         {/* My Address Books */}
         {personalBooks.length > 0 && (
           <div className="mt-2">
-            <button
+            <div className="flex items-center px-3 py-1 group">
-              onClick={() => toggleSection("addressBooks")}
+              <button
-              className="flex items-center gap-1 px-3 py-1 w-full text-left group"
+                onClick={() => toggleSection("addressBooks")}
-            >
+                className="flex items-center gap-1 flex-1 text-left"
-              {collapsed.addressBooks ? (
+              >
-                <ChevronRight className="w-3 h-3 text-muted-foreground" />
+                {collapsed.addressBooks ? (
-              ) : (
+                  <ChevronRight className="w-3 h-3 text-muted-foreground" />
-                <ChevronDown className="w-3 h-3 text-muted-foreground" />
+                ) : (
-              )}
+                  <ChevronDown className="w-3 h-3 text-muted-foreground" />
-              <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                )}
-                {t("address_books.title")}
+                <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-              </span>
+                  {t("address_books.title")}
-            </button>
+                </span>
+              </button>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  try { localStorage.setItem('settings-active-tab', 'contacts'); } catch { /* ignore */ }
+                  router.push('/settings');
+                }}
+                className="p-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-150 hover:bg-muted"
+                title={t("address_books.manage")}
+              >
+                <Settings className="w-3 h-3 text-muted-foreground" />
+              </button>
+            </div>
             {!collapsed.addressBooks && personalBooks.map((book) => (
               <AddressBookItem
                 key={book.id}
@@ -267,6 +294,7 @@ export function ContactsSidebar({
                 contactCount={contactCountByBook[book.id] || 0}
                 onSelect={() => onSelectCategory({ addressBookId: book.id })}
                 onDropContacts={onDropContacts}
+                onContextMenu={(onRenameAddressBook || onShareAddressBook || onCreateContactInBook || onDeleteAddressBook) ? (e) => openBookContextMenu(e, book) : undefined}
               />
             ))}
           </div>
@@ -362,6 +390,7 @@ export function ContactsSidebar({
                     isActive={isActive}
                     onSelect={() => onSelectCategory({ keyword })}
                     onDropContacts={onDropContactsToCategory}
+                    onContextMenu={onRenameKeyword ? (e) => openKeywordContextMenu(e, keyword) : undefined}
                   />
                 );
               })}
@@ -372,20 +401,33 @@ export function ContactsSidebar({
         {/* Shared accounts with address books */}
         {sharedBookGroups.map((group) => (
           <div key={group.accountId} className="mt-2">
-            <button
+            <div className="flex items-center px-3 py-1 group">
-              onClick={() => toggleSection(`shared-${group.accountId}`)}
+              <button
-              className="flex items-center gap-1 px-3 py-1 w-full text-left group"
+                onClick={() => toggleSection(`shared-${group.accountId}`)}
-            >
+                className="flex items-center gap-1 flex-1 min-w-0 text-left"
-              {collapsed[`shared-${group.accountId}`] ? (
+              >
-                <ChevronRight className="w-3 h-3 text-muted-foreground" />
+                {collapsed[`shared-${group.accountId}`] ? (
-              ) : (
+                  <ChevronRight className="w-3 h-3 text-muted-foreground" />
-                <ChevronDown className="w-3 h-3 text-muted-foreground" />
+                ) : (
-              )}
+                  <ChevronDown className="w-3 h-3 text-muted-foreground" />
-              <Share2 className="w-3 h-3 text-muted-foreground" />
+                )}
-              <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider truncate">
+                <Share2 className="w-3 h-3 text-muted-foreground" />
-                {t("address_books.shared_prefix", { name: group.accountName })}
+                <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider truncate">
-              </span>
+                  {t("address_books.shared_prefix", { name: group.accountName })}
-            </button>
+                </span>
+              </button>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  try { localStorage.setItem('settings-active-tab', 'contacts'); } catch { /* ignore */ }
+                  router.push('/settings');
+                }}
+                className="p-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-150 hover:bg-muted"
+                title={t("address_books.manage")}
+              >
+                <Settings className="w-3 h-3 text-muted-foreground" />
+              </button>
+            </div>
             {!collapsed[`shared-${group.accountId}`] && group.books.map((book) => (
               <AddressBookItem
                 key={book.id}
@@ -394,12 +436,94 @@ export function ContactsSidebar({
                 contactCount={contactCountByBook[book.id] || 0}
                 onSelect={() => onSelectCategory({ addressBookId: book.id })}
                 onDropContacts={onDropContacts}
+                onContextMenu={(onRenameAddressBook || onShareAddressBook || onCreateContactInBook || onDeleteAddressBook) ? (e) => openBookContextMenu(e, book) : undefined}
               />
             ))}
           </div>
         ))}
       </div>
 
+      {/* Address book context menu */}
+      {bookContextMenu.data && (onRenameAddressBook || onShareAddressBook || onCreateContactInBook || onDeleteAddressBook) && (() => {
+        const book = bookContextMenu.data;
+        const canCreate = onCreateContactInBook && book.myRights?.mayWrite !== false;
+        const canRename = onRenameAddressBook && book.myRights?.mayWrite !== false;
+        const canShare = onShareAddressBook && book.myRights?.mayShare && !book.isShared;
+        const canDelete = onDeleteAddressBook && !book.isDefault && !book.isShared && book.myRights?.mayDelete !== false;
+        const showSeparator = (canCreate || canRename || canShare) && canDelete;
+        return (
+          <ContextMenu
+            ref={bookMenuRef}
+            isOpen={bookContextMenu.isOpen}
+            position={bookContextMenu.position}
+            onClose={closeBookContextMenu}
+          >
+            {canCreate && (
+              <ContextMenuItem
+                icon={UserPlus}
+                label={t("address_books.new_contact_in_book")}
+                onClick={() => {
+                  closeBookContextMenu();
+                  onCreateContactInBook(book);
+                }}
+              />
+            )}
+            {canRename && (
+              <ContextMenuItem
+                icon={Pencil}
+                label={t("address_books.rename")}
+                onClick={() => {
+                  closeBookContextMenu();
+                  onRenameAddressBook(book);
+                }}
+              />
+            )}
+            {canShare && (
+              <ContextMenuItem
+                icon={Users}
+                label={t("address_books.share")}
+                onClick={() => {
+                  closeBookContextMenu();
+                  onShareAddressBook(book);
+                }}
+              />
+            )}
+            {showSeparator && <ContextMenuSeparator />}
+            {canDelete && (
+              <ContextMenuItem
+                icon={Trash2}
+                label={t("address_books.delete")}
+                onClick={() => {
+                  closeBookContextMenu();
+                  onDeleteAddressBook(book);
+                }}
+                destructive
+              />
+            )}
+          </ContextMenu>
+        );
+      })()}
+
+      {/* Keyword (category) context menu */}
+      {keywordContextMenu.data && onRenameKeyword && (
+        <ContextMenu
+          ref={keywordMenuRef}
+          isOpen={keywordContextMenu.isOpen}
+          position={keywordContextMenu.position}
+          onClose={closeKeywordContextMenu}
+        >
+          <ContextMenuItem
+            icon={Pencil}
+            label={t("rename_category")}
+            onClick={() => {
+              const kw = keywordContextMenu.data!;
+              closeKeywordContextMenu();
+              onRenameKeyword(kw);
+            }}
+          />
+        </ContextMenu>
+      )}
+
       {/* Group context menu */}
       {groupContextMenu.data && (
         <ContextMenu
@@ -438,12 +562,14 @@ function CategoryItem({
   isActive,
   onSelect,
   onDropContacts,
+  onContextMenu,
 }: {
   keyword: string;
   count: number;
   isActive: boolean;
   onSelect: () => void;
   onDropContacts?: (contactIds: string[], keyword: string) => void;
+  onContextMenu?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }) {
   const [isDragOver, setIsDragOver] = useState(false);
 
@@ -476,6 +602,7 @@ function CategoryItem({
   return (
     <button
       onClick={onSelect}
+      onContextMenu={onContextMenu}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
@@ -503,12 +630,14 @@ function AddressBookItem({
   contactCount,
   onSelect,
   onDropContacts,
+  onContextMenu,
 }: {
   book: AddressBook;
   isActive: boolean;
   contactCount: number;
   onSelect: () => void;
   onDropContacts?: (contactIds: string[], addressBook: AddressBook) => void;
+  onContextMenu?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }) {
   const [isDragOver, setIsDragOver] = useState(false);
 
@@ -541,6 +670,7 @@ function AddressBookItem({
   return (
     <button
       onClick={onSelect}
+      onContextMenu={onContextMenu}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}

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

@@ -38,6 +38,7 @@ describe('EmailListItem tag badge', () => {
     useSettingsStore.setState({
       emailKeywords: [...DEFAULT_KEYWORDS],
       showPreview: false,
+      mailLayout: 'split',
     });
     useEmailStore.setState({
       selectedEmailIds: new Set<string>(),
@@ -104,4 +105,17 @@ describe('EmailListItem tag badge', () => {
     render(<EmailListItem email={email} />);
     expect(screen.getByText('Hello World')).toBeInTheDocument();
   });
+
+  it('renders inline preview text in focused mail layout', () => {
+    useSettingsStore.setState({
+      showPreview: true,
+      mailLayout: 'focus',
+    });
+    const email = makeEmail({ preview: 'Inline preview content' });
+    const { container } = render(<EmailListItem email={email} />);
+
+    expect(screen.getByText('Test Subject')).toBeInTheDocument();
+    expect(screen.getByText(/Inline preview content/)).toBeInTheDocument();
+    expect(container.querySelector('p')).toBeNull();
+  });
 });

components/email/calendar-invitation-banner.tsx

@@ -15,6 +15,7 @@ import {
   X,
   AlertCircle,
   ChevronDown,
+  ChevronUp,
 } from 'lucide-react';
 import { useTranslations, useFormatter } from 'next-intl';
 import { useRouter } from '@/i18n/navigation';
@@ -372,6 +373,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
   const [showCalendarPicker, setShowCalendarPicker] = useState(false);
   const [selectedCalendarId, setSelectedCalendarId] = useState<string>('');
   const [rawIcsMethod, setRawIcsMethod] = useState<InvitationMethod>('unknown');
+  const [isCollapsed, setIsCollapsed] = useState(true);
 
   const attachment = findCalendarAttachment(email);
 
@@ -442,6 +444,8 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
   const summary = parsedEvent ? formatEventSummary(parsedEvent) : null;
   const isCancellation = method === 'cancel';
   const isResponseOnly = method === 'reply' || method === 'refresh' || method === 'counter' || method === 'declinecounter';
+  const canCollapse = method === 'reply';
+  const showDetails = !canCollapse || !isCollapsed;
   const allowsRsvp = method === 'request';
   const allowsImport = method === 'request' || method === 'publish' || method === 'add' || method === 'unknown';
 
@@ -527,7 +531,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) {
@@ -750,53 +754,84 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
           )}
           <span className="text-sm font-medium text-foreground truncate">{bannerTitle}</span>
         </div>
+        {canCollapse && (
+          <button
+            type="button"
+            onClick={() => setIsCollapsed((prev) => !prev)}
+            aria-expanded={!isCollapsed}
+            aria-label={isCollapsed ? t('expand') : t('collapse')}
+            title={isCollapsed ? t('expand') : t('collapse')}
+            className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors flex-shrink-0"
+          >
+            {isCollapsed ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />}
+          </button>
+        )}
       </div>
 
       {/* Content */}
+      {showDetails && (
       <div className="px-4 py-3 space-y-2.5">
-        {/* Event title */}
+        <div className="lg:flex lg:gap-6">
-        {summary?.title && (
+          {/* Left: Event info */}
-          <div className="flex items-start justify-between gap-2">
+          <div className="lg:flex-1 space-y-2.5 min-w-0">
-            <h3 className={cn(
+            {/* Event title */}
-              "text-base font-semibold leading-snug",
+            {summary?.title && (
-              isCancellation ? "line-through text-muted-foreground" : "text-foreground"
+              <div className="flex items-start justify-between gap-2">
-            )}>
+                <h3 className={cn(
-              {summary.title}
+                  "text-base font-semibold leading-snug",
-            </h3>
+                  isCancellation ? "line-through text-muted-foreground" : "text-foreground"
-            {parsedEvent?.sequence != null && parsedEvent.sequence > 0 && (
+                )}>
-              <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground flex-shrink-0 whitespace-nowrap">
+                  {summary.title}
-                {t('event_updated', { sequence: parsedEvent.sequence })}
+                </h3>
-              </span>
+                {parsedEvent?.sequence != null && parsedEvent.sequence > 0 && (
+                  <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground flex-shrink-0 whitespace-nowrap">
+                    {t('event_updated', { sequence: parsedEvent.sequence })}
+                  </span>
+                )}
+              </div>
             )}
-          </div>
-        )}
 
-        {/* Event details */}
+            {/* Event details */}
-        <div className="space-y-1">
+            <div className="lg:flex lg:items-center lg:gap-4 lg:flex-wrap space-y-1 lg:space-y-0">
-          {summary?.start && (
+              {summary?.start && (
-            <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
-              <Clock className="w-3.5 h-3.5 flex-shrink-0" />
+                  <Clock className="w-3.5 h-3.5 flex-shrink-0" />
-              <span>
+                  <span>
-                {formatDateTime(summary.start)}
+                    {formatDateTime(summary.start)}
-                {summary.end && ` – ${formatDateTime(summary.end)}`}
+                    {summary.end && ` – ${formatDateTime(summary.end)}`}
-              </span>
+                  </span>
+                </div>
+              )}
+              {summary?.location && (
+                <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                  <MapPin className="w-3.5 h-3.5 flex-shrink-0" />
+                  <span>{summary.location}</span>
+                </div>
+              )}
+              {summary?.organizer && (
+                <span className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                  <Users className="w-3.5 h-3.5 flex-shrink-0" />
+                  {t('organizer', { name: summary.organizer })}
+                </span>
+              )}
+              {summary && summary.attendeeCount > 0 && (
+                <span className="text-sm text-muted-foreground">{t('attendees', { count: summary.attendeeCount })}</span>
+              )}
             </div>
-          )}
+          </div>
-          {summary?.location && (
+
-            <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+          {/* Right: Info & actor messages on large screens */}
-              <MapPin className="w-3.5 h-3.5 flex-shrink-0" />
+          <div className="lg:flex-shrink-0 lg:text-right lg:max-w-xs mt-2.5 lg:mt-0 space-y-1">
-              <span>{summary.location}</span>
+            {bannerInfo && (
-            </div>
+              <p className="text-xs text-muted-foreground leading-relaxed">{bannerInfo}</p>
-          )}
-          <div className="flex items-center gap-3 text-sm text-muted-foreground flex-wrap">
-            {summary?.organizer && (
-              <span className="flex items-center gap-1.5">
-                <Users className="w-3.5 h-3.5 flex-shrink-0" />
-                {t('organizer', { name: summary.organizer })}
-              </span>
             )}
-            {summary && summary.attendeeCount > 0 && (
+            {actorMessage && (
-              <span>{t('attendees', { count: summary.attendeeCount })}</span>
+              <p className="text-xs text-muted-foreground">{actorMessage}</p>
+            )}
+            {actorSummary?.participationComment && (
+              <p className="text-xs text-muted-foreground italic">
+                {t('actor_note', { comment: actorSummary.participationComment })}
+              </p>
             )}
           </div>
         </div>
@@ -840,23 +875,6 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
           </div>
         )}
 
-        {/* Info text */}
-        {bannerInfo && (
-          <p className="text-xs text-muted-foreground leading-relaxed">{bannerInfo}</p>
-        )}
-
-        {/* Actor message */}
-        {actorMessage && (
-          <p className="text-xs text-muted-foreground">{actorMessage}</p>
-        )}
-
-        {/* Actor comment */}
-        {actorSummary?.participationComment && (
-          <p className="text-xs text-muted-foreground italic">
-            {t('actor_note', { comment: actorSummary.participationComment })}
-          </p>
-        )}
-
         {/* Proposed changes */}
         {proposedChanges.length > 0 && (
           <div className="rounded-md border border-border bg-muted/30 px-3 py-2.5 text-xs">
@@ -893,8 +911,10 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
           </div>
         )}
       </div>
+      )}
 
       {/* Actions */}
+      {showDetails && (
       <div className="px-4 py-2.5 border-t border-border bg-muted/20 flex items-center gap-2 flex-wrap">
         {canRespond && (
           <>
@@ -1019,6 +1039,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
           <Loader2 className="w-4 h-4 animate-spin text-muted-foreground ml-auto" />
         )}
       </div>
+      )}
     </div>
   );
 }

components/email/email-composer.tsx

@@ -6,12 +6,13 @@ import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { X, Paperclip, Send, Save, Check, Loader2, AlertCircle, FileText, BookmarkPlus, ShieldCheck, Lock } from "lucide-react";
-import { cn, formatFileSize, formatDateTime } from "@/lib/utils";
+import { cn, formatFileSize, formatDateTime, generateUUID } from "@/lib/utils";
 import { debug } from "@/lib/debug";
 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";
@@ -29,13 +30,13 @@ import { TemplatePicker } from "@/components/templates/template-picker";
 import { TemplateForm } from "@/components/templates/template-form";
 import type { EmailTemplate } from "@/lib/template-types";
 import { appendPlainTextSignature, getPlainTextSignature } from "@/lib/signature-utils";
+import { findReplyIdentityId } from "@/lib/reply-identity";
 import { RichTextEditor } from "@/components/email/rich-text-editor";
 
 /** Strip HTML tags and decode entities to get a plain-text version */
 function htmlToPlainText(html: string): string {
-  const tmp = document.createElement('div');
+  const doc = new DOMParser().parseFromString(html, 'text/html');
-  tmp.innerHTML = html;
+  return doc.body.textContent || '';
-  return tmp.textContent || tmp.innerText || '';
 }
 
 export interface ComposerDraftData {
@@ -65,7 +66,7 @@ interface EmailComposerProps {
     fromEmail?: string;
     fromName?: string;
     identityId?: string;
-    attachments?: Array<{ blobId: string; name: string; type: string; size: number }>;
+    attachments?: Array<{ blobId: string; name: string; type: string; size: number; disposition?: 'attachment' | 'inline'; cid?: string }>;
   }) => void | Promise<void>;
   onClose?: () => void;
   onDiscardDraft?: (draftId: string) => void;
@@ -76,15 +77,30 @@ interface EmailComposerProps {
   mode?: 'compose' | 'reply' | 'replyAll' | 'forward';
   replyTo?: {
     from?: { email?: string; name?: string }[];
+    replyToAddresses?: { email?: string; name?: string }[];
     to?: { email?: string; name?: string }[];
     cc?: { email?: string; name?: string }[];
+    bcc?: { email?: string; name?: string }[];
     subject?: string;
     body?: string;
     htmlBody?: string;
     receivedAt?: string;
+    accountId?: string;
+    attachments?: Array<{ blobId: string; name?: string; type: string; size: number; cid?: string; disposition?: string }>;
   };
 }
 
+type ComposerAttachment = {
+  file?: File;
+  name: string;
+  type: string;
+  size: number;
+  blobId?: string;
+  uploading?: boolean;
+  error?: boolean;
+  abortController?: AbortController;
+};
+
 export function EmailComposer({
   onSend,
   onClose,
@@ -100,17 +116,22 @@ export function EmailComposer({
   const tCommon = useTranslations('common');
   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 = () => {
     if (!replyTo) return "";
+    // RFC 5322: use Reply-To header if present, otherwise fall back to From
+    const replyTarget = replyTo.replyToAddresses?.length
+      ? replyTo.replyToAddresses.filter(r => r.email).map(r => r.email).join(", ")
+      : replyTo.from?.[0]?.email || "";
     if (mode === 'reply') {
-      const email = replyTo.from?.[0]?.email || "";
+      return replyTarget ? replyTarget + ', ' : "";
-      return email ? email + ', ' : "";
     } else if (mode === 'replyAll') {
-      const from = replyTo.from?.[0]?.email || "";
       const originalTo = replyTo.to?.filter(r => r.email).map(r => r.email).join(", ") || "";
-      const combined = [from, originalTo].filter(Boolean).join(", ");
+      const combined = [replyTarget, originalTo].filter(Boolean).join(", ");
       return combined ? combined + ', ' : "";
     }
     return "";
@@ -192,7 +213,22 @@ export function EmailComposer({
   const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
   const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const lastSavedDataRef = useRef<string>("");
-  const [attachments, setAttachments] = useState<Array<{ file: File; blobId?: string; uploading?: boolean; error?: boolean; abortController?: AbortController }>>([]);
+  const [attachments, setAttachments] = useState<ComposerAttachment[]>(() => {
+    if (mode === 'forward' && replyTo?.attachments?.length) {
+      return replyTo.attachments
+        // Skip inline cid-referenced images - they're embedded in the forwarded HTML body
+        // (matches the viewer's hideInlineImageAttachments logic).
+        .filter(att => !(att.cid && att.disposition === 'inline' && (att.type || '').startsWith('image/')))
+        .map(att => ({
+          name: att.name || 'attachment',
+          type: att.type || 'application/octet-stream',
+          size: att.size,
+          blobId: att.blobId,
+        }));
+    }
+    return [];
+  });
+  const inlineImagesRef = useRef<Array<{ cid: string; blobId: string; type: string; name: string; size: number; dataUrl: string }>>([]);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [validationErrors, setValidationErrors] = useState<{ to?: boolean; subject?: boolean; body?: boolean }>({});
   const [shakeField, setShakeField] = useState<string | null>(null);
@@ -207,6 +243,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,
@@ -220,12 +258,59 @@ 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;
   const currentIdentity = selectedIdentityId
     ? identities.find((identity) => identity.id === selectedIdentityId) || primaryIdentity
     : primaryIdentity;
+  useEffect(() => {
+    if (!autoSelectReplyIdentity) return;
+    if (selectedIdentityId || initialData?.selectedIdentityId) return;
+    if (mode !== 'reply' && mode !== 'replyAll') return;
+
+    const matchedIdentityId = findReplyIdentityId(identities, {
+      to: replyTo?.to,
+      cc: replyTo?.cc,
+      bcc: replyTo?.bcc,
+    });
+
+    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,
+    selectedIdentityId,
+  ]);
+
   const composerSignatureHtml = currentIdentity?.htmlSignature
     ? `<div>${sanitizeEmailHtml(currentIdentity.htmlSignature)}</div>`
     : currentIdentity?.textSignature
@@ -266,7 +351,7 @@ export function EmailComposer({
   stateRef.current = { to, cc, bcc, subject, body, showCc, showBcc, selectedIdentityId, subAddressTag, draftId };
 
   // Track initial values for dirty detection (captured once on first render)
-  const initialValuesRef = useRef({ to, cc, bcc, subject, body, attachmentCount: 0 });
+  const initialValuesRef = useRef({ to, cc, bcc, subject, body, attachmentCount: attachments.length });
   const isDirtyRef = useRef(false);
   isDirtyRef.current = to !== initialValuesRef.current.to || cc !== initialValuesRef.current.cc ||
     bcc !== initialValuesRef.current.bcc || subject !== initialValuesRef.current.subject ||
@@ -301,6 +386,17 @@ export function EmailComposer({
     return () => window.removeEventListener('beforeunload', handleBeforeUnload);
   }, []);
 
+  // Auto-focus the To field when composing a new email or forwarding
+  useEffect(() => {
+    if (mode === 'forward' || mode === 'compose') {
+      // Small delay to ensure the input is rendered
+      const timer = setTimeout(() => {
+        toInputRef.current?.focus();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [mode]);
+
   const [autocompleteResults, setAutocompleteResults] = useState<Array<{ name: string; email: string }>>([]);
   const [activeAutoField, setActiveAutoField] = useState<'to' | 'cc' | 'bcc' | null>(null);
   const [autoSelectedIndex, setAutoSelectedIndex] = useState(-1);
@@ -308,10 +404,26 @@ export function EmailComposer({
   const toInputRef = useRef<HTMLInputElement>(null);
   const ccInputRef = useRef<HTMLInputElement>(null);
   const bccInputRef = useRef<HTMLInputElement>(null);
+  const subjectInputRef = useRef<HTMLInputElement>(null);
+  const bodyRef = useRef<HTMLTextAreaElement>(null);
+  const editorContainerRef = useRef<HTMLDivElement>(null);
   const toDropdownRef = useRef<HTMLDivElement>(null);
   const ccDropdownRef = useRef<HTMLDivElement>(null);
   const bccDropdownRef = useRef<HTMLDivElement>(null);
 
+  const focusSubject = useCallback(() => {
+    subjectInputRef.current?.focus();
+  }, []);
+
+  const focusBody = useCallback(() => {
+    if (plainTextMode) {
+      bodyRef.current?.focus();
+    } else {
+      const proseMirror = editorContainerRef.current?.querySelector('.ProseMirror') as HTMLElement | null;
+      proseMirror?.focus();
+    }
+  }, [plainTextMode]);
+
   const handleAutocomplete = useCallback((value: string, field: 'to' | 'cc' | 'bcc') => {
     if (autocompleteTimeoutRef.current) {
       clearTimeout(autocompleteTimeoutRef.current);
@@ -438,9 +550,16 @@ export function EmailComposer({
   const addFiles = useCallback(async (files: File[]) => {
     if (!client || files.length === 0) return;
 
-    const newAttachments = files.map(file => {
+    const newAttachments: ComposerAttachment[] = files.map(file => {
       const controller = new AbortController();
-      return { file, uploading: true, abortController: controller };
+      return {
+        file,
+        name: file.name,
+        type: file.type || 'application/octet-stream',
+        size: file.size,
+        uploading: true,
+        abortController: controller,
+      };
     });
     setAttachments(prev => [...prev, ...newAttachments]);
 
@@ -475,11 +594,32 @@ export function EmailComposer({
     }
   }, [client, t]);
 
-  const handleImageUpload = useCallback(async (file: File): Promise<string | null> => {
+  const handleImageUpload = useCallback(async (
+    file: File,
+  ): Promise<{ src: string; cid: string } | null> => {
     if (!client) return null;
     try {
-      const { blobId } = await client.uploadBlob(file);
+      const readAsDataUrl = new Promise<string | null>((resolve) => {
-      return await client.fetchBlobAsObjectUrl(blobId, file.name, file.type);
+        const reader = new FileReader();
+        reader.onload = (e) => resolve((e.target?.result as string) ?? null);
+        reader.onerror = () => resolve(null);
+        reader.readAsDataURL(file);
+      });
+      const [{ blobId }, dataUrl] = await Promise.all([
+        client.uploadBlob(file),
+        readAsDataUrl,
+      ]);
+      if (!dataUrl) throw new Error('Failed to read image as data URL');
+      const cid = `${generateUUID()}@webmail`;
+      inlineImagesRef.current.push({
+        cid,
+        blobId,
+        type: file.type || 'application/octet-stream',
+        name: file.name,
+        size: file.size,
+        dataUrl,
+      });
+      return { src: dataUrl, cid };
     } catch (error) {
       debug.error(`Failed to upload inline image ${file.name}:`, error);
       toast.error(t('upload_failed', { filename: file.name }));
@@ -562,9 +702,9 @@ export function EmailComposer({
       .filter(att => att.blobId && !att.uploading)
       .map(att => ({
         blobId: att.blobId!,
-        name: att.file.name,
+        name: att.name,
-        type: att.file.type,
+        type: att.type,
-        size: att.file.size,
+        size: att.size,
       }));
 
     // Create a hash of current data to compare with last saved
@@ -665,7 +805,42 @@ export function EmailComposer({
     return undefined;
   };
 
-  const handleSend = async () => {
+  // Rewrite data: URLs of dropped images (tagged with data-cid) into cid:
+  // references so recipient clients that strip data URIs can still render them.
+  const rewriteInlineImages = (html: string): {
+    html: string;
+    attachments: Array<{ blobId: string; name: string; type: string; size: number; disposition: 'inline'; cid: string }>;
+  } => {
+    const known = inlineImagesRef.current;
+    if (known.length === 0) return { html, attachments: [] };
+
+    const doc = new DOMParser().parseFromString(`<body>${html}</body>`, 'text/html');
+    const used = new Map<string, typeof known[number]>();
+
+    doc.querySelectorAll('img[data-cid]').forEach((img) => {
+      const cid = img.getAttribute('data-cid');
+      if (!cid) return;
+      const entry = known.find((e) => e.cid === cid);
+      if (!entry) return;
+      img.setAttribute('src', `cid:${cid}`);
+      img.removeAttribute('data-cid');
+      used.set(cid, entry);
+    });
+
+    return {
+      html: doc.body.innerHTML,
+      attachments: Array.from(used.values()).map((e) => ({
+        blobId: e.blobId,
+        name: e.name,
+        type: e.type,
+        size: e.size,
+        disposition: 'inline' as const,
+        cid: e.cid,
+      })),
+    };
+  };
+
+  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);
 
@@ -684,6 +859,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);
@@ -720,9 +910,11 @@ export function EmailComposer({
       ? appendPlainTextSignature(body, currentIdentity)
       : appendPlainTextSignature(htmlToPlainText(body), currentIdentity);
 
+    const rewritten = plainTextMode ? null : rewriteInlineImages(body);
     const finalHtmlBody = plainTextMode
       ? undefined
-      : `<div>${body}</div>${buildSignatureHtml()}`;
+      : `<div>${rewritten!.html}</div>${buildSignatureHtml()}`;
+    const inlineAttachments = rewritten?.attachments ?? [];
 
     try {
       // S/MIME send pipeline: build raw MIME → sign → encrypt → sendRawEmail
@@ -751,19 +943,29 @@ export function EmailComposer({
         for (const att of attachments) {
           if (att.error || att.uploading) continue;
           let content: ArrayBuffer;
-          if (att.file.size > 0) {
+          if (att.file && att.file.size > 0) {
             content = await att.file.arrayBuffer();
           } else if (att.blobId && client) {
-            content = await client.fetchBlobArrayBuffer(att.blobId, att.file.name, att.file.type);
+            content = await client.fetchBlobArrayBuffer(att.blobId, att.name, att.type);
           } else {
             continue;
           }
           mimeAttachments.push({
-            filename: att.file.name,
+            filename: att.name,
-            contentType: att.file.type || 'application/octet-stream',
+            contentType: att.type || 'application/octet-stream',
             content,
           });
         }
+        for (const inline of inlineAttachments) {
+          if (!client) break;
+          const content = await client.fetchBlobArrayBuffer(inline.blobId, inline.name, inline.type);
+          mimeAttachments.push({
+            filename: inline.name,
+            contentType: inline.type,
+            content,
+            cid: inline.cid,
+          });
+        }
 
         // 4. Build canonical MIME
         const mimeBytes = buildMimeMessage({
@@ -823,9 +1025,10 @@ export function EmailComposer({
       } else {
         // Standard JMAP send path
         // Collect uploaded attachment blobIds for the send request
-        const uploadedAttachments = attachments
+        const uploadedAttachments: Array<{ blobId: string; name: string; type: string; size: number; disposition?: 'attachment' | 'inline'; cid?: string }> = attachments
           .filter(att => att.blobId && !att.uploading && !att.error)
-          .map(att => ({ blobId: att.blobId!, name: att.file.name, type: att.file.type || 'application/octet-stream', size: att.file.size }));
+          .map(att => ({ blobId: att.blobId!, name: att.name, type: att.type || 'application/octet-stream', size: att.size }));
+        uploadedAttachments.push(...inlineAttachments);
 
         await onSend?.({
           to: toAddresses,
@@ -897,8 +1100,14 @@ export function EmailComposer({
   };
 
   return (
+    <div className={cn("flex h-full bg-background", className)}>
+      <PluginSlot
+        name="composer-sidebar"
+        className="hidden md:flex shrink-0 h-full overflow-hidden border-r border-border"
+      />
+      {/* Right-side composer sidebar slot is rendered after the main content div below. */}
     <div
-      className={cn("flex flex-col h-full bg-background relative", className)}
+      className="flex flex-col h-full bg-background relative flex-1 min-w-0"
       data-tour="composer"
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
@@ -944,7 +1153,7 @@ export function EmailComposer({
         </div>
         {/* Mobile: send button in header */}
         <Button
-          onClick={handleSend}
+          onClick={() => handleSend()}
           disabled={!canSend}
           title={getSendTooltip()}
           size="sm"
@@ -1040,6 +1249,7 @@ export function EmailComposer({
               onInsertAutocomplete={insertAutocomplete}
               validationError={validationErrors.to}
               validationMessage={t('validation.recipient_required')}
+              onTab={focusSubject}
             />
             <div className="flex gap-0.5 shrink-0">
               <Button
@@ -1109,6 +1319,7 @@ export function EmailComposer({
           <div className="flex items-center gap-2 px-4 py-2.5">
             <span className="text-sm text-muted-foreground w-12 md:w-16 shrink-0">{t('subject_label')}</span>
             <Input
+              ref={subjectInputRef}
               type="text"
               placeholder={t('subject_placeholder')}
               value={subject}
@@ -1116,6 +1327,12 @@ export function EmailComposer({
                 setSubject(e.target.value);
                 if (validationErrors.subject) setValidationErrors(prev => ({ ...prev, subject: false }));
               }}
+              onKeyDown={(e) => {
+                if (e.key === 'Tab' && !e.shiftKey) {
+                  e.preventDefault();
+                  focusBody();
+                }
+              }}
               className={cn(
                 "flex-1 border-0 focus-visible:ring-0 h-8 px-0 text-sm",
                 validationErrors.subject && "ring-2 ring-red-500 dark:ring-red-400"
@@ -1128,6 +1345,7 @@ export function EmailComposer({
         {/* Body */}
         {plainTextMode ? (
           <textarea
+            ref={bodyRef}
             value={body}
             onChange={(e) => {
               setBody(e.target.value);
@@ -1142,16 +1360,18 @@ export function EmailComposer({
             aria-invalid={validationErrors.body || undefined}
           />
         ) : (
-          <RichTextEditor
+          <div ref={editorContainerRef}>
-            content={body}
+            <RichTextEditor
-            onChange={(html) => {
+              content={body}
-              setBody(html);
+              onChange={(html) => {
-              if (validationErrors.body) setValidationErrors(prev => ({ ...prev, body: false }));
+                setBody(html);
-            }}
+                if (validationErrors.body) setValidationErrors(prev => ({ ...prev, body: false }));
-            onImageUpload={handleImageUpload}
+              }}
-            placeholder={t('body_placeholder')}
+              onImageUpload={handleImageUpload}
-            hasError={validationErrors.body}
+              placeholder={t('body_placeholder')}
-          />
+              hasError={validationErrors.body}
+            />
+          </div>
         )}
 
         {plainTextMode ? (
@@ -1194,9 +1414,9 @@ export function EmailComposer({
                     ) : (
                       <Paperclip className="w-3 h-3 flex-shrink-0" />
                     )}
-                    <span className="max-w-[150px] md:max-w-[200px] truncate">{att.file.name}</span>
+                    <span className="max-w-[150px] md:max-w-[200px] truncate">{att.name}</span>
                     <span className="text-xs text-muted-foreground whitespace-nowrap">
-                      ({formatFileSize(att.file.size)})
+                      ({formatFileSize(att.size)})
                     </span>
                     <button
                       onClick={() => removeAttachment(index)}
@@ -1298,7 +1518,7 @@ export function EmailComposer({
               {t('discard')}
             </button>
             <Button
-              onClick={handleSend}
+              onClick={() => handleSend()}
               disabled={!canSend}
               title={getSendTooltip()}
               className="hidden md:inline-flex"
@@ -1398,6 +1618,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"
@@ -1430,6 +1680,11 @@ export function EmailComposer({
         </div>
       )}
     </div>
+      <PluginSlot
+        name="composer-sidebar-right"
+        className="hidden md:flex shrink-0 h-full overflow-hidden border-l border-border"
+      />
+    </div>
   );
 }
 
@@ -1483,6 +1738,7 @@ function RecipientChipInput({
   onInsertAutocomplete,
   validationError,
   validationMessage,
+  onTab,
 }: {
   value: string;
   onChange: (value: string) => void;
@@ -1499,6 +1755,7 @@ function RecipientChipInput({
   onInsertAutocomplete: (email: string, field: 'to' | 'cc' | 'bcc') => void;
   validationError?: boolean;
   validationMessage?: string;
+  onTab?: () => void;
 }) {
   const allParts = value.split(',').map(s => s.trim()).filter(Boolean);
   const hasTrailingComma = value.trimEnd().endsWith(',');
@@ -1532,7 +1789,18 @@ function RecipientChipInput({
     if ((e.key === ' ' || e.key === 'Enter' || e.key === 'Tab') && inputText.trim()) {
       if (e.key !== 'Tab') e.preventDefault();
       commitCurrentInput();
-      setTimeout(() => inputRef.current?.focus(), 0);
+      if (e.key === 'Tab' && onTab) {
+        e.preventDefault();
+        setTimeout(() => onTab(), 0);
+      } else {
+        setTimeout(() => inputRef.current?.focus(), 0);
+      }
+      return;
+    }
+
+    if (e.key === 'Tab' && !e.shiftKey && onTab) {
+      e.preventDefault();
+      onTab();
       return;
     }
 

components/email/email-context-menu.tsx

@@ -66,6 +66,7 @@ interface EmailContextMenuProps {
   // Batch actions
   onBatchMarkAsRead?: (read: boolean) => void;
   onBatchDelete?: () => void;
+  onBatchArchive?: () => void;
   onBatchMoveToMailbox?: (mailboxId: string) => void;
   onBatchMarkAsSpam?: () => void;
   onBatchUndoSpam?: () => void;
@@ -89,17 +90,18 @@ const getMailboxIcon = (role?: string) => {
   }
 };
 
-// Get current label/color from email keywords (supports both $label: and legacy $color:)
+// Get all active label/color tag IDs from email keywords
-const getCurrentColor = (keywords: Record<string, boolean> | undefined) => {
+const getCurrentColors = (keywords: Record<string, boolean> | undefined): string[] => {
-  if (!keywords) return null;
+  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:")
+      tags.push(
-        ? key.slice("$label:".length)
+        key.startsWith("$label:") ? key.slice("$label:".length) : key.slice("$color:".length)
-        : key.slice("$color:".length);
+      );
     }
   }
-  return null;
+  return tags;
 };
 
 export function EmailContextMenu({
@@ -126,6 +128,7 @@ export function EmailContextMenu({
   onUndoSpam,
   onBatchMarkAsRead,
   onBatchDelete,
+  onBatchArchive,
   onBatchMoveToMailbox,
   onBatchMarkAsSpam,
   onBatchUndoSpam,
@@ -137,7 +140,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';
 
@@ -234,8 +237,10 @@ export function EmailContextMenu({
       <ContextMenuItem
         icon={Archive}
         label={t("archive")}
-        onClick={() => handleAction(onArchive!)}
+        onClick={() =>
-        disabled={!onArchive}
+          handleAction(showBatchActions ? onBatchArchive! : onArchive!)
+        }
+        disabled={showBatchActions ? !onBatchArchive : !onArchive}
       />
 
       {/* Delete */}
@@ -306,24 +311,27 @@ export function EmailContextMenu({
       {/* Set tag submenu - only for single email */}
       {!showBatchActions && (
         <ContextMenuSubMenu icon={Tag} label={t("color_tag")}>
-          {colorOptions.map((option) => (
+          {colorOptions.map((option) => {
-            <button
+            const isActive = currentColors.includes(option.value);
-              key={option.value}
+            return (
-              role="menuitem"
+              <button
-              onClick={() => handleAction(() => onSetColorTag?.(option.value))}
+                key={option.value}
-              className={cn(
+                role="menuitem"
-                "w-full px-3 py-1.5 text-sm text-left flex items-center gap-2 hover:bg-muted cursor-pointer",
+                onClick={() => handleAction(() => onSetColorTag?.(option.value))}
-                currentColor === option.value && "bg-accent font-medium"
+                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>
+              >
-              {currentColor === option.value && (
+                <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
-                <Check className="w-3.5 h-3.5 flex-shrink-0 text-foreground" />
+                <span className="flex-1">{option.name}</span>
-              )}
+                {isActive && (
-            </button>
+                  <Check className="w-3.5 h-3.5 flex-shrink-0 text-foreground" />
-          ))}
+                )}
-          {currentColor && (
+              </button>
+            );
+          })}
+          {currentColors.length > 0 && (
             <>
               <ContextMenuSeparator />
               <ContextMenuItem

components/email/email-hover-actions.tsx

@@ -9,6 +9,7 @@ import { useTranslations } from "next-intl";
 
 interface EmailHoverActionsProps {
   email: Email;
+  backgroundClassName?: string;
   onToggleStar?: () => void;
   onMarkAsRead?: (read: boolean) => void;
   onDelete?: () => void;
@@ -63,6 +64,7 @@ const CORNER_CLASSES = {
 
 export function EmailHoverActions({
   email,
+  backgroundClassName = "bg-muted",
   onToggleStar,
   onMarkAsRead,
   onDelete,
@@ -77,6 +79,7 @@ export function EmailHoverActions({
 
   const isUnread = !email.keywords?.$seen;
   const isStarred = email.keywords?.$flagged;
+  const hoverBackgroundClassName = backgroundClassName;
 
   if (hoverActions.length === 0) return null;
 
@@ -91,7 +94,7 @@ export function EmailHoverActions({
         onToggleStar?.();
         break;
       case "markRead":
-        onMarkAsRead?.(!isUnread);
+        onMarkAsRead?.(isUnread);
         break;
       case "archive":
         onArchive?.();
@@ -144,7 +147,10 @@ export function EmailHoverActions({
           CORNER_CLASSES[hoverActionsCorner],
         )}
       >
-        <div className="flex items-center gap-0.5 bg-muted rounded-lg px-1.5 py-0.5 shadow-md border border-border">
+        <div className={cn(
+          "flex items-center gap-0.5 rounded-lg px-1.5 py-0.5 shadow-md border border-border",
+          hoverBackgroundClassName,
+        )}>
           {actionButtons}
         </div>
       </div>
@@ -155,8 +161,14 @@ export function EmailHoverActions({
     <div
       className="absolute right-0 top-0 bottom-0 z-10 hidden group-hover:flex items-center"
     >
-      <div className="w-8 h-full bg-gradient-to-r from-transparent to-muted" />
+      <div
-      <div className="flex items-center gap-0.5 h-full bg-muted pr-3 pl-0.5">
+        className={cn("w-8 h-full", hoverBackgroundClassName)}
+        style={{
+          WebkitMaskImage: "linear-gradient(to right, transparent, black)",
+          maskImage: "linear-gradient(to right, transparent, black)",
+        }}
+      />
+      <div className={cn("flex items-center gap-0.5 h-full pr-3 pl-0.5", hoverBackgroundClassName)}>
         {actionButtons}
       </div>
     </div>

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;
@@ -32,10 +32,12 @@ interface EmailListItemProps {
 
 export function EmailListItem({ email, selected, onClick, onContextMenu, onToggleStar, onMarkAsRead, onDelete, onArchive, onSetColorTag, onMarkAsSpam }: EmailListItemProps) {
   const t = useTranslations('email_viewer');
-  const { selectedEmailIds, toggleEmailSelection, selectRangeEmails, selectedMailbox, clearSelection } = useEmailStore();
+  const { selectedEmailIds, toggleEmailSelection, selectRangeEmails, selectedMailbox, mailboxes, clearSelection } = useEmailStore();
   const showPreview = useSettingsStore((state) => state.showPreview);
   const density = useSettingsStore((state) => state.density);
+  const mailLayout = useSettingsStore((state) => state.mailLayout);
   const emailKeywords = useSettingsStore((state) => state.emailKeywords);
+  const showAvatarsInJunk = useSettingsStore((state) => state.showAvatarsInJunk);
   const { identities } = useAuthStore();
   const isChecked = selectedEmailIds.has(email.id);
   const isUnread = !email.keywords?.$seen;
@@ -43,11 +45,19 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
   const isImportant = email.keywords?.["$important"];
   const isAnswered = email.keywords?.$answered;
   const isForwarded = email.keywords?.$forwarded;
-  const sender = email.from?.[0];
+  // 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';
+  const sender = showRecipient ? (email.to?.[0] ?? email.from?.[0]) : email.from?.[0];
+  const isFocusedMailLayout = mailLayout === 'focus';
+  const hideJunkAvatarImages = currentMailboxRole === 'junk' && !showAvatarsInJunk;
+  const inlinePreview = showPreview && email.preview ? ` ${email.preview}` : '';
 
-  // Resolve color tag using keyword definitions from settings
+  // Resolve color tags using keyword definitions from settings; unknown tags fall back to gray
-  const colorTagId = getEmailColorTag(email.keywords);
+  const colorTagIds = getEmailColorTags(email.keywords);
-  const keywordDef = colorTagId ? emailKeywords.find(k => k.id === colorTagId) : null;
+  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
@@ -91,7 +101,8 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
             : "bg-background"
         ),
         selected && !colorTag && "shadow-sm",
-        !colorTag && !selected && "hover:bg-muted hover:shadow-sm",
+        !colorTag && !selected && !isChecked && "hover:bg-muted hover:shadow-sm",
+        !colorTag && (selected || isChecked) && "hover:bg-accent hover:shadow-sm",
         colorTag && "hover:brightness-95 dark:hover:brightness-110",
         isUnread && !selected && !colorTag && "bg-warning/10",
         // Add visual feedback for checked state
@@ -114,15 +125,19 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
         }
       }}
       onContextMenu={handleContextMenu}
-      style={{ minHeight: 'var(--list-item-height)' }}
+      style={{ minHeight: isFocusedMailLayout ? undefined : 'var(--list-item-height)' }}
     >
-      <div className="flex items-start px-4" style={{ gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}>
+      <div
+        className={cn('px-4', isFocusedMailLayout ? 'flex items-center py-2.5' : 'flex items-start')}
+        style={isFocusedMailLayout ? { gap: '12px' } : { gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
+      >
         {/* Checkbox - only visible when in selection mode */}
         {selectedEmailIds.size > 0 && (
           <button
             onClick={handleCheckboxClick}
             className={cn(
-              "p-3 lg:p-1 rounded mt-2 flex-shrink-0 transition-all duration-200",
+              "p-3 lg:p-1 rounded flex-shrink-0 transition-all duration-200",
+              !isFocusedMailLayout && 'mt-2',
               "hover:bg-muted/50 hover:scale-110",
               "active:scale-95",
               "animate-in fade-in zoom-in-95 duration-150",
@@ -145,96 +160,145 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
         )}
 
         {/* Avatar */}
-        {density !== 'extra-compact' && (
+        {!isFocusedMailLayout && density !== 'extra-compact' && (
           <Avatar
             name={sender?.name}
             email={sender?.email}
             size="md"
             className="flex-shrink-0 shadow-sm"
+            disableImages={hideJunkAvatarImages}
           />
         )}
 
         {/* Content */}
         <div className="flex-1 min-w-0">
-          {/* First Line: Sender and Date */}
+          {isFocusedMailLayout ? (
-          <div className="flex items-center justify-between gap-2 mb-1">
+            <div className="flex items-center justify-between gap-3">
-            <div className="flex items-center gap-2 min-w-0 flex-1">
+              <div className="flex min-w-0 flex-1 items-center gap-3">
-              <span className={cn(
+                <span className={cn(
-                "truncate text-sm",
+                  'w-32 shrink-0 truncate text-sm lg:w-40',
-                isUnread
+                  isUnread ? 'font-semibold text-foreground' : 'font-medium text-foreground/80'
-                  ? "font-bold text-foreground"
+                )}>
-                  : "font-medium text-muted-foreground"
+                  {sender?.name || sender?.email || 'Unknown'}
-              )}>
+                </span>
-                {sender?.name || sender?.email || "Unknown"}
+                <div className="flex min-w-0 flex-1 items-center gap-2 text-sm">
-              </span>
+                  <span className={cn(
-              <div className="flex items-center gap-1.5">
+                    'shrink-0 truncate',
-                {isStarred && (
+                    isUnread ? 'font-semibold text-foreground' : 'text-foreground/90'
-                  <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
+                  )}>
-                )}
+                    {email.subject || t('no_subject')}
-                {isImportant && (
-                  <span className="px-1.5 py-0.5 text-xs bg-warning/15 text-warning dark:text-warning rounded font-medium">
-                    Important
                   </span>
-                )}
+                  {inlinePreview && (
-                <EmailIdentityBadge email={email} identities={identities} compact={true} />
+                    <span className="min-w-0 truncate text-muted-foreground">{inlinePreview}</span>
-                {isAnswered && !isForwarded && (
+                  )}
-                  <Reply className="w-3.5 h-3.5 text-muted-foreground" />
+                </div>
-                )}
+              </div>
-                {isForwarded && !isAnswered && (
+              <div className="flex items-center gap-2.5 shrink-0">
-                  <Forward className="w-3.5 h-3.5 text-muted-foreground" />
+                {isStarred && <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />}
-                )}
+                {isImportant && <span className="h-2 w-2 rounded-full bg-warning" />}
+                {isAnswered && !isForwarded && <Reply className="w-3.5 h-3.5 text-muted-foreground" />}
+                {isForwarded && !isAnswered && <Forward className="w-3.5 h-3.5 text-muted-foreground" />}
                 {isAnswered && isForwarded && (
                   <>
                     <Reply className="w-3.5 h-3.5 text-muted-foreground" />
                     <Forward className="w-3.5 h-3.5 text-muted-foreground" />
                   </>
                 )}
-                {email.hasAttachment && (
+                {email.hasAttachment && <Paperclip className="w-3.5 h-3.5 text-muted-foreground" />}
-                  <Paperclip className="w-3.5 h-3.5 text-muted-foreground" />
+                {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'
+                )}>
+                  {formatDate(email.receivedAt)}
+                </span>
               </div>
             </div>
-            <div className="flex items-center gap-1.5 flex-shrink-0">
+          ) : (
-              {keywordDef && (
+            <>
-                <span className={cn(
+              {/* First Line: Sender and Date */}
-                  "inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded-full",
+              <div className="flex items-center justify-between gap-2 mb-1">
-                  KEYWORD_PALETTE[keywordDef.color]?.bg || "bg-muted"
+                <div className="flex items-center gap-2 min-w-0 flex-1">
-                )}>
+                  <span className={cn(
-                  <span className={cn("w-1.5 h-1.5 rounded-full", KEYWORD_PALETTE[keywordDef.color]?.dot || "bg-gray-400")} />
+                    "truncate text-sm",
-                  {keywordDef.label}
+                    isUnread
-                </span>
+                      ? "font-bold text-foreground"
-              )}
+                      : "font-medium text-muted-foreground"
-              <span className={cn(
+                  )}>
-                "text-xs tabular-nums",
+                    {sender?.name || sender?.email || "Unknown"}
+                  </span>
+                  <div className="flex items-center gap-1.5">
+                    {isStarred && (
+                      <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
+                    )}
+                    {isImportant && (
+                      <span className="px-1.5 py-0.5 text-xs bg-warning/15 text-warning dark:text-warning rounded font-medium">
+                        Important
+                      </span>
+                    )}
+                    <EmailIdentityBadge email={email} identities={identities} compact={true} />
+                    {isAnswered && !isForwarded && (
+                      <Reply className="w-3.5 h-3.5 text-muted-foreground" />
+                    )}
+                    {isForwarded && !isAnswered && (
+                      <Forward className="w-3.5 h-3.5 text-muted-foreground" />
+                    )}
+                    {isAnswered && isForwarded && (
+                      <>
+                        <Reply className="w-3.5 h-3.5 text-muted-foreground" />
+                        <Forward className="w-3.5 h-3.5 text-muted-foreground" />
+                      </>
+                    )}
+                    {email.hasAttachment && (
+                      <Paperclip className="w-3.5 h-3.5 text-muted-foreground" />
+                    )}
+                  </div>
+                </div>
+                <div className="flex items-center gap-1.5 flex-shrink-0">
+                  {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[kd.color]?.bg || "bg-muted"
+                    )}>
+                      <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
+                      ? "text-foreground font-semibold"
+                      : "text-muted-foreground"
+                  )}>
+                    {formatDate(email.receivedAt)}
+                  </span>
+                </div>
+              </div>
+
+              {/* Second Line: Subject */}
+              <div className={cn(
+                "mb-1 line-clamp-1 text-sm",
                 isUnread
-                  ? "text-foreground font-semibold"
+                  ? "font-semibold text-foreground"
-                  : "text-muted-foreground"
+                  : "font-normal text-foreground/90"
               )}>
-                {formatDate(email.receivedAt)}
+                {email.subject || t('no_subject')}
-              </span>
+              </div>
-            </div>
-          </div>
 
-          {/* Second Line: Subject */}
+              {/* Third Line: Preview (controlled by showPreview setting) */}
-          <div className={cn(
+              {showPreview && density !== 'extra-compact' && density !== 'compact' && (
-            "mb-1 line-clamp-1 text-sm",
+                <p className={cn(
-            isUnread
+                  "text-sm leading-relaxed line-clamp-2",
-              ? "font-semibold text-foreground"
+                  isUnread
-              : "font-normal text-foreground/90"
+                    ? "text-muted-foreground"
-          )}>
+                    : "text-muted-foreground/80"
-            {email.subject || t('no_subject')}
+                )}>
-          </div>
+                  {email.preview || "No preview available"}
-
+                </p>
-          {/* Third Line: Preview (controlled by showPreview setting) */}
+              )}
-          {showPreview && density !== 'extra-compact' && (
+            </>
-            <p className={cn(
-              "text-sm leading-relaxed line-clamp-2",
-              isUnread
-                ? "text-muted-foreground"
-                : "text-muted-foreground/80"
-            )}>
-              {email.preview || "No preview available"}
-            </p>
           )}
         </div>
       </div>
@@ -242,6 +306,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
       {/* Hover Quick Actions */}
       <EmailHoverActions
         email={email}
+        backgroundClassName={colorTag ? colorTag : ((selected || isChecked) ? "bg-accent" : "bg-muted")}
         onToggleStar={onToggleStar}
         onMarkAsRead={onMarkAsRead}
         onDelete={onDelete}

components/email/email-list.tsx

@@ -69,6 +69,7 @@ export function EmailList({
     batchMarkAsRead,
     batchDelete,
     batchMoveToMailbox,
+    batchArchive,
     batchMarkAsSpam,
     batchUndoSpam,
     loadMoreEmails,
@@ -103,11 +104,16 @@ export function EmailList({
   const parentRef = useRef<HTMLDivElement>(null);
   const density = useSettingsStore((state) => state.density);
   const showPreview = useSettingsStore((state) => state.showPreview);
+  const mailLayout = useSettingsStore((state) => state.mailLayout);
+  const isFocusedMailLayout = mailLayout === 'focus';
 
   const estimateSize = useCallback(() => {
+    if (isFocusedMailLayout) {
+      return { 'extra-compact': 32, compact: 40, regular: 46, comfortable: 54 }[density];
+    }
     const base = { 'extra-compact': 32, compact: 60, regular: 84, comfortable: 104 }[density];
     return (showPreview && density !== 'extra-compact') ? base + 36 : base;
-  }, [density, showPreview]);
+  }, [density, isFocusedMailLayout, showPreview]);
 
   const virtualizer = useVirtualizer({
     count: threadGroups.length,
@@ -171,7 +177,7 @@ export function EmailList({
 
     setIsProcessing(true);
     try {
-      await batchDelete(client);
+      await batchDelete(client, isInTrash);
     } finally {
       setTimeout(() => setIsProcessing(false), 500);
     }
@@ -216,15 +222,26 @@ export function EmailList({
     }
   }, [client, expandedThreadIds, toggleThreadExpansion, fetchThreadEmails]);
 
-  // Range-based load more: trigger when last visible item is near the end
+  // Range-based load more: trigger when last visible item is near the end.
+  // Debounce to prevent rapid cascade when thread grouping reduces item
+  // count below the viewport size (e.g. 2400 emails → fewer thread groups).
   const virtualItems = virtualizer.getVirtualItems();
   const lastVirtualItemIndex = virtualItems[virtualItems.length - 1]?.index;
+  const loadMoreTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     if (lastVirtualItemIndex === undefined) return;
     if (lastVirtualItemIndex >= threadGroups.length - 5) {
-      handleLoadMore();
+      // Clear any pending timer so we don't stack calls
+      if (loadMoreTimerRef.current) clearTimeout(loadMoreTimerRef.current);
+      loadMoreTimerRef.current = setTimeout(() => {
+        handleLoadMore();
+        loadMoreTimerRef.current = null;
+      }, 150);
     }
+    return () => {
+      if (loadMoreTimerRef.current) clearTimeout(loadMoreTimerRef.current);
+    };
   }, [lastVirtualItemIndex, threadGroups.length, handleLoadMore]);
 
   // Scroll to the thread group containing the selected email
@@ -244,7 +261,7 @@ export function EmailList({
   useEffect(() => {
     virtualizer.measure();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [density, showPreview]);
+  }, [density, isFocusedMailLayout, showPreview]);
 
   return (
     <div className={cn("flex flex-col min-h-0", className)}>
@@ -480,6 +497,14 @@ export function EmailList({
           onEditDraft={() => onEditDraft?.(contextMenu.data!)}
           onBatchMarkAsRead={(read) => client && batchMarkAsRead(client, read)}
           onBatchDelete={() => client && batchDelete(client)}
+          onBatchArchive={async () => {
+            if (!client) return;
+            try {
+              await batchArchive(client);
+            } catch (error) {
+              console.error('Failed to batch archive:', error);
+            }
+          }}
           onBatchMoveToMailbox={(mailboxId) => client && batchMoveToMailbox(client, mailboxId)}
           onBatchMarkAsSpam={async () => {
             if (client) {