chore: update version to 1.4.14

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

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

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

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

.claude/settings.local.json

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

.env.dev.example

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

.env.example

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

.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-releases.yml

@@ -0,0 +1,118 @@
+name: Publish Docker Image on Release
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+env:
+  IMAGE_NAME: ghcr.io/${{ github.repository }}
+
+jobs:
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-24.04-arm
+    runs-on: ${{ matrix.runner }}
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.IMAGE_NAME }}
+
+      - name: Build and push by digest
+        id: build
+        uses: docker/build-push-action@v6
+        with:
+          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
+          cache-from: type=gha,scope=${{ matrix.platform }}
+          cache-to: type=gha,mode=max,scope=${{ matrix.platform }}
+
+      - name: Export digest
+        run: |
+          mkdir -p /tmp/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ matrix.platform == 'linux/amd64' && 'amd64' || 'arm64' }}
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    runs-on: ubuntu-latest
+    needs: build
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v4
+        with:
+          path: /tmp/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value=latest
+            type=semver,pattern=v{{version}}
+            type=semver,pattern={{version}}
+            type=semver,pattern=v{{major}}.{{minor}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern=v{{major}}
+            type=semver,pattern={{major}}
+
+      - 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 ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}

.github/workflows/docker-publish.yml

@@ -2,7 +2,9 @@ name: Publish Docker Image
 
 on:
   push:
-    branches: [main]
+    branches:
+      - main
+      - dev
     paths:
       - "Dockerfile"
       - ".dockerignore"
@@ -17,14 +19,25 @@ on:
       - "package.json"
       - "package-lock.json"
       - ".github/workflows/docker-publish.yml"
-    tags: ["v*.*.*"]
   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:
@@ -56,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
@@ -65,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 }}
 
@@ -85,7 +98,7 @@ jobs:
 
   merge:
     runs-on: ubuntu-latest
-    needs: build
+    needs: [prepare, build]
     permissions:
       contents: read
       packages: write
@@ -112,19 +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=latest,enable={{is_default_branch}}
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=sha,prefix=
+            type=raw,value=latest
+            type=sha
 
       - name: Create manifest list and push
         working-directory: /tmp/digests
         run: |
           docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
-            $(printf '${{ env.IMAGE_NAME }}@sha256:%s ' *)
+            $(printf '${{ needs.prepare.outputs.image_name }}@sha256:%s ' *)
 
       - name: Inspect image
         run: |
-          docker buildx imagetools inspect ${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}
+          docker buildx imagetools inspect ${{ needs.prepare.outputs.image_name }}:${{ steps.meta.outputs.version }}

.github/workflows/standalone-release.yml

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

.gitignore

@@ -46,4 +46,7 @@ next-env.d.ts
 /data/
 
 # Local private data
-/local-data/
+/local-data/
+
+# Sibling repos
+/repos/

.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,257 @@
 # Changelog
 
+## 1.4.14 (2026-04-16)
+
+Thank you for your donations:
+
+- _You? [Become a sponsor!](https://github.com/sponsors/bulwarkmail)_
+
+**One-time**
+
+- [@mkorthaus-private](https://github.com/mkorthaus-private)
+- [@boris22100](https://github.com/boris22100)
+
+**Monthly**
+
+- [@pr0ton11](https://github.com/pr0ton11)
+
+### Features
+
+- **Email**: Add unified mailbox across accounts and sidebar icons toggle
+- **Email**: Enhance email deletion and spam handling with improved parameterization
+- **Sieve**: Enhance external rule handling in parser and store (#201)
+- **Plugins**: Add i18n API, render hooks, and new intercept hooks to plugin system
+- **PWA**: Dynamic PWA manifest with configurable name, description, and icons
+- **PWA**: Show app name and logo in install prompt
+- **i18n**: Add Ukrainian language with flags and missing translation keys
+- **i18n**: Configurable locale prefix via `NEXT_PUBLIC_LOCALE_PREFIX`
+- **API**: Add `apiFetch` helper for mount-prefix-aware API calls
+
+### Fixes
+
+- **Calendar**: Send iMIP invitation emails when creating or updating calendar events (#192)
+- **Calendar**: RFC 5545/6047 compliance for outgoing iMIP calendar emails
+- **Calendar**: Add `calendarAddress` and `replyTo` to participants for Stalwart compatibility (#189, #192)
+- **Calendar**: Improve CalDAV task detection for external clients like Thunderbird (#84)
+- **Email**: Hide ICS attachments from attachment list when invitation banner is shown
+- **Email**: Send before storing in Sent via `onSuccessUpdateEmail` (#188)
+- **Email**: Standardize tag naming and fix unknown keyword display (#184, #185)
+- **i18n**: Skip intl middleware for paths already containing a locale prefix
+- **Docs**: Document PWA and branding env vars in `.env.example`
+- **Docs**: Use `company` consistently in `.env.example` branding comments
+
+## 1.4.13 (2026-04-12)
+
+Thank you for your donations:
+
+**One-time**
+
+- [@boris22100](https://github.com/boris22100)
+- [@mkorthaus-private](https://github.com/mkorthaus-private)
+
+**Monthly**
+
+- _You? [Become a sponsor!](https://github.com/sponsors/bulwarkmail)_
+
+### Features
+
+- **Contacts**: Store trusted senders in a dedicated JMAP address book (#176)
+- **Email**: Warn on send when attachment keyword found but no file attached (#172)
+- **Email**: Enable keyword reordering (#174) and multi-tag support per email (#173)
+- **PWA**: Add "don't remind me again" option to install prompt
+- **Auth**: Add `SESSION_SECRET_FILE` and `OAUTH_CLIENT_SECRET_FILE` environment variable support
+- **Plugins**: Add `onAvatarResolve` plugin hook
+- **Docker**: Publish main and dev branches as separate GHCR packages
+
+### Fixes
+
+- **Email**: Style links in plain text emails
+- **Email**: Seed list history entry when app initializes on an email view
+- **Email**: Remount composer on draft edit and preserve identity (#60)
+- **Contacts**: Display contact names stored in `name.full` (#179)
+- **Contacts**: Fix category dropdown blocking Save button in contact form (#177)
+- **Contacts**: Resolve TS error from optional `name.components` in vCard parser
+- **Search**: Search all folders when filtering emails by tag (#175)
+- **Auth**: Include mount prefix in SSO redirect URI when app is served under a subpath
+- **PWA**: Correct PWA icons with proper sizing, transparency, and dark/light mode support
+
+## 1.4.12 (2026-04-09)
+
+Thank you for your donations:
+
+**One-time**
+
+- [@mkorthaus-private](https://github.com/mkorthaus-private)
+
+**Monthly**
+
+- _You? [Become a sponsor!](https://github.com/sponsors/bulwarkmail)_
+
+### Features
+
+- **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
+
+- **Admin**: Add Stalwart admin authentication, sidebar access, and a reorganized dashboard with dedicated policy sections
+- **Plugins**: Add plugin/theme admin dashboard, harness tooling, forced enable or disable controls, managed policy enforcement, and a resizable detail sidebar
+- **Filters**: Add vacation responder management with Sieve generation and parsing, UI integration, and improved sync preservation
+- **Email**: Add plain text only composer mode, optional conversation threading disable, configurable hover action placement, and OAuth app password support
+- **UI**: Add drag-and-drop customization for sidebar apps
+- **Files**: Use dynamic server-configured maximum upload sizes
+- **i18n**: Add Russian locale support and complete missing translation strings for recent task features
+
+### Fixes
+
+- **Calendar**: Improve date parsing and event normalization, prevent calendar page re-render loops, ensure unique ICal subscription IDs, and create all-day events with correct JSCalendar midnight handling
+- **Email**: Respect the configured mark-as-read delay in EmailViewer and fetch full email content when needed while editing drafts (#60, #95)
+- **Auth**: Improve network error handling, add JMAP rate limiting handling, and enhance settings retrieval and persistence diagnostics (#100, #104)
+- **UI**: Improve mobile layout behavior on contacts and calendar pages (#103)
+- **Themes**: Repair theme ZIP bundle handling and enforce admin theme locks correctly
+- **Code Quality**: Resolve outstanding ESLint warnings across the codebase
+
+## 1.4.8 (2026-03-23)
+
+### Features
+
+- **Email**: Add support for marking emails as answered or forwarded and display status icons in email list and thread views
+- **Email**: Enhance identity selection by supporting sub-addressing (plus addressing) in email composer
+- **Settings**: Add notification settings with sound picker, preview playback, and configurable alert sounds
+- **Settings**: Add default mail program settings with localization support across all locales
+- **Auth**: Implement path prefix handling for OAuth callbacks and login redirects, enabling reverse proxy deployments
+- **Validation**: Add all multi-part TLDs for domain validation in favicon API (#81)
+
+### Fixes
+
+- **Calendar**: Fix bugs in duration parsing, RFC compliance, and event handling across calendar components
+- **Calendar**: Detect tasks created by external CalDAV clients such as Thunderbird
+- **Settings**: Enhance account settings with username and authentication method display (#90)
+
+## 1.4.7 (2026-03-21)
+
+### Features
+
+- **Calendar**: Add task management features with task creation, editing, and status tracking
+- **Calendar**: Add option to show week numbers in mini-calendar
+- **Email**: Add resizable image component and rich text editor with image upload support
+- **Files**: Support uploading folders via drag-and-drop and toolbar button
+- **Filters**: Add expanded visual view for filter rules
+- **Auth**: Add non-interactive SSO login flow for embedded/iframe deployments (#69)
+- **DevOps**: Add separate Docker build workflow for releases and dev branch images
+
+### Fixes
+
+- **Calendar**: Handle updates and deletions for synthetic JMAP IDs in calendar events with fallback to destroy and recreate
+- **Security**: Extend CryptoEngine to support legacy algorithms and integrate with LinerEngine for decryption
+- **Auth**: Refactor logout to use synchronous flow with full page redirect
+- **Email**: Update iframe sandbox attributes to allow popups to escape sandbox
+- **i18n**: Add missing translation keys across all locales
+- **Docker**: Update .env.example to clarify Docker volume mounting for settings data directory
+
 ## 1.4.6 (2026-03-21)
 
 ### Features
@@ -228,7 +480,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)
@@ -238,7 +490,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: light)" srcset="public/branding/Bulwark%20Logo%20with%20Lettering%20Dark%20Color.svg" />
-  <img src="public/branding/Bulwark%20Logo%20with%20Lettering%20Dark%20Color.svg" alt="Bulwark Webmail" width="220" />
+  <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_Logo_with_Lettering_Dark_Color.svg" />
+  <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?
 

Dockerfile

@@ -26,6 +26,7 @@ RUN apk upgrade --no-cache && \
 COPY --from=builder /app/public ./public
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+RUN mkdir -p /app/data/settings /app/data/admin && chown -R nextjs:nodejs /app/data
 USER nextjs
 EXPOSE 3000
 ENV PORT=3000

README.md

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

VERSION

@@ -1 +1 @@
-1.4.6
+1.4.14

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

@@ -4,6 +4,7 @@ import { Suspense, useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useAuthStore } from "@/stores/auth-store";
+import { getPathPrefix } from "@/lib/browser-navigation";
 import { Loader2, AlertCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useParams } from "next/navigation";
@@ -13,7 +14,7 @@ function OAuthCallbackInner() {
   const params = useParams();
   const searchParams = useSearchParams();
   const t = useTranslations("login");
-  const { loginWithOAuth } = useAuthStore();
+  const { loginWithOAuth, loginWithServerSso } = useAuthStore();
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -32,44 +33,73 @@ function OAuthCallbackInner() {
     }
 
     const savedState = sessionStorage.getItem("oauth_state");
-    if (!state || state !== savedState) {
-      setError("invalid_state");
-      return;
-    }
 
-    const codeVerifier = sessionStorage.getItem("oauth_code_verifier");
-    const serverUrl = sessionStorage.getItem("oauth_server_url");
+    if (savedState) {
+      // Classic flow - sessionStorage has the PKCE state (same-tab OAuth)
+      if (!state || state !== savedState) {
+        setError("invalid_state");
+        return;
+      }
 
-    if (!codeVerifier || !serverUrl) {
-      setError("missing_params");
-      return;
-    }
+      const codeVerifier = sessionStorage.getItem("oauth_code_verifier");
+      const serverUrl = sessionStorage.getItem("oauth_server_url");
 
-    const redirectUri = `${window.location.origin}/${params.locale}/auth/callback`;
+      if (!codeVerifier || !serverUrl) {
+        setError("missing_params");
+        return;
+      }
 
-    loginWithOAuth(serverUrl, code, codeVerifier, redirectUri)
-      .then((success) => {
-        if (success) {
-          sessionStorage.removeItem("oauth_state");
-          sessionStorage.removeItem("oauth_code_verifier");
-          sessionStorage.removeItem("oauth_server_url");
-          sessionStorage.removeItem("oauth_add_account_mode");
-          let redirectTo = `/${params.locale}`;
-          try {
-            const saved = sessionStorage.getItem('redirect_after_login');
-            if (saved) {
-              sessionStorage.removeItem('redirect_after_login');
-              redirectTo = saved;
-            }
-          } catch { /* sessionStorage may be unavailable */ }
-          router.push(redirectTo);
-        } else {
+      const prefix = getPathPrefix(params.locale as string);
+      const redirectUri = `${window.location.origin}${prefix}/${params.locale}/auth/callback`;
+
+      loginWithOAuth(serverUrl, code, codeVerifier, redirectUri)
+        .then((success) => {
+          if (success) {
+            sessionStorage.removeItem("oauth_state");
+            sessionStorage.removeItem("oauth_code_verifier");
+            sessionStorage.removeItem("oauth_server_url");
+            sessionStorage.removeItem("oauth_add_account_mode");
+            let redirectTo = `${prefix}/${params.locale}`;
+            try {
+              const saved = sessionStorage.getItem('redirect_after_login');
+              if (saved) {
+                sessionStorage.removeItem('redirect_after_login');
+                redirectTo = saved;
+              }
+            } catch { /* sessionStorage may be unavailable */ }
+            router.push(redirectTo);
+          } else {
+            setError("token_exchange_failed");
+          }
+        })
+        .catch(() => {
           setError("token_exchange_failed");
-        }
-      })
-      .catch(() => {
-        setError("token_exchange_failed");
-      });
+        });
+    } else if (state) {
+      // Server-side SSO flow - state was stored in encrypted httpOnly cookie
+      const ssoPrefix = getPathPrefix(params.locale as string);
+      loginWithServerSso(code, state)
+        .then((success) => {
+          if (success) {
+            let redirectTo = `${ssoPrefix}/${params.locale}`;
+            try {
+              const saved = sessionStorage.getItem('redirect_after_login');
+              if (saved) {
+                sessionStorage.removeItem('redirect_after_login');
+                redirectTo = saved;
+              }
+            } catch { /* sessionStorage may be unavailable */ }
+            router.push(redirectTo);
+          } else {
+            setError("token_exchange_failed");
+          }
+        })
+        .catch(() => {
+          setError("token_exchange_failed");
+        });
+    } else {
+      setError("invalid_state");
+    }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (error) {
@@ -87,7 +117,7 @@ function OAuthCallbackInner() {
           </p>
           <Button
             variant="outline"
-            onClick={() => router.push(`/${params.locale}/login`)}
+            onClick={() => router.push(`${getPathPrefix(params.locale as string)}/${params.locale}/login`)}
           >
             {t("oauth_error.back_to_login")}
           </Button>

app/[locale]/calendar/page.tsx

@@ -11,7 +11,7 @@ import {
 } from "date-fns";
 import { useCalendarStore } from "@/stores/calendar-store";
 import { isCalendarViewMode } from "@/stores/calendar-store";
-import { useAuthStore } from "@/stores/auth-store";
+import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
 import { useEmailStore } from "@/stores/email-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useIdentityStore } from "@/stores/identity-store";
@@ -23,6 +23,9 @@ import { CalendarMonthView } from "@/components/calendar/calendar-month-view";
 import { CalendarWeekView } from "@/components/calendar/calendar-week-view";
 import { CalendarDayView } from "@/components/calendar/calendar-day-view";
 import { CalendarAgendaView } from "@/components/calendar/calendar-agenda-view";
+import { TaskListView } from "@/components/calendar/task-list-view";
+import { TaskToolbar } from "@/components/calendar/task-toolbar";
+import { TaskModal } from "@/components/calendar/task-modal";
 import { MiniCalendar } from "@/components/calendar/mini-calendar";
 import { CalendarSidebarPanel } from "@/components/calendar/calendar-sidebar-panel";
 import { EventModal, type PendingEventPreview } from "@/components/calendar/event-modal";
@@ -35,9 +38,14 @@ 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 { 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 { getUserParticipantId } from "@/lib/calendar-participants";
+import { generateBirthdayEvents, createBirthdayCalendar, BIRTHDAY_CALENDAR_ID } from "@/lib/birthday-calendar";
 import { debug } from "@/lib/debug";
 
 type PendingScopeAction =
@@ -61,10 +69,13 @@ export default function CalendarPage() {
     isLoading, isLoadingEvents, supportsCalendar, error,
     fetchCalendars, fetchEvents, createEvent, updateEvent, deleteEvent, rsvpEvent,
     setSelectedDate, setViewMode, toggleCalendarVisibility, updateCalendar,
-    refreshAllSubscriptions,
+    refreshAllSubscriptions, icalSubscriptions,
   } = useCalendarStore();
-  const { firstDayOfWeek, timeFormat } = 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(() =>
@@ -75,6 +86,7 @@ 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 [editEvent, setEditEvent] = useState<CalendarEvent | null>(null);
   const [defaultModalDate, setDefaultModalDate] = useState<Date | undefined>();
   const [defaultModalEndDate, setDefaultModalEndDate] = useState<Date | undefined>();
@@ -83,6 +95,11 @@ export default function CalendarPage() {
   const [detailEvent, setDetailEvent] = useState<CalendarEvent | null>(null);
   const [detailAnchorRect, setDetailAnchorRect] = useState<DOMRect | null>(null);
   const [pendingPreview, setPendingPreview] = useState<PendingEventPreview | null>(null);
+  const [showTaskModal, setShowTaskModal] = useState(false);
+  const [editTask, setEditTask] = useState<import("@/lib/jmap/types").CalendarTask | null>(null);
+  const [mobileReturnToMonth, setMobileReturnToMonth] = useState(false);
+  const [swipeDirection, setSwipeDirection] = useState<'left' | 'right' | null>(null);
+  const [swipeKey, setSwipeKey] = useState(0);
   const hasFetched = useRef(false);
 
   // Sidebar resize state
@@ -95,6 +112,16 @@ export default function CalendarPage() {
   // Swipe navigation ref (handlers defined after navigatePrev/navigateNext)
   const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null);
 
+  // Keep detailEvent in sync with store events (e.g. after update + refetch)
+  useEffect(() => {
+    if (detailEvent) {
+      const updated = events.find(e => e.id === detailEvent.id);
+      if (updated && updated !== detailEvent) {
+        setDetailEvent(updated);
+      }
+    }
+  }, [events, detailEvent]);
+
   // Check auth on mount
   useEffect(() => {
     checkAuth().finally(() => {
@@ -105,7 +132,7 @@ export default function CalendarPage() {
   useEffect(() => {
     if (initialCheckDone && !isAuthenticated && !authLoading) {
       try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
-      router.push("/login");
+      redirectToLogin();
     } else if (client && !supportsCalendar) {
       router.push("/");
     }
@@ -134,6 +161,13 @@ export default function CalendarPage() {
     return () => clearInterval(interval);
   }, [client, refreshAllSubscriptions]);
 
+  // Auto-add birthday calendar to selected IDs when enabled
+  useEffect(() => {
+    if (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) {
@@ -166,9 +200,18 @@ export default function CalendarPage() {
           end: format(addDays(agendaStart, 30), "yyyy-MM-dd'T'23:59:59"),
         };
       }
+      case "tasks":
+        return null;
     }
   }, [selectedDate, normalizedViewMode, firstDayOfWeek]);
 
+  // Fetch tasks when tasks view is active or when tasks are shown on calendar grid
+  useEffect(() => {
+    if (client && enableCalendarTasks && (normalizedViewMode === "tasks" || showTasksOnCalendar)) {
+      fetchTasksFn(client);
+    }
+  }, [client, enableCalendarTasks, normalizedViewMode, showTasksOnCalendar, fetchTasksFn]);
+
   useEffect(() => {
     if (client && calendars.length > 0 && dateRange) {
       fetchEvents(client, dateRange.start, dateRange.end);
@@ -182,6 +225,7 @@ export default function CalendarPage() {
       case "week": next = subWeeks(selectedDate, 1); break;
       case "day": next = subDays(selectedDate, 1); break;
       case "agenda": next = subMonths(selectedDate, 1); break;
+      case "tasks": return;
     }
     setSelectedDate(next);
     setMiniMonth(next);
@@ -194,6 +238,7 @@ export default function CalendarPage() {
       case "week": next = addWeeks(selectedDate, 1); break;
       case "day": next = addDays(selectedDate, 1); break;
       case "agenda": next = addMonths(selectedDate, 1); break;
+      case "tasks": return;
     }
     setSelectedDate(next);
     setMiniMonth(next);
@@ -212,6 +257,8 @@ export default function CalendarPage() {
 
   const handleTouchEnd = useCallback((e: ReactTouchEvent) => {
     if (!touchStartRef.current || !isMobile) return;
+    // Week view has its own horizontal scroll, skip swipe navigation
+    if (normalizedViewMode === 'week') { touchStartRef.current = null; return; }
     const touch = e.changedTouches[0];
     const dx = touch.clientX - touchStartRef.current.x;
     const dy = touch.clientY - touchStartRef.current.y;
@@ -220,20 +267,34 @@ export default function CalendarPage() {
 
     // Only trigger swipe if horizontal movement is dominant and fast enough
     if (Math.abs(dx) > 60 && Math.abs(dx) > Math.abs(dy) * 1.5 && elapsed < 400) {
-      if (dx > 0) navigatePrev();
-      else navigateNext();
+      if (dx > 0) {
+        setSwipeDirection('right');
+        navigatePrev();
+      } else {
+        setSwipeDirection('left');
+        navigateNext();
+      }
+      setSwipeKey(k => k + 1);
+      // Clear direction after animation completes
+      setTimeout(() => setSwipeDirection(null), 250);
     }
-  }, [isMobile, navigatePrev, navigateNext]);
+  }, [isMobile, normalizedViewMode, navigatePrev, navigateNext]);
 
   const handleSelectDate = useCallback((date: Date) => {
     setSelectedDate(date);
     setMiniMonth(date);
     // On mobile month view, tapping a date switches to day view
     if (isMobile && normalizedViewMode === "month") {
+      setMobileReturnToMonth(true);
       setViewMode("day");
     }
   }, [setSelectedDate, isMobile, normalizedViewMode, setViewMode]);
 
+  const navigateBackToMonth = useCallback(() => {
+    setMobileReturnToMonth(false);
+    setViewMode("month");
+  }, [setViewMode]);
+
   const handleMiniMonthChange = useCallback((date: Date) => {
     setMiniMonth(date);
     setSelectedDate(date);
@@ -254,6 +315,34 @@ export default function CalendarPage() {
     setShowEventModal(true);
   }, []);
 
+  const openCreateTaskModal = useCallback(() => {
+    setEditTask(null);
+    setShowTaskModal(true);
+  }, []);
+
+  const openEditTaskModal = useCallback((task: import("@/lib/jmap/types").CalendarTask) => {
+    setEditTask(task);
+    setShowTaskModal(true);
+  }, []);
+
+  const handleSaveTask = useCallback(async (data: Partial<import("@/lib/jmap/types").CalendarTask>) => {
+    if (!client) return;
+    if (editTask) {
+      await taskStore.updateTask(client, editTask.id, data);
+    } else {
+      await taskStore.createTask(client, data);
+    }
+    setShowTaskModal(false);
+    setEditTask(null);
+  }, [client, editTask, taskStore]);
+
+  const handleDeleteTask = useCallback(async (id: string) => {
+    if (!client) return;
+    await taskStore.deleteTask(client, id);
+    setShowTaskModal(false);
+    setEditTask(null);
+  }, [client, taskStore]);
+
   const hoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const closeDetail = useCallback(() => {
@@ -270,18 +359,28 @@ export default function CalendarPage() {
 
   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);
-    setDetailAnchorRect(anchorRect);
-  }, [isMobile, showEventModal, editEvent]);
+    if (calendarHoverPreview === 'delay-500ms' || calendarHoverPreview === 'delay-1s' || calendarHoverPreview === 'delay-2s') {
+      const ms = calendarHoverPreview === 'delay-500ms' ? 500 : calendarHoverPreview === 'delay-1s' ? 1000 : 2000;
+      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(() => {
@@ -318,6 +417,24 @@ export default function CalendarPage() {
     }
   }, [client, fetchEvents]);
 
+  const focusCalendarOnEvent = useCallback((event: Pick<Partial<CalendarEvent>, "start" | "utcStart" | "showWithoutTime">) => {
+    if (!event.start) {
+      return;
+    }
+
+    const eventDate = getEventStartDate({
+      start: event.start,
+      utcStart: event.utcStart ?? null,
+      showWithoutTime: event.showWithoutTime ?? false,
+    });
+    if (Number.isNaN(eventDate.getTime())) {
+      return;
+    }
+
+    setSelectedDate(eventDate);
+    setMiniMonth(eventDate);
+  }, [setSelectedDate]);
+
   const handleSaveEvent = useCallback(async (data: Partial<CalendarEvent>, sendSchedulingMessages?: boolean) => {
     if (!client) { toast.error(t("notifications.event_error")); return; }
     try {
@@ -334,6 +451,9 @@ export default function CalendarPage() {
           return;
         }
         await updateEvent(client, editEvent.id, data, sendSchedulingMessages);
+        if (data.start) {
+          focusCalendarOnEvent({ start: data.start });
+        }
         toast.success(t("notifications.event_updated"));
       } else {
         const created = await createEvent(client, data, sendSchedulingMessages);
@@ -341,6 +461,7 @@ export default function CalendarPage() {
           toast.error(t("notifications.event_error"));
           return;
         }
+        focusCalendarOnEvent(created);
         if (sendSchedulingMessages) {
           toast.success(t("notifications.invitation_sent"));
         } else {
@@ -352,7 +473,7 @@ export default function CalendarPage() {
     } catch {
       toast.error(t("notifications.event_error"));
     }
-  }, [client, editEvent, createEvent, updateEvent, t]);
+  }, [client, editEvent, createEvent, updateEvent, focusCalendarOnEvent, t]);
 
   const handleDuplicateEvent = useCallback(async (data: Partial<CalendarEvent>) => {
     if (!client) { toast.error(t("notifications.event_error")); return; }
@@ -362,6 +483,7 @@ export default function CalendarPage() {
         toast.error(t("notifications.event_error"));
         return;
       }
+      focusCalendarOnEvent(created);
       toast.success(t("notifications.event_duplicated"));
       setEditEvent(created);
       setDefaultModalDate(undefined);
@@ -370,7 +492,7 @@ export default function CalendarPage() {
       setShowEventModal(false);
       setEditEvent(null);
     }
-  }, [client, createEvent, t]);
+  }, [client, createEvent, focusCalendarOnEvent, t]);
 
   const handleDeleteEvent = useCallback(async (id: string, sendSchedulingMessages?: boolean) => {
     if (!client) { toast.error(t("notifications.event_error")); return; }
@@ -424,9 +546,22 @@ export default function CalendarPage() {
     try {
       if (type === "edit" && updates) {
         switch (scope) {
-          case "this":
-            await updateEvent(client, event.id, updates, sendScheduling);
+          case "this": {
+            // Synthetic IDs (from expandRecurrences) can't be updated directly.
+            // Patch the master event's recurrenceOverrides instead.
+            const master = await findMasterEvent(event);
+            if (master && event.recurrenceId) {
+              const patchUpdates: Record<string, unknown> = {};
+              for (const [key, value] of Object.entries(updates)) {
+                if (['id', 'uid', '@type', 'calendarIds', 'recurrenceRules', 'recurrenceOverrides', 'excludedRecurrenceRules'].includes(key)) continue;
+                patchUpdates[`recurrenceOverrides/${event.recurrenceId}/${key}`] = value;
+              }
+              await updateEvent(client, master.id, patchUpdates as Partial<CalendarEvent>, sendScheduling);
+            } else {
+              await updateEvent(client, event.id, updates, sendScheduling);
+            }
             break;
+          }
           case "this_and_future": {
             const result = await truncateRecurrenceAtEvent(event);
             if (!result) {
@@ -484,9 +619,20 @@ export default function CalendarPage() {
         toast.success(t("notifications.event_updated"));
       } else {
         switch (scope) {
-          case "this":
-            await deleteEvent(client, event.id, sendScheduling);
+          case "this": {
+            // Synthetic IDs (from expandRecurrences) can't be destroyed directly.
+            // Exclude the instance via recurrenceOverrides on the master event.
+            const delMaster = await findMasterEvent(event);
+            if (delMaster && event.recurrenceId) {
+              await updateEvent(
+                client, delMaster.id,
+                { [`recurrenceOverrides/${event.recurrenceId}`]: { excluded: true } } as Partial<CalendarEvent>,
+              );
+            } else {
+              await deleteEvent(client, event.id, sendScheduling);
+            }
             break;
+          }
           case "this_and_future": {
             const result = await truncateRecurrenceAtEvent(event);
             if (!result) {
@@ -542,7 +688,7 @@ export default function CalendarPage() {
     if (!detailEvent || !client) return;
     const start = parseISO(detailEvent.start);
     const newStart = addDays(start, 1);
-    const data: Partial<CalendarEvent> = {
+    const data = sanitizeOutgoingCalendarEventData<Partial<CalendarEvent>>({
       title: detailEvent.title,
       description: detailEvent.description,
       start: format(newStart, "yyyy-MM-dd'T'HH:mm:ss"),
@@ -553,7 +699,7 @@ export default function CalendarPage() {
       status: "confirmed",
       freeBusyStatus: detailEvent.freeBusyStatus,
       privacy: detailEvent.privacy,
-    };
+    });
     if (detailEvent.locations) data.locations = structuredClone(detailEvent.locations);
     if (detailEvent.recurrenceRules) data.recurrenceRules = structuredClone(detailEvent.recurrenceRules);
     if (detailEvent.alerts) data.alerts = structuredClone(detailEvent.alerts);
@@ -598,6 +744,7 @@ export default function CalendarPage() {
     const handleKey = (e: KeyboardEvent) => {
       const target = e.target as HTMLElement;
       if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT") return;
+      if (target.getAttribute("contenteditable") === "true") return;
       if (showEventModal || detailEvent) return;
 
       switch (e.key) {
@@ -608,21 +755,68 @@ export default function CalendarPage() {
         case "w": setViewMode("week"); break;
         case "d": setViewMode("day"); break;
         case "a": setViewMode("agenda"); break;
+        case "k": if (enableCalendarTasks) setViewMode("tasks"); break;
         case "n": openCreateModal(); break;
       }
     };
     window.addEventListener("keydown", handleKey);
     return () => window.removeEventListener("keydown", handleKey);
-  }, [navigatePrev, navigateNext, goToToday, setViewMode, openCreateModal, showEventModal, detailEvent]);
+  }, [navigatePrev, navigateNext, goToToday, setViewMode, openCreateModal, showEventModal, detailEvent, enableCalendarTasks]);
 
-  const visibleEvents = useMemo(() =>
-    events.filter((e) => {
+  const birthdayEvents = useMemo(() => {
+    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) => {
+      if (!event.start || !event.calendarIds) {
+        return true;
+      }
+
+      return !Object.keys(event.calendarIds).some((calendarId) => selectedCalendarIds.includes(calendarId));
+    });
+
+    if (hiddenEvents.length === 0) {
+      return;
+    }
+
+    debug.log('calendar', 'Calendar visibility summary', {
+      totalEvents: events.length,
+      visibleEvents: visibleEvents.length,
+      hiddenEvents: hiddenEvents.length,
+      selectedCalendarIds,
+      hiddenSamples: hiddenEvents.slice(0, 5).map((event) => ({
+        id: event.id,
+        originalId: event.originalId,
+        title: event.title,
+        calendarIds: event.calendarIds,
+        originalCalendarIds: event.originalCalendarIds,
+        accountId: event.accountId,
+      })),
+    });
+  }, [events, selectedCalendarIds, visibleEvents]);
 
   if (!isAuthenticated || !supportsCalendar) return null;
 
@@ -642,7 +836,7 @@ export default function CalendarPage() {
             <CalendarMonthView
               selectedDate={selectedDate}
               events={visibleEvents}
-              calendars={calendars}
+              calendars={allCalendars}
               onSelectDate={handleSelectDate}
               onSelectEvent={handleSelectEvent}
               onHoverEvent={handleHoverEvent}
@@ -658,7 +852,7 @@ export default function CalendarPage() {
             <CalendarWeekView
               selectedDate={selectedDate}
               events={visibleEvents}
-              calendars={calendars}
+              calendars={allCalendars}
               onSelectDate={handleSelectDate}
               onSelectEvent={handleSelectEvent}
               onHoverEvent={handleHoverEvent}
@@ -668,6 +862,8 @@ export default function CalendarPage() {
               timeFormat={timeFormat}
               isMobile={isMobile}
               pendingPreview={pendingPreview}
+              tasks={enableCalendarTasks && showTasksOnCalendar ? taskStore.tasks : undefined}
+              onToggleTaskComplete={(task) => { if (client) taskStore.toggleTaskComplete(client, task); }}
             />
           );
         case "day":
@@ -675,7 +871,7 @@ export default function CalendarPage() {
             <CalendarDayView
               selectedDate={selectedDate}
               events={visibleEvents}
-              calendars={calendars}
+              calendars={allCalendars}
               onSelectEvent={handleSelectEvent}
               onHoverEvent={handleHoverEvent}
               onHoverLeave={handleHoverLeave}
@@ -683,6 +879,8 @@ export default function CalendarPage() {
               timeFormat={timeFormat}
               isMobile={isMobile}
               pendingPreview={pendingPreview}
+              tasks={enableCalendarTasks && showTasksOnCalendar ? taskStore.tasks : undefined}
+              onToggleTaskComplete={(task) => { if (client) taskStore.toggleTaskComplete(client, task); }}
             />
           );
         case "agenda":
@@ -690,18 +888,45 @@ export default function CalendarPage() {
             <CalendarAgendaView
               selectedDate={selectedDate}
               events={visibleEvents}
-              calendars={calendars}
+              calendars={allCalendars}
               onSelectEvent={handleSelectEvent}
               onHoverEvent={handleHoverEvent}
               onHoverLeave={handleHoverLeave}
               timeFormat={timeFormat}
             />
           );
+        case "tasks":
+          return (
+            <div className="flex flex-col h-full">
+              <TaskToolbar
+                filter={taskStore.filter}
+                showCompleted={taskStore.showCompleted}
+                onFilterChange={taskStore.setFilter}
+                onShowCompletedChange={taskStore.setShowCompleted}
+                onCreateTask={openCreateTaskModal}
+              />
+              <TaskListView
+                tasks={taskStore.tasks}
+                calendars={calendars}
+                selectedCalendarIds={selectedCalendarIds}
+                filter={taskStore.filter}
+                showCompleted={taskStore.showCompleted}
+                onSelectTask={openEditTaskModal}
+                onToggleComplete={(task) => { if (client) taskStore.toggleTaskComplete(client, task); }}
+                selectedTaskId={taskStore.selectedTaskId}
+                onQuickCreate={(title) => {
+                  if (client) {
+                    taskStore.createTask(client, { "@type": "Task", title, progress: "needs-action", calendarIds: { [calendars[0]?.id ?? ""]: true } });
+                  }
+                }}
+              />
+            </div>
+          );
       }
     })();
 
     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">
@@ -721,7 +946,7 @@ export default function CalendarPage() {
             collapsed
             quota={quota}
             isPushConnected={isPushConnected}
-            onLogout={() => { logout(); if (!useAuthStore.getState().isAuthenticated) router.push('/login'); }}
+            onLogout={logout}
             onManageApps={handleManageApps}
             onInlineApp={handleInlineApp}
             onCloseInlineApp={closeInlineApp}
@@ -751,15 +976,21 @@ export default function CalendarPage() {
               onChangeMonth={handleMiniMonthChange}
               events={events}
               firstDayOfWeek={firstDayOfWeek}
+              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}
               onSubscribe={() => setShowSubscriptionModal(true)}
+              onEditSubscription={(subId) => setEditingSubscription(subId)}
               client={client}
             />
           </div>
@@ -783,14 +1014,16 @@ export default function CalendarPage() {
           onPrev={navigatePrev}
           onNext={navigateNext}
           onToday={goToToday}
-          onViewModeChange={setViewMode}
+          onViewModeChange={(mode) => { setMobileReturnToMonth(false); setViewMode(mode); }}
           onCreateEvent={() => openCreateModal()}
           onImport={() => setShowImportModal(true)}
           onSubscribe={() => setShowSubscriptionModal(true)}
           isMobile={isMobile}
+          onNavigateBack={isMobile && mobileReturnToMonth && normalizedViewMode === "day" ? navigateBackToMonth : undefined}
           calendars={calendars}
           selectedCalendarIds={selectedCalendarIds}
           onToggleVisibility={toggleCalendarVisibility}
+          enableCalendarTasks={enableCalendarTasks}
         />
 
         <div
@@ -799,7 +1032,16 @@ export default function CalendarPage() {
           onTouchStart={handleTouchStart}
           onTouchEnd={handleTouchEnd}
         >
-          {renderView()}
+          <div
+            key={swipeKey}
+            className={cn(
+              "flex flex-1 min-w-0",
+              isMobile && swipeDirection === 'left' && "animate-slide-in-right",
+              isMobile && swipeDirection === 'right' && "animate-slide-in-left",
+            )}
+          >
+            {renderView()}
+          </div>
 
           {/* Desktop event panel */}
           {!isMobile && showEventModal && (
@@ -822,6 +1064,21 @@ export default function CalendarPage() {
             </div>
           )}
 
+          {/* Desktop task panel */}
+          {!isMobile && showTaskModal && (
+            <div className="w-[400px] border-l border-border flex-shrink-0 overflow-hidden">
+              <TaskModal
+                key={editTask?.id ?? 'new-task'}
+                task={editTask}
+                calendars={calendars}
+                onSave={handleSaveTask}
+                onDelete={handleDeleteTask}
+                onClose={() => { setShowTaskModal(false); setEditTask(null); }}
+                isMobile={false}
+              />
+            </div>
+          )}
+
           {/* Floating Create Event Button (mobile) */}
           {isMobile && (
             <Button
@@ -900,6 +1157,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}

app/[locale]/contacts/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
-import { useRouter } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
 import { ArrowLeft, Users } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -14,12 +13,13 @@ 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 } from "@/stores/auth-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";
@@ -39,7 +39,6 @@ type View =
   | "bulk-add-to-group";
 
 export default function ContactsPage() {
-  const router = useRouter();
   const t = useTranslations("contacts");
   const { client, isAuthenticated, logout, checkAuth, isLoading: authLoading } = useAuthStore();
   const { showAppsModal, inlineApp, loadedApps, handleManageApps, handleInlineApp, closeInlineApp, closeAppsModal } = useSidebarApps();
@@ -74,12 +73,16 @@ export default function ContactsPage() {
     bulkDeleteContacts,
     bulkAddToGroup,
     moveContactToAddressBook,
+    renameAddressBook,
+    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 [renamingKeyword, setRenamingKeyword] = useState<string | null>(null);
   const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
   const hasFetched = useRef(false);
   const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
@@ -109,9 +112,9 @@ export default function ContactsPage() {
   useEffect(() => {
     if (initialCheckDone && !isAuthenticated && !authLoading) {
       try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
-      router.push("/login");
+      redirectToLogin();
     }
-  }, [initialCheckDone, isAuthenticated, authLoading, router]);
+  }, [initialCheckDone, isAuthenticated, authLoading]);
 
   useEffect(() => {
     if (client && supportsSync && !hasFetched.current) {
@@ -124,7 +127,7 @@ export default function ContactsPage() {
   const individuals = useMemo(() => contacts.filter(c => c.kind !== 'group'), [contacts]);
   const selectedContact = contacts.find((c) => c.id === selectedContactId) || null;
   const selectedGroup = selectedGroupId ? contacts.find(c => c.id === selectedGroupId) || null : null;
-  const selectedGroupMembers = selectedGroupId ? getGroupMembers(selectedGroupId) : [];
+  const selectedGroupMembers = useMemo(() => selectedGroupId ? getGroupMembers(selectedGroupId) : [], [selectedGroupId, getGroupMembers]);
 
   // Collect all unique keywords across contacts
   const allKeywords = useMemo(() => {
@@ -276,7 +279,7 @@ export default function ContactsPage() {
       toast.success(t("toast.created"));
     } else {
       const localContact: ContactCard = {
-        id: `local-${crypto.randomUUID()}`,
+        id: `local-${generateUUID()}`,
         addressBookIds: {},
         ...data,
       };
@@ -309,7 +312,7 @@ export default function ContactsPage() {
     }
   };
 
-  const handleSelectGroup = (id: string) => {
+  const _handleSelectGroup = (id: string) => {
     setSelectedGroupId(id);
     setActiveCategory({ groupId: id });
     setView("group-detail");
@@ -594,7 +597,7 @@ export default function ContactsPage() {
             collapsed
             quota={quota}
             isPushConnected={isPushConnected}
-            onLogout={() => { logout(); if (!useAuthStore.getState().isAuthenticated) router.push('/login'); }}
+            onLogout={logout}
             onManageApps={handleManageApps}
             onInlineApp={handleInlineApp}
             onCloseInlineApp={closeInlineApp}
@@ -603,7 +606,7 @@ export default function ContactsPage() {
         </div>
       )}
 
-      <div className="flex flex-col flex-1 min-w-0">
+      <div className="flex flex-col flex-1 min-w-0 min-h-0">
         {inlineApp && (
           <InlineAppView apps={loadedApps} activeAppId={inlineApp!.id} onClose={closeInlineApp} />
         )}
@@ -633,6 +636,8 @@ export default function ContactsPage() {
                       onDeleteGroup={handleDeleteGroupFromSidebar}
                       onDropContacts={handleDropContacts}
                       onDropContactsToCategory={handleDropContactsToCategory}
+                      onRenameAddressBook={client ? (book) => setRenamingAddressBook(book) : undefined}
+                      onRenameKeyword={(kw) => setRenamingKeyword(kw)}
                     />
                   </div>
                   <ResizeHandle
@@ -703,7 +708,7 @@ export default function ContactsPage() {
                     className="touch-manipulation"
                   >
                     <ArrowLeft className="w-4 h-4 mr-2" />
-                    {t("back_to_mail")}
+                    {t("back_to_contacts")}
                   </Button>
                 </div>
               )}
@@ -727,6 +732,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">

app/[locale]/files/page.tsx

@@ -7,25 +7,28 @@ import { ArrowLeft } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import { useConfirmDialog } from "@/hooks/use-confirm-dialog";
-import { useAuthStore } from "@/stores/auth-store";
+import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
 import { useEmailStore } from "@/stores/email-store";
 import { useFileStore } from "@/stores/file-store";
 import { toast } from "@/stores/toast-store";
-import { cn } from "@/lib/utils";
+import { cn, formatFileSize } 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 { useIsMobile } from "@/hooks/use-media-query";
+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);
@@ -45,7 +48,7 @@ export default function FilesPage() {
     navigateByPath,
     refresh,
     createDirectory,
-    uploadFile,
+    uploadFile: _uploadFile,
     uploadFiles,
     uploadFolder,
     deleteResource,
@@ -112,9 +115,9 @@ export default function FilesPage() {
   useEffect(() => {
     if (initialCheckDone && !isAuthenticated && !authLoading) {
       try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
-      router.push("/login");
+      redirectToLogin();
     }
-  }, [initialCheckDone, isAuthenticated, authLoading, router]);
+  }, [initialCheckDone, isAuthenticated, authLoading]);
 
   // Initialize JMAP files client
   useEffect(() => {
@@ -156,39 +159,43 @@ export default function FilesPage() {
     }
   }, [createDirectory, t]);
 
-  const MAX_FILE_SIZE = 500 * 1024 * 1024; // 500 MB
+  const maxSizeUpload = client?.getMaxSizeUpload() || 0;
 
   const handleUploadFiles = useCallback(async (files: File[]) => {
-    const oversized = files.filter(f => f.size > MAX_FILE_SIZE);
-    const valid = files.filter(f => f.size <= MAX_FILE_SIZE);
-    if (oversized.length > 0) {
-      toast.error(t("file_too_large", { name: oversized[0].name, max: "500 MB" }));
+    if (maxSizeUpload > 0) {
+      const oversized = files.filter(f => f.size > maxSizeUpload);
+      files = files.filter(f => f.size <= maxSizeUpload);
+      if (oversized.length > 0) {
+        toast.error(t("file_too_large", { name: oversized[0].name, max: formatFileSize(maxSizeUpload) }));
+      }
     }
-    if (valid.length === 0) return;
+    if (files.length === 0) return;
     try {
-      await uploadFiles(valid);
-      toast.success(t("upload_success", { count: valid.length }));
+      await uploadFiles(files);
+      toast.success(t("upload_success", { count: files.length }));
     } catch (err) {
       console.error("Failed to upload files:", err);
       toast.error(t("upload_error"));
     }
-  }, [uploadFiles, t]);
+  }, [uploadFiles, t, maxSizeUpload]);
 
   const handleUploadFolder = useCallback(async (files: File[]) => {
-    const oversized = files.filter(f => f.size > MAX_FILE_SIZE);
-    const valid = files.filter(f => f.size <= MAX_FILE_SIZE);
-    if (oversized.length > 0) {
-      toast.error(t("file_too_large", { name: oversized[0].name, max: "500 MB" }));
+    if (maxSizeUpload > 0) {
+      const oversized = files.filter(f => f.size > maxSizeUpload);
+      files = files.filter(f => f.size <= maxSizeUpload);
+      if (oversized.length > 0) {
+        toast.error(t("file_too_large", { name: oversized[0].name, max: formatFileSize(maxSizeUpload) }));
+      }
     }
-    if (valid.length === 0) return;
+    if (files.length === 0) return;
     try {
-      await uploadFolder(valid);
-      toast.success(t("upload_success", { count: valid.length }));
+      await uploadFolder(files);
+      toast.success(t("upload_success", { count: files.length }));
     } catch (err) {
       console.error("Failed to upload folder:", err);
       toast.error(t("upload_error"));
     }
-  }, [uploadFolder, t]);
+  }, [uploadFolder, t, maxSizeUpload]);
 
   const handleDelete = useCallback(async (name: string) => {
     const confirmed = await confirmDialog({
@@ -357,7 +364,7 @@ export default function FilesPage() {
             collapsed
             quota={quota}
             isPushConnected={isPushConnected}
-            onLogout={() => { logout(); if (!useAuthStore.getState().isAuthenticated) router.push('/login'); }}
+            onLogout={logout}
             onManageApps={handleManageApps}
             onInlineApp={handleInlineApp}
             onCloseInlineApp={closeInlineApp}
@@ -388,12 +395,25 @@ export default function FilesPage() {
               </div>
             )}
 
-            <div className="flex-1 min-h-0">
-              {supportsFiles === false ? (
+            <div className="flex-1 min-h-0 flex flex-col">
+              {!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}
@@ -438,6 +458,7 @@ export default function FilesPage() {
                   onToggleDetails={handleToggleDetails}
                   detailResource={detailResource}
                 />
+                </div>
               )}
             </div>
           </div>

app/[locale]/layout.tsx

@@ -2,6 +2,8 @@ import { notFound } from "next/navigation";
 import { IntlProvider } from "@/components/providers/intl-provider";
 import { ThemeProvider } from "@/components/providers/theme-provider";
 import { CalendarAlertProvider } from "@/components/providers/calendar-alert-provider";
+import { EmbeddedBridgeProvider } from "@/components/providers/embedded-bridge-provider";
+import { RateLimitToastProvider } from "@/components/providers/rate-limit-toast-provider";
 import { TourProvider } from "@/components/tour/tour-provider";
 import { locales } from "@/i18n/routing";
 
@@ -27,9 +29,13 @@ export default async function LocaleLayout({
     <IntlProvider locale={locale} messages={messages}>
       <ThemeProvider>
         <CalendarAlertProvider>
-          <TourProvider>
-            {children}
-          </TourProvider>
+          <RateLimitToastProvider>
+            <EmbeddedBridgeProvider>
+              <TourProvider>
+                {children}
+              </TourProvider>
+            </EmbeddedBridgeProvider>
+          </RateLimitToastProvider>
         </CalendarAlertProvider>
       </ThemeProvider>
     </IntlProvider>

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 { Mail, 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.3";
+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 } = 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");
@@ -173,6 +225,64 @@ export default function LoginPage() {
       });
   }, [oauthEnabled, serverUrl, oauthIssuerUrl]);
 
+  // Auto-SSO: when enabled with OAUTH_ONLY, skip the login page entirely
+  const ssoError = searchParams.get("sso_error");
+  const autoSsoTriggered = useRef(false);
+
+  const startServerSideSso = useCallback(async () => {
+    setOauthLoading(true);
+    try {
+      const prefix = getPathPrefix(params.locale as string);
+      const redirectUri = `${window.location.origin}${prefix}/${params.locale}/auth/callback`;
+      const res = await apiFetch('/api/auth/sso/start', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ redirect_uri: redirectUri, locale: params.locale }),
+      });
+
+      if (!res.ok) {
+        setOauthLoading(false);
+        return;
+      }
+
+      const { authorize_url } = await res.json();
+
+      // Navigate to the authorize URL
+      const isIframe = (() => { try { return window.self !== window.top; } catch { return true; } })();
+      if (isIframe) {
+        // In an iframe, try top-level navigation
+        try {
+          window.top!.location.href = authorize_url;
+        } catch {
+          // Cross-origin restriction - fall back to current frame
+          window.location.href = authorize_url;
+        }
+      } else {
+        window.location.href = authorize_url;
+      }
+    } catch {
+      setOauthLoading(false);
+    }
+  }, [params.locale]);
+
+  useEffect(() => {
+    if (!autoSsoEnabled || !oauthOnly || !oauthDiscoveryDone || !oauthMetadata) return;
+    if (ssoError || isAddAccountMode || isAuthenticated) return;
+    if (autoSsoTriggered.current) return;
+
+    // Guard against redirect loops
+    try {
+      if (sessionStorage.getItem("sso_attempted")) return;
+      sessionStorage.setItem("sso_attempted", "1");
+      // Clear the flag after 30 seconds so retries are possible
+      setTimeout(() => { try { sessionStorage.removeItem("sso_attempted"); } catch { /* ignore */ } }, 30000);
+    } catch { /* sessionStorage unavailable */ }
+
+    autoSsoTriggered.current = true;
+    startServerSideSso();
+  }, [autoSsoEnabled, oauthOnly, oauthDiscoveryDone, oauthMetadata, ssoError, isAddAccountMode, isAuthenticated, startServerSideSso]);
+
   const handleThemeSelect = useCallback((newTheme: "light" | "dark" | "system") => {
     setTheme(newTheme);
     setShowThemeMenu(false);
@@ -207,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">
@@ -305,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");
     }
@@ -325,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,
@@ -506,9 +617,7 @@ export default function LoginPage() {
                 )}
               </div>
             )}
-            <p className="text-center text-xs text-muted-foreground/40">
-              v{APP_VERSION}
-            </p>
+            <VersionBadge />
           </div>
         </div>
       </div>
@@ -650,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 ? (
@@ -676,9 +785,9 @@ export default function LoginPage() {
                     )}
                   </Button>
                 ) : oauthDiscoveryDone ? (
-                  <div className="p-3.5 bg-amber-500/10 border border-amber-500/20 rounded-xl flex items-start gap-2">
-                    <AlertCircle className="w-4 h-4 text-amber-700 dark:text-amber-400 flex-shrink-0 mt-0.5" />
-                    <p className="text-sm text-amber-700 dark:text-amber-400">
+                  <div className="p-3.5 bg-warning/10 border border-warning/20 rounded-xl flex items-start gap-2">
+                    <AlertCircle className="w-4 h-4 text-warning flex-shrink-0 mt-0.5" />
+                    <p className="text-sm text-warning">
                       {t("error.oauth_discovery_failed")}
                     </p>
                   </div>
@@ -692,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">
@@ -804,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")}
@@ -884,9 +1017,9 @@ export default function LoginPage() {
                 )}
 
                 {oauthEnabled && oauthDiscoveryDone && !oauthMetadata && (
-                  <div className="mt-2 p-3 bg-amber-500/10 border border-amber-500/20 rounded-xl flex items-start gap-2">
-                    <AlertCircle className="w-4 h-4 text-amber-700 dark:text-amber-400 flex-shrink-0 mt-0.5" />
-                    <p className="text-sm text-amber-700 dark:text-amber-400">
+                  <div className="mt-2 p-3 bg-warning/10 border border-warning/20 rounded-xl flex items-start gap-2">
+                    <AlertCircle className="w-4 h-4 text-warning flex-shrink-0 mt-0.5" />
+                    <p className="text-sm text-warning">
                       {t("error.oauth_discovery_failed")}
                     </p>
                   </div>
@@ -978,9 +1111,7 @@ export default function LoginPage() {
               )}
             </div>
           )}
-          <p className="text-center text-xs text-muted-foreground/40">
-            v{APP_VERSION}
-          </p>
+          <VersionBadge />
         </div>
       </div>
     </div>

app/[locale]/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useState, useRef, useMemo, useCallback } from "react";
-import { useRouter } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
 import { Sidebar } from "@/components/layout/sidebar";
 import { EmailList } from "@/components/email/email-list";
@@ -10,16 +9,20 @@ import { EmailComposer } from "@/components/email/email-composer";
 import type { ComposerDraftData } from "@/components/email/email-composer";
 import { ThreadConversationView } from "@/components/email/thread-conversation-view";
 import { MobileHeader, MobileViewerHeader } from "@/components/layout/mobile-header";
-import { ThreadGroup, Email } from "@/lib/jmap/types";
+import { ThreadGroup, Email, isUnifiedMailboxId, UNIFIED_ROLE_BY_ID } from "@/lib/jmap/types";
+import { useAccountStore } from "@/stores/account-store";
+import type { UnifiedAccountClient } from "@/lib/unified-mailbox";
 import { KeyboardShortcutsModal } from "@/components/keyboard-shortcuts-modal";
 import { useEmailStore } from "@/stores/email-store";
-import { useAuthStore } from "@/stores/auth-store";
+import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
 import { useSettingsStore } from "@/stores/settings-store";
+import { useContactStore } from "@/stores/contact-store";
 import { useIdentityStore } from "@/stores/identity-store";
 import { useUIStore } from "@/stores/ui-store";
 import { useDeviceDetection } from "@/hooks/use-media-query";
 import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
 import { useConfirmDialog } from "@/hooks/use-confirm-dialog";
+import { useBrowserNavigation, type NavSnapshot } from "@/hooks/use-browser-navigation";
 import { debug } from "@/lib/debug";
 import { playNotificationSound } from "@/lib/notification-sound";
 import { cn } from "@/lib/utils";
@@ -31,6 +34,7 @@ import {
   ComposerErrorFallback,
 } from "@/components/error";
 import { ConfirmDialog } from "@/components/ui/confirm-dialog";
+import { TotpReauthDialog } from "@/components/totp-reauth-dialog";
 import { DragDropProvider } from "@/contexts/drag-drop-context";
 import { isFilterEmpty, activeFilterCount } from "@/lib/jmap/search-utils";
 import { WelcomeBanner } from "@/components/ui/welcome-banner";
@@ -38,24 +42,29 @@ 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 { useIdentitySync } from "@/hooks/use-identity-sync";
 import { Input } from "@/components/ui/input";
 import { FilePreviewModal } from "@/components/files/file-preview-modal";
 import { isFilePreviewable } from "@/lib/file-preview";
 import { appendPlainTextSignature } from "@/lib/signature-utils";
-import { Search, Filter, ChevronDown, X, Paperclip, Star, Mail, MailOpen, RotateCcw, PenSquare, PenLine, CheckSquare, Square } from "lucide-react";
+import { Search, Filter, ChevronDown, X, Paperclip, Star, Mail, MailOpen, RotateCcw, PenSquare, PenLine, CheckSquare, Square, AlertTriangle } from "lucide-react";
 import { ResizeHandle } from "@/components/layout/resize-handle";
 import { Button } from "@/components/ui/button";
 import { useConfig } from "@/hooks/use-config";
+import { usePluginStore } from "@/stores/plugin-store";
+import { useThemeStore } from "@/stores/theme-store";
+
 
 export default function Home() {
-  const router = useRouter();
   const t = useTranslations();
   const tCommon = useTranslations('common');
   const { appName } = useConfig();
+  const mailLayout = useSettingsStore((state) => state.mailLayout);
   const [showComposer, setShowComposer] = useState(false);
   const [composerMode, setComposerMode] = useState<'compose' | 'reply' | 'replyAll' | 'forward'>('compose');
   const [composerDraftText, setComposerDraftText] = useState("");
   const [pendingDraft, setPendingDraft] = useState<ComposerDraftData | null>(null);
+  const [composerSessionId, setComposerSessionId] = useState(0);
   const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
   const { showAppsModal, inlineApp, loadedApps, handleManageApps, handleInlineApp, closeInlineApp, closeAppsModal } = useSidebarApps();
   const [initialCheckDone, setInitialCheckDone] = useState(() => useAuthStore.getState().isAuthenticated && !!useAuthStore.getState().client);
@@ -68,10 +77,37 @@ export default function Home() {
   const [conversationThread, setConversationThread] = useState<ThreadGroup | null>(null);
   const [conversationEmails, setConversationEmails] = useState<Email[]>([]);
   const [isLoadingConversation, setIsLoadingConversation] = useState(false);
+  const [rateLimitSecondsLeft, setRateLimitSecondsLeft] = useState<number | null>(null);
   const [previewAttachment, setPreviewAttachment] = useState<{ blobId: string; name: string; type?: string } | null>(null);
   const markAsReadTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const { isAuthenticated, client, logout, checkAuth, isLoading: authLoading, connectionLost } = useAuthStore();
+  const { isAuthenticated, client, logout, checkAuth, isLoading: authLoading, connectionLost, isRateLimited, rateLimitUntil } = useAuthStore();
   const { identities } = useIdentityStore();
+  useIdentitySync();
+  const trustedSendersAddressBook = useSettingsStore((state) => state.trustedSendersAddressBook);
+  const { loadTrustedSendersBook, trustedSendersLoaded } = useContactStore();
+
+  // Load trusted senders address book when feature is enabled
+  useEffect(() => {
+    if (trustedSendersAddressBook && client && !trustedSendersLoaded) {
+      loadTrustedSendersBook(client);
+    }
+  }, [trustedSendersAddressBook, client, trustedSendersLoaded, loadTrustedSendersBook]);
+
+  useEffect(() => {
+    if (!isRateLimited || !rateLimitUntil) {
+      setRateLimitSecondsLeft(null);
+      return;
+    }
+
+    const updateCountdown = () => {
+      const seconds = Math.max(1, Math.ceil((rateLimitUntil - Date.now()) / 1000));
+      setRateLimitSecondsLeft(seconds);
+    };
+
+    updateCountdown();
+    const timer = setInterval(updateCountdown, 1000);
+    return () => clearInterval(timer);
+  }, [isRateLimited, rateLimitUntil]);
 
   // Mobile/tablet responsive hooks
   const { isMobile, isTablet } = useDeviceDetection();
@@ -98,6 +134,7 @@ export default function Home() {
     markAsRead,
     toggleStar,
     moveToMailbox,
+    moveThreadToMailbox,
     searchEmails,
     searchQuery,
     setSearchQuery,
@@ -120,8 +157,150 @@ export default function Home() {
     hasMoreEmails,
     fetchTagCounts,
     fetchEmailContent,
+    isUnifiedView,
+    fetchUnifiedEmails: fetchUnifiedEmailsAction,
+    refreshUnifiedCounts,
+    exitUnifiedView,
   } = useEmailStore();
 
+  const enableUnifiedMailbox = useSettingsStore((s) => s.enableUnifiedMailbox);
+  const accounts = useAccountStore((s) => s.accounts);
+  const connectedAccountsSignature = useMemo(
+    () => accounts.filter((a) => a.isConnected).map((a) => a.id).sort().join(","),
+    [accounts],
+  );
+
+  const buildUnifiedAccounts = useCallback((): UnifiedAccountClient[] => {
+    const connected = useAccountStore.getState().accounts.filter((a) => a.isConnected);
+    const clients = useAuthStore.getState().getAllConnectedClients();
+    const result: UnifiedAccountClient[] = [];
+    for (const account of connected) {
+      const accountClient = clients.get(account.id);
+      if (!accountClient) continue;
+      result.push({
+        accountId: account.id,
+        accountLabel: account.label || account.email,
+        client: accountClient,
+        mailboxes: [],
+      });
+    }
+    return result;
+  }, []);
+
+  const populateUnifiedAccountMailboxes = useCallback(
+    async (list: UnifiedAccountClient[]): Promise<UnifiedAccountClient[]> => {
+      const populated = await Promise.all(
+        list.map(async (entry) => {
+          try {
+            const mailboxes = await entry.client.getMailboxes();
+            return { ...entry, mailboxes };
+          } catch (err) {
+            debug.error('Failed to load mailboxes for unified account', entry.accountId, err);
+            return entry;
+          }
+        }),
+      );
+      return populated;
+    },
+    [],
+  );
+
+  // Browser back / forward integration. The restore handler reads the
+  // latest values from a ref so we don't have to recreate the callback on
+  // every render (and so the popstate listener is never stale).
+  const navRestoreStateRef = useRef({
+    client,
+    emails,
+    mailboxes,
+    selectedMailbox,
+    selectedEmailId: selectedEmail?.id ?? null,
+    conversationThreadId: null as string | null,
+  });
+  navRestoreStateRef.current.client = client;
+  navRestoreStateRef.current.emails = emails;
+  navRestoreStateRef.current.mailboxes = mailboxes;
+  navRestoreStateRef.current.selectedMailbox = selectedMailbox;
+  navRestoreStateRef.current.selectedEmailId = selectedEmail?.id ?? null;
+  navRestoreStateRef.current.conversationThreadId = conversationThread?.threadId ?? null;
+
+  const handleNavRestore = useCallback(async (state: NavSnapshot) => {
+    const ctx = navRestoreStateRef.current;
+
+    // Restore sidebar overlay state.
+    setSidebarOpen(state.sidebarOpen);
+
+    // Restore composer visibility.
+    if (!state.composerOpen) {
+      setShowComposer(false);
+    }
+
+    // Derive the mobile view from the saved snapshot. The view is a
+    // function of which content the user is looking at: an email, a
+    // thread, the composer, or the bare list.
+    const derivedView: "list" | "viewer" =
+      state.emailId || state.threadId || state.composerOpen ? "viewer" : "list";
+    setActiveView(derivedView);
+
+    // Restore mailbox selection. selectMailbox clears the current email,
+    // which is fine because we re-apply the saved email below.
+    if (state.mailboxId && state.mailboxId !== ctx.selectedMailbox) {
+      selectMailbox(state.mailboxId);
+      if (ctx.client) {
+        try {
+          await fetchEmails(ctx.client, state.mailboxId);
+        } catch (error) {
+          debug.error('Failed to fetch emails on history restore:', error);
+        }
+      }
+    }
+
+    // Restore conversation thread (mobile only). We can clear it directly,
+    // but reopening requires the thread group; if the user pressed forward
+    // to return to a thread, we silently skip - back navigation always works.
+    if ((state.threadId ?? null) !== ctx.conversationThreadId) {
+      if (state.threadId === null) {
+        setConversationThread(null);
+        setConversationEmails([]);
+      }
+    }
+
+    // Restore email selection.
+    if (state.emailId !== ctx.selectedEmailId) {
+      if (state.emailId === null) {
+        selectEmail(null);
+      } else {
+        // Try the in-memory list first; the existing useEffect will fetch
+        // body content if it's missing.
+        const found = ctx.emails.find(e => e.id === state.emailId);
+        if (found) {
+          selectEmail(found);
+        } else if (ctx.client) {
+          // Email isn't in the current list (e.g. mailbox just changed).
+          // Fetch it directly.
+          try {
+            const mailbox = ctx.mailboxes.find(mb => mb.id === state.mailboxId);
+            const accountId = mailbox?.isShared ? mailbox.accountId : undefined;
+            const fullEmail = await ctx.client.getEmail(state.emailId, accountId);
+            if (fullEmail) selectEmail(fullEmail);
+          } catch (error) {
+            debug.error('Failed to fetch email on history restore:', error);
+          }
+        }
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useBrowserNavigation({
+    mailboxId: selectedMailbox,
+    emailId: selectedEmail?.id ?? null,
+    threadId: conversationThread?.threadId ?? null,
+    composerOpen: showComposer,
+    sidebarOpen,
+    onRestore: handleNavRestore,
+    enabled: isAuthenticated && mailboxes.length > 0,
+  });
+
   // Keyboard shortcuts handlers
   const keyboardHandlers = useMemo(() => ({
     onNextEmail: () => {
@@ -268,6 +447,13 @@ export default function Home() {
     });
   }, [checkAuth]);
 
+  // Initialize plugins on mount (re-activates enabled plugins after refresh)
+  // Also syncs server-managed plugins and themes to the client
+  useEffect(() => {
+    usePluginStore.getState().initializePlugins();
+    useThemeStore.getState().syncServerThemes();
+  }, []);
+
   // Hydrate persisted column widths from localStorage
   useEffect(() => {
     try {
@@ -285,9 +471,9 @@ export default function Home() {
   useEffect(() => {
     if (initialCheckDone && !isAuthenticated && !authLoading) {
       try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
-      router.push('/login');
+      redirectToLogin();
     }
-  }, [initialCheckDone, isAuthenticated, authLoading, router]);
+  }, [initialCheckDone, isAuthenticated, authLoading]);
 
   // Load mailboxes and emails when authenticated (only if not already loaded)
   useEffect(() => {
@@ -324,13 +510,13 @@ export default function Home() {
 
             if (pushEnabled) {
               setPushConnected(true);
-              debug.log('[Push] Push notifications successfully enabled');
+              debug.log('push', '[Push] Push notifications successfully enabled');
             } else {
-              debug.log('[Push] Push notifications not available on this server');
+              debug.log('push', '[Push] Push notifications not available on this server');
             }
           } catch (error) {
             // Push notifications are optional - don't break the app if they fail
-            debug.log('[Push] Failed to setup push notifications:', error);
+            debug.log('push', '[Push] Failed to setup push notifications:', error);
           }
         } catch (error) {
           console.error('Error loading email data:', error);
@@ -347,13 +533,30 @@ export default function Home() {
     };
   }, [isAuthenticated, client, mailboxes.length, fetchMailboxes, fetchEmails, fetchQuota, fetchTagCounts, handleStateChange, setPushConnected]);
 
+  // Keep unified mailbox counts in sync when the feature is enabled and more
+  // than one account is connected. Runs whenever the set of connected accounts
+  // or the primary account's mailboxes change (a proxy for "something worth
+  // recounting happened").
+  useEffect(() => {
+    if (!enableUnifiedMailbox || !isAuthenticated || !client) return;
+    const built = buildUnifiedAccounts();
+    if (built.length < 2) return;
+    populateUnifiedAccountMailboxes(built).then((populated) => {
+      refreshUnifiedCounts(populated);
+    });
+  }, [enableUnifiedMailbox, isAuthenticated, client, mailboxes, connectedAccountsSignature, buildUnifiedAccounts, populateUnifiedAccountMailboxes, refreshUnifiedCounts]);
+
   // Auto-fetch full email content when an email is auto-selected (e.g. after delete/archive)
   useEffect(() => {
     if (!selectedEmail || !client) return;
     // If the email lacks bodyValues, it was auto-selected from the list and needs full content
     if (!selectedEmail.bodyValues) {
+      const perAccountClient = isUnifiedView && selectedEmail.accountId
+        ? useAuthStore.getState().getClientForAccount(selectedEmail.accountId)
+        : undefined;
+      const fetchClient = perAccountClient ?? client;
       setLoadingEmail(true);
-      fetchEmailContent(client, selectedEmail.id).finally(() => {
+      fetchEmailContent(fetchClient, selectedEmail.id).finally(() => {
         setLoadingEmail(false);
       });
     }
@@ -364,7 +567,7 @@ export default function Home() {
   useEffect(() => {
     // Clear any existing timeout when email changes
     if (markAsReadTimeoutRef.current) {
-      debug.log('[Mark as Read] Clearing previous timeout');
+      debug.log('email', '[Mark as Read] Clearing previous timeout');
       clearTimeout(markAsReadTimeoutRef.current);
       markAsReadTimeoutRef.current = null;
     }
@@ -376,20 +579,20 @@ export default function Home() {
 
     // Get current setting value
     const markAsReadDelay = useSettingsStore.getState().markAsReadDelay;
-    debug.log('[Mark as Read] Delay setting:', markAsReadDelay, 'ms for email:', selectedEmail.id);
+    debug.log('email', '[Mark as Read] Delay setting:', markAsReadDelay, 'ms for email:', selectedEmail.id);
 
     if (markAsReadDelay === -1) {
       // Never mark as read automatically
-      debug.log('[Mark as Read] Never mode - email will stay unread');
+      debug.log('email', '[Mark as Read] Never mode - email will stay unread');
     } else if (markAsReadDelay === 0) {
       // Mark as read instantly
-      debug.log('[Mark as Read] Instant mode - marking as read now');
+      debug.log('email', '[Mark as Read] Instant mode - marking as read now');
       markAsRead(client, selectedEmail.id, true);
     } else {
       // Mark as read after delay
-      debug.log('[Mark as Read] Delayed mode - will mark as read in', markAsReadDelay, 'ms');
+      debug.log('email', '[Mark as Read] Delayed mode - will mark as read in', markAsReadDelay, 'ms');
       markAsReadTimeoutRef.current = setTimeout(() => {
-        debug.log('[Mark as Read] Timeout fired - marking as read now');
+        debug.log('email', '[Mark as Read] Timeout fired - marking as read now');
         markAsRead(client, selectedEmail.id, true);
         markAsReadTimeoutRef.current = null;
       }, markAsReadDelay);
@@ -398,7 +601,7 @@ export default function Home() {
     // Cleanup on unmount or when dependencies change
     return () => {
       if (markAsReadTimeoutRef.current) {
-        debug.log('[Mark as Read] Cleanup - clearing timeout');
+        debug.log('email', '[Mark as Read] Cleanup - clearing timeout');
         clearTimeout(markAsReadTimeoutRef.current);
         markAsReadTimeoutRef.current = null;
       }
@@ -409,8 +612,11 @@ export default function Home() {
   // Handle new email notifications - play sound
   useEffect(() => {
     if (newEmailNotification) {
-      playNotificationSound();
-      debug.log('New email received:', newEmailNotification.subject);
+      const { emailNotificationsEnabled, emailNotificationSound, notificationSoundChoice } = useSettingsStore.getState();
+      if (emailNotificationsEnabled && emailNotificationSound) {
+        playNotificationSound(notificationSoundChoice);
+      }
+      debug.log('email', 'New email received:', newEmailNotification.subject);
       clearNewEmailNotification();
     }
   }, [newEmailNotification, clearNewEmailNotification]);
@@ -443,9 +649,27 @@ export default function Home() {
     if (!client) return;
 
     try {
+      const effectiveMode = pendingDraft?.mode ?? composerMode;
+      const originalEmailId = selectedEmail?.id;
+
       await sendEmail(client, data.to, data.subject, data.body, data.cc, data.bcc, data.identityId, data.fromEmail, data.draftId, data.fromName, data.htmlBody, data.attachments);
       setShowComposer(false);
 
+      // Mark the original email with $answered or $forwarded keyword
+      if (originalEmailId && (effectiveMode === 'reply' || effectiveMode === 'replyAll')) {
+        try {
+          await client.setKeyword(originalEmailId, '$answered');
+        } catch (e) {
+          debug.error('Failed to set $answered keyword:', e);
+        }
+      } else if (originalEmailId && effectiveMode === 'forward') {
+        try {
+          await client.setKeyword(originalEmailId, '$forwarded');
+        } catch (e) {
+          debug.error('Failed to set $forwarded keyword:', e);
+        }
+      }
+
       // Refresh the current mailbox to update the UI
       await fetchEmails(client, selectedMailbox);
     } catch (error) {
@@ -470,15 +694,40 @@ export default function Home() {
     if (isMobile) setActiveView('viewer');
   };
 
-  const handleEditDraft = (email?: Email) => {
-    const draft = email || selectedEmail;
+  const handleEditDraft = async (email?: Email) => {
+    if (!client) return;
+    const draftCandidate = email && typeof email === 'object' && typeof email.id === 'string'
+      ? email
+      : selectedEmail;
+    let draft = draftCandidate;
     if (!draft) return;
+
+    // The email list only fetches limited properties (no bodyValues/htmlBody/bcc).
+    // Fetch the full email so the composer gets all draft content.
+    if (!draft.bodyValues) {
+      const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
+      const accountId = mailbox?.isShared ? mailbox.accountId : undefined;
+      const fullDraft = await client.getEmail(draft.id, accountId);
+      if (!fullDraft) return;
+      draft = fullDraft;
+    }
+
     const bodyText = draft.bodyValues
       ? Object.values(draft.bodyValues).map(v => v.value).join('\n')
       : '';
     const htmlBody = draft.htmlBody?.[0]?.partId && draft.bodyValues?.[draft.htmlBody[0].partId]
       ? draft.bodyValues[draft.htmlBody[0].partId].value
       : undefined;
+
+    // Try to find the identity that matches the draft's from address to preserve it
+    const draftFromEmail = draft.from?.[0]?.email;
+    const matchedIdentity = draftFromEmail
+      ? identities.find(id => id.email === draftFromEmail)
+      : null;
+
+    // Increment session ID to force the composer to remount with fresh state,
+    // even if it was already open (e.g. right-clicking a draft while composing).
+    setComposerSessionId(id => id + 1);
     setPendingDraft({
       to: draft.to?.map(a => a.email).filter(Boolean).join(', ') || '',
       cc: draft.cc?.map(a => a.email).filter(Boolean).join(', ') || '',
@@ -487,7 +736,7 @@ export default function Home() {
       body: htmlBody || bodyText,
       showCc: (draft.cc?.length || 0) > 0,
       showBcc: (draft.bcc?.length || 0) > 0,
-      selectedIdentityId: null,
+      selectedIdentityId: matchedIdentity?.id ?? null,
       subAddressTag: '',
       mode: 'compose',
       draftId: draft.id,
@@ -509,8 +758,8 @@ export default function Home() {
     if (isMobile) setActiveView('viewer');
   };
 
-  const handleDelete = async () => {
-    if (!client || !selectedEmail) return;
+  const handleDelete = async (emailToDelete: Email | null = selectedEmail) => {
+    if (!client || !emailToDelete) return;
 
     // Check if we're currently in the trash or junk folder
     const currentMailbox = mailboxes.find(m => m.id === selectedMailbox);
@@ -529,7 +778,7 @@ export default function Home() {
       if (!confirmed) return;
 
       try {
-        await deleteEmail(client, selectedEmail.id, true);
+        await deleteEmail(client, emailToDelete.id, true);
       } catch (error) {
         console.error("Failed to permanently delete email:", error);
       }
@@ -538,7 +787,7 @@ export default function Home() {
       const trashMailbox = mailboxes.find(m => m.role === 'trash' && !m.isShared);
       if (trashMailbox) {
         try {
-          await moveToMailbox(client, selectedEmail.id, trashMailbox.id);
+          await moveToMailbox(client, emailToDelete.id, trashMailbox.id);
         } catch (error) {
           console.error("Failed to move email to trash:", error);
         }
@@ -546,8 +795,8 @@ export default function Home() {
     }
   };
 
-  const handleArchive = async () => {
-    if (!client || !selectedEmail) return;
+  const handleArchive = async (emailToArchive: Email | null = selectedEmail) => {
+    if (!client || !emailToArchive) return;
 
     // Find archive mailbox
     const archiveMailbox = mailboxes.find(m => m.role === "archive" || m.name.toLowerCase() === "archive");
@@ -557,10 +806,10 @@ export default function Home() {
 
     try {
       if (archiveMode === 'single') {
-        await moveToMailbox(client, selectedEmail.id, archiveMailbox.id);
+        await moveThreadToMailbox(client, emailToArchive.id, archiveMailbox.id);
       } else {
         // Determine year/month from the email's received date
-        const emailDate = new Date(selectedEmail.receivedAt);
+        const emailDate = new Date(emailToArchive.receivedAt);
         const year = emailDate.getFullYear().toString();
         const month = (emailDate.getMonth() + 1).toString().padStart(2, '0');
         const archiveId = archiveMailbox.originalId || archiveMailbox.id;
@@ -575,9 +824,9 @@ export default function Home() {
         }
 
         if (archiveMode === 'year') {
-          await moveToMailbox(client, selectedEmail.id, yearMailbox.id);
+          await moveThreadToMailbox(client, emailToArchive.id, yearMailbox.id);
         } else {
-          // archiveMode === 'month' — find or create month subfolder under year
+          // archiveMode === 'month' - find or create month subfolder under year
           const yearId = yearMailbox.originalId || yearMailbox.id;
           let monthMailbox = mailboxes.find(
             m => m.name === month && m.parentId === yearId
@@ -586,9 +835,16 @@ export default function Home() {
             monthMailbox = await client.createMailbox(month, yearId);
             await fetchMailboxes(client);
           }
-          await moveToMailbox(client, selectedEmail.id, monthMailbox.id);
+          await moveThreadToMailbox(client, emailToArchive.id, monthMailbox.id);
         }
       }
+
+      if (conversationThread?.threadId === emailToArchive.threadId) {
+        setConversationThread(null);
+        setConversationEmails([]);
+      }
+
+      void fetchMailboxes(client);
     } catch (error) {
       console.error("Failed to archive email:", error);
     }
@@ -604,10 +860,10 @@ export default function Home() {
     }
   };
 
-  const handleMarkAsSpam = async () => {
-    if (!client || !selectedEmail) return;
+  const handleMarkAsSpam = async (emailToMark: Email | null = selectedEmail) => {
+    if (!client || !emailToMark) return;
 
-    const emailId = selectedEmail.id;
+    const emailId = emailToMark.id;
 
     try {
       await markAsSpam(client, emailId);
@@ -635,11 +891,11 @@ export default function Home() {
     }
   };
 
-  const handleUndoSpam = async () => {
-    if (!client || !selectedEmail) return;
+  const handleUndoSpam = async (emailToRestore: Email | null = selectedEmail) => {
+    if (!client || !emailToRestore) return;
 
     try {
-      await undoSpam(client, selectedEmail.id);
+      await undoSpam(client, emailToRestore.id);
 
       const toastInstance = (await import('sonner')).toast;
       toastInstance.success(t('email_viewer.spam.toast_not_spam_success'));
@@ -660,16 +916,22 @@ export default function Home() {
 
       const keywords = { ...email.keywords };
 
-      // Remove old label and legacy color tags - set to false for JMAP to remove them
-      Object.keys(keywords).forEach(key => {
-        if (key.startsWith("$label:") || key.startsWith("$color:")) {
-          keywords[key] = false;
+      if (color === null) {
+        // Remove all label/color tags
+        Object.keys(keywords).forEach(key => {
+          if (key.startsWith("$label:") || key.startsWith("$color:")) {
+            keywords[key] = false;
+          }
+        });
+      } else {
+        const jmapKey = `$label:${color}`;
+        if (keywords[jmapKey] === true) {
+          // Toggle off if already active
+          keywords[jmapKey] = false;
+        } else {
+          // Add the tag without disturbing others
+          keywords[jmapKey] = true;
         }
-      });
-
-      // Add new label tag if specified (using new $label: prefix)
-      if (color) {
-        keywords[`$label:${color}`] = true;
       }
 
       // Update email keywords via JMAP
@@ -689,6 +951,32 @@ export default function Home() {
   };
 
   const handleMailboxSelect = async (mailboxId: string) => {
+    if (isUnifiedMailboxId(mailboxId)) {
+      const role = UNIFIED_ROLE_BY_ID[mailboxId];
+      if (!role) return;
+
+      selectMailbox(mailboxId);
+      selectEmail(null);
+
+      if (isMobile) {
+        setSidebarOpen(false);
+        setActiveView("list");
+      }
+      if (isTablet) {
+        setTabletListVisible(true);
+      }
+
+      const built = buildUnifiedAccounts();
+      const populated = await populateUnifiedAccountMailboxes(built);
+      await fetchUnifiedEmailsAction(populated, role);
+      refreshUnifiedCounts(populated);
+      return;
+    }
+
+    if (isUnifiedView) {
+      exitUnifiedView();
+    }
+
     selectMailbox(mailboxId);
     selectEmail(null); // Clear selected email when switching mailboxes
 
@@ -768,15 +1056,11 @@ export default function Home() {
     }
   };
 
-  const handleLogout = () => {
-    logout();
-    if (!useAuthStore.getState().isAuthenticated) {
-      router.push('/login');
-    }
-  };
+  const handleLogout = logout;
 
   const handleSearch = async (query: string) => {
     if (!client) return;
+    if (isUnifiedView) return;
     setSearchQuery(query);
     if (!isFilterEmpty(searchFilters)) {
       await advancedSearch(client);
@@ -795,6 +1079,7 @@ export default function Home() {
 
   const handleAdvancedSearch = async () => {
     if (!client) return;
+    if (isUnifiedView) return;
     await advancedSearch(client);
   };
 
@@ -804,9 +1089,9 @@ export default function Home() {
       clearTimeout(advancedSearchDebounceRef.current);
     }
     advancedSearchDebounceRef.current = setTimeout(() => {
-      if (client) advancedSearch(client);
+      if (client && !isUnifiedView) advancedSearch(client);
     }, 300);
-  }, [client, advancedSearch]);
+  }, [client, advancedSearch, isUnifiedView]);
 
   useEffect(() => {
     return () => {
@@ -865,6 +1150,8 @@ export default function Home() {
     // Append signature from the primary identity
     const finalBody = appendPlainTextSignature(body, primaryIdentity);
 
+    const originalEmailId = selectedEmail.id;
+
     // Send reply with just the body text
     await sendEmail(
       client,
@@ -879,6 +1166,13 @@ export default function Home() {
       primaryIdentity?.name || undefined
     );
 
+    // Mark the original email as answered
+    try {
+      await client.setKeyword(originalEmailId, '$answered');
+    } catch (e) {
+      debug.error('Failed to set $answered keyword:', e);
+    }
+
     // Refresh emails to show the sent reply
     await fetchEmails(client, selectedMailbox);
   };
@@ -897,6 +1191,10 @@ export default function Home() {
 
   // Get current mailbox name for mobile header
   const currentMailboxName = mailboxes.find(m => m.id === selectedMailbox)?.name || "Inbox";
+  const isFocusedMailLayout = mailLayout === 'focus';
+  const hasViewerContent = showComposer || Boolean(conversationThread) || Boolean(selectedEmail);
+  const shouldCollapseListPane = (isTablet && !tabletListVisible) || (!isMobile && isFocusedMailLayout && hasViewerContent);
+  const shouldHideViewerPane = !isMobile && isFocusedMailLayout && !hasViewerContent;
 
   // Handle email selection with mobile view switching
   const handleEmailSelect = async (email: { id: string }) => {
@@ -922,13 +1220,29 @@ export default function Home() {
 
     // Fetch the full content
     try {
-      // Find selected mailbox to determine accountId (for shared folders)
-      const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
-      // Only pass accountId for shared mailboxes
-      const accountId = mailbox?.isShared ? mailbox.accountId : undefined;
+      // In unified view each email carries its own accountId. Use that
+      // account's client so we fetch from the server that actually owns it.
+      const listEmail = emails.find(e => e.id === email.id);
+      const emailAccountId = isUnifiedView ? listEmail?.accountId : undefined;
+      const perAccountClient = emailAccountId
+        ? useAuthStore.getState().getClientForAccount(emailAccountId)
+        : undefined;
+      const fetchClient = perAccountClient ?? client;
 
-      const fullEmail = await client.getEmail(email.id, accountId);
+      // For shared folders on the primary client, we still need to pass the
+      // shared account's id. In unified view we use the per-account client
+      // directly, so no explicit accountId is needed.
+      const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
+      const accountId = perAccountClient
+        ? undefined
+        : mailbox?.isShared ? mailbox.accountId : undefined;
+
+      const fullEmail = await fetchClient.getEmail(email.id, accountId);
       if (fullEmail) {
+        if (emailAccountId) {
+          fullEmail.accountId = emailAccountId;
+          fullEmail.accountLabel = listEmail?.accountLabel;
+        }
         selectEmail(fullEmail);
         // Mark-as-read logic is now handled by useEffect
       }
@@ -939,14 +1253,24 @@ export default function Home() {
     }
   };
 
-  // Handle back navigation from viewer on mobile
+  // Handle back navigation from viewer on mobile.
+  // Delegate to the browser history stack so this button is equivalent to
+  // the OS back button / mouse back button - popstate then restores the
+  // previous snapshot via handleNavRestore. The viewer is only reachable
+  // from a state that pushed history, so back() always lands on an app entry.
   const handleMobileBack = () => {
-    // If in conversation view, clear it
+    if (typeof window !== 'undefined') {
+      window.history.back();
+      return;
+    }
     if (conversationThread) {
       setConversationThread(null);
       setConversationEmails([]);
     }
     selectEmail(null);
+    if (isTablet) {
+      setTabletListVisible(true);
+    }
     setActiveView("list");
   };
 
@@ -1027,6 +1351,13 @@ export default function Home() {
   return (
     <DragDropProvider>
       <div className="flex flex-col h-dvh bg-background overflow-hidden">
+        {isRateLimited && rateLimitSecondsLeft !== null && (
+          <div className="flex items-center justify-center gap-2 bg-amber-500/10 border-b border-amber-500/30 text-amber-700 dark:text-amber-300 text-sm py-1.5 px-4 flex-shrink-0">
+            <AlertTriangle className="h-3.5 w-3.5" />
+            <span>{tCommon('rate_limited_title')}</span>
+            <span className="text-amber-700/80 dark:text-amber-300/80">{tCommon('rate_limited_detail', { seconds: rateLimitSecondsLeft })}</span>
+          </div>
+        )}
         {connectionLost && (
           <div className="flex items-center justify-center gap-2 bg-destructive/10 border-b border-destructive/30 text-destructive text-sm py-1.5 px-4 flex-shrink-0">
             <RotateCcw className="h-3.5 w-3.5 animate-spin" />
@@ -1120,12 +1451,12 @@ export default function Home() {
               "max-md:flex-1 max-md:border-r-0",
               isMobile && activeView !== "list" && "max-md:hidden",
               // Tablet/Desktop: fixed width with collapse animation
-              "md:flex-shrink-0 md:shadow-sm",
+              shouldHideViewerPane ? "md:flex-1 md:border-r-0" : "md:flex-shrink-0",
+              "md:shadow-sm",
               !isResizing && "transition-all duration-200 ease-out",
-              // Tablet: collapse when email selected
-              isTablet && !tabletListVisible && "md:w-0 md:opacity-0 md:overflow-hidden md:border-r-0"
+              shouldCollapseListPane && "md:w-0 md:opacity-0 md:overflow-hidden md:border-r-0"
             )}
-            style={!isMobile && !(isTablet && !tabletListVisible) ? { width: emailListWidth } : undefined}
+            style={!isMobile && !shouldCollapseListPane && !shouldHideViewerPane ? { width: emailListWidth } : undefined}
           >
             {/* Mobile Header for List View */}
             <MobileHeader
@@ -1175,6 +1506,8 @@ export default function Home() {
                       className={cn("pl-9 h-9", searchQuery && "pr-8")}
                       data-search-input
                       data-tour="search-input"
+                      disabled={isUnifiedView}
+                      title={isUnifiedView ? t("unified_mailbox.search_unavailable") : undefined}
                     />
                     {searchQuery && (
                       <button
@@ -1190,13 +1523,15 @@ export default function Home() {
                   <button
                     type="button"
                     onClick={toggleAdvancedSearch}
+                    disabled={isUnifiedView}
                     className={cn(
                       "relative flex-shrink-0 p-2 rounded-md transition-colors",
+                      isUnifiedView && "opacity-50 cursor-not-allowed",
                       isAdvancedSearchOpen || activeFilterCount(searchFilters) > 0
                         ? "bg-primary/10 text-primary"
                         : "text-muted-foreground hover:text-foreground hover:bg-muted"
                     )}
-                    title={t("advanced_search.toggle_filters")}
+                    title={isUnifiedView ? t("unified_mailbox.search_unavailable") : t("advanced_search.toggle_filters")}
                   >
                     <Filter className="w-4 h-4" />
                     {!isAdvancedSearchOpen && activeFilterCount(searchFilters) > 0 && (
@@ -1380,12 +1715,10 @@ export default function Home() {
                   }
                 }}
                 onDelete={async (email) => {
-                  selectEmail(email);
-                  await handleDelete();
+                  await handleDelete(email);
                 }}
                 onArchive={async (email) => {
-                  selectEmail(email);
-                  await handleArchive();
+                  await handleArchive(email);
                 }}
                 onSetColorTag={(emailId, color) => {
                   handleSetColorTag(emailId, color);
@@ -1396,12 +1729,10 @@ export default function Home() {
                   }
                 }}
                 onMarkAsSpam={async (email) => {
-                  selectEmail(email);
-                  await handleMarkAsSpam();
+                  await handleMarkAsSpam(email);
                 }}
                 onUndoSpam={async (email) => {
-                  selectEmail(email);
-                  await handleUndoSpam();
+                  await handleUndoSpam(email);
                 }}
                 onEditDraft={(email) => {
                   handleEditDraft(email);
@@ -1411,24 +1742,27 @@ export default function Home() {
             </ErrorBoundary>
             </div>
 
-            {/* Floating Compose Button (mobile) */}
-            {isMobile && (
-              <Button
-                onClick={() => {
-                  setComposerMode('compose');
-                  setShowComposer(true);
-                  setActiveView('viewer');
-                }}
-                className="absolute bottom-4 right-4 z-40 h-14 w-14 rounded-full shadow-lg"
-                aria-label={t('sidebar.compose')}
-              >
-                <PenSquare className="h-6 w-6" />
-              </Button>
-            )}
+            {/* Floating Compose Button */}
+            <Button
+              onClick={() => {
+                setComposerMode('compose');
+                setShowComposer(true);
+                if (isMobile) setActiveView('viewer');
+              }}
+              className={cn(
+                "absolute z-40 rounded-full shadow-lg",
+                isMobile ? "bottom-4 right-4 h-14 w-14" : "bottom-4 right-4 h-12 w-12"
+              )}
+              aria-label={t('sidebar.compose')}
+              title={t('sidebar.compose_hint')}
+              data-tour="compose-button"
+            >
+              <PenSquare className={isMobile ? "h-6 w-6" : "h-5 w-5"} />
+            </Button>
           </div>
 
           {/* Email list resize handle (desktop only) */}
-          {!isMobile && !isTablet && (
+          {!isMobile && !isTablet && !isFocusedMailLayout && (
             <ResizeHandle
               onResizeStart={() => { dragStartWidth.current = emailListWidth; setIsResizing(true); }}
               onResize={(delta) => setEmailListWidth(dragStartWidth.current + delta)}
@@ -1440,12 +1774,13 @@ export default function Home() {
           {/* Email Viewer / Composer - full screen on mobile, flex on tablet/desktop */}
           <div
             className={cn(
-              "flex flex-col h-full bg-background",
+              "flex flex-col h-full bg-background flex-1 min-w-0",
               // Mobile: full screen overlay when active
               "max-md:fixed max-md:inset-0 max-md:z-30",
               isMobile && activeView !== "viewer" && "max-md:hidden",
-              // Tablet/Desktop: flex grow, min-w-0 allows truncation of long subjects
-              "md:flex-1 md:min-w-0 md:relative"
+              // Tablet/Desktop: relative
+              "md:relative",
+              shouldHideViewerPane && "md:hidden"
             )}
           >
             {/* Inline Composer - shown in viewer pane */}
@@ -1458,11 +1793,14 @@ export default function Home() {
                 }}
               >
                 <EmailComposer
+                  key={composerSessionId}
                   mode={pendingDraft?.mode ?? composerMode}
-                  replyTo={pendingDraft?.replyTo ?? (selectedEmail ? {
+                  replyTo={pendingDraft !== null ? pendingDraft.replyTo : (selectedEmail ? {
                     from: selectedEmail.from,
+                    replyToAddresses: selectedEmail.replyTo,
                     to: selectedEmail.to,
                     cc: selectedEmail.cc,
+                    bcc: selectedEmail.bcc,
                     subject: selectedEmail.subject,
                     body: selectedEmail.bodyValues?.[selectedEmail.textBody?.[0]?.partId || '']?.value || selectedEmail.preview || '',
                     htmlBody: selectedEmail.bodyValues?.[selectedEmail.htmlBody?.[0]?.partId || '']?.value || undefined,
@@ -1560,7 +1898,7 @@ export default function Home() {
                     onReplyAll={handleReplyAll}
                     onForward={handleForward}
                     onDelete={handleDelete}
-                    onArchive={handleArchive}
+                    onArchive={() => handleArchive()}
                     onToggleStar={handleToggleStar}
                     onSetColorTag={handleSetColorTag}
                     onMarkAsSpam={handleMarkAsSpam}
@@ -1572,14 +1910,15 @@ export default function Home() {
                     }}
                     onDownloadAttachment={handleDownloadAttachment}
                     onQuickReply={handleQuickReply}
-                    onBack={() => {
-                      setTabletListVisible(true);
-                      selectEmail(null);
-                    }}
+                    onBack={handleMobileBack}
                     onNavigateNext={handleNavigateNext}
                     onNavigatePrev={handleNavigatePrev}
                     onShowShortcuts={() => setShowShortcutsModal(true)}
                     onEditDraft={handleEditDraft}
+                    onCompose={() => {
+                      setComposerMode('compose');
+                      setShowComposer(true);
+                    }}
                     currentUserEmail={client?.getUsername()}
                     currentUserName={client?.getUsername()?.split("@")[0]}
                     currentMailboxRole={mailboxes.find(m => m.id === selectedMailbox)?.role}
@@ -1633,6 +1972,7 @@ export default function Home() {
 
         <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
         <ConfirmDialog {...confirmDialogProps} />
+        <TotpReauthDialog />
       </div>
     </DragDropProvider>
   );

app/[locale]/settings/page.tsx

@@ -24,6 +24,8 @@ import {
   BookUser,
   KeyRound,
   PanelLeftClose,
+  Bell,
+  Puzzle,
   type LucideIcon,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -34,6 +36,7 @@ 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';
@@ -44,7 +47,10 @@ import { FilesSettingsComponent } from '@/components/settings/files-settings';
 import { ContactsSettings } from '@/components/settings/contacts-settings';
 import { SmimeSettings } from '@/components/settings/smime-settings';
 import { SidebarAppsSettings } from '@/components/settings/sidebar-apps-settings';
-import { useAuthStore } from '@/stores/auth-store';
+import { NotificationSettings } from '@/components/settings/notification-settings';
+import { ThemesSettings } from '@/components/settings/themes-settings';
+import { PluginsSettings } from '@/components/settings/plugins-settings';
+import { useAuthStore, redirectToLogin } from '@/stores/auth-store';
 import { useEmailStore } from '@/stores/email-store';
 import { useIsDesktop } from '@/hooks/use-media-query';
 import { NavigationRail } from '@/components/layout/navigation-rail';
@@ -53,9 +59,10 @@ import { InlineAppView } from '@/components/layout/inline-app-view';
 import { useSidebarApps } from '@/hooks/use-sidebar-apps';
 import { ResizeHandle } from '@/components/layout/resize-handle';
 import { useConfig } from '@/hooks/use-config';
+import { usePolicyStore } from '@/stores/policy-store';
 import { cn } from '@/lib/utils';
 
-type Tab = 'appearance' | 'email' | 'account' | 'security' | 'identities' | 'encryption' | 'vacation' | 'calendar' | 'contacts' | 'filters' | 'templates' | 'folders' | 'keywords' | 'files' | 'sidebar_apps' | 'advanced';
+type Tab = 'appearance' | 'email' | 'notifications' | 'account' | 'security' | 'identities' | 'encryption' | 'vacation' | 'calendar' | 'contacts' | 'filters' | 'templates' | 'folders' | 'keywords' | 'files' | 'sidebar_apps' | 'themes' | 'plugins' | 'advanced';
 type TabGroup = 'general' | 'account' | 'organization' | 'apps' | 'system';
 
 interface TabDef {
@@ -63,11 +70,13 @@ interface TabDef {
   label: string;
   icon: LucideIcon;
   group: TabGroup;
+  experimental?: boolean;
 }
 
 const tabIcons: Record<Tab, LucideIcon> = {
   appearance: Palette,
   email: Mail,
+  notifications: Bell,
   account: User,
   security: Shield,
   identities: UserPen,
@@ -81,6 +90,8 @@ const tabIcons: Record<Tab, LucideIcon> = {
   keywords: Tags,
   files: HardDrive,
   sidebar_apps: PanelLeftClose,
+  themes: Palette,
+  plugins: Puzzle,
   advanced: Wrench,
 };
 
@@ -95,6 +106,7 @@ export default function SettingsPage() {
   const [initialCheckDone, setInitialCheckDone] = useState(() => useAuthStore.getState().isAuthenticated && !!useAuthStore.getState().client);
   const { quota, isPushConnected } = useEmailStore();
   const { stalwartFeaturesEnabled } = useConfig();
+  const { isFeatureEnabled } = usePolicyStore();
   const [activeTab, setActiveTab] = useState<Tab>(() => {
     try {
       const saved = localStorage.getItem('settings-active-tab');
@@ -119,12 +131,25 @@ export default function SettingsPage() {
     });
   }, [checkAuth]);
 
+  // Listen for tab change events from child components
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const tab = (e as CustomEvent).detail as Tab;
+      if (tab) {
+        setActiveTab(tab);
+        try { localStorage.setItem('settings-active-tab', tab); } catch { /* ignore */ }
+      }
+    };
+    window.addEventListener('settings-tab-change', handler);
+    return () => window.removeEventListener('settings-tab-change', handler);
+  }, []);
+
   useEffect(() => {
     if (initialCheckDone && !isAuthenticated && !authLoading) {
       try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
-      router.push('/login');
+      redirectToLogin();
     }
-  }, [initialCheckDone, isAuthenticated, authLoading, router]);
+  }, [initialCheckDone, isAuthenticated, authLoading]);
 
   if (!isAuthenticated) {
     return null;
@@ -138,19 +163,22 @@ export default function SettingsPage() {
   const tabs: TabDef[] = [
     { id: 'appearance', label: t('tabs.appearance'), icon: tabIcons.appearance, group: 'general' },
     { id: 'email', label: t('tabs.email'), icon: tabIcons.email, 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 }] : []),
     { id: 'identities', label: t('tabs.identities'), icon: tabIcons.identities, group: 'account' },
-    { id: 'encryption', label: t('tabs.encryption'), icon: tabIcons.encryption, group: 'account' },
+    ...(isFeatureEnabled('smimeEnabled') ? [{ id: 'encryption' as Tab, label: t('tabs.encryption'), icon: tabIcons.encryption, group: 'account' as TabGroup }] : []),
     ...(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 }] : []),
-    { id: 'templates', label: t('tabs.templates'), icon: tabIcons.templates, group: 'organization' },
+    ...(isFeatureEnabled('templatesEnabled') ? [{ id: 'templates' as Tab, label: t('tabs.templates'), icon: tabIcons.templates, group: 'organization' as TabGroup }] : []),
     { id: 'folders', label: t('tabs.folders'), icon: tabIcons.folders, group: 'organization' },
-    { id: 'keywords', label: t('tabs.keywords'), icon: tabIcons.keywords, group: 'organization' },
+    ...(isFeatureEnabled('customKeywordsEnabled') ? [{ id: 'keywords' as Tab, label: t('tabs.keywords'), icon: tabIcons.keywords, group: 'organization' as TabGroup }] : []),
     ...(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 }] : []),
-    { id: 'sidebar_apps', label: t('tabs.sidebar_apps'), icon: tabIcons.sidebar_apps, group: 'apps' },
+    ...(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 }] : []),
     { id: 'advanced', label: t('tabs.advanced'), icon: tabIcons.advanced, group: 'system' },
   ];
 
@@ -177,19 +205,22 @@ export default function SettingsPage() {
     <>
       {activeTab === 'appearance' && <AppearanceSettings />}
       {activeTab === 'email' && <EmailSettings />}
+      {activeTab === 'notifications' && <NotificationSettings />}
       {activeTab === 'account' && <AccountSettings />}
       {activeTab === 'security' && <AccountSecuritySettings />}
       {activeTab === 'identities' && <IdentitySettings />}
       {activeTab === 'encryption' && <SmimeSettings />}
       {activeTab === 'vacation' && <VacationSettings />}
       {activeTab === 'calendar' && <><CalendarSettings /><div className="mt-8"><CalendarManagementSettings /></div></>}
-      {activeTab === 'contacts' && <ContactsSettings />}
+      {activeTab === 'contacts' && <><ContactsSettings /><div className="mt-8"><AddressBookManagementSettings /></div></>}
       {activeTab === 'filters' && <FilterSettings />}
       {activeTab === 'templates' && <TemplateSettings />}
       {activeTab === 'folders' && <FolderSettings />}
       {activeTab === 'keywords' && <KeywordSettings />}
       {activeTab === 'files' && <FilesSettingsComponent />}
       {activeTab === 'sidebar_apps' && <SidebarAppsSettings />}
+      {activeTab === 'themes' && <ThemesSettings />}
+      {activeTab === 'plugins' && <PluginsSettings />}
       {activeTab === 'advanced' && <AdvancedSettings />}
     </>
   );
@@ -274,6 +305,11 @@ export default function SettingsPage() {
                       <span className="flex items-center gap-3">
                         <Icon className="w-4 h-4 text-muted-foreground" />
                         {tab.label}
+                        {tab.experimental && (
+                          <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-warning/15 text-warning">
+                            Experimental
+                          </span>
+                        )}
                       </span>
                       <ChevronRight className="w-4 h-4 text-muted-foreground" />
                     </button>
@@ -286,7 +322,7 @@ export default function SettingsPage() {
           {/* Logout */}
           <div className="border-t border-border px-5 py-3">
             <button
-              onClick={() => { logout(); if (!useAuthStore.getState().isAuthenticated) router.push('/login'); }}
+              onClick={logout}
               className="w-full flex items-center gap-3 py-2.5 text-sm text-destructive hover:bg-muted rounded-md px-2 transition-colors duration-150"
             >
               <LogOut className="w-4 h-4" />
@@ -317,7 +353,7 @@ export default function SettingsPage() {
           collapsed
           quota={quota}
           isPushConnected={isPushConnected}
-          onLogout={() => { logout(); if (!useAuthStore.getState().isAuthenticated) router.push('/login'); }}
+          onLogout={logout}
           onManageApps={handleManageApps}
           onInlineApp={handleInlineApp}
           onCloseInlineApp={closeInlineApp}
@@ -380,6 +416,11 @@ export default function SettingsPage() {
                         activeTab === tab.id ? 'text-accent-foreground' : 'text-muted-foreground'
                       )} />
                       {tab.label}
+                      {tab.experimental && (
+                        <span className="ml-auto text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-warning/15 text-warning shrink-0">
+                          Experimental
+                        </span>
+                      )}
                     </button>
                   );
                 })}

app/admin/auth/page.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Save, Loader2, RotateCcw } from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
+
+interface ConfigEntry {
+  value: unknown;
+  source: 'admin' | 'env' | 'default';
+}
+
+export default function AdminAuthPage() {
+  const [config, setConfig] = useState<Record<string, ConfigEntry>>({});
+  const [edits, setEdits] = useState<Record<string, unknown>>({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  useEffect(() => { fetchConfig(); }, []);
+
+  async function fetchConfig() {
+    setLoading(true);
+    const res = await apiFetch('/api/admin/config');
+    if (res.ok) setConfig(await res.json());
+    setLoading(false);
+  }
+
+  function handleChange(key: string, value: unknown) {
+    setEdits(prev => ({ ...prev, [key]: value }));
+    setMessage(null);
+  }
+
+  function currentValue(key: string): unknown {
+    if (key in edits) return edits[key];
+    return config[key]?.value;
+  }
+
+  async function handleSave() {
+    if (Object.keys(edits).length === 0) return;
+    setSaving(true);
+    setMessage(null);
+
+    const res = await apiFetch('/api/admin/config', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(edits),
+    });
+
+    if (res.ok) {
+      setMessage({ type: 'success', text: 'Authentication settings saved.' });
+      setEdits({});
+      await fetchConfig();
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Failed to save' });
+    }
+    setSaving(false);
+  }
+
+  async function handleRevert(key: string) {
+    const res = await apiFetch('/api/admin/config', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key }),
+    });
+    if (res.ok) {
+      setEdits(prev => { const next = { ...prev }; delete next[key]; return next; });
+      await fetchConfig();
+    }
+  }
+
+  const hasEdits = Object.keys(edits).length > 0;
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Authentication</h1>
+          <p className="text-sm text-muted-foreground mt-1">OAuth, SSO, and session configuration</p>
+        </div>
+        {hasEdits && (
+          <button
+            onClick={handleSave}
+            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" /> : <Save className="w-4 h-4" />}
+            Save changes
+          </button>
+        )}
+      </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>
+      )}
+
+      {/* 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} />
+        <Toggle label="OAuth Only" description="Hide password login form when enabled" configKey="oauthOnly" value={currentValue('oauthOnly') as boolean} source={config.oauthOnly?.source} onChange={handleChange} onRevert={handleRevert} />
+        <Text label="OAuth Client ID" configKey="oauthClientId" value={currentValue('oauthClientId') as string} source={config.oauthClientId?.source} onChange={handleChange} onRevert={handleRevert} />
+        <Text label="OAuth Client Secret" configKey="oauthClientSecret" value={currentValue('oauthClientSecret') as string} source={config.oauthClientSecret?.source} onChange={handleChange} onRevert={handleRevert} type="password" />
+        <Text label="OAuth Issuer URL" configKey="oauthIssuerUrl" value={currentValue('oauthIssuerUrl') as string} source={config.oauthIssuerUrl?.source} onChange={handleChange} onRevert={handleRevert} placeholder="https://auth.example.com" />
+      </Section>
+
+      {/* SSO */}
+      <Section title="Single Sign-On">
+        <Toggle label="Auto SSO" description="Automatically redirect to SSO provider on load" configKey="autoSsoEnabled" value={currentValue('autoSsoEnabled') as boolean} source={config.autoSsoEnabled?.source} onChange={handleChange} onRevert={handleRevert} />
+      </Section>
+
+      {/* Session & Security */}
+      <Section title="Session & Security">
+        <Select label="Cookie SameSite" configKey="cookieSameSite" value={currentValue('cookieSameSite') as string} source={config.cookieSameSite?.source} options={['lax', 'strict', 'none']} onChange={handleChange} onRevert={handleRevert} />
+        <Text label="Allowed Frame Ancestors" configKey="allowedFrameAncestors" value={currentValue('allowedFrameAncestors') as string} source={config.allowedFrameAncestors?.source} onChange={handleChange} onRevert={handleRevert} placeholder="'none' or https://..." />
+        <Text label="Parent Origin" description="For embedded mode communication" configKey="parentOrigin" value={currentValue('parentOrigin') as string} source={config.parentOrigin?.source} onChange={handleChange} onRevert={handleRevert} />
+      </Section>
+    </div>
+  );
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <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">{title}</h2>
+      </div>
+      <div className="divide-y divide-border">{children}</div>
+    </div>
+  );
+}
+
+function SourceBadge({ source }: { source?: string }) {
+  if (!source || source === 'default') return null;
+  return (
+    <span className={`text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded ${source === 'admin' ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}`}>
+      {source}
+    </span>
+  );
+}
+
+function Text({ label, description, configKey, value, source, onChange, onRevert, placeholder, type = 'text' }: {
+  label: string; description?: string; configKey: string; value: string; source?: string;
+  onChange: (k: string, v: unknown) => void; onRevert: (k: string) => void; placeholder?: string; type?: string;
+}) {
+  return (
+    <div className="px-4 py-3 flex items-center justify-between gap-4">
+      <div className="min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-foreground">{label}</span>
+          <SourceBadge source={source} />
+        </div>
+        {description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>}
+      </div>
+      <div className="flex items-center gap-2">
+        <input type={type} value={value ?? ''} onChange={(e) => onChange(configKey, e.target.value)} placeholder={placeholder}
+          className="h-8 w-64 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" />
+        {source === 'admin' && (
+          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert"><RotateCcw className="w-3.5 h-3.5" /></button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Toggle({ label, description, configKey, value, source, onChange, onRevert }: {
+  label: string; description?: string; configKey: string; value: boolean; source?: string;
+  onChange: (k: string, v: unknown) => void; onRevert: (k: string) => void;
+}) {
+  return (
+    <div className="px-4 py-3 flex items-center justify-between gap-4">
+      <div className="min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-foreground">{label}</span>
+          <SourceBadge source={source} />
+        </div>
+        {description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>}
+      </div>
+      <div className="flex items-center gap-2">
+        <button onClick={() => onChange(configKey, !value)}
+          className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${value ? '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 ${value ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+        </button>
+        {source === 'admin' && (
+          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert"><RotateCcw className="w-3.5 h-3.5" /></button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Select({ label, configKey, value, source, options, onChange, onRevert }: {
+  label: string; configKey: string; value: string; source?: string; options: string[];
+  onChange: (k: string, v: unknown) => void; onRevert: (k: string) => void;
+}) {
+  return (
+    <div className="px-4 py-3 flex items-center justify-between gap-4">
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-foreground">{label}</span>
+        <SourceBadge source={source} />
+      </div>
+      <div className="flex items-center gap-2">
+        <select value={value ?? ''} onChange={(e) => onChange(configKey, e.target.value)}
+          className="h-8 rounded-md border border-input bg-background px-2.5 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+          {options.map(o => <option key={o} value={o}>{o}</option>)}
+        </select>
+        {source === 'admin' && (
+          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert"><RotateCcw className="w-3.5 h-3.5" /></button>
+        )}
+      </div>
+    </div>
+  );
+}

app/admin/branding/page.tsx

@@ -0,0 +1,300 @@
+'use client';
+
+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;
+  source: 'admin' | 'env' | 'default';
+}
+
+const IMAGE_FIELDS = [
+  { key: 'faviconUrl', label: 'Favicon', accept: '.svg,.png,.ico,.webp' },
+  { key: 'appLogoLightUrl', label: 'App Logo (Light Mode)', accept: '.svg,.png,.jpg,.webp' },
+  { key: 'appLogoDarkUrl', label: 'App Logo (Dark Mode)', accept: '.svg,.png,.jpg,.webp' },
+  { key: 'loginLogoLightUrl', label: 'Login Logo (Light Mode)', accept: '.svg,.png,.jpg,.webp' },
+  { key: 'loginLogoDarkUrl', label: 'Login Logo (Dark Mode)', accept: '.svg,.png,.jpg,.webp' },
+];
+
+const TEXT_FIELDS = [
+  { key: 'loginCompanyName', label: 'Company Name' },
+  { key: 'loginImprintUrl', label: 'Imprint URL' },
+  { key: 'loginPrivacyPolicyUrl', label: 'Privacy Policy URL' },
+  { key: 'loginWebsiteUrl', label: 'Company Website URL' },
+];
+
+export default function AdminBrandingPage() {
+  const [config, setConfig] = useState<Record<string, ConfigEntry>>({});
+  const [edits, setEdits] = useState<Record<string, unknown>>({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [uploading, setUploading] = useState<string | null>(null);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({});
+
+  useEffect(() => {
+    fetchConfig();
+  }, []);
+
+  async function fetchConfig() {
+    setLoading(true);
+    const res = await apiFetch('/api/admin/config');
+    if (res.ok) setConfig(await res.json());
+    setLoading(false);
+  }
+
+  function handleChange(key: string, value: string) {
+    setEdits(prev => ({ ...prev, [key]: value }));
+    setMessage(null);
+  }
+
+  function currentValue(key: string): string {
+    if (key in edits) return edits[key] as string;
+    return (config[key]?.value as string) ?? '';
+  }
+
+  async function handleSave() {
+    if (Object.keys(edits).length === 0) return;
+    setSaving(true);
+    setMessage(null);
+
+    const res = await apiFetch('/api/admin/config', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(edits),
+    });
+
+    if (res.ok) {
+      setMessage({ type: 'success', text: 'Branding updated. Changes visible on next page load.' });
+      setEdits({});
+      await fetchConfig();
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Failed to save' });
+    }
+    setSaving(false);
+  }
+
+  async function handleUpload(slot: string, file: File) {
+    setUploading(slot);
+    setMessage(null);
+
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('slot', slot);
+
+    const res = await apiFetch('/api/admin/branding', {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (res.ok) {
+      const data = await res.json();
+      setMessage({ type: 'success', text: `Uploaded ${file.name} successfully.` });
+      // Remove any pending URL edit for this slot since upload sets it
+      setEdits(prev => {
+        const next = { ...prev };
+        delete next[slot];
+        return next;
+      });
+      // Update config to reflect the uploaded URL
+      setConfig(prev => ({
+        ...prev,
+        [slot]: { value: data.url, source: 'admin' },
+      }));
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Upload failed' });
+    }
+    setUploading(null);
+  }
+
+  async function handleDeleteUpload(slot: string) {
+    setMessage(null);
+
+    const res = await apiFetch('/api/admin/branding', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ slot }),
+    });
+
+    if (res.ok) {
+      setMessage({ type: 'success', text: 'Uploaded file removed. Reverted to default.' });
+      setEdits(prev => {
+        const next = { ...prev };
+        delete next[slot];
+        return next;
+      });
+      await fetchConfig();
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Failed to remove' });
+    }
+  }
+
+  async function handleRevert(key: string) {
+    const res = await apiFetch('/api/admin/config', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key }),
+    });
+    if (res.ok) {
+      setEdits(prev => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+      await fetchConfig();
+    }
+  }
+
+  const isUploadedFile = (key: string): boolean => {
+    const val = currentValue(key);
+    return val.startsWith('/api/admin/branding/');
+  };
+
+  const hasEdits = Object.keys(edits).length > 0;
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Branding</h1>
+          <p className="text-sm text-muted-foreground mt-1">Customize logos, favicon, and company information</p>
+        </div>
+        {hasEdits && (
+          <button
+            onClick={handleSave}
+            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" /> : <Save className="w-4 h-4" />}
+            Save changes
+          </button>
+        )}
+      </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>
+      )}
+
+      <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">Images & Logos</h2>
+          <p className="text-xs text-muted-foreground mt-0.5">Upload a file or enter a URL. Supported formats: SVG, PNG, JPEG, WebP, ICO (max 2 MB)</p>
+        </div>
+        <div className="divide-y divide-border">
+          {IMAGE_FIELDS.map(field => (
+            <div key={field.key} className="px-4 py-3">
+              <div className="flex items-center justify-between gap-4">
+                <div className="flex items-center gap-2 min-w-0">
+                  <label className="text-sm text-foreground whitespace-nowrap">{field.label}</label>
+                  {config[field.key]?.source === 'admin' && (
+                    <span className="text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded bg-primary/10 text-primary">
+                      {isUploadedFile(field.key) ? 'uploaded' : 'admin'}
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="text"
+                    value={currentValue(field.key)}
+                    onChange={(e) => handleChange(field.key, e.target.value)}
+                    placeholder="Enter URL or upload a file"
+                    className="h-8 w-64 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"
+                  />
+                  <input
+                    ref={el => { fileInputRefs.current[field.key] = el; }}
+                    type="file"
+                    accept={field.accept}
+                    className="hidden"
+                    onChange={(e) => {
+                      const file = e.target.files?.[0];
+                      if (file) handleUpload(field.key, file);
+                      e.target.value = '';
+                    }}
+                  />
+                  <button
+                    onClick={() => fileInputRefs.current[field.key]?.click()}
+                    disabled={uploading === field.key}
+                    className="inline-flex items-center gap-1.5 h-8 px-2.5 rounded-md border border-input bg-background text-sm text-foreground hover:bg-muted disabled:opacity-50 transition-colors"
+                    title="Upload file"
+                  >
+                    {uploading === field.key ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Upload className="w-3.5 h-3.5" />}
+                  </button>
+                  {isUploadedFile(field.key) && (
+                    <button
+                      onClick={() => handleDeleteUpload(field.key)}
+                      className="text-muted-foreground hover:text-destructive transition-colors"
+                      title="Remove uploaded file"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                  )}
+                  {config[field.key]?.source === 'admin' && !isUploadedFile(field.key) && (
+                    <button onClick={() => handleRevert(field.key)} className="text-muted-foreground hover:text-foreground" title="Revert to default">
+                      <RotateCcw className="w-3.5 h-3.5" />
+                    </button>
+                  )}
+                </div>
+              </div>
+              {/* Preview */}
+              {currentValue(field.key) && (
+                <div className="mt-2 flex items-center gap-2">
+                  <ImageIcon className="w-3.5 h-3.5 text-muted-foreground" />
+                  <div className="h-8 w-auto bg-muted rounded flex items-center justify-center px-2">
+                    <img
+                      src={currentValue(field.key)}
+                      alt={field.label}
+                      className="max-h-6 max-w-[200px] object-contain"
+                      onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <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">Company Information</h2>
+        </div>
+        <div className="divide-y divide-border">
+          {TEXT_FIELDS.map(field => (
+            <div key={field.key} className="px-4 py-3 flex items-center justify-between gap-4">
+              <div className="flex items-center gap-2 min-w-0">
+                <label className="text-sm text-foreground whitespace-nowrap">{field.label}</label>
+                {config[field.key]?.source === 'admin' && (
+                  <span className="text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded bg-primary/10 text-primary">admin</span>
+                )}
+              </div>
+              <div className="flex items-center gap-2">
+                <input
+                  type="text"
+                  value={currentValue(field.key)}
+                  onChange={(e) => handleChange(field.key, e.target.value)}
+                  placeholder={field.key.includes('Url') ? 'https://...' : 'Enter value'}
+                  className="h-8 w-72 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"
+                />
+                {config[field.key]?.source === 'admin' && (
+                  <button onClick={() => handleRevert(field.key)} className="text-muted-foreground hover:text-foreground" title="Revert to default">
+                    <RotateCcw className="w-3.5 h-3.5" />
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

app/admin/change-password/page.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+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();
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    setSuccess(false);
+
+    if (newPassword.length < 8) {
+      setError('New password must be at least 8 characters.');
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setError('New passwords do not match.');
+      return;
+    }
+
+    setLoading(true);
+    const res = await apiFetch('/api/admin/change-password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ currentPassword, newPassword }),
+    });
+
+    if (res.ok) {
+      setSuccess(true);
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+      setTimeout(() => router.push('/admin'), 2000);
+    } else {
+      const data = await res.json().catch(() => ({}));
+      setError(data.error || 'Failed to change password.');
+    }
+    setLoading(false);
+  }
+
+  return (
+    <div className="max-w-md mx-auto space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold text-foreground">Change Password</h1>
+        <p className="text-sm text-muted-foreground mt-1">Update your admin password.</p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-1.5">
+          <label className="text-sm font-medium text-foreground">Current Password</label>
+          <div className="relative">
+            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <input
+              type="password"
+              value={currentPassword}
+              onChange={e => setCurrentPassword(e.target.value)}
+              required
+              className="w-full h-9 pl-9 pr-3 rounded-md border border-input bg-background text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              autoComplete="current-password"
+            />
+          </div>
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="text-sm font-medium text-foreground">New Password</label>
+          <input
+            type="password"
+            value={newPassword}
+            onChange={e => setNewPassword(e.target.value)}
+            required
+            minLength={8}
+            className="w-full h-9 px-3 rounded-md border border-input bg-background text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            autoComplete="new-password"
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="text-sm font-medium text-foreground">Confirm New Password</label>
+          <input
+            type="password"
+            value={confirmPassword}
+            onChange={e => setConfirmPassword(e.target.value)}
+            required
+            minLength={8}
+            className="w-full h-9 px-3 rounded-md border border-input bg-background text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            autoComplete="new-password"
+          />
+        </div>
+
+        {error && (
+          <p className="text-sm text-red-500">{error}</p>
+        )}
+        {success && (
+          <p className="text-sm text-green-600">Password changed. Redirecting...</p>
+        )}
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full h-9 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
+        >
+          {loading ? 'Changing...' : 'Change Password'}
+        </button>
+      </form>
+    </div>
+  );
+}

app/admin/layout.tsx

@@ -0,0 +1,277 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import Link from 'next/link';
+import {
+  LayoutDashboard,
+  Settings,
+  Palette,
+  Shield,
+  Scale,
+  ScrollText,
+  LogOut,
+  KeyRound,
+  Puzzle,
+  SwatchBook,
+  Mail,
+  Calendar,
+  BookUser,
+  HardDrive,
+  ArrowLeft,
+  Store,
+} from 'lucide-react';
+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 = [
+  {
+    label: 'Overview',
+    items: [
+      { href: '/admin', label: 'Dashboard', icon: LayoutDashboard },
+    ],
+  },
+  {
+    label: 'Configuration',
+    items: [
+      { href: '/admin/settings', label: 'Settings', icon: Settings },
+      { href: '/admin/branding', label: 'Branding', icon: Palette },
+      { href: '/admin/auth', label: 'Authentication', icon: Shield },
+      { href: '/admin/policy', label: 'Policy', icon: Scale },
+    ],
+  },
+  {
+    label: 'Extensions',
+    items: [
+      { href: '/admin/plugins', label: 'Plugins', icon: Puzzle },
+      { href: '/admin/themes', label: 'Themes', icon: SwatchBook },
+      { href: '/admin/marketplace', label: 'Marketplace', icon: Store },
+    ],
+  },
+  {
+    label: 'System',
+    items: [
+      { href: '/admin/logs', label: 'Audit Log', icon: ScrollText },
+    ],
+  },
+];
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [authenticated, setAuthenticated] = useState<boolean | null>(null);
+  const [isStalwartAdmin, setIsStalwartAdmin] = useState(false);
+  const { appLogoLightUrl, appLogoDarkUrl, loginLogoLightUrl, loginLogoDarkUrl } = useConfig();
+  const resolvedTheme = useThemeStore((s) => s.resolvedTheme);
+  const logoUrl = resolvedTheme === 'dark'
+    ? (appLogoDarkUrl || appLogoLightUrl || loginLogoDarkUrl)
+    : (appLogoLightUrl || appLogoDarkUrl || loginLogoLightUrl);
+
+  useEffect(() => {
+    if (pathname !== '/admin/login') {
+      checkAuth();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname]);
+
+  function getJmapHeaders(): Record<string, string> {
+    return getActiveAccountSlotHeaders();
+  }
+
+  async function checkAuth() {
+    try {
+      const jmapHeaders = getJmapHeaders();
+      const res = await apiFetch('/api/admin/auth', { headers: jmapHeaders });
+      const data = await res.json();
+
+      const stalwartAdmin = data.stalwartAdmin === true;
+      setIsStalwartAdmin(stalwartAdmin);
+
+      // If neither password-based admin nor Stalwart admin, redirect away
+      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 apiFetch('/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');
+    } catch {
+      router.replace('/admin/login');
+    }
+  }
+
+  async function handleLogout() {
+    await apiFetch('/api/admin/auth', { method: 'DELETE' });
+    router.replace('/admin/login');
+  }
+
+  // Don't gate the login page
+  if (pathname === '/admin/login') {
+    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 */}
+      <nav className="w-14 bg-secondary flex flex-col items-center py-3 gap-2 border-r border-border sticky top-0 h-screen shrink-0">
+        {logoUrl ? (
+          <img src={logoUrl} alt="" className="w-7 h-7 object-contain mb-2" />
+        ) : (
+          <div className="w-7 h-7 mb-2" />
+        )}
+        <a
+          href="/"
+          className="flex items-center justify-center w-10 h-10 rounded-md transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+          title="Mail"
+        >
+          <Mail className="w-[18px] h-[18px]" />
+        </a>
+        <a
+          href="/calendar"
+          className="flex items-center justify-center w-10 h-10 rounded-md transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+          title="Calendar"
+        >
+          <Calendar className="w-[18px] h-[18px]" />
+        </a>
+        <a
+          href="/contacts"
+          className="flex items-center justify-center w-10 h-10 rounded-md transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+          title="Contacts"
+        >
+          <BookUser className="w-[18px] h-[18px]" />
+        </a>
+        <a
+          href="/files"
+          className="flex items-center justify-center w-10 h-10 rounded-md transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+          title="Files"
+        >
+          <HardDrive className="w-[18px] h-[18px]" />
+        </a>
+        <div className="mt-auto flex flex-col items-center gap-2">
+          <div className="flex items-center justify-center w-10 h-10 rounded-md bg-primary/10 text-primary" title="Admin">
+            <Shield className="w-[18px] h-[18px]" />
+          </div>
+          <a
+            href="/settings"
+            className="flex items-center justify-center w-10 h-10 rounded-md transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+            title="Settings"
+          >
+            <Settings className="w-[18px] h-[18px]" />
+          </a>
+        </div>
+      </nav>
+
+      {/* Admin Sidebar */}
+      <aside className="w-60 border-r border-border bg-secondary flex flex-col sticky top-0 h-screen">
+        <div className="h-14 flex items-center px-4 border-b border-border shrink-0">
+          {logoUrl ? (
+            <img src={logoUrl} alt="" className="w-5 h-5 object-contain mr-2" />
+          ) : (
+            <Shield className="w-5 h-5 text-primary mr-2" />
+          )}
+          <span className="font-semibold text-sm text-foreground">Admin Panel</span>
+        </div>
+
+        <div className="flex-1 overflow-y-auto py-2">
+          <div className="px-2 space-y-0.5">
+            {NAV_GROUPS.map((group, groupIndex) => (
+              <div key={group.label}>
+                {groupIndex > 0 && <div className="mx-1 my-2 border-t border-border" />}
+                <div className="px-3 pt-2.5 pb-1">
+                  <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                    {group.label}
+                  </span>
+                </div>
+                {group.items.map(({ href, label, icon: Icon }) => {
+                  const active = href === '/admin' ? pathname === '/admin' : pathname.startsWith(href);
+                  return (
+                    <Link
+                      key={href}
+                      href={href}
+                      className={cn(
+                        'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
+                        active
+                          ? 'bg-accent text-accent-foreground font-medium'
+                          : 'hover:bg-muted text-foreground'
+                      )}
+                    >
+                      <Icon className={cn(
+                        'w-4 h-4 shrink-0',
+                        active ? 'text-accent-foreground' : 'text-muted-foreground'
+                      )} />
+                      {label}
+                    </Link>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="px-2 py-2 border-t border-border space-y-0.5 shrink-0">
+          {!isStalwartAdmin && (
+            <Link
+              href="/admin/change-password"
+              className={cn(
+                'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
+                pathname === '/admin/change-password'
+                  ? 'bg-accent text-accent-foreground font-medium'
+                  : 'hover:bg-muted text-foreground'
+              )}
+            >
+              <KeyRound className={cn(
+                'w-4 h-4 shrink-0',
+              pathname === '/admin/change-password' ? 'text-accent-foreground' : 'text-muted-foreground'
+            )} />
+            Change Password
+          </Link>
+          )}
+          <button
+            onClick={handleLogout}
+            className="w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5 hover:bg-muted text-foreground"
+          >
+            <LogOut className="w-4 h-4 shrink-0 text-muted-foreground" />
+            Sign out
+          </button>
+        </div>
+      </aside>
+
+      {/* Main content */}
+      <main className="flex-1 overflow-auto">
+        <div className="max-w-4xl mx-auto p-6">
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}

app/admin/login/page.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useState, type FormEvent } from 'react';
+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();
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { loginLogoLightUrl, loginLogoDarkUrl } = useConfig();
+  const resolvedTheme = useThemeStore((s) => s.resolvedTheme);
+  const logoUrl = resolvedTheme === 'dark' ? loginLogoDarkUrl : loginLogoLightUrl;
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const res = await apiFetch('/api/admin/auth', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ password }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error || 'Login failed');
+        return;
+      }
+
+      router.push('/admin');
+    } catch {
+      setError('Network error. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background px-4">
+      <div className="w-full max-w-sm">
+        <div className="flex flex-col items-center mb-8">
+          <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-4">
+            {logoUrl ? (
+              <img src={logoUrl} alt="" className="w-8 h-8 object-contain" />
+            ) : (
+              <Shield className="w-6 h-6 text-primary" />
+            )}
+          </div>
+          <h1 className="text-xl font-semibold text-foreground">Admin Dashboard</h1>
+          <p className="text-sm text-muted-foreground mt-1">Enter your admin password to continue</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-foreground mb-1.5">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground transition-all duration-200 placeholder:text-muted-foreground hover:border-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
+              placeholder="Enter admin password"
+              required
+              autoFocus
+              autoComplete="current-password"
+            />
+          </div>
+
+          {error && (
+            <div className="text-sm text-destructive bg-destructive/10 rounded-md px-3 py-2">
+              {error}
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading || !password}
+            className="w-full h-10 rounded-md bg-primary text-primary-foreground font-medium text-sm hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none transition-all duration-200 shadow-sm"
+          >
+            {loading ? 'Signing in...' : 'Sign in'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

app/admin/logs/page.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+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[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const [actionFilter, setActionFilter] = useState('');
+  const limit = 50;
+
+  const fetchLogs = useCallback(async () => {
+    setLoading(true);
+    const params = new URLSearchParams({ page: String(page), limit: String(limit) });
+    if (actionFilter) params.set('action', actionFilter);
+
+    const res = await apiFetch(`/api/admin/audit?${params}`);
+    if (res.ok) {
+      const data = await res.json();
+      setEntries(data.entries || []);
+      setTotal(data.total || 0);
+    }
+    setLoading(false);
+  }, [page, actionFilter]);
+
+  useEffect(() => { fetchLogs(); }, [fetchLogs]);
+
+  const totalPages = Math.max(1, Math.ceil(total / limit));
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Audit Log</h1>
+          <p className="text-sm text-muted-foreground mt-1">{total} total entries</p>
+        </div>
+        <button
+          onClick={fetchLogs}
+          className="inline-flex items-center gap-2 h-9 px-3 rounded-md border border-input bg-background text-sm text-foreground hover:bg-accent transition-colors"
+        >
+          <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+          Refresh
+        </button>
+      </div>
+
+      {/* Filter */}
+      <div className="flex items-center gap-3">
+        <select
+          value={actionFilter}
+          onChange={(e) => { setActionFilter(e.target.value); setPage(1); }}
+          className="h-8 rounded-md border border-input bg-background px-2.5 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <option value="">All actions</option>
+          <option value="admin.login">Login</option>
+          <option value="admin.logout">Logout</option>
+          <option value="admin.login_failed">Login Failed</option>
+          <option value="admin.login_blocked">Login Blocked</option>
+          <option value="admin.change-password">Password Change</option>
+          <option value="config.update">Config Update</option>
+          <option value="config.revert">Config Revert</option>
+          <option value="policy.update">Policy Update</option>
+        </select>
+      </div>
+
+      {/* Table */}
+      <div className="border border-border rounded-lg overflow-hidden">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-border bg-muted/30">
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Time</th>
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Action</th>
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Details</th>
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">IP</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-border">
+            {loading && entries.length === 0 ? (
+              <tr>
+                <td colSpan={4} className="px-4 py-8 text-center text-muted-foreground">Loading...</td>
+              </tr>
+            ) : entries.length === 0 ? (
+              <tr>
+                <td colSpan={4} className="px-4 py-8 text-center text-muted-foreground">No entries found</td>
+              </tr>
+            ) : (
+              entries.map((entry, i) => (
+                <tr key={i} className="hover:bg-muted/20">
+                  <td className="px-4 py-2 text-xs text-muted-foreground whitespace-nowrap">
+                    {new Date(entry.ts).toLocaleString()}
+                  </td>
+                  <td className="px-4 py-2">
+                    <span className="text-xs font-mono px-2 py-0.5 rounded bg-muted text-muted-foreground">
+                      {entry.action}
+                    </span>
+                  </td>
+                  <td className="px-4 py-2 text-xs text-foreground max-w-xs truncate">
+                    {formatDetail(entry.detail)}
+                  </td>
+                  <td className="px-4 py-2 text-xs text-muted-foreground font-mono">
+                    {entry.ip}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between">
+          <p className="text-xs text-muted-foreground">
+            Page {page} of {totalPages}
+          </p>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setPage(p => Math.max(1, p - 1))}
+              disabled={page === 1}
+              className="h-8 px-3 rounded-md border border-input bg-background text-sm disabled:opacity-50 hover:bg-accent transition-colors"
+            >
+              Previous
+            </button>
+            <button
+              onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+              disabled={page === totalPages}
+              className="h-8 px-3 rounded-md border border-input bg-background text-sm disabled:opacity-50 hover:bg-accent transition-colors"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatDetail(detail: Record<string, unknown>): string {
+  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)) {
+    return detail.changes.map((c: Record<string, unknown>) => `${c.key}`).join(', ');
+  }
+  if (detail.restrictionCount !== undefined) return `${detail.restrictionCount} restriction(s)`;
+  return JSON.stringify(detail).slice(0, 100);
+}

app/admin/marketplace/page.tsx

@@ -0,0 +1,355 @@
+'use client';
+
+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;
+  name: string;
+  type: 'plugin' | 'theme';
+  pluginType: string | null;
+  description: string;
+  permissions: string[];
+  tags: string[];
+  totalDownloads: number;
+  featured: boolean;
+  minAppVersion: string | null;
+  latestVersion: string | null;
+  installed: boolean;
+  author: {
+    displayName: string;
+    githubLogin: string;
+    avatarUrl: string | null;
+  } | null;
+}
+
+interface SearchResult {
+  data: Extension[];
+  meta: {
+    page: number;
+    perPage: number;
+    total: number;
+  };
+}
+
+type TypeFilter = 'all' | 'plugin' | 'theme';
+
+export default function AdminMarketplacePage() {
+  const [extensions, setExtensions] = useState<Extension[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [query, setQuery] = useState('');
+  const [typeFilter, setTypeFilter] = useState<TypeFilter>('all');
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [perPage] = useState(12);
+  const [installing, setInstalling] = useState<string | null>(null);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchExtensions = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const params = new URLSearchParams();
+      if (query) params.set('q', query);
+      if (typeFilter !== 'all') params.set('type', typeFilter);
+      params.set('page', String(page));
+      params.set('perPage', String(perPage));
+      params.set('sort', 'newest');
+
+      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');
+        setExtensions([]);
+        return;
+      }
+
+      const data: SearchResult = await res.json();
+      setExtensions(data.data || []);
+      setTotal(data.meta?.total || 0);
+    } catch {
+      setError('Failed to connect to extension directory. Make sure it is running.');
+      setExtensions([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [query, typeFilter, page, perPage]);
+
+  useEffect(() => {
+    fetchExtensions();
+  }, [fetchExtensions]);
+
+  // Debounced search
+  const [searchInput, setSearchInput] = useState('');
+  useEffect(() => {
+    const t = setTimeout(() => {
+      setQuery(searchInput);
+      setPage(1);
+    }, 300);
+    return () => clearTimeout(t);
+  }, [searchInput]);
+
+  async function handleInstall(ext: Extension) {
+    setInstalling(ext.slug);
+    setMessage(null);
+
+    try {
+      const res = await apiFetch('/api/admin/marketplace', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          slug: ext.slug,
+          version: ext.latestVersion || '1.0.0',
+          type: ext.type,
+        }),
+      });
+
+      const data = await res.json();
+
+      if (res.ok) {
+        const warnings = data.warnings?.length ? ` (${data.warnings.length} warning(s))` : '';
+        setMessage({ type: 'success', text: `"${ext.name}" installed successfully${warnings}` });
+        // Mark as installed in the UI
+        setExtensions(prev => prev.map(e => e.slug === ext.slug ? { ...e, installed: true } : e));
+      } else {
+        setMessage({ type: 'error', text: data.error || 'Installation failed' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Installation failed - network error' });
+    } finally {
+      setInstalling(null);
+    }
+  }
+
+  const totalPages = Math.ceil(total / perPage);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold text-foreground">Marketplace</h1>
+        <p className="text-sm text-muted-foreground mt-1">
+          Browse and install plugins and themes from the BulwarkMail extension directory
+        </p>
+      </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>
+      )}
+
+      {/* Search & Filters */}
+      <div className="flex items-center gap-3">
+        <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="Search extensions..."
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            className="w-full h-9 pl-9 pr-3 rounded-md border border-input bg-background text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 focus:border-ring"
+          />
+        </div>
+        <div className="flex items-center gap-1 rounded-md border border-input bg-background p-0.5">
+          {(['all', 'plugin', 'theme'] as const).map((t) => (
+            <button
+              key={t}
+              onClick={() => { setTypeFilter(t); setPage(1); }}
+              className={`h-8 px-3 rounded text-sm font-medium transition-colors ${
+                typeFilter === t
+                  ? 'bg-accent text-accent-foreground'
+                  : 'text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              {t === 'all' ? 'All' : t === 'plugin' ? 'Plugins' : 'Themes'}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Error State */}
+      {error && (
+        <div className="border border-border rounded-lg p-12 text-center">
+          <Store className="w-10 h-10 text-muted-foreground/40 mx-auto mb-3" />
+          <p className="text-sm text-muted-foreground">{error}</p>
+          <p className="text-xs text-muted-foreground mt-1">
+            Start the extension directory server on the configured port
+          </p>
+          <button
+            onClick={fetchExtensions}
+            className="mt-4 inline-flex items-center gap-2 h-8 px-3 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90"
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
+      {/* Loading State */}
+      {loading && !error && (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+          <span className="ml-2 text-sm text-muted-foreground">Searching extensions...</span>
+        </div>
+      )}
+
+      {/* Empty State */}
+      {!loading && !error && extensions.length === 0 && (
+        <div className="border border-border rounded-lg p-12 text-center">
+          <Store className="w-10 h-10 text-muted-foreground/40 mx-auto mb-3" />
+          <p className="text-sm text-muted-foreground">No extensions found</p>
+          {query && (
+            <p className="text-xs text-muted-foreground mt-1">
+              Try a different search term
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Extension Grid */}
+      {!loading && !error && extensions.length > 0 && (
+        <>
+          <div className="text-xs text-muted-foreground">
+            {total} extension{total !== 1 ? 's' : ''} found
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {extensions.map((ext) => (
+              <ExtensionCard
+                key={ext.slug}
+                extension={ext}
+                installing={installing === ext.slug}
+                onInstall={() => handleInstall(ext)}
+              />
+            ))}
+          </div>
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="flex items-center justify-center gap-2 pt-2">
+              <button
+                onClick={() => setPage(p => Math.max(1, p - 1))}
+                disabled={page <= 1}
+                className="h-8 px-3 rounded-md border border-border text-sm text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Previous
+              </button>
+              <span className="text-sm text-muted-foreground">
+                Page {page} of {totalPages}
+              </span>
+              <button
+                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                disabled={page >= totalPages}
+                className="h-8 px-3 rounded-md border border-border text-sm text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Next
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function ExtensionCard({
+  extension,
+  installing,
+  onInstall,
+}: {
+  extension: Extension;
+  installing: boolean;
+  onInstall: () => void;
+}) {
+  const isPlugin = extension.type === 'plugin';
+
+  return (
+    <div className="border border-border rounded-lg overflow-hidden hover:border-ring/30 transition-colors">
+      <div className="p-4">
+        {/* Header */}
+        <div className="flex items-start gap-3">
+          <div className="w-10 h-10 rounded-md bg-muted flex items-center justify-center shrink-0">
+            {isPlugin ? (
+              <Puzzle className="w-5 h-5 text-muted-foreground" />
+            ) : (
+              <SwatchBook className="w-5 h-5 text-muted-foreground" />
+            )}
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-1.5">
+              <span className="text-sm font-medium text-foreground truncate">{extension.name}</span>
+              {extension.featured && (
+                <Star className="w-3.5 h-3.5 text-warning shrink-0 fill-warning" />
+              )}
+            </div>
+            <div className="flex items-center gap-1.5 mt-0.5">
+              <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${
+                isPlugin
+                  ? 'bg-blue-100 text-blue-700 dark:bg-blue-950/30 dark:text-blue-400'
+                  : 'bg-purple-100 text-purple-700 dark:bg-purple-950/30 dark:text-purple-400'
+              }`}>
+                {isPlugin ? (extension.pluginType || 'plugin') : 'theme'}
+              </span>
+              {extension.author && (
+                <span className="text-xs text-muted-foreground truncate">
+                  by {extension.author.displayName}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Description */}
+        <p className="text-xs text-muted-foreground mt-3 line-clamp-2">
+          {extension.description}
+        </p>
+
+        {/* Tags */}
+        {extension.tags && extension.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1 mt-3">
+            {extension.tags.slice(0, 3).map(tag => (
+              <span key={tag} className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Footer */}
+        <div className="flex items-center justify-between mt-4 pt-3 border-t border-border">
+          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+            <span className="flex items-center gap-1">
+              <Download className="w-3 h-3" />
+              {extension.totalDownloads.toLocaleString()}
+            </span>
+            {extension.permissions && extension.permissions.length > 0 && (
+              <span title={extension.permissions.join(', ')}>
+                {extension.permissions.length} permission{extension.permissions.length !== 1 ? 's' : ''}
+              </span>
+            )}
+          </div>
+
+          {extension.installed ? (
+            <span className="inline-flex items-center gap-1 h-7 px-2.5 rounded-md bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400 text-xs font-medium">
+              <Check className="w-3 h-3" />
+              Installed
+            </span>
+          ) : (
+            <button
+              onClick={onInstall}
+              disabled={installing}
+              className="inline-flex items-center gap-1.5 h-7 px-3 rounded-md bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
+            >
+              {installing ? (
+                <Loader2 className="w-3 h-3 animate-spin" />
+              ) : (
+                <Download className="w-3 h-3" />
+              )}
+              Install
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

app/admin/page.tsx

@@ -0,0 +1,212 @@
+'use client';
+
+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;
+  authenticated: boolean;
+  lastLogin: string | null;
+  passwordChangedAt: string | null;
+}
+
+interface ConfigData {
+  appName?: string;
+  jmapServerUrl?: string;
+  settingsSyncEnabled?: boolean;
+  stalwartFeaturesEnabled?: boolean;
+  oauthEnabled?: boolean;
+  devMode?: boolean;
+}
+
+export default function AdminDashboardPage() {
+  const [status, setStatus] = useState<AdminStatus | null>(null);
+  const [recentActivity, setRecentActivity] = useState<AuditEntry[]>([]);
+  const [config, setConfig] = useState<ConfigData | null>(null);
+  const [, setConfigSources] = useState<Record<string, { value: unknown; source: string }> | null>(null);
+  const [warnings, setWarnings] = useState<string[]>([]);
+  const [pluginCount, setPluginCount] = useState(0);
+  const [themeCount, setThemeCount] = useState(0);
+  const [policyRuleCount, setPolicyRuleCount] = useState(0);
+  const [jmapHealth, setJmapHealth] = useState<'unknown' | 'ok' | 'error'>('unknown');
+
+  useEffect(() => {
+    fetchDashboardData();
+  }, []);
+
+  async function fetchDashboardData() {
+    const [statusRes, auditRes, configRes, adminConfigRes, pluginRes, themeRes, policyRes] = await Promise.all([
+      apiFetch('/api/admin/auth'),
+      apiFetch('/api/admin/audit?limit=10'),
+      apiFetch('/api/config'),
+      apiFetch('/api/admin/config'),
+      apiFetch('/api/admin/plugins').catch(() => null),
+      apiFetch('/api/admin/themes').catch(() => null),
+      apiFetch('/api/admin/policy').catch(() => null),
+    ]);
+
+    if (statusRes.ok) setStatus(await statusRes.json());
+    if (auditRes.ok) {
+      const data = await auditRes.json();
+      setRecentActivity(data.entries || []);
+    }
+    let configData: ConfigData | null = null;
+    if (configRes.ok) {
+      configData = await configRes.json();
+      setConfig(configData);
+    }
+
+    if (pluginRes?.ok) {
+      const plugins = await pluginRes.json();
+      setPluginCount(Array.isArray(plugins) ? plugins.length : 0);
+    }
+    if (themeRes?.ok) {
+      const themes = await themeRes.json();
+      setThemeCount(Array.isArray(themes) ? themes.length : 0);
+    }
+    if (policyRes?.ok) {
+      const policy = await policyRes.json();
+      const restrictionCount = policy.restrictions ? Object.keys(policy.restrictions).length : 0;
+      const disabledGates = policy.features ? Object.values(policy.features).filter((v: unknown) => !v).length : 0;
+      setPolicyRuleCount(restrictionCount + disabledGates);
+    }
+
+    if (configData?.jmapServerUrl) {
+      try {
+        const jmapRes = await apiFetch('/api/config');
+        setJmapHealth(jmapRes.ok ? 'ok' : 'error');
+      } catch {
+        setJmapHealth('error');
+      }
+    }
+
+    const w: string[] = [];
+    if (adminConfigRes.ok) {
+      const sources = await adminConfigRes.json();
+      setConfigSources(sources);
+      const sessionSecret = sources?.sessionSecret;
+      if (!sessionSecret?.value || sessionSecret.value === 'your-secret-key-here') {
+        w.push('SESSION_SECRET is not set or using a default value. Sessions are insecure.');
+      }
+      const adminPassword = sources?.adminPassword;
+      if (adminPassword?.value && adminPassword.source === 'env') {
+        w.push('ADMIN_PASSWORD is still set in environment variables. Remove it now that the hash is stored securely.');
+      }
+    }
+    setWarnings(w);
+  }
+
+  const jmapUrl = config?.jmapServerUrl || '-';
+  const jmapHostname = jmapUrl !== '-' ? (() => { try { return new URL(jmapUrl).hostname; } catch { return jmapUrl; } })() : '-';
+
+  return (
+    <div className="max-w-3xl space-y-8">
+      {/* Warnings */}
+      {warnings.map((msg, i) => (
+        <div key={i} className="flex items-start gap-3 rounded-lg border border-warning/20 bg-warning/10 p-4">
+          <AlertTriangle className="w-5 h-5 text-warning mt-0.5 shrink-0" />
+          <p className="text-sm text-warning">{msg}</p>
+        </div>
+      ))}
+
+      {status && !status.lastLogin && (
+        <div className="flex items-start gap-3 rounded-lg border border-warning/20 bg-warning/10 p-4">
+          <AlertTriangle className="w-5 h-5 text-warning mt-0.5 shrink-0" />
+          <div>
+            <p className="text-sm font-medium text-warning">First login detected</p>
+            <p className="text-sm text-warning/80 mt-0.5">
+              Remember to remove ADMIN_PASSWORD from your .env file now that the hash is stored securely.
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Server Info */}
+      <SettingsSection title="Server" description="Application and connection details">
+        <SettingItem label="Application">
+          <span className="text-sm text-foreground">{config?.appName || '-'}</span>
+        </SettingItem>
+        <SettingItem label="JMAP Server" description={jmapUrl !== '-' ? jmapUrl : undefined}>
+          <span className="text-sm text-foreground">{jmapHostname}</span>
+        </SettingItem>
+        <SettingItem label="JMAP Connection">
+          <span className={`inline-flex items-center gap-1.5 text-sm font-medium ${
+            jmapHealth === 'ok' ? 'text-green-600 dark:text-green-400' : jmapHealth === 'error' ? 'text-red-600 dark:text-red-400' : 'text-muted-foreground'
+          }`}>
+            <span className={`w-2 h-2 rounded-full ${
+              jmapHealth === 'ok' ? 'bg-green-500' : jmapHealth === 'error' ? 'bg-red-500' : 'bg-muted-foreground/40'
+            }`} />
+            {jmapHealth === 'ok' ? 'Connected' : jmapHealth === 'error' ? 'Error' : 'Unknown'}
+          </span>
+        </SettingItem>
+        <SettingItem label="Last Login">
+          <span className="text-sm text-foreground">
+            {status?.lastLogin ? new Date(status.lastLogin).toLocaleString() : 'Never'}
+          </span>
+        </SettingItem>
+      </SettingsSection>
+
+      {/* Features */}
+      <SettingsSection title="Features" description="Enabled integrations and modules">
+        <SettingItem label="Admin Panel" description="Administrative access to server configuration">
+          <ToggleSwitch checked={!!status?.enabled} onChange={() => {}} disabled />
+        </SettingItem>
+        <SettingItem label="Settings Sync" description="Synchronize user settings across devices">
+          <ToggleSwitch checked={!!config?.settingsSyncEnabled} onChange={() => {}} disabled />
+        </SettingItem>
+        <SettingItem label="OAuth" description="OAuth authentication provider">
+          <ToggleSwitch checked={!!config?.oauthEnabled} onChange={() => {}} disabled />
+        </SettingItem>
+        <SettingItem label="Stalwart Integration" description="Stalwart mail server features">
+          <ToggleSwitch checked={config?.stalwartFeaturesEnabled !== false} onChange={() => {}} disabled />
+        </SettingItem>
+      </SettingsSection>
+
+      {/* Extensions */}
+      <SettingsSection title="Extensions" description="Installed plugins, themes, and policy rules">
+        <SettingItem label="Plugins">
+          <span className="text-sm text-foreground">{pluginCount}</span>
+        </SettingItem>
+        <SettingItem label="Themes">
+          <span className="text-sm text-foreground">{themeCount}</span>
+        </SettingItem>
+        <SettingItem label="Policy Rules">
+          <span className="text-sm text-foreground">{policyRuleCount}</span>
+        </SettingItem>
+      </SettingsSection>
+
+      {/* Recent Activity */}
+      <SettingsSection title="Recent Activity" description="Latest administrative actions">
+        {recentActivity.length === 0 ? (
+          <div className="py-4 text-sm text-muted-foreground">
+            No activity recorded yet
+          </div>
+        ) : (
+          recentActivity.map((entry, i) => (
+            <SettingItem
+              key={i}
+              label={entry.action}
+              description={formatDetail(entry.detail) || undefined}
+            >
+              <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                <span>{entry.ip}</span>
+                <span>{new Date(entry.ts).toLocaleString()}</span>
+              </div>
+            </SettingItem>
+          ))
+        )}
+      </SettingsSection>
+    </div>
+  );
+}
+
+function formatDetail(detail: Record<string, unknown>): string {
+  if (!detail || Object.keys(detail).length === 0) return '';
+  if (detail.key) return `${detail.key}: ${detail.old} → ${detail.new}`;
+  if (detail.reason) return String(detail.reason);
+  if (detail.changes && Array.isArray(detail.changes)) return `${detail.changes.length} setting(s) changed`;
+  return JSON.stringify(detail).slice(0, 80);
+}

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

@@ -0,0 +1,458 @@
+'use client';
+
+import { useEffect, useState, useRef } from '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;
+  name: string;
+  version: string;
+  author: string;
+  description: string;
+  type: string;
+  enabled: boolean;
+  forceEnabled?: boolean;
+  permissions: string[];
+  installedAt: string;
+  updatedAt: string;
+}
+
+export default function AdminPluginsPage() {
+  const [plugins, setPlugins] = useState<PluginEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [uploading, setUploading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [policy, setPolicy] = useState<SettingsPolicy>({ ...DEFAULT_POLICY });
+  const [policyDirty, setPolicyDirty] = useState(false);
+  const [savingPolicy, setSavingPolicy] = useState(false);
+
+  useEffect(() => { fetchPlugins(); fetchPolicy(); }, []);
+
+  async function fetchPolicy() {
+    try {
+      const res = await apiFetch('/api/admin/policy');
+      if (res.ok) {
+        const data = await res.json();
+        setPolicy(data);
+      }
+    } catch { /* ignore */ }
+  }
+
+  function togglePluginsEnabled() {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, pluginsEnabled: !prev.features.pluginsEnabled },
+    }));
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  function togglePluginsUploadEnabled() {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, pluginsUploadEnabled: !prev.features.pluginsUploadEnabled },
+    }));
+    setPolicyDirty(true);
+    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 apiFetch('/api/admin/policy', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(policy),
+      });
+      if (res.ok) {
+        setMessage({ type: 'success', text: 'Plugin policy saved. Users will see changes on next login.' });
+        setPolicyDirty(false);
+      } else {
+        const data = await res.json();
+        setMessage({ type: 'error', text: data.error || 'Failed to save policy' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to save policy' });
+    } finally {
+      setSavingPolicy(false);
+    }
+  }
+
+  async function fetchPlugins() {
+    setLoading(true);
+    try {
+      const res = await apiFetch('/api/admin/plugins');
+      if (res.ok) setPlugins(await res.json());
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setUploading(true);
+    setMessage(null);
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const res = await apiFetch('/api/admin/plugins', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const data = await res.json();
+      if (res.ok) {
+        const warnings = data.warnings?.length ? ` (${data.warnings.length} warning(s))` : '';
+        setMessage({ type: 'success', text: `Plugin "${data.plugin.name}" installed${warnings}` });
+        await fetchPlugins();
+      } else {
+        setMessage({ type: 'error', text: data.error || 'Upload failed' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Upload failed' });
+    } finally {
+      setUploading(false);
+      if (fileInputRef.current) fileInputRef.current.value = '';
+    }
+  }
+
+  async function togglePlugin(id: string, enabled: boolean) {
+    setMessage(null);
+    const res = await apiFetch('/api/admin/plugins', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, enabled }),
+    });
+
+    if (res.ok) {
+      setPlugins(prev => prev.map(p => p.id === id ? { ...p, enabled } : p));
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Update failed' });
+    }
+  }
+
+  async function toggleForceEnabled(id: string, forceEnabled: boolean) {
+    setMessage(null);
+    // If force-enabling, also ensure the plugin is enabled
+    const body: Record<string, unknown> = { id, forceEnabled };
+    if (forceEnabled) body.enabled = true;
+
+    const res = await apiFetch('/api/admin/plugins', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+
+    if (res.ok) {
+      setPlugins(prev => prev.map(p => p.id === id ? { ...p, forceEnabled, ...(forceEnabled ? { enabled: true } : {}) } : p));
+      // Also update policy
+      setPolicy(prev => {
+        const current = prev.forceEnabledPlugins || [];
+        return {
+          ...prev,
+          forceEnabledPlugins: forceEnabled
+            ? [...current.filter(pid => pid !== id), id]
+            : current.filter(pid => pid !== id),
+        };
+      });
+      setPolicyDirty(true);
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Update failed' });
+    }
+  }
+
+  async function forceEnableAll() {
+    setMessage(null);
+    const disabled = plugins.filter(p => !p.enabled);
+    if (disabled.length === 0) {
+      setMessage({ type: 'success', text: 'All plugins are already enabled' });
+      return;
+    }
+    let failed = 0;
+    for (const p of disabled) {
+      const res = await apiFetch('/api/admin/plugins', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: p.id, enabled: true }),
+      });
+      if (!res.ok) failed++;
+    }
+    setPlugins(prev => prev.map(p => failed === 0 ? { ...p, enabled: true } : p));
+    if (failed === 0) {
+      await fetchPlugins();
+      setMessage({ type: 'success', text: `All ${disabled.length} plugin(s) enabled` });
+    } else {
+      await fetchPlugins();
+      setMessage({ type: 'error', text: `${failed} plugin(s) failed to enable` });
+    }
+  }
+
+  async function forceDisableAll() {
+    setMessage(null);
+    const enabled = plugins.filter(p => p.enabled);
+    if (enabled.length === 0) {
+      setMessage({ type: 'success', text: 'All plugins are already disabled' });
+      return;
+    }
+    let failed = 0;
+    for (const p of enabled) {
+      const res = await apiFetch('/api/admin/plugins', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: p.id, enabled: false }),
+      });
+      if (!res.ok) failed++;
+    }
+    if (failed === 0) {
+      await fetchPlugins();
+      setMessage({ type: 'success', text: `All ${enabled.length} plugin(s) disabled` });
+    } else {
+      await fetchPlugins();
+      setMessage({ type: 'error', text: `${failed} plugin(s) failed to disable` });
+    }
+  }
+
+  async function deletePlugin(id: string, name: string) {
+    if (!confirm(`Remove plugin "${name}"? This cannot be undone.`)) return;
+
+    setMessage(null);
+    const res = await apiFetch('/api/admin/plugins', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id }),
+    });
+
+    if (res.ok) {
+      setPlugins(prev => prev.filter(p => p.id !== id));
+      setMessage({ type: 'success', text: `Plugin "${name}" removed` });
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Delete failed' });
+    }
+  }
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  const pluginsEnabled = policy.features.pluginsEnabled ?? true;
+  const pluginsUploadEnabled = policy.features.pluginsUploadEnabled ?? true;
+  const requirePluginApproval = policy.features.requirePluginApproval ?? true;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Plugins</h1>
+          <p className="text-sm text-muted-foreground mt-1">Manage plugins and plugin policy for all users</p>
+        </div>
+        <div className="flex items-center gap-2">
+          {policyDirty && (
+            <button
+              onClick={handleSavePolicy}
+              disabled={savingPolicy}
+              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"
+            >
+              {savingPolicy ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              Save Policy
+            </button>
+          )}
+          <label 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 cursor-pointer transition-all shadow-sm">
+            {uploading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Upload className="w-4 h-4" />}
+            Upload Plugin
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".zip"
+              onChange={handleUpload}
+              disabled={uploading}
+              className="sr-only"
+            />
+          </label>
+        </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>
+      )}
+
+      {/* Plugin Policy */}
+      <div className="border border-border rounded-lg">
+        <div className="px-4 py-3 border-b border-border bg-muted/30">
+          <div className="flex items-center gap-2">
+            <Shield className="w-4 h-4 text-muted-foreground" />
+            <h2 className="text-sm font-medium text-foreground">Plugin Policy</h2>
+          </div>
+          <p className="text-xs text-muted-foreground mt-0.5">Control plugin availability for users</p>
+        </div>
+        <div className="divide-y divide-border">
+          <div className="px-4 py-3 flex items-center justify-between gap-4">
+            <div>
+              <span className="text-sm text-foreground">Plugins Enabled</span>
+              <p className="text-xs text-muted-foreground mt-0.5">Allow the plugin system to load and run plugins for users</p>
+            </div>
+            <button onClick={togglePluginsEnabled}
+              className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${pluginsEnabled ? '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 ${pluginsEnabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+            </button>
+          </div>
+
+          <div className="px-4 py-3 flex items-center justify-between gap-4">
+            <div>
+              <span className="text-sm text-foreground">User Plugin Uploads</span>
+              <p className="text-xs text-muted-foreground mt-0.5">Allow users to upload plugin ZIP files in Settings</p>
+            </div>
+            <button onClick={togglePluginsUploadEnabled}
+              className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${pluginsUploadEnabled ? '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 ${pluginsUploadEnabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+            </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">
+              <div>
+                <span className="text-sm text-foreground">Force Enable / Disable All</span>
+                <p className="text-xs text-muted-foreground mt-0.5">Bulk toggle all deployed plugins at once</p>
+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={forceEnableAll}
+                  className="inline-flex items-center gap-1.5 h-7 px-3 rounded-md bg-emerald-600 text-white text-xs font-medium hover:bg-emerald-700 transition-colors"
+                >
+                  <Power className="w-3.5 h-3.5" />
+                  Enable All
+                </button>
+                <button
+                  onClick={forceDisableAll}
+                  className="inline-flex items-center gap-1.5 h-7 px-3 rounded-md bg-muted text-muted-foreground text-xs font-medium hover:bg-accent hover:text-foreground transition-colors"
+                >
+                  <PowerOff className="w-3.5 h-3.5" />
+                  Disable All
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Deployed Plugins */}
+      <div className="border border-border rounded-lg">
+        <div className="px-4 py-3 border-b border-border bg-muted/30">
+          <div className="flex items-center gap-2">
+            <Package className="w-4 h-4 text-muted-foreground" />
+            <h2 className="text-sm font-medium text-foreground">Deployed Plugins</h2>
+          </div>
+          <p className="text-xs text-muted-foreground mt-0.5">Admin-uploaded plugins for all users</p>
+        </div>
+        {plugins.length === 0 ? (
+          <div className="p-12 text-center">
+            <Package className="w-10 h-10 text-muted-foreground/40 mx-auto mb-3" />
+            <p className="text-sm text-muted-foreground">No plugins installed</p>
+            <p className="text-xs text-muted-foreground mt-1">Upload a plugin ZIP file to get started</p>
+          </div>
+        ) : (
+          <div className="divide-y divide-border">
+            {plugins.map(plugin => (
+              <div key={plugin.id} className="px-4 py-4 flex items-center justify-between gap-4">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-foreground">{plugin.name}</span>
+                    <span className="text-xs text-muted-foreground">v{plugin.version}</span>
+                    <span className={`text-xs px-1.5 py-0.5 rounded ${plugin.enabled ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400' : 'bg-muted text-muted-foreground'}`}>
+                      {plugin.enabled ? 'Enabled' : 'Disabled'}
+                    </span>
+                    {plugin.forceEnabled && (
+                      <span className="text-xs px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400 flex items-center gap-1">
+                        <Lock className="w-3 h-3" /> Forced
+                      </span>
+                    )}
+                  </div>
+                {plugin.description && (
+                  <p className="text-xs text-muted-foreground mt-0.5 truncate">{plugin.description}</p>
+                )}
+                <div className="text-xs text-muted-foreground mt-1">
+                  by {plugin.author} &middot; {plugin.type} &middot; installed {new Date(plugin.installedAt).toLocaleDateString()}
+                </div>
+                {plugin.permissions.length > 0 && (
+                  <div className="flex items-center gap-1 mt-1">
+                    <AlertTriangle className="w-3 h-3 text-warning" />
+                    <span className="text-xs text-warning">
+                      Permissions: {plugin.permissions.join(', ')}
+                    </span>
+                  </div>
+                )}
+              </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)'}
+                  className={`p-2 rounded-md transition-colors ${plugin.forceEnabled ? 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-950/30 dark:text-amber-400 dark:hover:bg-amber-950/50' : 'hover:bg-accent text-muted-foreground hover:text-foreground'}`}
+                >
+                  {plugin.forceEnabled ? <Lock className="w-4 h-4" /> : <LockOpen className="w-4 h-4" />}
+                </button>
+                <button
+                  onClick={() => togglePlugin(plugin.id, !plugin.enabled)}
+                  title={plugin.enabled ? 'Disable' : 'Enable'}
+                  className="p-2 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <Power className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={() => deletePlugin(plugin.id, plugin.name)}
+                  title="Remove"
+                  className="p-2 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

app/admin/policy/page.tsx

@@ -0,0 +1,219 @@
+'use client';
+
+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'];
+
+const FEATURE_GATE_LABELS: Partial<Record<keyof FeatureGates, { label: string; description: string }>> = {
+  sidebarAppsEnabled: { label: 'Sidebar Apps', description: 'Allow custom web apps in navigation rail' },
+  settingsExportEnabled: { label: 'Settings Export/Import', description: 'Allow users to export and import settings JSON' },
+  customKeywordsEnabled: { label: 'Custom Keywords', description: 'Allow user-created labels and tags' },
+  templatesEnabled: { label: 'Email Templates', description: 'Allow email template creation and library' },
+  calendarTasksEnabled: { label: 'Calendar Tasks', description: 'Show task panel in calendar view' },
+  smimeEnabled: { label: 'S/MIME', description: 'Enable certificate management and email signing' },
+  externalContentEnabled: { label: 'External Content', description: 'Allow users to choose external content loading policy' },
+  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 = [
+  { key: 'fontSize', label: 'Font Size', category: 'Appearance', type: 'enum', allowedValues: ['small', 'medium', 'large'] },
+  { key: 'density', label: 'Density', category: 'Appearance', type: 'enum', allowedValues: ['compact', 'regular', 'spacious'] },
+  { key: 'animationsEnabled', label: 'Animations', category: 'Appearance', type: 'boolean' },
+  { 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' },
+  { key: 'calendarNotificationsEnabled', label: 'Calendar Notifications', category: 'Notifications', type: 'boolean' },
+  { key: 'debugMode', label: 'Debug Mode', category: 'Advanced', type: 'boolean' },
+];
+
+export default function AdminPolicyPage() {
+  const [policy, setPolicy] = useState<SettingsPolicy>({ ...DEFAULT_POLICY });
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [dirty, setDirty] = useState(false);
+
+  useEffect(() => { fetchPolicy(); }, []);
+
+  async function fetchPolicy() {
+    setLoading(true);
+    try {
+      const res = await apiFetch('/api/admin/policy');
+      if (res.ok) {
+        const data = await res.json();
+        setPolicy(data);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function toggleFeature(key: keyof FeatureGates) {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, [key]: !prev.features[key] },
+    }));
+    setDirty(true);
+    setMessage(null);
+  }
+
+  function toggleLocked(settingKey: string) {
+    setPolicy(prev => {
+      const existing = prev.restrictions[settingKey] || {};
+      const newRestrictions = { ...prev.restrictions };
+      if (existing.locked) {
+        delete newRestrictions[settingKey];
+      } else {
+        newRestrictions[settingKey] = { ...existing, locked: true };
+      }
+      return { ...prev, restrictions: newRestrictions };
+    });
+    setDirty(true);
+    setMessage(null);
+  }
+
+  function toggleHidden(settingKey: string) {
+    setPolicy(prev => {
+      const existing = prev.restrictions[settingKey] || {};
+      const newRestrictions = { ...prev.restrictions };
+      newRestrictions[settingKey] = { ...existing, hidden: !existing.hidden };
+      if (!newRestrictions[settingKey].hidden && !newRestrictions[settingKey].locked) {
+        delete newRestrictions[settingKey];
+      }
+      return { ...prev, restrictions: newRestrictions };
+    });
+    setDirty(true);
+    setMessage(null);
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    setMessage(null);
+
+    const res = await apiFetch('/api/admin/policy', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(policy),
+    });
+
+    if (res.ok) {
+      setMessage({ type: 'success', text: 'Policy saved. Users will see changes on next login.' });
+      setDirty(false);
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Failed to save' });
+    }
+    setSaving(false);
+  }
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  const categories = [...new Set(RESTRICTABLE_SETTINGS.map(s => s.category))];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">User Policy</h1>
+          <p className="text-sm text-muted-foreground mt-1">Control which features and settings users can access</p>
+        </div>
+        {dirty && (
+          <button
+            onClick={handleSave}
+            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" /> : <Save className="w-4 h-4" />}
+            Save policy
+          </button>
+        )}
+      </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>
+      )}
+
+      {/* Feature Gates */}
+      <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">Feature Gates</h2>
+          <p className="text-xs text-muted-foreground mt-0.5">Toggle entire features on or off for all users. Plugin and theme gates are on their respective admin pages.</p>
+        </div>
+        <div className="divide-y divide-border">
+          {(Object.keys(DEFAULT_FEATURE_GATES) as (keyof FeatureGates)[])
+            .filter(key => !EXCLUDED_FEATURE_GATES.includes(key))
+            .map(key => {
+            const meta = FEATURE_GATE_LABELS[key];
+            if (!meta) return null;
+            const { label, description } = meta;
+            const enabled = policy.features[key];
+            return (
+              <div key={key} className="px-4 py-3 flex items-center justify-between gap-4">
+                <div>
+                  <span className="text-sm text-foreground">{label}</span>
+                  <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
+                </div>
+                <button onClick={() => toggleFeature(key)}
+                  className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${enabled ? '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 ${enabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Setting Restrictions */}
+      {categories.map(category => (
+        <div key={category} 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">{category}</h2>
+          </div>
+          <div className="divide-y divide-border">
+            {RESTRICTABLE_SETTINGS.filter(s => s.category === category).map(setting => {
+              const restriction = policy.restrictions[setting.key] || {};
+              return (
+                <div key={setting.key} className="px-4 py-3 flex items-center justify-between gap-4">
+                  <span className="text-sm text-foreground">{setting.label}</span>
+                  <div className="flex items-center gap-3">
+                    <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer">
+                      <input type="checkbox" checked={!!restriction.locked} onChange={() => toggleLocked(setting.key)}
+                        className="rounded border-input" />
+                      <Lock className="w-3 h-3" /> Lock
+                    </label>
+                    <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer">
+                      <input type="checkbox" checked={!!restriction.hidden} onChange={() => toggleHidden(setting.key)}
+                        className="rounded border-input" />
+                      Hide
+                    </label>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

app/admin/settings/page.tsx

@@ -0,0 +1,249 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Save, RotateCcw, Loader2 } from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
+
+interface ConfigEntry {
+  value: unknown;
+  source: 'admin' | 'env' | 'default';
+}
+
+export default function AdminSettingsPage() {
+  const [config, setConfig] = useState<Record<string, ConfigEntry>>({});
+  const [edits, setEdits] = useState<Record<string, unknown>>({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  useEffect(() => {
+    fetchConfig();
+  }, []);
+
+  async function fetchConfig() {
+    setLoading(true);
+    const res = await apiFetch('/api/admin/config');
+    if (res.ok) {
+      setConfig(await res.json());
+    }
+    setLoading(false);
+  }
+
+  function handleChange(key: string, value: unknown) {
+    setEdits(prev => ({ ...prev, [key]: value }));
+    setMessage(null);
+  }
+
+  function currentValue(key: string): unknown {
+    if (key in edits) return edits[key];
+    return config[key]?.value;
+  }
+
+  async function handleSave() {
+    if (Object.keys(edits).length === 0) return;
+    setSaving(true);
+    setMessage(null);
+
+    const res = await apiFetch('/api/admin/config', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(edits),
+    });
+
+    if (res.ok) {
+      setMessage({ type: 'success', text: 'Settings saved. Changes take effect on next page load.' });
+      setEdits({});
+      await fetchConfig();
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Failed to save' });
+    }
+    setSaving(false);
+  }
+
+  async function handleRevert(key: string) {
+    const res = await apiFetch('/api/admin/config', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key }),
+    });
+    if (res.ok) {
+      setEdits(prev => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+      await fetchConfig();
+      setMessage({ type: 'success', text: `${key} reverted to default` });
+    }
+  }
+
+  const hasEdits = Object.keys(edits).length > 0;
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Server Settings</h1>
+          <p className="text-sm text-muted-foreground mt-1">General server configuration</p>
+        </div>
+        {hasEdits && (
+          <button
+            onClick={handleSave}
+            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" /> : <Save className="w-4 h-4" />}
+            Save changes
+          </button>
+        )}
+      </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>
+      )}
+
+      {/* General */}
+      <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>
+
+      {/* Logging */}
+      <SettingsSection title="Logging">
+        <SelectSetting label="Log Format" configKey="logFormat" value={currentValue('logFormat') as string} source={config.logFormat?.source} options={['text', 'json']} onChange={handleChange} onRevert={handleRevert} />
+        <SelectSetting label="Log Level" configKey="logLevel" value={currentValue('logLevel') as string} source={config.logLevel?.source} options={['error', 'warn', 'info', 'debug']} onChange={handleChange} onRevert={handleRevert} />
+      </SettingsSection>
+
+      {/* Settings Sync */}
+      <SettingsSection title="Settings Sync">
+        <ToggleSetting label="Settings Sync Enabled" description="Requires SESSION_SECRET to be set" configKey="settingsSyncEnabled" value={currentValue('settingsSyncEnabled') as boolean} source={config.settingsSyncEnabled?.source} onChange={handleChange} onRevert={handleRevert} />
+      </SettingsSection>
+    </div>
+  );
+}
+
+function SettingsSection({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <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">{title}</h2>
+      </div>
+      <div className="divide-y divide-border">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function SourceBadge({ source }: { source?: string }) {
+  if (!source || source === 'default') return null;
+  return (
+    <span className={`text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded ${source === 'admin' ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}`}>
+      {source}
+    </span>
+  );
+}
+
+function TextSetting({ label, configKey, value, source, onChange, onRevert, placeholder }: {
+  label: string; configKey: string; value: string; source?: string;
+  onChange: (key: string, value: unknown) => void; onRevert: (key: string) => void; placeholder?: string;
+}) {
+  return (
+    <div className="px-4 py-3 flex items-center justify-between gap-4">
+      <div className="flex items-center gap-2 min-w-0">
+        <label className="text-sm text-foreground whitespace-nowrap">{label}</label>
+        <SourceBadge source={source} />
+      </div>
+      <div className="flex items-center gap-2">
+        <input
+          type="text"
+          value={value ?? ''}
+          onChange={(e) => onChange(configKey, e.target.value)}
+          placeholder={placeholder}
+          className="h-8 w-64 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"
+        />
+        {source === 'admin' && (
+          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert to default">
+            <RotateCcw className="w-3.5 h-3.5" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ToggleSetting({ label, description, configKey, value, source, onChange, onRevert }: {
+  label: string; description?: string; configKey: string; value: boolean; source?: string;
+  onChange: (key: string, value: unknown) => void; onRevert: (key: string) => void;
+}) {
+  return (
+    <div className="px-4 py-3 flex items-center justify-between gap-4">
+      <div className="min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-foreground">{label}</span>
+          <SourceBadge source={source} />
+        </div>
+        {description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>}
+      </div>
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => onChange(configKey, !value)}
+          className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${value ? '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 ${value ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+        </button>
+        {source === 'admin' && (
+          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert to default">
+            <RotateCcw className="w-3.5 h-3.5" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SelectSetting({ label, configKey, value, source, options, onChange, onRevert }: {
+  label: string; configKey: string; value: string; source?: string; options: string[];
+  onChange: (key: string, value: unknown) => void; onRevert: (key: string) => void;
+}) {
+  return (
+    <div className="px-4 py-3 flex items-center justify-between gap-4">
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-foreground">{label}</span>
+        <SourceBadge source={source} />
+      </div>
+      <div className="flex items-center gap-2">
+        <select
+          value={value ?? ''}
+          onChange={(e) => onChange(configKey, e.target.value)}
+          className="h-8 rounded-md border border-input bg-background px-2.5 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {options.map(opt => <option key={opt} value={opt}>{opt}</option>)}
+        </select>
+        {source === 'admin' && (
+          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert to default">
+            <RotateCcw className="w-3.5 h-3.5" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

app/admin/themes/page.tsx

@@ -0,0 +1,553 @@
+'use client';
+
+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' },
+  { id: 'builtin-catppuccin', name: 'Catppuccin' },
+  { id: 'builtin-solarized', name: 'Solarized' },
+];
+
+interface ThemeEntry {
+  id: string;
+  name: string;
+  version: string;
+  author: string;
+  description: string;
+  variants: string[];
+  enabled: boolean;
+  forceEnabled?: boolean;
+  installedAt: string;
+  updatedAt: string;
+}
+
+export default function AdminThemesPage() {
+  const [themes, setThemes] = useState<ThemeEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [uploading, setUploading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [policy, setPolicy] = useState<SettingsPolicy>({ ...DEFAULT_POLICY });
+  const [policyDirty, setPolicyDirty] = useState(false);
+  const [savingPolicy, setSavingPolicy] = useState(false);
+
+  useEffect(() => { fetchThemes(); fetchPolicy(); }, []);
+
+  async function fetchPolicy() {
+    try {
+      const res = await apiFetch('/api/admin/policy');
+      if (res.ok) {
+        const data = await res.json();
+        setPolicy({
+          ...data,
+          themePolicy: { ...DEFAULT_THEME_POLICY, ...(data.themePolicy || {}) },
+        });
+      }
+    } catch { /* ignore */ }
+  }
+
+  function toggleThemesEnabled() {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, themesEnabled: !prev.features.themesEnabled },
+    }));
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  function toggleUserThemeUploads() {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, userThemesEnabled: !prev.features.userThemesEnabled },
+    }));
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  function toggleBuiltinTheme(themeId: string) {
+    setPolicy(prev => {
+      const disabled = prev.themePolicy?.disabledBuiltinThemes || [];
+      const isDisabled = disabled.includes(themeId);
+      return {
+        ...prev,
+        themePolicy: {
+          ...DEFAULT_THEME_POLICY,
+          ...prev.themePolicy,
+          disabledBuiltinThemes: isDisabled
+            ? disabled.filter((id: string) => id !== themeId)
+            : [...disabled, themeId],
+        },
+      };
+    });
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  function toggleAdminTheme(themeId: string) {
+    setPolicy(prev => {
+      const disabled = prev.themePolicy?.disabledThemes || [];
+      const isDisabled = disabled.includes(themeId);
+      return {
+        ...prev,
+        themePolicy: {
+          ...DEFAULT_THEME_POLICY,
+          ...prev.themePolicy,
+          disabledThemes: isDisabled
+            ? disabled.filter((id: string) => id !== themeId)
+            : [...disabled, themeId],
+        },
+      };
+    });
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  function setDefaultTheme(themeId: string | null) {
+    setPolicy(prev => ({
+      ...prev,
+      themePolicy: {
+        ...DEFAULT_THEME_POLICY,
+        ...prev.themePolicy,
+        defaultThemeId: themeId,
+      },
+    }));
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  async function handleSavePolicy() {
+    setSavingPolicy(true);
+    setMessage(null);
+    try {
+      const res = await apiFetch('/api/admin/policy', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(policy),
+      });
+      if (res.ok) {
+        setMessage({ type: 'success', text: 'Theme policy saved. Users will see changes on next login.' });
+        setPolicyDirty(false);
+      } else {
+        const data = await res.json();
+        setMessage({ type: 'error', text: data.error || 'Failed to save policy' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to save policy' });
+    } finally {
+      setSavingPolicy(false);
+    }
+  }
+
+  async function fetchThemes() {
+    setLoading(true);
+    try {
+      const res = await apiFetch('/api/admin/themes');
+      if (res.ok) setThemes(await res.json());
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setUploading(true);
+    setMessage(null);
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const res = await apiFetch('/api/admin/themes', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const data = await res.json();
+      if (res.ok) {
+        const warnings = data.warnings?.length ? ` (${data.warnings.length} warning(s))` : '';
+        setMessage({ type: 'success', text: `Theme "${data.theme.name}" installed${warnings}` });
+        await fetchThemes();
+      } else {
+        setMessage({ type: 'error', text: data.error || 'Upload failed' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Upload failed' });
+    } finally {
+      setUploading(false);
+      if (fileInputRef.current) fileInputRef.current.value = '';
+    }
+  }
+
+  async function toggleTheme(id: string, enabled: boolean) {
+    setMessage(null);
+    const res = await apiFetch('/api/admin/themes', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, enabled }),
+    });
+
+    if (res.ok) {
+      setThemes(prev => prev.map(t => t.id === id ? { ...t, enabled } : t));
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Update failed' });
+    }
+  }
+
+  async function toggleForceEnabled(id: string, forceEnabled: boolean) {
+    setMessage(null);
+    const body: Record<string, unknown> = { id, forceEnabled };
+    if (forceEnabled) body.enabled = true;
+
+    const res = await apiFetch('/api/admin/themes', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+
+    if (res.ok) {
+      setThemes(prev => prev.map(t => t.id === id ? { ...t, forceEnabled, ...(forceEnabled ? { enabled: true } : {}) } : t));
+      setPolicy(prev => {
+        const current = prev.forceEnabledThemes || [];
+        return {
+          ...prev,
+          forceEnabledThemes: forceEnabled
+            ? [...current.filter(tid => tid !== id), id]
+            : current.filter(tid => tid !== id),
+        };
+      });
+      setPolicyDirty(true);
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Update failed' });
+    }
+  }
+
+  async function forceEnableAll() {
+    setMessage(null);
+    const disabled = themes.filter(t => !t.enabled);
+    if (disabled.length === 0) {
+      setMessage({ type: 'success', text: 'All themes are already enabled' });
+      return;
+    }
+    let failed = 0;
+    for (const t of disabled) {
+      const res = await apiFetch('/api/admin/themes', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: t.id, enabled: true }),
+      });
+      if (!res.ok) failed++;
+    }
+    if (failed === 0) {
+      await fetchThemes();
+      setMessage({ type: 'success', text: `All ${disabled.length} theme(s) enabled` });
+    } else {
+      await fetchThemes();
+      setMessage({ type: 'error', text: `${failed} theme(s) failed to enable` });
+    }
+  }
+
+  async function forceDisableAll() {
+    setMessage(null);
+    const enabled = themes.filter(t => t.enabled);
+    if (enabled.length === 0) {
+      setMessage({ type: 'success', text: 'All themes are already disabled' });
+      return;
+    }
+    let failed = 0;
+    for (const t of enabled) {
+      const res = await apiFetch('/api/admin/themes', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: t.id, enabled: false }),
+      });
+      if (!res.ok) failed++;
+    }
+    if (failed === 0) {
+      await fetchThemes();
+      setMessage({ type: 'success', text: `All ${enabled.length} theme(s) disabled` });
+    } else {
+      await fetchThemes();
+      setMessage({ type: 'error', text: `${failed} theme(s) failed to disable` });
+    }
+  }
+
+  async function deleteTheme(id: string, name: string) {
+    if (!confirm(`Remove theme "${name}"? This cannot be undone.`)) return;
+
+    setMessage(null);
+    const res = await apiFetch('/api/admin/themes', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id }),
+    });
+
+    if (res.ok) {
+      setThemes(prev => prev.filter(t => t.id !== id));
+      setMessage({ type: 'success', text: `Theme "${name}" removed` });
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Delete failed' });
+    }
+  }
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  const themesEnabled = policy.features.themesEnabled ?? true;
+  const userThemesEnabled = policy.features.userThemesEnabled ?? true;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Themes</h1>
+          <p className="text-sm text-muted-foreground mt-1">Manage themes and theme policy for all users</p>
+        </div>
+        <div className="flex items-center gap-2">
+          {policyDirty && (
+            <button
+              onClick={handleSavePolicy}
+              disabled={savingPolicy}
+              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"
+            >
+              {savingPolicy ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+              Save Policy
+            </button>
+          )}
+          <label 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 cursor-pointer transition-all shadow-sm">
+            {uploading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Upload className="w-4 h-4" />}
+            Upload Theme
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".zip"
+              onChange={handleUpload}
+              disabled={uploading}
+              className="sr-only"
+            />
+          </label>
+        </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>
+      )}
+
+      {/* Theme Policy */}
+      <div className="border border-border rounded-lg">
+        <div className="px-4 py-3 border-b border-border bg-muted/30">
+          <div className="flex items-center gap-2">
+            <Shield className="w-4 h-4 text-muted-foreground" />
+            <h2 className="text-sm font-medium text-foreground">Theme Policy</h2>
+          </div>
+          <p className="text-xs text-muted-foreground mt-0.5">Control theme availability and defaults for users</p>
+        </div>
+
+        <div className="divide-y divide-border">
+          {/* Master toggle */}
+          <div className="px-4 py-3 flex items-center justify-between gap-4">
+            <div>
+              <span className="text-sm text-foreground">Themes Enabled</span>
+              <p className="text-xs text-muted-foreground mt-0.5">Allow users to select and apply themes</p>
+            </div>
+            <button onClick={toggleThemesEnabled}
+              className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${themesEnabled ? '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 ${themesEnabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+            </button>
+          </div>
+
+          {/* User uploads toggle */}
+          <div className="px-4 py-3 flex items-center justify-between gap-4">
+            <div>
+              <span className="text-sm text-foreground">User Theme Uploads</span>
+              <p className="text-xs text-muted-foreground mt-0.5">Allow users to upload their own theme files</p>
+            </div>
+            <button onClick={toggleUserThemeUploads}
+              className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${userThemesEnabled ? '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 ${userThemesEnabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+            </button>
+          </div>
+
+          {/* Force enable / disable all */}
+          {themes.length > 0 && (
+            <div className="px-4 py-3 flex items-center justify-between gap-4">
+              <div>
+                <span className="text-sm text-foreground">Force Enable / Disable All</span>
+                <p className="text-xs text-muted-foreground mt-0.5">Bulk toggle all deployed themes at once</p>
+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={forceEnableAll}
+                  className="inline-flex items-center gap-1.5 h-7 px-3 rounded-md bg-emerald-600 text-white text-xs font-medium hover:bg-emerald-700 transition-colors"
+                >
+                  <Power className="w-3.5 h-3.5" />
+                  Enable All
+                </button>
+                <button
+                  onClick={forceDisableAll}
+                  className="inline-flex items-center gap-1.5 h-7 px-3 rounded-md bg-muted text-muted-foreground text-xs font-medium hover:bg-accent hover:text-foreground transition-colors"
+                >
+                  <PowerOff className="w-3.5 h-3.5" />
+                  Disable All
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Default Theme */}
+          <div className="px-4 py-3">
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <span className="text-sm text-foreground">Default Theme</span>
+                <p className="text-xs text-muted-foreground mt-0.5">Theme applied when users have not chosen one</p>
+              </div>
+              <select
+                value={policy.themePolicy?.defaultThemeId || ''}
+                onChange={(e) => setDefaultTheme(e.target.value || null)}
+                className="h-8 px-2 rounded-md border border-input bg-background text-sm text-foreground"
+              >
+                <option value="">System Default</option>
+                <optgroup label="Built-in">
+                  {BUILTIN_THEME_OPTIONS
+                    .filter(t => !(policy.themePolicy?.disabledBuiltinThemes || []).includes(t.id))
+                    .map(t => (
+                      <option key={t.id} value={t.id}>{t.name}</option>
+                    ))}
+                </optgroup>
+                {themes.length > 0 && (
+                  <optgroup label="Admin-deployed">
+                    {themes
+                      .filter(t => !(policy.themePolicy?.disabledThemes || []).includes(t.id))
+                      .map(t => (
+                        <option key={t.id} value={t.id}>{t.name}</option>
+                      ))}
+                  </optgroup>
+                )}
+              </select>
+            </div>
+          </div>
+
+          {/* Built-in themes */}
+          <div className="px-4 py-3">
+            <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Built-in Themes</span>
+            <div className="mt-2 space-y-2">
+              {BUILTIN_THEME_OPTIONS.map(theme => {
+                const disabled = (policy.themePolicy?.disabledBuiltinThemes || []).includes(theme.id);
+                return (
+                  <div key={theme.id} className="flex items-center justify-between gap-4">
+                    <span className="text-sm text-foreground">{theme.name}</span>
+                    <button onClick={() => toggleBuiltinTheme(theme.id)}
+                      className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${!disabled ? '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 ${!disabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Admin-deployed themes */}
+          {themes.length > 0 && (
+            <div className="px-4 py-3">
+              <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Admin-deployed Themes</span>
+              <div className="mt-2 space-y-2">
+                {themes.map(theme => {
+                  const disabled = (policy.themePolicy?.disabledThemes || []).includes(theme.id);
+                  return (
+                    <div key={theme.id} className="flex items-center justify-between gap-4">
+                      <span className="text-sm text-foreground">{theme.name}</span>
+                      <button onClick={() => toggleAdminTheme(theme.id)}
+                        className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${!disabled ? '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 ${!disabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+                      </button>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Deployed Themes */}
+      <div className="border border-border rounded-lg">
+        <div className="px-4 py-3 border-b border-border bg-muted/30">
+          <div className="flex items-center gap-2">
+            <Palette className="w-4 h-4 text-muted-foreground" />
+            <h2 className="text-sm font-medium text-foreground">Deployed Themes</h2>
+          </div>
+          <p className="text-xs text-muted-foreground mt-0.5">Admin-uploaded themes available to all users</p>
+        </div>
+        {themes.length === 0 ? (
+          <div className="p-12 text-center">
+            <Palette className="w-10 h-10 text-muted-foreground/40 mx-auto mb-3" />
+            <p className="text-sm text-muted-foreground">No themes installed</p>
+            <p className="text-xs text-muted-foreground mt-1">Upload a theme ZIP file to get started</p>
+          </div>
+        ) : (
+          <div className="divide-y divide-border">
+            {themes.map(theme => (
+              <div key={theme.id} className="px-4 py-4 flex items-center justify-between gap-4">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-foreground">{theme.name}</span>
+                    <span className="text-xs text-muted-foreground">v{theme.version}</span>
+                    <span className={`text-xs px-1.5 py-0.5 rounded ${theme.enabled ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400' : 'bg-muted text-muted-foreground'}`}>
+                      {theme.enabled ? 'Enabled' : 'Disabled'}
+                    </span>
+                    {theme.forceEnabled && (
+                      <span className="text-xs px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400 flex items-center gap-1">
+                        <Lock className="w-3 h-3" /> Forced
+                      </span>
+                    )}
+                  </div>
+                  {theme.description && (
+                    <p className="text-xs text-muted-foreground mt-0.5 truncate">{theme.description}</p>
+                  )}
+                  <div className="text-xs text-muted-foreground mt-1">
+                    by {theme.author} &middot; {theme.variants.join(', ')} &middot; installed {new Date(theme.installedAt).toLocaleDateString()}
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => toggleForceEnabled(theme.id, !theme.forceEnabled)}
+                    title={theme.forceEnabled ? 'Remove force-enable (users can deactivate)' : 'Force enable (users cannot deactivate)'}
+                    className={`p-2 rounded-md transition-colors ${theme.forceEnabled ? 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-950/30 dark:text-amber-400 dark:hover:bg-amber-950/50' : 'hover:bg-accent text-muted-foreground hover:text-foreground'}`}
+                  >
+                    {theme.forceEnabled ? <Lock className="w-4 h-4" /> : <LockOpen className="w-4 h-4" />}
+                  </button>
+                  <button
+                    onClick={() => toggleTheme(theme.id, !theme.enabled)}
+                    title={theme.enabled ? 'Disable' : 'Enable'}
+                    className="p-2 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    <Power className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => deleteTheme(theme.id, theme.name)}
+                    title="Remove"
+                    className="p-2 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -2,6 +2,20 @@ import { NextRequest, NextResponse } from 'next/server';
 import { logger } from '@/lib/logger';
 import { getStalwartCredentials } from '@/lib/stalwart/credentials';
 
+/**
+ * Parse Stalwart error response to extract meaningful error message
+ */
+function parseStalwartError(responseText: string): string {
+  try {
+    const error = JSON.parse(responseText);
+    if (error.detail) return error.detail;
+    if (error.error) return error.error;
+    return `HTTP ${error.status || 'Error'}`;
+  } catch {
+    return responseText;
+  }
+}
+
 /**
  * GET /api/account/stalwart/auth
  * Proxy to Stalwart GET /api/account/auth
@@ -20,9 +34,10 @@ export async function GET(request: NextRequest) {
 
     if (!response.ok) {
       const text = await response.text();
-      logger.warn('Stalwart auth info failed', { status: response.status });
+      const detail = parseStalwartError(text);
+      logger.warn('Stalwart auth info failed', { status: response.status, detail });
       return NextResponse.json(
-        { error: 'Failed to fetch auth info', details: text },
+        { error: detail || 'Failed to fetch auth info' },
         { status: response.status }
       );
     }

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

@@ -2,6 +2,20 @@ import { NextRequest, NextResponse } from 'next/server';
 import { logger } from '@/lib/logger';
 import { getStalwartCredentials } from '@/lib/stalwart/credentials';
 
+/**
+ * Parse Stalwart error response to extract meaningful error message
+ */
+function parseStalwartError(responseText: string): string {
+  try {
+    const error = JSON.parse(responseText);
+    if (error.detail) return error.detail;
+    if (error.error) return error.error;
+    return `HTTP ${error.status || 'Error'}`;
+  } catch {
+    return responseText;
+  }
+}
+
 /**
  * GET /api/account/stalwart/crypto
  * Proxy to Stalwart GET /api/account/crypto
@@ -20,9 +34,10 @@ export async function GET(request: NextRequest) {
 
     if (!response.ok) {
       const text = await response.text();
-      logger.warn('Stalwart crypto info failed', { status: response.status });
+      const detail = parseStalwartError(text);
+      logger.warn('Stalwart crypto info failed', { status: response.status, detail });
       return NextResponse.json(
-        { error: 'Failed to fetch crypto info', details: text },
+        { error: detail || 'Failed to fetch crypto info' },
         { status: response.status }
       );
     }

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

@@ -2,8 +2,9 @@ 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 { SESSION_COOKIE_MAX_AGE, sessionCookieName } from '@/lib/auth/session-cookie';
 import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+import { setStalwartAuthContextInStore } from '@/lib/stalwart/auth-context';
 
 const COOKIE_OPTIONS = {
   httpOnly: true,
@@ -69,10 +70,19 @@ export async function POST(request: NextRequest) {
     }
 
     // If session cookie exists, update it with the new password
+    const cookieStore = await cookies();
+
     if (creds.hasSessionCookie) {
       const newToken = encryptSession(creds.serverUrl, creds.username, newPassword);
-      const cookieStore = await cookies();
-      cookieStore.set(SESSION_COOKIE, newToken, COOKIE_OPTIONS);
+      cookieStore.set(sessionCookieName(creds.slot), newToken, COOKIE_OPTIONS);
+    }
+
+    if (creds.authHeader.startsWith('Basic ')) {
+      setStalwartAuthContextInStore(cookieStore, creds.slot, {
+        serverUrl: creds.serverUrl,
+        username: creds.username,
+        authHeader: `Basic ${Buffer.from(`${creds.username}:${newPassword}`).toString('base64')}`,
+      });
     }
 
     return NextResponse.json({ ok: true });

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

@@ -2,6 +2,20 @@ import { NextRequest, NextResponse } from 'next/server';
 import { logger } from '@/lib/logger';
 import { getStalwartCredentials } from '@/lib/stalwart/credentials';
 
+/**
+ * Parse Stalwart error response to extract meaningful error message
+ */
+function parseStalwartError(responseText: string): string {
+  try {
+    const error = JSON.parse(responseText);
+    if (error.detail) return error.detail;
+    if (error.error) return error.error;
+    return `HTTP ${error.status || 'Error'}`;
+  } catch {
+    return responseText;
+  }
+}
+
 /**
  * GET /api/account/stalwart/principal
  * Proxy to Stalwart GET /api/principal/{username}
@@ -20,9 +34,10 @@ export async function GET(request: NextRequest) {
 
     if (!response.ok) {
       const text = await response.text();
-      logger.warn('Stalwart principal fetch failed', { status: response.status });
+      const detail = parseStalwartError(text);
+      logger.warn('Stalwart principal fetch failed', { status: response.status, detail });
       return NextResponse.json(
-        { error: 'Failed to fetch principal', details: text },
+        { error: detail || 'Failed to fetch principal' },
         { status: response.status }
       );
     }

app/api/admin/audit/route.ts

@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAdminAuth } from '@/lib/admin/session';
+import { readAuditLog } from '@/lib/admin/audit';
+import { logger } from '@/lib/logger';
+
+/**
+ * GET /api/admin/audit - Get paginated audit log entries (admin-protected)
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const page = Math.max(1, parseInt(request.nextUrl.searchParams.get('page') || '1', 10));
+    const limit = Math.min(200, Math.max(1, parseInt(request.nextUrl.searchParams.get('limit') || '50', 10)));
+    const action = request.nextUrl.searchParams.get('action') || undefined;
+
+    const { entries, total } = await readAuditLog(page, limit, action);
+
+    return NextResponse.json({ entries, total, page, limit }, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch (error) {
+    logger.error('Audit log read error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/auth/route.ts

@@ -0,0 +1,151 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { initAdminPassword, verifyAdminPassword, updateLastLogin, isAdminEnabled, getAdminMeta } from '@/lib/admin/password';
+import { setAdminSessionCookie, clearAdminSessionCookie, requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { checkRateLimit } from '@/lib/admin/rate-limit';
+import { auditLog } from '@/lib/admin/audit';
+import { logger } from '@/lib/logger';
+import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+
+/**
+ * Check if the current user is a Stalwart admin by probing an admin-only endpoint.
+ */
+async function checkStalwartAdmin(request: NextRequest): Promise<boolean> {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) return false;
+
+    // Probe admin-only endpoint: listing principals requires admin privileges
+    const response = await fetch(`${creds.apiUrl}/api/principal?limit=1`, {
+      method: 'GET',
+      headers: { 'Authorization': creds.authHeader },
+    });
+
+    const isAdmin = response.ok;
+    logger.info('Stalwart admin check (auth)', { username: creds.username, status: response.status, isAdmin });
+    return isAdmin;
+  } catch (error) {
+    logger.debug('Stalwart admin check error', { error: error instanceof Error ? error.message : 'Unknown' });
+    return false;
+  }
+}
+
+/**
+ * POST /api/admin/auth - Login
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const ip = getClientIP(request);
+    const body = await request.json();
+
+    // Stalwart-based admin authentication
+    if (body.stalwartAuth === true) {
+      const isStalwartAdmin = await checkStalwartAdmin(request);
+      if (!isStalwartAdmin) {
+        await auditLog('admin.login_failed', { method: 'stalwart' }, ip);
+        return NextResponse.json({ error: 'Not a Stalwart admin' }, { status: 403 });
+      }
+
+      await setAdminSessionCookie();
+      await auditLog('admin.login', { method: 'stalwart' }, ip);
+      return NextResponse.json({ ok: true });
+    }
+
+    // Password-based admin authentication
+    await initAdminPassword();
+    if (!isAdminEnabled()) {
+      return NextResponse.json({ error: 'Admin dashboard is not configured' }, { status: 404 });
+    }
+
+    // Rate limit check
+    const limit = checkRateLimit(ip);
+    if (!limit.allowed) {
+      const retryAfter = Math.ceil(limit.retryAfterMs / 1000);
+      await auditLog('admin.login_blocked', { reason: 'rate_limit' }, ip);
+      return NextResponse.json(
+        { error: 'Too many login attempts. Try again later.' },
+        { status: 429, headers: { 'Retry-After': String(retryAfter) } }
+      );
+    }
+
+    const { password } = body;
+
+    if (!password || typeof password !== 'string') {
+      return NextResponse.json({ error: 'Password is required' }, { status: 400 });
+    }
+
+    const valid = await verifyAdminPassword(password);
+    if (!valid) {
+      await auditLog('admin.login_failed', {}, ip);
+      logger.warn('Admin login failed', { ip });
+      return NextResponse.json({ error: 'Invalid password' }, { status: 401 });
+    }
+
+    await setAdminSessionCookie();
+    await updateLastLogin();
+    await auditLog('admin.login', {}, ip);
+
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Admin login error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * GET /api/admin/auth - Check session status
+ * Also checks if the user is a Stalwart admin (admin panel enabled even without password).
+ */
+export async function GET(request: NextRequest) {
+  try {
+    await initAdminPassword();
+    const adminEnabled = isAdminEnabled();
+    const isStalwartAdmin = await checkStalwartAdmin(request);
+
+    // If neither password-based admin nor Stalwart admin, admin is disabled
+    if (!adminEnabled && !isStalwartAdmin) {
+      return NextResponse.json({ enabled: false, authenticated: false, stalwartAdmin: false }, {
+        headers: { 'Cache-Control': 'no-store' },
+      });
+    }
+
+    const result = await requireAdminAuth();
+    if ('error' in result) {
+      return NextResponse.json({
+        enabled: adminEnabled,
+        authenticated: false,
+        stalwartAdmin: isStalwartAdmin,
+      }, {
+        headers: { 'Cache-Control': 'no-store' },
+      });
+    }
+
+    const meta = getAdminMeta();
+    return NextResponse.json({
+      enabled: adminEnabled,
+      authenticated: true,
+      stalwartAdmin: isStalwartAdmin,
+      lastLogin: meta?.lastLogin,
+      passwordChangedAt: meta?.passwordChangedAt,
+    }, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch (error) {
+    logger.error('Admin status error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * DELETE /api/admin/auth - Logout
+ */
+export async function DELETE(request: NextRequest) {
+  try {
+    const ip = getClientIP(request);
+    await clearAdminSessionCookie();
+    await auditLog('admin.logout', {}, ip);
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Admin logout error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

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

@@ -0,0 +1,66 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { readFile, stat } from 'node:fs/promises';
+import path from 'node:path';
+
+const BRANDING_DIR = path.join(process.cwd(), 'data', 'admin', 'branding');
+
+const MIME_TYPES: Record<string, string> = {
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.webp': 'image/webp',
+  '.ico': 'image/x-icon',
+};
+
+/**
+ * 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.
+ */
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ filename: string }> },
+) {
+  try {
+    const { filename } = await params;
+
+    // Sanitize: only allow basename, no path separators
+    const safe = path.basename(filename);
+    if (safe !== filename || filename.includes('..')) {
+      return NextResponse.json({ error: 'Invalid filename' }, { status: 400 });
+    }
+
+    const ext = path.extname(safe).toLowerCase();
+    const contentType = MIME_TYPES[ext];
+    if (!contentType) {
+      return NextResponse.json({ error: 'Unsupported file type' }, { status: 400 });
+    }
+
+    const filePath = path.join(BRANDING_DIR, safe);
+
+    // Ensure resolved path is still within BRANDING_DIR
+    const resolved = path.resolve(filePath);
+    if (!resolved.startsWith(path.resolve(BRANDING_DIR))) {
+      return NextResponse.json({ error: 'Invalid filename' }, { status: 400 });
+    }
+
+    const fileStat = await stat(resolved).catch(() => null);
+    if (!fileStat || !fileStat.isFile()) {
+      return NextResponse.json({ error: 'Not found' }, { status: 404 });
+    }
+
+    const buffer = await readFile(resolved);
+
+    return new NextResponse(buffer, {
+      headers: {
+        'Content-Type': contentType,
+        'Cache-Control': 'public, max-age=3600, must-revalidate',
+        'Content-Length': String(buffer.length),
+      },
+    });
+  } catch {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
+}

app/api/admin/branding/route.ts

@@ -0,0 +1,146 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { auditLog } from '@/lib/admin/audit';
+import { configManager } from '@/lib/admin/config-manager';
+import { logger } from '@/lib/logger';
+import { writeFile, unlink, mkdir } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import path from 'node:path';
+
+const BRANDING_DIR = path.join(process.cwd(), 'data', 'admin', 'branding');
+const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2 MB
+const ALLOWED_MIME_TYPES = new Set([
+  'image/svg+xml',
+  'image/png',
+  'image/jpeg',
+  'image/webp',
+  'image/x-icon',
+  'image/vnd.microsoft.icon',
+]);
+
+/** Slots that correspond to branding config keys */
+const VALID_SLOTS = new Set([
+  'faviconUrl',
+  'appLogoLightUrl',
+  'appLogoDarkUrl',
+  'loginLogoLightUrl',
+  'loginLogoDarkUrl',
+]);
+
+function sanitizeFilename(name: string): string {
+  // Strip directory traversal, keep only safe chars
+  return path.basename(name).replace(/[^a-zA-Z0-9._-]/g, '_');
+}
+
+/**
+ * POST /api/admin/branding - Upload a branding image file
+ *
+ * Expects multipart/form-data with:
+ *   - file: the image file
+ *   - slot: which branding field this is for (e.g. "faviconUrl")
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const formData = await request.formData();
+    const file = formData.get('file') as File | null;
+    const slot = formData.get('slot') as string | null;
+
+    if (!file || !slot) {
+      return NextResponse.json({ error: 'Missing file or slot' }, { status: 400 });
+    }
+
+    if (!VALID_SLOTS.has(slot)) {
+      return NextResponse.json({ error: `Invalid slot: ${slot}` }, { status: 400 });
+    }
+
+    if (file.size > MAX_FILE_SIZE) {
+      return NextResponse.json({ error: 'File too large (max 2 MB)' }, { status: 400 });
+    }
+
+    if (!ALLOWED_MIME_TYPES.has(file.type)) {
+      return NextResponse.json(
+        { error: `Unsupported file type: ${file.type}. Allowed: SVG, PNG, JPEG, WebP, ICO` },
+        { status: 400 },
+      );
+    }
+
+    // Determine extension from mime type
+    const extMap: Record<string, string> = {
+      'image/svg+xml': '.svg',
+      'image/png': '.png',
+      'image/jpeg': '.jpg',
+      'image/webp': '.webp',
+      'image/x-icon': '.ico',
+      'image/vnd.microsoft.icon': '.ico',
+    };
+    const ext = extMap[file.type] || '.png';
+    const safeName = sanitizeFilename(`${slot}${ext}`);
+    const filePath = path.join(BRANDING_DIR, safeName);
+
+    // Ensure branding directory exists
+    if (!existsSync(BRANDING_DIR)) {
+      await mkdir(BRANDING_DIR, { recursive: true });
+    }
+
+    // Write file to disk
+    const buffer = Buffer.from(await file.arrayBuffer());
+    await writeFile(filePath, buffer);
+
+    // Update config to point to the served URL
+    const servedUrl = `/api/admin/branding/${safeName}`;
+    await configManager.ensureLoaded();
+    await configManager.setAdminConfig({ [slot]: servedUrl });
+
+    await auditLog('branding_upload', { slot, filename: safeName, size: file.size, mimeType: file.type }, ip);
+
+    return NextResponse.json({ url: servedUrl, filename: safeName });
+  } catch (error) {
+    logger.error('Branding upload error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * DELETE /api/admin/branding - Remove an uploaded branding file
+ *
+ * Expects JSON body: { slot: string }
+ */
+export async function DELETE(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { slot } = await request.json();
+
+    if (!slot || !VALID_SLOTS.has(slot)) {
+      return NextResponse.json({ error: 'Invalid or missing slot' }, { status: 400 });
+    }
+
+    // Find and remove matching files for this slot
+    const possibleExts = ['.svg', '.png', '.jpg', '.webp', '.ico'];
+    let removed = false;
+    for (const ext of possibleExts) {
+      const filePath = path.join(BRANDING_DIR, `${slot}${ext}`);
+      if (existsSync(filePath)) {
+        await unlink(filePath);
+        removed = true;
+      }
+    }
+
+    // Clear the config override so it falls back to default/env
+    await configManager.ensureLoaded();
+    await configManager.removeAdminOverride(slot);
+
+    await auditLog('branding_delete', { slot, fileRemoved: removed }, ip);
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    logger.error('Branding delete error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

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

@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { changeAdminPassword } from '@/lib/admin/password';
+import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { auditLog } from '@/lib/admin/audit';
+import { logger } from '@/lib/logger';
+
+/**
+ * POST /api/admin/change-password - Change admin password
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { currentPassword, newPassword } = await request.json();
+
+    if (!currentPassword || !newPassword || typeof currentPassword !== 'string' || typeof newPassword !== 'string') {
+      return NextResponse.json({ error: 'Both current and new password are required' }, { status: 400 });
+    }
+
+    if (newPassword.length < 8) {
+      return NextResponse.json({ error: 'New password must be at least 8 characters' }, { status: 400 });
+    }
+
+    const success = await changeAdminPassword(currentPassword, newPassword);
+    if (!success) {
+      return NextResponse.json({ error: 'Current password is incorrect' }, { status: 401 });
+    }
+
+    await auditLog('admin.change-password', {}, ip);
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Admin change password error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/config/route.ts

@@ -0,0 +1,94 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { configManager } from '@/lib/admin/config-manager';
+import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { auditLog } from '@/lib/admin/audit';
+import { CONFIG_ENV_MAP } from '@/lib/admin/types';
+import { logger } from '@/lib/logger';
+
+/**
+ * GET /api/admin/config - Get full config with sources (admin-protected)
+ */
+export async function GET() {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    await configManager.ensureLoaded();
+    const config = configManager.getAllWithSources();
+
+    return NextResponse.json(config, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch (error) {
+    logger.error('Admin config read error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * PATCH /api/admin/config - Update config overrides (admin-protected)
+ */
+export async function PATCH(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const updates = await request.json();
+
+    if (!updates || typeof updates !== 'object' || Array.isArray(updates)) {
+      return NextResponse.json({ error: 'Request body must be an object' }, { status: 400 });
+    }
+
+    // Validate keys
+    const validKeys = Object.keys(CONFIG_ENV_MAP);
+    const invalidKeys = Object.keys(updates).filter(k => !validKeys.includes(k));
+    if (invalidKeys.length > 0) {
+      return NextResponse.json({ error: `Unknown config keys: ${invalidKeys.join(', ')}` }, { status: 400 });
+    }
+
+    // Get old values for audit
+    const oldValues: Record<string, unknown> = {};
+    for (const key of Object.keys(updates)) {
+      oldValues[key] = configManager.get(key);
+    }
+
+    await configManager.setAdminConfig(updates);
+    await auditLog('config.update', { changes: Object.keys(updates).map(k => ({ key: k, old: oldValues[k], new: updates[k] })) }, ip);
+
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Admin config update error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * DELETE /api/admin/config - Remove admin override for a key (revert to env/default)
+ */
+export async function DELETE(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { key } = await request.json();
+
+    if (!key || typeof key !== 'string') {
+      return NextResponse.json({ error: 'Key is required' }, { status: 400 });
+    }
+
+    if (!CONFIG_ENV_MAP[key]) {
+      return NextResponse.json({ error: `Unknown config key: ${key}` }, { status: 400 });
+    }
+
+    const oldValue = configManager.get(key);
+    await configManager.removeAdminOverride(key);
+    await auditLog('config.revert', { key, oldValue }, ip);
+
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Admin config revert error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/marketplace/route.ts

@@ -0,0 +1,252 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { auditLog } from '@/lib/admin/audit';
+import { logger } from '@/lib/logger';
+import {
+  savePlugin,
+  saveTheme,
+  getPluginRegistry,
+  getThemeRegistry,
+  type ServerPlugin,
+  type ServerTheme,
+} from '@/lib/admin/plugin-registry';
+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';
+
+const DIRECTORY_URL = process.env.EXTENSION_DIRECTORY_URL || 'http://localhost:3001';
+
+/**
+ * GET /api/admin/marketplace - Search/browse the extension directory
+ * Proxies to the extension directory API
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const { searchParams } = request.nextUrl;
+    const url = new URL('/api/v1/extensions', DIRECTORY_URL);
+
+    // Forward all search params
+    for (const [key, value] of searchParams.entries()) {
+      url.searchParams.set(key, value);
+    }
+
+    const res = await fetch(url.toString(), {
+      headers: { 'Accept': 'application/json' },
+      signal: AbortSignal.timeout(10000),
+    });
+
+    if (!res.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch from extension directory' },
+        { status: 502 }
+      );
+    }
+
+    const data = await res.json();
+
+    // Enrich with install status
+    const [pluginRegistry, themeRegistry] = await Promise.all([
+      getPluginRegistry(),
+      getThemeRegistry(),
+    ]);
+
+    const installedPlugins = new Set(pluginRegistry.plugins.map(p => p.id));
+    const installedThemes = new Set(themeRegistry.themes.map(t => t.id));
+
+    if (data.data) {
+      data.data = data.data.map((ext: Record<string, unknown>) => ({
+        ...ext,
+        installed: ext.type === 'theme'
+          ? installedThemes.has(ext.slug as string)
+          : installedPlugins.has(ext.slug as string),
+      }));
+    }
+
+    return NextResponse.json(data, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch (error) {
+    logger.error('Marketplace search error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Failed to connect to extension directory' }, { status: 502 });
+  }
+}
+
+/**
+ * POST /api/admin/marketplace - Install an extension from the directory
+ * Body: { slug: string, version: string, type: 'plugin' | 'theme' }
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { slug, version, type } = await request.json();
+
+    if (!slug || !version || !type) {
+      return NextResponse.json({ error: 'Missing slug, version, or type' }, { status: 400 });
+    }
+
+    if (type !== 'plugin' && type !== 'theme') {
+      return NextResponse.json({ error: 'Invalid type' }, { status: 400 });
+    }
+
+    // Download the bundle from the directory
+    const bundleUrl = new URL(`/api/v1/bundle/${encodeURIComponent(slug)}/${encodeURIComponent(version)}`, DIRECTORY_URL);
+    const bundleRes = await fetch(bundleUrl.toString(), {
+      signal: AbortSignal.timeout(30000),
+    });
+
+    if (!bundleRes.ok) {
+      return NextResponse.json(
+        { error: `Failed to download bundle: ${bundleRes.status}` },
+        { status: 502 }
+      );
+    }
+
+    const buffer = await bundleRes.arrayBuffer();
+    const maxSize = type === 'theme' ? MAX_THEME_SIZE : MAX_PLUGIN_SIZE;
+
+    if (buffer.byteLength > maxSize) {
+      return NextResponse.json(
+        { error: `Bundle exceeds ${type === 'theme' ? '1 MB' : '5 MB'} size limit` },
+        { status: 400 }
+      );
+    }
+
+    // Parse the ZIP
+    let zip: JSZip;
+    try {
+      zip = await JSZip.loadAsync(buffer);
+    } catch {
+      return NextResponse.json({ error: 'Invalid ZIP file from directory' }, { status: 400 });
+    }
+
+    // Find root directory
+    const entries = Object.keys(zip.files);
+    const topDirs = new Set(entries.map(e => e.split('/')[0]));
+    let root = '';
+    if (topDirs.size === 1) {
+      const dir = [...topDirs][0];
+      if (zip.files[dir + '/'] || entries.some(e => e.startsWith(dir + '/'))) {
+        root = dir + '/';
+      }
+    }
+
+    // Read manifest
+    const manifestFile = zip.file(root + 'manifest.json');
+    if (!manifestFile) {
+      return NextResponse.json({ error: 'Bundle missing manifest.json' }, { status: 400 });
+    }
+
+    let manifest: Record<string, unknown>;
+    try {
+      manifest = JSON.parse(await manifestFile.async('string'));
+    } catch {
+      return NextResponse.json({ error: 'Invalid manifest.json in bundle' }, { status: 400 });
+    }
+
+    const now = new Date().toISOString();
+
+    if (type === 'theme') {
+      // Read theme.css
+      const cssFile = zip.file(root + 'theme.css');
+      if (!cssFile) {
+        return NextResponse.json({ error: 'Theme bundle missing theme.css' }, { status: 400 });
+      }
+
+      let css = await cssFile.async('string');
+
+      // Validate and sanitize CSS
+      const warnings: string[] = [];
+      const safety = validateThemeCSSSafety(css);
+      if (!safety.valid) {
+        const sanitized = sanitizeThemeCSS(css);
+        css = sanitized.css;
+        warnings.push(...sanitized.warnings);
+      }
+
+      const theme: ServerTheme = {
+        id: (manifest.id as string) || slug,
+        name: (manifest.name as string) || slug,
+        version: (manifest.version as string) || version,
+        author: (manifest.author as string) || 'Unknown',
+        description: (manifest.description as string) || '',
+        variants: (manifest.variants as string[]) || ['light', 'dark'],
+        enabled: true,
+        installedAt: now,
+        updatedAt: now,
+      };
+
+      await saveTheme(theme, css);
+      await auditLog('marketplace.install_theme', { id: theme.id, name: theme.name, version: theme.version, slug }, ip);
+
+      return NextResponse.json({ success: true, theme, warnings });
+    } else {
+      // Plugin installation
+      // Read entrypoint JS
+      const entrypoint = (manifest.entrypoint as string) || 'index.js';
+      const jsFile = zip.file(root + entrypoint);
+      if (!jsFile) {
+        return NextResponse.json({ error: `Bundle missing entrypoint: ${entrypoint}` }, { status: 400 });
+      }
+
+      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[]);
+      const unknownPerms = permissions.filter(p => !validPerms.has(p));
+
+      const warnings: string[] = [];
+      if (unknownPerms.length > 0) {
+        warnings.push(`Unknown permissions: ${unknownPerms.join(', ')}`);
+      }
+
+      const plugin: ServerPlugin = {
+        id: (manifest.id as string) || slug,
+        name: (manifest.name as string) || slug,
+        version: (manifest.version as string) || version,
+        author: (manifest.author as string) || 'Unknown',
+        description: (manifest.description as string) || '',
+        type: (manifest.type as string) || 'hook',
+        permissions,
+        entrypoint,
+        enabled: true,
+        installedAt: now,
+        updatedAt: now,
+      };
+
+      await savePlugin(plugin, code);
+      await auditLog('marketplace.install_plugin', { id: plugin.id, name: plugin.name, version: plugin.version, slug }, ip);
+
+      return NextResponse.json({ success: true, plugin, warnings });
+    }
+  } catch (error) {
+    logger.error('Marketplace install error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Installation failed' }, { status: 500 });
+  }
+}

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

@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getPluginBundle, getPlugin } from '@/lib/admin/plugin-registry';
+
+/**
+ * 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.
+ */
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  try {
+    const { id } = await params;
+
+    // Validate ID format to prevent path traversal
+    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 });
+    }
+
+    if (!plugin.enabled) {
+      return NextResponse.json({ error: 'Plugin is disabled' }, { status: 403 });
+    }
+
+    const code = await getPluginBundle(id);
+    if (!code) {
+      return NextResponse.json({ error: 'Bundle not found' }, { status: 404 });
+    }
+
+    return new NextResponse(code, {
+      headers: {
+        'Content-Type': 'application/javascript; charset=utf-8',
+        'Cache-Control': 'public, max-age=3600, must-revalidate',
+        'Content-Length': String(Buffer.byteLength(code, 'utf-8')),
+      },
+    });
+  } catch {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
+}

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

@@ -0,0 +1,247 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { auditLog } from '@/lib/admin/audit';
+import { logger } from '@/lib/logger';
+import {
+  getPluginRegistry,
+  savePlugin,
+  deletePlugin as removePlugin,
+  type ServerPlugin,
+} from '@/lib/admin/plugin-registry';
+
+// Server-side extraction using the same validation logic
+// ZIP parsing needs to happen on the server for admin-uploaded plugins
+import JSZip from 'jszip';
+import { MAX_PLUGIN_SIZE, ALL_PERMISSIONS, ALLOWED_PLUGIN_FILES } from '@/lib/plugin-types';
+
+const SUSPICIOUS_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' },
+];
+
+/**
+ * GET /api/admin/plugins - List all admin-managed plugins
+ */
+export async function GET() {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const registry = await getPluginRegistry();
+    return NextResponse.json(registry.plugins, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch (error) {
+    logger.error('Plugin list error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * POST /api/admin/plugins - Upload and install a plugin ZIP
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const formData = await request.formData();
+    const file = formData.get('file') as File | null;
+
+    if (!file) {
+      return NextResponse.json({ error: 'Missing file' }, { status: 400 });
+    }
+
+    if (file.size > MAX_PLUGIN_SIZE) {
+      return NextResponse.json({ error: 'Plugin ZIP exceeds 5 MB size limit' }, { status: 400 });
+    }
+
+    // Extract and validate ZIP
+    let zip: JSZip;
+    try {
+      const buffer = await file.arrayBuffer();
+      zip = await JSZip.loadAsync(buffer);
+    } catch {
+      return NextResponse.json({ error: 'Invalid ZIP file' }, { status: 400 });
+    }
+
+    // Find root
+    const entries = Object.keys(zip.files);
+    const topDirs = new Set(entries.map(e => e.split('/')[0]));
+    let root = '';
+    if (topDirs.size === 1) {
+      const dir = [...topDirs][0];
+      if (zip.files[dir + '/'] || entries.some(e => e.startsWith(dir + '/'))) {
+        root = dir + '/';
+      }
+    }
+
+    // Read manifest
+    const manifestFile = zip.file(root + 'manifest.json');
+    if (!manifestFile) {
+      return NextResponse.json({ error: 'Missing manifest.json' }, { status: 400 });
+    }
+
+    let manifest: Record<string, unknown>;
+    try {
+      manifest = JSON.parse(await manifestFile.async('string'));
+    } catch {
+      return NextResponse.json({ error: 'Invalid manifest.json' }, { status: 400 });
+    }
+
+    // Validate manifest
+    const errors: string[] = [];
+    if (!manifest.id || typeof manifest.id !== 'string') errors.push('Missing or invalid "id"');
+    if (!manifest.name || typeof manifest.name !== 'string') errors.push('Missing or invalid "name"');
+    if (!manifest.version || typeof manifest.version !== 'string') errors.push('Missing or invalid "version"');
+    if (!manifest.author || typeof manifest.author !== 'string') errors.push('Missing or invalid "author"');
+    if (!manifest.entrypoint || typeof manifest.entrypoint !== 'string') errors.push('Missing or invalid "entrypoint"');
+
+    const validTypes = ['ui-extension', 'sidebar-app', 'hook'];
+    if (!validTypes.includes(manifest.type as string)) {
+      errors.push(`Invalid type. Must be one of: ${validTypes.join(', ')}`);
+    }
+
+    if (manifest.id && typeof manifest.id === 'string' && !/^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(manifest.id)) {
+      errors.push('ID must be lowercase alphanumeric with hyphens, min 2 chars');
+    }
+
+    if (manifest.permissions && Array.isArray(manifest.permissions)) {
+      const validPerms = new Set(ALL_PERMISSIONS as readonly string[]);
+      const unknown = (manifest.permissions as string[]).filter(p => !validPerms.has(p));
+      if (unknown.length > 0) errors.push(`Unknown permissions: ${unknown.join(', ')}`);
+    }
+
+    if (errors.length > 0) {
+      return NextResponse.json({ error: errors.join('; ') }, { status: 400 });
+    }
+
+    // Check file extensions
+    for (const [filePath, entry] of Object.entries(zip.files)) {
+      if (entry.dir) continue;
+      const ext = filePath.lastIndexOf('.') >= 0 ? filePath.slice(filePath.lastIndexOf('.')).toLowerCase() : '';
+      if (ext && !ALLOWED_PLUGIN_FILES.has(ext)) {
+        errors.push(`Disallowed file type: ${filePath}`);
+      }
+    }
+    if (errors.length > 0) {
+      return NextResponse.json({ error: errors.join('; ') }, { status: 400 });
+    }
+
+    // Read entrypoint code
+    const entryFile = zip.file(root + (manifest.entrypoint as string));
+    if (!entryFile) {
+      return NextResponse.json({ error: `Missing entrypoint: ${manifest.entrypoint}` }, { status: 400 });
+    }
+    const code = await entryFile.async('string');
+
+    // 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 now = new Date().toISOString();
+    const plugin: ServerPlugin = {
+      id: manifest.id as string,
+      name: manifest.name as string,
+      version: manifest.version as string,
+      author: manifest.author as string,
+      description: (manifest.description as string) || '',
+      type: manifest.type as string,
+      permissions: (manifest.permissions as string[]) || [],
+      entrypoint: manifest.entrypoint as string,
+      enabled: true,
+      ...(manifest.configSchema && typeof manifest.configSchema === 'object'
+        ? { configSchema: manifest.configSchema as ServerPlugin['configSchema'] }
+        : {}),
+      installedAt: now,
+      updatedAt: now,
+    };
+
+    await savePlugin(plugin, code);
+    await auditLog('plugin.install', { id: plugin.id, name: plugin.name, version: plugin.version }, ip);
+
+    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 });
+  }
+}
+
+/**
+ * PATCH /api/admin/plugins - Update plugin metadata (enable/disable)
+ * Body: { id: string, enabled: boolean }
+ */
+export async function PATCH(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { id, enabled, forceEnabled } = await request.json();
+
+    if (!id || typeof id !== 'string') {
+      return NextResponse.json({ error: 'Missing plugin id' }, { status: 400 });
+    }
+    if (typeof enabled !== 'boolean' && typeof forceEnabled !== 'boolean') {
+      return NextResponse.json({ error: 'enabled or forceEnabled must be a boolean' }, { status: 400 });
+    }
+
+    const updates: { enabled?: boolean; forceEnabled?: boolean } = {};
+    if (typeof enabled === 'boolean') updates.enabled = enabled;
+    if (typeof forceEnabled === 'boolean') updates.forceEnabled = forceEnabled;
+
+    const { updatePluginMeta } = await import('@/lib/admin/plugin-registry');
+    const updated = await updatePluginMeta(id, updates);
+    if (!updated) {
+      return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
+    }
+
+    await auditLog('plugin.update', { id, ...updates }, ip);
+    return NextResponse.json({ plugin: updated });
+  } catch (error) {
+    logger.error('Plugin update error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * DELETE /api/admin/plugins - Remove a plugin
+ * Body: { id: string }
+ */
+export async function DELETE(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { id } = await request.json();
+
+    if (!id || typeof id !== 'string') {
+      return NextResponse.json({ error: 'Missing plugin id' }, { status: 400 });
+    }
+
+    const removed = await removePlugin(id);
+    if (!removed) {
+      return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
+    }
+
+    await auditLog('plugin.delete', { id }, ip);
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    logger.error('Plugin delete error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/policy/route.ts

@@ -0,0 +1,58 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { configManager } from '@/lib/admin/config-manager';
+import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { auditLog } from '@/lib/admin/audit';
+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)
+ */
+export async function GET() {
+  try {
+    await configManager.ensureLoaded();
+    const policy = configManager.getPolicy();
+    return NextResponse.json(policy, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch (error) {
+    logger.error('Policy read error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * PUT /api/admin/policy - Update settings policy (admin-protected)
+ */
+export async function PUT(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const policy = await request.json() as SettingsPolicy;
+
+    if (!policy || typeof policy !== 'object') {
+      return NextResponse.json({ error: 'Invalid policy object' }, { status: 400 });
+    }
+
+    // Basic validation
+    if (policy.restrictions && typeof policy.restrictions !== 'object') {
+      return NextResponse.json({ error: 'restrictions must be an object' }, { status: 400 });
+    }
+    if (policy.features && typeof policy.features !== 'object') {
+      return NextResponse.json({ error: 'features must be an object' }, { status: 400 });
+    }
+    if (policy.themePolicy && typeof policy.themePolicy !== 'object') {
+      return NextResponse.json({ error: 'themePolicy must be an object' }, { status: 400 });
+    }
+
+    await configManager.setPolicy(policy);
+    await auditLog('policy.update', { restrictionCount: Object.keys(policy.restrictions || {}).length }, ip);
+
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Policy update error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getThemeCSS, getThemeRegistry } from '@/lib/admin/plugin-registry';
+import { logger } from '@/lib/logger';
+
+/**
+ * GET /api/admin/themes/[id]/css - Serve theme CSS to clients
+ */
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+
+    // Validate ID format
+    if (!/^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(id)) {
+      return NextResponse.json({ error: 'Invalid theme ID' }, { status: 400 });
+    }
+
+    // Verify theme exists and is enabled
+    const registry = await getThemeRegistry();
+    const theme = registry.themes.find(t => t.id === id);
+    if (!theme) {
+      return NextResponse.json({ error: 'Theme not found' }, { status: 404 });
+    }
+    if (!theme.enabled) {
+      return NextResponse.json({ error: 'Theme is disabled' }, { status: 403 });
+    }
+
+    const css = await getThemeCSS(id);
+    if (!css) {
+      return NextResponse.json({ error: 'Theme CSS not found' }, { status: 404 });
+    }
+
+    return new NextResponse(css, {
+      headers: {
+        'Content-Type': 'text/css; charset=utf-8',
+        'Cache-Control': 'public, max-age=3600',
+        'X-Content-Type-Options': 'nosniff',
+      },
+    });
+  } catch (error) {
+    logger.error('Theme CSS serve error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/themes/route.ts

@@ -0,0 +1,217 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { auditLog } from '@/lib/admin/audit';
+import { logger } from '@/lib/logger';
+import {
+  getThemeRegistry,
+  saveTheme,
+  deleteTheme as removeTheme,
+  type ServerTheme,
+} from '@/lib/admin/plugin-registry';
+
+import JSZip from 'jszip';
+import { MAX_THEME_SIZE } from '@/lib/plugin-types';
+import { sanitizeThemeCSS, validateThemeCSSSafety } from '@/lib/theme-loader';
+
+/**
+ * GET /api/admin/themes - List all admin-managed themes
+ */
+export async function GET() {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const registry = await getThemeRegistry();
+    return NextResponse.json(registry.themes, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch (error) {
+    logger.error('Theme list error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * POST /api/admin/themes - Upload and install a theme ZIP
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const formData = await request.formData();
+    const file = formData.get('file') as File | null;
+
+    if (!file) {
+      return NextResponse.json({ error: 'Missing file' }, { status: 400 });
+    }
+
+    if (file.size > MAX_THEME_SIZE) {
+      return NextResponse.json({ error: 'Theme ZIP exceeds 1 MB size limit' }, { status: 400 });
+    }
+
+    // Extract and validate ZIP
+    let zip: JSZip;
+    try {
+      const buffer = await file.arrayBuffer();
+      zip = await JSZip.loadAsync(buffer);
+    } catch {
+      return NextResponse.json({ error: 'Invalid ZIP file' }, { status: 400 });
+    }
+
+    // Find root
+    const entries = Object.keys(zip.files);
+    const topDirs = new Set(entries.map(e => e.split('/')[0]));
+    let root = '';
+    if (topDirs.size === 1) {
+      const dir = [...topDirs][0];
+      if (zip.files[dir + '/'] || entries.some(e => e.startsWith(dir + '/'))) {
+        root = dir + '/';
+      }
+    }
+
+    // Read manifest
+    const manifestFile = zip.file(root + 'manifest.json');
+    if (!manifestFile) {
+      return NextResponse.json({ error: 'Missing manifest.json' }, { status: 400 });
+    }
+
+    let manifest: Record<string, unknown>;
+    try {
+      manifest = JSON.parse(await manifestFile.async('string'));
+    } catch {
+      return NextResponse.json({ error: 'Invalid manifest.json' }, { status: 400 });
+    }
+
+    // Validate manifest
+    const errors: string[] = [];
+    if (!manifest.id || typeof manifest.id !== 'string') errors.push('Missing or invalid "id"');
+    if (!manifest.name || typeof manifest.name !== 'string') errors.push('Missing or invalid "name"');
+    if (!manifest.version || typeof manifest.version !== 'string') errors.push('Missing or invalid "version"');
+    if (!manifest.author || typeof manifest.author !== 'string') errors.push('Missing or invalid "author"');
+
+    if (manifest.type !== 'theme') {
+      errors.push(`Expected type "theme", got "${manifest.type}"`);
+    }
+
+    if (manifest.id && typeof manifest.id === 'string' && !/^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(manifest.id)) {
+      errors.push('ID must be lowercase alphanumeric with hyphens, min 2 chars');
+    }
+
+    if (!manifest.variants || !Array.isArray(manifest.variants) || manifest.variants.length === 0) {
+      errors.push('Missing or empty "variants" array');
+    } else {
+      const valid = manifest.variants.every((v: unknown) => v === 'light' || v === 'dark');
+      if (!valid) errors.push('Variants must be "light" or "dark"');
+    }
+
+    if (errors.length > 0) {
+      return NextResponse.json({ error: errors.join('; ') }, { status: 400 });
+    }
+
+    // Read theme.css
+    const cssFile = zip.file(root + 'theme.css');
+    if (!cssFile) {
+      return NextResponse.json({ error: 'Missing theme.css' }, { status: 400 });
+    }
+
+    let css = await cssFile.async('string');
+
+    // Validate and sanitize CSS
+    const warnings: string[] = [];
+    const safety = validateThemeCSSSafety(css);
+    if (!safety.valid) {
+      const sanitized = sanitizeThemeCSS(css);
+      css = sanitized.css;
+      warnings.push(...sanitized.warnings);
+    }
+
+    const now = new Date().toISOString();
+    const theme: ServerTheme = {
+      id: manifest.id as string,
+      name: manifest.name as string,
+      version: manifest.version as string,
+      author: manifest.author as string,
+      description: (manifest.description as string) || '',
+      variants: manifest.variants as string[],
+      enabled: true,
+      installedAt: now,
+      updatedAt: now,
+    };
+
+    await saveTheme(theme, css);
+    await auditLog('theme.install', { id: theme.id, name: theme.name, version: theme.version, warnings }, ip);
+
+    return NextResponse.json({ theme, warnings });
+  } catch (error) {
+    logger.error('Theme install error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * PATCH /api/admin/themes - Update theme metadata (enable/disable)
+ * Body: { id: string, enabled: boolean }
+ */
+export async function PATCH(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { id, enabled, forceEnabled } = await request.json();
+
+    if (!id || typeof id !== 'string') {
+      return NextResponse.json({ error: 'Missing theme id' }, { status: 400 });
+    }
+    if (typeof enabled !== 'boolean' && typeof forceEnabled !== 'boolean') {
+      return NextResponse.json({ error: 'enabled or forceEnabled must be a boolean' }, { status: 400 });
+    }
+
+    const updates: { enabled?: boolean; forceEnabled?: boolean } = {};
+    if (typeof enabled === 'boolean') updates.enabled = enabled;
+    if (typeof forceEnabled === 'boolean') updates.forceEnabled = forceEnabled;
+
+    const { updateThemeMeta } = await import('@/lib/admin/plugin-registry');
+    const updated = await updateThemeMeta(id, updates);
+    if (!updated) {
+      return NextResponse.json({ error: 'Theme not found' }, { status: 404 });
+    }
+
+    await auditLog('theme.update', { id, ...updates }, ip);
+    return NextResponse.json({ theme: updated });
+  } catch (error) {
+    logger.error('Theme update error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * DELETE /api/admin/themes - Remove a theme
+ * Body: { id: string }
+ */
+export async function DELETE(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth();
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { id } = await request.json();
+
+    if (!id || typeof id !== 'string') {
+      return NextResponse.json({ error: 'Missing theme id' }, { status: 400 });
+    }
+
+    const removed = await removeTheme(id);
+    if (!removed) {
+      return NextResponse.json({ error: 'Theme not found' }, { status: 404 });
+    }
+
+    await auditLog('theme.delete', { id }, ip);
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    logger.error('Theme delete error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/auth/session/route.ts

@@ -3,12 +3,15 @@ import { cookies } from 'next/headers';
 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';
 
 const COOKIE_OPTIONS = {
-  httpOnly: true,
-  secure: process.env.NODE_ENV === 'production',
-  sameSite: 'lax' as const,
-  path: '/',
+  ...getCookieOptions(),
   maxAge: SESSION_COOKIE_MAX_AGE,
 };
 
@@ -33,12 +36,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 });
   }
@@ -58,9 +72,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' },
     });
@@ -79,10 +150,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/complete/route.ts

@@ -0,0 +1,80 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { logger } from '@/lib/logger';
+import { decryptPayload } from '@/lib/auth/crypto';
+import { exchangeCodeForTokens } from '@/lib/oauth/token-exchange';
+import { refreshTokenCookieName } from '@/lib/oauth/tokens';
+import { getCookieOptions } from '@/lib/oauth/cookie-config';
+
+const SSO_PENDING_COOKIE = 'sso_pending';
+const SSO_PENDING_MAX_AGE_MS = 5 * 60 * 1000; // 5 minutes
+
+export async function POST(request: NextRequest) {
+  const cookieStore = await cookies();
+
+  try {
+    const { code, state } = await request.json();
+
+    if (!code || !state) {
+      return NextResponse.json({ error: 'Missing code or state' }, { status: 400 });
+    }
+
+    // Read and decrypt the pending SSO cookie
+    const pendingCookie = cookieStore.get(SSO_PENDING_COOKIE)?.value;
+    if (!pendingCookie) {
+      logger.warn('SSO complete: no pending cookie found');
+      return NextResponse.json({ error: 'No pending SSO session. Please start the login flow again.' }, { status: 400 });
+    }
+
+    const pending = decryptPayload(pendingCookie);
+    if (!pending) {
+      cookieStore.delete(SSO_PENDING_COOKIE);
+      return NextResponse.json({ error: 'Invalid SSO session' }, { status: 400 });
+    }
+
+    // Validate state
+    if (pending.state !== state) {
+      logger.warn('SSO complete: state mismatch');
+      cookieStore.delete(SSO_PENDING_COOKIE);
+      return NextResponse.json({ error: 'State mismatch' }, { status: 400 });
+    }
+
+    // Validate TTL
+    const createdAt = pending.created_at as number;
+    if (!createdAt || Date.now() - createdAt > SSO_PENDING_MAX_AGE_MS) {
+      logger.warn('SSO complete: pending session expired');
+      cookieStore.delete(SSO_PENDING_COOKIE);
+      return NextResponse.json({ error: 'SSO session expired. Please try again.' }, { status: 400 });
+    }
+
+    const codeVerifier = pending.code_verifier as string;
+    const redirectUri = pending.redirect_uri as string;
+
+    if (!codeVerifier || !redirectUri) {
+      cookieStore.delete(SSO_PENDING_COOKIE);
+      return NextResponse.json({ error: 'Invalid SSO session data' }, { status: 400 });
+    }
+
+    // Exchange code for tokens
+    const tokens = await exchangeCodeForTokens(code, codeVerifier, redirectUri);
+
+    // Store refresh token
+    if (tokens.refresh_token) {
+      const cookieName = refreshTokenCookieName(0);
+      cookieStore.set(cookieName, tokens.refresh_token, getCookieOptions());
+    }
+
+    // Delete pending cookie
+    cookieStore.delete(SSO_PENDING_COOKIE);
+
+    return NextResponse.json({
+      access_token: tokens.access_token,
+      expires_in: tokens.expires_in,
+    });
+  } catch (error) {
+    // Clean up pending cookie on any error
+    cookieStore.delete(SSO_PENDING_COOKIE);
+    logger.error('SSO complete error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Token exchange failed' }, { status: 401 });
+  }
+}

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

@@ -0,0 +1,89 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { logger } from '@/lib/logger';
+import { encryptPayload } from '@/lib/auth/crypto';
+import { generateCodeVerifierServer, generateCodeChallengeServer, generateStateServer } from '@/lib/oauth/pkce-server';
+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 && !readFileEnv(process.env.SESSION_SECRET_FILE)) {
+      return NextResponse.json({ error: 'SESSION_SECRET is required for SSO' }, { status: 500 });
+    }
+
+    const { redirect_uri, locale } = await request.json();
+
+    if (!redirect_uri || typeof redirect_uri !== 'string') {
+      return NextResponse.json({ error: 'Missing redirect_uri' }, { status: 400 });
+    }
+
+    // Validate redirect_uri origin matches the request origin to prevent open redirects
+    const requestOrigin = request.headers.get('origin') || request.nextUrl.origin;
+    try {
+      const redirectOrigin = new URL(redirect_uri).origin;
+      if (redirectOrigin !== requestOrigin) {
+        logger.warn('SSO start: redirect_uri origin mismatch', { redirectOrigin, requestOrigin });
+        return NextResponse.json({ error: 'Invalid redirect_uri' }, { status: 400 });
+      }
+    } catch {
+      return NextResponse.json({ error: 'Invalid redirect_uri' }, { status: 400 });
+    }
+
+    const { clientId, discoveryUrl } = getRequiredConfig();
+    const metadata = await discoverOAuth(discoveryUrl);
+
+    if (!metadata?.authorization_endpoint) {
+      return NextResponse.json({ error: 'OAuth discovery failed' }, { status: 502 });
+    }
+
+    // Generate PKCE + state server-side
+    const codeVerifier = generateCodeVerifierServer();
+    const codeChallenge = generateCodeChallengeServer(codeVerifier);
+    const state = generateStateServer();
+
+    // Encrypt and store in httpOnly cookie
+    const pendingData = {
+      state,
+      code_verifier: codeVerifier,
+      redirect_uri,
+      created_at: Date.now(),
+    };
+
+    const encrypted = encryptPayload(pendingData);
+    const cookieStore = await cookies();
+    const baseCookieOpts = getCookieOptions();
+    cookieStore.set(SSO_PENDING_COOKIE, encrypted, {
+      ...baseCookieOpts,
+      maxAge: SSO_PENDING_MAX_AGE,
+    });
+
+    // Build authorize URL
+    const authUrl = new URL(metadata.authorization_endpoint);
+    authUrl.searchParams.set('response_type', 'code');
+    authUrl.searchParams.set('client_id', clientId);
+    authUrl.searchParams.set('redirect_uri', redirect_uri);
+    authUrl.searchParams.set('scope', OAUTH_SCOPES);
+    authUrl.searchParams.set('state', state);
+    authUrl.searchParams.set('code_challenge', codeChallenge);
+    authUrl.searchParams.set('code_challenge_method', 'S256');
+
+    if (locale) {
+      authUrl.searchParams.set('ui_locales', locale);
+    }
+
+    return NextResponse.json({
+      authorize_url: authUrl.toString(),
+      state,
+    });
+  } catch (error) {
+    logger.error('SSO start error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { 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/token/route.ts

@@ -1,18 +1,9 @@
 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';
-
-const CLIENT_SECRET = process.env.OAUTH_CLIENT_SECRET || '';
-
-const COOKIE_OPTIONS = {
-  httpOnly: true,
-  secure: process.env.NODE_ENV === 'production',
-  sameSite: 'lax' as const,
-  path: '/',
-  maxAge: 30 * 24 * 60 * 60,
-};
+import { exchangeCodeForTokens, buildOAuthParams, getMetadata, getTokenEndpoint } from '@/lib/oauth/token-exchange';
+import { getCookieOptions } from '@/lib/oauth/cookie-config';
 
 function getSlot(request: NextRequest): number {
   const raw = request.nextUrl.searchParams.get('slot');
@@ -22,44 +13,6 @@ function getSlot(request: NextRequest): number {
   return slot;
 }
 
-
-function getRequiredConfig() {
-  const clientId = process.env.OAUTH_CLIENT_ID;
-  const serverUrl = process.env.JMAP_SERVER_URL || process.env.NEXT_PUBLIC_JMAP_SERVER_URL;
-  const issuerUrl = process.env.OAUTH_ISSUER_URL;
-  if (!clientId || !serverUrl) {
-    throw new Error(`OAuth misconfigured: ${[!clientId && 'OAUTH_CLIENT_ID', !serverUrl && 'JMAP_SERVER_URL'].filter(Boolean).join(', ')} not set`);
-  }
-  const discoveryUrl = issuerUrl?.trim() || serverUrl;
-  if (issuerUrl !== undefined && !issuerUrl.trim()) {
-    logger.warn('OAUTH_ISSUER_URL is set but empty, falling back to JMAP_SERVER_URL for discovery');
-  }
-  return { clientId, serverUrl, discoveryUrl };
-}
-
-async function getTokenEndpoint(): Promise<string> {
-  const { discoveryUrl } = getRequiredConfig();
-  const metadata = await discoverOAuth(discoveryUrl);
-  if (!metadata?.token_endpoint) {
-    throw new Error('OAuth token endpoint not found');
-  }
-  return metadata.token_endpoint;
-}
-
-async function getMetadata(): Promise<import('@/lib/oauth/discovery').OAuthMetadata | null> {
-  const { discoveryUrl } = getRequiredConfig();
-  return discoverOAuth(discoveryUrl);
-}
-
-function buildOAuthParams(base: Record<string, string>): URLSearchParams {
-  const { clientId } = getRequiredConfig();
-  const params = new URLSearchParams({ ...base, client_id: clientId });
-  if (CLIENT_SECRET) {
-    params.set('client_secret', CLIENT_SECRET);
-  }
-  return params;
-}
-
 export async function POST(request: NextRequest) {
   try {
     const { code, code_verifier, redirect_uri, slot: bodySlot } = await request.json();
@@ -69,43 +22,18 @@ export async function POST(request: NextRequest) {
     }
 
     const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot <= 4 ? bodySlot : getSlot(request);
-    const tokenEndpoint = await getTokenEndpoint();
 
-    const params = buildOAuthParams({
-      grant_type: 'authorization_code',
-      code,
-      redirect_uri,
-      code_verifier,
-    });
-
-    const tokenResponse = await fetch(tokenEndpoint, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-      body: params.toString(),
-    });
-
-    if (!tokenResponse.ok) {
-      const errorText = await tokenResponse.text();
-      logger.error('Token exchange failed', { status: tokenResponse.status, error: errorText });
-      return NextResponse.json({ error: 'Token exchange failed' }, { status: 401 });
-    }
-
-    const tokens = await tokenResponse.json();
-
-    if (!tokens.access_token) {
-      logger.error('Token response missing access_token', { response: JSON.stringify(tokens).substring(0, 500) });
-      return NextResponse.json({ error: 'Invalid token response' }, { status: 502 });
-    }
+    const tokens = await exchangeCodeForTokens(code, code_verifier, redirect_uri);
 
     const response = NextResponse.json({
       access_token: tokens.access_token,
-      expires_in: tokens.expires_in || 3600,
+      expires_in: tokens.expires_in,
     });
 
     if (tokens.refresh_token) {
       const cookieName = refreshTokenCookieName(slot);
       const cookieStore = await cookies();
-      cookieStore.set(cookieName, tokens.refresh_token, COOKIE_OPTIONS);
+      cookieStore.set(cookieName, tokens.refresh_token, getCookieOptions());
     }
 
     return response;
@@ -154,7 +82,7 @@ export async function PUT(request: NextRequest) {
     }
 
     if (tokens.refresh_token) {
-      cookieStore.set(cookieName, tokens.refresh_token, COOKIE_OPTIONS);
+      cookieStore.set(cookieName, tokens.refresh_token, getCookieOptions());
     }
 
     return NextResponse.json({

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

@@ -0,0 +1,189 @@
+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';
+
+/**
+ * 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 = process.env.OAUTH_CLIENT_ID;
+  const clientSecret = process.env.OAUTH_CLIENT_SECRET || readFileEnv(process.env.OAUTH_CLIENT_SECRET_FILE);
+  const basicAuth = `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`;
+  const attempts: Array<{ strategy: string; error: string }> = [];
+
+  // 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,40 +1,56 @@
 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
  *
  * This endpoint serves configuration values that can be set at runtime
- * via environment variables, enabling post-build configuration for
- * Docker deployments.
+ * via environment variables or admin dashboard overrides, enabling
+ * post-build configuration for Docker deployments.
  *
  * Priority order:
- * 1. Runtime env vars (APP_NAME, JMAP_SERVER_URL)
- * 2. Build-time env vars (NEXT_PUBLIC_APP_NAME, NEXT_PUBLIC_JMAP_SERVER_URL)
- * 3. Default values
+ * 1. Admin dashboard overrides (data/admin/config.json)
+ * 2. Runtime env vars (APP_NAME, JMAP_SERVER_URL)
+ * 3. Build-time env vars (NEXT_PUBLIC_APP_NAME, NEXT_PUBLIC_JMAP_SERVER_URL)
+ * 4. Default values
  */
 export async function GET() {
   logger.debug('Config requested');
+  await configManager.ensureLoaded();
+
+  const appName = configManager.get<string>('appName') || process.env.NEXT_PUBLIC_APP_NAME || 'Webmail';
+  const jmapServerUrl = configManager.get<string>('jmapServerUrl') || process.env.NEXT_PUBLIC_JMAP_SERVER_URL || '';
+  const oauthEnabled = configManager.get<boolean>('oauthEnabled', false);
+  const oauthOnly = oauthEnabled && configManager.get<boolean>('oauthOnly', false);
+  const stalwartFeaturesEnabled = configManager.get<boolean>('stalwartFeaturesEnabled', true);
+  const allowedFrameAncestors = configManager.get<string>('allowedFrameAncestors', '');
+
   return NextResponse.json({
-    appName: process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || 'Webmail',
-    jmapServerUrl: process.env.JMAP_SERVER_URL || process.env.NEXT_PUBLIC_JMAP_SERVER_URL || '',
-    oauthEnabled: process.env.OAUTH_ENABLED === 'true',
-    oauthOnly: process.env.OAUTH_ENABLED === 'true' && process.env.OAUTH_ONLY === 'true',
-    oauthClientId: process.env.OAUTH_CLIENT_ID || '',
-    oauthIssuerUrl: process.env.OAUTH_ISSUER_URL || '',
-    rememberMeEnabled: !!process.env.SESSION_SECRET,
-    settingsSyncEnabled: process.env.SETTINGS_SYNC_ENABLED === 'true' && !!process.env.SESSION_SECRET,
-    stalwartFeaturesEnabled: process.env.STALWART_FEATURES !== 'false',
-    devMode: process.env.DEV_MOCK_JMAP === 'true',
-    faviconUrl: process.env.FAVICON_URL || '/branding/Bulwark_Favicon.svg',
-    appLogoLightUrl: process.env.APP_LOGO_LIGHT_URL || '',
-    appLogoDarkUrl: process.env.APP_LOGO_DARK_URL || '',
-    loginLogoLightUrl: process.env.LOGIN_LOGO_LIGHT_URL || '/branding/Bulwark_Logo_Color.svg',
-    loginLogoDarkUrl: process.env.LOGIN_LOGO_DARK_URL || '/branding/Bulwark_Logo_White.svg',
-    loginCompanyName: process.env.LOGIN_COMPANY_NAME || '',
-    loginImprintUrl: process.env.LOGIN_IMPRINT_URL || '',
-    loginPrivacyPolicyUrl: process.env.LOGIN_PRIVACY_POLICY_URL || '',
-    loginWebsiteUrl: process.env.LOGIN_WEBSITE_URL || '',
-    demoMode: process.env.DEMO_MODE === 'true',
+    appName,
+    jmapServerUrl,
+    oauthEnabled,
+    oauthOnly,
+    oauthClientId: configManager.get<string>('oauthClientId', ''),
+    oauthIssuerUrl: configManager.get<string>('oauthIssuerUrl', ''),
+    rememberMeEnabled: !!process.env.SESSION_SECRET || !!readFileEnv(process.env.SESSION_SECRET_FILE),
+    settingsSyncEnabled: configManager.get<boolean>('settingsSyncEnabled', false) && (!!process.env.SESSION_SECRET || !!readFileEnv(process.env.SESSION_SECRET_FILE)),
+    stalwartFeaturesEnabled,
+    devMode: configManager.get<boolean>('devMode', false),
+    faviconUrl: configManager.get<string>('faviconUrl', '/branding/Bulwark_Favicon.svg'),
+    appLogoLightUrl: configManager.get<string>('appLogoLightUrl', ''),
+    appLogoDarkUrl: configManager.get<string>('appLogoDarkUrl', ''),
+    loginLogoLightUrl: configManager.get<string>('loginLogoLightUrl', '/branding/Bulwark_Logo_Color.svg'),
+    loginLogoDarkUrl: configManager.get<string>('loginLogoDarkUrl', '/branding/Bulwark_Logo_White.svg'),
+    loginCompanyName: configManager.get<string>('loginCompanyName', ''),
+    loginImprintUrl: configManager.get<string>('loginImprintUrl', ''),
+    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/favicon/route.ts

@@ -40,32 +40,358 @@ function isValidDomain(domain: string): boolean {
 
 // Known multi-part TLDs where the registrable domain includes one extra label.
 const MULTI_PART_TLDS = new Set([
-  "co.uk", "org.uk", "me.uk", "ac.uk", "gov.uk", "net.uk",
-  "co.jp", "or.jp", "ne.jp", "ac.jp", "go.jp",
-  "co.kr", "or.kr", "go.kr", "ac.kr",
-  "co.in", "net.in", "org.in", "ac.in", "gov.in",
-  "co.nz", "org.nz", "net.nz", "govt.nz", "ac.nz",
-  "co.za", "org.za", "net.za", "gov.za", "ac.za",
-  "com.au", "net.au", "org.au", "edu.au", "gov.au",
-  "com.br", "net.br", "org.br", "edu.br", "gov.br",
-  "com.cn", "net.cn", "org.cn", "gov.cn", "edu.cn",
-  "com.mx", "net.mx", "org.mx", "gob.mx", "edu.mx",
-  "com.ar", "net.ar", "org.ar", "gob.ar", "edu.ar",
-  "com.tw", "net.tw", "org.tw", "edu.tw", "gov.tw",
-  "com.hk", "net.hk", "org.hk", "edu.hk", "gov.hk",
-  "com.sg", "net.sg", "org.sg", "edu.sg", "gov.sg",
-  "com.my", "net.my", "org.my", "edu.my", "gov.my",
-  "com.ph", "net.ph", "org.ph", "edu.ph", "gov.ph",
-  "com.pk", "net.pk", "org.pk", "edu.pk", "gov.pk",
-  "com.ng", "net.ng", "org.ng", "edu.ng", "gov.ng",
-  "co.il", "org.il", "net.il", "ac.il", "gov.il",
-  "co.th", "or.th", "ac.th", "go.th", "in.th",
-  "co.id", "or.id", "ac.id", "go.id", "web.id",
-  "com.tr", "net.tr", "org.tr", "edu.tr", "gov.tr",
-  "com.ua", "net.ua", "org.ua", "edu.ua", "gov.ua",
-  "com.eg", "net.eg", "org.eg", "edu.eg", "gov.eg",
-  "com.sa", "net.sa", "org.sa", "edu.sa", "gov.sa",
-  "co.ke", "or.ke", "ac.ke", "go.ke", "ne.ke",
+  // .ac
+  "com.ac", "gov.ac", "mil.ac", "net.ac", "org.ac",
+  // .ae
+  "ac.ae", "co.ae", "gov.ae", "mil.ae", "name.ae", "net.ae", "org.ae", "pro.ae", "sch.ae",
+  // .af
+  "com.af", "edu.af", "gov.af", "net.af", "org.af",
+  // .al
+  "com.al", "edu.al", "gov.al", "mil.al", "net.al", "org.al",
+  // .ao
+  "co.ao", "ed.ao", "gv.ao", "it.ao", "og.ao", "pb.ao",
+  // .ar
+  "com.ar", "edu.ar", "gob.ar", "gov.ar", "int.ar", "mil.ar", "net.ar", "org.ar", "tur.ar",
+  // .at
+  "ac.at", "co.at", "gv.at", "or.at",
+  // .au
+  "asn.au", "com.au", "csiro.au", "edu.au", "gov.au", "id.au", "net.au", "org.au",
+  // .ba
+  "co.ba", "com.ba", "edu.ba", "gov.ba", "mil.ba", "net.ba", "org.ba", "rs.ba",
+  "unbi.ba", "unmo.ba", "unsa.ba", "untz.ba", "unze.ba",
+  // .bb
+  "biz.bb", "co.bb", "com.bb", "edu.bb", "gov.bb", "info.bb", "net.bb", "org.bb",
+  "store.bb", "tv.bb",
+  // .bh
+  "biz.bh", "cc.bh", "com.bh", "edu.bh", "gov.bh", "info.bh", "net.bh", "org.bh",
+  // .bn
+  "com.bn", "edu.bn", "gov.bn", "net.bn", "org.bn",
+  // .bo
+  "com.bo", "edu.bo", "gob.bo", "gov.bo", "int.bo", "mil.bo", "net.bo", "org.bo", "tv.bo",
+  // .br
+  "adm.br", "adv.br", "agr.br", "am.br", "arq.br", "art.br", "ato.br", "b.br",
+  "bio.br", "blog.br", "bmd.br", "cim.br", "cng.br", "cnt.br", "com.br", "coop.br",
+  "ecn.br", "edu.br", "eng.br", "esp.br", "etc.br", "eti.br", "far.br", "flog.br",
+  "fm.br", "fnd.br", "fot.br", "fst.br", "g12.br", "ggf.br", "gov.br", "imb.br",
+  "ind.br", "inf.br", "jor.br", "jus.br", "lel.br", "mat.br", "med.br", "mil.br",
+  "mus.br", "net.br", "nom.br", "not.br", "ntr.br", "odo.br", "org.br", "ppg.br",
+  "pro.br", "psc.br", "psi.br", "qsl.br", "rec.br", "slg.br", "srv.br", "tmp.br",
+  "trd.br", "tur.br", "tv.br", "vet.br", "vlog.br", "wiki.br", "zlg.br",
+  // .bs
+  "com.bs", "edu.bs", "gov.bs", "net.bs", "org.bs",
+  // .bz
+  "com.bz", "edu.bz", "gov.bz", "net.bz", "org.bz",
+  // .ca
+  "ab.ca", "bc.ca", "mb.ca", "nb.ca", "nf.ca", "nl.ca", "ns.ca", "nt.ca",
+  "nu.ca", "on.ca", "pe.ca", "qc.ca", "sk.ca", "yk.ca",
+  // .ck
+  "biz.ck", "co.ck", "edu.ck", "gen.ck", "gov.ck", "info.ck", "net.ck", "org.ck",
+  // .cn
+  "ac.cn", "ah.cn", "bj.cn", "com.cn", "cq.cn", "edu.cn", "fj.cn", "gd.cn",
+  "gov.cn", "gs.cn", "gx.cn", "gz.cn", "ha.cn", "hb.cn", "he.cn", "hi.cn",
+  "hl.cn", "hn.cn", "jl.cn", "js.cn", "jx.cn", "ln.cn", "mil.cn", "net.cn",
+  "nm.cn", "nx.cn", "org.cn", "qh.cn", "sc.cn", "sd.cn", "sh.cn", "sn.cn",
+  "sx.cn", "tj.cn", "tw.cn", "xj.cn", "xz.cn", "yn.cn", "zj.cn",
+  // .co
+  "com.co", "edu.co", "gov.co", "mil.co", "net.co", "nom.co", "org.co",
+  // .cr
+  "ac.cr", "co.cr", "ed.cr", "fi.cr", "go.cr", "or.cr", "sa.cr",
+  // .cy
+  "ac.cy", "biz.cy", "com.cy", "ekloges.cy", "gov.cy", "ltd.cy", "name.cy",
+  "net.cy", "org.cy", "parliament.cy", "press.cy", "pro.cy", "tm.cy",
+  // .do
+  "art.do", "com.do", "edu.do", "gob.do", "gov.do", "mil.do", "net.do", "org.do",
+  "sld.do", "web.do",
+  // .dz
+  "art.dz", "asso.dz", "com.dz", "edu.dz", "gov.dz", "net.dz", "org.dz", "pol.dz",
+  // .ec
+  "com.ec", "edu.ec", "fin.ec", "gov.ec", "info.ec", "med.ec", "mil.ec", "net.ec",
+  "org.ec", "pro.ec",
+  // .eg
+  "com.eg", "edu.eg", "eun.eg", "gov.eg", "mil.eg", "name.eg", "net.eg", "org.eg", "sci.eg",
+  // .er
+  "com.er", "edu.er", "gov.er", "ind.er", "mil.er", "net.er", "org.er", "rochest.er", "w.er",
+  // .es
+  "com.es", "edu.es", "gob.es", "nom.es", "org.es",
+  // .et
+  "biz.et", "com.et", "edu.et", "gov.et", "info.et", "name.et", "net.et", "org.et",
+  // .fj
+  "ac.fj", "biz.fj", "com.fj", "info.fj", "mil.fj", "name.fj", "net.fj", "org.fj", "pro.fj",
+  // .fk
+  "ac.fk", "co.fk", "gov.fk", "net.fk", "nom.fk", "org.fk",
+  // .fr
+  "asso.fr", "com.fr", "gouv.fr", "nom.fr", "prd.fr", "presse.fr", "tm.fr",
+  // .gg
+  "co.gg", "net.gg", "org.gg",
+  // .gh
+  "com.gh", "edu.gh", "gov.gh", "mil.gh", "org.gh",
+  // .gn
+  "ac.gn", "com.gn", "gov.gn", "net.gn", "org.gn",
+  // .gr
+  "com.gr", "edu.gr", "gov.gr", "mil.gr", "net.gr", "org.gr",
+  // .gt
+  "com.gt", "edu.gt", "gob.gt", "ind.gt", "mil.gt", "net.gt", "org.gt",
+  // .gu
+  "com.gu", "edu.gu", "gov.gu", "net.gu", "org.gu",
+  // .hk
+  "com.hk", "edu.hk", "gov.hk", "idv.hk", "net.hk", "org.hk",
+  // .id
+  "ac.id", "co.id", "go.id", "mil.id", "net.id", "or.id", "sch.id", "web.id",
+  // .il
+  "ac.il", "co.il", "gov.il", "idf.il", "k12.il", "muni.il", "net.il", "org.il",
+  // .in
+  "4fd.in", "ac.in", "co.in", "edu.in", "ernet.in", "firm.in", "gen.in", "gov.in",
+  "ind.in", "mil.in", "net.in", "nic.in", "org.in", "res.in",
+  // .iq
+  "com.iq", "edu.iq", "gov.iq", "mil.iq", "net.iq", "org.iq",
+  // .ir
+  "ac.ir", "co.ir", "dnssec.ir", "gov.ir", "id.ir", "net.ir", "org.ir", "sch.ir",
+  // .it
+  "edu.it", "gov.it",
+  // .je
+  "co.je", "net.je", "org.je",
+  // .jo
+  "com.jo", "edu.jo", "gov.jo", "mil.jo", "name.jo", "net.jo", "org.jo", "sch.jo",
+  // .jp
+  "ac.jp", "ad.jp", "co.jp", "ed.jp", "go.jp", "gr.jp", "lg.jp", "ne.jp", "or.jp",
+  // .ke
+  "ac.ke", "co.ke", "go.ke", "info.ke", "me.ke", "mobi.ke", "ne.ke", "or.ke", "sc.ke",
+  // .kh
+  "com.kh", "edu.kh", "gov.kh", "mil.kh", "net.kh", "org.kh", "per.kh",
+  // .ki
+  "biz.ki", "com.ki", "de.ki", "edu.ki", "gov.ki", "info.ki", "mob.ki", "net.ki",
+  "org.ki", "tel.ki",
+  // .km
+  "asso.km", "com.km", "coop.km", "edu.km", "gouv.km", "medecin.km", "mil.km",
+  "nom.km", "notaires.km", "pharmaciens.km", "presse.km", "tm.km", "veterinaire.km",
+  // .kn
+  "edu.kn", "gov.kn", "net.kn", "org.kn",
+  // .kr
+  "ac.kr", "busan.kr", "chungbuk.kr", "chungnam.kr", "co.kr", "daegu.kr",
+  "daejeon.kr", "es.kr", "gangwon.kr", "go.kr", "gwangju.kr", "gyeongbuk.kr",
+  "gyeonggi.kr", "gyeongnam.kr", "hs.kr", "incheon.kr", "jeju.kr", "jeonbuk.kr",
+  "jeonnam.kr", "kg.kr", "mil.kr", "ms.kr", "ne.kr", "or.kr", "pe.kr", "re.kr",
+  "sc.kr", "seoul.kr", "ulsan.kr",
+  // .kw
+  "com.kw", "edu.kw", "gov.kw", "net.kw", "org.kw",
+  // .ky
+  "com.ky", "edu.ky", "gov.ky", "net.ky", "org.ky",
+  // .kz
+  "com.kz", "edu.kz", "gov.kz", "mil.kz", "net.kz", "org.kz",
+  // .lb
+  "com.lb", "edu.lb", "gov.lb", "net.lb", "org.lb",
+  // .lk
+  "assn.lk", "com.lk", "edu.lk", "gov.lk", "grp.lk", "hotel.lk", "int.lk", "ltd.lk",
+  "net.lk", "ngo.lk", "org.lk", "sch.lk", "soc.lk", "web.lk",
+  // .lr
+  "com.lr", "edu.lr", "gov.lr", "net.lr", "org.lr",
+  // .lv
+  "asn.lv", "com.lv", "conf.lv", "edu.lv", "gov.lv", "id.lv", "mil.lv", "net.lv", "org.lv",
+  // .ly
+  "com.ly", "edu.ly", "gov.ly", "id.ly", "med.ly", "net.ly", "org.ly", "plc.ly", "sch.ly",
+  // .ma
+  "ac.ma", "co.ma", "gov.ma", "net.ma", "org.ma", "press.ma",
+  // .mc
+  "asso.mc", "tm.mc",
+  // .me
+  "ac.me", "co.me", "edu.me", "gov.me", "its.me", "net.me", "org.me", "priv.me",
+  // .mg
+  "com.mg", "edu.mg", "gov.mg", "mil.mg", "nom.mg", "org.mg", "prd.mg", "tm.mg",
+  // .mk
+  "com.mk", "edu.mk", "gov.mk", "inf.mk", "name.mk", "net.mk", "org.mk", "pro.mk",
+  // .ml
+  "com.ml", "edu.ml", "gov.ml", "net.ml", "org.ml", "presse.ml",
+  // .mn
+  "edu.mn", "gov.mn", "org.mn",
+  // .mo
+  "com.mo", "edu.mo", "gov.mo", "net.mo", "org.mo",
+  // .mt
+  "com.mt", "edu.mt", "gov.mt", "net.mt", "org.mt",
+  // .mu
+  "ac.mu", "co.mu", "com.mu", "gov.mu", "net.mu", "or.mu", "org.mu",
+  // .mv
+  "aero.mv", "biz.mv", "com.mv", "coop.mv", "edu.mv", "gov.mv", "info.mv",
+  "int.mv", "mil.mv", "museum.mv", "name.mv", "net.mv", "org.mv", "pro.mv",
+  // .mw
+  "ac.mw", "co.mw", "com.mw", "coop.mw", "edu.mw", "gov.mw", "int.mw",
+  "museum.mw", "net.mw", "org.mw",
+  // .mx
+  "com.mx", "edu.mx", "gob.mx", "net.mx", "org.mx",
+  // .my
+  "com.my", "edu.my", "gov.my", "mil.my", "name.my", "net.my", "org.my", "sch.my",
+  // .mz
+  "ac.mz", "co.mz", "edu.mz", "gov.mz", "org.mz",
+  // .na
+  "co.na", "com.na",
+  // .nf
+  "arts.nf", "com.nf", "firm.nf", "info.nf", "net.nf", "other.nf", "per.nf",
+  "rec.nf", "store.nf", "web.nf",
+  // .ng
+  "biz.ng", "com.ng", "edu.ng", "gov.ng", "mil.ng", "mobi.ng", "name.ng",
+  "net.ng", "org.ng", "sch.ng",
+  // .ni
+  "ac.ni", "co.ni", "com.ni", "edu.ni", "gob.ni", "mil.ni", "net.ni", "nom.ni", "org.ni",
+  // .np
+  "com.np", "edu.np", "gov.np", "mil.np", "net.np", "org.np",
+  // .nr
+  "biz.nr", "com.nr", "edu.nr", "gov.nr", "info.nr", "net.nr", "org.nr",
+  // .nz
+  "ac.nz", "co.nz", "cri.nz", "geek.nz", "gen.nz", "govt.nz", "health.nz",
+  "iwi.nz", "maori.nz", "mil.nz", "net.nz", "org.nz", "parliament.nz", "school.nz",
+  // .om
+  "ac.om", "biz.om", "co.om", "com.om", "edu.om", "gov.om", "med.om", "mil.om",
+  "museum.om", "net.om", "org.om", "pro.om", "sch.om",
+  // .pa
+  "abo.pa", "ac.pa", "com.pa", "edu.pa", "gob.pa", "ing.pa", "med.pa", "net.pa",
+  "nom.pa", "org.pa", "sld.pa",
+  // .pe
+  "com.pe", "edu.pe", "gob.pe", "mil.pe", "net.pe", "nom.pe", "org.pe", "sld.pe",
+  // .ph
+  "com.ph", "edu.ph", "gov.ph", "i.ph", "mil.ph", "net.ph", "ngo.ph", "org.ph",
+  // .pk
+  "biz.pk", "com.pk", "edu.pk", "fam.pk", "gob.pk", "gok.pk", "gon.pk", "gop.pk",
+  "gos.pk", "gov.pk", "net.pk", "org.pk", "web.pk",
+  // .pl
+  "art.pl", "bialystok.pl", "biz.pl", "com.pl", "edu.pl", "gda.pl", "gdansk.pl",
+  "gorzow.pl", "gov.pl", "info.pl", "katowice.pl", "krakow.pl", "lodz.pl",
+  "lublin.pl", "mil.pl", "net.pl", "ngo.pl", "olsztyn.pl", "org.pl", "poznan.pl",
+  "pwr.pl", "radom.pl", "slupsk.pl", "szczecin.pl", "torun.pl", "warszawa.pl",
+  "waw.pl", "wroc.pl", "wroclaw.pl", "zgora.pl",
+  // .pr
+  "ac.pr", "biz.pr", "com.pr", "edu.pr", "est.pr", "gov.pr", "info.pr", "isla.pr",
+  "name.pr", "net.pr", "org.pr", "pro.pr", "prof.pr",
+  // .ps
+  "com.ps", "edu.ps", "gov.ps", "net.ps", "org.ps", "plo.ps", "sec.ps",
+  // .pt
+  "com.pt", "edu.pt", "gov.pt", "int.pt", "net.pt", "nome.pt", "org.pt", "publ.pt",
+  // .pw
+  "belau.pw", "co.pw", "ed.pw", "go.pw", "ne.pw", "or.pw",
+  // .py
+  "com.py", "edu.py", "gov.py", "mil.py", "net.py", "org.py",
+  // .qa
+  "com.qa", "edu.qa", "gov.qa", "mil.qa", "net.qa", "org.qa",
+  // .re
+  "asso.re", "com.re", "nom.re",
+  // .ro
+  "arts.ro", "com.ro", "firm.ro", "info.ro", "nom.ro", "nt.ro", "org.ro",
+  "rec.ro", "store.ro", "tm.ro", "www.ro",
+  // .rs
+  "ac.rs", "co.rs", "edu.rs", "gov.rs", "in.rs", "org.rs",
+  // .ru
+  "ac.ru", "adygeya.ru", "altai.ru", "amur.ru", "arkhangelsk.ru", "astrakhan.ru",
+  "bashkiria.ru", "belgorod.ru", "bir.ru", "bryansk.ru", "buryatia.ru", "cbg.ru",
+  "chel.ru", "chelyabinsk.ru", "chita.ru", "chukotka.ru", "chuvashia.ru", "com.ru",
+  "dagestan.ru", "e-burg.ru", "edu.ru", "gov.ru", "grozny.ru", "int.ru",
+  "irkutsk.ru", "ivanovo.ru", "izhevsk.ru", "jar.ru", "joshkar-ola.ru",
+  "kalmykia.ru", "kaluga.ru", "kamchatka.ru", "karelia.ru", "kazan.ru", "kchr.ru",
+  "kemerovo.ru", "khabarovsk.ru", "khakassia.ru", "khv.ru", "kirov.ru",
+  "koenig.ru", "komi.ru", "kostroma.ru", "kranoyarsk.ru", "kuban.ru", "kurgan.ru",
+  "kursk.ru", "lipetsk.ru", "magadan.ru", "mari.ru", "mari-el.ru", "marine.ru",
+  "mil.ru", "mordovia.ru", "mosreg.ru", "msk.ru", "murmansk.ru", "nalchik.ru",
+  "net.ru", "nnov.ru", "nov.ru", "novosibirsk.ru", "nsk.ru", "omsk.ru",
+  "orenburg.ru", "org.ru", "oryol.ru", "penza.ru", "perm.ru", "pp.ru", "pskov.ru",
+  "ptz.ru", "rnd.ru", "ryazan.ru", "sakhalin.ru", "samara.ru", "saratov.ru",
+  "simbirsk.ru", "smolensk.ru", "spb.ru", "stavropol.ru", "stv.ru", "surgut.ru",
+  "tambov.ru", "tatarstan.ru", "tom.ru", "tomsk.ru", "tsaritsyn.ru", "tsk.ru",
+  "tula.ru", "tuva.ru", "tver.ru", "tyumen.ru", "udm.ru", "udmurtia.ru",
+  "ulan-ude.ru", "vladikavkaz.ru", "vladimir.ru", "vladivostok.ru", "volgograd.ru",
+  "vologda.ru", "voronezh.ru", "vrn.ru", "vyatka.ru", "yakutia.ru", "yamal.ru",
+  "yekaterinburg.ru", "yuzhno-sakhalinsk.ru",
+  // .rw
+  "ac.rw", "co.rw", "com.rw", "edu.rw", "gouv.rw", "gov.rw", "int.rw", "mil.rw", "net.rw",
+  // .sa
+  "com.sa", "edu.sa", "gov.sa", "med.sa", "net.sa", "org.sa", "pub.sa", "sch.sa",
+  // .sb
+  "com.sb", "edu.sb", "gov.sb", "net.sb", "org.sb",
+  // .sc
+  "com.sc", "edu.sc", "gov.sc", "net.sc", "org.sc",
+  // .sd
+  "com.sd", "edu.sd", "gov.sd", "info.sd", "med.sd", "net.sd", "org.sd", "tv.sd",
+  // .se
+  "a.se", "ac.se", "b.se", "bd.se", "c.se", "d.se", "e.se", "f.se", "g.se",
+  "h.se", "i.se", "k.se", "l.se", "m.se", "n.se", "o.se", "org.se", "p.se",
+  "parti.se", "pp.se", "press.se", "r.se", "s.se", "t.se", "tm.se", "u.se",
+  "w.se", "x.se", "y.se", "z.se",
+  // .sg
+  "com.sg", "edu.sg", "gov.sg", "idn.sg", "net.sg", "org.sg", "per.sg",
+  // .sh
+  "co.sh", "com.sh", "edu.sh", "gov.sh", "net.sh", "nom.sh", "org.sh",
+  // .sl
+  "com.sl", "edu.sl", "gov.sl", "net.sl", "org.sl",
+  // .sn
+  "art.sn", "com.sn", "edu.sn", "gouv.sn", "org.sn", "perso.sn", "univ.sn",
+  // .st
+  "co.st", "com.st", "consulado.st", "edu.st", "embaixada.st", "gov.st", "mil.st",
+  "net.st", "org.st", "principe.st", "saotome.st", "store.st",
+  // .sv
+  "com.sv", "edu.sv", "gob.sv", "org.sv", "red.sv",
+  // .sy
+  "com.sy", "edu.sy", "gov.sy", "mil.sy", "net.sy", "news.sy", "org.sy",
+  // .sz
+  "ac.sz", "co.sz", "org.sz",
+  // .th
+  "ac.th", "co.th", "go.th", "in.th", "mi.th", "net.th", "or.th",
+  // .tj
+  "ac.tj", "biz.tj", "co.tj", "com.tj", "edu.tj", "go.tj", "gov.tj", "info.tj",
+  "int.tj", "mil.tj", "name.tj", "net.tj", "nic.tj", "org.tj", "test.tj", "web.tj",
+  // .tn
+  "agrinet.tn", "com.tn", "defense.tn", "edunet.tn", "ens.tn", "fin.tn", "gov.tn",
+  "ind.tn", "info.tn", "intl.tn", "mincom.tn", "nat.tn", "net.tn", "org.tn",
+  "perso.tn", "rnrt.tn", "rns.tn", "rnu.tn", "tourism.tn",
+  // .tr
+  "av.tr", "bbs.tr", "bel.tr", "biz.tr", "com.tr", "dr.tr", "edu.tr", "gen.tr",
+  "gov.tr", "info.tr", "k12.tr", "name.tr", "net.tr", "org.tr", "pol.tr",
+  "tel.tr", "tsk.tr", "tv.tr", "web.tr",
+  // .tt
+  "aero.tt", "biz.tt", "cat.tt", "co.tt", "com.tt", "coop.tt", "edu.tt", "gov.tt",
+  "info.tt", "int.tt", "jobs.tt", "mil.tt", "mobi.tt", "museum.tt", "name.tt",
+  "net.tt", "org.tt", "pro.tt", "tel.tt", "travel.tt",
+  // .tw
+  "club.tw", "com.tw", "ebiz.tw", "edu.tw", "game.tw", "gov.tw", "idv.tw",
+  "mil.tw", "net.tw", "org.tw",
+  // .tz
+  "ac.tz", "co.tz", "go.tz", "ne.tz", "or.tz",
+  // .ua
+  "biz.ua", "cherkassy.ua", "chernigov.ua", "chernovtsy.ua", "ck.ua", "cn.ua",
+  "co.ua", "com.ua", "crimea.ua", "cv.ua", "dn.ua", "dnepropetrovsk.ua",
+  "donetsk.ua", "dp.ua", "edu.ua", "gov.ua", "if.ua", "in.ua",
+  "ivano-frankivsk.ua", "kh.ua", "kharkov.ua", "kherson.ua", "khmelnitskiy.ua",
+  "kiev.ua", "kirovograd.ua", "km.ua", "kr.ua", "ks.ua", "kv.ua", "lg.ua",
+  "lugansk.ua", "lutsk.ua", "lviv.ua", "me.ua", "mk.ua", "net.ua",
+  "nikolaev.ua", "od.ua", "odessa.ua", "org.ua", "pl.ua", "poltava.ua", "pp.ua",
+  "rovno.ua", "rv.ua", "sebastopol.ua", "sumy.ua", "te.ua", "ternopil.ua",
+  "uzhgorod.ua", "vinnica.ua", "vn.ua", "zaporizhzhe.ua", "zhitomir.ua",
+  "zp.ua", "zt.ua",
+  // .ug
+  "ac.ug", "co.ug", "go.ug", "ne.ug", "or.ug", "org.ug", "sc.ug",
+  // .uk
+  "ac.uk", "bl.uk", "british-library.uk", "co.uk", "cym.uk", "gov.uk", "govt.uk",
+  "icnet.uk", "jet.uk", "lea.uk", "ltd.uk", "me.uk", "mil.uk", "mod.uk",
+  "national-library-scotland.uk", "nel.uk", "net.uk", "nhs.uk", "nic.uk",
+  "nls.uk", "org.uk", "orgn.uk", "parliament.uk", "plc.uk", "police.uk",
+  "sch.uk", "scot.uk", "soc.uk",
+  // .us
+  "4fd.us", "dni.us", "fed.us", "isa.us", "kids.us", "nsn.us",
+  // .uy
+  "com.uy", "edu.uy", "gub.uy", "mil.uy", "net.uy", "org.uy",
+  // .ve
+  "co.ve", "com.ve", "edu.ve", "gob.ve", "info.ve", "mil.ve", "net.ve", "org.ve", "web.ve",
+  // .vi
+  "co.vi", "com.vi", "k12.vi", "net.vi", "org.vi",
+  // .vn
+  "ac.vn", "biz.vn", "com.vn", "edu.vn", "gov.vn", "health.vn", "info.vn",
+  "int.vn", "name.vn", "net.vn", "org.vn", "pro.vn",
+  // .ye
+  "co.ye", "com.ye", "gov.ye", "ltd.ye", "me.ye", "net.ye", "org.ye", "plc.ye",
+  // .yu
+  "ac.yu", "co.yu", "edu.yu", "gov.yu", "org.yu",
+  // .za
+  "ac.za", "agric.za", "alt.za", "bourse.za", "city.za", "co.za", "cybernet.za",
+  "db.za", "edu.za", "gov.za", "grondar.za", "iaccess.za", "imt.za", "inca.za",
+  "landesign.za", "law.za", "mil.za", "net.za", "ngo.za", "nis.za", "nom.za",
+  "olivetti.za", "org.za", "pix.za", "school.za", "tm.za", "web.za",
+  // .zm
+  "ac.zm", "co.zm", "com.zm", "edu.zm", "gov.zm", "net.zm", "org.zm", "sch.zm",
 ]);
 
 function getRootDomain(domain: string): string {

app/api/fetch-ical/route.ts

@@ -1,9 +1,39 @@
+import { lookup } from 'node:dns/promises';
+import { BlockList, isIP } from 'node:net';
 import { NextRequest, NextResponse } from 'next/server';
 
 const MAX_RESPONSE_SIZE = 10 * 1024 * 1024; // 10MB
 const FETCH_TIMEOUT_MS = 15000;
 
-function isValidExternalUrl(urlString: string): boolean {
+const blockedAddressRanges = new BlockList();
+blockedAddressRanges.addAddress('0.0.0.0');
+blockedAddressRanges.addAddress('127.0.0.1');
+blockedAddressRanges.addSubnet('10.0.0.0', 8);
+blockedAddressRanges.addSubnet('172.16.0.0', 12);
+blockedAddressRanges.addSubnet('192.168.0.0', 16);
+blockedAddressRanges.addSubnet('169.254.0.0', 16);
+blockedAddressRanges.addAddress('::', 'ipv6');
+blockedAddressRanges.addAddress('::1', 'ipv6');
+blockedAddressRanges.addSubnet('fc00::', 7, 'ipv6');
+blockedAddressRanges.addSubnet('fe80::', 10, 'ipv6');
+
+function normalizeHostname(hostname: string): string {
+  return hostname.replace(/^\[(.*)\]$/, '$1').toLowerCase();
+}
+
+function isBlockedIpAddress(hostname: string): boolean {
+  const normalized = normalizeHostname(hostname);
+  const family = isIP(normalized);
+  if (family === 4) {
+    return blockedAddressRanges.check(normalized, 'ipv4');
+  }
+  if (family === 6) {
+    return blockedAddressRanges.check(normalized, 'ipv6');
+  }
+  return false;
+}
+
+async function isValidExternalUrl(urlString: string): Promise<boolean> {
   let url: URL;
   try {
     url = new URL(urlString);
@@ -15,21 +45,16 @@ function isValidExternalUrl(urlString: string): boolean {
     return false;
   }
 
-  const hostname = url.hostname.toLowerCase();
+  const hostname = normalizeHostname(url.hostname);
 
   // Block private/internal hostnames
   if (
     hostname === 'localhost' ||
-    hostname === '127.0.0.1' ||
-    hostname === '::1' ||
-    hostname === '0.0.0.0' ||
+    hostname.endsWith('.localhost') ||
     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)
+    hostname.endsWith('.localdomain')
   ) {
     return false;
   }
@@ -39,7 +64,24 @@ function isValidExternalUrl(urlString: string): boolean {
     return false;
   }
 
-  return true;
+  if (isBlockedIpAddress(hostname)) {
+    return false;
+  }
+
+  if (isIP(hostname)) {
+    return true;
+  }
+
+  try {
+    const records = await lookup(hostname, { all: true, verbatim: true });
+    if (records.length === 0) {
+      return false;
+    }
+    return records.every((record) => !isBlockedIpAddress(record.address));
+  } catch {
+    return false;
+  }
+
 }
 
 export async function POST(request: NextRequest) {
@@ -56,7 +98,7 @@ export async function POST(request: NextRequest) {
     return NextResponse.json({ error: 'URL is required' }, { status: 400 });
   }
 
-  if (!isValidExternalUrl(url)) {
+  if (!(await isValidExternalUrl(url))) {
     return NextResponse.json({ error: 'Invalid or disallowed URL' }, { status: 400 });
   }
 
@@ -64,20 +106,43 @@ export async function POST(request: NextRequest) {
     const controller = new AbortController();
     const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
 
-    const response = await fetch(url, {
-      signal: controller.signal,
-      headers: {
-        'Accept': 'text/calendar, application/ics, text/plain, */*',
-        'User-Agent': 'JMAP-Webmail/1.0 Calendar-Fetcher',
-      },
-      redirect: 'follow',
-    });
+    const MAX_REDIRECTS = 5;
+    let currentUrl = url;
+    let response: Response | undefined;
+
+    for (let i = 0; i <= MAX_REDIRECTS; i++) {
+      if (!(await isValidExternalUrl(currentUrl))) {
+        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 });
+        }
+        // Resolve relative redirects
+        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

@@ -0,0 +1,55 @@
+import { NextResponse } from 'next/server';
+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
+ *
+ * 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.
+ */
+export async function GET() {
+  try {
+    const [pluginRegistry, themeRegistry] = await Promise.all([
+      getPluginRegistry(),
+      getThemeRegistry(),
+    ]);
+
+    // Only serve enabled plugins
+    const plugins = pluginRegistry.plugins
+      .filter(p => p.enabled)
+      .map(p => ({
+        id: p.id,
+        name: p.name,
+        version: p.version,
+        author: p.author,
+        description: p.description,
+        type: p.type,
+        permissions: p.permissions,
+        entrypoint: p.entrypoint,
+        forceEnabled: p.forceEnabled || false,
+        settingsSchema: undefined, // Will be read from the bundle's manifest
+      }));
+
+    // Only serve enabled themes
+    const themes = themeRegistry.themes
+      .filter(t => t.enabled)
+      .map(t => ({
+        id: t.id,
+        name: t.name,
+        version: t.version,
+        author: t.author,
+        description: t.description,
+        variants: t.variants,
+        forceEnabled: t.forceEnabled || false,
+      }));
+
+    return NextResponse.json(
+      { plugins, themes },
+      { headers: { 'Cache-Control': 'no-store' } },
+    );
+  } catch (error) {
+    logger.error('Plugin list error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

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,36 +3,89 @@ 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;
+  const msg = error instanceof Error ? error.message : 'Unknown error';
+
+  switch (code) {
+    case 'EACCES':
+    case 'EPERM':
+      return {
+        message: 'Write permission denied on settings data directory. Check filesystem permissions for the SETTINGS_DATA_DIR (or data/settings/).',
+        status: 500,
+      };
+    case 'EROFS':
+      return {
+        message: 'Filesystem is read-only. Settings cannot be saved. Ensure the data directory is on a writable volume.',
+        status: 500,
+      };
+    case 'ENOSPC':
+      return {
+        message: 'No disk space available to save settings.',
+        status: 507,
+      };
+    case 'ENOENT':
+      return {
+        message: 'Settings data directory does not exist and could not be created. Check SETTINGS_DATA_DIR configuration.',
+        status: 500,
+      };
+    default:
+      if (msg.includes('SESSION_SECRET')) {
+        return {
+          message: 'Server configuration error: SESSION_SECRET is not set.',
+          status: 500,
+        };
+      }
+      return {
+        message: `Internal server error: ${msg}`,
+        status: 500,
+      };
+  }
+}
 
 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;
-    hasAnyCookie = true;
+    if (token) {
+      const session = decryptSession(token);
+      if (session && session.username === username && normalizeUrl(session.serverUrl) === normalizedServerUrl) {
+        return true;
+      }
+    }
 
-    const session = decryptSession(token);
-    if (session && session.username === username && session.serverUrl === serverUrl) {
-      return true; // Found a matching slot
+    // Check stalwart auth context cookie (set for all auth modes)
+    const ctx = readStalwartAuthContextFromStore(cookieStore, slot);
+    if (ctx && ctx.username === username && normalizeUrl(ctx.serverUrl) === normalizedServerUrl) {
+      return true;
     }
   }
 
-  // No cookies at all → can't verify, allow (same-origin protection applies)
-  if (!hasAnyCookie) return true;
-
-  // Cookies exist but none matched → identity mismatch
+  // No matching session found (or no cookies at all) → reject
   return false;
 }
 
@@ -53,15 +106,13 @@ export async function GET(request: NextRequest) {
 
   try {
     const settings = await loadUserSettings(username, serverUrl);
-    if (!settings) {
-      return NextResponse.json({ error: 'No settings found' }, { status: 404 });
-    }
-    return NextResponse.json({ settings });
+    return NextResponse.json({ settings: settings || null });
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';
     const code = (error as NodeJS.ErrnoException).code;
     logger.error('Settings load error', { error: message, code });
-    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    const classified = classifyError(error);
+    return NextResponse.json({ error: classified.message }, { status: classified.status });
   }
 }
 
@@ -84,13 +135,41 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: 'Identity mismatch' }, { status: 403 });
     }
 
-    await saveUserSettings(username, serverUrl, settings);
+    // Enforce admin policy - strip locked settings so users can't override them
+    await configManager.ensureLoaded();
+    const policy = configManager.getPolicy();
+    const filteredSettings = { ...settings };
+    for (const key of Object.keys(filteredSettings)) {
+      const restriction = policy.restrictions[key];
+      if (!restriction) continue;
+      if (restriction.locked) {
+        delete filteredSettings[key];
+        continue;
+      }
+      const value = filteredSettings[key];
+      if (restriction.allowedValues && restriction.allowedValues.length > 0) {
+        if (!restriction.allowedValues.includes(value)) {
+          delete filteredSettings[key];
+        }
+      }
+      if (typeof value === 'number') {
+        if (restriction.min !== undefined && value < restriction.min) {
+          delete filteredSettings[key];
+        }
+        if (restriction.max !== undefined && value > restriction.max) {
+          delete filteredSettings[key];
+        }
+      }
+    }
+
+    await saveUserSettings(username, serverUrl, filteredSettings);
     return NextResponse.json({ ok: true });
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';
     const code = (error as NodeJS.ErrnoException).code;
     logger.error('Settings save error', { error: message, code });
-    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    const classified = classifyError(error);
+    return NextResponse.json({ error: classified.message }, { status: classified.status });
   }
 }
 
@@ -112,7 +191,10 @@ export async function DELETE(request: NextRequest) {
     await deleteUserSettings(username, serverUrl);
     return NextResponse.json({ ok: true });
   } catch (error) {
-    logger.error('Settings delete error', { error: error instanceof Error ? error.message : 'Unknown error' });
-    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    const code = (error as NodeJS.ErrnoException).code;
+    logger.error('Settings delete error', { error: message, code });
+    const classified = classifyError(error);
+    return NextResponse.json({ error: classified.message }, { status: classified.status });
   }
 }

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.apiUrl.replace(/\/$/, '');
-    const targetUrl = cleanPath
-      ? `${baseUrl}/dav/file/${encodeURIComponent(creds.username)}/${cleanPath}`
-      : `${baseUrl}/dav/file/${encodeURIComponent(creds.username)}/`;
+    const targetUrl = buildDavTargetUrl(baseUrl, creds.username, davPath);
 
     // 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'] = cleanDest
-        ? `${baseUrl}/dav/file/${encodeURIComponent(creds.username)}/${cleanDest}`
-        : `${baseUrl}/dav/file/${encodeURIComponent(creds.username)}/`;
+      upstreamHeaders['Destination'] = buildDavTargetUrl(baseUrl, creds.username, destination);
     }
 
     const overwrite = request.headers.get('Overwrite');
     if (overwrite) upstreamHeaders['Overwrite'] = overwrite;
 
-    // Forward request body for methods that need it
-    let body: ArrayBuffer | null = null;
-    if (method === 'PROPFIND' || method === 'PUT') {
+    // Forward request body for methods that need it.
+    // PUT streams directly to upstream to avoid buffering large uploads in memory.
+    // 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

@@ -23,6 +23,39 @@
   --color-popover: #ffffff;
   --color-popover-foreground: #0f172a;
 
+  /* Sidebar */
+  --color-sidebar: #f8fafc;
+  --color-sidebar-foreground: #0f172a;
+  --color-sidebar-border: #e2e8f0;
+  --color-sidebar-accent: #f1f5f9;
+  --color-sidebar-accent-foreground: #0f172a;
+
+  /* Card */
+  --color-card: #ffffff;
+  --color-card-foreground: #0f172a;
+
+  /* Semantic status colors */
+  --color-success: #22c55e;
+  --color-success-foreground: #ffffff;
+  --color-warning: #eab308;
+  --color-warning-foreground: #ffffff;
+  --color-info: #3b82f6;
+  --color-info-foreground: #ffffff;
+
+  /* Selection states */
+  --color-selection: #dbeafe;
+  --color-selection-foreground: #1e40af;
+
+  /* Unread indicator */
+  --color-unread: #3b82f6;
+
+  /* Chart colors */
+  --color-chart-1: #3b82f6;
+  --color-chart-2: #22c55e;
+  --color-chart-3: #f59e0b;
+  --color-chart-4: #ef4444;
+  --color-chart-5: #8b5cf6;
+
   /* Settings variables */
   --font-size-base: 16px;
   --list-item-height: 48px;
@@ -54,6 +87,39 @@
   --color-destructive-foreground: #fafafa;
   --color-popover: #1c1c1c;
   --color-popover-foreground: #fafafa;
+
+  /* Sidebar */
+  --color-sidebar: #0a0a0a;
+  --color-sidebar-foreground: #fafafa;
+  --color-sidebar-border: #262626;
+  --color-sidebar-accent: #1a1a1a;
+  --color-sidebar-accent-foreground: #fafafa;
+
+  /* Card */
+  --color-card: #141414;
+  --color-card-foreground: #fafafa;
+
+  /* Semantic status colors */
+  --color-success: #16a34a;
+  --color-success-foreground: #ffffff;
+  --color-warning: #ca8a04;
+  --color-warning-foreground: #ffffff;
+  --color-info: #60a5fa;
+  --color-info-foreground: #ffffff;
+
+  /* Selection states */
+  --color-selection: rgba(59, 130, 246, 0.25);
+  --color-selection-foreground: #93c5fd;
+
+  /* Unread indicator */
+  --color-unread: #60a5fa;
+
+  /* Chart colors */
+  --color-chart-1: #60a5fa;
+  --color-chart-2: #4ade80;
+  --color-chart-3: #fbbf24;
+  --color-chart-4: #f87171;
+  --color-chart-5: #a78bfa;
 }
 
 @theme inline {
@@ -74,6 +140,27 @@
   --color-destructive-foreground: var(--color-destructive-foreground);
   --color-popover: var(--color-popover);
   --color-popover-foreground: var(--color-popover-foreground);
+  --color-sidebar: var(--color-sidebar);
+  --color-sidebar-foreground: var(--color-sidebar-foreground);
+  --color-sidebar-border: var(--color-sidebar-border);
+  --color-sidebar-accent: var(--color-sidebar-accent);
+  --color-sidebar-accent-foreground: var(--color-sidebar-accent-foreground);
+  --color-card: var(--color-card);
+  --color-card-foreground: var(--color-card-foreground);
+  --color-success: var(--color-success);
+  --color-success-foreground: var(--color-success-foreground);
+  --color-warning: var(--color-warning);
+  --color-warning-foreground: var(--color-warning-foreground);
+  --color-info: var(--color-info);
+  --color-info-foreground: var(--color-info-foreground);
+  --color-selection: var(--color-selection);
+  --color-selection-foreground: var(--color-selection-foreground);
+  --color-unread: var(--color-unread);
+  --color-chart-1: var(--color-chart-1);
+  --color-chart-2: var(--color-chart-2);
+  --color-chart-3: var(--color-chart-3);
+  --color-chart-4: var(--color-chart-4);
+  --color-chart-5: var(--color-chart-5);
 }
 
 * {
@@ -121,6 +208,11 @@ body {
   padding: 1rem 1.25rem;
 }
 
+.email-content-text a {
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
 .email-content {
   font-family:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
@@ -163,21 +255,16 @@ body {
 }
 
 .email-content blockquote {
-  border-left: 3px solid #d1d5db;
+  border-left: 3px solid var(--color-border);
   padding-left: 1rem;
   margin: 1rem 0;
-  color: #4b5563;
+  color: var(--color-muted-foreground);
   font-style: italic;
 }
 
-.dark .email-content blockquote {
-  border-left-color: #4b5563;
-  color: #9ca3af;
-}
-
 .email-content pre {
-  background-color: #f5f5f7;
-  border: 1px solid #e5e7eb;
+  background-color: var(--color-muted);
+  border: 1px solid var(--color-border);
   border-radius: 0.375rem;
   padding: 1rem;
   font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
@@ -186,23 +273,13 @@ body {
   margin: 1rem 0;
 }
 
-.dark .email-content pre {
-  background-color: #1f2937;
-  border-color: #374151;
-}
-
 .email-content code {
-  background-color: #f3f4f6;
+  background-color: var(--color-muted);
   padding: 0.125rem 0.375rem;
   border-radius: 0.25rem;
   font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
   font-size: 0.875rem;
-  color: #dc2626;
-}
-
-.dark .email-content code {
-  background-color: #374151;
-  color: #f87171;
+  color: var(--color-destructive);
 }
 
 .email-content h1,
@@ -282,26 +359,15 @@ body {
 .email-content table[border="1"] th,
 .email-content table[border="1"] td {
   padding: 0.625rem;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--color-border);
   text-align: left;
 }
 
 .email-content table.data-table th,
 .email-content table[border="1"] th {
-  background-color: #f9fafb;
+  background-color: var(--color-muted);
   font-weight: 600;
-  color: #374151;
-}
-
-.dark .email-content table.data-table th,
-.dark .email-content table[border="1"] th {
-  background-color: #1f2937;
-  color: #d1d5db;
-}
-
-.dark .email-content table.data-table td,
-.dark .email-content table[border="1"] td {
-  border-color: #374151;
+  color: var(--color-foreground);
 }
 
 /* Reset styles for layout tables (commonly used in HTML emails) */
@@ -323,28 +389,19 @@ body {
 
 .email-content hr {
   border: none;
-  border-top: 1px solid #e5e7eb;
+  border-top: 1px solid var(--color-border);
   margin: 1.5rem 0;
 }
 
-.dark .email-content hr {
-  border-top-color: #374151;
-}
-
 /* Email thread quoted text */
 .email-content .quoted-text {
-  border-left: 3px solid #d1d5db;
+  border-left: 3px solid var(--color-border);
   padding-left: 1rem;
   margin: 1rem 0;
-  color: #4b5563;
+  color: var(--color-muted-foreground);
   opacity: 0.8;
 }
 
-.dark .email-content .quoted-text {
-  border-left-color: #4b5563;
-  color: #9ca3af;
-}
-
 /* Toast animations */
 @keyframes toast-enter {
   from {
@@ -477,6 +534,37 @@ body {
   animation: slide-in-from-left 0.3s ease-out;
 }
 
+/* Calendar swipe animations (subtler slide for view transitions) */
+@keyframes cal-slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(30%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes cal-slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-30%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in-right {
+  animation: cal-slide-in-right 0.25s ease-out;
+}
+
+.animate-slide-in-left {
+  animation: cal-slide-in-left 0.25s ease-out;
+}
+
 /* Reduced motion: respect user OS preference */
 @media (prefers-reduced-motion: reduce) {
   *,
@@ -496,3 +584,95 @@ body {
     -webkit-backdrop-filter: none !important;
   }
 }
+
+/* TipTap Rich Text Editor */
+.tiptap {
+  outline: none;
+}
+
+.tiptap p {
+  margin: 0.25rem 0;
+}
+
+.tiptap h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0.5rem 0;
+}
+
+.tiptap h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0.5rem 0;
+}
+
+.tiptap ul {
+  list-style-type: disc;
+  padding-left: 1.5rem;
+  margin: 0.25rem 0;
+}
+
+.tiptap ol {
+  list-style-type: decimal;
+  padding-left: 1.5rem;
+  margin: 0.25rem 0;
+}
+
+.tiptap li {
+  margin: 0.125rem 0;
+}
+
+.tiptap blockquote {
+  border-left: 3px solid var(--color-border);
+  padding-left: 1rem;
+  margin: 0.5rem 0;
+  color: var(--color-muted-foreground);
+}
+
+.tiptap pre {
+  background-color: var(--color-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  padding: 0.75rem;
+  font-family: monospace;
+  font-size: 0.875rem;
+  overflow-x: auto;
+  margin: 0.5rem 0;
+}
+
+.tiptap code {
+  background-color: var(--color-muted);
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+
+.tiptap a {
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.tiptap img {
+  max-width: 100%;
+  height: auto;
+}
+
+.tiptap hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 1rem 0;
+}
+
+.tiptap p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--color-muted-foreground);
+  pointer-events: none;
+  height: 0;
+}
+
+.tiptap .ProseMirror-selectednode img {
+  outline: none;
+}

app/icon.svg

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

app/layout.tsx

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

app/not-found.tsx

@@ -8,12 +8,19 @@ export default function NotFound() {
 
   useEffect(() => {
     if (!isAuthenticated) {
-      window.location.href = "/login";
+      // Don't redirect admin routes to the webmail login page
+      const isAdminRoute = window.location.pathname === '/admin' || window.location.pathname.startsWith('/admin/');
+      if (!isAdminRoute) {
+        window.location.href = "/login";
+      }
     }
   }, [isAuthenticated]);
 
   if (!isAuthenticated) {
-    return null;
+    // Allow admin routes to render the 404 without redirecting
+    const isAdmin = typeof window !== 'undefined' &&
+      (window.location.pathname === '/admin' || window.location.pathname.startsWith('/admin/'));
+    if (!isAdmin) return null;
   }
 
   return (

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 { Calendar as CalendarIcon, MapPin, Users } from "lucide-react";
+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";
 
@@ -49,7 +49,7 @@ export function CalendarAgendaView({
 
   const grouped = useMemo(() => {
     const sorted = [...events].sort((a, b) =>
-      new Date(a.start).getTime() - new Date(b.start).getTime()
+      getEventStartDate(a).getTime() - getEventStartDate(b).getTime()
     );
 
     const groups: DayGroup[] = [];
@@ -144,9 +144,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;

components/calendar/calendar-day-view.tsx

@@ -4,10 +4,11 @@ import { useMemo, useEffect, useRef, useState } from "react";
 import { useTranslations, useFormatter } from "next-intl";
 import { format, isSameDay, isToday, parseISO } from "date-fns";
 import { cn } from "@/lib/utils";
-import { EventCard, parseDuration } from "./event-card";
+import { Check } from "lucide-react";
+import { EventCard } from "./event-card";
 import { QuickEventInput } from "./quick-event-input";
-import { formatSnapTime, getEventDayBounds, getPrimaryCalendarId, layoutOverlappingEvents } from "@/lib/calendar-utils";
-import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
+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";
 
@@ -22,6 +23,8 @@ interface CalendarDayViewProps {
   timeFormat?: "12h" | "24h";
   isMobile?: boolean;
   pendingPreview?: PendingEventPreview | null;
+  tasks?: CalendarTask[];
+  onToggleTaskComplete?: (task: CalendarTask) => void;
 }
 
 const HOUR_HEIGHT = 64;
@@ -38,6 +41,8 @@ export function CalendarDayView({
   timeFormat = "24h",
   isMobile,
   pendingPreview,
+  tasks,
+  onToggleTaskComplete,
 }: CalendarDayViewProps) {
   const t = useTranslations("calendar");
   const intlFormatter = useFormatter();
@@ -61,13 +66,23 @@ 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 */ }
     });
     return { timedEvents: timed, allDayEvents: allDay };
   }, [events, selectedDate]);
 
+  const dayTasks = useMemo(() => {
+    if (!tasks?.length) return [];
+    return tasks.filter(task => {
+      if (!task.due) return false;
+      try {
+        return isSameDay(parseISO(task.due), selectedDate);
+      } catch { return false; }
+    });
+  }, [tasks, selectedDate]);
+
   useEffect(() => {
     if (scrollRef.current) {
       const now = new Date();
@@ -112,10 +127,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
@@ -125,29 +140,67 @@ export function CalendarDayView({
         </h3>
       </div>
 
-      {allDayEvents.length > 0 && (
+      {(allDayEvents.length > 0 || dayTasks.length > 0) && (
         <div className="px-4 py-2 border-b border-border">
-          <div className="text-[10px] text-muted-foreground mb-1">{t("events.all_day")}</div>
-          <div className="space-y-1">
-            {allDayEvents.map((ev) => {
-              const calId = getPrimaryCalendarId(ev);
-              return (
-                <EventCard
-                  key={ev.id}
-                  event={ev}
-                  calendar={calId ? calendarMap.get(calId) : undefined}
-                  variant="chip"
-                  onClick={(rect) => onSelectEvent(ev, rect)}
-                  onMouseEnter={(rect) => onHoverEvent?.(ev, rect)}
-                  onMouseLeave={onHoverLeave}
-                />
-              );
-            })}
-          </div>
+          {allDayEvents.length > 0 && (
+            <>
+              <div className="text-[10px] text-muted-foreground mb-1">{t("events.all_day")}</div>
+              <div className="space-y-1">
+                {allDayEvents.map((ev) => {
+                  const calId = getPrimaryCalendarId(ev);
+                  return (
+                    <EventCard
+                      key={ev.id}
+                      event={ev}
+                      calendar={calId ? calendarMap.get(calId) : undefined}
+                      variant="chip"
+                      onClick={(rect) => onSelectEvent(ev, rect)}
+                      onMouseEnter={(rect) => onHoverEvent?.(ev, rect)}
+                      onMouseLeave={onHoverLeave}
+                    />
+                  );
+                })}
+              </div>
+            </>
+          )}
+          {dayTasks.length > 0 && (
+            <>
+              <div className={cn("text-[10px] text-muted-foreground mb-1", allDayEvents.length > 0 && "mt-2")}>{t("tasks.label")}</div>
+              <div className="space-y-0.5">
+                {dayTasks.map((task) => {
+                  const isCompleted = task.progress === "completed";
+                  const cal = calendars.find(c => task.calendarIds[c.id]);
+                  const color = cal?.color || "#3b82f6";
+                  return (
+                    <div
+                      key={task.id}
+                      className="flex items-center gap-1.5 px-1.5 py-0.5 rounded text-xs cursor-pointer hover:bg-muted/50 transition-colors"
+                      style={{ borderLeft: `3px solid ${color}` }}
+                    >
+                      <button
+                        onClick={(e) => { e.stopPropagation(); onToggleTaskComplete?.(task); }}
+                        className={cn(
+                          "flex-shrink-0 w-3.5 h-3.5 rounded-full border flex items-center justify-center",
+                          isCompleted
+                            ? "bg-success border-success text-success-foreground"
+                            : "border-muted-foreground/40 hover:border-primary"
+                        )}
+                      >
+                        {isCompleted && <Check className="h-2.5 w-2.5" />}
+                      </button>
+                      <span className={cn("truncate", isCompleted && "line-through text-muted-foreground")}>
+                        {task.title || t("tasks.no_title")}
+                      </span>
+                    </div>
+                  );
+                })}
+              </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" : "w-16")}>
             {HOURS.map((h) => (
@@ -188,11 +241,9 @@ export function CalendarDayView({
               />
             ))}
 
-            {layouted.map(({ event: ev, column, totalColumns }) => {
-              const start = parseISO(ev.start);
-              const startMin = start.getHours() * 60 + start.getMinutes();
-              const durMin = Math.max(15, parseDuration(ev.duration));
-              const top = (startMin / 60) * HOUR_HEIGHT;
+            {layouted.map(({ event: ev, column, totalColumns, startMinutes, endMinutes }) => {
+              const durMin = Math.max(15, endMinutes - startMinutes);
+              const top = (startMinutes / 60) * HOUR_HEIGHT;
               const baseHeight = Math.max(24, (durMin / 60) * HOUR_HEIGHT);
               const height = resizeVisual?.eventId === ev.id ? resizeVisual.heightPx : baseHeight;
               const calId = getPrimaryCalendarId(ev);
@@ -235,8 +286,8 @@ export function CalendarDayView({
                 style={{ top: (nowMinutes / 60) * HOUR_HEIGHT }}
               >
                 <div className="flex items-center">
-                  <div className="w-2.5 h-2.5 rounded-full bg-red-500 -ml-1" />
-                  <div className="flex-1 h-px bg-red-500" />
+                  <div className="w-2.5 h-2.5 rounded-full bg-destructive -ml-1" />
+                  <div className="flex-1 h-px bg-destructive" />
                 </div>
               </div>
             )}

components/calendar/calendar-month-view.tsx

@@ -121,13 +121,14 @@ export function CalendarMonthView({
     try {
       const data = JSON.parse(json);
       const originalStart = parseISO(data.originalStart);
+      const event = useCalendarStore.getState().events.find(e => e.id === data.eventId);
+      const isAllDay = event?.showWithoutTime;
       const newStart = new Date(day);
       newStart.setHours(originalStart.getHours(), originalStart.getMinutes(), originalStart.getSeconds(), 0);
-      const newStartISO = format(newStart, "yyyy-MM-dd'T'HH:mm:ss");
+      const newStartISO = isAllDay ? format(newStart, "yyyy-MM-dd") : format(newStart, "yyyy-MM-dd'T'HH:mm:ss");
       if (newStartISO === data.originalStart) return;
       const client = useAuthStore.getState().client;
       if (!client) return;
-      const event = useCalendarStore.getState().events.find(e => e.id === data.eventId);
       const hasParticipants = event?.participants && Object.keys(event.participants).length > 0;
       await useCalendarStore.getState().updateEvent(client, data.eventId, { start: newStartISO }, hasParticipants || undefined);
     } catch {

components/calendar/calendar-sidebar-panel.tsx

@@ -2,12 +2,14 @@
 
 import { useState, useRef, useEffect, useMemo } from "react";
 import { useTranslations } from "next-intl";
-import { Globe, Plus, RefreshCw, Share2, Trash2 } from "lucide-react";
+import { Globe, ListTodo, Pencil, RefreshCw, Share2, Trash2, Cake } 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 type { IJMAPClient } from '@/lib/jmap/client-interface';
 
@@ -17,6 +19,7 @@ interface CalendarSidebarPanelProps {
   onToggleVisibility: (id: string) => void;
   onColorChange?: (calendarId: string, color: string) => void;
   onSubscribe?: () => void;
+  onEditSubscription?: (subscriptionId: string) => void;
   client?: IJMAPClient | null;
 }
 
@@ -26,6 +29,7 @@ export function CalendarSidebarPanel({
   onToggleVisibility,
   onColorChange,
   onSubscribe,
+  onEditSubscription,
   client,
 }: CalendarSidebarPanelProps) {
   const t = useTranslations("calendar");
@@ -35,6 +39,15 @@ export function CalendarSidebarPanel({
   const refreshICalSubscription = useCalendarStore((s) => s.refreshICalSubscription);
   const removeICalSubscription = useCalendarStore((s) => s.removeICalSubscription);
   const timeFormat = useSettingsStore((s) => s.timeFormat);
+  const enableCalendarTasks = useSettingsStore((s) => s.enableCalendarTasks);
+  const tasks = useTaskStore((s) => s.tasks);
+  const setViewMode = useCalendarStore((s) => s.setViewMode);
+
+  const pendingTaskCount = useMemo(() => tasks.filter(t => t.progress !== 'completed' && t.progress !== 'cancelled').length, [tasks]);
+  const overdueTaskCount = useMemo(() => {
+    const now = new Date();
+    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 [contextMenuCalId, setContextMenuCalId] = useState<string | null>(null);
@@ -152,6 +165,9 @@ 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 */}
@@ -163,6 +179,16 @@ export function CalendarSidebarPanel({
               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={() => {
+                  setContextMenuCalId(null);
+                  onEditSubscription?.(sub.id);
+                }}
+                className="flex items-center gap-2 w-full px-3 py-1.5 text-sm hover:bg-muted transition-colors"
+              >
+                <Pencil className="w-3.5 h-3.5" />
+                {tSub('edit')}
+              </button>
               <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"
@@ -209,6 +235,21 @@ export function CalendarSidebarPanel({
 
   return (
     <div className="mt-4">
+      {enableCalendarTasks && (
+        <button
+          onClick={() => setViewMode('tasks')}
+          className="flex items-center gap-2 w-full px-1.5 py-1.5 mb-3 rounded-md text-sm hover:bg-muted transition-colors"
+        >
+          <ListTodo className="w-4 h-4 text-muted-foreground" />
+          <span>{t('tasks.label')}</span>
+          {pendingTaskCount > 0 && (
+            <span className="ml-auto text-xs text-muted-foreground">{pendingTaskCount}</span>
+          )}
+          {overdueTaskCount > 0 && (
+            <span className="text-xs text-destructive font-medium">{overdueTaskCount} {t('tasks.filter_overdue').toLowerCase()}</span>
+          )}
+        </button>
+      )}
       <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">
         {t("my_calendars")}
       </h3>

components/calendar/calendar-toolbar.tsx

@@ -3,7 +3,7 @@
 import { useState, useRef, useEffect } from "react";
 import { useTranslations, useFormatter } from "next-intl";
 import { Button } from "@/components/ui/button";
-import { ChevronLeft, ChevronRight, Plus, Upload, CalendarDays, Globe, ChevronDown } from "lucide-react";
+import { ChevronLeft, ChevronRight, Plus, Upload, CalendarDays, Globe, ChevronDown, ArrowLeft } from "lucide-react";
 import { addDays, startOfWeek } from "date-fns";
 import { cn } from "@/lib/utils";
 import type { CalendarViewMode } from "@/stores/calendar-store";
@@ -25,6 +25,7 @@ interface CalendarToolbarProps {
   calendars?: Calendar[];
   selectedCalendarIds?: string[];
   onToggleVisibility?: (id: string) => void;
+  enableCalendarTasks?: boolean;
 }
 
 export function CalendarToolbar({
@@ -39,13 +40,17 @@ export function CalendarToolbar({
   onSubscribe,
   isMobile,
   firstDayOfWeek = 1,
+  onNavigateBack,
   calendars,
   selectedCalendarIds,
   onToggleVisibility,
+  enableCalendarTasks,
 }: CalendarToolbarProps) {
   const t = useTranslations("calendar");
   const formatter = useFormatter();
-  const views: CalendarViewMode[] = ["month", "week", "day", "agenda"];
+  const views: CalendarViewMode[] = enableCalendarTasks
+    ? ["month", "week", "day", "agenda", "tasks"]
+    : ["month", "week", "day", "agenda"];
   const [showCalendarDropdown, setShowCalendarDropdown] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -86,13 +91,14 @@ export function CalendarToolbar({
         return isMobile
           ? formatter.dateTime(selectedDate, { month: "short", year: "numeric" })
           : formatter.dateTime(selectedDate, { month: "long", year: "numeric" });
+      case "tasks":
+        return t("views.tasks");
     }
   };
 
   const [showImportDropdown, setShowImportDropdown] = useState(false);
   const importDropdownRef = useRef<HTMLDivElement>(null);
-  const [showViewDropdown, setShowViewDropdown] = useState(false);
-  const viewDropdownRef = useRef<HTMLDivElement>(null);
+
 
   useEffect(() => {
     if (!showImportDropdown) return;
@@ -105,109 +111,76 @@ export function CalendarToolbar({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [showImportDropdown]);
 
-  useEffect(() => {
-    if (!showViewDropdown) return;
-    function handleClickOutside(e: MouseEvent) {
-      if (viewDropdownRef.current && !viewDropdownRef.current.contains(e.target as Node)) {
-        setShowViewDropdown(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [showViewDropdown]);
+
 
   return (
-    <div className={cn("flex items-center gap-1.5 px-2 py-2 border-b border-border flex-wrap", !isMobile && "px-4 py-3 gap-2")}>
+    <div className={cn("border-b border-border", !isMobile && "flex items-center gap-2 px-4 py-3")}>
+      {/* ── MOBILE TOOLBAR ── */}
       {isMobile && (
-        <div className="flex items-center gap-0.5">
-          <button onClick={onPrev} className="p-2 rounded hover:bg-muted transition-colors touch-manipulation" aria-label={t("nav_prev")}>
-            <ChevronLeft className="w-4 h-4" />
-          </button>
-          <span className={cn("text-sm font-medium text-center min-w-[80px]")}>
-            {getDateLabel()}
-          </span>
-          <button onClick={onNext} className="p-2 rounded hover:bg-muted transition-colors touch-manipulation" aria-label={t("nav_next")}>
-            <ChevronRight className="w-4 h-4" />
-          </button>
-        </div>
-      )}
+        <div className="flex flex-col gap-1 px-2 py-2">
+          {/* Row 1: Back / Date nav / Today */}
+          <div className="flex items-center gap-1">
+            {onNavigateBack && (
+              <button
+                onClick={onNavigateBack}
+                className="p-1.5 -ml-1 rounded-md hover:bg-muted transition-colors touch-manipulation"
+                aria-label={t("back_to_month")}
+              >
+                <ArrowLeft className="w-4 h-4" />
+              </button>
+            )}
+            <button onClick={onPrev} className="p-1.5 rounded-md hover:bg-muted transition-colors touch-manipulation" aria-label={t("nav_prev")}>
+              <ChevronLeft className="w-4 h-4" />
+            </button>
+            <span className="text-sm font-semibold text-center flex-1 select-none truncate">
+              {getDateLabel()}
+            </span>
+            <button onClick={onNext} className="p-1.5 rounded-md hover:bg-muted transition-colors touch-manipulation" aria-label={t("nav_next")}>
+              <ChevronRight className="w-4 h-4" />
+            </button>
+            <Button variant="ghost" size="sm" onClick={onToday} className="touch-manipulation text-xs h-7 px-2 ml-0.5">
+              {t("views.today")}
+            </Button>
+          </div>
 
-      <Button variant="outline" size="sm" onClick={onToday} className="touch-manipulation">
-        {t("views.today")}
-      </Button>
+          {/* Row 2: View switcher pills + calendar toggle */}
+          <div className="flex items-center gap-1.5">
+            <div className="flex flex-1 border border-border rounded-md overflow-hidden">
+              {views.map((v) => (
+                <button
+                  key={v}
+                  onClick={() => onViewModeChange(v)}
+                  className={cn(
+                    "flex-1 py-1.5 text-[11px] font-medium transition-colors touch-manipulation",
+                    v === viewMode
+                      ? "bg-primary text-primary-foreground"
+                      : "text-muted-foreground active:bg-muted"
+                  )}
+                >
+                  {t(`views.${v}`)}
+                </button>
+              ))}
+            </div>
 
-      {!isMobile && (
-        <div className="flex items-center gap-1">
-          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onPrev} aria-label={t("nav_prev")}>
-            <ChevronLeft className="w-4 h-4" />
-          </Button>
-          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onNext} aria-label={t("nav_next")}>
-            <ChevronRight className="w-4 h-4" />
-          </Button>
-          <span className="text-base font-semibold ml-2 select-none">
-            {getDateLabel()}
-          </span>
-        </div>
-      )}
-
-      {isMobile && calendars && selectedCalendarIds && onToggleVisibility && (
-        <div className="relative" ref={dropdownRef}>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setShowCalendarDropdown((v) => !v)}
-            aria-label={t("my_calendars")}
-            className="touch-manipulation"
-          >
-            <CalendarDays className="w-4 h-4" />
-          </Button>
-          {showCalendarDropdown && (
-            <div className="absolute top-full right-0 mt-1 z-50 bg-popover border border-border rounded-lg shadow-lg p-2 min-w-[180px]">
-              <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">
-                {t("my_calendars")}
-              </h3>
-              <div className="space-y-0.5">
-                {calendars.filter(c => !c.isShared).map((cal) => {
-                  const isVisible = selectedCalendarIds.includes(cal.id);
-                  const color = cal.color || "#3b82f6";
-                  return (
-                    <button
-                      key={cal.id}
-                      onClick={() => onToggleVisibility(cal.id)}
-                      className={cn(
-                        "flex items-center gap-2 w-full px-2 py-2 rounded-md text-sm transition-colors duration-150 touch-manipulation",
-                        "hover:bg-muted"
-                      )}
-                    >
-                      <span
-                        className={cn(
-                          "w-3.5 h-3.5 rounded-sm border-2 flex-shrink-0 transition-colors",
-                          isVisible ? "border-transparent" : "border-muted-foreground/40 bg-transparent"
-                        )}
-                        style={isVisible ? { backgroundColor: color, borderColor: color } : undefined}
-                      />
-                      <span className={cn("truncate", !isVisible && "text-muted-foreground")}>
-                        {cal.name}
-                      </span>
-                    </button>
-                  );
-                })}
-              </div>
-              {(() => {
-                const shared = calendars.filter(c => c.isShared);
-                const groups = new Map<string, { accountName: string; cals: typeof shared }>();
-                for (const c of shared) {
-                  const key = c.accountId || c.accountName || c.id;
-                  if (!groups.has(key)) groups.set(key, { accountName: c.accountName || key, cals: [] });
-                  groups.get(key)!.cals.push(c);
-                }
-                return Array.from(groups.values()).map((group) => (
-                  <div key={group.accountName} className="mt-2">
-                    <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-1 px-1">
-                      {group.accountName}
+            {calendars && selectedCalendarIds && onToggleVisibility && (
+              <div className="relative" ref={dropdownRef}>
+                <button
+                  onClick={() => setShowCalendarDropdown((v) => !v)}
+                  className={cn(
+                    "p-1.5 rounded-md border border-border transition-colors touch-manipulation",
+                    showCalendarDropdown ? "bg-muted" : "hover:bg-muted"
+                  )}
+                  aria-label={t("my_calendars")}
+                >
+                  <CalendarDays className="w-4 h-4" />
+                </button>
+                {showCalendarDropdown && (
+                  <div className="absolute top-full right-0 mt-1 z-50 bg-popover border border-border rounded-lg shadow-lg p-2 min-w-[180px]">
+                    <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">
+                      {t("my_calendars")}
                     </h3>
                     <div className="space-y-0.5">
-                      {group.cals.map((cal) => {
+                      {calendars.filter(c => !c.isShared).map((cal) => {
                         const isVisible = selectedCalendarIds.includes(cal.id);
                         const color = cal.color || "#3b82f6";
                         return (
@@ -233,44 +206,76 @@ export function CalendarToolbar({
                         );
                       })}
                     </div>
+                    {(() => {
+                      const shared = calendars.filter(c => c.isShared);
+                      const groups = new Map<string, { accountName: string; cals: typeof shared }>();
+                      for (const c of shared) {
+                        const key = c.accountId || c.accountName || c.id;
+                        if (!groups.has(key)) groups.set(key, { accountName: c.accountName || key, cals: [] });
+                        groups.get(key)!.cals.push(c);
+                      }
+                      return Array.from(groups.values()).map((group) => (
+                        <div key={group.accountName} className="mt-2">
+                          <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-1 px-1">
+                            {group.accountName}
+                          </h3>
+                          <div className="space-y-0.5">
+                            {group.cals.map((cal) => {
+                              const isVisible = selectedCalendarIds.includes(cal.id);
+                              const color = cal.color || "#3b82f6";
+                              return (
+                                <button
+                                  key={cal.id}
+                                  onClick={() => onToggleVisibility(cal.id)}
+                                  className={cn(
+                                    "flex items-center gap-2 w-full px-2 py-2 rounded-md text-sm transition-colors duration-150 touch-manipulation",
+                                    "hover:bg-muted"
+                                  )}
+                                >
+                                  <span
+                                    className={cn(
+                                      "w-3.5 h-3.5 rounded-sm border-2 flex-shrink-0 transition-colors",
+                                      isVisible ? "border-transparent" : "border-muted-foreground/40 bg-transparent"
+                                    )}
+                                    style={isVisible ? { backgroundColor: color, borderColor: color } : undefined}
+                                  />
+                                  <span className={cn("truncate", !isVisible && "text-muted-foreground")}>
+                                    {cal.name}
+                                  </span>
+                                </button>
+                              );
+                            })}
+                          </div>
+                        </div>
+                      ));
+                    })()}
                   </div>
-                ));
-              })()}
-            </div>
-          )}
+                )}
+              </div>
+            )}
+          </div>
         </div>
       )}
 
-      {isMobile && (
-        <div className="relative" ref={viewDropdownRef}>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setShowViewDropdown((v) => !v)}
-            className="touch-manipulation capitalize text-xs"
-          >
-            {t(`views.${viewMode}`)}
-            <ChevronLeft className="w-3 h-3 ml-1 rotate-[-90deg]" />
+      {/* ── DESKTOP TOOLBAR ── */}
+      {!isMobile && (
+        <div className="flex items-center gap-1">
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onPrev} aria-label={t("nav_prev")}>
+            <ChevronLeft className="w-4 h-4" />
           </Button>
-          {showViewDropdown && (
-            <div className="absolute top-full right-0 mt-1 z-50 bg-popover border border-border rounded-lg shadow-lg p-1 min-w-[120px]">
-              {views.map((v) => (
-                <button
-                  key={v}
-                  onClick={() => { onViewModeChange(v); setShowViewDropdown(false); }}
-                  className={cn(
-                    "flex items-center w-full px-3 py-2 rounded-md text-sm transition-colors touch-manipulation",
-                    v === viewMode ? "bg-primary text-primary-foreground" : "hover:bg-muted text-foreground"
-                  )}
-                >
-                  {t(`views.${v}`)}
-                </button>
-              ))}
-            </div>
-          )}
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onNext} aria-label={t("nav_next")}>
+            <ChevronRight className="w-4 h-4" />
+          </Button>
+          <span className="text-base font-semibold ml-2 select-none">
+            {getDateLabel()}
+          </span>
         </div>
       )}
 
+
+
+
+
       <div className="flex-1" />
 
       {!isMobile && (

components/calendar/calendar-week-view.tsx

@@ -6,10 +6,11 @@ import {
   startOfWeek, addDays, format, isSameDay, isToday, parseISO,
 } from "date-fns";
 import { cn } from "@/lib/utils";
-import { EventCard, parseDuration } from "./event-card";
+import { Check } from "lucide-react";
+import { EventCard } from "./event-card";
 import { QuickEventInput } from "./quick-event-input";
-import { buildWeekSegments, formatSnapTime, getEventDayBounds, getPrimaryCalendarId, layoutOverlappingEvents } from "@/lib/calendar-utils";
-import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
+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";
 
@@ -26,6 +27,8 @@ interface CalendarWeekViewProps {
   timeFormat?: "12h" | "24h";
   isMobile?: boolean;
   pendingPreview?: PendingEventPreview | null;
+  tasks?: CalendarTask[];
+  onToggleTaskComplete?: (task: CalendarTask) => void;
 }
 
 const HOUR_HEIGHT = 60;
@@ -44,20 +47,19 @@ export function CalendarWeekView({
   timeFormat = "24h",
   isMobile,
   pendingPreview,
+  tasks,
+  onToggleTaskComplete,
 }: CalendarWeekViewProps) {
   const t = useTranslations("calendar");
   const intlFormatter = useFormatter();
   const scrollRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
   const weekStart = (firstDayOfWeek === 0 ? 0 : 1) as 0 | 1;
 
   const weekDays = useMemo(() => {
-    if (isMobile) {
-      // Show 3-day window centered on selected date
-      return Array.from({ length: 3 }, (_, i) => addDays(selectedDate, i - 1));
-    }
     const start = startOfWeek(selectedDate, { weekStartsOn: weekStart });
     return Array.from({ length: 7 }, (_, i) => addDays(start, i));
-  }, [selectedDate, weekStart, isMobile]);
+  }, [selectedDate, weekStart]);
 
   const calendarMap = useMemo(() => {
     const map = new Map<string, Calendar>();
@@ -75,7 +77,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);
@@ -87,24 +89,70 @@ export function CalendarWeekView({
     return timed;
   }, [events]);
 
-  const allDaySegments = useMemo(() => buildWeekSegments(
-    events.filter((event) => event.showWithoutTime),
-    weekDays,
-  ), [events, weekDays]);
+  const allDaySegments = useMemo(() => {
+    const explicitAllDay = buildWeekSegmentsRaw(
+      events.filter((event) => event.showWithoutTime),
+      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);
   }, [allDaySegments]);
 
+  // Tasks grouped by day for the week
+  const tasksByDay = useMemo(() => {
+    if (!tasks?.length) return new Map<string, CalendarTask[]>();
+    const map = new Map<string, CalendarTask[]>();
+    for (const task of tasks) {
+      if (!task.due) continue;
+      try {
+        const key = format(parseISO(task.due), "yyyy-MM-dd");
+        const existing = map.get(key) || [];
+        existing.push(task);
+        map.set(key, existing);
+      } catch { /* skip */ }
+    }
+    return map;
+  }, [tasks]);
+
+  // Max tasks on any single day in this week
+  const taskRowCount = useMemo(() => {
+    let max = 0;
+    for (const day of weekDays) {
+      const key = format(day, "yyyy-MM-dd");
+      const count = tasksByDay.get(key)?.length ?? 0;
+      if (count > max) max = count;
+    }
+    return max;
+  }, [tasksByDay, weekDays]);
+
   const hasAllDay = useMemo(() => {
-    return allDaySegments.length > 0;
-  }, [allDaySegments]);
+    return allDaySegments.length > 0 || taskRowCount > 0;
+  }, [allDaySegments, taskRowCount]);
 
   useEffect(() => {
     if (scrollRef.current) {
       const now = new Date();
       scrollRef.current.scrollTop = Math.max(0, (now.getHours() - 1) * HOUR_HEIGHT);
     }
+    // On mobile, scroll horizontally to center today's column
+    if (isMobile && rootRef.current) {
+      const todayIdx = weekDays.findIndex(d => isToday(d));
+      if (todayIdx >= 0) {
+        const gutter = 40;
+        const colWidth = (rootRef.current.scrollWidth - gutter) / 7;
+        const target = gutter + todayIdx * colWidth - rootRef.current.clientWidth / 2 + colWidth / 2;
+        rootRef.current.scrollLeft = Math.max(0, target);
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const [nowMinutes, setNowMinutes] = useState(() => {
@@ -143,21 +191,29 @@ export function CalendarWeekView({
     return format(new Date(2000, 0, 1, h), "HH:mm");
   };
 
-  const colCount = isMobile ? 3 : 7;
+  const colCount = 7;
 
   return (
-    <div className="flex flex-col flex-1 overflow-hidden" role="grid" aria-label={t("views.week")}>
-      {hasAllDay && (
+    <div
+      ref={rootRef}
+      className={cn(
+        "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 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" : "w-14")}
-            style={{ minHeight: Math.max(28, allDayRowCount * 24 + 4) }}
+            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")}
+            style={{ minHeight: Math.max(28, (allDayRowCount + taskRowCount) * 24 + 4) }}
           >
             {t("events.all_day")}
           </div>
           <div
-            className={cn("flex-1 relative grid gap-px bg-border", isMobile ? "grid-cols-3" : "grid-cols-7")}
-            style={{ minHeight: Math.max(28, allDayRowCount * 24 + 4) }}
+            className="flex-1 relative grid gap-px bg-border grid-cols-7"
+            style={{ minHeight: Math.max(28, (allDayRowCount + taskRowCount) * 24 + 4) }}
           >
             {weekDays.map((day) => (
               <div key={format(day, "yyyy-MM-dd")} className="bg-background min-h-[28px]" />
@@ -191,13 +247,56 @@ export function CalendarWeekView({
                 );
               })}
             </div>
+
+            {/* Task chips in all-day area */}
+            {taskRowCount > 0 && (
+              <div className="absolute inset-x-0 pointer-events-none" style={{ top: allDayRowCount * 24 + 2 }}>
+                {weekDays.map((day, dayIndex) => {
+                  const key = format(day, "yyyy-MM-dd");
+                  const dayTasks = tasksByDay.get(key) || [];
+                  return dayTasks.map((task, taskIndex) => {
+                    const isCompleted = task.progress === "completed";
+                    const cal = calendars.find(c => task.calendarIds[c.id]);
+                    const color = cal?.color || "#3b82f6";
+                    return (
+                      <div
+                        key={`task-${task.id}`}
+                        className="absolute px-0.5 pointer-events-auto"
+                        style={{
+                          left: `calc(${(dayIndex / colCount) * 100}% + 1px)`,
+                          width: `calc(${(1 / colCount) * 100}% - 2px)`,
+                          top: taskIndex * 24,
+                          height: 20,
+                        }}
+                      >
+                        <div
+                          className="h-full rounded text-[10px] leading-[20px] font-medium px-1.5 truncate flex items-center gap-1 cursor-pointer hover:opacity-80"
+                          style={{ backgroundColor: `${color}20`, borderLeft: `3px solid ${color}` }}
+                          onClick={() => onToggleTaskComplete?.(task)}
+                        >
+                          <span className={cn(
+                            "w-2.5 h-2.5 rounded-full border flex-shrink-0 flex items-center justify-center",
+                            isCompleted ? "bg-success border-success" : "border-current"
+                          )}>
+                            {isCompleted && <Check className="h-2 w-2 text-white" />}
+                          </span>
+                          <span className={cn("truncate", isCompleted && "line-through text-muted-foreground")}>
+                            {task.title}
+                          </span>
+                        </div>
+                      </div>
+                    );
+                  });
+                })}
+              </div>
+            )}
           </div>
         </div>
       )}
 
       <div className="flex border-b border-border" role="row">
-        <div className={cn("flex-shrink-0", isMobile ? "w-10" : "w-14")} />
-        <div className={cn("flex-1 border-l border-border", isMobile ? "grid grid-cols-3" : "grid grid-cols-7")}>
+        <div className={cn("flex-shrink-0", isMobile ? "w-10 sticky left-0 z-10 bg-background" : "w-14")} />
+        <div className="flex-1 border-l border-border grid grid-cols-7">
           {weekDays.map((day) => {
             const todayCol = isToday(day);
             const selected = isSameDay(day, selectedDate);
@@ -230,9 +329,9 @@ 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" : "w-14")}>
+          <div className={cn("flex-shrink-0", isMobile ? "w-10 sticky left-0 z-10 bg-background" : "w-14")}>
             {HOURS.map((h) => (
               <div
                 key={h}
@@ -248,12 +347,12 @@ export function CalendarWeekView({
             ))}
           </div>
 
-          <div className={cn("flex-1 border-l border-border relative", isMobile ? "grid grid-cols-3" : "grid grid-cols-7")}>
+          <div className="flex-1 border-l border-border relative grid grid-cols-7">
             {weekDays.map((day) => {
               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
@@ -280,11 +379,9 @@ export function CalendarWeekView({
                     />
                   ))}
 
-                  {layouted.map(({ event: ev, column, totalColumns }) => {
-                    const start = parseISO(ev.start);
-                    const startMin = start.getHours() * 60 + start.getMinutes();
-                    const durMin = Math.max(15, parseDuration(ev.duration));
-                    const top = (startMin / 60) * HOUR_HEIGHT;
+                  {layouted.map(({ event: ev, column, totalColumns, startMinutes, endMinutes }) => {
+                    const durMin = Math.max(15, endMinutes - startMinutes);
+                    const top = (startMinutes / 60) * HOUR_HEIGHT;
                     const baseHeight = Math.max(20, (durMin / 60) * HOUR_HEIGHT);
                     const height = resizeVisual?.eventId === ev.id ? resizeVisual.heightPx : baseHeight;
                     const calId = getPrimaryCalendarId(ev);
@@ -327,8 +424,8 @@ export function CalendarWeekView({
                       style={{ top: (nowMinutes / 60) * HOUR_HEIGHT }}
                     >
                       <div className="flex items-center">
-                        <div className="w-2 h-2 rounded-full bg-red-500 -ml-1" />
-                        <div className="flex-1 h-px bg-red-500" />
+                        <div className="w-2 h-2 rounded-full bg-destructive -ml-1" />
+                        <div className="flex-1 h-px bg-destructive" />
                       </div>
                     </div>
                   )}
@@ -373,7 +470,8 @@ export function CalendarWeekView({
                   {pendingPreview && !pendingPreview.allDay && isSameDay(pendingPreview.start, day) && (
                     (() => {
                       const startMin = pendingPreview.start.getHours() * 60 + pendingPreview.start.getMinutes();
-                      const endMin = pendingPreview.end.getHours() * 60 + pendingPreview.end.getMinutes();
+                      let endMin = pendingPreview.end.getHours() * 60 + pendingPreview.end.getMinutes();
+                      if (endMin <= startMin) endMin = 1440;
                       const durationMin = Math.max(15, endMin - startMin);
                       const cal = calendars.find(c => c.id === pendingPreview.calendarId);
                       const color = cal?.color || "hsl(var(--primary))";
@@ -404,5 +502,6 @@ export function CalendarWeekView({
         </div>
       </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 {
@@ -68,14 +69,14 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
   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}` : ""}`;
 

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;
@@ -192,6 +193,10 @@ export function EventDetailPopover({
   useEffect(() => {
     const handleKey = (e: KeyboardEvent) => {
       if (e.key === "Escape") onClose();
+      const target = e.target as HTMLElement;
+      const tag = target?.tagName?.toLowerCase();
+      if (tag === "input" || tag === "textarea" || tag === "select") return;
+      if (target?.getAttribute("contenteditable") === "true") return;
       if (e.key === "e" && !noteExpanded) {
         e.preventDefault();
         onEdit();
@@ -293,7 +298,7 @@ export function EventDetailPopover({
             <p className="text-xs text-muted-foreground mt-0.5 pl-[18px]">
               {calendar.name}
               {event.status === "tentative" && (
-                <span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
+                <span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-warning/15 text-warning">
                   {t("detail.tentative")}
                 </span>
               )}
@@ -503,8 +508,8 @@ export function EventDetailPopover({
               onClick={() => onRsvp("accepted")}
               className={
                 userCurrentStatus === "accepted"
-                  ? "bg-green-600 hover:bg-green-700 text-white dark:bg-green-500 dark:hover:bg-green-600"
-                  : "text-green-600 dark:text-green-400 border-green-300 dark:border-green-700 hover:bg-green-50 dark:hover:bg-green-950"
+                  ? "bg-success hover:bg-success/80 text-success-foreground"
+                  : "text-success border-success/30 hover:bg-success/10"
               }
             >
               {userCurrentStatus === "accepted" && <Check className="w-3.5 h-3.5 mr-1" />}
@@ -516,8 +521,8 @@ export function EventDetailPopover({
               onClick={() => onRsvp("tentative")}
               className={
                 userCurrentStatus === "tentative"
-                  ? "bg-amber-600 hover:bg-amber-700 text-white dark:bg-amber-500 dark:hover:bg-amber-600"
-                  : "border border-amber-500 text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950"
+                  ? "bg-warning hover:bg-warning/80 text-warning-foreground"
+                  : "border border-warning/30 text-warning hover:bg-warning/10"
               }
             >
               {userCurrentStatus === "tentative" && <Check className="w-3.5 h-3.5 mr-1" />}
@@ -529,8 +534,8 @@ export function EventDetailPopover({
               onClick={() => onRsvp("declined")}
               className={
                 userCurrentStatus === "declined"
-                  ? "bg-red-600 hover:bg-red-700 text-white dark:bg-red-500 dark:hover:bg-red-600"
-                  : "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950"
+                  ? "bg-destructive hover:bg-destructive/80 text-destructive-foreground"
+                  : "text-destructive hover:bg-destructive/10"
               }
             >
               {userCurrentStatus === "declined" && <Check className="w-3.5 h-3.5 mr-1" />}
@@ -544,7 +549,7 @@ export function EventDetailPopover({
       <div className="px-4 py-2.5 border-t border-border flex items-center gap-1.5">
         {showDeleteConfirm ? (
           <div className="flex items-center gap-2 w-full">
-            <span className="text-sm text-red-600 dark:text-red-400 flex-1">
+            <span className="text-sm text-destructive flex-1">
               {t("form.delete_confirm")}
             </span>
             <Button
@@ -607,9 +612,9 @@ function ParticipantStatusBadge({
   t: ReturnType<typeof useTranslations>;
 }) {
   const colors: Record<string, string> = {
-    accepted: "text-green-600 dark:text-green-400",
-    declined: "text-red-600 dark:text-red-400",
-    tentative: "text-amber-600 dark:text-amber-400",
+    accepted: "text-success",
+    declined: "text-destructive",
+    tentative: "text-warning",
     "needs-action": "text-muted-foreground",
   };
   const labels: Record<string, string> = {

components/calendar/event-modal.tsx

@@ -8,7 +8,7 @@ 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 {
   isOrganizer,
@@ -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;
@@ -59,10 +61,12 @@ function buildDuration(startDate: Date, endDate: Date): string {
   const minutes = totalMinutes % 60;
   let dur = "P";
   if (days > 0) dur += `${days}D`;
-  dur += "T";
-  if (hours > 0) dur += `${hours}H`;
-  if (minutes > 0) dur += `${minutes}M`;
-  if (dur === "PT") dur = "PT0M";
+  if (hours > 0 || minutes > 0) {
+    dur += "T";
+    if (hours > 0) dur += `${hours}H`;
+    if (minutes > 0) dur += `${minutes}M`;
+  }
+  if (dur === "P") dur = "PT0M";
   return dur;
 }
 
@@ -83,9 +87,9 @@ function getAlertLabel(event: CalendarEvent, t: ReturnType<typeof useTranslation
   if (!first || 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$/);
+  const minMatch = offset.match(/-?PT(\d+)M$/);
   if (minMatch) return t("alerts.minutes_before", { count: parseInt(minMatch[1]) });
-  const hourMatch = offset.match(/-?PT?(\d+)H$/);
+  const hourMatch = offset.match(/-?PT(\d+)H$/);
   if (hourMatch) return t("alerts.hours_before", { count: parseInt(hourMatch[1]) });
   const dayMatch = offset.match(/-?P(\d+)D/);
   if (dayMatch) return t("alerts.days_before", { count: parseInt(dayMatch[1]) });
@@ -157,7 +161,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;
@@ -175,9 +179,7 @@ export function EventModal({
       if (event.showWithoutTime) {
         return getEventDisplayEndDate(event);
       }
-      const s = parseISO(event.start);
-      const dur = parseDuration(event.duration);
-      return new Date(s.getTime() + dur * 60000);
+      return getEventEndDate(event);
     }
     if (defaultEndDate) return new Date(defaultEndDate);
     return addHours(getInitialStart(), 1);
@@ -188,6 +190,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()));
@@ -209,9 +214,9 @@ export function EventModal({
     if (first.trigger["@type"] === "OffsetTrigger") {
       const offset = first.trigger.offset;
       if (offset === "PT0S") return "at_time";
-      const minMatch = offset.match(/-?PT?(\d+)M$/);
+      const minMatch = offset.match(/-?PT(\d+)M$/);
       if (minMatch) return minMatch[1] as AlertOption;
-      const hourMatch = offset.match(/-?PT?(\d+)H$/);
+      const hourMatch = offset.match(/-?PT(\d+)H$/);
       if (hourMatch) return String(parseInt(hourMatch[1]) * 60) as AlertOption;
       const dayMatch = offset.match(/-?P(\d+)D/);
       if (dayMatch) return String(parseInt(dayMatch[1]) * 1440) as AlertOption;
@@ -263,7 +268,7 @@ export function EventModal({
       ? `${startDate}T00:00:00`
       : `${startDate}T${startTime}:00`;
 
-    const start = new Date(startStr);
+    const start = allDay ? parseISO(startStr) : new Date(startStr);
     let duration: string;
 
     if (allDay) {
@@ -313,6 +318,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",
@@ -361,8 +380,10 @@ export function EventModal({
         { name: organizerName, email: organizerEmail },
         attendees
       ) as Record<string, CalendarParticipant>;
+      data.replyTo = { imip: `mailto:${organizerEmail}` };
     } else if (attendees.length === 0 && event?.participants) {
       data.participants = null;
+      data.replyTo = null;
     }
 
     const shouldSendScheduling = attendees.length > 0 && sendInvitations;
@@ -372,7 +393,7 @@ export function EventModal({
     } 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;
@@ -382,12 +403,14 @@ 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 = generateUUID();
     const data: Partial<CalendarEvent> = {
+      uid: newUid,
       title: event.title,
       description: event.description,
-      start: format(newStart, "yyyy-MM-dd'T'HH:mm:ss"),
+      start: event.showWithoutTime ? format(newStart, "yyyy-MM-dd") : format(newStart, "yyyy-MM-dd'T'HH:mm:ss"),
       duration: event.duration,
       timeZone: event.timeZone,
       showWithoutTime: event.showWithoutTime,
@@ -397,6 +420,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);
@@ -450,9 +474,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);
 
@@ -524,8 +548,8 @@ export function EventModal({
                   variant={userCurrentStatus === "accepted" ? "default" : "outline"}
                   onClick={() => handleRsvp("accepted")}
                   className={userCurrentStatus === "accepted"
-                    ? "bg-green-600 hover:bg-green-700 text-white dark:bg-green-500 dark:hover:bg-green-600"
-                    : "text-green-600 dark:text-green-400 border-green-300 dark:border-green-700 hover:bg-green-50 dark:hover:bg-green-950"}
+                    ? "bg-success hover:bg-success/80 text-success-foreground"
+                    : "text-success border-success/30 hover:bg-success/10"}
                 >
                   {userCurrentStatus === "accepted" && <Check className="w-4 h-4 mr-1" />}
                   {t("participants.accepted")}
@@ -535,8 +559,8 @@ export function EventModal({
                   variant={userCurrentStatus === "tentative" ? "default" : "outline"}
                   onClick={() => handleRsvp("tentative")}
                   className={userCurrentStatus === "tentative"
-                    ? "bg-amber-600 hover:bg-amber-700 text-white dark:bg-amber-500 dark:hover:bg-amber-600"
-                    : "border border-amber-500 text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950"}
+                    ? "bg-warning hover:bg-warning/80 text-warning-foreground"
+                    : "border border-warning/30 text-warning hover:bg-warning/10"}
                 >
                   {userCurrentStatus === "tentative" && <Check className="w-4 h-4 mr-1" />}
                   {t("participants.tentative")}
@@ -546,8 +570,8 @@ export function EventModal({
                   variant={userCurrentStatus === "declined" ? "default" : "ghost"}
                   onClick={() => handleRsvp("declined")}
                   className={userCurrentStatus === "declined"
-                    ? "bg-red-600 hover:bg-red-700 text-white dark:bg-red-500 dark:hover:bg-red-600"
-                    : "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950"}
+                    ? "bg-destructive hover:bg-destructive/80 text-destructive-foreground"
+                    : "text-destructive hover:bg-destructive/10"}
                 >
                   {userCurrentStatus === "declined" && <Check className="w-4 h-4 mr-1" />}
                   {t("participants.declined")}
@@ -561,9 +585,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);
@@ -695,8 +719,8 @@ export function EventModal({
             {onDelete && (
               showDeleteConfirm ? (
                 <div className="flex items-center gap-2">
-                  <span className="text-sm text-red-600 dark:text-red-400">{t("form.delete_confirm")}</span>
-                  <Button variant="outline" size="sm" onClick={() => { onDelete(event.id, hasParticipants || undefined); onClose(); }} className="text-red-600 dark:text-red-400 border-red-300 dark:border-red-700">
+                  <span className="text-sm text-destructive">{t("form.delete_confirm")}</span>
+                  <Button variant="outline" size="sm" onClick={() => { onDelete(event.id, hasParticipants || undefined); onClose(); }} className="text-destructive border-destructive/30">
                     {t("events.delete")}
                   </Button>
                   <Button variant="ghost" size="sm" onClick={() => setShowDeleteConfirm(false)}>
@@ -704,7 +728,7 @@ export function EventModal({
                   </Button>
                 </div>
               ) : (
-                <Button variant="ghost" size="sm" onClick={() => setShowDeleteConfirm(true)} className="text-red-600 dark:text-red-400">
+                <Button variant="ghost" size="sm" onClick={() => setShowDeleteConfirm(true)} className="text-destructive">
                   <Trash2 className="w-4 h-4 mr-1" />
                   {t("events.delete")}
                 </Button>
@@ -774,6 +798,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">
@@ -991,9 +1048,9 @@ function StatusBadge({ status, isOrganizer, t }: {
     return <span className="text-xs text-primary">{t("participants.organizer")}</span>;
   }
   const colors: Record<string, string> = {
-    accepted: "text-green-600 dark:text-green-400",
-    declined: "text-red-600 dark:text-red-400",
-    tentative: "text-amber-600 dark:text-amber-400",
+    accepted: "text-success",
+    declined: "text-destructive",
+    tentative: "text-warning",
     "needs-action": "text-muted-foreground",
   };
   const labels: Record<string, string> = {

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")
@@ -349,7 +351,7 @@ export function ICalImportModal({ calendars, client, onClose }: ICalImportModalP
           )}
 
           {error && (
-            <div className="text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/30 rounded-md px-3 py-2">
+            <div className="text-sm text-destructive bg-destructive/10 rounded-md px-3 py-2">
               {error}
             </div>
           )}

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 [name, setName] = useState("");
-  const [color, setColor] = useState("#3b82f6");
-  const [refreshInterval, setRefreshInterval] = useState(60);
+  const isEdit = !!editSubscription;
+
+  const [url, setUrl] = useState(editSubscription?.url || "");
+  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 (subscription) {
-        toast.success(t("success", { name: name.trim() }));
+      if (isEdit && editSubscription) {
+        const updates: { url?: string; name?: string; color?: string; refreshInterval?: number } = {};
+        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

@@ -1,15 +1,16 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, Fragment } from "react";
 import { useTranslations, useFormatter } from "next-intl";
 import { ChevronLeft, ChevronRight, ChevronDown } from "lucide-react";
 import {
   startOfMonth, endOfMonth, startOfWeek, endOfWeek,
   addMonths, subMonths, addYears, subYears, setMonth, setYear,
-  eachDayOfInterval, getMonth, getYear,
+  eachDayOfInterval, getMonth, getYear, getISOWeek, getWeek,
   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";
@@ -26,6 +27,7 @@ interface MiniCalendarProps {
   onChangeMonth: (date: Date) => void;
   events?: CalendarEvent[];
   firstDayOfWeek?: number;
+  showWeekNumbers?: boolean;
 }
 
 export function MiniCalendar({
@@ -35,6 +37,7 @@ export function MiniCalendar({
   onChangeMonth,
   events = [],
   firstDayOfWeek = 1,
+  showWeekNumbers = false,
 }: MiniCalendarProps) {
   const t = useTranslations("calendar");
   const intlFormatter = useFormatter();
@@ -52,7 +55,14 @@ export function MiniCalendar({
   const eventDates = useMemo(() => {
     const set = new Set<string>();
     events.forEach(e => {
-      try { set.add(format(new Date(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]);
@@ -61,6 +71,17 @@ export function MiniCalendar({
     ? ["sun", "mon", "tue", "wed", "thu", "fri", "sat"] as const
     : ["mon", "tue", "wed", "thu", "fri", "sat", "sun"] as const;
 
+  // Compute week numbers for each row (one per 7-day chunk)
+  const weekNumbers = useMemo(() => {
+    if (!showWeekNumbers) return [];
+    const nums: number[] = [];
+    for (let i = 0; i < days.length; i += 7) {
+      // Use the first day of each row to determine the week number
+      nums.push(weekStart === 1 ? getISOWeek(days[i]) : getWeek(days[i], { weekStartsOn: 0 }));
+    }
+    return nums;
+  }, [days, showWeekNumbers, weekStart]);
+
   const currentYear = getYear(displayMonth);
   const currentMonth = getMonth(displayMonth);
   const decadeStart = Math.floor(currentYear / 10) * 10;
@@ -135,35 +156,49 @@ export function MiniCalendar({
       </div>
 
       {pickerView === "days" && (
-        <div className="grid grid-cols-7 gap-0">
+        <div className={cn("grid gap-0", showWeekNumbers ? "grid-cols-[auto_repeat(7,1fr)]" : "grid-cols-7")}>
+          {showWeekNumbers && (
+            <div className="text-center text-[10px] font-medium text-muted-foreground py-1 w-5" />
+          )}
           {dayHeaders.map((d) => (
             <div key={d} className="text-center text-[10px] font-medium text-muted-foreground py-1">
               {t(`days.${d}`)}
             </div>
           ))}
-          {days.map((day) => {
+          {days.map((day, index) => {
             const inMonth = isSameMonth(day, displayMonth);
             const selected = isSameDay(day, selectedDate);
             const today = isToday(day);
             const hasEvent = eventDates.has(format(day, "yyyy-MM-dd"));
+            const isFirstDayOfRow = index % 7 === 0;
 
             return (
-              <button
-                key={day.toISOString()}
-                onClick={() => onSelectDate(day)}
-                className={cn(
-                  "relative flex items-center justify-center w-7 h-7 text-xs rounded-full transition-colors",
-                  !inMonth && "text-muted-foreground/40",
-                  inMonth && !selected && "hover:bg-muted",
-                  today && !selected && "font-bold text-primary",
-                  selected && "bg-primary text-primary-foreground"
+              <Fragment key={day.toISOString()}>
+                {showWeekNumbers && isFirstDayOfRow && (
+                  <div
+                    key={`wk-${index}`}
+                    className="flex items-center justify-center w-5 text-[9px] text-muted-foreground/60 font-medium"
+                  >
+                    {weekNumbers[index / 7]}
+                  </div>
                 )}
-              >
-                {format(day, "d")}
-                {hasEvent && !selected && (
-                  <span className="absolute bottom-0.5 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-primary" />
-                )}
-              </button>
+                <button
+                  key={`day-${day.toISOString()}`}
+                  onClick={() => onSelectDate(day)}
+                  className={cn(
+                    "relative flex items-center justify-center w-7 h-7 text-xs rounded-full transition-colors",
+                    !inMonth && "text-muted-foreground/40",
+                    inMonth && !selected && "hover:bg-muted",
+                    today && !selected && "font-bold text-primary",
+                    selected && "bg-primary text-primary-foreground"
+                  )}
+                >
+                  {format(day, "d")}
+                  {hasEvent && !selected && (
+                    <span className="absolute bottom-0.5 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-primary" />
+                  )}
+                </button>
+              </Fragment>
             );
           })}
         </div>

components/calendar/task-list-view.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { useMemo, useCallback } from "react";
+import { useMemo, useCallback, useState } from "react";
 import { useTranslations } from "next-intl";
 import { format, parseISO, isPast, isToday, isTomorrow } from "date-fns";
-import { Check, Circle, Flag, CalendarDays, ListTodo } from "lucide-react";
+import { Check, Flag, CalendarDays, ListTodo, Plus } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { CalendarTask, Calendar } from "@/lib/jmap/types";
 import type { TaskViewFilter } from "@/stores/task-store";
@@ -18,6 +18,7 @@ interface TaskListViewProps {
   onSelectTask: (task: CalendarTask) => void;
   onToggleComplete: (task: CalendarTask) => void;
   selectedTaskId?: string | null;
+  onQuickCreate?: (title: string) => void;
 }
 
 function getTaskPriorityIcon(priority: number) {
@@ -69,9 +70,11 @@ export function TaskListView({
   onSelectTask,
   onToggleComplete,
   selectedTaskId,
+  onQuickCreate,
 }: TaskListViewProps) {
   const t = useTranslations("calendar");
   const timeFormat = useSettingsStore((s) => s.timeFormat);
+  const [quickAddTitle, setQuickAddTitle] = useState("");
 
   const filteredTasks = useMemo(() => {
     let result = tasks.filter(task => {
@@ -128,15 +131,57 @@ export function TaskListView({
 
   if (filteredTasks.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center flex-1 text-muted-foreground py-12">
-        <ListTodo className="h-12 w-12 mb-3 opacity-30" />
-        <p className="text-sm">{t("tasks.no_tasks")}</p>
+      <div className="flex flex-col flex-1">
+        {onQuickCreate && (
+          <div className="px-4 py-2 border-b border-border">
+            <div className="flex items-center gap-2">
+              <Plus className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+              <input
+                type="text"
+                value={quickAddTitle}
+                onChange={(e) => setQuickAddTitle(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && quickAddTitle.trim()) {
+                    onQuickCreate(quickAddTitle.trim());
+                    setQuickAddTitle("");
+                  }
+                }}
+                placeholder={t("tasks.quick_add_placeholder")}
+                className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+              />
+            </div>
+          </div>
+        )}
+        <div className="flex flex-col items-center justify-center flex-1 text-muted-foreground py-12">
+          <ListTodo className="h-12 w-12 mb-3 opacity-30" />
+          <p className="text-sm">{t("tasks.no_tasks")}</p>
+        </div>
       </div>
     );
   }
 
   return (
     <div className="flex-1 overflow-y-auto">
+      {onQuickCreate && (
+        <div className="px-4 py-2 border-b border-border">
+          <div className="flex items-center gap-2">
+            <Plus className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+            <input
+              type="text"
+              value={quickAddTitle}
+              onChange={(e) => setQuickAddTitle(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && quickAddTitle.trim()) {
+                  onQuickCreate(quickAddTitle.trim());
+                  setQuickAddTitle("");
+                }
+              }}
+              placeholder={t("tasks.quick_add_placeholder")}
+              className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+            />
+          </div>
+        </div>
+      )}
       <div className="divide-y divide-border">
         {filteredTasks.map(task => {
           const cal = calendars.find(c => task.calendarIds[c.id]);
@@ -159,7 +204,7 @@ export function TaskListView({
                 className={cn(
                   "mt-0.5 flex-shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors",
                   isCompleted
-                    ? "bg-green-500 border-green-500 text-white"
+                    ? "bg-success border-success text-success-foreground"
                     : "border-muted-foreground/40 hover:border-primary"
                 )}
                 aria-label={isCompleted ? t("tasks.mark_incomplete") : t("tasks.mark_complete")}

components/calendar/task-modal.tsx

@@ -0,0 +1,321 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { X, Trash2, CalendarDays, Bell, Flag } from "lucide-react";
+import { format, parseISO } from "date-fns";
+
+import type { CalendarTask, Calendar, CalendarEventAlert } from "@/lib/jmap/types";
+
+interface TaskModalProps {
+  task?: CalendarTask | null;
+  calendars: Calendar[];
+  onSave: (data: Partial<CalendarTask>) => void | Promise<void>;
+  onDelete?: (id: string) => void;
+  onClose: () => void;
+  isMobile?: boolean;
+}
+
+type PriorityLevel = "none" | "high" | "medium" | "low";
+type AlertOption = "none" | "at_time" | "5" | "15" | "30" | "60" | "1440";
+
+function priorityToLevel(p: number): PriorityLevel {
+  if (p >= 1 && p <= 4) return "high";
+  if (p === 5) return "medium";
+  if (p >= 6 && p <= 9) return "low";
+  return "none";
+}
+
+function levelToPriority(l: PriorityLevel): number {
+  switch (l) {
+    case "high": return 1;
+    case "medium": return 5;
+    case "low": return 9;
+    default: return 0;
+  }
+}
+
+export function TaskModal({
+  task,
+  calendars,
+  onSave,
+  onDelete,
+  onClose,
+  isMobile: _isMobile,
+}: TaskModalProps) {
+  const t = useTranslations("calendar");
+  const isEdit = !!task;
+  const titleRef = useRef<HTMLInputElement>(null);
+
+  const writableCalendars = calendars.filter(c => !c.isShared || c.myRights?.mayWriteAll || c.myRights?.mayWriteOwn);
+  const defaultCalendarId = writableCalendars[0]?.id ?? calendars[0]?.id ?? "";
+
+  const [title, setTitle] = useState(task?.title ?? "");
+  const [description, setDescription] = useState(task?.description ?? "");
+  const [dueDate, setDueDate] = useState(task?.due ? format(parseISO(task.due), "yyyy-MM-dd") : "");
+  const [dueTime, setDueTime] = useState(task?.due && !task.showWithoutTime ? format(parseISO(task.due), "HH:mm") : "");
+  const [showTime, setShowTime] = useState(task?.due ? !task.showWithoutTime : false);
+  const [priority, setPriority] = useState<PriorityLevel>(priorityToLevel(task?.priority ?? 0));
+  const [progress, setProgress] = useState<CalendarTask["progress"]>(task?.progress ?? "needs-action");
+  const [calendarId, setCalendarId] = useState(() => {
+    if (task) {
+      const ids = Object.keys(task.calendarIds);
+      return ids[0] ?? defaultCalendarId;
+    }
+    return defaultCalendarId;
+  });
+  const [alertOption, setAlertOption] = useState<AlertOption>(() => {
+    if (!task?.alerts) return "none";
+    const first = Object.values(task.alerts)[0];
+    if (!first || first.trigger["@type"] !== "OffsetTrigger") return "none";
+    const offset = first.trigger.offset;
+    if (offset === "PT0S") return "at_time";
+    const m = offset.match(/-?PT?(\d+)M$/);
+    if (m) return m[1] as AlertOption;
+    const h = offset.match(/-?PT?(\d+)H$/);
+    if (h) return String(parseInt(h[1]) * 60) as AlertOption;
+    const d = offset.match(/-?P(\d+)D/);
+    if (d) return String(parseInt(d[1]) * 1440) as AlertOption;
+    return "none";
+  });
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    titleRef.current?.focus();
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    if (!title.trim()) return;
+    setSaving(true);
+    try {
+      let due: string | null = null;
+      let showWithoutTime = true;
+      if (dueDate) {
+        if (showTime && dueTime) {
+          due = `${dueDate}T${dueTime}:00`;
+          showWithoutTime = false;
+        } else {
+          due = dueDate;
+          showWithoutTime = true;
+        }
+      }
+
+      let alerts: Record<string, CalendarEventAlert> | null = null;
+      if (alertOption !== "none") {
+        const offset = alertOption === "at_time" ? "PT0S" : `-PT${alertOption}M`;
+        alerts = {
+          "default-alert": {
+            "@type": "Alert",
+            trigger: { "@type": "OffsetTrigger", offset, relativeTo: "start" },
+            action: "display",
+            acknowledged: null,
+            relatedTo: null,
+          },
+        };
+      }
+
+      const data: Partial<CalendarTask> = {
+        "@type": "Task",
+        title: title.trim(),
+        description: description.trim() || "",
+        due,
+        showWithoutTime,
+        priority: levelToPriority(priority),
+        progress,
+        calendarIds: { [calendarId]: true },
+        alerts,
+      };
+
+      if (isEdit && task) {
+        data.id = task.id;
+      }
+
+      await onSave(data);
+      onClose();
+    } finally {
+      setSaving(false);
+    }
+  }, [title, description, dueDate, dueTime, showTime, priority, progress, calendarId, alertOption, isEdit, task, onSave, onClose]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+      e.preventDefault();
+      handleSave();
+    }
+  }, [onClose, handleSave]);
+
+  return (
+    <div className="flex flex-col h-full bg-background" onKeyDown={handleKeyDown}>
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+        <h2 className="text-sm font-semibold">
+          {isEdit ? t("tasks.edit") : t("tasks.create")}
+        </h2>
+        <Button variant="ghost" size="icon" className="h-7 w-7" onClick={onClose}>
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Body */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {/* Title */}
+        <Input
+          ref={titleRef}
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder={t("tasks.title_placeholder")}
+          className="text-base font-medium"
+        />
+
+        {/* Description */}
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder={t("tasks.description_placeholder")}
+          rows={3}
+          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring resize-none"
+        />
+
+        {/* Due Date */}
+        <div className="space-y-2">
+          <label className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
+            <CalendarDays className="h-3.5 w-3.5" />
+            {t("tasks.due_date")}
+          </label>
+          <div className="flex items-center gap-2">
+            <input
+              type="date"
+              value={dueDate}
+              onChange={(e) => setDueDate(e.target.value)}
+              className="rounded-md border border-input bg-background px-3 py-1.5 text-sm"
+            />
+            {dueDate && (
+              <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={showTime}
+                  onChange={(e) => setShowTime(e.target.checked)}
+                  className="rounded"
+                />
+                {t("tasks.include_time")}
+              </label>
+            )}
+            {showTime && (
+              <input
+                type="time"
+                value={dueTime}
+                onChange={(e) => setDueTime(e.target.value)}
+                className="rounded-md border border-input bg-background px-3 py-1.5 text-sm"
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Priority */}
+        <div className="space-y-2">
+          <label className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
+            <Flag className="h-3.5 w-3.5" />
+            {t("tasks.priority")}
+          </label>
+          <select
+            value={priority}
+            onChange={(e) => setPriority(e.target.value as PriorityLevel)}
+            className="rounded-md border border-input bg-background px-3 py-1.5 text-sm w-full"
+          >
+            <option value="none">{t("tasks.priority_none")}</option>
+            <option value="high">{t("tasks.priority_high")}</option>
+            <option value="medium">{t("tasks.priority_medium")}</option>
+            <option value="low">{t("tasks.priority_low")}</option>
+          </select>
+        </div>
+
+        {/* Progress */}
+        <div className="space-y-2">
+          <label className="text-xs font-medium text-muted-foreground">
+            {t("tasks.progress")}
+          </label>
+          <select
+            value={progress}
+            onChange={(e) => setProgress(e.target.value as CalendarTask["progress"])}
+            className="rounded-md border border-input bg-background px-3 py-1.5 text-sm w-full"
+          >
+            <option value="needs-action">{t("tasks.progress_needs_action")}</option>
+            <option value="in-process">{t("tasks.progress_in_process")}</option>
+            <option value="completed">{t("tasks.progress_completed")}</option>
+            <option value="cancelled">{t("tasks.progress_cancelled")}</option>
+          </select>
+        </div>
+
+        {/* Calendar */}
+        {writableCalendars.length > 1 && (
+          <div className="space-y-2">
+            <label className="text-xs font-medium text-muted-foreground">
+              {t("tasks.calendar")}
+            </label>
+            <select
+              value={calendarId}
+              onChange={(e) => setCalendarId(e.target.value)}
+              className="rounded-md border border-input bg-background px-3 py-1.5 text-sm w-full"
+            >
+              {writableCalendars.map((cal) => (
+                <option key={cal.id} value={cal.id}>{cal.name}</option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {/* Alert */}
+        <div className="space-y-2">
+          <label className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
+            <Bell className="h-3.5 w-3.5" />
+            {t("tasks.alert")}
+          </label>
+          <select
+            value={alertOption}
+            onChange={(e) => setAlertOption(e.target.value as AlertOption)}
+            className="rounded-md border border-input bg-background px-3 py-1.5 text-sm w-full"
+          >
+            <option value="none">{t("tasks.alert_none")}</option>
+            <option value="at_time">{t("tasks.alert_at_time")}</option>
+            <option value="5">{t("tasks.alert_5min")}</option>
+            <option value="15">{t("tasks.alert_15min")}</option>
+            <option value="30">{t("tasks.alert_30min")}</option>
+            <option value="60">{t("tasks.alert_1hr")}</option>
+            <option value="1440">{t("tasks.alert_1day")}</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between px-4 py-3 border-t border-border">
+        <div>
+          {isEdit && onDelete && task && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-destructive hover:text-destructive"
+              onClick={() => onDelete(task.id)}
+            >
+              <Trash2 className="h-4 w-4 mr-1" />
+              {t("tasks.delete")}
+            </Button>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={onClose}>
+            {t("tasks.cancel")}
+          </Button>
+          <Button size="sm" onClick={handleSave} disabled={!title.trim() || saving}>
+            {t("tasks.save")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/calendar/task-toolbar.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { TaskViewFilter } from "@/stores/task-store";
+
+interface TaskToolbarProps {
+  filter: TaskViewFilter;
+  showCompleted: boolean;
+  onFilterChange: (filter: TaskViewFilter) => void;
+  onShowCompletedChange: (show: boolean) => void;
+  onCreateTask: () => void;
+}
+
+const FILTERS: TaskViewFilter[] = ["all", "pending", "completed", "overdue"];
+
+export function TaskToolbar({
+  filter,
+  showCompleted,
+  onFilterChange,
+  onShowCompletedChange,
+  onCreateTask,
+}: TaskToolbarProps) {
+  const t = useTranslations("calendar");
+
+  return (
+    <div className="flex items-center gap-2 px-4 py-2 border-b border-border flex-wrap">
+      <div className="flex border border-border rounded-md overflow-hidden">
+        {FILTERS.map((f) => (
+          <button
+            key={f}
+            onClick={() => onFilterChange(f)}
+            className={cn(
+              "px-3 py-1.5 text-xs font-medium transition-colors",
+              f === filter
+                ? "bg-primary text-primary-foreground"
+                : "hover:bg-muted text-muted-foreground"
+            )}
+          >
+            {t(`tasks.filter_${f}`)}
+          </button>
+        ))}
+      </div>
+
+      <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none ml-2">
+        <input
+          type="checkbox"
+          checked={showCompleted}
+          onChange={(e) => onShowCompletedChange(e.target.checked)}
+          className="rounded border-border"
+        />
+        {t("tasks.show_completed")}
+      </label>
+
+      <div className="flex-1" />
+
+      <Button size="sm" onClick={onCreateTask}>
+        <Plus className="w-4 h-4 mr-1" />
+        {t("tasks.create")}
+      </Button>
+    </div>
+  );
+}

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

@@ -66,7 +66,7 @@ describe('ContactForm', () => {
     const onSave = vi.fn().mockResolvedValue(undefined);
     render(<ContactForm onSave={onSave} onCancel={vi.fn()} />);
 
-    const inputs = screen.getAllByRole('textbox');
+    const _inputs = screen.getAllByRole('textbox');
     const givenNameInput = screen.getByPlaceholderText('given_name');
     fireEvent.change(givenNameInput, { target: { value: 'Jane' } });
 

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

@@ -52,7 +52,7 @@ describe('ContactListItem', () => {
   it('applies selected styling', () => {
     const { container } = render(<ContactListItem contact={contact} {...baseProps} isSelected={true} />);
     const div = container.firstElementChild;
-    expect(div?.className).toContain('bg-blue-200');
+    expect(div?.className).toContain('bg-selection');
   });
 
   it('shows email as display name when no name exists', () => {

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

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
 import { ContactList } from '../contact-list';
 import type { ContactCard } from '@/lib/jmap/types';
@@ -22,7 +22,7 @@ const bob = makeContact({
   emails: { e0: { address: 'bob@example.com' } },
 });
 
-const group = makeContact({
+const _group = makeContact({
   id: '3',
   kind: 'group',
   name: { components: [{ kind: 'given', value: 'Team' }], isOrdered: true },

components/contacts/contact-detail.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { useTranslations } from "next-intl";
-import { Mail, Phone, Building, MapPin, StickyNote, Pencil, Trash2, BookUser, Copy, Send, Globe, Cake, Tag, KeyRound, Link, Users, Briefcase, Heart, Languages, MessageCircle, User, Calendar, UserCircle, ShieldCheck, ShieldAlert, Download } from "lucide-react";
+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 { Avatar } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -87,7 +87,7 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
         try {
           let derBytes: ArrayBuffer | string | null = null;
           if (key.uri.startsWith('data:')) {
-            // data URI — extract base64 content
+            // data URI - extract base64 content
             const commaIdx = key.uri.indexOf(',');
             if (commaIdx === -1) continue;
             const b64 = key.uri.substring(commaIdx + 1);
@@ -178,7 +178,7 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
           <div className="flex items-center gap-4">
             <Avatar name={name} email={email} size={isMobile ? "md" : "lg"} />
             <div className="min-w-0 flex-1">
-              <h2 className={cn("font-semibold truncate", isMobile ? "text-lg" : "text-xl")}>{name || "—"}</h2>
+              <h2 className={cn("font-semibold truncate", isMobile ? "text-lg" : "text-xl")}>{name || "-"}</h2>
               {hasNickname && (
                 <p className="text-sm text-muted-foreground truncate">&ldquo;{nicknames.map(n => n.name).join(", ")}&rdquo;</p>
               )}
@@ -278,7 +278,7 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
                 <div key={i} className="text-sm">
                   {o.name}
                   {o.units && o.units.length > 0 && (
-                    <span className="text-muted-foreground"> — {o.units.map(u => u.name).join(", ")}</span>
+                    <span className="text-muted-foreground"> - {o.units.map(u => u.name).join(", ")}</span>
                   )}
                 </div>
               ))}
@@ -371,7 +371,7 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
                 {contact.speakToAs.pronouns && (() => {
                   const firstPronoun = Object.values(contact.speakToAs!.pronouns!)[0]?.pronouns;
                   return firstPronoun ? (
-                    <span className="text-muted-foreground">{contact.speakToAs!.grammaticalGender ? " — " : ""}{firstPronoun}</span>
+                    <span className="text-muted-foreground">{contact.speakToAs!.grammaticalGender ? " - " : ""}{firstPronoun}</span>
                   ) : null;
                 })()}
               </div>

components/contacts/contact-form.tsx

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

components/contacts/contact-import-dialog.tsx

@@ -199,13 +199,13 @@ 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>
                       )}
                     </div>
                     {isDupe && (
-                      <span className="text-xs px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-900 text-amber-700 dark:text-amber-400 flex-shrink-0">
+                      <span className="text-xs px-1.5 py-0.5 rounded bg-warning/15 text-warning flex-shrink-0">
                         {t("import.duplicate")}
                       </span>
                     )}

components/contacts/contact-list-item.tsx

@@ -59,9 +59,9 @@ export function ContactListItem({ contact, isSelected, isChecked, hasSelection,
       className={cn(
         "w-full flex items-center cursor-pointer select-none transition-all duration-200 border-b border-border",
         isSelected
-          ? "bg-blue-200 dark:bg-blue-900/50 shadow-sm"
+          ? "bg-selection shadow-sm"
           : "bg-background hover:bg-muted hover:shadow-sm",
-        isChecked && !isSelected && "ring-2 ring-primary/20 bg-blue-100 dark:bg-blue-900/30",
+        isChecked && !isSelected && "ring-2 ring-primary/20 bg-selection/60",
       )}
       style={{ gap: 'var(--density-item-gap)', paddingInline: '16px', paddingBlock: 'var(--density-item-py)' }}
     >
@@ -90,7 +90,7 @@ export function ContactListItem({ contact, isSelected, isChecked, hasSelection,
 
       <div className="flex-1 min-w-0">
         <div className="text-sm font-medium truncate">
-          {name || email || "—"}
+          {name || email || "-"}
         </div>
         {density !== 'extra-compact' && email && name && (
           <div className="text-xs text-muted-foreground truncate">{email}</div>

components/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,8 @@ interface ContactsSidebarProps {
   onDeleteGroup?: (groupId: string) => void;
   onDropContacts?: (contactIds: string[], addressBook: AddressBook) => void;
   onDropContactsToCategory?: (contactIds: string[], keyword: string) => void;
+  onRenameAddressBook?: (addressBook: AddressBook) => void;
+  onRenameKeyword?: (keyword: string) => void;
   className?: string;
 }
 
@@ -58,10 +61,15 @@ export function ContactsSidebar({
   onDeleteGroup,
   onDropContacts,
   onDropContactsToCategory,
+  onRenameAddressBook,
+  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 +254,32 @@ export function ContactsSidebar({
         {/* My Address Books */}
         {personalBooks.length > 0 && (
           <div className="mt-2">
-            <button
-              onClick={() => toggleSection("addressBooks")}
-              className="flex items-center gap-1 px-3 py-1 w-full text-left group"
-            >
-              {collapsed.addressBooks ? (
-                <ChevronRight 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>
-            </button>
+            <div className="flex items-center px-3 py-1 group">
+              <button
+                onClick={() => toggleSection("addressBooks")}
+                className="flex items-center gap-1 flex-1 text-left"
+              >
+                {collapsed.addressBooks ? (
+                  <ChevronRight 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>
+              </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 +288,7 @@ export function ContactsSidebar({
                 contactCount={contactCountByBook[book.id] || 0}
                 onSelect={() => onSelectCategory({ addressBookId: book.id })}
                 onDropContacts={onDropContacts}
+                onContextMenu={onRenameAddressBook ? (e) => openBookContextMenu(e, book) : undefined}
               />
             ))}
           </div>
@@ -362,6 +384,7 @@ export function ContactsSidebar({
                     isActive={isActive}
                     onSelect={() => onSelectCategory({ keyword })}
                     onDropContacts={onDropContactsToCategory}
+                    onContextMenu={onRenameKeyword ? (e) => openKeywordContextMenu(e, keyword) : undefined}
                   />
                 );
               })}
@@ -372,20 +395,33 @@ export function ContactsSidebar({
         {/* Shared accounts with address books */}
         {sharedBookGroups.map((group) => (
           <div key={group.accountId} className="mt-2">
-            <button
-              onClick={() => toggleSection(`shared-${group.accountId}`)}
-              className="flex items-center gap-1 px-3 py-1 w-full text-left group"
-            >
-              {collapsed[`shared-${group.accountId}`] ? (
-                <ChevronRight 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">
-                {t("address_books.shared_prefix", { name: group.accountName })}
-              </span>
-            </button>
+            <div className="flex items-center px-3 py-1 group">
+              <button
+                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" />
+                ) : (
+                  <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">
+                  {t("address_books.shared_prefix", { name: group.accountName })}
+                </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 +430,53 @@ export function ContactsSidebar({
                 contactCount={contactCountByBook[book.id] || 0}
                 onSelect={() => onSelectCategory({ addressBookId: book.id })}
                 onDropContacts={onDropContacts}
+                onContextMenu={onRenameAddressBook ? (e) => openBookContextMenu(e, book) : undefined}
               />
             ))}
           </div>
         ))}
       </div>
 
+      {/* Address book context menu */}
+      {bookContextMenu.data && onRenameAddressBook && (
+        <ContextMenu
+          ref={bookMenuRef}
+          isOpen={bookContextMenu.isOpen}
+          position={bookContextMenu.position}
+          onClose={closeBookContextMenu}
+        >
+          <ContextMenuItem
+            icon={Pencil}
+            label={t("address_books.rename")}
+            onClick={() => {
+              const book = bookContextMenu.data!;
+              closeBookContextMenu();
+              onRenameAddressBook(book);
+            }}
+          />
+        </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 +515,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 +555,7 @@ function CategoryItem({
   return (
     <button
       onClick={onSelect}
+      onContextMenu={onContextMenu}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
@@ -503,12 +583,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 +623,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

@@ -171,11 +171,11 @@ function getParticipationLabel(
 function getParticipationTone(status: string | null): string {
   switch (status) {
     case 'accepted':
-      return 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400';
+      return 'bg-success/15 text-success';
     case 'tentative':
-      return 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400';
+      return 'bg-warning/15 text-warning';
     case 'declined':
-      return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
+      return 'bg-destructive/15 text-destructive';
     default:
       return 'bg-muted text-muted-foreground';
   }
@@ -527,7 +527,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
       || null;
 
     // Send the iMIP REPLY email to the organizer (client-side scheduling).
-    // Called after updating the local calendar event. Best-effort — if it
+    // Called after updating the local calendar event. Best-effort - if it
     // fails we still report the RSVP as sent since the calendar was updated.
     const sendImipReply = async () => {
       if (!organizerEmail || !parsedEvent?.uid || !currentUserEmail) {
@@ -731,9 +731,9 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
 
   if (state === 'error') {
     return (
-      <div className="rounded-lg border border-red-200 dark:border-red-900/50 bg-red-50/50 dark:bg-red-950/20 px-4 py-3 flex items-center gap-2.5">
-        <AlertCircle className="w-4 h-4 text-red-600 dark:text-red-400 flex-shrink-0" />
-        <span className="text-sm text-red-600 dark:text-red-400">{t('parse_error')}</span>
+      <div className="rounded-lg border border-destructive/20 bg-destructive/10 px-4 py-3 flex items-center gap-2.5">
+        <AlertCircle className="w-4 h-4 text-destructive flex-shrink-0" />
+        <span className="text-sm text-destructive">{t('parse_error')}</span>
       </div>
     );
   }
@@ -744,7 +744,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
       <div className="flex items-center justify-between px-4 py-2.5 bg-muted/30 border-b border-border">
         <div className="flex items-center gap-2 min-w-0">
           {isCancellation ? (
-            <CalendarX className="w-4 h-4 text-red-600 dark:text-red-400 flex-shrink-0" />
+            <CalendarX className="w-4 h-4 text-destructive flex-shrink-0" />
           ) : (
             <Calendar className="w-4 h-4 text-primary flex-shrink-0" />
           )}
@@ -754,49 +754,67 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
 
       {/* Content */}
       <div className="px-4 py-3 space-y-2.5">
-        {/* Event title */}
-        {summary?.title && (
-          <div className="flex items-start justify-between gap-2">
-            <h3 className={cn(
-              "text-base font-semibold leading-snug",
-              isCancellation ? "line-through text-muted-foreground" : "text-foreground"
-            )}>
-              {summary.title}
-            </h3>
-            {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 className="lg:flex lg:gap-6">
+          {/* Left: Event info */}
+          <div className="lg:flex-1 space-y-2.5 min-w-0">
+            {/* Event title */}
+            {summary?.title && (
+              <div className="flex items-start justify-between gap-2">
+                <h3 className={cn(
+                  "text-base font-semibold leading-snug",
+                  isCancellation ? "line-through text-muted-foreground" : "text-foreground"
+                )}>
+                  {summary.title}
+                </h3>
+                {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 */}
-        <div className="space-y-1">
-          {summary?.start && (
-            <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
-              <Clock className="w-3.5 h-3.5 flex-shrink-0" />
-              <span>
-                {formatDateTime(summary.start)}
-                {summary.end && ` – ${formatDateTime(summary.end)}`}
-              </span>
+            {/* Event details */}
+            <div className="lg:flex lg:items-center lg:gap-4 lg:flex-wrap space-y-1 lg:space-y-0">
+              {summary?.start && (
+                <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                  <Clock className="w-3.5 h-3.5 flex-shrink-0" />
+                  <span>
+                    {formatDateTime(summary.start)}
+                    {summary.end && ` – ${formatDateTime(summary.end)}`}
+                  </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>
-          )}
-          {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>
-          )}
-          <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>
+          </div>
+
+          {/* Right: Info & actor messages on large screens */}
+          <div className="lg:flex-shrink-0 lg:text-right lg:max-w-xs mt-2.5 lg:mt-0 space-y-1">
+            {bannerInfo && (
+              <p className="text-xs text-muted-foreground leading-relaxed">{bannerInfo}</p>
             )}
-            {summary && summary.attendeeCount > 0 && (
-              <span>{t('attendees', { count: summary.attendeeCount })}</span>
+            {actorMessage && (
+              <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>
@@ -808,19 +826,19 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
               <span className={cn(
                 "rounded-full px-2 py-0.5 text-[11px] font-medium",
                 parsedEvent.status === 'cancelled'
-                  ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
-                  : "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
+                  ? "bg-destructive/15 text-destructive"
+                  : "bg-warning/15 text-warning"
               )}>
                 {t(`event_status_${parsedEvent.status}`)}
               </span>
             )}
             {existingEvent && (
-              <span className="rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
+              <span className="rounded-full bg-success/15 px-2 py-0.5 text-[11px] font-medium text-success">
                 {t('already_in_calendar')}
               </span>
             )}
             {userIsOrganizer && (
-              <span className="rounded-full bg-blue-100 px-2 py-0.5 text-[11px] font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
+              <span className="rounded-full bg-info/15 px-2 py-0.5 text-[11px] font-medium text-info">
                 {t('organizer_role')}
               </span>
             )}
@@ -833,30 +851,13 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
               </span>
             )}
             {actionFeedback && (
-              <span className="rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
+              <span className="rounded-full bg-success/15 px-2 py-0.5 text-[11px] font-medium text-success">
                 {actionFeedback}
               </span>
             )}
           </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">
@@ -877,8 +878,8 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
           <div className={cn(
             'flex items-start gap-1.5 text-xs rounded-md px-3 py-2',
             trustAssessment.level === 'warning'
-              ? 'bg-red-50 dark:bg-red-950/20 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-900/50'
-              : 'bg-amber-50 dark:bg-amber-950/20 text-amber-700 dark:text-amber-400 border border-amber-200 dark:border-amber-900/50'
+              ? 'bg-destructive/10 text-destructive border border-destructive/20'
+              : 'bg-warning/10 text-warning border border-warning/20'
           )}>
             <AlertCircle className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
             <span>{trustMessage}</span>
@@ -887,7 +888,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
 
         {/* Action error */}
         {actionError && (
-          <div className="flex items-start gap-1.5 text-xs text-red-600 dark:text-red-400 rounded-md px-3 py-2 bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50">
+          <div className="flex items-start gap-1.5 text-xs text-destructive rounded-md px-3 py-2 bg-destructive/10 border border-destructive/20">
             <AlertCircle className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
             <span>{actionError}</span>
           </div>
@@ -905,8 +906,8 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
               className={cn(
                 "inline-flex items-center gap-1.5 text-sm font-medium px-3 py-1.5 rounded-md transition-colors min-h-[36px] disabled:opacity-50 border",
                 currentRsvp === 'accepted'
-                  ? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border-green-200 dark:border-green-800"
-                  : "text-muted-foreground hover:text-green-700 dark:hover:text-green-400 border-border hover:border-green-300 dark:hover:border-green-800 hover:bg-green-50 dark:hover:bg-green-950/20"
+                  ? "bg-success/15 text-success border-success/20"
+                  : "text-muted-foreground hover:text-success border-border hover:border-success/30 hover:bg-success/10"
               )}
             >
               <Check className="w-3.5 h-3.5" />
@@ -919,8 +920,8 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
               className={cn(
                 "inline-flex items-center gap-1.5 text-sm font-medium px-3 py-1.5 rounded-md transition-colors min-h-[36px] disabled:opacity-50 border",
                 currentRsvp === 'tentative'
-                  ? "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-800"
-                  : "text-muted-foreground hover:text-amber-700 dark:hover:text-amber-400 border-border hover:border-amber-300 dark:hover:border-amber-800 hover:bg-amber-50 dark:hover:bg-amber-950/20"
+                  ? "bg-warning/15 text-warning border-warning/20"
+                  : "text-muted-foreground hover:text-warning border-border hover:border-warning/30 hover:bg-warning/10"
               )}
             >
               <HelpCircle className="w-3.5 h-3.5" />
@@ -933,8 +934,8 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
               className={cn(
                 "inline-flex items-center gap-1.5 text-sm font-medium px-3 py-1.5 rounded-md transition-colors min-h-[36px] disabled:opacity-50 border",
                 currentRsvp === 'declined'
-                  ? "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 border-red-200 dark:border-red-800"
-                  : "text-muted-foreground hover:text-red-700 dark:hover:text-red-400 border-border hover:border-red-300 dark:hover:border-red-800 hover:bg-red-50 dark:hover:bg-red-950/20"
+                  ? "bg-destructive/15 text-destructive border-destructive/20"
+                  : "text-muted-foreground hover:text-destructive border-border hover:border-destructive/30 hover:bg-destructive/10"
               )}
             >
               <X className="w-3.5 h-3.5" />

components/email/email-composer.tsx

@@ -12,12 +12,14 @@ 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";
 import { buildMimeMessage, wrapCmsAsSmimeMessage } from "@/lib/smime/mime-builder";
 import type { MimeAttachment } from "@/lib/smime/mime-builder";
 import { smimeSign } from "@/lib/smime/smime-sign";
+import { PluginSlot } from "@/components/plugins/plugin-slot";
 import { smimeEncrypt } from "@/lib/smime/smime-encrypt";
 import { useContactStore } from "@/stores/contact-store";
 import { useTemplateStore } from "@/stores/template-store";
@@ -28,6 +30,14 @@ 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 doc = new DOMParser().parseFromString(html, 'text/html');
+  return doc.body.textContent || '';
+}
 
 export interface ComposerDraftData {
   to: string;
@@ -67,12 +77,15 @@ 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;
   };
 }
 
@@ -90,17 +103,23 @@ export function EmailComposer({
   const t = useTranslations('email_composer');
   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 email ? email + ', ' : "";
+      return replyTarget ? replyTarget + ', ' : "";
     } 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 "";
@@ -125,23 +144,48 @@ export function EmailComposer({
   };
 
   const getInitialBody = () => {
-    const prefix = initialDraftText || "";
+    if (plainTextMode) {
+      // Plain text mode: produce plain text body with no HTML
+      const prefix = initialDraftText || "";
+      if (!replyTo?.body && !replyTo?.htmlBody) return prefix;
+
+      const date = replyTo.receivedAt ? formatDateTime(replyTo.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' }) : "";
+      const from = replyTo.from?.[0];
+      const fromStr = from ? `${from.name || from.email}` : tCommon('unknown');
+
+      const originalText = replyTo.body || (replyTo.htmlBody ? htmlToPlainText(replyTo.htmlBody) : '');
+      const quotedText = originalText.split('\n').map(line => `> ${line}`).join('\n');
+
+      if (mode === 'forward') {
+        return `${prefix}\n\n---------- Forwarded message ----------\nFrom: ${fromStr}\nDate: ${date}\nSubject: ${replyTo.subject || ''}\n\n${originalText}`;
+      } else if (mode === 'reply' || mode === 'replyAll') {
+        return `${prefix}\n\nOn ${date}, ${fromStr} wrote:\n${quotedText}`;
+      }
+      return prefix;
+    }
+
+    const prefix = initialDraftText ? `<p>${initialDraftText.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</p>` : "";
     if (!replyTo?.body && !replyTo?.htmlBody) return prefix;
 
     const date = replyTo.receivedAt ? formatDateTime(replyTo.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' }) : "";
     const from = replyTo.from?.[0];
     const fromStr = from ? `${from.name || from.email}` : tCommon('unknown');
 
-    // When HTML body is available, don't include quoted text in the textarea
-    // The HTML original will be shown separately below the textarea
+    // Build quoted content as HTML
     if (replyTo.htmlBody && (mode === 'reply' || mode === 'replyAll' || mode === 'forward')) {
-      return prefix;
+      const quoteHeader = mode === 'forward'
+        ? `---------- Forwarded message ----------<br>From: ${fromStr}<br>Date: ${date}<br>Subject: ${replyTo.subject || ''}<br><br>`
+        : `On ${date}, ${fromStr} wrote:<br>`;
+      return `${prefix}<br><div>${quoteHeader}</div><blockquote style="margin:0 0 0 0.8ex;border-left:2px solid #ccc;padding-left:1ex">${replyTo.htmlBody}</blockquote>`;
     }
 
-    if (mode === 'forward') {
-      return `${prefix}\n\n---------- Forwarded message ----------\nFrom: ${fromStr}\nDate: ${date}\nSubject: ${replyTo.subject || ""}\n\n${replyTo.body}`;
-    } else if (mode === 'reply' || mode === 'replyAll') {
-      return `${prefix}\n\nOn ${date}, ${fromStr} wrote:\n> ${(replyTo.body || '').split('\n').join('\n> ')}`;
+    if (replyTo.body) {
+      const escapedOriginal = replyTo.body.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
+      if (mode === 'forward') {
+        return `${prefix}<br><br>---------- Forwarded message ----------<br>From: ${fromStr}<br>Date: ${date}<br>Subject: ${replyTo.subject || ''}<br><br>${escapedOriginal}`;
+      } else if (mode === 'reply' || mode === 'replyAll') {
+        return `${prefix}<br><br>On ${date}, ${fromStr} wrote:<br><blockquote style="margin:0 0 0 0.8ex;border-left:2px solid #ccc;padding-left:1ex">${escapedOriginal}</blockquote>`;
+      }
     }
     return prefix;
   };
@@ -157,18 +201,6 @@ export function EmailComposer({
   const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
   const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const lastSavedDataRef = useRef<string>("");
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const autoResizeTextarea = useCallback(() => {
-    const el = textareaRef.current;
-    if (!el) return;
-    el.style.height = 'auto';
-    el.style.height = el.scrollHeight + 'px';
-  }, []);
-
-  useEffect(() => {
-    autoResizeTextarea();
-  }, [body, autoResizeTextarea]);
   const [attachments, setAttachments] = useState<Array<{ file: File; blobId?: string; uploading?: boolean; error?: boolean; abortController?: AbortController }>>([]);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [validationErrors, setValidationErrors] = useState<{ to?: boolean; subject?: boolean; body?: boolean }>({});
@@ -184,6 +216,8 @@ export function EmailComposer({
   const [smimePassphrasePrompt, setSmimePassphrasePrompt] = useState<{ keyId: string; resolve: (passphrase: string) => void; reject: () => void } | null>(null);
   const [smimePassphraseInput, setSmimePassphraseInput] = useState('');
   const [smimePassphraseError, setSmimePassphraseError] = useState('');
+  const [showAttachmentWarning, setShowAttachmentWarning] = useState(false);
+  const [attachmentWarningKeyword, setAttachmentWarningKeyword] = useState('');
 
   const saveTemplateModalRef = useFocusTrap({
     isActive: showSaveAsTemplate,
@@ -197,12 +231,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
@@ -278,6 +359,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);
@@ -285,10 +377,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);
@@ -367,9 +475,14 @@ export function EmailComposer({
       ? substitutePlaceholders(template.body, filledValues)
       : template.body;
 
+    // In plain text mode, use template body as-is; otherwise convert to HTML
+    const bodyContent = plainTextMode
+      ? filledBody
+      : `<p>${filledBody.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</p>`;
+
     if (mode === 'compose') {
       setSubject(filledSubject);
-      setBody(filledBody);
+      setBody(bodyContent);
       if (template.defaultRecipients?.to?.length) {
         setTo(template.defaultRecipients.to.join(', ') + ', ');
       }
@@ -382,7 +495,7 @@ export function EmailComposer({
         setShowBcc(true);
       }
     } else {
-      setBody((prev) => filledBody + prev);
+      setBody((prev) => bodyContent + (plainTextMode ? '\n' : '') + prev);
     }
 
     if (template.identityId) {
@@ -390,12 +503,14 @@ export function EmailComposer({
     }
 
     setShowTemplatePicker(false);
-  }, [mode]);
+  }, [mode, plainTextMode]);
 
   useEffect(() => {
     const handleTemplateKey = (e: KeyboardEvent) => {
-      const tag = (e.target as HTMLElement)?.tagName?.toLowerCase();
+      const target = e.target as HTMLElement;
+      const tag = target?.tagName?.toLowerCase();
       if (tag === 'input' || tag === 'textarea' || tag === 'select') return;
+      if (target?.getAttribute('contenteditable') === 'true') return;
       if (e.key === 't' && !e.ctrlKey && !e.metaKey && !e.altKey) {
         e.preventDefault();
         setShowTemplatePicker(true);
@@ -445,6 +560,19 @@ export function EmailComposer({
     }
   }, [client, t]);
 
+  const handleImageUpload = useCallback((file: File): Promise<string | null> => {
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = (e) => resolve((e.target?.result as string) ?? null);
+      reader.onerror = () => {
+        debug.error(`Failed to read inline image ${file.name}`);
+        toast.error(t('upload_failed', { filename: file.name }));
+        resolve(null);
+      };
+      reader.readAsDataURL(file);
+    });
+  }, [t]);
+
   const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
     if (!event.target.files) return;
     await addFiles(Array.from(event.target.files));
@@ -511,7 +639,7 @@ export function EmailComposer({
     const ccAddresses = cc.split(",").map(e => e.trim()).filter(Boolean);
     const bccAddresses = bcc.split(",").map(e => e.trim()).filter(Boolean);
 
-    if (!toAddresses.length && !subject && !body) {
+    if (!toAddresses.length && !subject && !(plainTextMode ? body.trim() : htmlToPlainText(body).trim())) {
       return null;
     }
 
@@ -547,7 +675,7 @@ export function EmailComposer({
       const savedDraftId = await client.createDraft(
         toAddresses,
         subject || t('no_subject'),
-        body,
+        plainTextMode ? body : htmlToPlainText(body),
         ccAddresses,
         bccAddresses,
         currentIdentity?.id,
@@ -611,7 +739,8 @@ export function EmailComposer({
   }, []);
 
   const toAddresses = to.split(",").map(e => e.trim()).filter(Boolean);
-  const hasContent = body || attachments.some(att => att.blobId && !att.uploading);
+  const bodyPlainText = plainTextMode ? body.trim() : htmlToPlainText(body).trim();
+  const hasContent = bodyPlainText || attachments.some(att => att.blobId && !att.uploading);
   const canSend = toAddresses.length > 0 && !!subject && hasContent;
 
   const getSendTooltip = (): string | undefined => {
@@ -622,7 +751,7 @@ export function EmailComposer({
     return undefined;
   };
 
-  const handleSend = async () => {
+  const handleSend = async (skipAttachmentCheck = false) => {
     const ccAddresses = cc.split(",").map(e => e.trim()).filter(Boolean);
     const bccAddresses = bcc.split(",").map(e => e.trim()).filter(Boolean);
 
@@ -641,6 +770,21 @@ export function EmailComposer({
       return;
     }
 
+    // Attachment reminder check
+    if (!skipAttachmentCheck && attachmentReminderEnabled) {
+      const hasAttachments = attachments.some(att => att.blobId && !att.uploading && !att.error);
+      if (!hasAttachments) {
+        const bodyText = htmlToPlainText(body);
+        const searchText = `${subject} ${bodyText}`.toLowerCase();
+        const matched = attachmentReminderKeywords.find(kw => searchText.includes(kw.toLowerCase()));
+        if (matched) {
+          setAttachmentWarningKeyword(matched);
+          setShowAttachmentWarning(true);
+          return;
+        }
+      }
+    }
+
     let finalDraftId = draftId;
     if (saveTimeoutRef.current) {
       clearTimeout(saveTimeoutRef.current);
@@ -660,26 +804,8 @@ export function EmailComposer({
         : currentIdentity.email
       : undefined;
 
-    // Append signature from the selected identity
-    let finalBody = appendPlainTextSignature(body, currentIdentity);
-
-    // Append quoted original text for the plain text part in reply/forward
-    if (replyTo && (mode === 'reply' || mode === 'replyAll' || mode === 'forward')) {
-      const originalText = replyTo.body || '';
-      if (originalText) {
-        const date = replyTo.receivedAt ? formatDateTime(replyTo.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' }) : '';
-        const fromAddr = replyTo.from?.[0];
-        const fromStr = fromAddr ? `${fromAddr.name || fromAddr.email}` : tCommon('unknown');
-
-        if (mode === 'forward') {
-          finalBody += `\n\n---------- ${t('prefix.forward')} ----------\nFrom: ${fromStr}\nDate: ${date}\nSubject: ${replyTo.subject || ''}\n\n${originalText}`;
-        } else {
-          finalBody += `\n\nOn ${date}, ${fromStr} wrote:\n> ${originalText.split('\n').join('\n> ')}`;
-        }
-      }
-    }
-
-    // Build HTML signature block (prefer htmlSignature, fall back to escaped textSignature)
+    // Body is already HTML from the rich text editor (or plain text in plain text mode).
+    // Build HTML signature block (used only in rich text mode)
     const buildSignatureHtml = (): string => {
       if (currentIdentity?.htmlSignature) {
         return `<br><br>-- <br>${sanitizeEmailHtml(currentIdentity.htmlSignature)}`;
@@ -690,26 +816,14 @@ export function EmailComposer({
       return '';
     };
 
-    // Build HTML body
-    let finalHtmlBody: string | undefined;
-    const signatureHtml = buildSignatureHtml();
+    // In plain text mode, send text/plain only (no HTML body)
+    const finalBody = plainTextMode
+      ? appendPlainTextSignature(body, currentIdentity)
+      : appendPlainTextSignature(htmlToPlainText(body), currentIdentity);
 
-    if (replyTo?.htmlBody && (mode === 'reply' || mode === 'replyAll' || mode === 'forward')) {
-      // Reply/forward with original HTML content
-      const escapedBody = body.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
-      const date = replyTo.receivedAt ? formatDateTime(replyTo.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' }) : '';
-      const fromAddr = replyTo.from?.[0];
-      const fromStr = fromAddr ? `${fromAddr.name || fromAddr.email}` : tCommon('unknown');
-      const quoteHeader = mode === 'forward'
-        ? `---------- ${t('prefix.forward')} ----------<br>From: ${fromStr}<br>Date: ${date}<br>Subject: ${replyTo.subject || ''}<br><br>`
-        : `On ${date}, ${fromStr} wrote:<br>`;
-
-      finalHtmlBody = `<div>${escapedBody}</div>${signatureHtml}<br><div><div>${quoteHeader}</div><blockquote style="margin:0 0 0 0.8ex;border-left:2px solid #ccc;padding-left:1ex">${replyTo.htmlBody}</blockquote></div>`;
-    } else if (signatureHtml) {
-      // New compose or plain-text reply — include HTML body with signature
-      const escapedBody = body.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
-      finalHtmlBody = `<div>${escapedBody}</div>${signatureHtml}`;
-    }
+    const finalHtmlBody = plainTextMode
+      ? undefined
+      : `<div>${body}</div>${buildSignatureHtml()}`;
 
     try {
       // S/MIME send pipeline: build raw MIME → sign → encrypt → sendRawEmail
@@ -931,7 +1045,7 @@ export function EmailComposer({
         </div>
         {/* Mobile: send button in header */}
         <Button
-          onClick={handleSend}
+          onClick={() => handleSend()}
           disabled={!canSend}
           title={getSendTooltip()}
           size="sm"
@@ -955,11 +1069,16 @@ export function EmailComposer({
                   onChange={(e) => setSelectedIdentityId(e.target.value)}
                   className="flex-1 bg-transparent text-sm text-foreground outline-none cursor-pointer hover:text-muted-foreground transition-colors min-w-0 truncate"
                 >
-                  {identities.map((identity) => (
-                    <option key={identity.id} value={identity.id}>
-                      {identity.name ? `${identity.name} <${identity.email}>` : identity.email}
-                    </option>
-                  ))}
+                  {identities.map((identity) => {
+                    const displayEmail = subAddressTag
+                      ? generateSubAddress(identity.email, subAddressTag)
+                      : identity.email;
+                    return (
+                      <option key={identity.id} value={identity.id}>
+                        {identity.name ? `${identity.name} <${displayEmail}>` : displayEmail}
+                      </option>
+                    );
+                  })}
                 </select>
               ) : (
                 <span className="text-sm text-foreground flex-1 truncate">
@@ -1022,6 +1141,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
@@ -1091,6 +1211,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}
@@ -1098,6 +1219,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"
@@ -1108,46 +1235,49 @@ export function EmailComposer({
         </div>
 
         {/* Body */}
-        <div className="px-4 py-3">
+        {plainTextMode ? (
           <textarea
-            ref={textareaRef}
-            className={cn(
-              "w-full resize-none outline-none text-sm bg-transparent text-foreground placeholder:text-muted-foreground rounded min-h-[100px] overflow-hidden",
-              validationErrors.body && "ring-2 ring-red-500 dark:ring-red-400"
-            )}
-            placeholder={t('body_placeholder')}
+            ref={bodyRef}
             value={body}
             onChange={(e) => {
               setBody(e.target.value);
               if (validationErrors.body) setValidationErrors(prev => ({ ...prev, body: false }));
             }}
+            placeholder={t('body_placeholder')}
+            className={cn(
+              "w-full min-h-[300px] px-4 py-3 text-sm text-foreground bg-transparent resize-y focus:outline-none font-mono",
+              validationErrors.body && "ring-2 ring-red-500 dark:ring-red-400 rounded"
+            )}
+            style={{ height: 'calc(100vh - 350px)' }}
             aria-invalid={validationErrors.body || undefined}
           />
-        </div>
+        ) : (
+          <div ref={editorContainerRef}>
+            <RichTextEditor
+              content={body}
+              onChange={(html) => {
+                setBody(html);
+                if (validationErrors.body) setValidationErrors(prev => ({ ...prev, body: false }));
+              }}
+              onImageUpload={handleImageUpload}
+              placeholder={t('body_placeholder')}
+              hasError={validationErrors.body}
+            />
+          </div>
+        )}
 
-        {composerSignatureHtml && (
+        {plainTextMode ? (
+          getPlainTextSignature(currentIdentity) ? (
+            <div className="px-4 pb-3 text-sm leading-6 text-muted-foreground break-words whitespace-pre-wrap font-mono">
+              {'-- \n'}{getPlainTextSignature(currentIdentity)}
+            </div>
+          ) : null
+        ) : composerSignatureHtml ? (
           <div
             className="px-4 pb-3 text-sm leading-6 text-foreground break-words [&_a]:text-primary [&_a]:underline-offset-2 [&_a:hover]:underline"
             dangerouslySetInnerHTML={{ __html: `<div>-- </div>${composerSignatureHtml}` }}
           />
-        )}
-
-        {/* Quoted original HTML */}
-        {replyTo?.htmlBody && (mode === 'reply' || mode === 'replyAll' || mode === 'forward') && (
-          <div className="border-t border-border">
-            <div className="px-4 py-2 text-xs text-muted-foreground">
-              {mode === 'forward'
-                ? `---------- ${t('prefix.forward')} ----------`
-                : `${replyTo.receivedAt ? formatDateTime(replyTo.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' }) : ''}, ${replyTo.from?.[0]?.name || replyTo.from?.[0]?.email || tCommon('unknown')}:`
-              }
-            </div>
-            <div
-              className="email-reply-quote px-4 pb-3 border-l-2 border-muted-foreground/30 ml-4 max-w-none rounded"
-              style={{ backgroundColor: '#ffffff', color: '#1a1a1a', fontSize: '14px' }}
-              dangerouslySetInnerHTML={{ __html: sanitizeEmailHtml(replyTo.htmlBody) }}
-            />
-          </div>
-        )}
+        ) : null}
       </div>
 
         {/* Attachments */}
@@ -1267,6 +1397,7 @@ export function EmailComposer({
                 </Button>
               </>
             )}
+            <PluginSlot name="composer-toolbar" />
           </div>
 
           {/* Right side - Discard + Send (desktop) */}
@@ -1279,7 +1410,7 @@ export function EmailComposer({
               {t('discard')}
             </button>
             <Button
-              onClick={handleSend}
+              onClick={() => handleSend()}
               disabled={!canSend}
               title={getSendTooltip()}
               className="hidden md:inline-flex"
@@ -1379,6 +1510,36 @@ export function EmailComposer({
         </div>
       )}
 
+      {showAttachmentWarning && (
+        <div
+          className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150"
+          onClick={() => setShowAttachmentWarning(false)}
+        >
+          <div
+            ref={attachmentWarningRef}
+            role="alertdialog"
+            aria-modal="true"
+            onClick={(e) => e.stopPropagation()}
+            className="bg-background border border-border rounded-lg shadow-xl w-full max-w-md animate-in zoom-in-95 duration-200"
+          >
+            <div className="p-6">
+              <h2 className="text-lg font-semibold text-foreground">{t('forgot_attachment.title')}</h2>
+              <p className="mt-2 text-sm text-muted-foreground">
+                {t('forgot_attachment.message', { keyword: attachmentWarningKeyword })}
+              </p>
+            </div>
+            <div className="flex items-center justify-end gap-3 px-6 pb-6">
+              <Button variant="outline" onClick={() => setShowAttachmentWarning(false)}>
+                {t('forgot_attachment.back')}
+              </Button>
+              <Button onClick={() => { setShowAttachmentWarning(false); handleSend(true); }}>
+                {t('forgot_attachment.send_anyway')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {showCloseDialog && (
         <div
           className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150"
@@ -1464,6 +1625,7 @@ function RecipientChipInput({
   onInsertAutocomplete,
   validationError,
   validationMessage,
+  onTab,
 }: {
   value: string;
   onChange: (value: string) => void;
@@ -1480,6 +1642,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(',');
@@ -1513,7 +1676,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

@@ -9,6 +9,7 @@ import {
   ContextMenuSubMenu,
   ContextMenuHeader,
 } from "@/components/ui/context-menu";
+import { PluginSlot } from "@/components/plugins/plugin-slot";
 import {
   Reply,
   ReplyAll,
@@ -88,17 +89,18 @@ const getMailboxIcon = (role?: string) => {
   }
 };
 
-// Get current label/color from email keywords (supports both $label: and legacy $color:)
-const getCurrentColor = (keywords: Record<string, boolean> | undefined) => {
-  if (!keywords) return null;
+// Get all active label/color tag IDs from email keywords
+const getCurrentColors = (keywords: Record<string, boolean> | undefined): string[] => {
+  if (!keywords) return [];
+  const tags: string[] = [];
   for (const key of Object.keys(keywords)) {
     if ((key.startsWith("$label:") || key.startsWith("$color:")) && keywords[key] === true) {
-      return key.startsWith("$label:")
-        ? key.slice("$label:".length)
-        : key.slice("$color:".length);
+      tags.push(
+        key.startsWith("$label:") ? key.slice("$label:".length) : key.slice("$color:".length)
+      );
     }
   }
-  return null;
+  return tags;
 };
 
 export function EmailContextMenu({
@@ -131,12 +133,12 @@ export function EmailContextMenu({
   onEditDraft,
 }: EmailContextMenuProps) {
   const t = useTranslations("context_menu");
-  const tColor = useTranslations("email_viewer.color_tag");
+  const _tColor = useTranslations("email_viewer.color_tag");
   const emailKeywords = useSettingsStore((state) => state.emailKeywords);
   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';
 
@@ -305,24 +307,27 @@ export function EmailContextMenu({
       {/* Set tag submenu - only for single email */}
       {!showBatchActions && (
         <ContextMenuSubMenu icon={Tag} label={t("color_tag")}>
-          {colorOptions.map((option) => (
-            <button
-              key={option.value}
-              role="menuitem"
-              onClick={() => handleAction(() => onSetColorTag?.(option.value))}
-              className={cn(
-                "w-full px-3 py-1.5 text-sm text-left flex items-center gap-2 hover:bg-muted cursor-pointer",
-                currentColor === option.value && "bg-accent font-medium"
-              )}
-            >
-              <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
-              <span className="flex-1">{option.name}</span>
-              {currentColor === option.value && (
-                <Check className="w-3.5 h-3.5 flex-shrink-0 text-foreground" />
-              )}
-            </button>
-          ))}
-          {currentColor && (
+          {colorOptions.map((option) => {
+            const isActive = currentColors.includes(option.value);
+            return (
+              <button
+                key={option.value}
+                role="menuitem"
+                onClick={() => handleAction(() => onSetColorTag?.(option.value))}
+                className={cn(
+                  "w-full px-3 py-1.5 text-sm text-left flex items-center gap-2 hover:bg-muted cursor-pointer",
+                  isActive && "bg-accent font-medium"
+                )}
+              >
+                <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
+                <span className="flex-1">{option.name}</span>
+                {isActive && (
+                  <Check className="w-3.5 h-3.5 flex-shrink-0 text-foreground" />
+                )}
+              </button>
+            );
+          })}
+          {currentColors.length > 0 && (
             <>
               <ContextMenuSeparator />
               <ContextMenuItem
@@ -366,6 +371,8 @@ export function EmailContextMenu({
           )
         }
       />
+
+      <PluginSlot name="context-menu-email" />
     </ContextMenu>
   );
 }

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;
@@ -54,8 +55,16 @@ const ACTION_CONFIG: Record<HoverAction, {
   },
 };
 
+const CORNER_CLASSES = {
+  'top-right': 'top-1 right-1',
+  'top-left': 'top-1 left-1',
+  'bottom-right': 'bottom-1 right-1',
+  'bottom-left': 'bottom-1 left-1',
+} as const;
+
 export function EmailHoverActions({
   email,
+  backgroundClassName = "bg-muted",
   onToggleStar,
   onMarkAsRead,
   onDelete,
@@ -64,10 +73,13 @@ export function EmailHoverActions({
   onMarkAsSpam,
 }: EmailHoverActionsProps) {
   const hoverActions = useSettingsStore((state) => state.hoverActions);
+  const hoverActionsMode = useSettingsStore((state) => state.hoverActionsMode);
+  const hoverActionsCorner = useSettingsStore((state) => state.hoverActionsCorner);
   const t = useTranslations("settings.email_behavior.hover_actions");
 
   const isUnread = !email.keywords?.$seen;
   const isStarred = email.keywords?.$flagged;
+  const hoverBackgroundClassName = backgroundClassName;
 
   if (hoverActions.length === 0) return null;
 
@@ -82,7 +94,7 @@ export function EmailHoverActions({
         onToggleStar?.();
         break;
       case "markRead":
-        onMarkAsRead?.(!isUnread);
+        onMarkAsRead?.(isUnread);
         break;
       case "archive":
         onArchive?.();
@@ -96,42 +108,68 @@ export function EmailHoverActions({
     }
   };
 
+  const actionButtons = hoverActions.map((actionId) => {
+    const config = ACTION_CONFIG[actionId];
+    if (!config) return null;
+    const Icon = config.icon;
+
+    const DisplayIcon = actionId === "markRead"
+      ? (isUnread ? MailOpen : Mail)
+      : actionId === "star" && isStarred
+        ? Star
+        : Icon;
+
+    return (
+      <button
+        key={actionId}
+        onClick={(e) => handleAction(e, actionId)}
+        title={t(config.titleKey)}
+        className={cn(
+          "p-1.5 rounded-md transition-colors duration-100 text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10",
+          config.className,
+        )}
+      >
+        <DisplayIcon
+          className={cn(
+            "w-4 h-4",
+            actionId === "star" && isStarred && "fill-amber-400 text-amber-400",
+          )}
+        />
+      </button>
+    );
+  });
+
+  if (hoverActionsMode === 'floating') {
+    return (
+      <div
+        className={cn(
+          "absolute z-10 hidden group-hover:flex items-center",
+          CORNER_CLASSES[hoverActionsCorner],
+        )}
+      >
+        <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>
+    );
+  }
+
   return (
     <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 className="flex items-center gap-0.5 h-full bg-muted pr-3 pl-0.5">
-        {hoverActions.map((actionId) => {
-          const config = ACTION_CONFIG[actionId];
-          if (!config) return null;
-        const Icon = config.icon;
-
-          const DisplayIcon = actionId === "markRead"
-            ? (isUnread ? MailOpen : Mail)
-            : actionId === "star" && isStarred
-              ? Star
-              : Icon;
-
-          return (
-            <button
-              key={actionId}
-              onClick={(e) => handleAction(e, actionId)}
-              title={t(config.titleKey)}
-              className={cn(
-                "p-1.5 rounded-md transition-colors duration-100 text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10",
-                config.className,
-              )}
-            >
-              <DisplayIcon
-                className={cn(
-                  "w-4 h-4",
-                  actionId === "star" && isStarred && "fill-amber-400 text-amber-400",
-                )}
-              />
-            </button>
-          );
-        })}
+      <div
+        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>
   );