Merge branch 'dev'

chore: update version to 1.4.10
fix: patch critical auth bypass and credential leak vulnerabilities
2026-03-31 00:53:10 +02:00 · 2026-03-31 00:51:36 +02:00 · 2026-03-31 00:46:15 +02:00 · 2026-03-31 00:27:45 +02:00 · 2026-03-31 00:11:04 +02:00 · 2026-03-30 23:47:01 +02:00
428 changed files with 176751 additions and 5643 deletions
@@ -4,9 +4,8 @@ node_modules
 .gitignore
 .env*
 !.env.example
-.claude/
+!.env.dev.example
 scripts/
 TODO.md
-CLAUDE.md
 *.md
 !README.md
@@ -0,0 +1,49 @@
+# 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.
+#
+# Usage:
+#   cp .env.dev.example .env.local
+#   npm run dev
+#   Open http://localhost:3000 — log in with any username/password.
+
+# =============================================================================
+# Mock JMAP Server
+# =============================================================================
+
+# Enable the built-in mock JMAP server (served at /api/dev-jmap)
+DEV_MOCK_JMAP=true
+
+# Point the app at its own mock endpoint.
+# IMPORTANT: This must match the origin the app runs on (default: port 3000).
+# Using a different port (e.g. 3001) will cause CORS errors.
+JMAP_SERVER_URL=/api/dev-jmap
+
+# =============================================================================
+# App
+# =============================================================================
+
+APP_NAME=Bulwark Webmail (Dev)
+
+# =============================================================================
+# Session & Settings Sync (optional for dev)
+# =============================================================================
+
+SESSION_SECRET=dev-secret-not-for-production
+SETTINGS_SYNC_ENABLED=true
+
+# =============================================================================
+# Logging (verbose for development)
+# =============================================================================
+
+LOG_FORMAT=text
+LOG_LEVEL=debug
+
+# =============================================================================
+# Login Page Customization (optional)
+# =============================================================================
+
+# LOGIN_COMPANY_NAME=Dev Team
+# LOGIN_IMPRINT_URL=https://example.com/imprint
+# LOGIN_PRIVACY_POLICY_URL=https://example.com/privacy
+# LOGIN_WEBSITE_URL=https://example.com
@@ -1,42 +1,157 @@
-# JMAP Webmail Configuration
-# Copy this file to .env.local and fill in your values
+# 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.

 # =============================================================================
-# Runtime Configuration (recommended for Docker)
-# These are read at request time, allowing post-build configuration
+# JMAP Server (required)
 # =============================================================================

 # App name displayed in the UI
-APP_NAME=JMAP Webmail
+APP_NAME=Bulwark Webmail

-# JMAP server URL (required)
-# This is the URL of your JMAP-compatible mail server
+# URL of your JMAP-compatible mail server (required unless ALLOW_CUSTOM_JMAP_ENDPOINT is set)
 JMAP_SERVER_URL=https://your-jmap-server.com

-# =============================================================================
-# Build-time Configuration (legacy, still supported as fallback)
-# These are baked into the bundle at build time
-# =============================================================================
-
-# NEXT_PUBLIC_APP_NAME=JMAP Webmail
-# NEXT_PUBLIC_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

 # =============================================================================
-# Logging Configuration
+# Stalwart Mail Server Integration
+# =============================================================================
+
+# Enable Stalwart-specific features (password change, sieve filters, etc.)
+# Set to "false" to disable if using a non-Stalwart JMAP server.
+# STALWART_FEATURES=true
+
+# If your reverse proxy doesn't forward Stalwart management API paths
+# (/api/account/*, /api/principal/*), set this to the URL where Stalwart's
+# HTTP listener is directly reachable. Defaults to JMAP_SERVER_URL if not set.
+# STALWART_API_URL=https://admin.example.com
+
+# =============================================================================
+# OAuth / OpenID Connect (optional)
+# =============================================================================
+
+# Set to "true" to use OAuth instead of basic JMAP authentication
+# OAUTH_ENABLED=true
+
+# Set to "true" to only allow OAuth login (hides username/password form)
+# Requires OAUTH_ENABLED=true
+# OAUTH_ONLY=true
+
+# OAuth client ID registered with your identity provider
+# OAUTH_CLIENT_ID=your-client-id
+
+# OAuth client secret (server-side only, never exposed to the browser)
+# OAUTH_CLIENT_SECRET=your-client-secret
+
+# OpenID Connect issuer URL for discovery
+# OAUTH_ISSUER_URL=https://your-idp.example.com
+
+# =============================================================================
+# Session & Security
+# =============================================================================
+
+# Secret key for encrypting "Remember me" sessions and settings sync data.
+# Required for both "Remember me" and settings sync features.
+# Generate with: openssl rand -base64 32
+# SESSION_SECRET=your-secret-key-here
+
+# =============================================================================
+# Settings Sync
+# =============================================================================
+
+# Enable server-side settings persistence (requires SESSION_SECRET).
+# When enabled, user settings are encrypted and stored on the server,
+# allowing them to sync across browsers and devices.
+# SETTINGS_SYNC_ENABLED=true
+
+# Directory for storing encrypted settings files (default: ./data/settings).
+# For Docker, the working directory is /app, so the default resolves to
+# /app/data/settings — mount a persistent volume there:
+#   volumes:
+#     - bulwark-settings:/app/data/settings
+# SETTINGS_DATA_DIR=./data/settings
+
+# =============================================================================
+# Server Listen Address
+# =============================================================================
+
+# Hostname the server binds to (default: 0.0.0.0)
+# Set to "::" for dual-stack
+# HOSTNAME=0.0.0.0
+
+# Port the server listens on (default: 3000)
+# PORT=3000
+
+# =============================================================================
+# Logging
 # =============================================================================

 # Log format: "text" (colored, human-readable) or "json" (structured, for log aggregation)
-LOG_FORMAT=text
+# LOG_FORMAT=text

 # Log level: "error", "warn", "info", or "debug"
-LOG_LEVEL=info
+# LOG_LEVEL=info

 # =============================================================================
-# Docker Configuration
+# Branding (all optional)
 # =============================================================================
-# When running with Docker, set these in .env.local:
-#   APP_NAME=My Webmail
-#   JMAP_SERVER_URL=https://mail.example.com
+
+# Custom favicon for 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.
+# 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).
+# Supported formats: SVG (recommended), PNG, WebP.
+# 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.
+# Supported formats: SVG (recommended), PNG, WebP.
+# 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.
+LOGIN_LOGO_LIGHT_URL=/branding/Bulwark_Logo_Color.svg
 #
-# Then run:
-#   docker compose up -d
+# Dark mode logo (shown on dark backgrounds), defaults to Bulwark white logo.
+LOGIN_LOGO_DARK_URL=/branding/Bulwark_Logo_Color.svg
+
+# Company or organization name displayed above the version on the login page
+LOGIN_COMPANY_NAME=Bulwark Webmail
+
+# 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
+# LOGIN_PRIVACY_POLICY_URL=https://example.com/privacy
+
+# 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)
+# =============================================================================
+# These are baked into the bundle at build time. The runtime variables above
+# take priority when both are set.
+#
+# NEXT_PUBLIC_APP_NAME=Bulwark Webmail
+# NEXT_PUBLIC_JMAP_SERVER_URL=https://your-jmap-server.com
@@ -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 }}
@@ -2,7 +2,9 @@ name: Publish Docker Image

 on:
  push:
-    branches: [main]
+    branches:
+      - main
+      - dev
    paths:
      - "Dockerfile"
      - ".dockerignore"
@@ -17,12 +19,22 @@ on:
      - "package.json"
      - "package-lock.json"
      - ".github/workflows/docker-publish.yml"
-    tags: ["v*.*.*"]
  workflow_dispatch:

+env:
+  IMAGE_NAME: ghcr.io/${{ github.repository }}
+
 jobs:
-  build-and-push:
-    runs-on: ubuntu-latest
+  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
@@ -31,18 +43,9 @@ jobs:
      - name: Checkout
        uses: actions/checkout@v4

-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

-      - name: Log in to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
      - name: Log in to GHCR
        uses: docker/login-action@v3
        with:
@@ -54,22 +57,73 @@ jobs:
        id: meta
        uses: docker/metadata-action@v5
        with:
-          images: |
-            rootfr/jmap-webmail
-            ghcr.io/${{ github.repository }}
-          tags: |
-            type=raw,value=latest,enable={{is_default_branch}}
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=sha,prefix=
+          images: ${{ env.IMAGE_NAME }}

-      - name: Build and push
+      - name: Build and push by digest
+        id: build
        uses: docker/build-push-action@v6
        with:
          context: .
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
+          platforms: ${{ matrix.platform }}
          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
+          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={{branch}}
+            type=sha,prefix={{branch}}-
+
+      - 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 }}
@@ -33,6 +33,7 @@ yarn-error.log*
 # env files
 .env*
 !.env.example
+!.env.dev.example

 # vercel
 .vercel
@@ -41,5 +42,11 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts

-# claude code
-.claude/
+# settings sync data
+/data/
+
+# Local private data
+/local-data/
+
+# Sibling repos
+/repos/
@@ -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
@@ -1,12 +1,338 @@
 # Changelog

+## 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
+
+- **Demo**: Add full demo mode with fixture data for emails, calendars, contacts, files, filters, identities, mailboxes, and vacation responses
+- **Demo**: Implement JMAP client interface abstraction to support demo and live backends
+- **Contacts**: Add no-category filter, drag-and-drop to category, and category combo box in contact form
+- **Email**: Add hover actions for emails with configurable quick-action buttons
+- **Settings**: Implement keyword migration functionality for upgrading legacy email tags
+- **Security**: Enhance S/MIME certificate extraction and add legacy PBE (password-based encryption) support
+- **Tour**: Add interactive guided tour overlay for new user onboarding
+
+### Fixes
+
+- **Settings**: Add missing `showTimeInMonthView` and `showOnMobile` type definitions to settings store
+- **UI**: Adjust padding and size of sidebar buttons for improved layout
+
+## 1.4.5 (2026-03-20)
+
+### Features
+
+- **Calendar**: Add prev/next navigation buttons and date label to desktop calendar toolbar
+- **Calendar**: Add pending event preview functionality to calendar views and event modal
+- **Calendar**: Add setting to show event start time in month view
+- **Contacts**: Implement pagination for fetching contacts with maxObjectsInGet capability
+- **Email**: Add attachment position setting in email settings
+- **Layout**: Add mobile visibility toggle for sidebar apps
+- **Error**: Add NotFound component to handle 404 errors and redirect unauthenticated users
+
+### Fixes
+
+- **Auth**: Enhance account switching logic and clear stores on account change
+- **Auth**: Improve account restoration logic and handle stale accounts
+- **Auth**: Improve draft handling in email composer and enhance session cookie verification
+- **Calendar**: Expand recurring events in CalendarEvent/query so individual occurrences are returned (#65)
+- **Calendar**: Validate event start field when fetching calendar events
+- **Calendar**: Auto-scroll agenda view to today's events and include today's date in groups
+- **Calendar**: Correct JSX syntax in CalendarToolbar component
+- **Dependencies**: Update flatted to 3.4.2
+- **DevOps**: Use native ARM runners instead of QEMU for Docker builds
+- **DevOps**: Enhance health check with detailed memory diagnostics and stable liveness probe
+
+## 1.4.4 (2026-03-19)
+
+### Features
+
+- **Calendar**: Implement CalDAV discovery API with automatic calendar home resolution for multi-account setups
+- **Calendar**: Enhance calendar management settings with mailbox role reassignment controls
+- **Email**: Add signature rendering utilities with HTML-to-text conversion and sanitization
+
+### Fixes
+
+- **Auth**: Fix account session handling to update existing accounts instead of duplicating entries
+- **Auth**: Fix logout redirects and unauthenticated home page rendering
+- **Calendar**: Fix duplicate calendar edits and prevent double-save submissions in event modal
+- **Calendar**: Remove stale calendar ID references in favor of CalDAV-discovered IDs
+- **Contacts**: Improve RFC 9553 compliance for contact birthdays and address formatting
+- **Email**: Fix email signature rendering for identity signatures
+- **Folders**: Improve mailbox role management by clearing roles from all mailboxes before reassigning
+
+## 1.4.3 (2026-03-19)
+
+### Features
+
+- **Auth**: Implement multi-account support with up to 5 simultaneous accounts and instant switching
+- **Auth**: Add account switcher component with connection status, default account selection, and per-account logout
+- **Auth**: Support multi-account OAuth and basic auth with per-account session persistence
+- **Contacts**: Enhance contacts sidebar with collapsible sections, bulk operations, and address book grouping
+- **Contacts**: Add contact import functionality and keyword filtering
+- **Settings**: Add per-account encrypted settings storage with server-side sync support
+
+### Fixes
+
+- **UI**: Adjust popover alignment in sub-address helper component
+- **Settings**: Improve error logging in settings sync functionality
+
+## 1.4.2 (2026-03-19)
+
+### Features
+
+- **Calendar**: Add task list view for calendar tasks with task details and management
+- **Calendar**: Add shared calendar grouping with visual separation in sidebar
+- **Calendar**: Support double-click to create events and improve modal date handling
+- **Contacts**: Add address book directories with drag-and-drop and editor picker
+- **Email**: Add email attachment support in sendEmail functionality
+- **Email**: Implement draft editing functionality across email components
+- **Email**: Implement unwrapping of embedded message/rfc822 attachments with enhanced HTML body validation
+- **Email**: Add email export/import localization keys for multiple languages
+- **Contacts**: Update gender handling to use speakToAs structure
+
+### Fixes
+
+- **Email**: Resolve default sender to canonical identity on local-part login
+- **Email**: Refactor overflow handling in EmailViewer to use hidden priorities and layout effects
+- **Email**: Remove debugMode usage from EmailViewer component
+- **Calendar**: Enhance IMIP invitation and cancellation handling for calendar events
+- **Calendar**: Add time-based sorting for events in buildWeekSegments function
+- **Dependencies**: Update dompurify to 3.3.3 and elliptic to 6.6.1, add undici override
+
+## 1.4.1 (2026-03-18)
+
+### Features
+
+- **Security**: Add S/MIME certificate management with identity bindings, signer auto-import, unlock controls, and compose/viewer sign, encrypt, decrypt, and verification flows
+- **Email**: Add TNEF (`winmail.dat`) parsing to extract message bodies and attachments from Outlook rich-text emails
+- **Email**: Add archive organization modes for archiving directly or into year/month subfolders
+- **Email**: Add an "Always Show Emails in Light Mode" preference to avoid dark-mode conversion issues
+- **Email**: Apply the 12-hour or 24-hour time format preference consistently across calendar and email surfaces
+- **Identity**: Add identity refresh behavior in the identity manager so server-side changes stay in sync after edits
+- **UI**: Add configurable sidebar apps with custom icons plus inline or new-tab launch modes
+- **Branding**: Add runtime branding options for custom favicon, sidebar logos, and login logos
+- **Deployment**: Add configurable server listen address support via `HOSTNAME`, including IPv6 and dual-stack guidance
+
+### Fixes
+
+- **Calendar**: Improve all-day event handling
+- **Calendar**: Validate and default persisted calendar view mode values
+- **UI**: Use configured app names more consistently in metadata and login branding surfaces
+- **Docker**: Correct `HOSTNAME` formatting in the Docker Compose example
+- **Metadata**: Correct package author and container vendor metadata
+
+## 1.3.0 (2026-03-16)
+
+### Features
+
+- **Calendar**: RSVP support for calendar invitations with trust assessment
+- **Calendar**: iCal/webcal subscription support
+- **Calendar**: Create, update, and delete calendar events
+- **Calendar**: Enhanced EventModal with alert and recurrence labels, view/edit mode toggle
+- **Email**: Iframe-based email rendering with smart dark mode support
+- **Email**: Security tooltips, contact actions, and scroll improvements in email viewer
+- **Email**: Improved message details and contact sidebar in email viewer
+- **Email**: Move-to mailbox functionality in email viewer
+- **Email**: Mobile bottom action bar with reply and email navigation
+- **Email**: Auto-fetch full email content when an email is auto-selected
+- **Email**: Unread filter functionality in mailbox sidebar
+- **Email**: Empty folder functionality for junk and trash mailboxes with confirmation dialog
+- **Files**: JMAP FileNode file storage backend and file settings
+- **Files**: File preview support
+- **Contacts**: Enhanced contacts management with sidebar and selection features
+- **Contacts**: Import/export functionality in contacts settings
+- **Contacts**: Improved contact group management with UID normalization
+- **Settings**: Tab icons and grouping with improved file settings preview
+- **Settings**: Extra-compact density option and font size scaling
+- **Settings**: Logout button in settings
+- **UI**: Sidebar resizing across calendar, contacts, and settings pages
+- **UI**: Keyboard shortcuts button and show/hide toolbar labels option
+- **UI**: Recursive depth calculation for mailbox tree structure
+- **UI**: Mobile long-press context menu
+- **i18n**: Expanded supported locales
+- **API**: Enhanced configuration fetching with retry logic
+- **License**: Updated to AGPL-3.0-only with NOTICE file for fork lineage
+
+### Fixes
+
+- **Calendar**: Correct all-day multi-day event rendering
+- **Email**: Adjust text wrapping for email subject in EmailViewer and ThreadConversationView
+- **Email**: Adjust email content area layout for better responsiveness
+- **Email**: Sync identity stores and append signatures to outgoing emails (#15)
+- **Contacts**: Handle non-string anniversary dates in contact detail
+- **UI**: Fix nested button hydration error in sidebar mailbox tree
+- **UI**: Update sidebar border styling for consistency across pages
+- **UI**: Update avatar background color logic based on image source
+- **UI**: Make density setting functional across entire UI
+
+## 1.2.4 (2026-03-14)
+
+### Features
+
+- **Tags**: Show total and unread email counts next to each tag in the sidebar
+- **Tags**: Instant tag count refresh after adding or removing a tag
+- **Search**: Wildcard query functionality for enhanced search capabilities
+- **Search**: Support OR conditions across multiple fields in email search
+- **Search**: Improved search results display with pluralization and localization
+- **Email**: Dropdown menus for actions in email viewer
+- **Email**: Improved email list messages for clarity and localization
+- **Email**: Enhanced unsubscribe banner with destructive color styling
+- **Auth**: Centralized Stalwart credentials management
+- **Login**: Configurable logo with light/dark mode support
+- **Avatar**: Dev mode configuration for profile picture retrieval
+- **DevOps**: Added `.env.dev.example` for development configuration
+
+### Fixes
+
+- **Email**: Prevent browser auth dialog when viewing emails with inline images
+- **Login**: Optimize theme store usage with shallow comparison
+- **Git**: Add local private data directory to `.gitignore`
+
+## 1.2.3 (2026-03-13)
+
+### Features
+
+- **Calendar**: Hover functionality for calendar events with preview popover
+- **Contacts**: Enhanced contact management and vCard support
+- **Email**: Tagging system with color labels and drag-and-drop tag support
+- **Email**: Multi-select with checkbox functionality and batch operations
+- **Email**: Recipient popover for contact interaction
+- **Email**: Inline search filters and folder icon picker
+- **Email**: Sender favicon avatars with negative caching for performance
+- **Email**: Print functionality for email content
+- **Folders**: Folder management settings with CRUD, standard role assignment, and icon picker
+- **Folders**: Subfolder creation and hierarchical navigation
+- **Settings**: Settings synchronization with server (encrypted API endpoints)
+- **Settings**: Toolbar position customization and mobile layout tabs
+- **Settings**: Login page customization options
+- **Account Security**: Stalwart account security management panel
+- **OAuth2/OIDC**: OAuth-only login mode
+- **UI**: Resizable columns, navigation rail overhaul, and drag-and-drop email organization
+- **UI**: Toast notifications with enter/exit animations and progress bar
+- **UI**: Responsive mobile layout with bottom tab bar and tablet support
+- **i18n**: Added Dutch and Portuguese translations (now 8 languages)
+- **Docker**: Publish only to GHCR, remove Docker Hub
+- **DevOps**: Interactive setup script with dry-run option and JMAP server URL validation
+- **Branding**: New Bulwark Webmail identity with logo assets and light/dark mode support
+
+### Fixes
+
+- **Sieve**: Use `onSuccessActivateScript` for sieve activation (#21)
+- **Composer**: Fix trailing comma handling in recipient input
+- **Email**: Fix print functionality for email content
+- **Connection**: Connection loss handling with session recovery
+- **Redirect**: Login redirect functionality with sessionStorage error handling
+
 ## 1.1.2 (2026-03-02)

 ### 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
- **Dependencies**: Update tailwindcss, lucide-react, @tanstack/react-virtual, @typescript-eslint/*, globals, @types/node
+- **Dependencies**: Update tailwindcss, lucide-react, @tanstack/react-virtual, @typescript-eslint/\*, globals, @types/node

 ## 1.1.1 (2026-02-28)

@@ -1,23 +1,36 @@
-# Contributing to JMAP Webmail
+<div align="center">

-Thank you for your interest in contributing to JMAP Webmail! This document provides guidelines and information for contributors.
+<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" />
+</picture>
+
+</div>
+
+# Contributing to Bulwark Webmail
+
+Thank you for your interest in contributing to Bulwark Webmail! This document provides guidelines and information for contributors.

 ## Getting Started

 ### Development Setup

 1. **Fork and clone** the repository:
+
   ```bash
-   git clone https://github.com/root-fr/jmap-webmail.git
-   cd jmap-webmail
+   git clone https://github.com/bulwarkmail/webmail.git
+   cd webmail
   ```

 2. **Install dependencies**:
+
   ```bash
   npm install
   ```

 3. **Set up environment**:
+
   ```bash
   cp .env.example .env.local
   # Edit .env.local with your JMAP server URL
@@ -75,9 +88,10 @@ This project uses **next-intl** for internationalization. Please follow these gu
 ### Key Rules

 1. **Never hardcode user-facing text** - Always use translations:
+
   ```tsx
-   const t = useTranslations('namespace');
-   return <div>{t('key')}</div>;
+   const t = useTranslations("namespace");
+   return <div>{t("key")}</div>;
   ```

 2. **Translation file locations**:
@@ -109,6 +123,7 @@ This project uses **next-intl** for internationalization. Please follow these gu
 ### Before Submitting

 1. **Create a feature branch**:
+
   ```bash
   git checkout -b feature/your-feature-name
   ```
@@ -147,6 +162,7 @@ Follow the conventional commits format:
 - `chore:` - Maintenance tasks

 Examples:
+
 ```
 feat: add email threading support
 fix: resolve attachment download issue
@@ -156,7 +172,7 @@ docs: update README with keyboard shortcuts
 ## Project Structure

 ```
-jmap-webmail/
+webmail/
 ├── app/                    # Next.js App Router pages
 │   └── [locale]/          # Locale-aware routing
 ├── components/            # React components
@@ -179,12 +195,13 @@ jmap-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?

 If you have questions about contributing, feel free to:
+
 - Open an issue for discussion
 - Check existing issues and pull requests

-Thank you for helping improve JMAP Webmail!
+Thank you for helping improve Bulwark Webmail!
@@ -8,12 +8,12 @@ RUN npx next build --webpack

 FROM node:24-alpine AS runner

-LABEL org.opencontainers.image.title="JMAP Webmail"
+LABEL org.opencontainers.image.title="Bulwark Webmail"
 LABEL org.opencontainers.image.description="Modern webmail client built with Next.js and the JMAP protocol"
-LABEL org.opencontainers.image.source="https://github.com/root-fr/jmap-webmail"
-LABEL org.opencontainers.image.url="https://github.com/root-fr/jmap-webmail"
-LABEL org.opencontainers.image.licenses="MIT"
-LABEL org.opencontainers.image.vendor="root.cloud"
+LABEL org.opencontainers.image.source="https://github.com/bulwarkmail/webmail"
+LABEL org.opencontainers.image.url="https://github.com/bulwarkmail/webmail"
+LABEL org.opencontainers.image.licenses="AGPL-3.0-only"
+LABEL org.opencontainers.image.vendor="rbm.systems"

 WORKDIR /app
 ENV NODE_ENV=production
@@ -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
@@ -1,3 +1,760 @@
+Bulwark Webmail
+Copyright (C) 2025-2026 Bulwark Project Authors
+
+This project is licensed under the GNU Affero General Public License,
+version 3 only.
+
+This repository includes material derived from earlier MIT-licensed work.
+The original attribution notice preserved for the fork lineage is available
+in the NOTICE file.
+
+    									GNU AFFERO GENERAL PUBLIC LICENSE
+    										 Version 3, 19 November 2007
+
+Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+Everyone is permitted to copy and distribute verbatim copies
+of this license document, but changing it is not allowed.
+
+    													Preamble
+
+    The GNU Affero General Public License is a free, copyleft license for
+
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+    The licenses for most software and other practical works are designed
+
+to take away your freedom to share and change the works. By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+    When we speak of free software, we are referring to freedom, not
+
+price. Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+    Developers that use our General Public Licenses protect your rights
+
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+    A secondary benefit of defending all users' freedom is that
+
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate. Many developers of free software are heartened and
+encouraged by the resulting cooperation. However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+    The GNU Affero General Public License is designed specifically to
+
+ensure that, in such cases, the modified source code becomes available
+to the community. It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server. Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+    An older license, called the Affero General Public License and
+
+published by Affero, was designed to accomplish similar goals. This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+    The precise terms and conditions for copying, distribution and
+
+modification follow.
+
+    										 TERMS AND CONDITIONS
+
+    0. Definitions.
+
+    "This License" refers to version 3 of the GNU Affero General Public License.
+
+    "Copyright" also means copyright-like laws that apply to other kinds of
+
+works, such as semiconductor masks.
+
+    "The Program" refers to any copyrightable work licensed under this
+
+License. Each licensee is addressed as "you". "Licensees" and
+"recipients" may be individuals or organizations.
+
+    To "modify" a work means to copy from or adapt all or part of the work
+
+in a fashion requiring copyright permission, other than the making of an
+exact copy. The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+    A "covered work" means either the unmodified Program or a work based
+
+on the Program.
+
+    To "propagate" a work means to do anything with it that, without
+
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy. Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+    To "convey" a work means any kind of propagation that enables other
+
+parties to make or receive copies. Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+    An interactive user interface displays "Appropriate Legal Notices"
+
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License. If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+    1. Source Code.
+
+    The "source code" for a work means the preferred form of the work
+
+for making modifications to it. "Object code" means any non-source
+form of a work.
+
+    A "Standard Interface" means an interface that either is an official
+
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+    The "System Libraries" of an executable work include anything, other
+
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form. A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+    The "Corresponding Source" for a work in object code form means all
+
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities. However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work. For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+    The Corresponding Source need not include anything that users
+
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+    The Corresponding Source for a work in source code form is that
+
+same work.
+
+    2. Basic Permissions.
+
+    All rights granted under this License are granted for the term of
+
+copyright on the Program, and are irrevocable provided the stated
+conditions are met. This License explicitly affirms your unlimited
+permission to run the unmodified Program. The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work. This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+    You may make, run and propagate covered works that you do not
+
+convey, without conditions so long as your license otherwise remains
+in force. You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright. Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+    Conveying under any other circumstances is permitted solely under
+
+the conditions stated below. Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+    3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+    No covered work shall be deemed part of an effective technological
+
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+    When you convey a covered work, you waive any legal power to forbid
+
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+    4. Conveying Verbatim Copies.
+
+    You may convey verbatim copies of the Program's source code as you
+
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+    You may charge any price or no price for each copy that you convey,
+
+and you may offer support or warranty protection for a fee.
+
+    5. Conveying Modified Source Versions.
+
+    You may convey a work based on the Program, or the modifications to
+
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    	a) The work must carry prominent notices stating that you modified
+    	it, and giving a relevant date.
+
+    	b) The work must carry prominent notices stating that it is
+    	released under this License and any conditions added under section
+    	7. This requirement modifies the requirement in section 4 to
+    	"keep intact all notices".
+
+    	c) You must license the entire work, as a whole, under this
+    	License to anyone who comes into possession of a copy. This
+    	License will therefore apply, along with any applicable section 7
+    	additional terms, to the whole of the work, and all its parts,
+    	regardless of how they are packaged. This License gives no
+    	permission to license the work in any other way, but it does not
+    	invalidate such permission if you have separately received it.
+
+    	d) If the work has interactive user interfaces, each must display
+    	Appropriate Legal Notices; however, if the Program has interactive
+    	interfaces that do not display Appropriate Legal Notices, your
+    	work need not make them do so.
+
+    A compilation of a covered work with other separate and independent
+
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit. Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+    6. Conveying Non-Source Forms.
+
+    You may convey a covered work in object code form under the terms
+
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    	a) Convey the object code in, or embodied in, a physical product
+    	(including a physical distribution medium), accompanied by the
+    	Corresponding Source fixed on a durable physical medium
+    	customarily used for software interchange.
+
+    	b) Convey the object code in, or embodied in, a physical product
+    	(including a physical distribution medium), accompanied by a
+    	written offer, valid for at least three years and valid for as
+    	long as you offer spare parts or customer support for that product
+    	model, to give anyone who possesses the object code either (1) a
+    	copy of the Corresponding Source for all the software in the
+    	product that is covered by this License, on a durable physical
+    	medium customarily used for software interchange, for a price no
+    	more than your reasonable cost of physically performing this
+    	conveying of source, or (2) access to copy the
+    	Corresponding Source from a network server at no charge.
+
+    	c) Convey individual copies of the object code with a copy of the
+    	written offer to provide the Corresponding Source. This
+    	alternative is allowed only occasionally and noncommercially, and
+    	only if you received the object code with such an offer, in accord
+    	with subsection 6b.
+
+    	d) Convey the object code by offering access from a designated
+    	place (gratis or for a charge), and offer equivalent access to the
+    	Corresponding Source in the same way through the same place at no
+    	further charge. You need not require recipients to copy the
+    	Corresponding Source along with the object code. If the place to
+    	copy the object code is a network server, the Corresponding Source
+    	may be on a different server (operated by you or a third party)
+    	that supports equivalent copying facilities, provided you maintain
+    	clear directions next to the object code saying where to find the
+    	Corresponding Source. Regardless of what server hosts the
+    	Corresponding Source, you remain obligated to ensure that it is
+    	available for as long as needed to satisfy these requirements.
+
+    	e) Convey the object code using peer-to-peer transmission, provided
+    	you inform other peers where the object code and Corresponding
+    	Source of the work are being offered to the general public at no
+    	charge under subsection 6d.
+
+    A separable portion of the object code, whose source code is excluded
+
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+    A "User Product" is either (1) a "consumer product", which means any
+
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling. In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage. For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product. A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+    "Installation Information" for a User Product means any methods,
+
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source. The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+    If you convey an object code work under this section in, or with, or
+
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information. But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+    The requirement to provide Installation Information does not include a
+
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed. Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+    Corresponding Source conveyed, and Installation Information provided,
+
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+    7. Additional Terms.
+
+    "Additional permissions" are terms that supplement the terms of this
+
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law. If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+    When you convey a copy of a covered work, you may at your option
+
+remove any additional permissions from that copy, or from any part of
+it. (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.) You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+    Notwithstanding any other provision of this License, for material you
+
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    	a) Disclaiming warranty or limiting liability differently from the
+    	terms of sections 15 and 16 of this License; or
+
+    	b) Requiring preservation of specified reasonable legal notices or
+    	author attributions in that material or in the Appropriate Legal
+    	Notices displayed by works containing it; or
+
+    	c) Prohibiting misrepresentation of the origin of that material, or
+    	requiring that modified versions of such material be marked in
+    	reasonable ways as different from the original version; or
+
+    	d) Limiting the use for publicity purposes of names of licensors or
+    	authors of the material; or
+
+    	e) Declining to grant rights under trademark law for use of some
+    	trade names, trademarks, or service marks; or
+
+    	f) Requiring indemnification of licensors and authors of that
+    	material by anyone who conveys the material (or modified versions of
+    	it) with contractual assumptions of liability to the recipient, for
+    	any liability that these contractual assumptions directly impose on
+    	those licensors and authors.
+
+    All other non-permissive additional terms are considered "further
+
+restrictions" within the meaning of section 10. If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term. If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+    If you add terms to a covered work in accord with this section, you
+
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+    Additional terms, permissive or non-permissive, may be stated in the
+
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+    8. Termination.
+
+    You may not propagate or modify a covered work except as expressly
+
+provided under this License. Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+    However, if you cease all violation of this License, then your
+
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+    Moreover, your license from a particular copyright holder is
+
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+    Termination of your rights under this section does not terminate the
+
+licenses of parties who have received copies or rights from you under
+this License. If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+    9. Acceptance Not Required for Having Copies.
+
+    You are not required to accept this License in order to receive or
+
+run a copy of the Program. Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance. However,
+nothing other than this License grants you permission to propagate or
+modify any covered work. These actions infringe copyright if you do
+not accept this License. Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+    10. Automatic Licensing of Downstream Recipients.
+
+    Each time you convey a covered work, the recipient automatically
+
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License. You are not responsible
+for enforcing compliance by third parties with this License.
+
+    An "entity transaction" is a transaction transferring control of an
+
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations. If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+    You may not impose any further restrictions on the exercise of the
+
+rights granted or affirmed under this License. For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+    11. Patents.
+
+    A "contributor" is a copyright holder who authorizes use under this
+
+License of the Program or a work on which the Program is based. The
+work thus licensed is called the contributor's "contributor version".
+
+    A contributor's "essential patent claims" are all patent claims
+
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version. For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+    Each contributor grants you a non-exclusive, worldwide, royalty-free
+
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+    In the following three paragraphs, a "patent license" is any express
+
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement). To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+    If you convey a covered work, knowingly relying on a patent license,
+
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients. "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+    If, pursuant to or in connection with a single transaction or
+
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+    A patent license is "discriminatory" if it does not include within
+
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License. You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+    Nothing in this License shall be construed as excluding or limiting
+
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+    12. No Surrender of Others' Freedom.
+
+    If conditions are imposed on you (whether by court order, agreement or
+
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License. If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all. For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+    13. Remote Network Interaction; Use with the GNU General Public License.
+
+    Notwithstanding any other provision of this License, if you modify the
+
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software. This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+    Notwithstanding any other provision of this License, you have
+
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work. The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+    14. Revised Versions of this License.
+
+    The Free Software Foundation may publish revised and/or new versions of
+
+the GNU Affero General Public License from time to time. Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+    Each version is given a distinguishing version number. If the
+
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation. If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+    If the Program specifies that a proxy can decide which future
+
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+    Later license versions may give you additional or different
+
+permissions. However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+    15. Disclaimer of Warranty.
+
+    THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+
+APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+    16. Limitation of Liability.
+
+    IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+    17. Interpretation of Sections 15 and 16.
+
+    If the disclaimer of warranty and limitation of liability provided
+
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+    									 END OF TERMS AND CONDITIONS
+
+    					How to Apply These Terms to Your New Programs
+
+    If you develop a new program, and you want it to be of the greatest
+
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+    To do so, attach the following notices to the program. It is safest
+
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    	<one line to give the program's name and a brief idea of what it does.>
+    	Copyright (C) <year>  <name of author>
+
+    	This program is free software: you can redistribute it and/or modify
+    	it under the terms of the GNU Affero General Public License as published by
+    	the Free Software Foundation, version 3 of the License.
+
+    	This program is distributed in the hope that it will be useful,
+    	but WITHOUT ANY WARRANTY; without even the implied warranty of
+    	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+    	GNU Affero General Public License for more details.
+
+    	You should have received a copy of the GNU Affero General Public License
+    	along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+    If your software can interact with users remotely through a computer
+
+network, you should also make sure that it provides a way for users to
+get its source. For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code. There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+    You should also get your employer (if you work as a programmer) or school,
+
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.
+
+# Bulwark Webmail fork notice
+
+This repository is distributed under the GNU Affero General Public License,
+version 3 only. It also includes material derived from earlier MIT-licensed
+work in the fork lineage.
+
+Fork lineage:
+
+- https://github.com/root-fr/jmap-webmail
+- https://github.com/bulwarkmail/webmail
+
+Original MIT attribution notice preserved from the earlier forked codebase:
+
 MIT License

 Copyright (c) 2025 Matthieu MALVACHE
@@ -0,0 +1,34 @@
+# Bulwark Webmail fork notice
+
+This repository is distributed under the GNU Affero General Public License,
+version 3 only. It also includes material derived from earlier MIT-licensed
+work in the fork lineage.
+
+Fork lineage:
+
+- https://github.com/root-fr/jmap-webmail
+- https://github.com/bulwarkmail/webmail
+
+Original MIT attribution notice preserved from the earlier forked codebase:
+
+MIT License
+
+Copyright (c) 2025 Matthieu MALVACHE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -1,181 +1,271 @@
-# JMAP Webmail
+<div align="center">

-A webmail client for [Stalwart Mail Server](https://stalw.art/), built with Next.js and the JMAP protocol.
+<picture>
+  <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>

-## Why Stalwart?
+# Bulwark Webmail

-Stalwart is a mail server written in Rust with native JMAP support, not IMAP/SMTP with JMAP added as an afterthought. It handles JMAP, IMAP, SMTP, and ManageSieve. Self-hosted, no third-party dependencies.
+A modern, self-hosted webmail client for [Stalwart Mail Server](https://stalw.art/).<br/>
+Built with Next.js and the JMAP protocol.

-[Stalwart on GitHub](https://github.com/stalwartlabs/mail-server) | [Documentation](https://stalw.art/docs/)
+[![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.10-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>
+
+---
+
+## Screenshots
+
+<table>
+<tr>
+<td width="50%">
+
+<img src="screenshots/inbox.png" width="100%" alt="Inbox — three-pane layout with sidebar, email list, and viewer (dark mode)">
+
+**Mail** — Three-pane layout with sidebar, email list, and viewer
+
+</td>
+<td width="50%">
+
+<img src="screenshots/calendar.png" width="100%" alt="Calendar">
+
+**Calendar** — Month, week, day, and agenda views with event management
+
+</td>
+</tr>
+<tr>
+<td width="50%">
+
+<img src="screenshots/contacts.png" width="100%" alt="Contacts">
+
+**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
+
+</td>
+</tr>
+</table>
+
+<details>
+<summary>More screenshots</summary>
+<table>
+<tr>
+<td width="50%">
+
+<img src="screenshots/inbox%20whitemode.png" width="100%" alt="Inbox — light mode">
+
+**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
+
+</td>
+</tr>
+<tr>
+<td width="50%">
+
+<img src="screenshots/login.png" width="100%" alt="Login page">
+
+**Login** — Configurable branding with OAuth2/OIDC and 2FA support
+
+</td>
+<td width="50%">
+</td>
+</tr>
+</table>
+</details>

 ## Features

-### Email
+### Mail

- Read, compose, reply, reply-all, and forward
- HTML rendering with DOMPurify sanitization
- Attachment upload and download
- Draft auto-save with discard confirmation
- Threading with inline expansion
- Mark as read/unread, star/unstar
- Archive and delete with configurable behavior
- Color tags/labels
- Search with JMAP filter panel, search chips, cross-mailbox queries
- Virtual scrolling for large lists
-
-### Interface
-
- Three-pane layout with dark and light themes
- Responsive (desktop sidebar + mobile bottom tab bar)
- Keyboard shortcuts
- Drag-and-drop email organization
- Right-click context menus
- Animations that respect `prefers-reduced-motion`
- Infinite scroll pagination
- Toast notifications with undo support
- Form validation with shake feedback
- Safe area insets for notched devices
- Screen reader live regions
-
-### Real-time
-
- Push notifications via JMAP EventSource
- Live unread counts
- Email arrival notifications
- Connection status indicator
-
-### Identity management
-
- Multiple sender identities with per-identity signatures
- Sub-addressing (user+tag@domain.com) with tag suggestions
- Identity badges in viewer and list
-
-### Address book
-
- Contact management with search and filtering
- JMAP server sync (RFC 9553/9610) with local fallback
- Email autocomplete in composer
- Contact groups with group expansion
- vCard import/export (RFC 6350) with duplicate detection
- Bulk operations (multi-select, delete, group add, export)
+- **Read, compose, reply, reply-all, forward** with rich HTML rendering
+- **Threading** — Gmail-style inline expansion with thread navigation
+- **Draft auto-save** with discard confirmation
+- **Attachments** — upload, download, and inline preview
+- **Search** — full-text with JMAP filter panel, search chips, cross-mailbox queries, wildcard support, and OR conditions
+- **Batch operations** — multi-select with checkboxes, archive, delete, move, tag
+- **Archive modes** — archive directly or organize archived mail by year or month
+- **Print** emails directly from the viewer
+- **Answered/forwarded status icons** in email list and thread views
+- **Color tags/labels** and star/unstar
+- **Virtual scrolling** for large mailboxes
+- **Quick reply** from the viewer
+- **Sender avatars** — favicon-based with negative caching for performance
+- **Recipient popover** for quick contact interaction
+- **TNEF support** — extract Outlook `winmail.dat` message bodies and attachments automatically
+- **Folder management** — create, rename, delete folders with icon picker and subfolder support
+- **Tag counts** — unread and total counts displayed in sidebar

 ### Calendar

- JMAP Calendar (RFC 8984) with capability detection
- Month, week, day, and agenda views
- Event create, edit, delete with recurrence and reminders
- Participant scheduling with iTIP invitations and RSVP
- Inline calendar invitation banner in email viewer (.ics detection, RSVP, import)
- Multi-day events, column-based overlap layout
- Mini-calendar sidebar with calendar visibility toggles
- Locale-aware date formatting
- Settings for first day of week, time format (12h/24h), default view
- Drag-and-drop rescheduling with time snap
- Click-drag on empty slots to create events
- Resize events by dragging (15-minute snap)
- Double-click quick create
- Event duplication (+1 day offset)
- Recurring event edit/delete scope (this, this and following, all)
- iCalendar (.ics) file import with preview
- Real-time updates via JMAP push
- Event notifications with configurable sound
+- **Month, week, day, and agenda views** with mini-calendar sidebar
+- **Event hover preview** popover with details
+- **Drag-and-drop rescheduling**, click-drag creation, edge-resize (15-min snap)
+- **Recurring events** with edit/delete scope (this / this and following / all)
+- **Participant scheduling** — iTIP invitations, organizer/attendee UI, RSVP
+- **Inline calendar invitations** in email viewer — auto-detect `.ics`, RSVP, import
+- **iCalendar import** with preview and bulk create
+- **Task management** — create, edit, and track tasks with due dates, priority, and completion status
+- **Week numbers** in mini-calendar sidebar
+- **Notifications** with configurable sound, alert persistence, and sound picker with preview playback
+- **Real-time sync** via JMAP push

-### Email templates
+### Contacts

- Reusable templates organized by category
- Placeholder variables (`{{recipientName}}`, `{{date}}`, etc.) with auto-fill
- Template picker in compose toolbar with search and filter
- Template manager in settings
+- **Contact management** with JMAP sync (RFC 9553/9610) and local fallback
+- **Contact groups** with group expansion and member management
+- **vCard import/export** (RFC 6350) with duplicate detection
+- **Autocomplete** in composer (To/Cc/Bcc)
+- **Bulk operations** — multi-select, delete, group add, export

-### Email filters
+### Filters & Automation

- Server-side filtering with JMAP Sieve Scripts (RFC 9661)
- Visual rule builder: conditions (From, To, Subject, Size, Body...) and actions (Move, Forward, Mark read, Star, Discard, Reject...)
- Raw Sieve editor with syntax validation
- Auto-save with rollback on failure
- Drag-and-drop rule reordering
- Only shown when the server supports Sieve
+- **Server-side email filters** via JMAP Sieve Scripts (RFC 9661)
+- **Visual rule builder** — conditions (From, To, Subject, Size, Body…) and actions (Move, Forward, Star, Discard…)
+- **Raw Sieve editor** with syntax validation
+- **Vacation responder** with date range scheduling and sidebar indicator
+- **Email templates** — reusable, categorized, with placeholder auto-fill (`{{recipientName}}`, `{{date}}`, etc.)

-### Vacation responder
+### Files

- JMAP VacationResponse with date range scheduling
- Settings tab for message configuration
- Sidebar indicator when active
+- **File browser** with JMAP FileNode cloud storage (Stalwart native)
+- **Upload and download** files with progress tracking and folder upload support
+- **Folder navigation** with breadcrumb path and tree sidebar
+- **Grid and list views** with sorting by name, size, or date
+- **Clipboard operations** — cut, copy, paste, duplicate files
+- **File preview** for images, text, audio, video, and more
+- **Favorites and recent files** for quick access
+- **Bulk operations** — multi-select, delete, move, download

-### Security and privacy
+### Security & Privacy

- External content blocked by default
- Trusted senders list for automatic image loading
- HTML sanitization (DOMPurify)
- SPF/DKIM/DMARC status indicators
- Session-based auth, no password storage by default
- TOTP two-factor authentication
- "Remember me" with AES-256-GCM encrypted httpOnly cookie (opt-in)
- OAuth2/OIDC with PKCE for SSO (opt-in, RP-initiated logout)
- External IdP support (Keycloak, Authentik) via configurable issuer URL
- CORS misconfiguration detection with detailed error messages
- Shared folder support
- Newsletter unsubscribe (RFC 2369)
- CSP, X-Content-Type-Options, X-Frame-Options, Referrer-Policy headers
+- **External content blocked** by default — trusted senders list for auto-load
+- **HTML sanitization** via DOMPurify with XSS prevention
+- **S/MIME** — manage certificates, sign outgoing mail, encrypt to recipients, decrypt messages, and verify signatures
+- **SPF/DKIM/DMARC** status indicators
+- **OAuth2/OIDC with PKCE** for SSO (Keycloak, Authentik, or built-in), with OAuth-only mode and non-interactive SSO for embedded/iframe deployments
+- **TOTP two-factor authentication**
+- **Account security panel** — manage passwords and 2FA via Stalwart admin API
+- **"Remember me"** — AES-256-GCM encrypted httpOnly cookie (opt-in)
+- **Security headers** — CSP with per-request nonce, X-Frame-Options, Referrer-Policy
+- **Newsletter unsubscribe** (RFC 2369)
+
+### Interface
+
+- **Three-pane layout** — sidebar, email list, viewer with resizable columns
+- **Dark and light themes** with intelligent email color transformation
+- **Always-light email rendering** option for problematic HTML messages in dark theme
+- **Responsive** — desktop sidebar + mobile bottom tab bar with tablet support
+- **Keyboard shortcuts** — full navigation without a mouse
+- **Drag-and-drop** email organization between mailboxes and tag assignment
+- **Interactive guided tour** — onboarding walkthrough for new users
+- **Right-click context menus**, toast notifications with undo, form validation with shake feedback
+- **Customizable toolbar** position, custom favicon, sidebar/login logos, and login page branding
+- **Sidebar apps** — pin custom tools to the navigation rail and open them inline or in a new tab
+- **Settings sync** — preferences synchronized with the server (encrypted)
+- **Storage quota** display
+- **Shared folders** — multi-account access
+- **Accessibility** — WCAG AA contrast, reduced-motion support, focus trap, screen reader live regions

 ### Internationalization

- 8 languages: English, French, Japanese, Spanish, Italian, German, Dutch, Portuguese
- Automatic browser language detection
- Persistent language preference
+8 languages: English · Français · 日本語 · Español · Italiano · Deutsch · Nederlands · Português

-### Deployment
+Automatic browser detection with persistent preference.

- Pre-built Docker images on [Docker Hub](https://hub.docker.com/r/rootfr/jmap-webmail) and [GHCR](https://ghcr.io/root-fr/jmap-webmail) (amd64/arm64)
- Multi-stage build with standalone output
- Runtime environment variables (no rebuild needed)
- Health check endpoint
- Structured logging (text/JSON)
- Update check on startup (server logs only, no client exposure)
+### Identity Management

-## Tech stack
+- **Multiple sender identities** with per-identity signatures
+- **Identity refresh** — keep the identity manager aligned with server-side changes after edits
+- **Sub-addressing** — `user+tag@domain.com` with contextual tag suggestions
+- **Identity badges** in viewer and email list

- [Next.js 16](https://nextjs.org/) with App Router
- TypeScript
- [Tailwind CSS v4](https://tailwindcss.com/)
- [Zustand](https://zustand-demo.pmnd.rs/) for state management
- Custom JMAP client (RFC 8620)
- [next-intl](https://next-intl-docs.vercel.app/) for i18n
- [Lucide React](https://lucide.dev/) icons
+### Operations

-## Getting started
+- **Automatic update check** — server logs when a newer release is available
+- **Demo mode** — try the webmail with fixture data for emails, calendars, contacts, files, filters, identities, and mailboxes — no mail server required

-### Prerequisites
+---

- Node.js 18+
- A JMAP-compatible mail server ([Stalwart](https://stalw.art/) recommended)
+## Quick Start

-### Installation
+### Docker (recommended)

 ```bash
-git clone https://github.com/root-fr/jmap-webmail.git
-cd jmap-webmail
-npm install
-cp .env.example .env.local
+docker run -d -p 3000:3000 \
+  -e JMAP_SERVER_URL=https://mail.example.com \
+  ghcr.io/bulwarkmail/webmail:latest
 ```

-### Configuration
+Or with Docker Compose:
+
+```bash
+cp .env.example .env.local
+# Edit .env.local — set JMAP_SERVER_URL
+docker compose up -d
+```
+
+### From Source
+
+```bash
+git clone https://github.com/bulwarkmail/webmail.git
+cd webmail
+npm install
+cp .env.example .env.local
+# Edit .env.local — set JMAP_SERVER_URL
+npm run build && npm start
+```
+
+### Development
+
+```bash
+npm run dev        # Start dev server (mock JMAP server included)
+npm run typecheck  # Type checking
+npm run lint       # Linting
+```
+
+## Configuration

 Edit `.env.local`:

 ```env
-# App name displayed in the UI
-APP_NAME=My Webmail
-
-# Your JMAP server URL (required)
+# Required
 JMAP_SERVER_URL=https://mail.example.com
+
+# Optional
+APP_NAME=My Webmail
 ```

-These are runtime environment variables, read at request time. Docker deployments can be configured without rebuilding. Legacy `NEXT_PUBLIC_*` variables still work as fallbacks.
+All variables are **runtime** — Docker deployments can be configured without rebuilding.

-#### OAuth2/OIDC (optional)
+<details>
+<summary>Server Listen Address</summary>

-To enable SSO login alongside Basic Auth:
+```env
+HOSTNAME=0.0.0.0    # Default; use "::" for IPv6
+PORT=3000            # Default listen port
+```
+
+</details>
+
+<details>
+<summary>OAuth2/OIDC (SSO)</summary>

 ```env
 OAUTH_ENABLED=true
@@ -184,132 +274,64 @@ OAUTH_CLIENT_SECRET=              # optional, for confidential clients
 OAUTH_ISSUER_URL=                 # optional, for external IdPs (Keycloak, Authentik)
 ```

-Endpoints are auto-discovered via `.well-known/oauth-authorization-server` or `.well-known/openid-configuration`. If your JMAP server delegates auth to an external IdP, set `OAUTH_ISSUER_URL` to the IdP's base URL (e.g., `https://keycloak.example.com/realms/mail`).
+Endpoints are auto-discovered via `.well-known/oauth-authorization-server` or `.well-known/openid-configuration`.

-#### Remember me (optional)
+</details>

-To enable "Remember me" for Basic Auth login:
+<details>
+<summary>Remember Me</summary>

 ```env
 SESSION_SECRET=your-secret-key    # Generate with: openssl rand -base64 32
 ```

-When set, a "Remember me" checkbox appears on the login form. Credentials are encrypted with AES-256-GCM and stored in an httpOnly cookie (30-day expiry).
+Credentials encrypted with AES-256-GCM, stored in an httpOnly cookie (30-day expiry).

-### Development
+</details>

-```bash
-npm run dev        # Start dev server
-npm run typecheck  # Type checking
-npm run lint       # Linting
-```
+## Keyboard Shortcuts

-### Production
+| Key           | Action                  |
+| ------------- | ----------------------- |
+| `j` / `k`     | Navigate between emails |
+| `Enter` / `o` | Open email              |
+| `Esc`         | Close / deselect        |
+| `c`           | Compose                 |
+| `r` / `R`     | Reply / Reply all       |
+| `f`           | Forward                 |
+| `s`           | Star                    |
+| `e`           | Archive                 |
+| `#`           | Delete                  |
+| `/`           | Search                  |
+| `?`           | Show all shortcuts      |

-```bash
-npm run build
-npm start
-```
+## Tech Stack

-### Docker
+|               |                                                   |
+| ------------- | ------------------------------------------------- |
+| **Framework** | [Next.js 16](https://nextjs.org/) with App Router |
+| **Language**  | TypeScript                                        |
+| **Styling**   | [Tailwind CSS v4](https://tailwindcss.com/)       |
+| **State**     | [Zustand](https://zustand-demo.pmnd.rs/)          |
+| **Protocol**  | Custom JMAP client (RFC 8620)                     |
+| **i18n**      | [next-intl](https://next-intl-docs.vercel.app/)   |
+| **Icons**     | [Lucide React](https://lucide.dev/)               |

-```bash
-# Pre-built image
-docker run -p 3000:3000 -e JMAP_SERVER_URL=https://mail.example.com rootfr/jmap-webmail:latest
+## Why Stalwart?

-# From GHCR
-docker run -p 3000:3000 -e JMAP_SERVER_URL=https://mail.example.com ghcr.io/root-fr/jmap-webmail:latest
-
-# With docker compose
-cp .env.example .env.local
-# Edit .env.local with your JMAP_SERVER_URL
-docker compose up -d
-
-# Build from source
-docker build -t jmap-webmail .
-docker run -p 3000:3000 -e JMAP_SERVER_URL=https://mail.example.com jmap-webmail
-```
-
-## Keyboard shortcuts
-
-| Key | Action |
-|-----|--------|
-| `j` / `k` | Navigate between emails |
-| `Enter` / `o` | Open selected email |
-| `Esc` | Close viewer / deselect |
-| `c` | Compose new email |
-| `r` | Reply |
-| `R` / `a` | Reply all |
-| `f` | Forward |
-| `s` | Toggle star |
-| `e` | Archive |
-| `#` / `Delete` | Delete |
-| `u` | Mark as unread |
-| `/` | Focus search |
-| `x` | Expand/collapse thread |
-| `Ctrl+Shift+T` | Insert template |
-| `?` | Show shortcuts help |
-
-## Screenshots
-
-<table>
-<tr>
-<td width="50%">
-
-**Login**
-<img src="screenshots/01-login.png" width="100%" alt="Login">
-
-</td>
-<td width="50%">
-
-**Inbox**
-<img src="screenshots/02-inbox.png" width="100%" alt="Inbox">
-
-</td>
-</tr>
-<tr>
-<td width="50%">
-
-**Email Viewer**
-<img src="screenshots/03-email-viewer.png" width="100%" alt="Email Viewer">
-
-</td>
-<td width="50%">
-
-**Compose**
-<img src="screenshots/04-compose.png" width="100%" alt="Compose">
-
-</td>
-</tr>
-<tr>
-<td width="50%">
-
-**Dark Mode**
-<img src="screenshots/05-dark-mode.png" width="100%" alt="Dark Mode">
-
-</td>
-<td width="50%">
-
-**Settings**
-<img src="screenshots/06-settings.png" width="100%" alt="Settings">
-
-</td>
-</tr>
-</table>
+[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
+## License

-See [ROADMAP.md](ROADMAP.md) for planned features.
+[GNU AGPL v3](LICENSE)
+
+This repository also preserves the original MIT attribution notice for the
+fork lineage in [NOTICE](NOTICE).

 ## Acknowledgments

- [Stalwart Labs](https://stalw.art/) for the mail server
- The [JMAP](https://jmap.io/) working group for the protocol spec
-
-## License
-
-MIT. See [LICENSE](LICENSE).
+Thanks to [root-fr/jmap-webmail](https://github.com/root-fr/jmap-webmail/) and [@ma2t](https://github.com/ma2t) for doing most of the groundwork that this project builds upon.
@@ -1,269 +0,0 @@
-# JMAP Webmail - Roadmap
-
-This document tracks the development status and planned features for JMAP Webmail.
-
-## Completed Features
-
-### Core Infrastructure
- [x] Next.js 16 with TypeScript and App Router
- [x] Tailwind CSS v4 with Oxide engine
- [x] Zustand state management
- [x] Custom JMAP client implementation (RFC 8620)
-
-### Authentication
- [x] Login with JMAP server authentication
- [x] Session management (no password storage for security)
- [x] Username autocomplete with history
- [x] Logout functionality
- [x] Authentication error handling
- [x] JMAP identities for sender address
- [x] TOTP two-factor authentication (Stalwart-compatible)
- [x] OAuth2/OIDC with PKCE (opt-in SSO, session persistence, RP-initiated logout)
- [x] External IdP support via explicit issuer URL (Keycloak, Authentik, etc.)
- [x] "Remember me" session persistence for Basic Auth (AES-256-GCM encrypted httpOnly cookie)
-
-### JMAP Server Connection
- [x] Session establishment and keep-alive
- [x] Connection error handling and retries
- [x] CORS error detection with actionable user guidance
- [x] Session URL origin rewriting (fixes Docker/reverse proxy deployments where server returns internal hostname)
- [x] Storage quota display
- [x] Server capability detection
- [x] Shared folders support (multi-account access)
-
-### Email Operations
- [x] Email fetching and display
- [x] Full HTML email rendering
- [x] Compose, reply, reply-all, forward
- [x] Draft auto-save with discard confirmation
- [x] Mark as read/unread
- [x] Star/unstar emails
- [x] Delete and archive
- [x] Color tags/labels
- [x] Full-text search
- [x] Advanced search with JMAP filter panel, search chips, and cross-mailbox queries
- [x] Attachment upload and download
- [x] Batch operations (multi-select)
- [x] Quick reply form
- [x] Email threading (Gmail-style inline expansion)
-
-### Real-time Updates
- [x] EventSource for JMAP push notifications
- [x] State synchronization
- [x] Email arrival notifications
- [x] Real-time unread counts
- [x] Mailbox change handling
-
-### User Interface
- [x] Three-pane layout (sidebar, list, viewer)
- [x] Minimalist design system
- [x] Dark and light theme support
- [x] Custom scrollbars
- [x] Mobile responsive design
- [x] Keyboard shortcuts
- [x] Drag-and-drop email organization
- [x] Right-click context menus
- [x] Hierarchical mailbox display
- [x] Email list with avatars and visual hierarchy
- [x] Expandable email headers
- [x] External content warning banner
- [x] SPF/DKIM/DMARC status indicators
- [x] Loading states and skeletons
- [x] Smooth transitions and animations
- [x] Infinite scroll pagination
- [x] Virtual scrolling for large email lists
- [x] Error boundaries
- [x] Settings page with preferences
- [x] Navigation rail (desktop vertical icon sidebar + mobile bottom tab bar)
- [x] Welcome banner for first-time users (one-time display, localStorage persistence)
- [x] Confirmation dialog component with promise-based useConfirmDialog hook
- [x] Toast notifications with undo action support and typed durations
- [x] Inline form validation with shake animation (email composer, contact form)
- [x] Login UX polish (error shake, discreet 2FA toggle, password visibility toggle, session expired banner)
- [x] Empty state patterns for contacts (distinct "no data" vs "no search results" with contextual actions)
- [x] WCAG AA reduced-motion media query (global animation/transition reset)
- [x] Safe area inset utilities for notched devices
- [x] Screen reader live region announcements (sr-only)
-
-### Internationalization
- [x] English language support
- [x] French language support
- [x] Japanese language support
- [x] Spanish language support
- [x] Italian language support
- [x] German language support
- [x] Dutch language support
- [x] Portuguese language support
- [x] Automatic browser language detection
- [x] Language preference persistence
-
-### Security & Accessibility
- [x] External content blocked by default
- [x] HTML sanitization with DOMPurify
- [x] User control for loading external content
- [x] Trusted senders list for automatic image loading
- [x] Dark mode email readability (intelligent color transformation)
- [x] WCAG 2.0 Level AA color contrast compliance
- [x] Newsletter unsubscribe support (RFC 2369)
- [x] XSS attack prevention with comprehensive validation
- [x] CSP Report-Only headers with per-request nonce
- [x] Security headers (X-Content-Type-Options, X-Frame-Options, Referrer-Policy, Permissions-Policy)
- [x] Reusable focus trap hook (Tab cycling, Escape handling, focus restore)
- [x] WCAG AA prefers-reduced-motion support (global animation/transition reset)
- [x] Safe area insets for notched mobile devices
- [x] Screen reader sr-only live region for dynamic announcements
-
-### Identity Management
- [x] Multiple sender identities (name, email, signature)
- [x] Sub-addressing support (user+tag@domain.com)
- [x] Per-identity signatures
- [x] Identity badges in email viewer and list
- [x] Tag suggestions based on context
- [x] Display name included in From header (recipients see name, not just email)
- [x] Primary identity (matching login) selected by default in composer
-
-### Address Book & Contacts
- [x] Contact store with JMAP sync and local fallback
- [x] Contact CRUD operations (create, read, update, delete)
- [x] Contacts list view with search/filter
- [x] Contact details view/edit form
- [x] JMAP contacts sync (RFC 9553/9610 ContactCard/AddressBook)
- [x] Email autocomplete from contacts
- [x] Contacts integration in email composer (To/Cc/Bcc)
- [x] Contact groups/lists management with JMAP members map
- [x] vCard import/export (RFC 6350 parser/generator, duplicate detection)
- [x] Bulk contact operations (multi-select, delete, group add, export)
- [x] i18n support for contacts (all 8 languages)
-
-### Vacation Responder
- [x] JMAP VacationResponse singleton management
- [x] Settings tab with date range and message configuration
- [x] Sidebar indicator when vacation auto-reply is active
- [x] i18n support (all 8 languages)
-
-### Calendar Integration
- [x] JMAP Calendar types (RFC 8984) and client methods
- [x] Calendar capability detection (urn:ietf:params:jmap:calendars)
- [x] Calendar store with Zustand (persist middleware)
- [x] Month, week, day, and agenda views
- [x] Event modal (create/edit/delete with recurrence, reminders)
- [x] Mini-calendar sidebar with calendar visibility toggles
- [x] Calendar settings (default view, week start, time format)
- [x] Multi-day event spanning across all covered days
- [x] Column-based overlap layout for concurrent events
- [x] Locale-aware date formatting via next-intl
- [x] First day of week and time format settings wired to views
- [x] Push notification handling for calendar state changes
- [x] Calendar page capability check (redirect if unsupported)
- [x] Error handling with toast feedback on event CRUD
- [x] Timezone auto-detection on event creation
- [x] Input validation, color sanitization, focus trap
- [x] ARIA grid roles and event card accessible labels
- [x] Mobile touch targets (44px minimum)
- [x] Calendar keyboard shortcuts (m/w/d/a views, t today, n new event)
- [x] i18n support with ICU pluralization (all 8 languages)
- [x] Drag-and-drop event rescheduling (week/day time snap, month date move)
- [x] iCalendar (.ics) file import via CalendarEvent/parse with preview and bulk create
- [x] Event notifications with client-side alert evaluation and toast display
- [x] Notification sound, acknowledged alert persistence (localStorage), proactive 24h event fetch
- [x] Configurable notification settings (enable/disable, sound toggle)
- [x] Participant scheduling with iTIP invitations (organizer/attendee UI, RSVP buttons, contact autocomplete)
- [x] Inline calendar invitation banner in email viewer (auto-detect .ics attachments, RSVP, import to calendar, cancellation display)
- [x] Scheduling message support (sendSchedulingMessages flag for create/update/delete)
- [x] Click-drag to create events (pointer-based time range selection, 15-min snap, visual overlay)
- [x] Event resize by dragging bottom edge handle (15-min snap, optimistic JMAP update)
- [x] Recurring event edit/delete scope dialog (this event / this and following / all events)
- [x] Double-click quick event creation (inline title input, PT1H default)
- [x] Event duplication button in modal (clones event +1 day, opens for editing)
-
-### Email Filters
- [x] JMAP Sieve Scripts (RFC 9661) with capability detection
- [x] Visual rule builder (conditions: From/To/Cc/Subject/Header/Size/Body, actions: Move/Copy/Forward/Mark read/Star/Label/Discard/Reject/Keep/Stop)
- [x] Raw Sieve script editor with syntax validation
- [x] Sieve generator and parser with JSON metadata round-trip
- [x] Filter store with CRUD, reorder, toggle, auto-save with rollback
- [x] Opaque script detection with reset to visual builder option
- [x] Focus trap accessibility in modals
- [x] Toast validation feedback for empty rules
- [x] Push notification handling for SieveScript state changes
- [x] i18n support (all 8 languages)
-
-### Email Templates
- [x] Reusable email templates with local storage persistence
- [x] Category organization (General, Business, Personal, Support, Follow-up, custom)
- [x] Dynamic placeholder variables with auto-fill from composer context
- [x] Template manager modal (create, edit, duplicate, delete)
- [x] Template picker in composer toolbar with search and category filter
- [x] Custom placeholder prompt on template insertion
- [x] Settings tab for template management
- [x] Keyboard shortcut (Ctrl+Shift+T to insert template)
- [x] i18n support (all 8 languages)
-
-### Email Display
- [x] Proper email layout without horizontal scroll or clipping
- [x] Blocked image container collapsing (no empty spaces in newsletters)
-
-### Testing
- [x] Unit tests for validation utilities (57 tests)
- [x] Unit tests for email sanitization (27 tests)
- [x] Unit tests for color transformation (40 tests)
- [x] Unit tests for contact store (56 tests)
- [x] Unit tests for JMAP contact client (41 tests)
- [x] Unit tests for vCard parser (18 tests)
- [x] Unit tests for thread utilities (20 tests)
- [x] Unit tests for email headers (39 tests)
- [x] Component tests (contacts, UI components — 41 tests)
- [x] JMAP client method tests (identity: 20, contacts: 41)
- [x] Unit tests for Sieve generator (50 tests)
- [x] Unit tests for Sieve parser (14 tests)
- [x] Unit tests for calendar alerts (36 tests)
- [x] Unit tests for calendar notification store (8 tests)
- [x] Unit tests for calendar invitation parsing (25 tests)
- [x] Unit tests for calendar participants (26 tests)
- [x] Unit tests for template utilities (48 tests)
- [x] Unit tests for OAuth PKCE and discovery (14 tests)
- [x] XSS attack vector testing
- [x] Playwright E2E framework setup
-
-### Deployment
- [x] Runtime environment variables (Docker-friendly configuration)
- [x] Health check endpoint
- [x] Docker support (multi-stage build, docker-compose, standalone output)
- [x] Structured server-side logger (text/JSON format, configurable level)
- [x] Pre-built Docker image on [Docker Hub](https://hub.docker.com/r/rootfr/jmap-webmail) and [GHCR](https://ghcr.io/root-fr/jmap-webmail) with multi-arch support (amd64/arm64)
- [x] GitHub Actions CI/CD for automated image publishing on releases
- [x] CVE remediation: remove npm from production image, upgrade Alpine packages
- [x] Server-side update check (logs newer version availability on startup)
-
-## Planned Features
-
-### Advanced Features
- [ ] Free/busy queries (Principal/getAvailability)
- [ ] Calendar sharing UI (JMAP Sharing RFC 9670)
- [ ] Email encryption (PGP/GPG)
-
-### Performance Optimizations
- [ ] Email content caching
- [ ] Bundle size optimization
- [ ] Service worker for offline support
- [ ] Lazy loading for attachments
-
-### Testing (Remaining)
- [ ] E2E tests with real JMAP server
- [ ] Accessibility testing
- [ ] Performance testing
-
-### Deployment
- [ ] Production build optimizations
- [ ] Monitoring and logging
-
-### Security Enhancements
- [ ] Rate limiting
-
-## Known Issues
-
- [ ] Next.js workspace root warning (cosmetic)
-
-## Contributing
-
-Want to help implement a feature? Check out our [CONTRIBUTING.md](CONTRIBUTING.md) guide!
@@ -1 +1 @@
-1.1.2
+1.4.10
@@ -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,35 +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");
-          router.push(`/${params.locale}`);
-        } 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) {
@@ -78,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>
@@ -1,31 +1,47 @@
 "use client";

-import { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo, type TouchEvent as ReactTouchEvent } from "react";
 import { useRouter } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
+import { Plus } from "lucide-react";
 import {
  startOfMonth, endOfMonth, startOfWeek, endOfWeek,
  addMonths, subMonths, addWeeks, subWeeks, addDays, subDays,
-  format, parseISO,
+  startOfDay, format, parseISO,
 } from "date-fns";
 import { useCalendarStore } from "@/stores/calendar-store";
-import { useAuthStore } from "@/stores/auth-store";
+import { isCalendarViewMode } from "@/stores/calendar-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";
 import { toast } from "@/stores/toast-store";
 import { useIsMobile } from "@/hooks/use-media-query";
+import { Button } from "@/components/ui/button";
 import { CalendarToolbar } from "@/components/calendar/calendar-toolbar";
 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 } from "@/components/calendar/event-modal";
+import { EventModal, type PendingEventPreview } from "@/components/calendar/event-modal";
 import { EventDetailPopover } from "@/components/calendar/event-detail-popover";
 import { ICalImportModal } from "@/components/calendar/ical-import-modal";
+import { ICalSubscriptionModal } from "@/components/calendar/ical-subscription-modal";
 import { RecurrenceScopeDialog, type RecurrenceEditScope } from "@/components/calendar/recurrence-scope-dialog";
 import { NavigationRail } from "@/components/layout/navigation-rail";
+import { SidebarAppsModal } from "@/components/layout/sidebar-apps-modal";
+import { InlineAppView } from "@/components/layout/inline-app-view";
+import { useSidebarApps } from "@/hooks/use-sidebar-apps";
+import { ResizeHandle } from "@/components/layout/resize-handle";
+import { sanitizeOutgoingCalendarEventData } from "@/lib/calendar-event-normalization";
+import { getEventStartDate } from "@/lib/calendar-utils";
+import { useTaskStore } from "@/stores/task-store";
+import { cn } from "@/lib/utils";
 import type { CalendarEvent, CalendarParticipant } from "@/lib/jmap/types";
 import { getUserParticipantId } from "@/lib/calendar-participants";
 import { debug } from "@/lib/debug";
@@ -42,15 +58,22 @@ export default function CalendarPage() {
  const router = useRouter();
  const t = useTranslations("calendar");
  const isMobile = useIsMobile();
-  const { client, isAuthenticated } = useAuthStore();
+  const { showAppsModal, inlineApp, loadedApps, handleManageApps, handleInlineApp, closeInlineApp, closeAppsModal } = useSidebarApps();
+  const { client, isAuthenticated, logout, checkAuth, isLoading: authLoading } = useAuthStore();
+  const [initialCheckDone, setInitialCheckDone] = useState(() => useAuthStore.getState().isAuthenticated && !!useAuthStore.getState().client);
+  const { quota, isPushConnected } = useEmailStore();
  const {
    calendars, events, selectedDate, viewMode, selectedCalendarIds,
    isLoading, isLoadingEvents, supportsCalendar, error,
    fetchCalendars, fetchEvents, createEvent, updateEvent, deleteEvent, rsvpEvent,
-    setSelectedDate, setViewMode, toggleCalendarVisibility,
+    setSelectedDate, setViewMode, toggleCalendarVisibility, updateCalendar,
+    refreshAllSubscriptions, icalSubscriptions,
  } = useCalendarStore();
-  const { firstDayOfWeek, timeFormat } = useSettingsStore();
+  const { firstDayOfWeek, timeFormat, showWeekNumbers, enableCalendarTasks, showTasksOnCalendar, calendarHoverPreview } = useSettingsStore();
+  const taskStore = useTaskStore();
+  const fetchTasksFn = useTaskStore(state => state.fetchTasks);
  const { identities } = useIdentityStore();
+  const normalizedViewMode = isCalendarViewMode(viewMode) ? viewMode : "month";

  const currentUserEmails = useMemo(() =>
    identities.map(id => id.email).filter(Boolean),
@@ -59,6 +82,8 @@ 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>();
@@ -66,15 +91,39 @@ export default function CalendarPage() {
  const [pendingScopeAction, setPendingScopeAction] = useState<PendingScopeAction | null>(null);
  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
+  const [calSidebarWidth, setCalSidebarWidth] = useState(() => {
+    try { const v = localStorage.getItem("calendar-sidebar-width"); return v ? Number(v) : 256; } catch { return 256; }
+  });
+  const [isResizing, setIsResizing] = useState(false);
+  const dragStartWidth = useRef(256);
+
+  // Swipe navigation ref (handlers defined after navigatePrev/navigateNext)
+  const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null);
+
+  // Check auth on mount
  useEffect(() => {
-    if (!isAuthenticated) {
-      router.push("/login");
-    } else if (!supportsCalendar) {
+    checkAuth().finally(() => {
+      setInitialCheckDone(true);
+    });
+  }, [checkAuth]);
+
+  useEffect(() => {
+    if (initialCheckDone && !isAuthenticated && !authLoading) {
+      try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
+      redirectToLogin();
+    } else if (client && !supportsCalendar) {
      router.push("/");
    }
-  }, [isAuthenticated, supportsCalendar, router]);
+  }, [initialCheckDone, isAuthenticated, authLoading, client, supportsCalendar, router]);

  useEffect(() => {
    if (error) {
@@ -89,9 +138,19 @@ export default function CalendarPage() {
    }
  }, [client, fetchCalendars]);

+  // Auto-refresh iCal subscriptions
+  useEffect(() => {
+    if (!client) return;
+    // Refresh on mount (respects per-subscription interval)
+    refreshAllSubscriptions(client);
+    // Check again every 5 minutes
+    const interval = setInterval(() => refreshAllSubscriptions(client), 5 * 60 * 1000);
+    return () => clearInterval(interval);
+  }, [client, refreshAllSubscriptions]);
+
  const dateRange = useMemo(() => {
    const d = selectedDate;
-    switch (viewMode) {
+    switch (normalizedViewMode) {
      case "month": {
        const ms = startOfMonth(d);
        const me = endOfMonth(d);
@@ -112,53 +171,109 @@ export default function CalendarPage() {
          start: format(d, "yyyy-MM-dd'T'00:00:00"),
          end: format(d, "yyyy-MM-dd'T'23:59:59"),
        };
-      case "agenda":
+      case "agenda": {
+        // Agenda always starts from today at the earliest
+        const today = startOfDay(new Date());
+        const agendaStart = d >= today ? d : today;
        return {
-          start: format(d, "yyyy-MM-dd'T'00:00:00"),
-          end: format(addDays(d, 30), "yyyy-MM-dd'T'23:59:59"),
+          start: format(agendaStart, "yyyy-MM-dd'T'00:00:00"),
+          end: format(addDays(agendaStart, 30), "yyyy-MM-dd'T'23:59:59"),
        };
+      }
+      case "tasks":
+        return null;
    }
-  }, [selectedDate, viewMode, firstDayOfWeek]);
+  }, [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) {
+    if (client && calendars.length > 0 && dateRange) {
      fetchEvents(client, dateRange.start, dateRange.end);
    }
  }, [client, calendars.length, dateRange, fetchEvents]);

  const navigatePrev = useCallback(() => {
    let next: Date;
-    switch (viewMode) {
+    switch (normalizedViewMode) {
      case "month": next = subMonths(selectedDate, 1); break;
      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);
-  }, [viewMode, selectedDate, setSelectedDate]);
+  }, [normalizedViewMode, selectedDate, setSelectedDate]);

  const navigateNext = useCallback(() => {
    let next: Date;
-    switch (viewMode) {
+    switch (normalizedViewMode) {
      case "month": next = addMonths(selectedDate, 1); break;
      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);
-  }, [viewMode, selectedDate, setSelectedDate]);
+  }, [normalizedViewMode, selectedDate, setSelectedDate]);

  const goToToday = useCallback(() => {
    setSelectedDate(new Date());
    setMiniMonth(new Date());
  }, [setSelectedDate]);

+  // Swipe navigation handlers for mobile
+  const handleTouchStart = useCallback((e: ReactTouchEvent) => {
+    const touch = e.touches[0];
+    touchStartRef.current = { x: touch.clientX, y: touch.clientY, time: Date.now() };
+  }, []);
+
+  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;
+    const elapsed = Date.now() - touchStartRef.current.time;
+    touchStartRef.current = null;
+
+    // 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) {
+        setSwipeDirection('right');
+        navigatePrev();
+      } else {
+        setSwipeDirection('left');
+        navigateNext();
+      }
+      setSwipeKey(k => k + 1);
+      // Clear direction after animation completes
+      setTimeout(() => setSwipeDirection(null), 250);
+    }
+  }, [isMobile, normalizedViewMode, navigatePrev, navigateNext]);
+
  const handleSelectDate = useCallback((date: Date) => {
    setSelectedDate(date);
    setMiniMonth(date);
-  }, [setSelectedDate]);
+    // 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);
@@ -167,10 +282,12 @@ export default function CalendarPage() {

  const openCreateModal = useCallback((date?: Date, endDate?: Date) => {
    setEditEvent(null);
-    setDefaultModalDate(date || selectedDate);
+    const d = date || selectedDate;
+    setDefaultModalDate(d);
    setDefaultModalEndDate(endDate);
+    setSelectedDate(d);
    setShowEventModal(true);
-  }, [selectedDate]);
+  }, [selectedDate, setSelectedDate]);

  const openEditModal = useCallback((event: CalendarEvent) => {
    setEditEvent(event);
@@ -178,16 +295,74 @@ export default function CalendarPage() {
    setShowEventModal(true);
  }, []);

-  const handleSelectEvent = useCallback((event: CalendarEvent, anchorRect: DOMRect) => {
-    setDetailEvent(event);
-    setDetailAnchorRect(anchorRect);
+  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(() => {
+    if (hoverTimerRef.current) { clearTimeout(hoverTimerRef.current); hoverTimerRef.current = null; }
    setDetailEvent(null);
    setDetailAnchorRect(null);
  }, []);

+  const handleSelectEvent = useCallback((event: CalendarEvent, _anchorRect: DOMRect) => {
+    // Click opens the sidebar for viewing/editing
+    closeDetail();
+    openEditModal(event);
+  }, [closeDetail, openEditModal]);
+
+  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;
+    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);
+    }, 300);
+  }, []);
+
  const handleEditFromDetail = useCallback(() => {
    if (detailEvent) {
      const ev = detailEvent;
@@ -222,6 +397,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 {
@@ -238,6 +431,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);
@@ -245,6 +441,7 @@ export default function CalendarPage() {
          toast.error(t("notifications.event_error"));
          return;
        }
+        focusCalendarOnEvent(created);
        if (sendSchedulingMessages) {
          toast.success(t("notifications.invitation_sent"));
        } else {
@@ -256,7 +453,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; }
@@ -266,6 +463,7 @@ export default function CalendarPage() {
        toast.error(t("notifications.event_error"));
        return;
      }
+      focusCalendarOnEvent(created);
      toast.success(t("notifications.event_duplicated"));
      setEditEvent(created);
      setDefaultModalDate(undefined);
@@ -274,7 +472,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; }
@@ -328,9 +526,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) {
@@ -388,9 +599,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) {
@@ -446,7 +668,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"),
@@ -457,7 +679,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);
@@ -502,6 +724,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) {
@@ -512,21 +735,52 @@ 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) => {
+      if (!e.start || !e.calendarIds) return false;
      const calIds = Object.keys(e.calendarIds);
      return calIds.some((id) => selectedCalendarIds.includes(id));
    }),
    [events, selectedCalendarIds]
  );

+  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 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;

  const renderView = () => {
@@ -539,7 +793,7 @@ export default function CalendarPage() {
    }

    const viewContent = (() => {
-      switch (viewMode) {
+      switch (normalizedViewMode) {
        case "month":
          return (
            <CalendarMonthView
@@ -548,7 +802,12 @@ export default function CalendarPage() {
              calendars={calendars}
              onSelectDate={handleSelectDate}
              onSelectEvent={handleSelectEvent}
+              onHoverEvent={handleHoverEvent}
+              onHoverLeave={handleHoverLeave}
+              onCreateAtTime={openCreateModal}
              firstDayOfWeek={firstDayOfWeek}
+              isMobile={isMobile}
+              pendingPreview={pendingPreview}
            />
          );
        case "week":
@@ -559,9 +818,15 @@ export default function CalendarPage() {
              calendars={calendars}
              onSelectDate={handleSelectDate}
              onSelectEvent={handleSelectEvent}
+              onHoverEvent={handleHoverEvent}
+              onHoverLeave={handleHoverLeave}
              onCreateAtTime={openCreateModal}
              firstDayOfWeek={firstDayOfWeek}
              timeFormat={timeFormat}
+              isMobile={isMobile}
+              pendingPreview={pendingPreview}
+              tasks={enableCalendarTasks && showTasksOnCalendar ? taskStore.tasks : undefined}
+              onToggleTaskComplete={(task) => { if (client) taskStore.toggleTaskComplete(client, task); }}
            />
          );
        case "day":
@@ -571,8 +836,14 @@ export default function CalendarPage() {
              events={visibleEvents}
              calendars={calendars}
              onSelectEvent={handleSelectEvent}
+              onHoverEvent={handleHoverEvent}
+              onHoverLeave={handleHoverLeave}
              onCreateAtTime={openCreateModal}
              timeFormat={timeFormat}
+              isMobile={isMobile}
+              pendingPreview={pendingPreview}
+              tasks={enableCalendarTasks && showTasksOnCalendar ? taskStore.tasks : undefined}
+              onToggleTaskComplete={(task) => { if (client) taskStore.toggleTaskComplete(client, task); }}
            />
          );
        case "agenda":
@@ -582,16 +853,45 @@ export default function CalendarPage() {
              events={visibleEvents}
              calendars={calendars}
              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 && (
+        {isLoadingEvents && calendars.length > 0 && events.length === 0 && (
          <div className="absolute inset-0 bg-background/50 flex items-center justify-center pointer-events-none">
            <div className="h-5 w-5 border-2 border-primary border-t-transparent rounded-full animate-spin" />
          </div>
@@ -601,54 +901,169 @@ export default function CalendarPage() {
  };

  return (
-    <div className="flex h-screen bg-background">
+    <div className={cn("flex h-dvh bg-background overflow-hidden", isMobile && "flex-col")}>
      {/* Left Navigation Rail */}
      {!isMobile && (
-        <div className="w-14 border-r border-border bg-secondary flex flex-col items-center py-3 flex-shrink-0">
-          <NavigationRail collapsed className="py-0" />
+        <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
+          <NavigationRail
+            collapsed
+            quota={quota}
+            isPushConnected={isPushConnected}
+            onLogout={logout}
+            onManageApps={handleManageApps}
+            onInlineApp={handleInlineApp}
+            onCloseInlineApp={closeInlineApp}
+            activeAppId={inlineApp?.id ?? null}
+          />
        </div>
      )}

-      <div className="flex flex-col flex-1 min-w-0">
+      {inlineApp && (
+        <InlineAppView apps={loadedApps} activeAppId={inlineApp!.id} onClose={closeInlineApp} className="flex-1" />
+      )}
+
+      {/* Sidebar - full height */}
+      {!isMobile && !inlineApp && (
+        <>
+          <div
+            className={cn(
+              "border-r border-border bg-secondary overflow-y-auto flex-shrink-0 p-3",
+              !isResizing && "transition-[width] duration-300"
+            )}
+            style={{ width: `${calSidebarWidth}px` }}
+          >
+            <MiniCalendar
+              selectedDate={selectedDate}
+              displayMonth={miniMonth}
+              onSelectDate={handleSelectDate}
+              onChangeMonth={handleMiniMonthChange}
+              events={events}
+              firstDayOfWeek={firstDayOfWeek}
+              showWeekNumbers={showWeekNumbers}
+            />
+            <CalendarSidebarPanel
+              calendars={calendars}
+              selectedCalendarIds={selectedCalendarIds}
+              onToggleVisibility={toggleCalendarVisibility}
+              onColorChange={client ? (calendarId, color) => {
+                updateCalendar(client, calendarId, { color });
+              } : undefined}
+              onSubscribe={() => setShowSubscriptionModal(true)}
+              onEditSubscription={(subId) => setEditingSubscription(subId)}
+              client={client}
+            />
+          </div>
+          <ResizeHandle
+            onResizeStart={() => { dragStartWidth.current = calSidebarWidth; setIsResizing(true); }}
+            onResize={(delta) => setCalSidebarWidth(Math.max(180, Math.min(400, dragStartWidth.current + delta)))}
+            onResizeEnd={() => {
+              setIsResizing(false);
+              localStorage.setItem("calendar-sidebar-width", String(calSidebarWidth));
+            }}
+            onDoubleClick={() => { setCalSidebarWidth(256); localStorage.setItem("calendar-sidebar-width", "256"); }}
+          />
+        </>
+      )}
+
+      {!inlineApp && (
+      <div className="flex flex-col flex-1 min-w-0 min-h-0">
        <CalendarToolbar
          selectedDate={selectedDate}
-          viewMode={viewMode}
+          viewMode={normalizedViewMode}
          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 className="flex flex-1 overflow-hidden">
-          {!isMobile && (
-            <div className="w-60 border-r border-border p-3 overflow-y-auto flex-shrink-0">
-              <MiniCalendar
-                selectedDate={selectedDate}
-                displayMonth={miniMonth}
-                onSelectDate={handleSelectDate}
-                onChangeMonth={handleMiniMonthChange}
-                events={events}
-                firstDayOfWeek={firstDayOfWeek}
-              />
-              <CalendarSidebarPanel
+        <div
+          className="flex flex-1 overflow-hidden relative"
+          data-tour="calendar-view"
+          onTouchStart={handleTouchStart}
+          onTouchEnd={handleTouchEnd}
+        >
+          <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 && (
+            <div className="w-[400px] border-l border-border flex-shrink-0 overflow-hidden">
+              <EventModal
+                key={editEvent?.id ?? 'new'}
+                event={editEvent}
                calendars={calendars}
-                selectedCalendarIds={selectedCalendarIds}
-                onToggleVisibility={toggleCalendarVisibility}
+                defaultDate={defaultModalDate}
+                defaultEndDate={defaultModalEndDate}
+                onSave={handleSaveEvent}
+                onDelete={handleDeleteEvent}
+                onDuplicate={handleDuplicateEvent}
+                onRsvp={handleRsvp}
+                onClose={() => { setShowEventModal(false); setEditEvent(null); setPendingPreview(null); }}
+                onPreviewChange={setPendingPreview}
+                currentUserEmails={currentUserEmails}
+                isMobile={false}
              />
            </div>
          )}

-          {renderView()}
-        </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>
+          )}

-        {/* Mobile Bottom Navigation */}
-        {isMobile && (
-          <NavigationRail orientation="horizontal" />
-        )}
+          {/* Floating Create Event Button (mobile) */}
+          {isMobile && (
+            <Button
+              onClick={() => openCreateModal()}
+              className="absolute bottom-4 right-4 z-40 h-14 w-14 rounded-full shadow-lg"
+              aria-label={t("events.create")}
+            >
+              <Plus className="h-6 w-6" />
+            </Button>
+          )}
+        </div>
      </div>
+      )}
+
+      {/* Mobile Bottom Navigation */}
+      {isMobile && (
+        <div className="shrink-0">
+          <NavigationRail
+            orientation="horizontal"
+            onManageApps={handleManageApps}
+            onInlineApp={handleInlineApp}
+            onCloseInlineApp={closeInlineApp}
+            activeAppId={inlineApp?.id ?? null}
+          />
+        </div>
+      )}

      {detailEvent && detailAnchorRect && (
        <EventDetailPopover
@@ -661,13 +1076,17 @@ export default function CalendarPage() {
          onClose={closeDetail}
          onSaveNote={handleSaveNoteFromDetail}
          onRsvp={handleRsvpFromDetail}
+          onMouseEnter={() => { if (hoverTimerRef.current) { clearTimeout(hoverTimerRef.current); hoverTimerRef.current = null; } }}
+          onMouseLeave={handleHoverLeave}
          currentUserEmails={currentUserEmails}
          timeFormat={timeFormat}
+          isMobile={isMobile}
        />
      )}

-      {showEventModal && (
+      {showEventModal && isMobile && (
        <EventModal
+          key={editEvent?.id ?? 'new'}
          event={editEvent}
          calendars={calendars}
          defaultDate={defaultModalDate}
@@ -678,6 +1097,7 @@ export default function CalendarPage() {
          onRsvp={handleRsvp}
          onClose={() => { setShowEventModal(false); setEditEvent(null); }}
          currentUserEmails={currentUserEmails}
+          isMobile={true}
        />
      )}

@@ -689,6 +1109,26 @@ export default function CalendarPage() {
        />
      )}

+      {showSubscriptionModal && client && (
+        <ICalSubscriptionModal
+          client={client}
+          onClose={() => setShowSubscriptionModal(false)}
+        />
+      )}
+
+      {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}
        actionType={pendingScopeAction?.type || "edit"}
@@ -1,27 +1,31 @@
 "use client";

 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
-import { useRouter } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
-import { ArrowLeft, Upload, Download, Users, BookUser } from "lucide-react";
+import { ArrowLeft, Users } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import { useConfirmDialog } from "@/hooks/use-confirm-dialog";
 import { ContactList } from "@/components/contacts/contact-list";
 import { ContactDetail } from "@/components/contacts/contact-detail";
 import { ContactForm } from "@/components/contacts/contact-form";
-import { ContactGroupList } from "@/components/contacts/contact-group-list";
 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 { 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 { NavigationRail } from "@/components/layout/navigation-rail";
+import { SidebarAppsModal } from "@/components/layout/sidebar-apps-modal";
+import { InlineAppView } from "@/components/layout/inline-app-view";
+import { useSidebarApps } from "@/hooks/use-sidebar-apps";
+import { ResizeHandle } from "@/components/layout/resize-handle";
 import { useIsMobile } from "@/hooks/use-media-query";
-import type { ContactCard } from "@/lib/jmap/types";
+import type { ContactCard, AddressBook } from "@/lib/jmap/types";

 type View =
  | "list"
@@ -31,23 +35,23 @@ type View =
  | "group-detail"
  | "group-create"
  | "group-edit"
-  | "import"
  | "bulk-add-to-group";

 export default function ContactsPage() {
-  const router = useRouter();
  const t = useTranslations("contacts");
-  const { client, isAuthenticated } = useAuthStore();
+  const { client, isAuthenticated, logout, checkAuth, isLoading: authLoading } = useAuthStore();
+  const { showAppsModal, inlineApp, loadedApps, handleManageApps, handleInlineApp, closeInlineApp, closeAppsModal } = useSidebarApps();
+  const [initialCheckDone, setInitialCheckDone] = useState(() => useAuthStore.getState().isAuthenticated && !!useAuthStore.getState().client);
+  const { quota, isPushConnected } = useEmailStore();
  const {
    contacts,
+    addressBooks,
    selectedContactId,
    searchQuery,
    supportsSync,
-    activeTab,
    selectedContactIds,
    setSelectedContact,
    setSearchQuery,
-    setActiveTab,
    fetchContacts,
    createContact,
    updateContact,
@@ -62,24 +66,50 @@ export default function ContactsPage() {
    removeMembersFromGroup,
    deleteGroup,
    toggleContactSelection,
+    selectRangeContacts,
    selectAllContacts,
    clearSelection,
    bulkDeleteContacts,
    bulkAddToGroup,
+    moveContactToAddressBook,
    importContacts,
  } = useContactStore();

  const [view, setView] = useState<View>("list");
+  const [activeCategory, setActiveCategory] = useState<ContactCategory>("all");
+  const [showImportDialog, setShowImportDialog] = useState(false);
  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
  const hasFetched = useRef(false);
  const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
  const isMobile = useIsMobile();

+  // Panel resize state - sidebar (categories)
+  const [sidebarWidth, setSidebarWidth] = useState(() => {
+    try { const v = localStorage.getItem("contacts-sidebar-width"); return v ? Number(v) : 256; } catch { return 256; }
+  });
+  const [isSidebarResizing, setIsSidebarResizing] = useState(false);
+  const sidebarDragStartWidth = useRef(256);
+
+  // Panel resize state - contact list
+  const [listWidth, setListWidth] = useState(() => {
+    try { const v = localStorage.getItem("contacts-list-width"); return v ? Number(v) : 320; } catch { return 320; }
+  });
+  const [isListResizing, setIsListResizing] = useState(false);
+  const listDragStartWidth = useRef(320);
+
+  // Check auth on mount
  useEffect(() => {
-    if (!isAuthenticated) {
-      router.push("/login");
+    checkAuth().finally(() => {
+      setInitialCheckDone(true);
+    });
+  }, [checkAuth]);
+
+  useEffect(() => {
+    if (initialCheckDone && !isAuthenticated && !authLoading) {
+      try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
+      redirectToLogin();
    }
-  }, [isAuthenticated, router]);
+  }, [initialCheckDone, isAuthenticated, authLoading]);

  useEffect(() => {
    if (client && supportsSync && !hasFetched.current) {
@@ -92,7 +122,111 @@ 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(() => {
+    const kws = new Set<string>();
+    for (const contact of individuals) {
+      if (!contact.keywords) continue;
+      for (const [kw, active] of Object.entries(contact.keywords)) {
+        if (active) kws.add(kw);
+      }
+    }
+    return Array.from(kws).sort((a, b) => a.localeCompare(b));
+  }, [individuals]);
+
+  // Contacts to display based on active category
+  const displayedContacts = useMemo(() => {
+    if (activeCategory === "all") return individuals;
+    if (activeCategory === "uncategorized") {
+      return individuals.filter(c => !c.keywords || Object.keys(c.keywords).filter(k => c.keywords![k]).length === 0);
+    }
+    if ("addressBookId" in activeCategory) {
+      const bookId = activeCategory.addressBookId;
+      return individuals.filter(c => {
+        if (!c.addressBookIds) return false;
+        return c.addressBookIds[bookId] === true;
+      });
+    }
+    if ("keyword" in activeCategory) {
+      return individuals.filter(c => c.keywords?.[activeCategory.keyword]);
+    }
+    // Show members of the selected group
+    return getGroupMembers(activeCategory.groupId);
+  }, [activeCategory, individuals, getGroupMembers]);
+
+  // Label for the current category
+  const categoryLabel = useMemo(() => {
+    if (activeCategory === "all") return t("tabs.all");
+    if (activeCategory === "uncategorized") return t("no_category");
+    if ("addressBookId" in activeCategory) {
+      const book = addressBooks.find(b => b.id === activeCategory.addressBookId);
+      return book?.name || t("tabs.all");
+    }
+    if ("keyword" in activeCategory) {
+      return activeCategory.keyword;
+    }
+    const group = contacts.find(c => c.id === activeCategory.groupId);
+    return group ? getContactDisplayName(group) : t("tabs.all");
+  }, [activeCategory, contacts, addressBooks, t]);
+
+  const handleSelectCategory = useCallback((category: ContactCategory) => {
+    setActiveCategory(category);
+    clearSelection();
+    if (typeof category === "object" && "groupId" in category) {
+      setSelectedGroupId(category.groupId);
+      setView("group-detail");
+    } else {
+      setSelectedGroupId(null);
+    }
+  }, [clearSelection]);
+
+  const handleDropContacts = useCallback(async (contactIds: string[], addressBook: AddressBook) => {
+    if (!client) return;
+    try {
+      await moveContactToAddressBook(client, contactIds, addressBook);
+      const msg = contactIds.length === 1
+        ? t("address_books.moved", { name: addressBook.name })
+        : t("address_books.moved_plural", { count: contactIds.length, name: addressBook.name });
+      toast.success(msg);
+    } catch (error) {
+      console.error('Failed to move contacts:', error);
+      toast.error(t("address_books.move_failed"));
+    }
+  }, [client, moveContactToAddressBook, t]);
+
+  const handleDropContactsToCategory = useCallback(async (contactIds: string[], keyword: string) => {
+    if (!client && supportsSync) return;
+    try {
+      for (const contactId of contactIds) {
+        const contact = contacts.find(c => c.id === contactId);
+        if (!contact) continue;
+        const existingKeywords = contact.keywords || {};
+        if (existingKeywords[keyword]) continue; // already has this keyword
+        const updatedKeywords = { ...existingKeywords, [keyword]: true };
+        if (supportsSync && client) {
+          await updateContact(client, contactId, { keywords: updatedKeywords });
+        } else {
+          updateLocalContact(contactId, { keywords: updatedKeywords });
+        }
+      }
+      const msg = contactIds.length === 1
+        ? t("category_added", { name: keyword })
+        : t("category_added_plural", { count: contactIds.length, name: keyword });
+      toast.success(msg);
+    } catch (error) {
+      console.error('Failed to add contacts to category:', error);
+      toast.error(t("toast.error_update"));
+    }
+  }, [client, supportsSync, contacts, updateContact, updateLocalContact, t]);
+
+  const handleImportContacts = useCallback(async (importedContacts: ContactCard[]) => {
+    return importContacts(
+      supportsSync && client ? client : null,
+      importedContacts
+    );
+  }, [supportsSync, client, importContacts]);

  const handleSelectContact = (id: string) => {
    setSelectedContact(id);
@@ -166,8 +300,6 @@ export default function ContactsPage() {
  const handleCancel = () => {
    if (view === "group-create" || view === "group-edit") {
      setView(selectedGroup ? "group-detail" : "list");
-    } else if (view === "import") {
-      setView("list");
    } else if (view === "bulk-add-to-group") {
      setView("list");
    } else {
@@ -175,8 +307,9 @@ export default function ContactsPage() {
    }
  };

-  const handleSelectGroup = (id: string) => {
+  const _handleSelectGroup = (id: string) => {
    setSelectedGroupId(id);
+    setActiveCategory({ groupId: id });
    setView("group-detail");
  };

@@ -189,6 +322,35 @@ export default function ContactsPage() {
    setView("group-edit");
  };

+  const handleEditGroupFromSidebar = useCallback((groupId: string) => {
+    setSelectedGroupId(groupId);
+    setActiveCategory({ groupId });
+    setView("group-edit");
+  }, []);
+
+  const handleDeleteGroupFromSidebar = useCallback(async (groupId: string) => {
+    const confirmed = await confirmDialog({
+      title: t("groups.delete_confirm_title"),
+      message: t("groups.delete_confirm"),
+      confirmText: t("form.delete"),
+      variant: "destructive",
+    });
+    if (!confirmed) return;
+
+    try {
+      await deleteGroup(supportsSync && client ? client : null, groupId);
+      toast.success(t("toast.deleted"));
+      if (selectedGroupId === groupId) {
+        setSelectedGroupId(null);
+        setActiveCategory("all");
+        setView("list");
+      }
+    } catch (error) {
+      console.error('Failed to delete group:', error);
+      toast.error(t("toast.error_delete"));
+    }
+  }, [confirmDialog, deleteGroup, supportsSync, client, selectedGroupId, t]);
+
  const handleDeleteGroup = async () => {
    if (!selectedGroup) return;

@@ -215,11 +377,10 @@ export default function ContactsPage() {
    const jmapClient = supportsSync && client ? client : null;
    if (view === "group-edit" && selectedGroup) {
      await updateGroup(jmapClient, selectedGroup.id, name);
-      const currentMemberIds = selectedGroup.members
-        ? Object.keys(selectedGroup.members).filter(k => selectedGroup.members![k])
-        : [];
-      const toAdd = memberIds.filter(id => !currentMemberIds.includes(id));
-      const toRemove = currentMemberIds.filter(id => !memberIds.includes(id));
+      // Use resolved member contact IDs for diff, not raw urn:uuid: keys
+      const currentIds = selectedGroupMembers.map(m => m.id);
+      const toAdd = memberIds.filter(id => !currentIds.includes(id));
+      const toRemove = currentIds.filter(id => !memberIds.includes(id));
      if (toAdd.length > 0) await addMembersToGroup(jmapClient, selectedGroup.id, toAdd);
      if (toRemove.length > 0) await removeMembersFromGroup(jmapClient, selectedGroup.id, toRemove);
      toast.success(t("toast.updated"));
@@ -229,7 +390,7 @@ export default function ContactsPage() {
      toast.success(t("toast.created"));
      setView("list");
    }
-  }, [view, selectedGroup, supportsSync, client, createGroup, updateGroup, addMembersToGroup, removeMembersFromGroup, t]);
+  }, [view, selectedGroup, selectedGroupMembers, supportsSync, client, createGroup, updateGroup, addMembersToGroup, removeMembersFromGroup, t]);

  const handleRemoveGroupMember = async (memberId: string) => {
    if (!selectedGroup) return;
@@ -303,25 +464,20 @@ export default function ContactsPage() {
    }
  };

-  const handleImport = useCallback(async (importedContacts: ContactCard[]) => {
-    return importContacts(
-      supportsSync && client ? client : null,
-      importedContacts
-    );
-  }, [supportsSync, client, importContacts]);
-
  if (!isAuthenticated) return null;

  const renderRightPanel = () => {
    switch (view) {
      case "create":
-        return <ContactForm onSave={handleSaveNew} onCancel={handleCancel} />;
+        return <ContactForm addressBooks={addressBooks} allKeywords={allKeywords} onSave={handleSaveNew} onCancel={handleCancel} />;

      case "edit":
        if (!selectedContact) return null;
        return (
          <ContactForm
            contact={selectedContact}
+            addressBooks={addressBooks}
+            allKeywords={allKeywords}
            onSave={handleSaveEdit}
            onCancel={handleCancel}
          />
@@ -336,9 +492,9 @@ export default function ContactsPage() {
            onEdit={handleEditGroup}
            onDelete={handleDeleteGroup}
            onRemoveMember={handleRemoveGroupMember}
+            isMobile={isMobile}
            onSelectMember={(id) => {
              setSelectedContact(id);
-              setActiveTab("all");
              setView("detail");
            }}
          />
@@ -365,15 +521,6 @@ export default function ContactsPage() {
          />
        );

-      case "import":
-        return (
-          <ContactImportDialog
-            existingContacts={contacts}
-            onImport={handleImport}
-            onClose={handleCancel}
-          />
-        );
-
      case "bulk-add-to-group":
        return (
          <div className="flex flex-col h-full">
@@ -422,135 +569,173 @@ export default function ContactsPage() {
            contact={selectedContact}
            onEdit={handleEdit}
            onDelete={handleDelete}
+            isMobile={isMobile}
          />
        );
    }
  };

+  const showListPanel = !isMobile || view === "list";
+  const showRightPanel = !isMobile || view !== "list";
+
+  const mobileBackToList = () => {
+    setView("list");
+    clearSelection();
+  };
+
  return (
-    <div className="flex h-screen bg-background">
+    <div className={cn("flex h-dvh bg-background overflow-hidden", isMobile && "flex-col")}>
+      {/* Navigation Rail - desktop only */}
      {!isMobile && (
-        <div className="w-14 border-r border-border bg-secondary flex flex-col items-center flex-shrink-0">
-          <NavigationRail collapsed />
+        <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
+          <NavigationRail
+            collapsed
+            quota={quota}
+            isPushConnected={isPushConnected}
+            onLogout={logout}
+            onManageApps={handleManageApps}
+            onInlineApp={handleInlineApp}
+            onCloseInlineApp={closeInlineApp}
+            activeAppId={inlineApp?.id ?? null}
+          />
        </div>
      )}

-      <div className="flex flex-col flex-1 min-w-0">
-        <div className="flex flex-1 min-h-0">
-          <div className="w-80 border-r border-border flex flex-col flex-shrink-0">
-        <div className="p-4 border-b border-border">
-          <div className="flex items-center justify-between">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => router.push("/")}
-              className="justify-start"
-            >
-              <ArrowLeft className="w-4 h-4 mr-2" />
-              {t("back_to_mail")}
-            </Button>
-            <div className="flex gap-1">
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8"
-                onClick={() => setView("import")}
-                title={t("import.title")}
-              >
-                <Upload className="w-4 h-4" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8"
-                onClick={() => {
-                  if (contacts.length > 0) {
-                    exportContacts(contacts.filter(c => c.kind !== "group"));
-                    toast.success(t("export.success", { count: contacts.filter(c => c.kind !== "group").length }));
-                  }
-                }}
-                title={t("export.title")}
-              >
-                <Download className="w-4 h-4" />
-              </Button>
-            </div>
-          </div>
-        </div>
-
-        <div className="flex border-b border-border">
-          <button
-            onClick={() => setActiveTab("all")}
-            className={cn(
-              "flex-1 flex items-center justify-center gap-1.5 px-3 py-2.5 text-sm font-medium transition-colors",
-              activeTab === "all"
-                ? "border-b-2 border-primary text-primary"
-                : "text-muted-foreground hover:text-foreground"
-            )}
-          >
-            <BookUser className="w-4 h-4" />
-            {t("tabs.all")}
-          </button>
-          <button
-            onClick={() => setActiveTab("groups")}
-            className={cn(
-              "flex-1 flex items-center justify-center gap-1.5 px-3 py-2.5 text-sm font-medium transition-colors",
-              activeTab === "groups"
-                ? "border-b-2 border-primary text-primary"
-                : "text-muted-foreground hover:text-foreground"
-            )}
-          >
-            <Users className="w-4 h-4" />
-            {t("tabs.groups")}
-            {groups.length > 0 && (
-              <span className="text-xs px-1.5 py-0.5 rounded-full bg-muted">
-                {groups.length}
-              </span>
-            )}
-          </button>
-        </div>
-
-        {activeTab === "all" ? (
-          <ContactList
-            contacts={contacts}
-            selectedContactId={selectedContactId}
-            searchQuery={searchQuery}
-            onSearchChange={setSearchQuery}
-            onSelectContact={handleSelectContact}
-            onCreateNew={handleCreateNew}
-            onImport={() => setView("import")}
-            supportsSync={supportsSync}
-            className="flex-1"
-            selectedContactIds={selectedContactIds}
-            onToggleSelection={toggleContactSelection}
-            onSelectAll={selectAllContacts}
-            onClearSelection={clearSelection}
-            onBulkDelete={handleBulkDelete}
-            onBulkAddToGroup={handleBulkAddToGroup}
-            onBulkExport={handleBulkExport}
-          />
-        ) : (
-          <ContactGroupList
-            groups={groups}
-            selectedGroupId={selectedGroupId}
-            onSelectGroup={handleSelectGroup}
-            onCreateGroup={handleCreateGroup}
-            searchQuery={searchQuery}
-            className="flex-1"
-          />
+      <div className="flex flex-col flex-1 min-w-0 min-h-0">
+        {inlineApp && (
+          <InlineAppView apps={loadedApps} activeAppId={inlineApp!.id} onClose={closeInlineApp} />
        )}
-      </div>
+        <div className={cn("flex flex-1 min-h-0", inlineApp && "hidden")}>
+          {showListPanel && (
+            <>
+              {/* Panel 1: Categories sidebar */}
+              {!isMobile && (
+                <>
+                  <div
+                    className={cn(
+                      "border-r border-border flex flex-col flex-shrink-0",
+                      !isSidebarResizing && "transition-[width] duration-300"
+                    )}
+                    style={{ width: `${sidebarWidth}px` }}
+                  >
+                    <ContactsSidebar
+                      groups={groups}
+                      individuals={individuals}
+                      addressBooks={addressBooks}
+                      activeCategory={activeCategory}
+                      onSelectCategory={handleSelectCategory}
+                      onCreateGroup={handleCreateGroup}
+                      onCreateContact={handleCreateNew}
+                      onImport={() => setShowImportDialog(true)}
+                      onEditGroup={handleEditGroupFromSidebar}
+                      onDeleteGroup={handleDeleteGroupFromSidebar}
+                      onDropContacts={handleDropContacts}
+                      onDropContactsToCategory={handleDropContactsToCategory}
+                    />
+                  </div>
+                  <ResizeHandle
+                    onResizeStart={() => { sidebarDragStartWidth.current = sidebarWidth; setIsSidebarResizing(true); }}
+                    onResize={(delta) => setSidebarWidth(Math.max(180, Math.min(400, sidebarDragStartWidth.current + delta)))}
+                    onResizeEnd={() => {
+                      setIsSidebarResizing(false);
+                      localStorage.setItem("contacts-sidebar-width", String(sidebarWidth));
+                    }}
+                    onDoubleClick={() => { setSidebarWidth(256); localStorage.setItem("contacts-sidebar-width", "256"); }}
+                  />
+                </>
+              )}

-          <div className="flex-1 min-w-0">
-            {renderRightPanel()}
-          </div>
+              {/* Panel 2: Contact list */}
+              <div
+                data-tour="contacts-list"
+                className={cn(
+                  "border-r border-border bg-background flex flex-col flex-shrink-0",
+                  isMobile ? "w-full" : "",
+                  !isListResizing && !isMobile && "transition-[width] duration-300"
+                )}
+                style={!isMobile ? { width: `${listWidth}px` } : undefined}
+              >
+                <ContactList
+                  contacts={displayedContacts}
+                  selectedContactId={selectedContactId}
+                  searchQuery={searchQuery}
+                  onSearchChange={setSearchQuery}
+                  onSelectContact={handleSelectContact}
+                  onCreateNew={handleCreateNew}
+                  categoryLabel={categoryLabel}
+                  className="flex-1"
+                  selectedContactIds={selectedContactIds}
+                  onToggleSelection={toggleContactSelection}
+                  onSelectRangeContacts={selectRangeContacts}
+                  onSelectAll={selectAllContacts}
+                  onClearSelection={clearSelection}
+                  onBulkDelete={handleBulkDelete}
+                  onBulkAddToGroup={handleBulkAddToGroup}
+                  onBulkExport={handleBulkExport}
+                />
+              </div>
+
+              {!isMobile && (
+                <ResizeHandle
+                  onResizeStart={() => { listDragStartWidth.current = listWidth; setIsListResizing(true); }}
+                  onResize={(delta) => setListWidth(Math.max(220, Math.min(500, listDragStartWidth.current + delta)))}
+                  onResizeEnd={() => {
+                    setIsListResizing(false);
+                    localStorage.setItem("contacts-list-width", String(listWidth));
+                  }}
+                  onDoubleClick={() => { setListWidth(320); localStorage.setItem("contacts-list-width", "320"); }}
+                />
+              )}
+            </>
+          )}
+
+          {/* Panel 3: Detail / Form */}
+          {showRightPanel && (
+            <div className="flex-1 min-w-0 flex flex-col">
+              {isMobile && (
+                <div className="px-3 py-2 border-b border-border">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={mobileBackToList}
+                    className="touch-manipulation"
+                  >
+                    <ArrowLeft className="w-4 h-4 mr-2" />
+                    {t("back_to_contacts")}
+                  </Button>
+                </div>
+              )}
+              <div className="flex-1 min-h-0">
+                {renderRightPanel()}
+              </div>
+            </div>
+          )}
        </div>

        {isMobile && (
-          <NavigationRail orientation="horizontal" />
+          <NavigationRail
+            orientation="horizontal"
+            onManageApps={handleManageApps}
+            onInlineApp={handleInlineApp}
+            onCloseInlineApp={closeInlineApp}
+            activeAppId={inlineApp?.id ?? null}
+          />
        )}
      </div>

+      <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
      <ConfirmDialog {...confirmDialogProps} />
+      {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">
+            <ContactImportDialog
+              existingContacts={contacts}
+              onImport={handleImportContacts}
+              onClose={() => setShowImportDialog(false)}
+            />
+          </div>
+        </div>
+      )}
    </div>
  );
 }
@@ -0,0 +1,485 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useRouter } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
+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, 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, 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 { 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";
+
+export default function FilesPage() {
+  const router = useRouter();
+  const t = useTranslations("files");
+  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);
+  const { quota, isPushConnected } = useEmailStore();
+  const {
+    currentPath,
+    resources,
+    isLoading,
+    error,
+    supportsFiles,
+    selectedResources,
+    uploadProgress,
+    clipboard,
+    initClient,
+    checkSupport,
+    navigate,
+    navigateByPath,
+    refresh,
+    createDirectory,
+    uploadFile: _uploadFile,
+    uploadFiles,
+    uploadFolder,
+    deleteResource,
+    deleteResources,
+    renameResource,
+    downloadResource,
+    getImageUrl,
+    getFileContent,
+    createTextFile,
+    duplicateResource,
+    downloadResources,
+    moveToFolder,
+    moveToParent,
+    cutResources,
+    copyResources,
+    pasteResources,
+    selectResource,
+    toggleSelect,
+    selectAll,
+    clearSelection,
+    setSelection,
+    listPath,
+    listByParentId,
+    favorites,
+    recentFiles,
+    toggleFavorite,
+    addRecentFile,
+    cancelUpload,
+    undoLastAction,
+    lastAction,
+  } = useFileStore();
+
+  const isMobile = useIsMobile();
+  const [folderLayout, setFolderLayout] = useState<FolderLayout>(() => loadFilesSettings().folderLayout);
+  const hasFetched = useRef(false);
+
+  // Sync folderLayout when settings change
+  useEffect(() => {
+    const reload = () => setFolderLayout(loadFilesSettings().folderLayout);
+    const handleStorage = (e: StorageEvent) => { if (e.key === "files-settings") reload(); };
+    window.addEventListener("storage", handleStorage);
+    window.addEventListener("files-settings-changed", reload);
+    return () => {
+      window.removeEventListener("storage", handleStorage);
+      window.removeEventListener("files-settings-changed", reload);
+    };
+  }, []);
+  const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [previewFile, setPreviewFile] = useState<string | null>(null);
+  const [showDetails, setShowDetails] = useState(false);
+  const [detailName, setDetailName] = useState<string | null>(null);
+
+  const detailResource = detailName ? resources.find(r => r.name === detailName) || null : null;
+
+  // Check auth on mount
+  useEffect(() => {
+    checkAuth().finally(() => {
+      setInitialCheckDone(true);
+    });
+  }, [checkAuth]);
+
+  // Redirect if not authenticated
+  useEffect(() => {
+    if (initialCheckDone && !isAuthenticated && !authLoading) {
+      try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
+      redirectToLogin();
+    }
+  }, [initialCheckDone, isAuthenticated, authLoading]);
+
+  // Initialize JMAP files client
+  useEffect(() => {
+    if (isAuthenticated && client && !hasFetched.current) {
+      hasFetched.current = true;
+      initClient(client);
+    }
+  }, [isAuthenticated, client, initClient]);
+
+  // Check support and load root after client is initialized
+  const storeClient = useFileStore(s => s.client);
+  useEffect(() => {
+    if (storeClient && supportsFiles === null) {
+      checkSupport().then((supported) => {
+        if (supported) {
+          navigate(null);
+        }
+      });
+    }
+  }, [storeClient, supportsFiles, checkSupport, navigate]);
+
+  const handleNavigate = useCallback((path: string, resourceId?: string | null) => {
+    if (resourceId !== undefined) {
+      // Direct ID-based navigation (directory click, breadcrumb dropdown folder)
+      navigate(resourceId, path.split('/').pop() || '');
+    } else {
+      // Path-based navigation (breadcrumbs, favorites, recent files)
+      navigateByPath(path);
+    }
+  }, [navigate, navigateByPath]);
+
+  const handleCreateFolder = useCallback(async (name: string) => {
+    try {
+      await createDirectory(name);
+      toast.success(t("create_folder_success"));
+    } catch (err) {
+      console.error("Failed to create folder:", err);
+      toast.error(t("create_folder_error"));
+    }
+  }, [createDirectory, t]);
+
+  const maxSizeUpload = client?.getMaxSizeUpload() || 0;
+
+  const handleUploadFiles = useCallback(async (files: File[]) => {
+    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 (files.length === 0) return;
+    try {
+      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, maxSizeUpload]);
+
+  const handleUploadFolder = useCallback(async (files: File[]) => {
+    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 (files.length === 0) return;
+    try {
+      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, maxSizeUpload]);
+
+  const handleDelete = useCallback(async (name: string) => {
+    const confirmed = await confirmDialog({
+      title: t("delete_confirm_title"),
+      message: t("delete_confirm_message", { name }),
+      confirmText: t("delete"),
+      variant: "destructive",
+    });
+    if (!confirmed) return;
+
+    try {
+      await deleteResource(name);
+      toast.success(t("delete_success"));
+    } catch (err) {
+      console.error("Failed to delete:", err);
+      toast.error(t("delete_error"));
+    }
+  }, [deleteResource, confirmDialog, t]);
+
+  const handleBatchDelete = useCallback(async (names: string[]) => {
+    const confirmed = await confirmDialog({
+      title: t("delete_confirm_title"),
+      message: t("batch_delete_confirm_message", { count: names.length }),
+      confirmText: t("delete"),
+      variant: "destructive",
+    });
+    if (!confirmed) return;
+
+    try {
+      await deleteResources(names);
+      toast.success(t("batch_delete_success", { count: names.length }));
+    } catch (err) {
+      console.error("Failed to batch delete:", err);
+      toast.error(t("delete_error"));
+    }
+  }, [deleteResources, confirmDialog, t]);
+
+  const handleUndo = useCallback(async () => {
+    try {
+      await undoLastAction();
+      toast.success(t("undo_success"));
+    } catch (err) {
+      console.error("Failed to undo:", err);
+      toast.error(t("undo_error"));
+    }
+  }, [undoLastAction, t]);
+
+  const handleRename = useCallback(async (oldName: string, newName: string) => {
+    try {
+      await renameResource(oldName, newName);
+      toast.success(t("rename_success"), {
+        action: { label: t("undo"), onClick: handleUndo },
+      });
+    } catch (err) {
+      console.error("Failed to rename:", err);
+      toast.error(t("rename_error"));
+    }
+  }, [renameResource, t, handleUndo]);
+
+  const findResourceId = useCallback((name: string) => {
+    const r = resources.find(res => res.name === name);
+    return r?.id || name;
+  }, [resources]);
+
+  const handleDownload = useCallback(async (name: string) => {
+    try {
+      await downloadResource(name);
+      addRecentFile(name, findResourceId(name));
+    } catch (err) {
+      console.error("Failed to download:", err);
+      toast.error(t("download_error"));
+    }
+  }, [downloadResource, addRecentFile, findResourceId, t]);
+
+  const handleBatchDownload = useCallback(async (names: string[]) => {
+    try {
+      await downloadResources(names);
+    } catch (err) {
+      console.error("Failed to batch download:", err);
+      toast.error(t("download_error"));
+    }
+  }, [downloadResources, t]);
+
+  const handleCreateTextFile = useCallback(async (name: string) => {
+    try {
+      await createTextFile(name);
+      toast.success(t("create_file_success"));
+    } catch (err) {
+      console.error("Failed to create file:", err);
+      toast.error(t("create_file_error"));
+    }
+  }, [createTextFile, t]);
+
+  const handleDuplicate = useCallback(async (name: string) => {
+    try {
+      await duplicateResource(name);
+      toast.success(t("duplicate_success"));
+    } catch (err) {
+      console.error("Failed to duplicate:", err);
+      toast.error(t("duplicate_error"));
+    }
+  }, [duplicateResource, t]);
+
+  const handleMoveToFolder = useCallback(async (names: string[], targetFolder: string) => {
+    try {
+      await moveToFolder(names, targetFolder);
+      toast.success(t("move_success", { count: names.length }), {
+        action: { label: t("undo"), onClick: handleUndo },
+      });
+    } catch (err) {
+      console.error("Failed to move:", err);
+      toast.error(t("move_error"));
+    }
+  }, [moveToFolder, t, handleUndo]);
+
+  const handleMoveToParent = useCallback(async (names: string[]) => {
+    try {
+      await moveToParent(names);
+      toast.success(t("move_success", { count: names.length }), {
+        action: { label: t("undo"), onClick: handleUndo },
+      });
+    } catch (err) {
+      console.error("Failed to move:", err);
+      toast.error(t("move_error"));
+    }
+  }, [moveToParent, t, handleUndo]);
+
+  const handlePaste = useCallback(async () => {
+    try {
+      await pasteResources();
+      toast.success(t("paste_success"), {
+        action: lastAction ? { label: t("undo"), onClick: handleUndo } : undefined,
+      });
+    } catch (err) {
+      console.error("Failed to paste:", err);
+      toast.error(t("paste_error"));
+    }
+  }, [pasteResources, t, lastAction, handleUndo]);
+
+  const handlePreviewImage = useCallback((name: string) => {
+    setPreviewImage(name);
+    addRecentFile(name, findResourceId(name));
+  }, [addRecentFile, findResourceId]);
+
+  const handlePreviewFile = useCallback((name: string) => {
+    setPreviewFile(name);
+    addRecentFile(name, findResourceId(name));
+  }, [addRecentFile, findResourceId]);
+
+  const handleShowDetails = useCallback((name: string) => {
+    setDetailName(name);
+    setShowDetails(true);
+  }, []);
+
+  const handleToggleDetails = useCallback(() => {
+    setShowDetails(v => !v);
+  }, []);
+
+  if (!isAuthenticated) return null;
+
+  return (
+    <div className="flex h-dvh bg-background overflow-hidden">
+      {!isMobile && (
+        <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
+          <NavigationRail
+            collapsed
+            quota={quota}
+            isPushConnected={isPushConnected}
+            onLogout={logout}
+            onManageApps={handleManageApps}
+            onInlineApp={handleInlineApp}
+            onCloseInlineApp={closeInlineApp}
+            activeAppId={inlineApp?.id ?? null}
+          />
+        </div>
+      )}
+
+      <div className="flex flex-col flex-1 min-w-0">
+        {inlineApp && (
+          <InlineAppView apps={loadedApps} activeAppId={inlineApp!.id} onClose={closeInlineApp} />
+        )}
+        <div className={cn("flex flex-1 min-h-0", inlineApp && "hidden")}>
+          <div className="flex-1 min-w-0 flex flex-col">
+            {folderLayout !== "sidebar" && (
+              <div className={cn("p-4 border-b border-border", isMobile && "px-3 py-3")}>
+                <div className="flex items-center justify-between">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => router.push("/")}
+                    className="justify-start"
+                  >
+                    <ArrowLeft className="w-4 h-4 mr-2" />
+                    {t("title")}
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            <div className="flex-1 min-h-0">
+              {supportsFiles === false ? (
+                <div className="flex items-center justify-center h-full">
+                  <p className="text-sm text-muted-foreground">{t("not_available")}</p>
+                </div>
+              ) : (
+                <FileBrowser
+                  currentPath={currentPath}
+                  resources={resources}
+                  isLoading={isLoading}
+                  error={error}
+                  selectedResources={selectedResources}
+                  uploadProgress={uploadProgress}
+                  clipboard={clipboard}
+                  onNavigate={handleNavigate}
+                  onCreateFolder={handleCreateFolder}
+                  onUploadFiles={handleUploadFiles}
+                  onUploadFolder={handleUploadFolder}
+                  onCancelUpload={cancelUpload}
+                  onDelete={handleDelete}
+                  onBatchDelete={handleBatchDelete}
+                  onRename={handleRename}
+                  onDownload={handleDownload}
+                  onBatchDownload={handleBatchDownload}
+                  onRefresh={refresh}
+                  onSelectResource={selectResource}
+                  onToggleSelect={toggleSelect}
+                  onSelectAll={selectAll}
+                  onClearSelection={clearSelection}
+                  onSetSelection={setSelection}
+                  onCut={cutResources}
+                  onCopy={copyResources}
+                  onPaste={handlePaste}
+                  onMoveToFolder={handleMoveToFolder}
+                  onMoveToParent={handleMoveToParent}
+                  onPreviewImage={handlePreviewImage}
+                  onPreviewFile={handlePreviewFile}
+                  onShowDetails={handleShowDetails}
+                  onCreateTextFile={handleCreateTextFile}
+                  onDuplicate={handleDuplicate}
+                  getImageUrl={getImageUrl}
+                  listPath={listPath}
+                  listByParentId={listByParentId}
+                  favorites={favorites}
+                  recentFiles={recentFiles}
+                  onToggleFavorite={toggleFavorite}
+                  showDetails={showDetails}
+                  onToggleDetails={handleToggleDetails}
+                  detailResource={detailResource}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+
+        {isMobile && (
+          <NavigationRail
+            orientation="horizontal"
+            onManageApps={handleManageApps}
+            onInlineApp={handleInlineApp}
+            onCloseInlineApp={closeInlineApp}
+            activeAppId={inlineApp?.id ?? null}
+          />
+        )}
+      </div>
+
+      {/* Image preview modal */}
+      {previewImage && (
+        <ImagePreviewModal
+          name={previewImage}
+          onClose={() => setPreviewImage(null)}
+          onDownload={handleDownload}
+          getImageUrl={getImageUrl}
+        />
+      )}
+
+      {/* File preview modal (text, PDF, audio, video, markdown) */}
+      {previewFile && (
+        <FilePreviewModal
+          name={previewFile}
+          onClose={() => setPreviewFile(null)}
+          onDownload={() => handleDownload(previewFile)}
+          getFileContent={() => getFileContent(previewFile)}
+        />
+      )}
+
+      <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
+      <ConfirmDialog {...confirmDialogProps} />
+    </div>
+  );
+}
@@ -2,6 +2,9 @@ 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";

 export default async function LocaleLayout({
@@ -26,7 +29,13 @@ export default async function LocaleLayout({
    <IntlProvider locale={locale} messages={messages}>
      <ThemeProvider>
        <CalendarAlertProvider>
-          {children}
+          <RateLimitToastProvider>
+            <EmbeddedBridgeProvider>
+              <TourProvider>
+                {children}
+              </TourProvider>
+            </EmbeddedBridgeProvider>
+          </RateLimitToastProvider>
        </CalendarAlertProvider>
      </ThemeProvider>
    </IntlProvider>
@@ -1,9 +1,33 @@
 "use client";

-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useRouter } from '@/i18n/navigation';
 import { useTranslations } from 'next-intl';
-import { ArrowLeft, Settings as SettingsIcon } from 'lucide-react';
+import {
+  ArrowLeft,
+  ChevronRight,
+  LogOut,
+  Settings as SettingsIcon,
+  Palette,
+  Mail,
+  User,
+  Shield,
+  UserPen,
+  PalmtreeIcon,
+  Calendar,
+  Filter,
+  FileText,
+  FolderOpen,
+  Tags,
+  HardDrive,
+  Wrench,
+  BookUser,
+  KeyRound,
+  PanelLeftClose,
+  Bell,
+  Puzzle,
+  type LucideIcon,
+} from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { AppearanceSettings } from '@/components/settings/appearance-settings';
 import { EmailSettings } from '@/components/settings/email-settings';
@@ -11,40 +35,344 @@ import { AccountSettings } from '@/components/settings/account-settings';
 import { IdentitySettings } from '@/components/settings/identity-settings';
 import { VacationSettings } from '@/components/settings/vacation-settings';
 import { CalendarSettings } from '@/components/settings/calendar-settings';
+import { CalendarManagementSettings } from '@/components/settings/calendar-management-settings';
 import { FilterSettings } from '@/components/settings/filter-settings';
 import { TemplateSettings } from '@/components/settings/template-settings';
 import { AdvancedSettings } from '@/components/settings/advanced-settings';
-import { useAuthStore } from '@/stores/auth-store';
+import { FolderSettings } from '@/components/settings/folder-settings';
+import { KeywordSettings } from '@/components/settings/keyword-settings';
+import { AccountSecuritySettings } from '@/components/settings/account-security-settings';
+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 { 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';
+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 { useConfig } from '@/hooks/use-config';
+import { usePolicyStore } from '@/stores/policy-store';
 import { cn } from '@/lib/utils';

-type Tab = 'appearance' | 'email' | 'account' | 'identities' | 'vacation' | 'calendar' | 'filters' | 'templates' | '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 {
+  id: Tab;
+  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,
+  encryption: KeyRound,
+  vacation: PalmtreeIcon,
+  calendar: Calendar,
+  contacts: BookUser,
+  filters: Filter,
+  templates: FileText,
+  folders: FolderOpen,
+  keywords: Tags,
+  files: HardDrive,
+  sidebar_apps: PanelLeftClose,
+  themes: Palette,
+  plugins: Puzzle,
+  advanced: Wrench,
+};
+
+const tabGroupOrder: TabGroup[] = ['general', 'account', 'organization', 'apps', 'system'];

 export default function SettingsPage() {
  const router = useRouter();
  const t = useTranslations('settings');
-  const { client } = useAuthStore();
-  const [activeTab, setActiveTab] = useState<Tab>('appearance');
+  const tSidebar = useTranslations('sidebar');
+  const { client, isAuthenticated, logout, checkAuth, isLoading: authLoading } = useAuthStore();
+  const { showAppsModal, inlineApp, loadedApps, handleManageApps, handleInlineApp, closeInlineApp, closeAppsModal } = useSidebarApps();
+  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');
+      if (saved) return saved as Tab;
+    } catch { /* ignore */ }
+    return 'appearance';
+  });
+  const [mobileShowContent, setMobileShowContent] = useState(false);
+  const isDesktop = useIsDesktop();
+
+  // Sidebar resize state
+  const [settingsSidebarWidth, setSettingsSidebarWidth] = useState(() => {
+    try { const v = localStorage.getItem('settings-sidebar-width'); return v ? Number(v) : 256; } catch { return 256; }
+  });
+  const [isResizing, setIsResizing] = useState(false);
+  const dragStartWidth = useRef(256);
+
+  // Check auth on mount
+  useEffect(() => {
+    checkAuth().finally(() => {
+      setInitialCheckDone(true);
+    });
+  }, [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 */ }
+      redirectToLogin();
+    }
+  }, [initialCheckDone, isAuthenticated, authLoading]);
+
+  if (!isAuthenticated) {
+    return null;
+  }

  const supportsVacation = client?.supportsVacationResponse() ?? false;
  const supportsCalendar = client?.supportsCalendars() ?? false;
  const supportsSieve = client?.supportsSieve() ?? false;
+  const supportsFiles = client?.supportsFiles() ?? false;

-  const tabs: { id: Tab; label: string }[] = [
-    { id: 'appearance', label: t('tabs.appearance') },
-    { id: 'email', label: t('tabs.email') },
-    { id: 'account', label: t('tabs.account') },
-    { id: 'identities', label: t('tabs.identities') },
-    ...(supportsVacation ? [{ id: 'vacation' as Tab, label: t('tabs.vacation') }] : []),
-    ...(supportsCalendar ? [{ id: 'calendar' as Tab, label: t('tabs.calendar') }] : []),
-    ...(supportsSieve ? [{ id: 'filters' as Tab, label: t('tabs.filters') }] : []),
-    { id: 'templates', label: t('tabs.templates') },
-    { id: 'advanced', label: t('tabs.advanced') },
+  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' },
+    ...(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 }] : []),
+    ...(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' },
+    ...(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 }] : []),
+    ...(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' },
  ];

+  // Group tabs by category
+  const groupedTabs = tabGroupOrder
+    .map((group) => ({
+      group,
+      label: t(`tab_groups.${group}`),
+      items: tabs.filter((tab) => tab.group === group),
+    }))
+    .filter((g) => g.items.length > 0);
+
+  const handleTabSelect = (tabId: Tab) => {
+    setActiveTab(tabId);
+    try { localStorage.setItem('settings-active-tab', tabId); } catch { /* ignore */ }
+    if (!isDesktop) {
+      setMobileShowContent(true);
+    }
+  };
+
+  const activeTabLabel = tabs.find((tab) => tab.id === activeTab)?.label ?? '';
+
+  const renderTabContent = () => (
+    <>
+      {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 === '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 />}
+    </>
+  );
+
+  // Mobile layout
+  if (!isDesktop) {
+    // Mobile: show content view
+    if (mobileShowContent) {
+      return (
+        <div className="flex flex-col h-dvh bg-background">
+          {/* Mobile content header */}
+          <div className="flex items-center gap-2 px-4 h-14 border-b border-border bg-background shrink-0">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setMobileShowContent(false)}
+              className="h-10 w-10"
+            >
+              <ArrowLeft className="w-5 h-5" />
+            </Button>
+            <h1 className="font-semibold text-lg truncate">{activeTabLabel}</h1>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-y-auto p-4">
+            <div className="bg-card border border-border rounded-lg p-4">
+              {renderTabContent()}
+            </div>
+          </div>
+
+          {/* Bottom Navigation */}
+          <NavigationRail
+            orientation="horizontal"
+            onManageApps={handleManageApps}
+            onInlineApp={handleInlineApp}
+            onCloseInlineApp={closeInlineApp}
+            activeAppId={inlineApp?.id ?? null}
+          />
+          <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
+        </div>
+      );
+    }
+
+    // Mobile: show tab list
+    return (
+      <div className="flex flex-col h-dvh bg-background">
+        {/* Mobile header */}
+        <div className="flex items-center gap-2 px-4 h-14 border-b border-border bg-background shrink-0">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => router.push('/')}
+            className="h-10 w-10"
+          >
+            <ArrowLeft className="w-5 h-5" />
+          </Button>
+          <div className="flex items-center gap-2">
+            <SettingsIcon className="w-5 h-5 text-muted-foreground" />
+            <h1 className="font-semibold text-lg">{t('title')}</h1>
+          </div>
+        </div>
+
+        {/* Tab list */}
+        <div className="flex-1 overflow-y-auto">
+          <div className="py-2">
+            {groupedTabs.map((group, groupIndex) => (
+              <div key={group.group}>
+                {groupIndex > 0 && <div className="mx-5 my-2 border-t border-border" />}
+                <div className="px-5 pt-3 pb-1.5">
+                  <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                    {group.label}
+                  </span>
+                </div>
+                {group.items.map((tab) => {
+                  const Icon = tab.icon;
+                  return (
+                    <button
+                      key={tab.id}
+                      onClick={() => handleTabSelect(tab.id)}
+                      className="w-full flex items-center justify-between px-5 py-3.5 text-sm text-foreground hover:bg-muted transition-colors duration-150"
+                    >
+                      <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>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+
+          {/* Logout */}
+          <div className="border-t border-border px-5 py-3">
+            <button
+              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" />
+              <span>{tSidebar('sign_out')}</span>
+            </button>
+          </div>
+        </div>
+
+        {/* Bottom Navigation */}
+        <NavigationRail
+          orientation="horizontal"
+          onManageApps={handleManageApps}
+          onInlineApp={handleInlineApp}
+          onCloseInlineApp={closeInlineApp}
+          activeAppId={inlineApp?.id ?? null}
+        />
+        <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
+      </div>
+    );
+  }
+
+  // Desktop layout
  return (
-    <div className="flex h-screen bg-background">
+    <div className="flex h-dvh bg-background">
+      {/* Navigation Rail */}
+      <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
+        <NavigationRail
+          collapsed
+          quota={quota}
+          isPushConnected={isPushConnected}
+          onLogout={logout}
+          onManageApps={handleManageApps}
+          onInlineApp={handleInlineApp}
+          onCloseInlineApp={closeInlineApp}
+          activeAppId={inlineApp?.id ?? null}
+        />
+      </div>
+
+      {inlineApp && (
+        <InlineAppView apps={loadedApps} activeAppId={inlineApp!.id} onClose={closeInlineApp} className="flex-1" />
+      )}
+      {!inlineApp && (
+      <>
      {/* Settings Sidebar */}
-      <div className="w-64 border-r border-border bg-secondary flex flex-col">
+      <div
+        className={cn(
+          "border-r border-border bg-secondary flex flex-col",
+          !isResizing && "transition-[width] duration-300"
+        )}
+        style={{ width: `${settingsSidebarWidth}px` }}
+      >
        {/* Header */}
        <div className="p-4 border-b border-border">
          <Button
@@ -59,51 +387,79 @@ export default function SettingsPage() {
        </div>

        {/* Tabs */}
-        <div className="flex-1 overflow-y-auto py-2">
-          <div className="px-2 space-y-1">
-            {tabs.map((tab) => (
-              <button
-                key={tab.id}
-                onClick={() => setActiveTab(tab.id)}
-                className={cn(
-                  'w-full text-left px-3 py-2 rounded text-sm transition-colors',
-                  activeTab === tab.id
-                    ? 'bg-accent text-accent-foreground'
-                    : 'hover:bg-muted text-foreground'
-                )}
-              >
-                {tab.label}
-              </button>
+        <div className="flex-1 overflow-y-auto py-2" data-tour="settings-tabs">
+          <div className="px-2 space-y-0.5">
+            {groupedTabs.map((group, groupIndex) => (
+              <div key={group.group}>
+                {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((tab) => {
+                  const Icon = tab.icon;
+                  return (
+                    <button
+                      key={tab.id}
+                      onClick={() => setActiveTab(tab.id)}
+                      className={cn(
+                        'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
+                        activeTab === tab.id
+                          ? 'bg-accent text-accent-foreground font-medium'
+                          : 'hover:bg-muted text-foreground'
+                      )}
+                    >
+                      <Icon className={cn(
+                        'w-4 h-4 shrink-0',
+                        activeTab === tab.id ? 'text-accent-foreground' : 'text-muted-foreground'
+                      )} />
+                      {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>
+                  );
+                })}
+              </div>
            ))}
          </div>
        </div>
      </div>

+      {/* Sidebar resize handle */}
+      <ResizeHandle
+        onResizeStart={() => { dragStartWidth.current = settingsSidebarWidth; setIsResizing(true); }}
+        onResize={(delta) => setSettingsSidebarWidth(Math.max(180, Math.min(400, dragStartWidth.current + delta)))}
+        onResizeEnd={() => {
+          setIsResizing(false);
+          localStorage.setItem('settings-sidebar-width', String(settingsSidebarWidth));
+        }}
+        onDoubleClick={() => { setSettingsSidebarWidth(256); localStorage.setItem('settings-sidebar-width', '256'); }}
+      />
+
      {/* Settings Content */}
      <div className="flex-1 overflow-y-auto">
        <div className="max-w-3xl mx-auto p-8">
          {/* Page Header */}
-          <div className="mb-8">
-            <div className="flex items-center gap-3 mb-2">
-              <SettingsIcon className="w-8 h-8 text-foreground" />
-              <h1 className="text-3xl font-semibold text-foreground">{t('title')}</h1>
+          <div className="mb-6">
+            <div className="flex items-center gap-2.5 mb-2">
+              <SettingsIcon className="w-6 h-6 text-muted-foreground" />
+              <h1 className="text-2xl font-semibold text-foreground">{t('title')}</h1>
            </div>
          </div>

          {/* Active Tab Content */}
          <div className="bg-card border border-border rounded-lg p-6">
-            {activeTab === 'appearance' && <AppearanceSettings />}
-            {activeTab === 'email' && <EmailSettings />}
-            {activeTab === 'account' && <AccountSettings />}
-            {activeTab === 'identities' && <IdentitySettings />}
-            {activeTab === 'vacation' && <VacationSettings />}
-            {activeTab === 'calendar' && <CalendarSettings />}
-            {activeTab === 'filters' && <FilterSettings />}
-            {activeTab === 'templates' && <TemplateSettings />}
-            {activeTab === 'advanced' && <AdvancedSettings />}
+            {renderTabContent()}
          </div>
        </div>
      </div>
+      </>
+      )}
+      <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
    </div>
  );
 }
@@ -0,0 +1,217 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Save, Loader2, RotateCcw } from 'lucide-react';
+
+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 fetch('/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 fetch('/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 fetch('/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>
+  );
+}
@@ -0,0 +1,299 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { Save, Loader2, RotateCcw, ImageIcon, Upload, Trash2 } from 'lucide-react';
+
+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 fetch('/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 fetch('/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 fetch('/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 fetch('/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 fetch('/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>
+  );
+}
@@ -0,0 +1,116 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Lock } from 'lucide-react';
+
+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 fetch('/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>
+  );
+}
@@ -0,0 +1,281 @@
+'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 { useAuthStore } from '@/stores/auth-store';
+
+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> {
+    const client = useAuthStore.getState().client;
+    if (!client) return {};
+    return {
+      'Authorization': client.getAuthHeader(),
+      'X-JMAP-Server-URL': client.getServerUrl(),
+      'X-JMAP-Username': client.getUsername(),
+    };
+  }
+
+  async function checkAuth() {
+    try {
+      const jmapHeaders = getJmapHeaders();
+      const res = await fetch('/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 fetch('/api/admin/auth', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', ...jmapHeaders },
+          body: JSON.stringify({ stalwartAuth: true }),
+        });
+        if (loginRes.ok) {
+          setAuthenticated(true);
+          return;
+        }
+      }
+
+      router.replace('/admin/login');
+    } catch {
+      router.replace('/admin/login');
+    }
+  }
+
+  async function handleLogout() {
+    await fetch('/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>
+  );
+}
@@ -0,0 +1,95 @@
+'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';
+
+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 fetch('/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>
+  );
+}
@@ -0,0 +1,149 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { RefreshCw } from 'lucide-react';
+import type { AuditEntry } from '@/lib/admin/types';
+
+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 fetch(`/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);
+}
@@ -0,0 +1,354 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { Search, Download, Check, Loader2, Store, Puzzle, SwatchBook, Star, Filter } from 'lucide-react';
+
+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 fetch(`/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 fetch('/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>
+  );
+}
@@ -0,0 +1,211 @@
+'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';
+
+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([
+      fetch('/api/admin/auth'),
+      fetch('/api/admin/audit?limit=10'),
+      fetch('/api/config'),
+      fetch('/api/admin/config'),
+      fetch('/api/admin/plugins').catch(() => null),
+      fetch('/api/admin/themes').catch(() => null),
+      fetch('/api/admin/policy').catch(() => null),
+    ]);
+
+    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 fetch('/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);
+}
@@ -0,0 +1,285 @@
+'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';
+
+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([
+        fetch('/api/admin/plugins'),
+        fetch(`/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 fetch(`/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 fetch(`/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>
+  );
+}
@@ -0,0 +1,436 @@
+'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';
+
+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 fetch('/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);
+  }
+
+  async function handleSavePolicy() {
+    setSavingPolicy(true);
+    setMessage(null);
+    try {
+      const res = await fetch('/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 fetch('/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 fetch('/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 fetch('/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 fetch('/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 fetch('/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 fetch('/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 fetch('/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;
+
+  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>
+
+          {/* 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>
+  );
+}
@@ -0,0 +1,217 @@
+'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';
+
+// 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' },
+};
+
+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 fetch('/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 fetch('/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>
+  );
+}
@@ -0,0 +1,248 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Save, RotateCcw, Loader2 } from 'lucide-react';
+
+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 fetch('/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 fetch('/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 fetch('/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>
+  );
+}
@@ -0,0 +1,552 @@
+'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';
+
+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 fetch('/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 fetch('/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 fetch('/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 fetch('/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 fetch('/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 fetch('/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 fetch('/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 fetch('/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 fetch('/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>
+  );
+}
@@ -0,0 +1,72 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { logger } from '@/lib/logger';
+import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+
+/**
+ * GET /api/account/stalwart/auth
+ * Proxy to Stalwart GET /api/account/auth
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) {
+      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    const response = await fetch(`${creds.apiUrl}/api/account/auth`, {
+      method: 'GET',
+      headers: { 'Authorization': creds.authHeader },
+    });
+
+    if (!response.ok) {
+      const text = await response.text();
+      logger.warn('Stalwart auth info failed', { status: response.status });
+      return NextResponse.json(
+        { error: 'Failed to fetch auth info', details: text },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    logger.error('Stalwart auth proxy error', { error: error instanceof Error ? error.message : 'Unknown' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * POST /api/account/stalwart/auth
+ * Proxy to Stalwart POST /api/account/auth
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) {
+      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    const body = await request.json();
+
+    const response = await fetch(`${creds.apiUrl}/api/account/auth`, {
+      method: 'POST',
+      headers: {
+        'Authorization': creds.authHeader,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      logger.warn('Stalwart auth update failed', { status: response.status });
+      return NextResponse.json(data, { status: response.status });
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    logger.error('Stalwart auth update proxy error', { error: error instanceof Error ? error.message : 'Unknown' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
@@ -0,0 +1,72 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { logger } from '@/lib/logger';
+import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+
+/**
+ * GET /api/account/stalwart/crypto
+ * Proxy to Stalwart GET /api/account/crypto
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) {
+      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    const response = await fetch(`${creds.apiUrl}/api/account/crypto`, {
+      method: 'GET',
+      headers: { 'Authorization': creds.authHeader },
+    });
+
+    if (!response.ok) {
+      const text = await response.text();
+      logger.warn('Stalwart crypto info failed', { status: response.status });
+      return NextResponse.json(
+        { error: 'Failed to fetch crypto info', details: text },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    logger.error('Stalwart crypto proxy error', { error: error instanceof Error ? error.message : 'Unknown' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * POST /api/account/stalwart/crypto
+ * Proxy to Stalwart POST /api/account/crypto
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) {
+      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    const body = await request.json();
+
+    const response = await fetch(`${creds.apiUrl}/api/account/crypto`, {
+      method: 'POST',
+      headers: {
+        'Authorization': creds.authHeader,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      logger.warn('Stalwart crypto update failed', { status: response.status });
+      return NextResponse.json(data, { status: response.status });
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    logger.error('Stalwart crypto update proxy error', { error: error instanceof Error ? error.message : 'Unknown' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
@@ -0,0 +1,83 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { logger } from '@/lib/logger';
+import { encryptSession } from '@/lib/auth/crypto';
+import { SESSION_COOKIE, SESSION_COOKIE_MAX_AGE } from '@/lib/auth/session-cookie';
+import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+
+const COOKIE_OPTIONS = {
+  httpOnly: true,
+  secure: process.env.NODE_ENV === 'production',
+  sameSite: 'lax' as const,
+  path: '/',
+  maxAge: SESSION_COOKIE_MAX_AGE,
+};
+
+/**
+ * POST /api/account/stalwart/password
+ * Change user password via Stalwart PATCH /api/principal/{name}
+ *
+ * Body: { currentPassword: string, newPassword: string }
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) {
+      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    const { currentPassword, newPassword } = await request.json();
+
+    if (!currentPassword || !newPassword) {
+      return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
+    }
+
+    if (newPassword.length < 8) {
+      return NextResponse.json({ error: 'Password must be at least 8 characters' }, { status: 400 });
+    }
+
+    // Verify current password by attempting to authenticate
+    const verifyAuth = `Basic ${Buffer.from(`${creds.username}:${currentPassword}`).toString('base64')}`;
+    const verifyResponse = await fetch(`${creds.serverUrl}/.well-known/jmap`, {
+      method: 'GET',
+      headers: { 'Authorization': verifyAuth },
+    });
+
+    if (!verifyResponse.ok) {
+      return NextResponse.json({ error: 'Current password is incorrect' }, { status: 403 });
+    }
+
+    // Change password via Stalwart principal API
+    const response = await fetch(`${creds.apiUrl}/api/principal/${encodeURIComponent(creds.username)}`, {
+      method: 'PATCH',
+      headers: {
+        'Authorization': creds.authHeader,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify([
+        { action: 'set', field: 'secrets', value: newPassword },
+      ]),
+    });
+
+    if (!response.ok) {
+      const text = await response.text();
+      logger.warn('Stalwart password change failed', { status: response.status });
+      return NextResponse.json(
+        { error: 'Failed to change password', details: text },
+        { status: response.status }
+      );
+    }
+
+    // If session cookie exists, update it with the new password
+    if (creds.hasSessionCookie) {
+      const newToken = encryptSession(creds.serverUrl, creds.username, newPassword);
+      const cookieStore = await cookies();
+      cookieStore.set(SESSION_COOKIE, newToken, COOKIE_OPTIONS);
+    }
+
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Stalwart password change proxy error', { error: error instanceof Error ? error.message : 'Unknown' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
@@ -0,0 +1,81 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { logger } from '@/lib/logger';
+import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+
+/**
+ * GET /api/account/stalwart/principal
+ * Proxy to Stalwart GET /api/principal/{username}
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) {
+      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    const response = await fetch(`${creds.apiUrl}/api/principal/${encodeURIComponent(creds.username)}`, {
+      method: 'GET',
+      headers: { 'Authorization': creds.authHeader },
+    });
+
+    if (!response.ok) {
+      const text = await response.text();
+      logger.warn('Stalwart principal fetch failed', { status: response.status });
+      return NextResponse.json(
+        { error: 'Failed to fetch principal', details: text },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    logger.error('Stalwart principal proxy error', { error: error instanceof Error ? error.message : 'Unknown' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * PATCH /api/account/stalwart/principal
+ * Proxy to Stalwart PATCH /api/principal/{username}
+ * Body: PrincipalUpdateAction[] (array of {action, field, value})
+ */
+export async function PATCH(request: NextRequest) {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) {
+      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    const body = await request.json();
+
+    // Prevent secrets field from being changed through this endpoint (use /password instead)
+    if (Array.isArray(body)) {
+      const hasSecrets = body.some((action: { field?: string }) => action.field === 'secrets');
+      if (hasSecrets) {
+        return NextResponse.json({ error: 'Use /api/account/stalwart/password to change passwords' }, { status: 400 });
+      }
+    }
+
+    const response = await fetch(`${creds.apiUrl}/api/principal/${encodeURIComponent(creds.username)}`, {
+      method: 'PATCH',
+      headers: {
+        'Authorization': creds.authHeader,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      logger.warn('Stalwart principal update failed', { status: response.status });
+      return NextResponse.json(data, { status: response.status });
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    logger.error('Stalwart principal update proxy error', { error: error instanceof Error ? error.message : 'Unknown' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { logger } from '@/lib/logger';
+import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+
+/**
+ * GET /api/account/stalwart/probe
+ * Detect whether the JMAP server is Stalwart by probing /api/account/auth
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) {
+      return NextResponse.json({ isStalwart: false });
+    }
+
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 5000);
+
+    try {
+      const response = await fetch(`${creds.apiUrl}/api/account/auth`, {
+        method: 'GET',
+        headers: { 'Authorization': creds.authHeader },
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeout);
+
+      if (!response.ok) {
+        return NextResponse.json({ isStalwart: false });
+      }
+
+      const data = await response.json();
+      const isStalwart = data.data !== undefined && typeof data.data.otpEnabled === 'boolean';
+
+      return NextResponse.json({ isStalwart });
+    } catch {
+      clearTimeout(timeout);
+      return NextResponse.json({ isStalwart: false });
+    }
+  } catch (error) {
+    logger.error('Stalwart probe error', { error: error instanceof Error ? error.message : 'Unknown' });
+    return NextResponse.json({ isStalwart: false });
+  }
+}
@@ -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 });
+  }
+}
@@ -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 });
+  }
+}
@@ -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 });
+  }
+}
@@ -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 });
+  }
+}
@@ -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 });
+  }
+}
@@ -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 });
+  }
+}
@@ -0,0 +1,232 @@
+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');
+
+      // 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 });
+  }
+}
@@ -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 });
+  }
+}
@@ -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 });
+  }
+}
@@ -0,0 +1,241 @@
+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 warnings (logged but not blocking for admin)
+    const warnings: string[] = [];
+    for (const { pattern, label } of SUSPICIOUS_JS_PATTERNS) {
+      if (pattern.test(code)) warnings.push(`Contains ${label}`);
+      pattern.lastIndex = 0;
+    }
+
+    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, warnings }, ip);
+
+    return NextResponse.json({ plugin, warnings });
+  } 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 });
+  }
+}
@@ -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 });
+  }
+}
@@ -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' },
+    });
+  }
+}
@@ -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 });
+  }
+}
@@ -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 });
+  }
+}
@@ -2,26 +2,38 @@ import { NextRequest, NextResponse } from 'next/server';
 import { cookies } from 'next/headers';
 import { logger } from '@/lib/logger';
 import { encryptSession, decryptSession } 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 { getCookieOptions } from '@/lib/oauth/cookie-config';

 const COOKIE_OPTIONS = {
-  httpOnly: true,
-  secure: process.env.NODE_ENV === 'production',
-  sameSite: 'lax' as const,
-  path: '/',
+  ...getCookieOptions(),
  maxAge: SESSION_COOKIE_MAX_AGE,
 };

+function getSlot(request: NextRequest): number {
+  const raw = request.nextUrl.searchParams.get('slot');
+  if (raw === null) return 0;
+  const slot = parseInt(raw, 10);
+  if (isNaN(slot) || slot < 0 || slot > 4) return 0;
+  return slot;
+}
+
 export async function POST(request: NextRequest) {
  try {
-    const { serverUrl, username, password } = await request.json();
+    if (process.env.OAUTH_ENABLED === 'true' && process.env.OAUTH_ONLY === 'true') {
+      return NextResponse.json({ error: 'Basic authentication is disabled' }, { status: 403 });
+    }
+
+    const { serverUrl, username, password, slot: bodySlot } = await request.json();
    if (!serverUrl || !username || !password) {
      return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
    }

+    const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot <= 4 ? bodySlot : getSlot(request);
+    const cookieName = sessionCookieName(slot);
    const token = encryptSession(serverUrl, username, password);
    const cookieStore = await cookies();
-    cookieStore.set(SESSION_COOKIE, token, COOKIE_OPTIONS);
+    cookieStore.set(cookieName, token, COOKIE_OPTIONS);

    return NextResponse.json({ ok: true });
  } catch (error) {
@@ -30,10 +42,12 @@ export async function POST(request: NextRequest) {
  }
 }

-export async function GET() {
+export async function GET(request: NextRequest) {
  try {
+    const slot = getSlot(request);
+    const cookieName = sessionCookieName(slot);
    const cookieStore = await cookies();
-    const token = cookieStore.get(SESSION_COOKIE)?.value;
+    const token = cookieStore.get(cookieName)?.value;

    if (!token) {
      return NextResponse.json({ error: 'No session' }, { status: 401 });
@@ -41,7 +55,46 @@ export async function GET() {

    const credentials = decryptSession(token);
    if (!credentials) {
-      cookieStore.delete(SESSION_COOKIE);
+      cookieStore.delete(cookieName);
+      return NextResponse.json({ error: 'Invalid session' }, { status: 401 });
+    }
+
+    // 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 Sec-Fetch-Site to ensure only same-origin browser requests succeed.
+ */
+export async function PUT(request: NextRequest) {
+  try {
+    // Block non-browser and cross-origin requests
+    const secFetchSite = request.headers.get('sec-fetch-site');
+    if (secFetchSite !== 'same-origin') {
+      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);
      return NextResponse.json({ error: 'Invalid session' }, { status: 401 });
    }

@@ -54,10 +107,21 @@ export async function GET() {
  }
 }

-export async function DELETE() {
+export async function DELETE(request: NextRequest) {
  try {
    const cookieStore = await cookies();
-    cookieStore.delete(SESSION_COOKIE);
+    const all = request.nextUrl.searchParams.get('all') === 'true';
+
+    if (all) {
+      // Delete all session cookies (slots 0-4)
+      for (let i = 0; i <= 4; i++) {
+        cookieStore.delete(sessionCookieName(i));
+      }
+    } else {
+      const slot = getSlot(request);
+      cookieStore.delete(sessionCookieName(slot));
+    }
+
    return NextResponse.json({ ok: true });
  } catch (error) {
    logger.error('Session clear error', { error: error instanceof Error ? error.message : 'Unknown error' });
@@ -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 });
+  }
+}
@@ -0,0 +1,88 @@
+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';
+
+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) {
+      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 });
+  }
+}
@@ -1,100 +1,39 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { cookies } from 'next/headers';
 import { logger } from '@/lib/logger';
-import { discoverOAuth } from '@/lib/oauth/discovery';
-import { REFRESH_TOKEN_COOKIE } from '@/lib/oauth/tokens';
+import { refreshTokenCookieName } from '@/lib/oauth/tokens';
+import { exchangeCodeForTokens, buildOAuthParams, getMetadata, getTokenEndpoint } from '@/lib/oauth/token-exchange';
+import { getCookieOptions } from '@/lib/oauth/cookie-config';

-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,
-};
-
-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;
+function getSlot(request: NextRequest): number {
+  const raw = request.nextUrl.searchParams.get('slot');
+  if (raw === null) return 0;
+  const slot = parseInt(raw, 10);
+  if (isNaN(slot) || slot < 0 || slot > 4) return 0;
+  return slot;
 }

 export async function POST(request: NextRequest) {
  try {
-    const { code, code_verifier, redirect_uri } = await request.json();
+    const { code, code_verifier, redirect_uri, slot: bodySlot } = await request.json();

    if (!code || !code_verifier || !redirect_uri) {
      return NextResponse.json({ error: 'Missing required parameters' }, { status: 400 });
    }

-    const tokenEndpoint = await getTokenEndpoint();
+    const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot <= 4 ? bodySlot : getSlot(request);

-    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(REFRESH_TOKEN_COOKIE, tokens.refresh_token, COOKIE_OPTIONS);
+      cookieStore.set(cookieName, tokens.refresh_token, getCookieOptions());
    }

    return response;
@@ -104,10 +43,12 @@ export async function POST(request: NextRequest) {
  }
 }

-export async function PUT() {
+export async function PUT(request: NextRequest) {
  try {
+    const slot = getSlot(request);
+    const cookieName = refreshTokenCookieName(slot);
    const cookieStore = await cookies();
-    const refreshToken = cookieStore.get(REFRESH_TOKEN_COOKIE)?.value;
+    const refreshToken = cookieStore.get(cookieName)?.value;

    if (!refreshToken) {
      return NextResponse.json({ error: 'No refresh token' }, { status: 401 });
@@ -129,7 +70,7 @@ export async function PUT() {
    if (!tokenResponse.ok) {
      const errorText = await tokenResponse.text();
      logger.error('Token refresh failed', { status: tokenResponse.status, error: errorText });
-      cookieStore.delete(REFRESH_TOKEN_COOKIE);
+      cookieStore.delete(cookieName);
      return NextResponse.json({ error: 'Refresh failed' }, { status: 401 });
    }

@@ -141,7 +82,7 @@ export async function PUT() {
    }

    if (tokens.refresh_token) {
-      cookieStore.set(REFRESH_TOKEN_COOKIE, tokens.refresh_token, COOKIE_OPTIONS);
+      cookieStore.set(cookieName, tokens.refresh_token, getCookieOptions());
    }

    return NextResponse.json({
@@ -154,10 +95,39 @@ export async function PUT() {
  }
 }

-export async function DELETE() {
+export async function DELETE(request: NextRequest) {
  try {
+    const all = request.nextUrl.searchParams.get('all') === 'true';
+
+    if (all) {
+      // Revoke and delete all refresh token cookies (slots 0-4)
+      const cookieStore = await cookies();
+      for (let i = 0; i <= 4; i++) {
+        const name = refreshTokenCookieName(i);
+        const token = cookieStore.get(name)?.value;
+        if (token) {
+          // Best-effort revocation
+          try {
+            const metadata = await getMetadata().catch(() => null);
+            if (metadata?.revocation_endpoint) {
+              const params = buildOAuthParams({ token, token_type_hint: 'refresh_token' });
+              await fetch(metadata.revocation_endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                body: params.toString(),
+              }).catch(() => {});
+            }
+          } catch { /* best effort */ }
+          cookieStore.delete(name);
+        }
+      }
+      return NextResponse.json({ ok: true });
+    }
+
+    const slot = getSlot(request);
+    const cookieName = refreshTokenCookieName(slot);
    const cookieStore = await cookies();
-    const refreshToken = cookieStore.get(REFRESH_TOKEN_COOKIE)?.value;
+    const refreshToken = cookieStore.get(cookieName)?.value;
    const metadata = await getMetadata().catch((err) => {
      logger.warn('Failed to discover OAuth metadata during logout', {
        error: err instanceof Error ? err.message : 'Unknown error',
@@ -186,7 +156,7 @@ export async function DELETE() {
        }
      }

-      cookieStore.delete(REFRESH_TOKEN_COOKIE);
+      cookieStore.delete(cookieName);
    }

    let end_session_url: string | undefined;
@@ -0,0 +1,188 @@
+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';
+
+/**
+ * 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;
+  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,
+  });
+}
@@ -0,0 +1,103 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { logger } from '@/lib/logger';
+import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+
+interface DiscoveryAccountRequest {
+  key: string;
+  candidates: string[];
+}
+
+interface DiscoveryResult {
+  url: string | null;
+  resolvedAccount: string | null;
+}
+
+function buildPublicUrl(serverUrl: string, path: string): string {
+  return new URL(path, serverUrl).toString();
+}
+
+async function probeCalendarHome(serverUrl: string, authHeader: string, accountName: string): Promise<string | null> {
+  const targetUrl = buildPublicUrl(serverUrl, `/dav/cal/${encodeURIComponent(accountName)}`);
+  const response = await fetch(targetUrl, {
+    method: 'PROPFIND',
+    headers: {
+      Authorization: authHeader,
+      Depth: '0',
+      'Content-Type': 'application/xml; charset=utf-8',
+    },
+    body: `<?xml version="1.0" encoding="utf-8"?>
+<D:propfind xmlns:D="DAV:">
+  <D:prop>
+    <D:resourcetype/>
+    <D:displayname/>
+  </D:prop>
+</D:propfind>`,
+    redirect: 'manual',
+  });
+
+  if (response.status === 207) {
+    return targetUrl;
+  }
+
+  if (response.status >= 300 && response.status < 400) {
+    const location = response.headers.get('Location');
+    if (location) {
+      return new URL(location, targetUrl).toString();
+    }
+  }
+
+  return null;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) {
+      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    const body = await request.json().catch(() => ({}));
+    const accounts = Array.isArray(body.accounts) ? body.accounts as DiscoveryAccountRequest[] : [];
+    const wellKnownUrl = buildPublicUrl(creds.serverUrl, '/.well-known/caldav');
+    const discovered: Record<string, DiscoveryResult> = {};
+
+    for (const account of accounts) {
+      if (!account?.key) continue;
+
+      const candidates = Array.from(new Set(
+        (account.candidates || [])
+          .map((candidate) => candidate?.trim())
+          .filter((candidate): candidate is string => Boolean(candidate))
+      ));
+
+      let url: string | null = null;
+      let resolvedAccount: string | null = null;
+
+      for (const candidate of candidates) {
+        try {
+          url = await probeCalendarHome(creds.serverUrl, creds.authHeader, candidate);
+          if (url) {
+            resolvedAccount = candidate;
+            break;
+          }
+        } catch (error) {
+          logger.warn('CalDAV discovery probe failed', {
+            accountKey: account.key,
+            candidate,
+            error: error instanceof Error ? error.message : 'Unknown',
+          });
+        }
+      }
+
+      discovered[account.key] = { url, resolvedAccount };
+    }
+
+    return NextResponse.json({
+      wellKnownUrl,
+      accounts: discovered,
+    });
+  } catch (error) {
+    logger.error('CalDAV discovery failed', { error: error instanceof Error ? error.message : 'Unknown' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
@@ -1,26 +1,55 @@
 import { NextResponse } from 'next/server';
 import { logger } from '@/lib/logger';
+import { configManager } from '@/lib/admin/config-manager';

 /**
 * 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',
-    oauthClientId: process.env.OAUTH_CLIENT_ID || '',
-    oauthIssuerUrl: process.env.OAUTH_ISSUER_URL || '',
+    appName,
+    jmapServerUrl,
+    oauthEnabled,
+    oauthOnly,
+    oauthClientId: configManager.get<string>('oauthClientId', ''),
+    oauthIssuerUrl: configManager.get<string>('oauthIssuerUrl', ''),
    rememberMeEnabled: !!process.env.SESSION_SECRET,
+    settingsSyncEnabled: configManager.get<boolean>('settingsSyncEnabled', false) && !!process.env.SESSION_SECRET,
+    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', ''),
  });
 }
@@ -0,0 +1,511 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+// In-memory LRU cache: domain -> { data, contentType, fetchedAt }
+const CACHE_MAX_SIZE = 1000;
+const CACHE_TTL_MS = 14 * 24 * 60 * 60 * 1000; // 2 weeks
+
+interface CacheEntry {
+  data: ArrayBuffer;
+  contentType: string;
+  fetchedAt: number;
+}
+
+interface NegativeCacheEntry {
+  fetchedAt: number;
+}
+
+const cache = new Map<string, CacheEntry>();
+const negativeCache = new Map<string, NegativeCacheEntry>();
+const NEGATIVE_CACHE_TTL_MS = 24 * 60 * 60 * 1000; // 1 day
+const NEGATIVE_CACHE_MAX_SIZE = 2000;
+
+// Strict domain validation to prevent SSRF
+const DOMAIN_RE = /^[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)+$/i;
+
+function isValidDomain(domain: string): boolean {
+  if (domain.length > 253) return false;
+  if (!DOMAIN_RE.test(domain)) return false;
+  // Block internal/private hostnames
+  const lower = domain.toLowerCase();
+  if (
+    lower === 'localhost' ||
+    lower.endsWith('.local') ||
+    lower.endsWith('.internal') ||
+    lower.endsWith('.arpa')
+  ) {
+    return false;
+  }
+  return true;
+}
+
+// Known multi-part TLDs where the registrable domain includes one extra label.
+const MULTI_PART_TLDS = new Set([
+  // .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 {
+  const parts = domain.split(".");
+  if (parts.length <= 2) return domain;
+  const lastTwo = parts.slice(-2).join(".");
+  if (MULTI_PART_TLDS.has(lastTwo)) {
+    return parts.length >= 3 ? parts.slice(-3).join(".") : domain;
+  }
+  return parts.slice(-2).join(".");
+}
+
+function evictOldest() {
+  if (cache.size < CACHE_MAX_SIZE) return;
+  // Evict the oldest entry
+  let oldestKey: string | null = null;
+  let oldestTime = Infinity;
+  for (const [key, entry] of cache) {
+    if (entry.fetchedAt < oldestTime) {
+      oldestTime = entry.fetchedAt;
+      oldestKey = key;
+    }
+  }
+  if (oldestKey) cache.delete(oldestKey);
+}
+
+export async function GET(request: NextRequest) {
+  const domain = request.nextUrl.searchParams.get('domain');
+
+  if (!domain || !isValidDomain(domain)) {
+    return new NextResponse(null, {
+      status: 400,
+      headers: { 'Cache-Control': 'public, max-age=86400' },
+    });
+  }
+
+  // Resolve to root domain so subdomains share the same favicon lookup
+  const normalizedDomain = getRootDomain(domain.toLowerCase());
+
+  // Check negative cache (domains known to have no favicon)
+  const neg = negativeCache.get(normalizedDomain);
+  if (neg && Date.now() - neg.fetchedAt < NEGATIVE_CACHE_TTL_MS) {
+    return new NextResponse(null, {
+      status: 404,
+      headers: { 'Cache-Control': 'public, max-age=86400' }, // 1 day
+    });
+  }
+
+  // Check cache
+  const cached = cache.get(normalizedDomain);
+  if (cached && Date.now() - cached.fetchedAt < CACHE_TTL_MS) {
+    return new NextResponse(cached.data, {
+      headers: {
+        'Content-Type': cached.contentType,
+        'Cache-Control': 'public, max-age=1209600', // 2 weeks
+      },
+    });
+  }
+
+  try {
+    const upstream = await fetch(
+      `https://icons.duckduckgo.com/ip3/${encodeURIComponent(normalizedDomain)}.ico`,
+      { signal: AbortSignal.timeout(5000) }
+    );
+
+    if (!upstream.ok) {
+      evictNegativeOldest();
+      negativeCache.set(normalizedDomain, { fetchedAt: Date.now() });
+      return new NextResponse(null, {
+        status: 404,
+        headers: { 'Cache-Control': 'public, max-age=86400' },
+      });
+    }
+
+    const contentType = upstream.headers.get('content-type') || 'image/x-icon';
+    const data = await upstream.arrayBuffer();
+
+    // Don't cache empty/tiny responses (likely no real favicon)
+    if (data.byteLength < 10) {
+      evictNegativeOldest();
+      negativeCache.set(normalizedDomain, { fetchedAt: Date.now() });
+      return new NextResponse(null, {
+        status: 404,
+        headers: { 'Cache-Control': 'public, max-age=86400' },
+      });
+    }
+
+    // Cache the result
+    evictOldest();
+    cache.set(normalizedDomain, { data, contentType, fetchedAt: Date.now() });
+
+    return new NextResponse(data, {
+      headers: {
+        'Content-Type': contentType,
+        'Cache-Control': 'public, max-age=1209600',
+      },
+    });
+  } catch {
+    return new NextResponse(null, {
+      status: 502,
+      headers: { 'Cache-Control': 'public, max-age=300' }, // 5 min
+    });
+  }
+}
+
+function evictNegativeOldest() {
+  if (negativeCache.size < NEGATIVE_CACHE_MAX_SIZE) return;
+  let oldestKey: string | null = null;
+  let oldestTime = Infinity;
+  for (const [key, entry] of negativeCache) {
+    if (entry.fetchedAt < oldestTime) {
+      oldestTime = entry.fetchedAt;
+      oldestKey = key;
+    }
+  }
+  if (oldestKey) negativeCache.delete(oldestKey);
+}
@@ -0,0 +1,108 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const MAX_RESPONSE_SIZE = 10 * 1024 * 1024; // 10MB
+const FETCH_TIMEOUT_MS = 15000;
+
+function isValidExternalUrl(urlString: string): boolean {
+  let url: URL;
+  try {
+    url = new URL(urlString);
+  } catch {
+    return false;
+  }
+
+  if (url.protocol !== 'https:' && url.protocol !== 'http:') {
+    return false;
+  }
+
+  const hostname = url.hostname.toLowerCase();
+
+  // Block private/internal hostnames
+  if (
+    hostname === 'localhost' ||
+    hostname === '127.0.0.1' ||
+    hostname === '::1' ||
+    hostname === '0.0.0.0' ||
+    hostname.endsWith('.local') ||
+    hostname.endsWith('.internal') ||
+    hostname.endsWith('.arpa') ||
+    hostname.startsWith('10.') ||
+    hostname.startsWith('192.168.') ||
+    hostname.startsWith('169.254.') ||
+    /^172\.(1[6-9]|2\d|3[01])\./.test(hostname)
+  ) {
+    return false;
+  }
+
+  // Block URLs with credentials
+  if (url.username || url.password) {
+    return false;
+  }
+
+  return true;
+}
+
+export async function POST(request: NextRequest) {
+  let body: { url?: string };
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
+  }
+
+  const { url } = body;
+
+  if (!url || typeof url !== 'string') {
+    return NextResponse.json({ error: 'URL is required' }, { status: 400 });
+  }
+
+  if (!isValidExternalUrl(url)) {
+    return NextResponse.json({ error: 'Invalid or disallowed URL' }, { status: 400 });
+  }
+
+  try {
+    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',
+    });
+
+    clearTimeout(timeout);
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: `Remote server returned ${response.status}` },
+        { status: 502 }
+      );
+    }
+
+    const contentLength = response.headers.get('content-length');
+    if (contentLength && parseInt(contentLength) > MAX_RESPONSE_SIZE) {
+      return NextResponse.json({ error: 'File too large' }, { status: 413 });
+    }
+
+    const buffer = await response.arrayBuffer();
+    if (buffer.byteLength > MAX_RESPONSE_SIZE) {
+      return NextResponse.json({ error: 'File too large' }, { status: 413 });
+    }
+
+    return new NextResponse(buffer, {
+      status: 200,
+      headers: {
+        'Content-Type': 'text/calendar',
+        'Content-Length': buffer.byteLength.toString(),
+      },
+    });
+  } catch (error: unknown) {
+    if (error instanceof Error && error.name === 'AbortError') {
+      return NextResponse.json({ error: 'Request timed out' }, { status: 504 });
+    }
+    return NextResponse.json({ error: 'Failed to fetch calendar' }, { status: 502 });
+  }
+}
@@ -1,10 +1,21 @@
+import v8 from 'node:v8';
 import { NextResponse } from 'next/server';
 import { NextRequest } from 'next/server';
 import { logger } from '@/lib/logger';

-// Health check thresholds
-const MEMORY_WARNING_THRESHOLD = 0.85; // 85% heap usage
-const MEMORY_CRITICAL_THRESHOLD = 0.95; // 95% heap usage
+const MEMORY_WARNING_THRESHOLD = 0.85;
+const MEMORY_CRITICAL_THRESHOLD = 0.95;
+
+function getHeapUsagePercent(heapUsed: number, heapTotal: number): number {
+  const heapSizeLimit = v8.getHeapStatistics().heap_size_limit;
+  const denominator = heapSizeLimit > 0 ? heapSizeLimit : heapTotal;
+
+  if (denominator <= 0) {
+    return 0;
+  }
+
+  return (heapUsed / denominator) * 100;
+}

 interface HealthStatus {
  status: 'healthy' | 'degraded' | 'unhealthy';
@@ -14,6 +25,7 @@ interface HealthStatus {
  memory?: {
    heapUsed: number;
    heapTotal: number;
+    heapSizeLimit: number;
    rss: number;
    external: number;
    heapUsagePercent: number;
@@ -27,14 +39,9 @@ interface HealthStatus {
 /**
 * Health check endpoint for container orchestration
 *
- * GET /api/health - Basic health check (returns 200 OK or 503 Service Unavailable)
- * GET /api/health?detailed=true - Detailed diagnostics with memory stats
- * HEAD /api/health - Lightweight health check (status code only)
- *
- * Health status based on Node.js heap usage:
- * - Healthy (200): < 85% heap usage
- * - Degraded (200): 85-95% heap usage (warnings in detailed mode)
- * - Unhealthy (503): > 95% heap usage
+ * GET /api/health - Liveness probe for container orchestration
+ * GET /api/health?detailed=true - Diagnostics with advisory memory warnings
+ * HEAD /api/health - Lightweight liveness probe (status code only)
 */
 export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
@@ -43,38 +50,31 @@ export async function GET(request: NextRequest) {
  try {
    const timestamp = new Date().toISOString();
    const memUsage = process.memoryUsage();
-    const heapUsagePercent = (memUsage.heapUsed / memUsage.heapTotal) * 100;
-
-    // Determine health status based on memory usage
+    const heapSizeLimit = v8.getHeapStatistics().heap_size_limit;
+    const heapUsagePercent = getHeapUsagePercent(memUsage.heapUsed, memUsage.heapTotal);
    let status: 'healthy' | 'degraded' | 'unhealthy' = 'healthy';
    const warnings: string[] = [];
-    let httpStatus = 200;

    if (heapUsagePercent >= MEMORY_CRITICAL_THRESHOLD * 100) {
-      status = 'unhealthy';
-      httpStatus = 503;
+      status = 'degraded';
+      warnings.push(`V8 heap usage is very high: ${heapUsagePercent.toFixed(1)}% of heap limit`);
    } else if (heapUsagePercent >= MEMORY_WARNING_THRESHOLD * 100) {
      status = 'degraded';
-      warnings.push(`Memory usage high: ${heapUsagePercent.toFixed(1)}%`);
+      warnings.push(`V8 heap usage is high: ${heapUsagePercent.toFixed(1)}% of heap limit`);
    }

-    // Build response
    const response: HealthStatus = {
-      status,
+      status: detailed ? status : 'healthy',
      timestamp,
    };

-    if (status === 'unhealthy') {
-      response.reason = `Memory usage critical: ${heapUsagePercent.toFixed(1)}%`;
-    }
-
-    // Add detailed information if requested
    if (detailed) {
      response.uptime = process.uptime();
      response.version = process.env.npm_package_version || '0.1.0';
      response.memory = {
        heapUsed: memUsage.heapUsed,
        heapTotal: memUsage.heapTotal,
+        heapSizeLimit,
        rss: memUsage.rss,
        external: memUsage.external,
        heapUsagePercent: Number(heapUsagePercent.toFixed(2)),
@@ -87,10 +87,8 @@ export async function GET(request: NextRequest) {
      }
    }

-    logger.info('Health check', { status, detailed });
-
    return NextResponse.json(response, {
-      status: httpStatus,
+      status: 200,
      headers: {
        'Cache-Control': 'no-store, no-cache, must-revalidate',
        'Pragma': 'no-cache',
@@ -116,13 +114,6 @@ export async function GET(request: NextRequest) {
 */
 export async function HEAD() {
  try {
-    const memUsage = process.memoryUsage();
-    const heapUsagePercent = (memUsage.heapUsed / memUsage.heapTotal) * 100;
-
-    if (heapUsagePercent >= MEMORY_CRITICAL_THRESHOLD * 100) {
-      return new Response(null, { status: 503 });
-    }
-
    return new Response(null, { status: 200 });
  } catch {
    return new Response(null, { status: 503 });
@@ -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 });
+  }
+}
@@ -0,0 +1,183 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { logger } from '@/lib/logger';
+import { decryptSession } from '@/lib/auth/crypto';
+import { sessionCookieName } from '@/lib/auth/session-cookie';
+import { saveUserSettings, loadUserSettings, deleteUserSettings } from '@/lib/settings-sync';
+import { configManager } from '@/lib/admin/config-manager';
+
+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;
+}
+
+/**
+ * Verify identity against session cookies across all account slots.
+ * With multi-account, the requesting account may be on any slot (0-4).
+ * Returns true only if a matching session cookie is found.
+ */
+async function verifyIdentity(username: string, serverUrl: string): Promise<boolean> {
+  const cookieStore = await cookies();
+
+  for (let slot = 0; slot <= 4; slot++) {
+    const token = cookieStore.get(sessionCookieName(slot))?.value;
+    if (!token) continue;
+
+    const session = decryptSession(token);
+    if (session && session.username === username && session.serverUrl === serverUrl) {
+      return true; // Found a matching slot
+    }
+  }
+
+  // No matching session found (or no cookies at all) → reject
+  return false;
+}
+
+export async function GET(request: NextRequest) {
+  if (!isEnabled()) {
+    return NextResponse.json({ error: 'Settings sync is disabled' }, { status: 404 });
+  }
+
+  const username = request.headers.get('x-settings-username');
+  const serverUrl = request.headers.get('x-settings-server');
+  if (!username || !serverUrl) {
+    return NextResponse.json({ error: 'Missing identity headers' }, { status: 400 });
+  }
+
+  if (!(await verifyIdentity(username, serverUrl))) {
+    return NextResponse.json({ error: 'Identity mismatch' }, { status: 403 });
+  }
+
+  try {
+    const settings = await loadUserSettings(username, serverUrl);
+    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 });
+    const classified = classifyError(error);
+    return NextResponse.json({ error: classified.message }, { status: classified.status });
+  }
+}
+
+export async function POST(request: NextRequest) {
+  if (!isEnabled()) {
+    return NextResponse.json({ error: 'Settings sync is disabled' }, { status: 404 });
+  }
+
+  try {
+    const { username, serverUrl, settings } = await request.json();
+    if (!username || !serverUrl || !settings) {
+      return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
+    }
+
+    if (typeof settings !== 'object' || settings === null || Array.isArray(settings)) {
+      return NextResponse.json({ error: 'Settings must be an object' }, { status: 400 });
+    }
+
+    if (!(await verifyIdentity(username, serverUrl))) {
+      return NextResponse.json({ error: 'Identity mismatch' }, { status: 403 });
+    }
+
+    // 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 });
+    const classified = classifyError(error);
+    return NextResponse.json({ error: classified.message }, { status: classified.status });
+  }
+}
+
+export async function DELETE(request: NextRequest) {
+  if (!isEnabled()) {
+    return NextResponse.json({ error: 'Settings sync is disabled' }, { status: 404 });
+  }
+
+  try {
+    const { username, serverUrl } = await request.json();
+    if (!username || !serverUrl) {
+      return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
+    }
+
+    if (!(await verifyIdentity(username, serverUrl))) {
+      return NextResponse.json({ error: 'Identity mismatch' }, { status: 403 });
+    }
+
+    await deleteUserSettings(username, serverUrl);
+    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 delete error', { error: message, code });
+    const classified = classifyError(error);
+    return NextResponse.json({ error: classified.message }, { status: classified.status });
+  }
+}
@@ -0,0 +1,110 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { logger } from '@/lib/logger';
+import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+
+const ALLOWED_METHODS = new Set(['PROPFIND', 'MKCOL', 'GET', 'PUT', 'DELETE', 'MOVE', 'COPY']);
+
+/**
+ * POST /api/webdav
+ * Proxies WebDAV requests to the Stalwart server.
+ *
+ * Headers:
+ *   X-WebDAV-Method: The actual WebDAV method (PROPFIND, MKCOL, GET, PUT, DELETE, MOVE, COPY)
+ *   X-WebDAV-Path: Resource path relative to the user's DAV root (default: /)
+ *   X-WebDAV-Destination: Destination path for MOVE/COPY (relative to user's DAV root)
+ *   Depth: WebDAV Depth header (forwarded as-is)
+ *   Content-Type: Forwarded for PROPFIND (XML) and PUT (file upload)
+ *   Overwrite: WebDAV Overwrite header for MOVE/COPY
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) {
+      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    const method = request.headers.get('X-WebDAV-Method')?.toUpperCase();
+    if (!method || !ALLOWED_METHODS.has(method)) {
+      return NextResponse.json({ error: 'Invalid WebDAV method' }, { status: 400 });
+    }
+
+    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)}/`;
+
+    // Build headers for the upstream request
+    const upstreamHeaders: Record<string, string> = {
+      'Authorization': creds.authHeader,
+    };
+
+    // Forward relevant WebDAV headers
+    const depth = request.headers.get('Depth');
+    if (depth) upstreamHeaders['Depth'] = depth;
+
+    const contentType = request.headers.get('Content-Type');
+    if (contentType) upstreamHeaders['Content-Type'] = contentType;
+
+    // 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)}/`;
+    }
+
+    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') {
+      body = await request.arrayBuffer();
+    }
+
+    const response = await fetch(targetUrl, {
+      method,
+      headers: upstreamHeaders,
+      body,
+      redirect: 'follow',
+    });
+
+    // For file downloads (GET), stream the response back
+    if (method === 'GET') {
+      const headers = new Headers();
+      headers.set('Content-Type', response.headers.get('Content-Type') || 'application/octet-stream');
+      const contentLength = response.headers.get('Content-Length');
+      if (contentLength) headers.set('Content-Length', contentLength);
+      headers.set('X-WebDAV-Request-URI', targetUrl);
+
+      return new NextResponse(response.body, {
+        status: response.status,
+        headers,
+      });
+    }
+
+    // For PROPFIND, return XML with the actual request URI for href comparison
+    if (method === 'PROPFIND') {
+      const text = await response.text();
+      const headers = new Headers();
+      headers.set('Content-Type', 'application/xml; charset=utf-8');
+      headers.set('X-WebDAV-Request-URI', targetUrl);
+
+      return new NextResponse(text, {
+        status: response.status,
+        headers,
+      });
+    }
+
+    // For other methods (MKCOL, DELETE, MOVE, COPY, PUT), return the status
+    return new NextResponse(null, {
+      status: response.status,
+    });
+  } catch (error) {
+    logger.error('WebDAV proxy error', { error: error instanceof Error ? error.message : 'Unknown' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
@@ -3,6 +3,8 @@
@custom-variant dark (&:where(.dark, .dark *));

 :root {
+  font-size: var(--font-size-base);
+
  --color-border: #e2e8f0;
  --color-input: #e2e8f0;
  --color-ring: #94a3b8;
@@ -16,11 +18,55 @@
  --color-muted-foreground: #64748b;
  --color-accent: #dbeafe;
  --color-accent-foreground: #1e40af;
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #ffffff;
+  --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;
  --transition-duration: 0.2s;
+
+  /* Density spacing variables (defaults = regular) */
+  --density-item-py: 12px;
+  --density-item-gap: 12px;
+  --density-header-py: 12px;
+  --density-card-p: 16px;
+  --density-sidebar-py: 4px;
 }

 .dark {
@@ -37,6 +83,43 @@
  --color-muted-foreground: #a3a3a3;
  --color-accent: #1e3a8a;
  --color-accent-foreground: #dbeafe;
+  --color-destructive: #ef4444;
+  --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 {
@@ -53,6 +136,31 @@
  --color-muted-foreground: var(--color-muted-foreground);
  --color-accent: var(--color-accent);
  --color-accent-foreground: var(--color-accent-foreground);
+  --color-destructive: var(--color-destructive);
+  --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);
 }

 * {
@@ -62,9 +170,13 @@
 body {
  background-color: var(--color-background);
  color: var(--color-foreground);
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: var(--font-size-base);
-  font-feature-settings: "rlig" 1, "calt" 1;
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+  font-feature-settings:
+    "rlig" 1,
+    "calt" 1;
 }

 /* Minimalist scrollbar */
@@ -92,14 +204,26 @@ body {
  min-width: 100%;
 }

+.email-content-text {
+  padding: 1rem 1.25rem;
+}
+
 .email-content {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-foreground);
  max-width: none;
  overflow-wrap: break-word;
  word-wrap: break-word;
+  padding: 1rem 1.25rem;
+}
+
+/* Remove padding for rich HTML emails with table-based layouts */
+.email-content:has(> table) {
+  padding: 0;
 }

 .email-content p {
@@ -126,46 +250,31 @@ 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;
+  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  overflow-x: auto;
  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-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,
@@ -179,10 +288,18 @@ body {
  color: var(--color-foreground);
 }

-.email-content h1 { font-size: 1.5rem; }
-.email-content h2 { font-size: 1.25rem; }
-.email-content h3 { font-size: 1.125rem; }
-.email-content h4 { font-size: 1rem; }
+.email-content h1 {
+  font-size: 1.5rem;
+}
+.email-content h2 {
+  font-size: 1.25rem;
+}
+.email-content h3 {
+  font-size: 1.125rem;
+}
+.email-content h4 {
+  font-size: 1rem;
+}

 .email-content ul,
 .email-content ol {
@@ -203,6 +320,26 @@ body {
  list-style-type: decimal;
 }

+/* Reply quoted HTML - preserves original inline styles/colors */
+.email-reply-quote {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  max-width: none;
+}
+
+.email-reply-quote p {
+  margin: 0.5rem 0;
+}
+
+.email-reply-quote img {
+  max-width: 100%;
+  height: auto;
+}
+
+.email-reply-quote a {
+  text-decoration: underline;
+}
+
 /* Only style tables that are actual data tables, not layout tables */
 .email-content table.data-table,
 .email-content table[border="1"] {
@@ -217,26 +354,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) */
@@ -258,32 +384,23 @@ 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 slide-in {
+@keyframes toast-enter {
  from {
-    transform: translateX(100%);
+    transform: translateX(calc(100% + 1.25rem));
    opacity: 0;
  }
  to {
@@ -292,10 +409,33 @@ body {
  }
 }

-.animate-slide-in {
-  animation: slide-in 0.3s ease-out;
+@keyframes toast-exit {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(calc(100% + 1.25rem));
+    opacity: 0;
+  }
 }

+@keyframes toast-progress {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+
+.toast-enter {
+  animation: toast-enter 0.32s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
+}
+
+.toast-exit {
+  animation: toast-exit 0.28s cubic-bezier(0.06, 0.71, 0.55, 1) forwards;
+}

 /* Mobile Responsive Utilities */

@@ -331,7 +471,9 @@ body {

 /* Smooth transitions for view switching */
 .view-transition {
-  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  transition:
+    transform 0.3s ease-in-out,
+    opacity 0.3s ease-in-out;
 }

 /* Hide scrollbar on mobile while keeping functionality */
@@ -387,6 +529,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) {
  *,
@@ -406,3 +579,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;
+}
@@ -0,0 +1,3 @@
+<?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>
@@ -14,10 +14,15 @@ const geistMono = Geist_Mono({
  subsets: ["latin"],
 });

-export const metadata: Metadata = {
-  title: "JMAP Webmail",
-  description: "Minimalist webmail client using JMAP protocol",
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const faviconUrl = process.env.FAVICON_URL;
+
+  return {
+    title: process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || "Webmail",
+    description: "Minimalist webmail client using JMAP protocol",
+    ...(faviconUrl ? { icons: { icon: faviconUrl } } : {}),
+  };
+}

 export default async function RootLayout({
  children,
@@ -26,10 +31,14 @@ 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>
+        {parentOrigin && (
+          <meta name="parent-origin" content={parentOrigin} />
+        )}
        <script
          nonce={nonce}
          suppressHydrationWarning
@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect } from "react";
+import { useAuthStore } from "@/stores/auth-store";
+
+export default function NotFound() {
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      // 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) {
+    // 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 (
+    <div className="min-h-screen flex items-center justify-center bg-background">
+      <div className="text-center max-w-md px-4">
+        <h1 className="text-4xl font-bold text-foreground mb-2">404</h1>
+        <p className="text-muted-foreground mb-6">This page could not be found.</p>
+        <a
+          href="/"
+          className="inline-flex items-center px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity"
+        >
+          Go home
+        </a>
+      </div>
+    </div>
+  );
+}
@@ -1,12 +1,12 @@
 "use client";

-import { useMemo } from "react";
+import { useMemo, useRef, useEffect, useCallback } from "react";
 import { useTranslations, useFormatter } from "next-intl";
-import { format, parseISO, isToday, isTomorrow } 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 { getEventEndDate } 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";

@@ -15,6 +15,8 @@ interface CalendarAgendaViewProps {
  events: CalendarEvent[];
  calendars: Calendar[];
  onSelectEvent: (event: CalendarEvent, anchorRect: DOMRect) => void;
+  onHoverEvent?: (event: CalendarEvent, anchorRect: DOMRect) => void;
+  onHoverLeave?: () => void;
  timeFormat?: "12h" | "24h";
 }

@@ -25,9 +27,12 @@ interface DayGroup {
 }

 export function CalendarAgendaView({
+  selectedDate,
  events,
  calendars,
  onSelectEvent,
+  onHoverEvent,
+  onHoverLeave,
  timeFormat = "24h",
 }: CalendarAgendaViewProps) {
  const t = useTranslations("calendar");
@@ -39,9 +44,12 @@ export function CalendarAgendaView({
    return map;
  }, [calendars]);

+  const todayRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
  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[] = [];
@@ -49,43 +57,54 @@ export function CalendarAgendaView({

    sorted.forEach((ev) => {
      try {
-        const start = new Date(ev.start);
-        const end = getEventEndDate(ev);
-        const startKey = format(start, "yyyy-MM-dd");
-        const endKey = format(end, "yyyy-MM-dd");
-
-        if (startKey === endKey || ev.showWithoutTime) {
-          let group = groupMap.get(startKey);
+        const { startDay, endDay } = getEventDayBounds(ev);
+        const cursor = new Date(startDay);
+        while (cursor <= endDay) {
+          const key = format(cursor, "yyyy-MM-dd");
+          let group = groupMap.get(key);
          if (!group) {
-            group = { date: start, dateKey: startKey, events: [] };
-            groupMap.set(startKey, group);
+            group = { date: new Date(cursor), dateKey: key, events: [] };
+            groupMap.set(key, group);
            groups.push(group);
          }
          group.events.push(ev);
-        } else {
-          const cursor = new Date(start);
-          cursor.setHours(0, 0, 0, 0);
-          const endDay = new Date(end);
-          endDay.setHours(0, 0, 0, 0);
-          while (cursor <= endDay) {
-            const key = format(cursor, "yyyy-MM-dd");
-            let group = groupMap.get(key);
-            if (!group) {
-              group = { date: new Date(cursor), dateKey: key, events: [] };
-              groupMap.set(key, group);
-              groups.push(group);
-            }
-            group.events.push(ev);
-            cursor.setDate(cursor.getDate() + 1);
-          }
+          cursor.setDate(cursor.getDate() + 1);
        }
      } catch { /* skip invalid dates */ }
    });

+    // Always include today's date in the groups so the view has a "Today" anchor
+    const todayKey = format(new Date(), "yyyy-MM-dd");
+    if (!groupMap.has(todayKey)) {
+      const todayGroup = { date: startOfDay(new Date()), dateKey: todayKey, events: [] as CalendarEvent[] };
+      groupMap.set(todayKey, todayGroup);
+      groups.push(todayGroup);
+    }
+
    groups.sort((a, b) => a.date.getTime() - b.date.getTime());
    return groups;
  }, [events]);

+  // Auto-scroll to today's section on mount and when selectedDate changes to today
+  const scrollToToday = useCallback(() => {
+    if (todayRef.current) {
+      todayRef.current.scrollIntoView({ block: "start" });
+    }
+  }, []);
+
+  useEffect(() => {
+    // Scroll to today on mount
+    const frame = requestAnimationFrame(scrollToToday);
+    return () => cancelAnimationFrame(frame);
+  }, [scrollToToday]);
+
+  useEffect(() => {
+    // Scroll to today when selectedDate changes to today
+    if (isToday(selectedDate)) {
+      scrollToToday();
+    }
+  }, [selectedDate, scrollToToday]);
+
  const formatDateHeader = (date: Date): string => {
    if (isToday(date)) return t("events.today_header");
    if (isTomorrow(date)) return t("events.tomorrow_header");
@@ -99,19 +118,10 @@ export function CalendarAgendaView({
    return format(date, "HH:mm");
  };

-  if (grouped.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center flex-1 text-muted-foreground">
-        <CalendarIcon className="w-12 h-12 mb-3 opacity-30" />
-        <p className="text-sm">{t("events.no_events")}</p>
-      </div>
-    );
-  }
-
  return (
-    <div className="flex-1 overflow-y-auto">
+    <div className="flex-1 overflow-y-auto" ref={scrollContainerRef}>
      {grouped.map((group) => (
-        <div key={group.dateKey}>
+        <div key={group.dateKey} ref={isToday(group.date) ? todayRef : undefined}>
          <div className="sticky top-0 bg-muted/80 backdrop-blur-sm px-4 py-2 border-b border-border">
            <span className={cn(
              "text-sm font-medium",
@@ -124,14 +134,19 @@ export function CalendarAgendaView({
            </span>
          </div>

+          {group.events.length === 0 ? (
+            <div className="px-4 py-6 text-center text-sm text-muted-foreground">
+              {t("events.no_events")}
+            </div>
+          ) : (
          <div className="divide-y divide-border">
            {group.events.map((ev) => {
-              const calId = Object.keys(ev.calendarIds)[0];
-              const calendar = calendarMap.get(calId);
+              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;
@@ -140,7 +155,10 @@ export function CalendarAgendaView({
                <button
                  key={ev.id}
                  onClick={(e) => onSelectEvent(ev, e.currentTarget.getBoundingClientRect())}
-                  className="w-full flex items-start gap-3 px-4 py-3 hover:bg-muted/50 transition-colors text-left"
+                  onMouseEnter={(e) => onHoverEvent?.(ev, e.currentTarget.getBoundingClientRect())}
+                  onMouseLeave={() => onHoverLeave?.()}
+                  className="w-full flex items-start px-4 hover:bg-muted/50 transition-colors text-left"
+                  style={{ gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
                >
                  <div className="flex flex-col items-center pt-0.5 min-w-[60px]">
                    {ev.showWithoutTime ? (
@@ -186,6 +204,7 @@ export function CalendarAgendaView({
              );
            })}
          </div>
+          )}
        </div>
      ))}
    </div>
@@ -2,21 +2,29 @@

 import { useMemo, useEffect, useRef, useState } from "react";
 import { useTranslations, useFormatter } from "next-intl";
-import { format, isToday, parseISO } from "date-fns";
+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 { getEventEndDate, layoutOverlappingEvents, formatSnapTime } 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";

 interface CalendarDayViewProps {
  selectedDate: Date;
  events: CalendarEvent[];
  calendars: Calendar[];
  onSelectEvent: (event: CalendarEvent, anchorRect: DOMRect) => void;
+  onHoverEvent?: (event: CalendarEvent, anchorRect: DOMRect) => void;
+  onHoverLeave?: () => void;
  onCreateAtTime: (date: Date, endDate?: Date) => void;
  timeFormat?: "12h" | "24h";
+  isMobile?: boolean;
+  pendingPreview?: PendingEventPreview | null;
+  tasks?: CalendarTask[];
+  onToggleTaskComplete?: (task: CalendarTask) => void;
 }

 const HOUR_HEIGHT = 64;
@@ -27,8 +35,14 @@ export function CalendarDayView({
  events,
  calendars,
  onSelectEvent,
+  onHoverEvent,
+  onHoverLeave,
  onCreateAtTime,
  timeFormat = "24h",
+  isMobile,
+  pendingPreview,
+  tasks,
+  onToggleTaskComplete,
 }: CalendarDayViewProps) {
  const t = useTranslations("calendar");
  const intlFormatter = useFormatter();
@@ -46,22 +60,29 @@ export function CalendarDayView({
    const allDay: CalendarEvent[] = [];
    events.forEach((ev) => {
      try {
-        const start = new Date(ev.start);
-        const end = getEventEndDate(ev);
-        const startDay = new Date(start); startDay.setHours(0, 0, 0, 0);
-        const endDay = new Date(end); endDay.setHours(0, 0, 0, 0);
+        const { startDay, endDay } = getEventDayBounds(ev);
        const selDay = new Date(selectedDate); selDay.setHours(0, 0, 0, 0);

        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();
@@ -106,47 +127,90 @@ 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="px-4 py-3 border-b border-border">
-        <h3 className={cn("text-lg font-semibold", today && "text-primary")}>
-          {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
+            ? intlFormatter.dateTime(selectedDate, { weekday: "short", month: "short", day: "numeric" })
+            : intlFormatter.dateTime(selectedDate, { weekday: "long", month: "long", day: "numeric", year: "numeric" })
+          }
        </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 = Object.keys(ev.calendarIds)[0];
-              return (
-                <EventCard
-                  key={ev.id}
-                  event={ev}
-                  calendar={calendarMap.get(calId)}
-                  variant="chip"
-                  onClick={(rect) => onSelectEvent(ev, rect)}
-                />
-              );
-            })}
-          </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="w-16 flex-shrink-0">
+          <div className={cn("flex-shrink-0", isMobile ? "w-10" : "w-16")}>
            {HOURS.map((h) => (
              <div
                key={h}
-                className="relative text-muted-foreground text-right pr-3"
+                className="relative text-muted-foreground text-right pr-2"
                style={{ height: HOUR_HEIGHT }}
              >
                {h > 0 && (
-                  <span className="absolute top-0 right-3 -translate-y-1/2 text-xs leading-none">
+                  <span className={cn("absolute top-0 right-2 -translate-y-1/2 leading-none", isMobile ? "text-[10px]" : "text-xs")}>
                    {formatHour(h)}
                  </span>
                )}
@@ -177,14 +241,12 @@ 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 = Object.keys(ev.calendarIds)[0];
+              const calId = getPrimaryCalendarId(ev);
              const leftPct = (column / totalColumns) * 100;
              const widthPct = (1 / totalColumns) * 100;

@@ -197,9 +259,11 @@ export function CalendarDayView({
                >
                  <EventCard
                    event={ev}
-                    calendar={calendarMap.get(calId)}
+                    calendar={calId ? calendarMap.get(calId) : undefined}
                    variant="block"
                    onClick={(rect) => onSelectEvent(ev, rect)}
+                    onMouseEnter={(rect) => onHoverEvent?.(ev, rect)}
+                    onMouseLeave={onHoverLeave}
                    draggable
                  />
                  <div
@@ -222,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>
            )}
@@ -264,6 +328,34 @@ export function CalendarDayView({
                </div>
              </div>
            )}
+
+            {pendingPreview && !pendingPreview.allDay && isSameDay(pendingPreview.start, selectedDate) && (
+              (() => {
+                const startMin = pendingPreview.start.getHours() * 60 + pendingPreview.start.getMinutes();
+                const endMin = pendingPreview.end.getHours() * 60 + pendingPreview.end.getMinutes();
+                const durationMin = Math.max(15, endMin - startMin);
+                const cal = calendars.find(c => c.id === pendingPreview.calendarId);
+                const color = cal?.color || "hsl(var(--primary))";
+                return (
+                  <div
+                    className="absolute left-2 right-2 z-10 rounded-md pointer-events-none border-2 border-dashed overflow-hidden"
+                    style={{
+                      top: (startMin / 60) * HOUR_HEIGHT,
+                      height: Math.max(24, (durationMin / 60) * HOUR_HEIGHT),
+                      borderColor: color,
+                      backgroundColor: `${color}10`,
+                    }}
+                  >
+                    <div className="text-[10px] font-medium px-1.5 py-0.5 truncate" style={{ color }}>
+                      {pendingPreview.title}
+                    </div>
+                    <div className="text-[9px] px-1.5 opacity-70" style={{ color }}>
+                      {formatSnapTime(startMin, timeFormat)} – {formatSnapTime(startMin + durationMin, timeFormat)}
+                    </div>
+                  </div>
+                );
+              })()
+            )}
          </div>
        </div>
      </div>
@@ -8,10 +8,11 @@ import {
 } from "date-fns";
 import { cn } from "@/lib/utils";
 import { EventCard } from "./event-card";
-import { getEventEndDate } from "@/lib/calendar-utils";
+import { buildWeekSegments, getEventDayBounds, getPrimaryCalendarId } from "@/lib/calendar-utils";
 import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
 import { useAuthStore } from "@/stores/auth-store";
 import { useCalendarStore } from "@/stores/calendar-store";
+import type { PendingEventPreview } from "./event-modal";
 import { toast } from "@/stores/toast-store";

 interface CalendarMonthViewProps {
@@ -20,7 +21,12 @@ interface CalendarMonthViewProps {
  calendars: Calendar[];
  onSelectDate: (date: Date) => void;
  onSelectEvent: (event: CalendarEvent, anchorRect: DOMRect) => void;
+  onHoverEvent?: (event: CalendarEvent, anchorRect: DOMRect) => void;
+  onHoverLeave?: () => void;
+  onCreateAtTime?: (date: Date) => void;
  firstDayOfWeek?: number;
+  isMobile?: boolean;
+  pendingPreview?: PendingEventPreview | null;
 }

 export function CalendarMonthView({
@@ -29,7 +35,12 @@ export function CalendarMonthView({
  calendars,
  onSelectDate,
  onSelectEvent,
+  onHoverEvent,
+  onHoverLeave,
+  onCreateAtTime,
  firstDayOfWeek = 1,
+  isMobile,
+  pendingPreview,
 }: CalendarMonthViewProps) {
  const t = useTranslations("calendar");
  const intlFormatter = useFormatter();
@@ -53,12 +64,7 @@ export function CalendarMonthView({
    const map = new Map<string, CalendarEvent[]>();
    events.forEach((e) => {
      try {
-        const start = new Date(e.start);
-        const end = getEventEndDate(e);
-        const startDay = new Date(start);
-        startDay.setHours(0, 0, 0, 0);
-        const endDay = new Date(end);
-        endDay.setHours(0, 0, 0, 0);
+        const { startDay, endDay } = getEventDayBounds(e);

        const cursor = new Date(startDay);
        while (cursor <= endDay) {
@@ -85,6 +91,14 @@ export function CalendarMonthView({
    return result;
  }, [days]);

+  const weekSegments = useMemo(() => {
+    return weeks.map((week) => {
+      const segments = buildWeekSegments(events, week);
+      const rowCount = segments.reduce((maxRows, segment) => Math.max(maxRows, segment.row + 1), 0);
+      return { week, segments, rowCount };
+    });
+  }, [events, weeks]);
+
  const [dropDayKey, setDropDayKey] = useState<string | null>(null);

  const handleCellDragOver = useCallback((e: DragEvent<HTMLDivElement>, dayKey: string) => {
@@ -107,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 {
@@ -125,22 +140,28 @@ export function CalendarMonthView({
    <div className="flex flex-col flex-1 overflow-hidden" role="grid" aria-label={intlFormatter.dateTime(selectedDate, { month: "long", year: "numeric" })}>
      <div className="grid grid-cols-7 border-b border-border" role="row">
        {dayHeaders.map((d) => (
-          <div key={d} role="columnheader" className="text-center text-xs font-medium text-muted-foreground py-2 border-r border-border last:border-r-0">
-            {t(`days.${d}`)}
+          <div key={d} role="columnheader" className={cn(
+            "text-center text-xs font-medium text-muted-foreground py-2 border-r border-border last:border-r-0",
+            isMobile && "py-1.5 text-[11px]"
+          )}>
+            {isMobile ? t(`days.${d}`).slice(0, 2) : t(`days.${d}`)}
          </div>
        ))}
      </div>

      <div className="flex-1 flex flex-col overflow-y-auto">
-        {weeks.map((week, wi) => (
-          <div key={wi} className="grid grid-cols-7 flex-1 min-h-[100px] border-b border-border last:border-b-0" role="row">
+        {weekSegments.map(({ week, segments, rowCount }, wi) => (
+          <div key={wi} className={cn(
+            "relative flex-1 border-b border-border last:border-b-0",
+            isMobile ? "min-h-[52px]" : "min-h-[100px]"
+          )} role="row" style={isMobile ? undefined : { minHeight: Math.max(100, 34 + rowCount * 22 + 8) }}>
+            <div className="grid grid-cols-7 h-full">
            {week.map((day) => {
              const inMonth = isSameMonth(day, selectedDate);
              const selected = isSameDay(day, selectedDate);
              const today = isToday(day);
              const key = format(day, "yyyy-MM-dd");
              const dayEvents = eventsByDate.get(key) || [];
-              const maxVisible = 3;
              const fullDateLabel = intlFormatter.dateTime(day, { weekday: "long", month: "long", day: "numeric", year: "numeric" });

              return (
@@ -150,20 +171,23 @@ export function CalendarMonthView({
                  aria-selected={selected}
                  aria-label={fullDateLabel}
                  onClick={() => onSelectDate(day)}
+                  onDoubleClick={() => onCreateAtTime?.(day)}
                  onDragOver={(e) => handleCellDragOver(e, key)}
                  onDragLeave={handleCellDragLeave}
                  onDrop={(e) => handleCellDrop(e, day)}
                  className={cn(
-                    "border-r border-border last:border-r-0 p-1 cursor-pointer transition-colors",
+                    "border-r border-border last:border-r-0 p-1 cursor-pointer transition-colors touch-manipulation",
                    !inMonth && "bg-muted/30",
                    "hover:bg-muted/50",
+                    selected && isMobile && "bg-primary/10",
                    dropDayKey === key && "ring-2 ring-inset ring-primary bg-primary/10"
                  )}
                >
                  <div className="flex items-center justify-center mb-0.5">
                    <span
                      className={cn(
-                        "inline-flex items-center justify-center w-6 h-6 text-xs rounded-full",
+                        "inline-flex items-center justify-center rounded-full",
+                        isMobile ? "w-7 h-7 text-xs" : "w-6 h-6 text-xs",
                        today && !selected && "bg-primary text-primary-foreground font-bold",
                        selected && "bg-primary text-primary-foreground font-bold",
                        !inMonth && !selected && !today && "text-muted-foreground/50",
@@ -173,29 +197,95 @@ export function CalendarMonthView({
                      {format(day, "d")}
                    </span>
                  </div>
-                  <div className="space-y-0.5">
-                    {dayEvents.slice(0, maxVisible).map((ev) => {
-                      const calId = Object.keys(ev.calendarIds)[0];
-                      return (
-                        <EventCard
-                          key={ev.id}
-                          event={ev}
-                          calendar={calendarMap.get(calId)}
-                          variant="chip"
-                          onClick={(rect) => onSelectEvent(ev, rect)}
-                          draggable
+                  {isMobile ? (
+                    <div className="flex items-center justify-center gap-0.5 flex-wrap">
+                      {dayEvents.slice(0, 3).map((ev) => {
+                        const calId = getPrimaryCalendarId(ev);
+                        const cal = calId ? calendarMap.get(calId) : undefined;
+                        const evColor = ev.color || cal?.color || "#3b82f6";
+                        return (
+                          <span
+                            key={ev.id}
+                            className="w-1.5 h-1.5 rounded-full"
+                            style={{ backgroundColor: evColor }}
+                          />
+                        );
+                      })}
+                      {dayEvents.length > 3 && (
+                        <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/40" />
+                      )}
+                      {pendingPreview && isSameDay(pendingPreview.start, day) && (
+                        <span
+                          className="w-1.5 h-1.5 rounded-full border border-dashed"
+                          style={{ borderColor: calendarMap.get(pendingPreview.calendarId)?.color || "#3b82f6" }}
                        />
-                      );
-                    })}
-                    {dayEvents.length > maxVisible && (
-                      <div className="text-[10px] text-muted-foreground px-1">
-                        {t("events.more", { count: dayEvents.length - maxVisible })}
-                      </div>
-                    )}
-                  </div>
+                      )}
+                    </div>
+                  ) : null}
                </div>
              );
            })}
+            </div>
+
+            {!isMobile && pendingPreview && (() => {
+              const previewDayIdx = week.findIndex(d => isSameDay(d, pendingPreview.start));
+              if (previewDayIdx === -1) return null;
+              const previewRow = rowCount;
+              const cal = calendarMap.get(pendingPreview.calendarId);
+              const color = cal?.color || "#3b82f6";
+              return (
+                <div className="absolute inset-x-0 pointer-events-none" style={{ top: 30 }}>
+                  <div
+                    className="absolute px-0.5"
+                    style={{
+                      left: `calc(${(previewDayIdx / 7) * 100}% + 1px)`,
+                      width: `calc(${(1 / 7) * 100}% - 2px)`,
+                      top: previewRow * 22,
+                      height: 20,
+                    }}
+                  >
+                    <div
+                      className="h-full rounded text-[10px] leading-[20px] font-medium px-1.5 truncate border-2 border-dashed"
+                      style={{ borderColor: color, color, backgroundColor: `${color}10` }}
+                    >
+                      {pendingPreview.title}
+                    </div>
+                  </div>
+                </div>
+              );
+            })()}
+
+            {!isMobile && segments.length > 0 && (
+              <div className="absolute inset-x-0 pointer-events-none" style={{ top: 30 }}>
+                {segments.map((segment) => {
+                  const calId = getPrimaryCalendarId(segment.event);
+                  return (
+                    <div
+                      key={`${segment.event.id}-${segment.startIndex}-${segment.row}`}
+                      className="absolute px-0.5 pointer-events-auto"
+                      style={{
+                        left: `calc(${(segment.startIndex / 7) * 100}% + 1px)`,
+                        width: `calc(${(segment.span / 7) * 100}% - 2px)`,
+                        top: segment.row * 22,
+                        height: 20,
+                      }}
+                    >
+                      <EventCard
+                        event={segment.event}
+                        calendar={calId ? calendarMap.get(calId) : undefined}
+                        variant="span"
+                        continuesBefore={segment.continuesBefore}
+                        continuesAfter={segment.continuesAfter}
+                        onClick={(rect) => onSelectEvent(segment.event, rect)}
+                        onMouseEnter={(rect) => onHoverEvent?.(segment.event, rect)}
+                        onMouseLeave={onHoverLeave}
+                        draggable
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            )}
          </div>
        ))}
      </div>
@@ -1,57 +1,269 @@
 "use client";

+import { useState, useRef, useEffect, useMemo } from "react";
 import { useTranslations } from "next-intl";
-import { cn } from "@/lib/utils";
+import { Globe, ListTodo, Pencil, RefreshCw, Share2, Trash2 } 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 { toast } from "@/stores/toast-store";
+import type { IJMAPClient } from '@/lib/jmap/client-interface';

 interface CalendarSidebarPanelProps {
  calendars: Calendar[];
  selectedCalendarIds: string[];
  onToggleVisibility: (id: string) => void;
+  onColorChange?: (calendarId: string, color: string) => void;
+  onSubscribe?: () => void;
+  onEditSubscription?: (subscriptionId: string) => void;
+  client?: IJMAPClient | null;
 }

 export function CalendarSidebarPanel({
  calendars,
  selectedCalendarIds,
  onToggleVisibility,
+  onColorChange,
+  onSubscribe,
+  onEditSubscription,
+  client,
 }: CalendarSidebarPanelProps) {
  const t = useTranslations("calendar");
+  const tSub = useTranslations("calendar.subscription");
+  const isSubscriptionCalendar = useCalendarStore((s) => s.isSubscriptionCalendar);
+  const icalSubscriptions = useCalendarStore((s) => s.icalSubscriptions);
+  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);

-  if (calendars.length === 0) return null;
+  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);
+  const [refreshingSubId, setRefreshingSubId] = useState<string | null>(null);
+  const colorPickerRef = useRef<HTMLDivElement>(null);
+  const contextMenuRef = useRef<HTMLDivElement>(null);
+
+  const personalCalendars = useMemo(() => calendars.filter(c => !c.isShared), [calendars]);
+  const sharedAccountGroups = useMemo(() => {
+    const shared = calendars.filter(c => c.isShared);
+    const groups = new Map<string, { accountName: string; calendars: Calendar[] }>();
+    for (const cal of shared) {
+      const key = cal.accountId || cal.accountName || cal.id;
+      if (!groups.has(key)) {
+        groups.set(key, { accountName: cal.accountName || key, calendars: [] });
+      }
+      groups.get(key)!.calendars.push(cal);
+    }
+    return Array.from(groups.values());
+  }, [calendars]);
+
+  useEffect(() => {
+    if (!colorPickerId && !contextMenuCalId) return;
+    const handleClick = (e: MouseEvent) => {
+      if (colorPickerRef.current && !colorPickerRef.current.contains(e.target as Node)) {
+        setColorPickerId(null);
+      }
+      if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
+        setContextMenuCalId(null);
+      }
+    };
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setColorPickerId(null);
+        setContextMenuCalId(null);
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    document.addEventListener('keydown', handleKey);
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+      document.removeEventListener('keydown', handleKey);
+    };
+  }, [colorPickerId, contextMenuCalId]);
+
+  const getSubscriptionForCalendar = (calendarId: string) => {
+    return icalSubscriptions.find(s => s.calendarId === calendarId);
+  };
+
+  const handleRefreshSubscription = async (subId: string) => {
+    if (!client) return;
+    setRefreshingSubId(subId);
+    setContextMenuCalId(null);
+    try {
+      await refreshICalSubscription(client, subId);
+      toast.success(tSub('refresh_success'));
+    } catch {
+      toast.error(tSub('refresh_error'));
+    } finally {
+      setRefreshingSubId(null);
+    }
+  };
+
+  const handleUnsubscribe = async (subId: string) => {
+    if (!client) return;
+    setContextMenuCalId(null);
+    try {
+      await removeICalSubscription(client, subId);
+      toast.success(tSub('deleted'));
+    } catch {
+      toast.error(tSub('delete_error'));
+    }
+  };
+
+  if (calendars.length === 0 && !onSubscribe) return null;
+
+  const renderCalendarItem = (cal: Calendar) => {
+    const isVisible = selectedCalendarIds.includes(cal.id);
+    const color = cal.color || "#3b82f6";
+
+    return (
+      <div key={cal.id} className="relative">
+        <button
+          onClick={() => onToggleVisibility(cal.id)}
+          onContextMenu={(e) => {
+            e.preventDefault();
+            if (isSubscriptionCalendar(cal.id) && client) {
+              setContextMenuCalId(contextMenuCalId === cal.id ? null : cal.id);
+              setColorPickerId(null);
+            } else if (onColorChange) {
+              setColorPickerId(colorPickerId === cal.id ? null : cal.id);
+              setContextMenuCalId(null);
+            }
+          }}
+          className={cn(
+            "flex items-center gap-2 w-full px-1.5 py-1 rounded-md text-sm transition-colors duration-150",
+            "hover:bg-muted"
+          )}
+        >
+          <span
+            className={cn(
+              "w-3 h-3 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>
+          {isSubscriptionCalendar(cal.id) && (
+            <>
+              <Globe className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+              {refreshingSubId === getSubscriptionForCalendar(cal.id)?.id && (
+                <RefreshCw className="w-3 h-3 text-muted-foreground flex-shrink-0 animate-spin" />
+              )}
+            </>
+          )}
+        </button>
+
+        {/* Subscription context menu on right-click */}
+        {contextMenuCalId === cal.id && isSubscriptionCalendar(cal.id) && client && (() => {
+          const sub = getSubscriptionForCalendar(cal.id);
+          if (!sub) return null;
+          return (
+            <div
+              ref={contextMenuRef}
+              className="absolute left-6 top-full mt-1 z-50 bg-background border border-border rounded-lg shadow-lg py-1 w-48"
+            >
+              <button
+                onClick={() => {
+                  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"
+              >
+                <RefreshCw className="w-3.5 h-3.5" />
+                {tSub('refresh')}
+              </button>
+              <button
+                onClick={() => handleUnsubscribe(sub.id)}
+                className="flex items-center gap-2 w-full px-3 py-1.5 text-sm text-destructive hover:bg-destructive/10 transition-colors"
+              >
+                <Trash2 className="w-3.5 h-3.5" />
+                {tSub('unsubscribe')}
+              </button>
+              {sub.lastRefreshed && (
+                <div className="px-3 py-1.5 text-xs text-muted-foreground border-t border-border mt-1 pt-1">
+                  {tSub('last_refreshed', { time: formatDateTime(sub.lastRefreshed, timeFormat, { month: 'short', day: 'numeric', year: 'numeric' }) })}
+                </div>
+              )}
+            </div>
+          );
+        })()}
+
+        {/* Color picker popover on right-click */}
+        {colorPickerId === cal.id && onColorChange && (
+          <div
+            ref={colorPickerRef}
+            className="absolute left-6 top-full mt-1 z-50 bg-background border border-border rounded-lg shadow-lg p-3 w-56"
+          >
+            <p className="text-xs font-medium text-muted-foreground mb-2">{t("management.change_color")}</p>
+            <CalendarColorPicker
+              value={color}
+              onChange={(c) => {
+                onColorChange(cal.id, c);
+                setColorPickerId(null);
+              }}
+              allowCustom
+            />
+          </div>
+        )}
+      </div>
+    );
+  };

  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>
      <div className="space-y-0.5">
-        {calendars.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-1.5 py-1 rounded text-sm transition-colors",
-                "hover:bg-muted"
-              )}
-            >
-              <span
-                className={cn(
-                  "w-3 h-3 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>
-          );
-        })}
+        {personalCalendars.map(renderCalendarItem)}
      </div>
+
+      {sharedAccountGroups.map((group) => (
+        <div key={group.accountName} className="mt-4">
+          <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1 flex items-center gap-1.5">
+            <Share2 className="w-3 h-3" />
+            {group.accountName}
+          </h3>
+          <div className="space-y-0.5">
+            {group.calendars.map(renderCalendarItem)}
+          </div>
+        </div>
+      ))}
    </div>
  );
 }
@@ -1,11 +1,13 @@
 "use client";

+import { useState, useRef, useEffect } from "react";
 import { useTranslations, useFormatter } from "next-intl";
 import { Button } from "@/components/ui/button";
-import { ChevronLeft, ChevronRight, Plus, Upload } 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";
+import type { Calendar } from "@/lib/jmap/types";

 interface CalendarToolbarProps {
  selectedDate: Date;
@@ -16,9 +18,14 @@ interface CalendarToolbarProps {
  onViewModeChange: (mode: CalendarViewMode) => void;
  onCreateEvent: () => void;
  onImport?: () => void;
+  onSubscribe?: () => void;
  isMobile?: boolean;
  firstDayOfWeek?: number;
  onNavigateBack?: () => void;
+  calendars?: Calendar[];
+  selectedCalendarIds?: string[];
+  onToggleVisibility?: (id: string) => void;
+  enableCalendarTasks?: boolean;
 }

 export function CalendarToolbar({
@@ -30,20 +37,46 @@ export function CalendarToolbar({
  onViewModeChange,
  onCreateEvent,
  onImport,
+  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);
+
+  useEffect(() => {
+    if (!showCalendarDropdown) return;
+    function handleClickOutside(e: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setShowCalendarDropdown(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showCalendarDropdown]);

  const getDateLabel = (): string => {
    switch (viewMode) {
      case "month":
-        return formatter.dateTime(selectedDate, { month: "long", year: "numeric" });
+        return isMobile
+          ? formatter.dateTime(selectedDate, { month: "short", year: "numeric" })
+          : formatter.dateTime(selectedDate, { month: "long", year: "numeric" });
      case "week": {
        const ws = startOfWeek(selectedDate, { weekStartsOn: firstDayOfWeek as 0 | 1 });
        const we = addDays(ws, 6);
+        if (isMobile) {
+          return `${formatter.dateTime(ws, { month: "short", day: "numeric" })} – ${formatter.dateTime(we, { day: "numeric" })}`;
+        }
        const sameMonth = ws.getMonth() === we.getMonth();
        if (sameMonth) {
          return `${formatter.dateTime(ws, { month: "short", day: "numeric" })} – ${formatter.dateTime(we, { day: "numeric" })}, ${we.getFullYear()}`;
@@ -51,29 +84,197 @@ export function CalendarToolbar({
        return `${formatter.dateTime(ws, { month: "short", day: "numeric" })} – ${formatter.dateTime(we, { month: "short", day: "numeric" })}, ${we.getFullYear()}`;
      }
      case "day":
-        return formatter.dateTime(selectedDate, { weekday: "long", month: "long", day: "numeric", year: "numeric" });
+        return isMobile
+          ? formatter.dateTime(selectedDate, { weekday: "short", month: "short", day: "numeric" })
+          : formatter.dateTime(selectedDate, { weekday: "long", month: "long", day: "numeric", year: "numeric" });
      case "agenda":
-        return formatter.dateTime(selectedDate, { month: "long", year: "numeric" });
+        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);
+
+
+  useEffect(() => {
+    if (!showImportDropdown) return;
+    function handleClickOutside(e: MouseEvent) {
+      if (importDropdownRef.current && !importDropdownRef.current.contains(e.target as Node)) {
+        setShowImportDropdown(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showImportDropdown]);
+
+
+
  return (
-    <div className="flex items-center gap-2 px-4 py-3 border-b border-border flex-wrap">
-      <div className="flex items-center gap-1">
-        <button onClick={onPrev} className="p-1.5 rounded hover:bg-muted transition-colors" aria-label={t("nav_prev")}>
-          <ChevronLeft className="w-4 h-4" />
-        </button>
-        <span className="text-sm font-medium min-w-[140px] text-center">
-          {getDateLabel()}
-        </span>
-        <button onClick={onNext} className="p-1.5 rounded hover:bg-muted transition-colors" aria-label={t("nav_next")}>
-          <ChevronRight className="w-4 h-4" />
-        </button>
-      </div>
+    <div className={cn("border-b border-border", !isMobile && "flex items-center gap-2 px-4 py-3")}>
+      {/* ── MOBILE TOOLBAR ── */}
+      {isMobile && (
+        <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>
+
+          {/* 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>
+
+            {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">
+                      {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}
+                          </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>
+      )}
+
+      {/* ── 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>
+          <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>
+      )}
+
+
+

-      <Button variant="outline" size="sm" onClick={onToday}>
-        {t("views.today")}
-      </Button>

      <div className="flex-1" />

@@ -97,17 +298,44 @@ export function CalendarToolbar({
        </div>
      )}

-      {onImport && (
-        <Button variant="outline" size="sm" onClick={onImport}>
-          <Upload className="w-4 h-4 mr-1" />
-          {!isMobile && t("import.title")}
-        </Button>
+      {(onImport || onSubscribe) && !isMobile && (
+        <div className="relative" ref={importDropdownRef}>
+          <Button variant="outline" size="sm" onClick={() => setShowImportDropdown((v) => !v)}>
+            <Upload className="w-4 h-4 mr-1" />
+            {t("import.title")}
+            <ChevronDown className="w-3 h-3 ml-1" />
+          </Button>
+          {showImportDropdown && (
+            <div className="absolute top-full right-0 mt-1 z-50 bg-background border border-border rounded-lg shadow-lg p-1 min-w-[180px]">
+              {onImport && (
+                <button
+                  onClick={() => { onImport(); setShowImportDropdown(false); }}
+                  className="flex items-center gap-2 w-full px-3 py-2 rounded-md text-sm hover:bg-muted transition-colors text-foreground"
+                >
+                  <Upload className="w-4 h-4" />
+                  {t("import.title")}
+                </button>
+              )}
+              {onSubscribe && (
+                <button
+                  onClick={() => { onSubscribe(); setShowImportDropdown(false); }}
+                  className="flex items-center gap-2 w-full px-3 py-2 rounded-md text-sm hover:bg-muted transition-colors text-foreground"
+                >
+                  <Globe className="w-4 h-4" />
+                  {t("subscription.title")}
+                </button>
+              )}
+            </div>
+          )}
+        </div>
      )}

-      <Button size="sm" onClick={onCreateEvent}>
-        <Plus className="w-4 h-4 mr-1" />
-        {!isMobile && t("events.create")}
-      </Button>
+      {!isMobile && (
+        <Button size="sm" onClick={onCreateEvent} data-tour="create-event-button">
+          <Plus className="w-4 h-4 mr-1" />
+          {t("events.create")}
+        </Button>
+      )}
    </div>
  );
 }
@@ -6,11 +6,13 @@ 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 { getEventEndDate, layoutOverlappingEvents, formatSnapTime } 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";

 interface CalendarWeekViewProps {
  selectedDate: Date;
@@ -18,9 +20,15 @@ interface CalendarWeekViewProps {
  calendars: Calendar[];
  onSelectDate: (date: Date) => void;
  onSelectEvent: (event: CalendarEvent, anchorRect: DOMRect) => void;
+  onHoverEvent?: (event: CalendarEvent, anchorRect: DOMRect) => void;
+  onHoverLeave?: () => void;
  onCreateAtTime: (date: Date, endDate?: Date) => void;
  firstDayOfWeek?: number;
  timeFormat?: "12h" | "24h";
+  isMobile?: boolean;
+  pendingPreview?: PendingEventPreview | null;
+  tasks?: CalendarTask[];
+  onToggleTaskComplete?: (task: CalendarTask) => void;
 }

 const HOUR_HEIGHT = 60;
@@ -32,13 +40,20 @@ export function CalendarWeekView({
  calendars,
  onSelectDate,
  onSelectEvent,
+  onHoverEvent,
+  onHoverLeave,
  onCreateAtTime,
  firstDayOfWeek = 1,
  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(() => {
@@ -52,25 +67,17 @@ export function CalendarWeekView({
    return map;
  }, [calendars]);

-  const { timedEvents, allDayEvents } = useMemo(() => {
+  const timedEvents = useMemo(() => {
    const timed: Map<string, CalendarEvent[]> = new Map();
-    const allDay: Map<string, CalendarEvent[]> = new Map();

    events.forEach((ev) => {
      try {
-        const start = new Date(ev.start);
-        const end = getEventEndDate(ev);
-        const startDay = new Date(start); startDay.setHours(0, 0, 0, 0);
-        const endDay = new Date(end); endDay.setHours(0, 0, 0, 0);
+        const { startDay, endDay } = getEventDayBounds(ev);

        const cursor = new Date(startDay);
        while (cursor <= endDay) {
          const key = format(cursor, "yyyy-MM-dd");
-          if (ev.showWithoutTime) {
-            const arr = allDay.get(key) || [];
-            arr.push(ev);
-            allDay.set(key, arr);
-          } else {
+          if (!ev.showWithoutTime && !isTimedEventFullDayOnDate(ev, cursor)) {
            const arr = timed.get(key) || [];
            arr.push(ev);
            timed.set(key, arr);
@@ -79,21 +86,73 @@ export function CalendarWeekView({
        }
      } catch { /* skip invalid dates */ }
    });
-    return { timedEvents: timed, allDayEvents: allDay };
+    return timed;
  }, [events]);

-  const hasAllDay = useMemo(() => {
-    return weekDays.some(day => {
+  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");
-      return (allDayEvents.get(key) || []).length > 0;
-    });
-  }, [weekDays, allDayEvents]);
+      const count = tasksByDay.get(key)?.length ?? 0;
+      if (count > max) max = count;
+    }
+    return max;
+  }, [tasksByDay, weekDays]);
+
+  const hasAllDay = useMemo(() => {
+    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(() => {
@@ -132,41 +191,112 @@ export function CalendarWeekView({
    return format(new Date(2000, 0, 1, h), "HH:mm");
  };

+  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="w-14 flex-shrink-0 text-[10px] text-muted-foreground p-1 text-right">
+          <div
+            className={cn("flex-shrink-0 text-[10px] text-muted-foreground p-1 text-right", isMobile ? "w-10 sticky left-0 z-10 bg-background" : "w-14")}
+            style={{ minHeight: Math.max(28, (allDayRowCount + taskRowCount) * 24 + 4) }}
+          >
            {t("events.all_day")}
          </div>
-          <div className="flex-1 grid grid-cols-7 gap-px bg-border">
-            {weekDays.map((day) => {
-              const key = format(day, "yyyy-MM-dd");
-              const dayAllDay = allDayEvents.get(key) || [];
-              return (
-                <div key={key} className="bg-background p-0.5 min-h-[28px]">
-                  {dayAllDay.map((ev) => {
-                    const calId = Object.keys(ev.calendarIds)[0];
+          <div
+            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]" />
+            ))}
+
+            <div className="absolute inset-0 pointer-events-none">
+              {allDaySegments.map((segment) => {
+                const calId = getPrimaryCalendarId(segment.event);
+                return (
+                  <div
+                    key={`${segment.event.id}-${segment.startIndex}-${segment.row}`}
+                    className="absolute px-0.5 pointer-events-auto"
+                    style={{
+                      left: `calc(${(segment.startIndex / colCount) * 100}% + 1px)`,
+                      width: `calc(${(segment.span / colCount) * 100}% - 2px)`,
+                      top: segment.row * 24 + 2,
+                      height: 20,
+                    }}
+                  >
+                    <EventCard
+                      event={segment.event}
+                      calendar={calId ? calendarMap.get(calId) : undefined}
+                      variant="span"
+                      continuesBefore={segment.continuesBefore}
+                      continuesAfter={segment.continuesAfter}
+                      onClick={(rect) => onSelectEvent(segment.event, rect)}
+                      onMouseEnter={(rect) => onHoverEvent?.(segment.event, rect)}
+                      onMouseLeave={onHoverLeave}
+                    />
+                  </div>
+                );
+              })}
+            </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 (
-                      <EventCard
-                        key={ev.id}
-                        event={ev}
-                        calendar={calendarMap.get(calId)}
-                        variant="chip"
-                        onClick={(rect) => onSelectEvent(ev, rect)}
-                      />
+                      <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>
      )}

      <div className="flex border-b border-border" role="row">
-        <div className="w-14 flex-shrink-0" />
-        <div className="flex-1 grid grid-cols-7 border-l border-border">
+        <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);
@@ -178,7 +308,7 @@ export function CalendarWeekView({
                role="columnheader"
                aria-label={fullLabel}
                className={cn(
-                  "text-center py-2 text-sm border-r border-border last:border-r-0 transition-colors",
+                  "text-center py-2 text-sm border-r border-border last:border-r-0 transition-colors touch-manipulation",
                  "hover:bg-muted/50",
                  todayCol && "font-bold",
                )}
@@ -199,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="w-14 flex-shrink-0">
+          <div className={cn("flex-shrink-0", isMobile ? "w-10 sticky left-0 z-10 bg-background" : "w-14")}>
            {HOURS.map((h) => (
              <div
                key={h}
@@ -209,7 +339,7 @@ export function CalendarWeekView({
                style={{ height: HOUR_HEIGHT }}
              >
                {h > 0 && (
-                  <span className="absolute top-0 right-2 -translate-y-1/2 text-[10px] leading-none">
+                  <span className={cn("absolute top-0 right-2 -translate-y-1/2 leading-none", isMobile ? "text-[9px]" : "text-[10px]")}>
                    {formatHour(h)}
                  </span>
                )}
@@ -217,12 +347,12 @@ export function CalendarWeekView({
            ))}
          </div>

-          <div className="flex-1 grid grid-cols-7 border-l border-border relative">
+          <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
@@ -249,14 +379,12 @@ 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 = Object.keys(ev.calendarIds)[0];
+                    const calId = getPrimaryCalendarId(ev);
                    const leftPct = (column / totalColumns) * 100;
                    const widthPct = (1 / totalColumns) * 100;

@@ -269,9 +397,11 @@ export function CalendarWeekView({
                      >
                        <EventCard
                          event={ev}
-                          calendar={calendarMap.get(calId)}
+                          calendar={calId ? calendarMap.get(calId) : undefined}
                          variant="block"
                          onClick={(rect) => onSelectEvent(ev, rect)}
+                          onMouseEnter={(rect) => onHoverEvent?.(ev, rect)}
+                          onMouseLeave={onHoverLeave}
                          draggable
                        />
                        <div
@@ -294,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>
                  )}
@@ -336,6 +466,35 @@ export function CalendarWeekView({
                      </div>
                    </div>
                  )}
+
+                  {pendingPreview && !pendingPreview.allDay && isSameDay(pendingPreview.start, day) && (
+                    (() => {
+                      const startMin = pendingPreview.start.getHours() * 60 + pendingPreview.start.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))";
+                      return (
+                        <div
+                          className="absolute left-1 right-1 z-10 rounded-md pointer-events-none border-2 border-dashed overflow-hidden"
+                          style={{
+                            top: (startMin / 60) * HOUR_HEIGHT,
+                            height: Math.max(20, (durationMin / 60) * HOUR_HEIGHT),
+                            borderColor: color,
+                            backgroundColor: `${color}10`,
+                          }}
+                        >
+                          <div className="text-[10px] font-medium px-1.5 py-0.5 truncate" style={{ color }}>
+                            {pendingPreview.title}
+                          </div>
+                          <div className="text-[9px] px-1.5 opacity-70" style={{ color }}>
+                            {formatSnapTime(startMin, timeFormat)} – {formatSnapTime(startMin + durationMin, timeFormat)}
+                          </div>
+                        </div>
+                      );
+                    })()
+                  )}
                </div>
              );
            })}
@@ -343,5 +502,6 @@ export function CalendarWeekView({
        </div>
      </div>
    </div>
+    </div>
  );
 }
@@ -1,20 +1,28 @@
 "use client";

-import { useCallback, useState, type DragEvent } from "react";
+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 {
  event: CalendarEvent;
  calendar?: Calendar;
-  variant: "chip" | "block";
+  variant: "chip" | "block" | "span";
  onClick?: (anchorRect: DOMRect) => void;
+  onMouseEnter?: (anchorRect: DOMRect) => void;
+  onMouseLeave?: () => void;
  isSelected?: boolean;
  draggable?: boolean;
+  continuesBefore?: boolean;
+  continuesAfter?: boolean;
+  className?: string;
+  style?: CSSProperties;
 }

 function sanitizeColor(color: string | null | undefined, fallback = "#3b82f6"): string {
@@ -28,7 +36,8 @@ function getEventColor(event: CalendarEvent, calendar?: Calendar): string {
  return sanitizeColor(event.color, sanitizeColor(calendar?.color));
 }

-function parseDuration(duration: string): number {
+function parseDuration(duration: string | undefined): number {
+  if (!duration) return 0;
  let totalMinutes = 0;
  const weekMatch = duration.match(/(\d+)W/);
  const hourMatch = duration.match(/(\d+)H/);
@@ -56,16 +65,19 @@ function createEventDragPreview(title: string, timeRange: string, color: string)
  return el;
 }

-export function EventCard({ event, calendar, variant, onClick, isSelected, draggable: isDraggable }: EventCardProps) {
+export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onMouseLeave, isSelected, draggable: isDraggable, continuesBefore = false, continuesAfter = false, className, style }: EventCardProps) {
  const t = useTranslations("calendar");
  const [isBeingDragged, setIsBeingDragged] = useState(false);
  const color = getEventColor(event, calendar);
-  const startDate = parseISO(event.start);
+  const startDate = getEventStartDate(event);
+  const timeFormat = useSettingsStore((state) => state.timeFormat);
+  const showTimeInMonthView = useSettingsStore((state) => state.showTimeInMonthView);
+  const timeFmt = timeFormat === "12h" ? "h:mm a" : "HH:mm";

  const calendarName = calendar?.name || "";
  const durationMinutes = parseDuration(event.duration);
-  const endTime = new Date(startDate.getTime() + durationMinutes * 60000);
-  const timeString = `${format(startDate, "HH:mm")} – ${format(endTime, "HH:mm")}`;
+  const endTime = getEventEndDate(event);
+  const timeString = `${format(startDate, timeFmt)} – ${format(endTime, timeFmt)}`;
  const ariaLabel = `${event.title || t("events.no_title")}, ${timeString}${calendarName ? `, ${calendarName}` : ""}`;

  const handleDragStart = useCallback((e: DragEvent) => {
@@ -101,6 +113,8 @@ export function EventCard({ event, calendar, variant, onClick, isSelected, dragg
    return (
      <button
        onClick={(e) => { e.stopPropagation(); onClick?.(e.currentTarget.getBoundingClientRect()); }}
+        onMouseEnter={(e) => onMouseEnter?.(e.currentTarget.getBoundingClientRect())}
+        onMouseLeave={() => onMouseLeave?.()}
        aria-label={ariaLabel}
        {...dragProps}
        className={cn(
@@ -108,9 +122,10 @@ export function EventCard({ event, calendar, variant, onClick, isSelected, dragg
          "min-h-[44px] sm:min-h-0",
          "hover:opacity-80 transition-opacity",
          isSelected && "ring-2 ring-primary",
-          isBeingDragged && "opacity-50"
+          isBeingDragged && "opacity-50",
+          className
        )}
-        style={{ backgroundColor: `${color}20`, color }}
+        style={{ backgroundColor: `${color}20`, color, ...style }}
      >
        <span
          className="w-1.5 h-1.5 rounded-full flex-shrink-0"
@@ -121,9 +136,42 @@ export function EventCard({ event, calendar, variant, onClick, isSelected, dragg
    );
  }

+  if (variant === "span") {
+    return (
+      <button
+        onClick={(e) => { e.stopPropagation(); onClick?.(e.currentTarget.getBoundingClientRect()); }}
+        onMouseEnter={(e) => onMouseEnter?.(e.currentTarget.getBoundingClientRect())}
+        onMouseLeave={() => onMouseLeave?.()}
+        aria-label={ariaLabel}
+        {...dragProps}
+        className={cn(
+          "w-full h-full text-left rounded px-1.5 py-0.5 text-xs overflow-hidden",
+          "hover:opacity-90 transition-opacity cursor-pointer",
+          continuesBefore && "rounded-l-sm",
+          continuesAfter && "rounded-r-sm",
+          continuesBefore && "-ml-0.5",
+          continuesAfter && "pr-2",
+          isSelected && "ring-2 ring-primary",
+          isBeingDragged && "opacity-50",
+          className
+        )}
+        style={{ backgroundColor: `${color}24`, borderLeft: `3px solid ${color}`, color, ...style }}
+      >
+        <div className="flex items-center gap-1 min-w-0">
+          {showTimeInMonthView && !event.showWithoutTime && (
+            <span className="flex-shrink-0 opacity-80">{format(startDate, timeFmt)}</span>
+          )}
+          <span className="truncate font-medium">{event.title || t("events.no_title")}</span>
+        </div>
+      </button>
+    );
+  }
+
  return (
    <button
      onClick={(e) => { e.stopPropagation(); onClick?.(e.currentTarget.getBoundingClientRect()); }}
+      onMouseEnter={(e) => onMouseEnter?.(e.currentTarget.getBoundingClientRect())}
+      onMouseLeave={() => onMouseLeave?.()}
      aria-label={ariaLabel}
      {...dragProps}
      data-calendar-event
@@ -131,9 +179,10 @@ export function EventCard({ event, calendar, variant, onClick, isSelected, dragg
        "w-full h-full text-left rounded px-1.5 py-0.5 text-xs overflow-hidden",
        "hover:opacity-90 transition-opacity cursor-pointer",
        isSelected && "ring-2 ring-primary",
-        isBeingDragged && "opacity-50"
+        isBeingDragged && "opacity-50",
+        className
      )}
-      style={{ backgroundColor: `${color}30`, borderLeft: `3px solid ${color}`, color }}
+      style={{ backgroundColor: `${color}30`, borderLeft: `3px solid ${color}`, color, ...style }}
    >
      <div className="font-medium truncate">{event.title || t("events.no_title")}</div>
      {!event.showWithoutTime && (
@@ -9,8 +9,10 @@ import {
  Pencil, Trash2, Copy, Send, Check,
 } from "lucide-react";
 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,
@@ -28,8 +30,11 @@ interface EventDetailPopoverProps {
  onClose: () => void;
  onSaveNote: (note: string) => void;
  onRsvp?: (status: CalendarParticipant["participationStatus"]) => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
  currentUserEmails?: string[];
  timeFormat?: "12h" | "24h";
+  isMobile?: boolean;
 }

 const POPOVER_WIDTH = 360;
@@ -117,8 +122,11 @@ export function EventDetailPopover({
  onClose,
  onSaveNote,
  onRsvp,
+  onMouseEnter,
+  onMouseLeave,
  currentUserEmails = [],
  timeFormat = "24h",
+  isMobile,
 }: EventDetailPopoverProps) {
  const t = useTranslations("calendar");
  const popoverRef = useRef<HTMLDivElement>(null);
@@ -131,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;
@@ -185,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();
@@ -200,17 +212,14 @@ export function EventDetailPopover({
        onClose();
      }
    };
-    const handleScroll = () => onClose();

    const timer = setTimeout(() => {
      document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("scroll", handleScroll, true);
    }, 0);

    return () => {
      clearTimeout(timer);
      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("scroll", handleScroll, true);
    };
  }, [onClose]);

@@ -249,8 +258,18 @@ export function EventDetailPopover({
      ref={popoverRef}
      role="dialog"
      aria-label={event.title || t("events.no_title")}
-      className="fixed z-[60] bg-background border border-border rounded-lg shadow-xl overflow-hidden transition-[opacity,transform] duration-150 ease-out"
-      style={{
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      className={cn(
+        "fixed z-[60] bg-background border border-border shadow-xl overflow-hidden transition-[opacity,transform] duration-150 ease-out",
+        isMobile
+          ? "inset-0 rounded-none flex flex-col"
+          : "rounded-lg"
+      )}
+      style={isMobile ? {
+        opacity: 1,
+        transform: "none",
+      } : {
        width: POPOVER_WIDTH,
        maxHeight: MAX_HEIGHT,
        top: position?.top ?? -9999,
@@ -279,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>
              )}
@@ -293,15 +312,18 @@ export function EventDetailPopover({
        </div>
        <button
          onClick={onClose}
-          className="p-1 rounded hover:bg-muted transition-colors flex-shrink-0 mt-0.5"
+          className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 flex-shrink-0 mt-0.5 text-muted-foreground hover:text-foreground"
          aria-label={t("form.cancel")}
        >
-          <X className="w-4 h-4 text-muted-foreground" />
+          <X className="w-4 h-4" />
        </button>
      </div>

      {/* Content */}
-      <div className="px-4 py-2 space-y-2.5 overflow-y-auto" style={{ maxHeight: MAX_HEIGHT - 140 }}>
+      <div className={cn(
+        "px-4 py-2 space-y-2.5 overflow-y-auto",
+        isMobile ? "flex-1" : ""
+      )} style={isMobile ? undefined : { maxHeight: MAX_HEIGHT - 140 }}>
        {/* Date & Time */}
        <div className="flex items-start gap-2.5">
          <Clock className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
@@ -486,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" />}
@@ -499,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" />}
@@ -512,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" />}
@@ -527,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
@@ -590,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> = {
@@ -4,10 +4,11 @@ import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { X, Trash2, Check, Users, CalendarDays, Copy } from "lucide-react";
+import { X, Trash2, Check, Users, CalendarDays, Copy, Pencil, Clock, MapPin, Video, Repeat, Bell, AlignLeft } from "lucide-react";
 import { format, parseISO, addHours, addDays } from "date-fns";
 import type { CalendarEvent, Calendar, CalendarParticipant } from "@/lib/jmap/types";
-import { parseDuration } from "./event-card";
+import { parseDuration, getEventColor } from "./event-card";
+import { buildAllDayDuration, getEventDisplayEndDate, getEventEndDate, getEventStartDate, getPrimaryCalendarId } from "@/lib/calendar-utils";
 import { ParticipantInput } from "./participant-input";
 import {
  isOrganizer,
@@ -17,18 +18,30 @@ import {
  getStatusCounts,
  buildParticipantMap,
 } from "@/lib/calendar-participants";
+import { PluginSlot } from "@/components/plugins/plugin-slot";
+import { useSettingsStore } from "@/stores/settings-store";
+
+export interface PendingEventPreview {
+  start: Date;
+  end: Date;
+  title: string;
+  allDay: boolean;
+  calendarId: string;
+}

 interface EventModalProps {
  event?: CalendarEvent | null;
  calendars: Calendar[];
  defaultDate?: Date;
  defaultEndDate?: Date;
-  onSave: (data: Partial<CalendarEvent>, sendSchedulingMessages?: boolean) => void;
+  onSave: (data: Partial<CalendarEvent>, sendSchedulingMessages?: boolean) => void | Promise<void>;
  onDelete?: (id: string, sendSchedulingMessages?: boolean) => void;
  onDuplicate?: (data: Partial<CalendarEvent>) => void;
  onRsvp?: (eventId: string, participantId: string, status: CalendarParticipant['participationStatus']) => void;
  onClose: () => void;
+  onPreviewChange?: (preview: PendingEventPreview | null) => void;
  currentUserEmails?: string[];
+  isMobile?: boolean;
 }

 function formatDateInput(d: Date): string {
@@ -47,16 +60,53 @@ 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;
 }

 type RecurrenceOption = "none" | "daily" | "weekly" | "monthly" | "yearly";
 type AlertOption = "none" | "at_time" | "5" | "15" | "30" | "60" | "1440";

+function formatDurationDisplay(minutes: number): string {
+  if (minutes < 60) return `${minutes}min`;
+  const h = Math.floor(minutes / 60);
+  const m = minutes % 60;
+  if (m === 0) return `${h}h`;
+  return `${h}h${m}min`;
+}
+
+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;
+  const offset = first.trigger.offset;
+  if (offset === "PT0S") return t("alerts.at_time");
+  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$/);
+  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]) });
+  return null;
+}
+
+function getRecurrenceLabel(event: CalendarEvent, t: ReturnType<typeof useTranslations>): string | null {
+  if (!event.recurrenceRules?.length) return null;
+  const freq = event.recurrenceRules[0].frequency;
+  const labels: Record<string, string> = {
+    daily: t("recurrence.daily"),
+    weekly: t("recurrence.weekly"),
+    monthly: t("recurrence.monthly"),
+    yearly: t("recurrence.yearly"),
+  };
+  return labels[freq] || null;
+}
+
 export function EventModal({
  event,
  calendars,
@@ -67,10 +117,15 @@ export function EventModal({
  onDuplicate,
  onRsvp,
  onClose,
+  onPreviewChange,
  currentUserEmails = [],
+  isMobile = false,
 }: EventModalProps) {
  const t = useTranslations("calendar");
+  const timeFormat = useSettingsStore((s) => s.timeFormat);
+  const timeDisplayFmt = timeFormat === "12h" ? "h:mm a" : "HH:mm";
  const isEdit = !!event;
+  const [mode, setMode] = useState<"view" | "edit">(isEdit ? "view" : "edit");

  const userIsOrganizer = useMemo(() => {
    if (!event) return true;
@@ -105,7 +160,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;
@@ -120,9 +175,10 @@ export function EventModal({

  const getInitialEnd = (): Date => {
    if (event?.start) {
-      const s = parseISO(event.start);
-      const dur = parseDuration(event.duration);
-      return new Date(s.getTime() + dur * 60000);
+      if (event.showWithoutTime) {
+        return getEventDisplayEndDate(event);
+      }
+      return getEventEndDate(event);
    }
    if (defaultEndDate) return new Date(defaultEndDate);
    return addHours(getInitialStart(), 1);
@@ -133,13 +189,16 @@ 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()));
  const [endTime, setEndTime] = useState(formatTimeInput(getInitialEnd()));
  const [allDay, setAllDay] = useState(event?.showWithoutTime || false);
  const [calendarId, setCalendarId] = useState<string>(() => {
-    if (event?.calendarIds) return Object.keys(event.calendarIds)[0] || calendars[0]?.id || "";
+    if (event?.calendarIds) return getPrimaryCalendarId(event) || calendars[0]?.id || "";
    const defaultCal = calendars.find(c => c.isDefault);
    return defaultCal?.id || calendars[0]?.id || "";
  });
@@ -154,9 +213,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;
@@ -164,6 +223,7 @@ export function EventModal({
    return "none";
  });
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);

  const [attendees, setAttendees] = useState<{ name: string; email: string }[]>(() => {
    if (!event?.participants) return [];
@@ -173,6 +233,18 @@ export function EventModal({
  });
  const [sendInvitations, setSendInvitations] = useState(true);

+  // Report live preview to parent for grid outline
+  useEffect(() => {
+    if (!onPreviewChange || isEdit) return;
+    const startStr = allDay ? `${startDate}T00:00:00` : `${startDate}T${startTime}:00`;
+    const endStr = allDay ? `${endDate}T23:59:59` : `${endDate}T${endTime}:00`;
+    const s = new Date(startStr);
+    const e = new Date(endStr);
+    if (isNaN(s.getTime()) || isNaN(e.getTime())) return;
+    onPreviewChange({ start: s, end: e, title: title || "(No title)", allDay, calendarId });
+    return () => onPreviewChange(null);
+  }, [startDate, startTime, endDate, endTime, allDay, title, calendarId, isEdit, onPreviewChange]);
+
  const statusCounts = useMemo(() => {
    if (!event?.participants) return null;
    return getStatusCounts(event);
@@ -186,29 +258,33 @@ export function EventModal({
    setAttendees(prev => prev.filter(a => a.email.toLowerCase() !== email.toLowerCase()));
  }, []);

-  const handleSave = useCallback(() => {
+  const handleSave = useCallback(async () => {
    const trimmedTitle = title.trim();
-    if (!trimmedTitle) return;
+    if (!trimmedTitle || isSaving) return;
    if (trimmedTitle.length > 500 || description.trim().length > 10000 || location.trim().length > 500) return;

    const startStr = allDay
      ? `${startDate}T00:00:00`
      : `${startDate}T${startTime}:00`;
-    const endStr = allDay
-      ? `${endDate}T23:59:59`
-      : `${endDate}T${endTime}:00`;

-    const start = new Date(startStr);
-    let end = new Date(endStr);
+    const start = allDay ? parseISO(startStr) : new Date(startStr);
+    let duration: string;

-    if (end <= start) {
-      end = new Date(start.getTime() + 3600000);
+    if (allDay) {
+      let inclusiveEnd = new Date(`${endDate}T00:00:00`);
+      if (inclusiveEnd < start) {
+        inclusiveEnd = new Date(start);
+      }
+      duration = buildAllDayDuration(start, inclusiveEnd);
+    } else {
+      const endStr = `${endDate}T${endTime}:00`;
+      let end = new Date(endStr);
+      if (end <= start) {
+        end = new Date(start.getTime() + 3600000);
+      }
+      duration = buildDuration(start, end);
    }

-    const duration = allDay
-      ? `P${Math.max(1, Math.ceil((end.getTime() - start.getTime()) / 86400000))}D`
-      : buildDuration(start, end);
-
    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

    const data: Partial<CalendarEvent> = {
@@ -216,7 +292,7 @@ export function EventModal({
      description: description.trim(),
      start: startStr,
      duration,
-      timeZone,
+      timeZone: allDay ? null : timeZone,
      showWithoutTime: allDay,
      calendarIds: { [calendarId]: true },
      status: "confirmed",
@@ -241,6 +317,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",
@@ -294,8 +384,13 @@ export function EventModal({
    }

    const shouldSendScheduling = attendees.length > 0 && sendInvitations;
-    onSave(data, shouldSendScheduling);
-  }, [title, description, location, startDate, startTime, endDate, endTime, allDay, calendarId, recurrence, alert, attendees, sendInvitations, currentUserEmails, existingParticipants, event, onSave]);
+    setIsSaving(true);
+    try {
+      await onSave(data, shouldSendScheduling);
+    } finally {
+      setIsSaving(false);
+    }
+  }, [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;
@@ -305,12 +400,16 @@ export function EventModal({

  const handleDuplicate = useCallback(() => {
    if (!event || !onDuplicate) return;
-    const start = parseISO(event.start);
+    const start = getEventStartDate(event);
    const newStart = addDays(start, 1);
+    const newUid = typeof crypto !== 'undefined' && crypto.randomUUID
+      ? crypto.randomUUID()
+      : `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
    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,
@@ -320,6 +419,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);
@@ -330,7 +430,13 @@ export function EventModal({

  useEffect(() => {
    const handleKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
+      if (e.key === "Escape") {
+        if (mode === "edit" && isEdit) {
+          setMode("view");
+        } else {
+          onClose();
+        }
+      }
      if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
        e.preventDefault();
        if (!isAttendeeMode) handleSave();
@@ -338,7 +444,7 @@ export function EventModal({
    };
    window.addEventListener("keydown", handleKey);
    return () => window.removeEventListener("keydown", handleKey);
-  }, [onClose, handleSave, isAttendeeMode]);
+  }, [onClose, handleSave, isAttendeeMode, mode, isEdit]);

  useEffect(() => {
    const modal = modalRef.current;
@@ -367,24 +473,23 @@ 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);

    return (
-      <div className="fixed inset-0 z-50 flex items-center justify-center">
-        <div className="absolute inset-0 bg-black/50" onClick={onClose} aria-hidden="true" />
-        <div ref={modalRef} role="dialog" aria-modal="true" aria-label={event.title || t("events.no_title")} className="relative bg-background border border-border rounded-lg shadow-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
-          <div className="flex items-center justify-between px-5 py-4 border-b border-border">
+      <div ref={modalRef} role="dialog" aria-modal={isMobile || undefined} aria-label={event.title || t("events.no_title")} className={isMobile ? "fixed inset-0 z-50 flex flex-col bg-background" : "flex flex-col h-full bg-background"}>
+          <div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
            <h2 className="text-lg font-semibold truncate">{event.title || t("events.no_title")}</h2>
-            <button onClick={onClose} className="p-1 rounded hover:bg-muted transition-colors" aria-label={t("form.cancel")}>
+            <button onClick={onClose} className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground" aria-label={t("form.cancel")}>
              <X className="w-5 h-5" />
            </button>
          </div>

-          <div className="px-5 py-4 space-y-3">
+          <div className="flex-1 overflow-y-auto">
+          <div className="px-6 py-4 space-y-3">
            <div className="flex items-start gap-3 rounded-lg border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-950/50 px-4 py-3">
              <CalendarDays className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
              <div className="text-sm">
@@ -401,7 +506,7 @@ export function EventModal({
              <span className="font-medium">{format(startD, "EEE, MMM d, yyyy")}</span>
              {!event.showWithoutTime && (
                <span className="text-muted-foreground ml-2">
-                  {format(startD, "HH:mm")} – {format(endD, "HH:mm")}
+                  {format(startD, timeDisplayFmt)} – {format(endD, timeDisplayFmt)}
                </span>
              )}
            </div>
@@ -431,8 +536,9 @@ export function EventModal({
              </div>
            )}
          </div>
+          </div>

-          <div className="px-5 py-4 border-t border-border">
+          <div className="px-6 py-4 border-t border-border flex-shrink-0">
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium">{t("participants.rsvp_label")}</span>
              <div className="flex gap-2">
@@ -441,8 +547,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")}
@@ -452,8 +558,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")}
@@ -463,8 +569,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")}
@@ -472,25 +578,192 @@ export function EventModal({
              </div>
            </div>
          </div>
+      </div>
+    );
+  }
+
+  // View mode: read-only display of event details with Edit button
+  if (mode === "view" && event) {
+    const startD = getEventStartDate(event);
+    const durMin = parseDuration(event.duration);
+    const endD = getEventEndDate(event);
+    const locationName = event.locations ? Object.values(event.locations)[0]?.name || null : null;
+    const virtualLoc = event.virtualLocations ? Object.values(event.virtualLocations)[0]?.uri || null : null;
+    const viewParticipants = getParticipantList(event);
+    const recurrenceLabel = getRecurrenceLabel(event, t);
+    const alertLabel = getAlertLabel(event, t);
+    const eventCalendar = calendars.find(c => event.calendarIds[c.id]);
+    const color = getEventColor(event, eventCalendar);
+
+    return (
+      <div ref={modalRef} role="dialog" aria-modal={isMobile || undefined} aria-label={event.title || t("events.no_title")} className={isMobile ? "fixed inset-0 z-50 flex flex-col bg-background" : "flex flex-col h-full bg-background"}>
+        {/* Color accent bar */}
+        <div className="h-1 w-full flex-shrink-0" style={{ backgroundColor: color }} />
+
+        {/* Header */}
+        <div className="flex items-start justify-between gap-2 px-6 py-4 border-b border-border flex-shrink-0">
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2">
+              <span className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: color }} />
+              <h2 className="text-lg font-semibold truncate">{event.title || t("events.no_title")}</h2>
+            </div>
+            {eventCalendar && (
+              <p className="text-xs text-muted-foreground mt-0.5 pl-[18px]">{eventCalendar.name}</p>
+            )}
+          </div>
+          <button onClick={onClose} className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 flex-shrink-0 mt-0.5 text-muted-foreground hover:text-foreground" aria-label={t("form.cancel")}>
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto">
+          <div className="px-6 py-4 space-y-3">
+            {/* Date & Time */}
+            <div className="flex items-start gap-2.5">
+              <Clock className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+              <div className="text-sm">
+                <span className="font-medium text-foreground">
+                  {format(startD, "EEE, MMM d, yyyy")}
+                </span>
+                {event.showWithoutTime ? (
+                  <span className="text-muted-foreground ml-1.5">{t("events.all_day")}</span>
+                ) : (
+                  <div className="text-muted-foreground">
+                    {format(startD, timeDisplayFmt)} – {format(endD, timeDisplayFmt)}
+                    <span className="ml-1.5 text-xs">({formatDurationDisplay(durMin)})</span>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Location */}
+            {locationName && (
+              <div className="flex items-start gap-2.5">
+                <MapPin className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+                {/^https?:\/\//i.test(locationName) ? (
+                  <a href={locationName} target="_blank" rel="noreferrer" className="text-sm text-primary hover:underline truncate" title={locationName}>
+                    {(() => { try { return new URL(locationName).hostname; } catch { return locationName; } })()}
+                  </a>
+                ) : (
+                  <span className="text-sm text-foreground">{locationName}</span>
+                )}
+              </div>
+            )}
+
+            {/* Virtual Location */}
+            {virtualLoc && (
+              <div className="flex items-start gap-2.5">
+                <Video className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+                <a href={virtualLoc} target="_blank" rel="noreferrer" className="text-sm text-primary hover:underline truncate" title={virtualLoc}>
+                  {(() => { try { return new URL(virtualLoc).hostname; } catch { return virtualLoc; } })()}
+                </a>
+              </div>
+            )}
+
+            {/* Participants */}
+            {viewParticipants.length > 0 && (
+              <div className="flex items-start gap-2.5">
+                <Users className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+                <div className="text-sm min-w-0">
+                  <span className="text-muted-foreground">
+                    {t("participants.count", { count: viewParticipants.length })}
+                  </span>
+                  <div className="mt-1 space-y-0.5">
+                    {viewParticipants.map((p) => (
+                      <div key={p.id} className="flex items-center justify-between gap-2 text-xs">
+                        <span className="truncate text-foreground">
+                          {p.name || p.email}
+                          {p.isOrganizer && (
+                            <span className="text-muted-foreground ml-1">({t("participants.organizer").toLowerCase()})</span>
+                          )}
+                        </span>
+                        <StatusBadge status={p.status} isOrganizer={p.isOrganizer} t={t} />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Recurrence */}
+            {recurrenceLabel && (
+              <div className="flex items-start gap-2.5">
+                <Repeat className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+                <span className="text-sm text-foreground">{recurrenceLabel}</span>
+              </div>
+            )}
+
+            {/* Reminder */}
+            {alertLabel && (
+              <div className="flex items-start gap-2.5">
+                <Bell className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+                <span className="text-sm text-foreground">{alertLabel}</span>
+              </div>
+            )}
+
+            {/* Description */}
+            {event.description && (
+              <div className="flex items-start gap-2.5">
+                <AlignLeft className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+                <p className="text-sm text-muted-foreground whitespace-pre-line">{event.description}</p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Action Bar */}
+        <div className="px-6 py-3 border-t border-border flex-shrink-0 flex items-center justify-between">
+          <div className="flex items-center gap-1">
+            {onDelete && (
+              showDeleteConfirm ? (
+                <div className="flex items-center gap-2">
+                  <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)}>
+                    {t("form.cancel")}
+                  </Button>
+                </div>
+              ) : (
+                <Button variant="ghost" size="sm" onClick={() => setShowDeleteConfirm(true)} className="text-destructive">
+                  <Trash2 className="w-4 h-4 mr-1" />
+                  {t("events.delete")}
+                </Button>
+              )
+            )}
+            {onDuplicate && !showDeleteConfirm && (
+              <Button variant="ghost" size="sm" onClick={handleDuplicate} aria-label={t("events.duplicate")}>
+                <Copy className="w-4 h-4 mr-1" />
+                {t("events.duplicate")}
+              </Button>
+            )}
+          </div>
+          {!showDeleteConfirm && (
+            <Button onClick={() => setMode("edit")}>
+              <Pencil className="w-4 h-4 mr-1" />
+              {t("events.edit")}
+            </Button>
+          )}
        </div>
      </div>
    );
  }

  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/50" onClick={onClose} aria-hidden="true" />
-      <div ref={modalRef} role="dialog" aria-modal="true" aria-label={isEdit ? t("events.edit") : t("events.create")} className="relative bg-background border border-border rounded-lg shadow-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
-        <div className="flex items-center justify-between px-5 py-4 border-b border-border">
+    <div ref={modalRef} role="dialog" aria-modal={isMobile || undefined} aria-label={isEdit ? t("events.edit") : t("events.create")} data-tour="event-modal" className={isMobile ? "fixed inset-0 z-50 flex flex-col bg-background" : "flex flex-col h-full bg-background"}>
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
          <h2 className="text-lg font-semibold">
            {isEdit ? t("events.edit") : t("events.create")}
          </h2>
-          <button onClick={onClose} className="p-1 rounded hover:bg-muted transition-colors" aria-label={t("form.cancel")}>
+          <button onClick={onClose} className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground" aria-label={t("form.cancel")}>
            <X className="w-5 h-5" />
          </button>
        </div>

-        <div className="px-5 py-4 space-y-4">
+        <div className="flex-1 overflow-y-auto">
+        <div className="px-6 py-4 space-y-4">
          <div>
            <label className="text-sm font-medium mb-1 block">{t("form.title")}</label>
            <Input
@@ -524,6 +797,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">
@@ -665,8 +971,9 @@ export function EventModal({
            </div>
          )}
        </div>
+        </div>

-        <div className="flex items-center justify-between px-5 py-4 border-t border-border">
+        <div className="flex items-center justify-between px-6 py-4 border-t border-border flex-shrink-0">
          <div className="flex items-center gap-1">
            {isEdit && onDelete && (
              showDeleteConfirm ? (
@@ -719,15 +1026,14 @@ export function EventModal({
          </div>

          <div className="flex gap-2">
-            <Button variant="outline" onClick={onClose}>
+            <Button variant="outline" onClick={isEdit ? () => setMode("view") : onClose}>
              {t("form.cancel")}
            </Button>
-            <Button onClick={handleSave} disabled={!title.trim()}>
+            <Button onClick={handleSave} disabled={!title.trim() || isSaving}>
              {t("form.save")}
            </Button>
          </div>
        </div>
-      </div>
    </div>
  );
 }
@@ -741,9 +1047,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> = {
@@ -3,23 +3,26 @@
 import { useState, useCallback, useRef, useEffect } from "react";
 import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
-import { X, Upload, Check, Loader2, RefreshCw } from "lucide-react";
+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 { JMAPClient } from "@/lib/jmap/client";
+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";

 interface ICalImportModalProps {
  calendars: Calendar[];
-  client: JMAPClient;
+  client: IJMAPClient;
  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";
+type ImportMode = "file" | "url";

 export function ICalImportModal({ calendars, client, onClose }: ICalImportModalProps) {
  const t = useTranslations("calendar.import");
@@ -27,6 +30,7 @@ export function ICalImportModal({ calendars, client, onClose }: ICalImportModalP
  const tCommon = useTranslations("common");
  const tForm = useTranslations("calendar.form");
  const importEvents = useCalendarStore((s) => s.importEvents);
+  const timeFormat = useSettingsStore((s) => s.timeFormat);

  const [step, setStep] = useState<ImportStep>("select");
  const [parsedEvents, setParsedEvents] = useState<Partial<CalendarEvent>[]>([]);
@@ -38,6 +42,9 @@ export function ICalImportModal({ calendars, client, onClose }: ICalImportModalP
  const [isParsing, setIsParsing] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const [error, setError] = useState<string | null>(null);
+  const [importMode, setImportMode] = useState<ImportMode>("file");
+  const [urlInput, setUrlInput] = useState("");
+  const [isFetchingUrl, setIsFetchingUrl] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const modalRef = useRef<HTMLDivElement>(null);

@@ -103,6 +110,57 @@ export function ICalImportModal({ calendars, client, onClose }: ICalImportModalP
    if (file) handleFile(file);
  }, [handleFile]);

+  const handleUrlFetch = useCallback(async () => {
+    const trimmed = urlInput.trim();
+    if (!trimmed) return;
+
+    try {
+      new URL(trimmed);
+    } catch {
+      setError(t("invalid_url"));
+      return;
+    }
+
+    setError(null);
+    setIsFetchingUrl(true);
+    setIsParsing(true);
+
+    try {
+      const response = await fetch("/api/fetch-ical", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url: trimmed }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}));
+        throw new Error(data.error || t("url_fetch_failed"));
+      }
+
+      const blob = await response.blob();
+      const file = new File([blob], "calendar.ics", { type: "text/calendar" });
+      const uploaded = await client.uploadBlob(file);
+      const accountId = client.getCalendarsAccountId();
+      const events = await client.parseCalendarEvents(accountId, uploaded.blobId);
+
+      if (events.length === 0) {
+        setError(t("no_events"));
+        setIsFetchingUrl(false);
+        setIsParsing(false);
+        return;
+      }
+
+      setParsedEvents(events);
+      setSelectedIndices(new Set(events.map((_, i) => i)));
+      setStep("preview");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t("url_fetch_failed"));
+    } finally {
+      setIsFetchingUrl(false);
+      setIsParsing(false);
+    }
+  }, [urlInput, client, t]);
+
  const toggleEvent = useCallback((index: number) => {
    setSelectedIndices((prev) => {
      const next = new Set(prev);
@@ -138,10 +196,11 @@ 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")
-        : format(date, "MMM d, yyyy HH:mm");
+        : format(date, `MMM d, yyyy ${timeFmt}`);
    } catch {
      return event.start;
    }
@@ -181,50 +240,106 @@ export function ICalImportModal({ calendars, client, onClose }: ICalImportModalP

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/50" onClick={onClose} aria-hidden="true" />
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-[1px]" onClick={onClose} aria-hidden="true" />
      <div
        ref={modalRef}
        role="dialog"
        aria-modal="true"
        aria-label={t("title")}
-        className="relative bg-background border border-border rounded-lg shadow-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto"
+        className="relative bg-background border border-border rounded-lg shadow-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto animate-in zoom-in-95 duration-200"
      >
-        <div className="flex items-center justify-between px-5 py-4 border-b border-border">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
          <h2 className="text-lg font-semibold">{t("title")}</h2>
          <button
            onClick={onClose}
-            className="p-1 rounded hover:bg-muted transition-colors"
+            className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground"
            aria-label={tCommon("close")}
          >
            <X className="w-5 h-5" />
          </button>
        </div>

-        <div className="px-5 py-4 space-y-4">
+        <div className="px-6 py-4 space-y-4">
          {step === "select" && !isParsing && (
-            <div
-              onClick={() => fileInputRef.current?.click()}
-              onDragOver={handleDragOver}
-              onDragLeave={handleDragLeave}
-              onDrop={handleDrop}
-              className={`flex flex-col items-center justify-center border-2 border-dashed rounded-lg p-8 cursor-pointer transition-colors ${
-                isDragging
-                  ? "border-primary bg-primary/5"
-                  : "border-border hover:border-primary/50 hover:bg-muted/50"
-              }`}
-            >
-              <Upload className="w-8 h-8 text-muted-foreground mb-3" />
-              <p className="text-sm font-medium">{t("select_file")}</p>
-              <p className="text-xs text-muted-foreground mt-1">{t("drop_file")}</p>
-              <p className="text-xs text-muted-foreground mt-2">{t("supported_formats")}</p>
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept=".ics,.ical"
-                onChange={handleFileChange}
-                className="hidden"
-              />
-            </div>
+            <>
+              <div className="flex border-b border-border mb-4">
+                <button
+                  onClick={() => { setImportMode("file"); setError(null); }}
+                  className={`flex items-center gap-1.5 px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                    importMode === "file"
+                      ? "border-primary text-primary"
+                      : "border-transparent text-muted-foreground hover:text-foreground"
+                  }`}
+                >
+                  <Upload className="w-4 h-4" />
+                  {t("tab_file")}
+                </button>
+                <button
+                  onClick={() => { setImportMode("url"); setError(null); }}
+                  className={`flex items-center gap-1.5 px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                    importMode === "url"
+                      ? "border-primary text-primary"
+                      : "border-transparent text-muted-foreground hover:text-foreground"
+                  }`}
+                >
+                  <Globe className="w-4 h-4" />
+                  {t("tab_url")}
+                </button>
+              </div>
+
+              {importMode === "file" && (
+                <div
+                  onClick={() => fileInputRef.current?.click()}
+                  onDragOver={handleDragOver}
+                  onDragLeave={handleDragLeave}
+                  onDrop={handleDrop}
+                  className={`flex flex-col items-center justify-center border-2 border-dashed rounded-lg p-8 cursor-pointer transition-colors ${
+                    isDragging
+                      ? "border-primary bg-primary/5"
+                      : "border-border hover:border-primary/50 hover:bg-muted/50"
+                  }`}
+                >
+                  <Upload className="w-8 h-8 text-muted-foreground mb-3" />
+                  <p className="text-sm font-medium">{t("select_file")}</p>
+                  <p className="text-xs text-muted-foreground mt-1">{t("drop_file")}</p>
+                  <p className="text-xs text-muted-foreground mt-2">{t("supported_formats")}</p>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept=".ics,.ical"
+                    onChange={handleFileChange}
+                    className="hidden"
+                  />
+                </div>
+              )}
+
+              {importMode === "url" && (
+                <div className="space-y-3">
+                  <p className="text-sm text-muted-foreground">{t("url_description")}</p>
+                  <div className="flex gap-2">
+                    <input
+                      type="url"
+                      value={urlInput}
+                      onChange={(e) => setUrlInput(e.target.value)}
+                      placeholder={t("url_placeholder")}
+                      className="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                      onKeyDown={(e) => { if (e.key === "Enter") handleUrlFetch(); }}
+                    />
+                    <Button
+                      onClick={handleUrlFetch}
+                      disabled={!urlInput.trim() || isFetchingUrl}
+                    >
+                      {isFetchingUrl ? (
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                      ) : (
+                        t("fetch")
+                      )}
+                    </Button>
+                  </div>
+                  <p className="text-xs text-muted-foreground">{t("url_hint")}</p>
+                </div>
+              )}
+            </>
          )}

          {isParsing && (
@@ -235,7 +350,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>
          )}
@@ -318,7 +433,7 @@ export function ICalImportModal({ calendars, client, onClose }: ICalImportModalP
        </div>

        {step !== "importing" && (
-          <div className="flex items-center justify-end gap-2 px-5 py-4 border-t border-border">
+          <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-border">
            <Button variant="outline" onClick={onClose}>
              {tForm("cancel")}
            </Button>
@@ -0,0 +1,220 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+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, 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, editSubscription }: ICalSubscriptionModalProps) {
+  const t = useTranslations("calendar.subscription");
+  const tCommon = useTranslations("common");
+  const addICalSubscription = useCalendarStore((s) => s.addICalSubscription);
+  const updateICalSubscription = useCalendarStore((s) => s.updateICalSubscription);
+
+  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);
+
+  const isValid = url.trim().length > 0 && name.trim().length > 0;
+
+  const handleSubmit = useCallback(async () => {
+    let trimmedUrl = url.trim();
+    if (!trimmedUrl || !name.trim()) return;
+
+    // Convert webcal:// to https://
+    if (trimmedUrl.startsWith("webcal://")) {
+      trimmedUrl = trimmedUrl.replace(/^webcal:\/\//, "https://");
+    }
+
+    try {
+      new URL(trimmedUrl);
+    } catch {
+      setError(t("invalid_url"));
+      return;
+    }
+
+    setError(null);
+    setIsSubmitting(true);
+
+    try {
+      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 {
+        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(isEdit ? t("update_error") : t("error"));
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [url, name, color, refreshInterval, client, addICalSubscription, onClose, t]);
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [onClose]);
+
+  useEffect(() => {
+    const modal = modalRef.current;
+    if (!modal) return;
+    const focusableEls = modal.querySelectorAll<HTMLElement>(
+      'input, select, textarea, button, [tabindex]:not([tabindex="-1"])'
+    );
+    const firstEl = focusableEls[0];
+    const lastEl = focusableEls[focusableEls.length - 1];
+
+    const handler = (e: KeyboardEvent) => {
+      if (e.key !== "Tab") return;
+      if (e.shiftKey && document.activeElement === firstEl) {
+        e.preventDefault();
+        lastEl?.focus();
+      } else if (!e.shiftKey && document.activeElement === lastEl) {
+        e.preventDefault();
+        firstEl?.focus();
+      }
+    };
+    modal.addEventListener("keydown", handler);
+    firstEl?.focus();
+    return () => modal.removeEventListener("keydown", handler);
+  }, []);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-[1px]" onClick={onClose} aria-hidden="true" />
+      <div
+        ref={modalRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={t("title")}
+        className="relative bg-background border border-border rounded-lg shadow-xl w-full max-w-md mx-4 animate-in zoom-in-95 duration-200"
+      >
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+          <div className="flex items-center gap-2">
+            <Globe className="w-5 h-5 text-primary" />
+            <h2 className="text-lg font-semibold">{isEdit ? t("edit_title") : t("title")}</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground"
+            aria-label={tCommon("close")}
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="px-6 py-4 space-y-4">
+          <p className="text-sm text-muted-foreground">{t("description")}</p>
+
+          <div>
+            <label className="text-xs font-medium text-muted-foreground mb-1 block">
+              {t("url_label")}
+            </label>
+            <input
+              type="url"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              placeholder={t("url_placeholder")}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              disabled={isSubmitting}
+              onKeyDown={(e) => { if (e.key === "Enter" && isValid) handleSubmit(); }}
+            />
+          </div>
+
+          <div>
+            <label className="text-xs font-medium text-muted-foreground mb-1 block">
+              {t("name_label")}
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={t("name_placeholder")}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              disabled={isSubmitting}
+              onKeyDown={(e) => { if (e.key === "Enter" && isValid) handleSubmit(); }}
+            />
+          </div>
+
+          <div>
+            <label className="text-xs font-medium text-muted-foreground mb-1 block">
+              {t("color_label")}
+            </label>
+            <CalendarColorPicker value={color} onChange={setColor} allowCustom />
+          </div>
+
+          <div>
+            <label className="text-xs font-medium text-muted-foreground mb-1 block">
+              {t("refresh_interval")}
+            </label>
+            <select
+              value={refreshInterval}
+              onChange={(e) => setRefreshInterval(Number(e.target.value))}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              disabled={isSubmitting}
+            >
+              <option value={15}>{t("interval_15")}</option>
+              <option value={30}>{t("interval_30")}</option>
+              <option value={60}>{t("interval_60")}</option>
+              <option value={360}>{t("interval_360")}</option>
+              <option value={1440}>{t("interval_1440")}</option>
+            </select>
+          </div>
+
+          {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">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-border">
+          <Button variant="outline" onClick={onClose} disabled={isSubmitting}>
+            {tCommon("cancel")}
+          </Button>
+          <Button onClick={handleSubmit} disabled={!isValid || isSubmitting}>
+            {isSubmitting ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin mr-2" />
+                {isEdit ? t("saving") : t("subscribing")}
+              </>
+            ) : (
+              isEdit ? t("save") : t("subscribe")
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -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>
@@ -138,9 +138,9 @@ export function ParticipantInput({ participants, onAdd, onRemove, disabled }: Pa

      {participants.length > 0 && (
        <div className="flex flex-wrap gap-1.5">
-          {participants.map((p) => (
+          {participants.map((p, i) => (
            <span
-              key={p.email}
+              key={`${p.email}-${i}`}
              className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full bg-muted text-foreground max-w-[200px]"
            >
              <span className="truncate">{p.name || p.email}</span>
@@ -0,0 +1,248 @@
+"use client";
+
+import { useMemo, useCallback, useState } from "react";
+import { useTranslations } from "next-intl";
+import { format, parseISO, isPast, isToday, isTomorrow } from "date-fns";
+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";
+import { useSettingsStore } from "@/stores/settings-store";
+
+interface TaskListViewProps {
+  tasks: CalendarTask[];
+  calendars: Calendar[];
+  selectedCalendarIds: string[];
+  filter: TaskViewFilter;
+  showCompleted: boolean;
+  onSelectTask: (task: CalendarTask) => void;
+  onToggleComplete: (task: CalendarTask) => void;
+  selectedTaskId?: string | null;
+  onQuickCreate?: (title: string) => void;
+}
+
+function getTaskPriorityIcon(priority: number) {
+  if (priority >= 1 && priority <= 4) return <Flag className="h-3.5 w-3.5 text-red-500" />;
+  if (priority === 5) return <Flag className="h-3.5 w-3.5 text-orange-500" />;
+  if (priority >= 6 && priority <= 9) return <Flag className="h-3.5 w-3.5 text-gray-400" />;
+  return null;
+}
+
+function getDueDateLabel(due: string, showWithoutTime: boolean, t: ReturnType<typeof useTranslations>, timeFormat: string): { label: string; className: string } {
+  const dueDate = parseISO(due);
+  const overdue = isPast(dueDate) && !isToday(dueDate);
+
+  if (isToday(dueDate)) {
+    return {
+      label: t("tasks.due_today"),
+      className: "text-blue-600 dark:text-blue-400",
+    };
+  }
+  if (isTomorrow(dueDate)) {
+    return {
+      label: t("tasks.due_tomorrow"),
+      className: "text-muted-foreground",
+    };
+  }
+  if (overdue) {
+    return {
+      label: t("tasks.overdue"),
+      className: "text-red-600 dark:text-red-400",
+    };
+  }
+
+  const formatted = showWithoutTime
+    ? format(dueDate, "MMM d")
+    : format(dueDate, timeFormat === "12h" ? "MMM d, h:mm a" : "MMM d, HH:mm");
+
+  return {
+    label: formatted,
+    className: "text-muted-foreground",
+  };
+}
+
+export function TaskListView({
+  tasks,
+  calendars,
+  selectedCalendarIds,
+  filter,
+  showCompleted,
+  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 => {
+      const calIds = Object.keys(task.calendarIds);
+      return calIds.some(id => selectedCalendarIds.includes(id));
+    });
+
+    if (!showCompleted) {
+      result = result.filter(task => task.progress !== "completed" && task.progress !== "cancelled");
+    }
+
+    switch (filter) {
+      case "pending":
+        result = result.filter(task => task.progress === "needs-action" || task.progress === "in-process");
+        break;
+      case "completed":
+        result = result.filter(task => task.progress === "completed");
+        break;
+      case "overdue":
+        result = result.filter(task => {
+          if (!task.due || task.progress === "completed" || task.progress === "cancelled") return false;
+          return isPast(parseISO(task.due)) && !isToday(parseISO(task.due));
+        });
+        break;
+    }
+
+    // Sort: overdue first, then by due date (no due date last), then by priority
+    result.sort((a, b) => {
+      // Completed tasks at the bottom
+      if (a.progress === "completed" && b.progress !== "completed") return 1;
+      if (a.progress !== "completed" && b.progress === "completed") return -1;
+
+      // Tasks with due dates before those without
+      if (a.due && !b.due) return -1;
+      if (!a.due && b.due) return 1;
+      if (a.due && b.due) {
+        const dateCompare = new Date(a.due).getTime() - new Date(b.due).getTime();
+        if (dateCompare !== 0) return dateCompare;
+      }
+
+      // Higher priority first (lower number = higher priority, but 0 = no priority goes last)
+      const aPri = a.priority || 10;
+      const bPri = b.priority || 10;
+      return aPri - bPri;
+    });
+
+    return result;
+  }, [tasks, selectedCalendarIds, filter, showCompleted]);
+
+  const handleToggle = useCallback((e: React.MouseEvent, task: CalendarTask) => {
+    e.stopPropagation();
+    onToggleComplete(task);
+  }, [onToggleComplete]);
+
+  if (filteredTasks.length === 0) {
+    return (
+      <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]);
+          const isCompleted = task.progress === "completed";
+          const priorityIcon = getTaskPriorityIcon(task.priority);
+          const dueDateInfo = task.due ? getDueDateLabel(task.due, task.showWithoutTime, t, timeFormat) : null;
+
+          return (
+            <div
+              key={task.id}
+              onClick={() => onSelectTask(task)}
+              className={cn(
+                "flex items-start gap-3 px-4 py-3 cursor-pointer hover:bg-muted/50 transition-colors",
+                selectedTaskId === task.id && "bg-muted",
+              )}
+            >
+              {/* Checkbox */}
+              <button
+                onClick={(e) => handleToggle(e, task)}
+                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-success border-success text-success-foreground"
+                    : "border-muted-foreground/40 hover:border-primary"
+                )}
+                aria-label={isCompleted ? t("tasks.mark_incomplete") : t("tasks.mark_complete")}
+              >
+                {isCompleted && <Check className="h-3 w-3" />}
+              </button>
+
+              {/* Content */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-1.5">
+                  <span className={cn(
+                    "text-sm font-medium truncate",
+                    isCompleted && "line-through text-muted-foreground"
+                  )}>
+                    {task.title || t("tasks.no_title")}
+                  </span>
+                  {priorityIcon}
+                </div>
+
+                <div className="flex items-center gap-2 mt-0.5">
+                  {dueDateInfo && (
+                    <span className={cn("text-xs flex items-center gap-1", dueDateInfo.className)}>
+                      <CalendarDays className="h-3 w-3" />
+                      {dueDateInfo.label}
+                    </span>
+                  )}
+                  {cal && (
+                    <span className="text-xs text-muted-foreground flex items-center gap-1">
+                      <span className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: cal.color || "#3b82f6" }} />
+                      {cal.name}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -66,8 +66,9 @@ describe('ContactForm', () => {
    const onSave = vi.fn().mockResolvedValue(undefined);
    render(<ContactForm onSave={onSave} onCancel={vi.fn()} />);

-    const inputs = screen.getAllByRole('textbox');
-    fireEvent.change(inputs[0], { target: { value: 'Jane' } });
+    const _inputs = screen.getAllByRole('textbox');
+    const givenNameInput = screen.getByPlaceholderText('given_name');
+    fireEvent.change(givenNameInput, { target: { value: 'Jane' } });

    fireEvent.submit(screen.getByText('save').closest('form')!);

@@ -23,33 +23,63 @@ const _emptyContact: ContactCard = {
 };

 describe('ContactListItem', () => {
+  const baseProps = {
+    isSelected: false,
+    isChecked: false,
+    hasSelection: false,
+    density: 'regular' as const,
+    onClick: vi.fn(),
+    onCheckboxClick: vi.fn(),
+    selectedContactIds: new Set<string>(),
+  };
+
  it('renders contact name and email', () => {
-    render(<ContactListItem contact={contact} isSelected={false} onClick={vi.fn()} />);
+    render(<ContactListItem contact={contact} {...baseProps} />);
    expect(screen.getByText('Alice Smith')).toBeInTheDocument();
    expect(screen.getByText('alice@example.com')).toBeInTheDocument();
  });

-  it('renders organization', () => {
-    render(<ContactListItem contact={contact} isSelected={false} onClick={vi.fn()} />);
+  it('renders organization in comfortable density', () => {
+    render(<ContactListItem contact={contact} {...baseProps} density="comfortable" />);
    expect(screen.getByText('Acme Corp')).toBeInTheDocument();
  });

+  it('hides organization in regular density', () => {
+    render(<ContactListItem contact={contact} {...baseProps} density="regular" />);
+    expect(screen.queryByText('Acme Corp')).not.toBeInTheDocument();
+  });
+
  it('applies selected styling', () => {
-    const { container } = render(<ContactListItem contact={contact} isSelected={true} onClick={vi.fn()} />);
-    const button = container.querySelector('button');
-    expect(button?.className).toContain('bg-accent');
+    const { container } = render(<ContactListItem contact={contact} {...baseProps} isSelected={true} />);
+    const div = container.firstElementChild;
+    expect(div?.className).toContain('bg-selection');
  });

  it('shows email as display name when no name exists', () => {
-    render(<ContactListItem contact={noNameContact} isSelected={false} onClick={vi.fn()} />);
+    render(<ContactListItem contact={noNameContact} {...baseProps} />);
    const matches = screen.getAllByText('nobody@example.com');
    expect(matches.length).toBeGreaterThanOrEqual(1);
  });

  it('calls onClick when clicked', () => {
    const onClick = vi.fn();
-    render(<ContactListItem contact={contact} isSelected={false} onClick={onClick} />);
+    render(<ContactListItem contact={contact} {...baseProps} onClick={onClick} />);
    fireEvent.click(screen.getByText('Alice Smith'));
    expect(onClick).toHaveBeenCalledOnce();
  });
+
+  it('does not show checkbox when hasSelection is false', () => {
+    const { container } = render(<ContactListItem contact={contact} {...baseProps} hasSelection={false} />);
+    expect(container.querySelector('button')).not.toBeInTheDocument();
+  });
+
+  it('shows checkbox when hasSelection is true', () => {
+    const { container } = render(<ContactListItem contact={contact} {...baseProps} hasSelection={true} />);
+    expect(container.querySelector('button')).toBeInTheDocument();
+  });
+
+  it('hides avatar in extra-compact density', () => {
+    const { container } = render(<ContactListItem contact={contact} {...baseProps} density="extra-compact" />);
+    expect(container.querySelector('[data-testid="avatar"]') || container.querySelector('.rounded-full')).toBeNull();
+  });
 });
@@ -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 },
@@ -36,15 +36,15 @@ const defaultProps = {
  onSearchChange: vi.fn(),
  onSelectContact: vi.fn(),
  onCreateNew: vi.fn(),
-  supportsSync: true,
+  categoryLabel: 'All Contacts',
  selectedContactIds: new Set<string>(),
  onToggleSelection: vi.fn(),
+  onSelectRangeContacts: vi.fn(),
  onSelectAll: vi.fn(),
  onClearSelection: vi.fn(),
  onBulkDelete: vi.fn(),
  onBulkAddToGroup: vi.fn(),
  onBulkExport: vi.fn(),
-  groups: [],
 };

 describe('ContactList', () => {
@@ -70,32 +70,14 @@ describe('ContactList', () => {
    expect(screen.getByText('empty_search')).toBeInTheDocument();
  });

-  it('shows local mode banner when supportsSync is false', () => {
-    render(<ContactList {...defaultProps} supportsSync={false} />);
-    expect(screen.getByText('local_mode')).toBeInTheDocument();
-  });
-
-  it('hides local mode banner when supportsSync is true', () => {
-    render(<ContactList {...defaultProps} supportsSync={true} />);
-    expect(screen.queryByText('local_mode')).not.toBeInTheDocument();
-  });
-
-  it('calls onCreateNew when create button is clicked', () => {
-    const onCreateNew = vi.fn();
-    render(<ContactList {...defaultProps} onCreateNew={onCreateNew} />);
-    fireEvent.click(screen.getByText('create_new'));
-    expect(onCreateNew).toHaveBeenCalledOnce();
-  });
-
  it('shows bulk action bar when contacts are selected', () => {
    render(<ContactList {...defaultProps} selectedContactIds={new Set(['1'])} />);
    expect(screen.getByText('bulk.delete')).toBeInTheDocument();
    expect(screen.getByText('bulk.export')).toBeInTheDocument();
  });

-  it('excludes groups from the list', () => {
-    render(<ContactList {...defaultProps} contacts={[alice, bob, group]} />);
-    expect(screen.getByText('Alice Smith')).toBeInTheDocument();
-    expect(screen.queryByText('Team')).not.toBeInTheDocument();
+  it('shows category label with count', () => {
+    render(<ContactList {...defaultProps} />);
+    expect(screen.getByText('All Contacts (2)')).toBeInTheDocument();
  });
 });
@@ -1,23 +1,120 @@
 "use client";

+import { useState, useEffect } from "react";
 import { useTranslations } from "next-intl";
-import { Mail, Phone, Building, MapPin, StickyNote, Pencil, Trash2, BookUser, Copy, Send } 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";
-import type { ContactCard } from "@/lib/jmap/types";
+import type { ContactCard, AnniversaryDate, PartialDate } from "@/lib/jmap/types";
 import { getContactDisplayName, getContactPrimaryEmail } from "@/stores/contact-store";
+import { useSmimeStore } from "@/stores/smime-store";
+import { parseCertificatePemOrDer, extractCertificateInfo } from "@/lib/smime/certificate-utils";
+import type { CertificateInfo } from "@/lib/smime/types";
 import { toast } from "@/stores/toast-store";

 interface ContactDetailProps {
  contact: ContactCard | null;
  onEdit: () => void;
  onDelete: () => void;
+  isMobile?: boolean;
  className?: string;
 }

-export function ContactDetail({ contact, onEdit, onDelete, className }: ContactDetailProps) {
+function formatPhoneFeatures(features?: Record<string, boolean>): string {
+  if (!features) return "";
+  return Object.keys(features).filter(k => features[k]).join(", ");
+}
+
+function formatDate(dateInput: AnniversaryDate): string {
+  // Handle RFC 9553 PartialDate objects: { year?, month?, day?, calendarScale? }
+  // Handle RFC 9553 Timestamp objects: { "@type": "Timestamp", utc: "..." }
+  if (typeof dateInput === 'object' && dateInput !== null) {
+    if (dateInput['@type'] === 'Timestamp' && typeof dateInput.utc === 'string') {
+      try {
+        const d = new Date(dateInput.utc as string);
+        if (!isNaN(d.getTime())) {
+          return d.toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" });
+        }
+      } catch { /* fallback */ }
+      return String(dateInput.utc);
+    }
+    const pd = dateInput as PartialDate;
+    const year = pd.year;
+    const month = pd.month;
+    const day = pd.day;
+    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    const parts: string[] = [];
+    if (month && monthNames[month - 1]) parts.push(monthNames[month - 1]);
+    if (day) parts.push(String(day));
+    if (year) parts.push(String(year));
+    return parts.join(' ') || String(dateInput);
+  }
+  const dateStr = String(dateInput);
+  // Handle both ISO dates and partial dates like 1990-01-15 or --01-15
+  if (dateStr.startsWith("--")) {
+    // Partial date without year
+    const parts = dateStr.substring(2).split("-");
+    const month = parseInt(parts[0], 10);
+    const day = parts[1] ? parseInt(parts[1], 10) : undefined;
+    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    return day ? `${monthNames[month - 1]} ${day}` : monthNames[month - 1];
+  }
+  try {
+    const d = new Date(dateStr);
+    if (!isNaN(d.getTime())) {
+      return d.toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" });
+    }
+  } catch { /* fallback */ }
+  return dateStr;
+}
+
+export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }: ContactDetailProps) {
  const t = useTranslations("contacts");
+  const smimeStore = useSmimeStore();
+  const [parsedCerts, setParsedCerts] = useState<Map<number, CertificateInfo>>(new Map());
+
+  const cryptoKeys = contact?.cryptoKeys ? Object.values(contact.cryptoKeys) : [];
+
+  useEffect(() => {
+    if (!contact) return;
+    let cancelled = false;
+    const parseCerts = async () => {
+      const results = new Map<number, CertificateInfo>();
+      for (let i = 0; i < cryptoKeys.length; i++) {
+        const key = cryptoKeys[i];
+        if (typeof key.uri !== 'string') continue;
+        try {
+          let derBytes: ArrayBuffer | string | null = null;
+          if (key.uri.startsWith('data:')) {
+            // data URI — extract base64 content
+            const commaIdx = key.uri.indexOf(',');
+            if (commaIdx === -1) continue;
+            const b64 = key.uri.substring(commaIdx + 1);
+            const binary = atob(b64);
+            const bytes = new Uint8Array(binary.length);
+            for (let j = 0; j < binary.length; j++) bytes[j] = binary.charCodeAt(j);
+            derBytes = bytes.buffer;
+          } else if (key.uri.startsWith('-----BEGIN')) {
+            // PEM-encoded certificate inline
+            derBytes = key.uri;
+          }
+          if (!derBytes) continue;
+          const cert = parseCertificatePemOrDer(derBytes);
+          const der = typeof derBytes === 'string' ? cert.toSchema(true).toBER(false) : derBytes;
+          const info = await extractCertificateInfo(cert, der);
+          if (!cancelled) results.set(i, info);
+        } catch { /* skip unparseable keys */ }
+      }
+      if (!cancelled) setParsedCerts(results);
+    };
+    if (cryptoKeys.length > 0) {
+      parseCerts();
+    } else {
+      setParsedCerts(new Map());
+    }
+    return () => { cancelled = true; };
+  }, [contact?.id]); // eslint-disable-line react-hooks/exhaustive-deps

  if (!contact) {
    return (
@@ -35,149 +132,420 @@ export function ContactDetail({ contact, onEdit, onDelete, className }: ContactD
  const orgs = contact.organizations ? Object.values(contact.organizations) : [];
  const addresses = contact.addresses ? Object.values(contact.addresses) : [];
  const notes = contact.notes ? Object.values(contact.notes) : [];
+  const titles = contact.titles ? Object.values(contact.titles) : [];
+  const jobTitles = titles.filter(t => t.kind !== "role");
+  const roles = titles.filter(t => t.kind === "role");
+  const onlineServices = contact.onlineServices ? Object.values(contact.onlineServices) : [];
+  const anniversaries = contact.anniversaries ? Object.values(contact.anniversaries) : [];
+  const keywords = contact.keywords ? Object.keys(contact.keywords).filter(k => contact.keywords![k]) : [];
+
+  const handleImportContactCert = async (keyIndex: number) => {
+    const key = cryptoKeys[keyIndex];
+    if (!key?.uri || typeof key.uri !== 'string') return;
+    try {
+      let derBytes: ArrayBuffer | string;
+      if (key.uri.startsWith('data:')) {
+        const commaIdx = key.uri.indexOf(',');
+        if (commaIdx === -1) return;
+        const b64 = key.uri.substring(commaIdx + 1);
+        const binary = atob(b64);
+        const bytes = new Uint8Array(binary.length);
+        for (let j = 0; j < binary.length; j++) bytes[j] = binary.charCodeAt(j);
+        derBytes = bytes.buffer;
+      } else if (key.uri.startsWith('-----BEGIN')) {
+        derBytes = key.uri;
+      } else {
+        return;
+      }
+      await smimeStore.importPublicCert(derBytes, 'contact', contact.id);
+      toast.success(t("detail.cert_imported"));
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : t("detail.cert_import_failed"));
+    }
+  };
+  const relatedTo = contact.relatedTo ? Object.entries(contact.relatedTo) : [];
+  const preferredLanguages = contact.preferredLanguages ? Object.values(contact.preferredLanguages) : [];
+  const personalInfo = contact.personalInfo ? Object.values(contact.personalInfo) : [];
+  const nicknames = contact.nicknames ? Object.values(contact.nicknames) : [];
+
+  const hasNickname = nicknames.length > 0;
+  const titleLine = jobTitles.length > 0 ? jobTitles.map(t => t.name).join(", ") : undefined;

  return (
    <div className={cn("flex flex-col h-full overflow-y-auto", className)}>
-      <div className="px-6 py-6 border-b border-border">
-        <div className="flex items-start justify-between">
+      <div className={cn("border-b border-border", isMobile ? "px-4 py-4" : "px-6 py-6")}>
+        <div className={cn("flex gap-4", isMobile ? "flex-col" : "items-start justify-between")}>
          <div className="flex items-center gap-4">
-            <Avatar name={name} email={email} size="lg" />
-            <div>
-              <h2 className="text-xl font-semibold">{name || "—"}</h2>
+            <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>
+              {hasNickname && (
+                <p className="text-sm text-muted-foreground truncate">&ldquo;{nicknames.map(n => n.name).join(", ")}&rdquo;</p>
+              )}
+              {titleLine && (
+                <p className="text-sm text-muted-foreground truncate">{titleLine}</p>
+              )}
              {orgs.length > 0 && orgs[0].name && (
-                <p className="text-sm text-muted-foreground">{orgs[0].name}</p>
+                <p className="text-sm text-muted-foreground truncate">{orgs[0].name}</p>
              )}
            </div>
          </div>
          <div className="flex gap-2">
-            <Button variant="outline" size="sm" onClick={onEdit}>
+            <Button variant="outline" size="sm" onClick={onEdit} className="touch-manipulation">
              <Pencil className="w-4 h-4 mr-1" />
              {t("form.edit_title")}
            </Button>
-            <Button variant="outline" size="sm" onClick={onDelete} className="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-950">
+            <Button variant="outline" size="sm" onClick={onDelete} className="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-950 touch-manipulation">
              <Trash2 className="w-4 h-4" />
            </Button>
          </div>
        </div>
      </div>

-      <div className="px-6 py-4 space-y-6">
-        {emails.length > 0 && (
-          <Section icon={Mail} title={t("detail.emails")}>
-            {emails.map((e, i) => (
-              <div key={i} className="flex items-center gap-2 group">
-                <a href={`mailto:${e.address}`} className="text-sm text-primary hover:underline">
-                  {e.address}
-                </a>
-                {e.contexts && (
-                  <ContextBadge contexts={e.contexts} />
-                )}
-                <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
-                  <a
-                    href={`mailto:${e.address}`}
-                    className="p-1 rounded hover:bg-muted transition-colors"
-                    title={t("detail.compose_email")}
-                    aria-label={t("detail.compose_email")}
-                  >
-                    <Send className="w-3.5 h-3.5 text-muted-foreground" />
+      <div className="px-6 py-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+          {/* Contact info */}
+          {emails.length > 0 && (
+            <Section icon={Mail} title={t("detail.emails")} category="contact">
+              {emails.map((e, i) => (
+                <div key={i} className="flex items-center gap-2 group">
+                  <a href={`mailto:${e.address}`} className="text-sm text-primary hover:underline">
+                    {e.address}
                  </a>
-                  <button
-                    onClick={async () => {
-                      try {
-                        await navigator.clipboard.writeText(e.address);
-                        toast.success(t("detail.copied"));
-                      } catch {
-                        toast.error(t("detail.copy_failed"));
-                      }
-                    }}
-                    className="p-1 rounded hover:bg-muted transition-colors"
-                    title={t("detail.copy_email")}
-                    aria-label={t("detail.copy_email")}
-                  >
-                    <Copy className="w-3.5 h-3.5 text-muted-foreground" />
-                  </button>
+                  {e.contexts && <ContextBadge contexts={e.contexts} />}
+                  {e.label && <span className="text-xs text-muted-foreground">({e.label})</span>}
+                  <div className={cn(
+                    "flex items-center gap-0.5 transition-opacity",
+                    isMobile ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+                  )}>
+                    <a
+                      href={`mailto:${e.address}`}
+                      className="p-1.5 rounded hover:bg-muted transition-colors touch-manipulation"
+                      title={t("detail.compose_email")}
+                      aria-label={t("detail.compose_email")}
+                    >
+                      <Send className="w-3.5 h-3.5 text-muted-foreground" />
+                    </a>
+                    <CopyButton value={e.address} label={t("detail.copy_email")} successMsg={t("detail.copied")} failMsg={t("detail.copy_failed")} />
+                  </div>
                </div>
-              </div>
-            ))}
-          </Section>
-        )}
+              ))}
+            </Section>
+          )}

-        {phones.length > 0 && (
-          <Section icon={Phone} title={t("detail.phones")}>
-            {phones.map((p, i) => (
-              <div key={i} className="flex items-center gap-2 group">
-                <a href={`tel:${p.number}`} className="text-sm text-primary hover:underline">
-                  {p.number}
-                </a>
-                {p.contexts && (
-                  <ContextBadge contexts={p.contexts} />
-                )}
-                <button
-                  onClick={async () => {
-                    try {
-                      await navigator.clipboard.writeText(p.number);
-                      toast.success(t("detail.copied"));
-                    } catch {
-                      toast.error(t("detail.copy_failed"));
-                    }
-                  }}
-                  className="p-1 rounded hover:bg-muted transition-colors opacity-0 group-hover:opacity-100"
-                  title={t("detail.copy_phone")}
-                  aria-label={t("detail.copy_phone")}
-                >
-                  <Copy className="w-3.5 h-3.5 text-muted-foreground" />
-                </button>
-              </div>
-            ))}
-          </Section>
-        )}
+          {phones.length > 0 && (
+            <Section icon={Phone} title={t("detail.phones")} category="contact">
+              {phones.map((p, i) => {
+                const featureStr = formatPhoneFeatures(p.features);
+                return (
+                  <div key={i} className="flex items-center gap-2 group">
+                    <a href={`tel:${p.number}`} className="text-sm text-primary hover:underline">
+                      {p.number}
+                    </a>
+                    {p.contexts && <ContextBadge contexts={p.contexts} />}
+                    {featureStr && (
+                      <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{featureStr}</span>
+                    )}
+                    <CopyButton
+                      value={p.number}
+                      label={t("detail.copy_phone")}
+                      successMsg={t("detail.copied")}
+                      failMsg={t("detail.copy_failed")}
+                      className={isMobile ? "opacity-100" : "opacity-0 group-hover:opacity-100"}
+                    />
+                  </div>
+                );
+              })}
+            </Section>
+          )}

-        {orgs.length > 0 && (
-          <Section icon={Building} title={t("detail.organizations")}>
-            {orgs.map((o, i) => (
-              <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>
-                )}
-              </div>
-            ))}
-          </Section>
-        )}
+          {(roles.length > 0 || jobTitles.length > 1) && (
+            <Section icon={Briefcase} title={t("detail.titles")} category="work">
+              {titles.map((tl, i) => (
+                <div key={i} className="text-sm flex items-center gap-2">
+                  <span>{tl.name}</span>
+                  {tl.kind && (
+                    <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{tl.kind}</span>
+                  )}
+                </div>
+              ))}
+            </Section>
+          )}

-        {addresses.length > 0 && (
-          <Section icon={MapPin} title={t("detail.addresses")}>
-            {addresses.map((a, i) => (
-              <div key={i} className="text-sm">
-                {[a.street, a.locality, a.region, a.postcode, a.country].filter(Boolean).join(", ")}
-                {a.contexts && (
-                  <ContextBadge contexts={a.contexts} />
-                )}
-              </div>
-            ))}
-          </Section>
-        )}
+          {orgs.length > 0 && (
+            <Section icon={Building} title={t("detail.organizations")} category="work">
+              {orgs.map((o, i) => (
+                <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>
+                  )}
+                </div>
+              ))}
+            </Section>
+          )}

-        {notes.length > 0 && (
-          <Section icon={StickyNote} title={t("detail.notes")}>
-            {notes.map((n, i) => (
-              <p key={i} className="text-sm whitespace-pre-wrap">{n.note}</p>
-            ))}
-          </Section>
-        )}
+          {/* Addresses span full width */}
+          {addresses.length > 0 && (
+            <div className="md:col-span-2 xl:col-span-3">
+              <Section icon={MapPin} title={t("detail.addresses")} category="location">
+                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+                  {addresses.map((a, i) => (
+                    <div key={i} className="text-sm space-y-0.5 rounded-md border border-border/60 bg-muted/30 p-3">
+                      <div>
+                        {a.full || a.fullAddress
+                          ? (a.full || a.fullAddress)
+                          : a.components && a.components.length > 0
+                            ? a.components.filter(c => c.kind !== 'separator').map(c => c.value).filter(Boolean).join(", ")
+                            : [a.street, a.locality, a.region, a.postcode, a.country].filter(Boolean).join(", ")}
+                        {a.contexts && <ContextBadge contexts={a.contexts} />}
+                      </div>
+                      {a.timeZone && (
+                        <div className="text-xs text-muted-foreground">{t("detail.timezone")}: {a.timeZone}</div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </Section>
+            </div>
+          )}
+
+          {onlineServices.length > 0 && (
+            <Section icon={Globe} title={t("detail.online_services")} category="digital">
+              {onlineServices.map((svc, i) => (
+                <div key={i} className="flex items-center gap-2 group">
+                  {typeof svc.uri === 'string' && svc.uri.startsWith("http") ? (
+                    <a href={svc.uri} target="_blank" rel="noopener noreferrer" className="text-sm text-primary hover:underline break-all">
+                      {svc.user || svc.uri}
+                    </a>
+                  ) : (
+                    <span className="text-sm break-all">{svc.user || String(svc.uri ?? '')}</span>
+                  )}
+                  {svc.service && (
+                    <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{svc.service}</span>
+                  )}
+                  {svc.contexts && <ContextBadge contexts={svc.contexts} />}
+                  <CopyButton
+                    value={svc.user || svc.uri}
+                    label={t("detail.copy_url")}
+                    successMsg={t("detail.copied")}
+                    failMsg={t("detail.copy_failed")}
+                    className={isMobile ? "opacity-100" : "opacity-0 group-hover:opacity-100"}
+                  />
+                </div>
+              ))}
+            </Section>
+          )}
+
+          {anniversaries.length > 0 && (
+            <Section icon={Cake} title={t("detail.anniversaries")} category="personal">
+              {anniversaries.map((ann, i) => (
+                <div key={i} className="flex items-center gap-2 text-sm">
+                  <span>{formatDate(ann.date)}</span>
+                  <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                    {t(`detail.anniversary_${ann.kind}`)}
+                  </span>
+                </div>
+              ))}
+            </Section>
+          )}
+
+          {personalInfo.length > 0 && (
+            <Section icon={Heart} title={t("detail.personal_info")} category="personal">
+              {personalInfo.map((pi, i) => (
+                <div key={i} className="flex items-center gap-2 text-sm">
+                  <span>{pi.value}</span>
+                  <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{t(`detail.personal_${pi.kind}`)}</span>
+                  {pi.level && (
+                    <span className="text-xs text-muted-foreground">({pi.level})</span>
+                  )}
+                </div>
+              ))}
+            </Section>
+          )}
+
+          {contact.speakToAs && (contact.speakToAs.grammaticalGender || contact.speakToAs.pronouns) && (
+            <Section icon={UserCircle} title={t("detail.gender")} category="personal">
+              <div className="text-sm">
+                {contact.speakToAs.grammaticalGender && <span>{t(`detail.gender_${contact.speakToAs.grammaticalGender}`, { defaultValue: contact.speakToAs.grammaticalGender })}</span>}
+                {contact.speakToAs.pronouns && (() => {
+                  const firstPronoun = Object.values(contact.speakToAs!.pronouns!)[0]?.pronouns;
+                  return firstPronoun ? (
+                    <span className="text-muted-foreground">{contact.speakToAs!.grammaticalGender ? " — " : ""}{firstPronoun}</span>
+                  ) : null;
+                })()}
+              </div>
+            </Section>
+          )}
+
+          {preferredLanguages.length > 0 && (
+            <Section icon={Languages} title={t("detail.languages")} category="personal">
+              {preferredLanguages.map((lang, i) => (
+                <div key={i} className="flex items-center gap-2 text-sm">
+                  <span>{lang.language}</span>
+                  {lang.contexts && <ContextBadge contexts={lang.contexts} />}
+                </div>
+              ))}
+            </Section>
+          )}
+
+          {keywords.length > 0 && (
+            <Section icon={Tag} title={t("detail.categories")} category="digital">
+              <div className="flex flex-wrap gap-1.5">
+                {keywords.map((kw, i) => (
+                  <span key={i} className="text-xs px-2 py-1 rounded-full bg-primary/10 text-primary">
+                    {kw}
+                  </span>
+                ))}
+              </div>
+            </Section>
+          )}
+
+          {relatedTo.length > 0 && (
+            <Section icon={Users} title={t("detail.related_contacts")} category="personal">
+              {relatedTo.map(([uri, rel], i) => {
+                const relType = rel.relation ? Object.keys(rel.relation).find(k => rel.relation![k]) : undefined;
+                return (
+                  <div key={i} className="flex items-center gap-2 text-sm">
+                    <span>{uri}</span>
+                    {relType && (
+                      <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{relType}</span>
+                    )}
+                  </div>
+                );
+              })}
+            </Section>
+          )}
+
+          {cryptoKeys.length > 0 && (
+            <Section icon={KeyRound} title={t("detail.crypto_keys")} category="digital">
+              {cryptoKeys.map((key, i) => {
+                const certInfo = parsedCerts.get(i);
+                const isExpired = certInfo ? new Date(certInfo.notAfter) < new Date() : false;
+                const alreadyImported = certInfo?.emailAddresses?.[0]
+                  ? !!smimeStore.getPublicCertForEmail(certInfo.emailAddresses[0])
+                  : false;
+
+                return (
+                  <div key={i} className="p-3 rounded-lg border border-border space-y-1">
+                    {certInfo ? (
+                      <>
+                        <div className="flex items-center gap-2">
+                          {isExpired ? (
+                            <ShieldAlert className="w-4 h-4 text-destructive flex-shrink-0" />
+                          ) : (
+                            <ShieldCheck className="w-4 h-4 text-primary flex-shrink-0" />
+                          )}
+                          <span className="text-sm font-medium truncate">{certInfo.subject}</span>
+                        </div>
+                        <div className="text-xs text-muted-foreground space-y-0.5 pl-6">
+                          <p>{t("detail.cert_issuer")}: {certInfo.issuer}</p>
+                          <p>
+                            {t("detail.cert_expires")}: {new Date(certInfo.notAfter).toLocaleDateString()}
+                            {isExpired && <span className="text-destructive ml-1">({t("detail.cert_expired")})</span>}
+                          </p>
+                          <p>{t("detail.cert_fingerprint")}: {certInfo.fingerprint.substring(0, 20)}...</p>
+                          {certInfo.algorithm && <p>{t("detail.cert_algorithm")}: {certInfo.algorithm}</p>}
+                        </div>
+                        {!alreadyImported && (
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="ml-4 mt-1"
+                            onClick={() => handleImportContactCert(i)}
+                          >
+                            <Download className="w-3 h-3 mr-1" />
+                            {t("detail.import_to_smime")}
+                          </Button>
+                        )}
+                        {alreadyImported && (
+                          <p className="text-xs text-green-600 pl-6 mt-1">{t("detail.cert_already_imported")}</p>
+                        )}
+                      </>
+                    ) : (
+                      <div className="text-sm break-all">
+                        {typeof key.uri === 'string' && key.uri.startsWith("http") ? (
+                          <a href={key.uri} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
+                            {key.uri}
+                          </a>
+                        ) : (
+                          <span className="text-muted-foreground">{typeof key.uri === 'string' ? `${key.uri.substring(0, 80)}${key.uri.length > 80 ? "…" : ""}` : String(key.uri ?? '')}</span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </Section>
+          )}
+
+          {(contact.calendarUri || contact.schedulingUri || contact.freeBusyUri) && (
+            <Section icon={Calendar} title={t("detail.calendar")} category="calendar">
+              {contact.calendarUri && (
+                <div className="text-sm">
+                  <span className="text-muted-foreground">{t("detail.calendar_uri")}: </span>
+                  <a href={contact.calendarUri} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline break-all">{contact.calendarUri}</a>
+                </div>
+              )}
+              {contact.schedulingUri && (
+                <div className="text-sm">
+                  <span className="text-muted-foreground">{t("detail.scheduling_uri")}: </span>
+                  <a href={contact.schedulingUri} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline break-all">{contact.schedulingUri}</a>
+                </div>
+              )}
+              {contact.freeBusyUri && (
+                <div className="text-sm">
+                  <span className="text-muted-foreground">{t("detail.freebusy_uri")}: </span>
+                  <a href={contact.freeBusyUri} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline break-all">{contact.freeBusyUri}</a>
+                </div>
+              )}
+            </Section>
+          )}
+
+          {/* Notes span full width */}
+          {notes.length > 0 && (
+            <div className="md:col-span-2 xl:col-span-3">
+              <Section icon={StickyNote} title={t("detail.notes")} category="notes">
+                {notes.map((n, i) => (
+                  <p key={i} className="text-sm whitespace-pre-wrap">{n.note}</p>
+                ))}
+              </Section>
+            </div>
+          )}
+
+          {/* Timestamps span full width */}
+          {(contact.created || contact.updated) && (
+            <div className="md:col-span-2 xl:col-span-3 pt-2 border-t border-border text-xs text-muted-foreground space-y-1">
+              {contact.created && <div>{t("detail.created")}: {formatDate(contact.created)}</div>}
+              {contact.updated && <div>{t("detail.updated")}: {formatDate(contact.updated)}</div>}
+            </div>
+          )}
+        </div>
      </div>
    </div>
  );
 }

-function Section({ icon: Icon, title, children }: { icon: React.ComponentType<{ className?: string }>; title: string; children: React.ReactNode }) {
+type SectionCategory = "contact" | "work" | "location" | "personal" | "digital" | "calendar" | "notes";
+
+const categoryStyles: Record<SectionCategory, string> = {
+  contact: "border-l-blue-400 dark:border-l-blue-500",
+  work: "border-l-amber-400 dark:border-l-amber-500",
+  location: "border-l-emerald-400 dark:border-l-emerald-500",
+  personal: "border-l-violet-400 dark:border-l-violet-500",
+  digital: "border-l-cyan-400 dark:border-l-cyan-500",
+  calendar: "border-l-rose-400 dark:border-l-rose-500",
+  notes: "border-l-stone-400 dark:border-l-stone-500",
+};
+
+function Section({ icon: Icon, title, children, category = "contact" }: { icon: React.ComponentType<{ className?: string }>; title: string; children: React.ReactNode; category?: SectionCategory }) {
  return (
-    <div>
-      <div className="flex items-center gap-2 mb-2">
+    <div className={cn("rounded-lg border border-border bg-card p-4 border-l-[3px]", categoryStyles[category])}>
+      <div className="flex items-center gap-2 mb-2.5">
        <Icon className="w-4 h-4 text-muted-foreground" />
        <h3 className="text-sm font-medium text-muted-foreground">{title}</h3>
      </div>
-      <div className="space-y-1 pl-6">{children}</div>
+      <div className="space-y-1.5 pl-6">{children}</div>
    </div>
  );
 }
@@ -187,8 +555,28 @@ function ContextBadge({ contexts }: { contexts: Record<string, boolean> }) {
  if (labels.length === 0) return null;

  return (
-    <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+    <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground ml-1">
      {labels.join(", ")}
    </span>
  );
 }
+
+function CopyButton({ value, label, successMsg, failMsg, className }: { value: string; label: string; successMsg: string; failMsg: string; className?: string }) {
+  return (
+    <button
+      onClick={async () => {
+        try {
+          await navigator.clipboard.writeText(value);
+          toast.success(successMsg);
+        } catch {
+          toast.error(failMsg);
+        }
+      }}
+      className={cn("p-1.5 rounded hover:bg-muted transition-colors touch-manipulation transition-opacity", className)}
+      title={label}
+      aria-label={label}
+    >
+      <Copy className="w-3.5 h-3.5 text-muted-foreground" />
+    </button>
+  );
+}
@@ -15,6 +15,7 @@ interface ContactGroupDetailProps {
  onDelete: () => void;
  onRemoveMember: (memberId: string) => void;
  onSelectMember: (id: string) => void;
+  isMobile?: boolean;
  className?: string;
 }

@@ -25,6 +26,7 @@ export function ContactGroupDetail({
  onDelete,
  onRemoveMember,
  onSelectMember,
+  isMobile,
  className,
 }: ContactGroupDetailProps) {
  const t = useTranslations("contacts");
@@ -32,21 +34,21 @@ export function ContactGroupDetail({

  return (
    <div className={cn("flex flex-col h-full overflow-y-auto", className)}>
-      <div className="px-6 py-6 border-b border-border">
-        <div className="flex items-start justify-between">
+      <div className={cn("border-b border-border", isMobile ? "px-4 py-4" : "px-6 py-6")}>
+        <div className={cn("flex gap-4", isMobile ? "flex-col" : "items-start justify-between")}>
          <div className="flex items-center gap-4">
-            <div className="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center">
-              <Users className="w-7 h-7 text-primary" />
+            <div className={cn("rounded-full bg-primary/10 flex items-center justify-center", isMobile ? "w-12 h-12" : "w-14 h-14")}>
+              <Users className={cn("text-primary", isMobile ? "w-6 h-6" : "w-7 h-7")} />
            </div>
            <div>
-              <h2 className="text-xl font-semibold">{groupName}</h2>
+              <h2 className={cn("font-semibold", isMobile ? "text-lg" : "text-xl")}>{groupName}</h2>
              <p className="text-sm text-muted-foreground">
                {t("groups.member_count", { count: members.length })}
              </p>
            </div>
          </div>
          <div className="flex gap-2">
-            <Button variant="outline" size="sm" onClick={onEdit}>
+            <Button variant="outline" size="sm" onClick={onEdit} className="touch-manipulation">
              <Pencil className="w-4 h-4 mr-1" />
              {t("form.edit_title")}
            </Button>
@@ -54,7 +56,7 @@ export function ContactGroupDetail({
              variant="outline"
              size="sm"
              onClick={onDelete}
-              className="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-950"
+              className="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-950 touch-manipulation"
            >
              <Trash2 className="w-4 h-4" />
            </Button>
@@ -95,7 +97,10 @@ export function ContactGroupDetail({
                  <Button
                    variant="ghost"
                    size="icon"
-                    className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+                    className={cn(
+                      "h-8 w-8 transition-opacity",
+                      isMobile ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+                    )}
                    onClick={() => onRemoveMember(member.id)}
                  >
                    <UserMinus className="w-4 h-4 text-muted-foreground" />
@@ -69,10 +69,11 @@ export function ContactGroupList({
                  key={group.id}
                  onClick={() => onSelectGroup(group.id)}
                  className={cn(
-                    "w-full flex items-center gap-3 px-4 py-3 text-left transition-colors",
+                    "w-full flex items-center px-4 text-left transition-colors",
                    "hover:bg-muted",
                    group.id === selectedGroupId && "bg-accent text-accent-foreground"
                  )}
+                  style={{ gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
                >
                  <div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                    <Users className="w-4 h-4 text-primary" />
@@ -205,7 +205,7 @@ export function ContactImportDialog({
                      )}
                    </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>
                    )}
@@ -1,44 +1,104 @@
 "use client";

+import { useCallback, type DragEvent } from "react";
 import { Avatar } from "@/components/ui/avatar";
 import { cn } from "@/lib/utils";
 import type { ContactCard } from "@/lib/jmap/types";
 import { getContactDisplayName, getContactPrimaryEmail } from "@/stores/contact-store";
+import { CheckSquare, Square } from "lucide-react";
+import type { Density } from "@/stores/settings-store";

 interface ContactListItemProps {
  contact: ContactCard;
  isSelected: boolean;
-  onClick: () => void;
+  isChecked: boolean;
+  hasSelection: boolean;
+  density: Density;
+  selectedContactIds: Set<string>;
+  onClick: (e: React.MouseEvent) => void;
+  onCheckboxClick: (e: React.MouseEvent) => void;
 }

-export function ContactListItem({ contact, isSelected, onClick }: ContactListItemProps) {
+export function ContactListItem({ contact, isSelected, isChecked, hasSelection, density, selectedContactIds, onClick, onCheckboxClick }: ContactListItemProps) {
  const name = getContactDisplayName(contact);
  const email = getContactPrimaryEmail(contact);
  const org = contact.organizations
    ? Object.values(contact.organizations)[0]?.name
    : undefined;

+  const handleDragStart = useCallback((e: DragEvent<HTMLDivElement>) => {
+    // Drag all selected contacts if this one is selected, otherwise just this one
+    const ids = selectedContactIds.has(contact.id)
+      ? Array.from(selectedContactIds)
+      : [contact.id];
+
+    e.dataTransfer.effectAllowed = "copyMove";
+    e.dataTransfer.setData("application/x-contact-ids", JSON.stringify(ids));
+    e.dataTransfer.setData("text/plain", name || email || contact.id);
+
+    // Custom drag preview
+    const preview = document.createElement("div");
+    preview.style.cssText = `
+      position: fixed; top: -9999px; left: 0;
+      padding: 8px 16px; background-color: var(--color-primary, #3b82f6);
+      color: var(--color-primary-foreground, #ffffff); border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-size: 14px; font-weight: 500;
+      z-index: 9999; white-space: nowrap; pointer-events: none;
+    `;
+    preview.textContent = ids.length === 1 ? (name || "1 contact") : `${ids.length} contacts`;
+    document.body.appendChild(preview);
+    e.dataTransfer.setDragImage(preview, 0, 0);
+    requestAnimationFrame(() => preview.remove());
+  }, [contact.id, name, email, selectedContactIds]);
+
  return (
-    <button
+    <div
+      draggable
+      onDragStart={handleDragStart}
      onClick={onClick}
      className={cn(
-        "w-full flex items-center gap-3 px-4 py-3 text-left transition-colors",
-        "hover:bg-muted",
-        isSelected && "bg-accent text-accent-foreground"
+        "w-full flex items-center cursor-pointer select-none transition-all duration-200 border-b border-border",
+        isSelected
+          ? "bg-selection shadow-sm"
+          : "bg-background hover:bg-muted hover:shadow-sm",
+        isChecked && !isSelected && "ring-2 ring-primary/20 bg-selection/60",
      )}
+      style={{ gap: 'var(--density-item-gap)', paddingInline: '16px', paddingBlock: 'var(--density-item-py)' }}
    >
-      <Avatar name={name} email={email} size="sm" />
+      {hasSelection && (
+        <button
+          onClick={onCheckboxClick}
+          className={cn(
+            "p-1 rounded flex-shrink-0 transition-all duration-200",
+            "hover:bg-muted/50 hover:scale-110",
+            "active:scale-95",
+            "animate-in fade-in zoom-in-95 duration-150",
+            isChecked && "text-primary"
+          )}
+        >
+          {isChecked ? (
+            <CheckSquare className="w-4 h-4 animate-in zoom-in-50 duration-200" />
+          ) : (
+            <Square className="w-4 h-4 text-muted-foreground opacity-60 hover:opacity-100 transition-opacity" />
+          )}
+        </button>
+      )}
+
+      {density !== 'extra-compact' && (
+        <Avatar name={name} email={email} size="sm" className="flex-shrink-0" />
+      )}
+
      <div className="flex-1 min-w-0">
        <div className="text-sm font-medium truncate">
          {name || email || "—"}
        </div>
-        {email && name && (
+        {density !== 'extra-compact' && email && name && (
          <div className="text-xs text-muted-foreground truncate">{email}</div>
        )}
-        {org && (
+        {density === 'comfortable' && org && (
          <div className="text-xs text-muted-foreground truncate">{org}</div>
        )}
      </div>
-    </button>
+    </div>
  );
 }
@@ -2,13 +2,14 @@

 import { useMemo } from "react";
 import { useTranslations } from "next-intl";
-import { Search, Plus, BookUser, Info, Check, Trash2, Users, Download, X, UserPlus, Upload } from "lucide-react";
+import { Search, BookUser, Trash2, Users, Download, X, UserPlus, CheckSquare, Square } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { ContactListItem } from "./contact-list-item";
 import { cn } from "@/lib/utils";
 import type { ContactCard } from "@/lib/jmap/types";
 import { getContactDisplayName } from "@/stores/contact-store";
+import { useSettingsStore } from "@/stores/settings-store";

 interface ContactListProps {
  contacts: ContactCard[];
@@ -17,11 +18,11 @@ interface ContactListProps {
  onSearchChange: (query: string) => void;
  onSelectContact: (id: string) => void;
  onCreateNew: () => void;
-  onImport?: () => void;
-  supportsSync: boolean;
+  categoryLabel: string;
  className?: string;
  selectedContactIds: Set<string>;
  onToggleSelection: (id: string) => void;
+  onSelectRangeContacts: (id: string, sortedIds: string[]) => void;
  onSelectAll: (ids: string[]) => void;
  onClearSelection: () => void;
  onBulkDelete: () => void;
@@ -36,11 +37,11 @@ export function ContactList({
  onSearchChange,
  onSelectContact,
  onCreateNew,
-  onImport,
-  supportsSync,
+  categoryLabel,
  className,
  selectedContactIds,
  onToggleSelection,
+  onSelectRangeContacts,
  onSelectAll,
  onClearSelection,
  onBulkDelete,
@@ -48,18 +49,27 @@ export function ContactList({
  onBulkExport,
 }: ContactListProps) {
  const t = useTranslations("contacts");
+  const density = useSettingsStore((state) => state.density);

  const filtered = useMemo(() => {
-    const individuals = contacts.filter(c => c.kind !== "group");
-    if (!searchQuery) return individuals;
+    if (!searchQuery) return contacts;
    const lower = searchQuery.toLowerCase();
-    return individuals.filter((c) => {
+    return contacts.filter((c) => {
      const name = getContactDisplayName(c).toLowerCase();
      const emails = c.emails
        ? Object.values(c.emails).map((e) => e.address.toLowerCase())
        : [];
+      const phones = c.phones
+        ? Object.values(c.phones).map((p) => p.number?.toLowerCase() || "")
+        : [];
+      const org = c.organizations
+        ? Object.values(c.organizations).map((o) => o.name?.toLowerCase() || "")
+        : [];
      return (
-        name.includes(lower) || emails.some((e) => e.includes(lower))
+        name.includes(lower) ||
+        emails.some((e) => e.includes(lower)) ||
+        phones.some((p) => p.includes(lower)) ||
+        org.some((o) => o.includes(lower))
      );
    });
  }, [contacts, searchQuery]);
@@ -72,41 +82,51 @@ export function ContactList({
    });
  }, [filtered]);

+  const sortedIds = useMemo(() => sorted.map(c => c.id), [sorted]);
+
  const hasSelection = selectedContactIds.size > 0;
  const allSelected = sorted.length > 0 && sorted.every(c => selectedContactIds.has(c.id));

  return (
    <div className={cn("flex flex-col h-full", className)}>
-      <div className="px-4 py-3 border-b border-border space-y-3">
+      {/* Search header */}
+      <div className="px-3 border-b border-border space-y-1.5" style={{ paddingBlock: 'var(--density-header-py)' }}>
        <div className="flex items-center justify-between">
-          <h2 className="text-lg font-semibold">{t("title")}</h2>
-          <Button size="sm" onClick={onCreateNew}>
-            <Plus className="w-4 h-4 mr-1" />
-            {t("create_new")}
-          </Button>
+          <span className="text-xs font-medium text-muted-foreground truncate">
+            {categoryLabel} ({contacts.length})
+          </span>
        </div>
-
        <div className="relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
          <Input
            placeholder={t("search_placeholder")}
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
-            className="pl-9"
+            className="pl-8 h-8 text-sm"
          />
        </div>
-
-        {!supportsSync && (
-          <div className="flex items-start gap-2 text-xs text-muted-foreground bg-muted rounded px-3 py-2">
-            <Info className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
-            <span>{t("local_mode")}</span>
-          </div>
-        )}
      </div>

+      {/* Bulk action bar */}
      {hasSelection && (
-        <div className="px-3 py-2 border-b border-border bg-muted/50 flex items-center gap-2 flex-wrap">
-          <span className="text-xs font-medium text-muted-foreground">
+        <div className="px-3 py-1.5 border-b border-border bg-accent/30 flex items-center gap-2 flex-wrap">
+          <button
+            onClick={() => {
+              if (allSelected) {
+                onClearSelection();
+              } else {
+                onSelectAll(sortedIds);
+              }
+            }}
+            className="p-1 rounded hover:bg-muted/50 transition-colors"
+          >
+            {allSelected ? (
+              <CheckSquare className="w-4 h-4 text-primary" />
+            ) : (
+              <Square className="w-4 h-4 text-muted-foreground" />
+            )}
+          </button>
+          <span className="text-xs font-medium text-foreground">
            {t("bulk.selected", { count: selectedContactIds.size })}
          </span>
          <div className="flex-1" />
@@ -133,43 +153,19 @@ export function ContactList({
        </div>
      )}

-      {sorted.length > 0 && (
-        <div className="px-4 py-1.5 border-b border-border flex items-center">
-          <button
-            onClick={() => {
-              if (allSelected) {
-                onClearSelection();
-              } else {
-                onSelectAll(sorted.map(c => c.id));
-              }
-            }}
-            className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
-          >
-            <div className={cn(
-              "w-4 h-4 rounded border flex items-center justify-center transition-colors",
-              allSelected
-                ? "bg-primary border-primary text-primary-foreground"
-                : "border-border"
-            )}>
-              {allSelected && <Check className="w-2.5 h-2.5" />}
-            </div>
-            {t("bulk.select_all")}
-          </button>
-        </div>
-      )}
-
+      {/* Contact list */}
      <div className="flex-1 overflow-y-auto">
        {sorted.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-full px-6 text-center">
            {searchQuery ? (
              <>
-                <Search className="w-12 h-12 mb-3 text-muted-foreground/30" />
+                <Search className="w-10 h-10 mb-3 text-muted-foreground/30" />
                <p className="text-sm font-medium text-foreground">{t("empty_search")}</p>
                <p className="text-xs text-muted-foreground mt-1">{t("empty_search_hint")}</p>
                <Button
                  variant="outline"
                  size="sm"
-                  className="mt-4"
+                  className="mt-3"
                  onClick={() => onSearchChange("")}
                >
                  {t("clear_search")}
@@ -177,52 +173,44 @@ export function ContactList({
              </>
            ) : (
              <>
-                <BookUser className="w-12 h-12 mb-3 text-muted-foreground/30" />
+                <BookUser className="w-10 h-10 mb-3 text-muted-foreground/30" />
                <p className="text-sm font-medium text-foreground">{t("empty_state_title")}</p>
                <p className="text-xs text-muted-foreground mt-1">{t("empty_state_subtitle")}</p>
-                <div className="flex gap-2 mt-4">
-                  <Button size="sm" onClick={onCreateNew}>
-                    <UserPlus className="w-4 h-4 mr-1.5" />
-                    {t("create_new")}
-                  </Button>
-                  {onImport && (
-                    <Button variant="outline" size="sm" onClick={onImport}>
-                      <Upload className="w-4 h-4 mr-1.5" />
-                      {t("import_vcard")}
-                    </Button>
-                  )}
-                </div>
+                <Button size="sm" className="mt-3" onClick={onCreateNew}>
+                  <UserPlus className="w-4 h-4 mr-1.5" />
+                  {t("create_new")}
+                </Button>
              </>
            )}
          </div>
        ) : (
-          <div className="divide-y divide-border">
+          <div>
            {sorted.map((contact) => (
-              <div key={contact.id} className="flex items-center">
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
+              <ContactListItem
+                key={contact.id}
+                contact={contact}
+                isSelected={contact.id === selectedContactId}
+                isChecked={selectedContactIds.has(contact.id)}
+                hasSelection={hasSelection}
+                density={density}
+                selectedContactIds={selectedContactIds}
+                onClick={(e) => {
+                  if (e.ctrlKey || e.metaKey) {
+                    e.preventDefault();
                    onToggleSelection(contact.id);
-                  }}
-                  className="pl-4 pr-1 py-3 flex-shrink-0"
-                >
-                  <div className={cn(
-                    "w-4 h-4 rounded border flex items-center justify-center transition-colors",
-                    selectedContactIds.has(contact.id)
-                      ? "bg-primary border-primary text-primary-foreground"
-                      : "border-border hover:border-muted-foreground"
-                  )}>
-                    {selectedContactIds.has(contact.id) && <Check className="w-2.5 h-2.5" />}
-                  </div>
-                </button>
-                <div className="flex-1 min-w-0">
-                  <ContactListItem
-                    contact={contact}
-                    isSelected={contact.id === selectedContactId}
-                    onClick={() => onSelectContact(contact.id)}
-                  />
-                </div>
-              </div>
+                  } else if (e.shiftKey) {
+                    e.preventDefault();
+                    onSelectRangeContacts(contact.id, sortedIds);
+                  } else {
+                    if (hasSelection) onClearSelection();
+                    onSelectContact(contact.id);
+                  }
+                }}
+                onCheckboxClick={(e) => {
+                  e.stopPropagation();
+                  onToggleSelection(contact.id);
+                }}
+              />
            ))}
          </div>
        )}
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .1.2
 .4.10