chore: housekeeping — rescue orphaned doc, ignore .DS_Store, adopt vnc-v0.3.0

Commits the offline-client architecture analysis doc that was sitting
untracked in docs/ — its own header already warns this exact thing
happened once before (~/vncmail-plus is a shared checkout; an earlier
untracked copy was lost to a concurrent branch switch). Confirmed the
hazard is still live: vnc/VNC-CHANGES.md itself was found deleted from
disk mid-edit by this session, by something else touching the checkout
concurrently, and had to be restored with `git checkout --` before this
commit. Committing on sight is the only defense against that, not a
process improvement for later.

Also:
- .DS_Store added to .gitignore (was untracked in docs/)
- introduces a VNC-side feature version, separate from package.json's
  upstream-tracking version (1.7.8, must stay that way per the fork's own
  rule 4 - bumping it would turn merging upstream releases into a diffing
  exercise). Retroactively bucketed at the milestone boundaries the commit
  history already has: v0.1.0 fork bootstrap, v0.2.0 S/MIME plugin
  audit+fixes, v0.3.0 the internal-CA foundation just landed. Tagged
  vnc-v0.3.0 on this commit.

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

.dockerignore

@@ -9,3 +9,8 @@ scripts/
 TODO.md
 *.md
 !README.md
+# Sibling projects / test harness - not part of the webmail image
+examples/
+integration/
+e2e/
+**/node_modules

.env.dev.example

@@ -1,11 +1,11 @@
-# Bulwark Webmail — Development Configuration
+# Bulwark Webmail - Development Configuration
 # Copy this file to .env.local to run with the built-in mock JMAP server.
-# No external mail server required — great for UI development and testing.
+# No external mail server required - great for UI development and testing.
 #
 # Usage:
 #   cp .env.dev.example .env.local
 #   npm run dev
-#   Open http://localhost:3000 — log in with any username/password.
+#   Open http://localhost:3000 - log in with any username/password.
 
 # =============================================================================
 # Mock JMAP Server
@@ -39,6 +39,16 @@ SETTINGS_SYNC_ENABLED=true
 LOG_FORMAT=text
 LOG_LEVEL=debug
 
+# =============================================================================
+# Plugin Development
+# =============================================================================
+
+# Load plugins from a directory on disk instead of installing them as ZIPs.
+# Each immediate subfolder is one plugin and needs a manifest.json. When the
+# manifest's entrypoint exists under src/, it's bundled on demand with esbuild,
+# so you can edit sources and just refresh the browser.
+# PLUGIN_DEV_DIR=../my-plugins
+
 # =============================================================================
 # Login Page Customization (optional)
 # =============================================================================
@@ -47,3 +57,8 @@ LOG_LEVEL=debug
 # LOGIN_IMPRINT_URL=https://example.com/imprint
 # LOGIN_PRIVACY_POLICY_URL=https://example.com/privacy
 # LOGIN_WEBSITE_URL=https://example.com
+
+# Per-domain branding overrides. Each entry must have "host" (exact or
+# "*.subdomain" wildcard) plus any subset of branding fields to override.
+# Unset fields fall through to the global values above.
+# DOMAIN_BRANDING=[{"host":"localhost","loginCompanyName":"Local Dev"}]

.env.example

@@ -1,4 +1,4 @@
-# Bulwark Webmail — Production Configuration
+# Bulwark Webmail - Production Configuration
 # Copy this file to .env.local and fill in your values.
 # For development with the built-in mock server, see .env.dev.example instead.
 
@@ -6,12 +6,29 @@
 # JMAP Server (required)
 # =============================================================================
 
-# App name displayed in the UI
+# App name displayed in the UI, browser tab title, and PWA manifest.
 APP_NAME=Bulwark Webmail
 
-# URL of your JMAP-compatible mail server (required)
+# URL of your JMAP-compatible mail server (required unless ALLOW_CUSTOM_JMAP_ENDPOINT is set)
 JMAP_SERVER_URL=https://your-jmap-server.com
 
+# Allow users to specify a custom JMAP server URL on the login form.
+# When enabled, a "JMAP Server" field appears on the login page.
+# Users can connect to any JMAP-compatible server.
+# NOTE: External JMAP servers must include this domain in their CORS
+# Access-Control-Allow-Origin header, or browser requests will be blocked.
+# ALLOW_CUSTOM_JMAP_ENDPOINT=true
+
+# Offer several JMAP servers on the login form. JSON array; each entry needs
+# id, label, and url. "domains" and a per-server "oauth" block are optional.
+# Prefer configuring this from the admin dashboard - the env form exists for
+# stateless deployments.
+# JMAP_SERVERS=[{"id":"eu","label":"Europe","url":"https://eu.example.com","domains":["example.com"]},{"id":"us","label":"US","url":"https://us.example.com","oauth":{"clientId":"webmail-us"}}]
+
+# Pick the server automatically from the domain of the address the user types,
+# matching against each entry's "domains" list. Default: false.
+# JMAP_SERVER_AUTO_PICK_BY_DOMAIN=true
+
 # =============================================================================
 # Stalwart Mail Server Integration
 # =============================================================================
@@ -20,11 +37,6 @@ JMAP_SERVER_URL=https://your-jmap-server.com
 # Set to "false" to disable if using a non-Stalwart JMAP server.
 # STALWART_FEATURES=true
 
-# If your reverse proxy doesn't forward Stalwart management API paths
-# (/api/account/*, /api/principal/*), set this to the URL where Stalwart's
-# HTTP listener is directly reachable. Defaults to JMAP_SERVER_URL if not set.
-# STALWART_API_URL=https://admin.example.com
-
 # =============================================================================
 # OAuth / OpenID Connect (optional)
 # =============================================================================
@@ -41,10 +53,35 @@ JMAP_SERVER_URL=https://your-jmap-server.com
 
 # OAuth client secret (server-side only, never exposed to the browser)
 # OAUTH_CLIENT_SECRET=your-client-secret
+# Alternatively, you can specify the path to a file containing the OAuth client secret.
+# OAUTH_CLIENT_SECRET_FILE=/oauth-client-secret
 
 # OpenID Connect issuer URL for discovery
 # OAUTH_ISSUER_URL=https://your-idp.example.com
 
+# Overrides only the user-facing authorize endpoint (e.g. a per-brand login
+# host). Discovery, token exchange and refresh keep using OAUTH_ISSUER_URL.
+# Leave unset to use the authorization_endpoint from discovery.
+# OAUTH_AUTHORIZE_URL=https://login.your-brand.example.com/application/o/authorize/
+
+# Allow OAuth discovery to resolve to private (RFC-1918 / loopback) addresses.
+# Off by default as an SSRF guard. Enable for split-DNS deployments where the
+# OAuth issuer's public hostname resolves to an internal IP from this server.
+# OAUTH_ALLOW_PRIVATE_ENDPOINTS=true
+
+# Replace the scopes requested at authorization. Space-separated. Leave unset
+# to use the defaults the client already asks for.
+# OAUTH_SCOPES=openid email profile offline_access
+
+# Append scopes instead of replacing them. Use this when your IdP needs one
+# extra scope and you don't want to restate the defaults.
+# OAUTH_EXTRA_SCOPES=groups
+
+# Send the user straight to the identity provider, skipping the login form.
+# Intended for embedded deployments where the parent app already authenticated
+# them. Default: false.
+# AUTO_SSO_ENABLED=true
+
 # =============================================================================
 # Session & Security
 # =============================================================================
@@ -53,6 +90,8 @@ JMAP_SERVER_URL=https://your-jmap-server.com
 # Required for both "Remember me" and settings sync features.
 # Generate with: openssl rand -base64 32
 # SESSION_SECRET=your-secret-key-here
+# Alternatively, you can specify the path to a file containing the session secret.
+# SESSION_SECRET_FILE=/session-secret
 
 # =============================================================================
 # Settings Sync
@@ -64,9 +103,69 @@ JMAP_SERVER_URL=https://your-jmap-server.com
 # SETTINGS_SYNC_ENABLED=true
 
 # Directory for storing encrypted settings files (default: ./data/settings).
-# For Docker, mount a persistent volume at this path.
+# For Docker, the working directory is /app, so the default resolves to
+# /app/data/settings - mount a persistent volume there (see docker-compose.yml).
 # SETTINGS_DATA_DIR=./data/settings
 
+# =============================================================================
+# Admin Dashboard Data
+# =============================================================================
+
+# Admin data is split across two directories so the config volume can be
+# mounted read-only after the setup wizard completes (see issue #226).
+#
+# Config dir - operator-authored state. Holds config.json, policy.json,
+# admin.json (passwordHash only), plugin-config/, plugins/, themes/, and
+# branding uploads. Safe to mount read-only after setup.
+# Default: ./data/admin (or ADMIN_DATA_DIR if that legacy variable is set)
+# ADMIN_CONFIG_DIR=./data/admin
+#
+# State dir - runtime mutations. Holds admin-state.json (login timestamps),
+# audit.log, and the bootstrap setup token. Always read-write.
+# Default: ./data/admin-state (or ADMIN_DATA_DIR/state when ADMIN_DATA_DIR
+#          is set, for back-compat with single-volume installs)
+# ADMIN_STATE_DIR=./data/admin-state
+#
+# Set to "true" to enforce read-only mode at the application layer (cleaner
+# error than a mid-request EROFS). Pair with `:ro` on the config-volume mount.
+# ADMIN_CONFIG_READONLY=true
+#
+# Legacy: a single dir containing both config and state. Honoured if neither
+# of the split variables is set. New installs should use the split vars.
+# ADMIN_DATA_DIR=./data/admin
+
+# =============================================================================
+# Anonymous Telemetry
+# =============================================================================
+
+# Anonymous instance telemetry is OPT-IN and disabled by default. Enabling it
+# helps us understand how Bulwark is used so we can make the product better.
+# Heartbeats contain no PII: version, platform, bucketed account counts, and
+# feature toggles only - never email addresses, hostnames, or IPs. See
+# https://bulwarkmail.org/docs/legal/privacy/telemetry for the full schema.
+#
+# Enable telemetry (also toggleable in the admin UI):
+# BULWARK_TELEMETRY=on
+#
+# Setting this (on or off) locks the choice and disables the admin UI toggle.
+
+# Directory for telemetry state: instance id, consent, login HMACs
+# (default: ./data/telemetry). For Docker, the default resolves to
+# /app/data/telemetry - mount a persistent volume there (see docker-compose.yml)
+# so the instance id and consent choice survive upgrades.
+# TELEMETRY_DATA_DIR=./data/telemetry
+
+# Legacy kill switch, honoured only when BULWARK_TELEMETRY is unset.
+# BULWARK_TELEMETRY_DISABLED=1
+
+# Let heartbeats reach a private/loopback address. Off by default as an SSRF
+# guard; only useful when running a collector locally during development.
+# BULWARK_TELEMETRY_ALLOW_PRIVATE=1
+
+# Report a fixed Stalwart version instead of probing the JMAP server's Server
+# header. Useful when a proxy strips that header.
+# STALWART_VERSION=0.16.0
+
 # =============================================================================
 # Server Listen Address
 # =============================================================================
@@ -92,43 +191,258 @@ JMAP_SERVER_URL=https://your-jmap-server.com
 # Branding (all optional)
 # =============================================================================
 
-# Custom favicon for the browser tab.
+# ---------------------------------------------------------------------------
+# App identity
+# ---------------------------------------------------------------------------
+
+# Short name for the app, used in contexts where space is limited
+# (e.g. home screen label on mobile). Defaults to APP_NAME if not set.
+# APP_SHORT_NAME=Bulwark
+
+# Description shown in the PWA manifest (displayed by the OS during install).
+# Defaults to a generic Bulwark description if not set.
+# APP_DESCRIPTION=Your personal webmail
+
+# ---------------------------------------------------------------------------
+# Icons & favicon
+# ---------------------------------------------------------------------------
+
+# Custom favicon shown in the browser tab.
 # Supported formats: SVG (recommended), PNG, ICO.
-# Recommended size: 32×32px minimum, 512×512px maximum (or SVG for best scaling).
+# Can be an absolute URL (https://...) or a path relative to the public/ directory.
-# Can be an absolute URL or a path relative to the public/ directory.
 # Defaults to the Bulwark favicon if not set.
 # FAVICON_URL=/branding/my-favicon.svg
 
-# Custom logos for the sidebar (shown in the main app after login).
+# Source image used to auto-generate PWA icons (192×192 and 512×512 PNG).
+# Supported formats: SVG (recommended for best quality) or PNG (≥512×512px recommended).
+# Can be an absolute URL (https://...) or a path relative to the public/ directory.
+# Falls back to FAVICON_URL if not set, and to the default Bulwark icons if neither is set.
+# PWA_ICON_URL=/branding/my-icon.svg
+
+# ---------------------------------------------------------------------------
+# PWA appearance
+# ---------------------------------------------------------------------------
+
+# Color applied to the browser UI chrome when the app is installed as a PWA
+# (address bar, status bar on Android). Default: #ffffff
+# PWA_THEME_COLOR=#3b82f6
+
+# Background color shown on the PWA splash screen while the app is loading.
+# Should match your app's main background color. Default: #ffffff
+# PWA_BACKGROUND_COLOR=#ffffff
+
+# Screenshots shown in the browser's install prompt. Absolute URLs or paths
+# relative to public/. Both are optional; per-domain overrides are available
+# through DOMAIN_BRANDING.
+# PWA_SCREENSHOT_MOBILE_URL=/branding/screenshot-mobile.png
+# PWA_SCREENSHOT_DESKTOP_URL=/branding/screenshot-desktop.png
+
+# ---------------------------------------------------------------------------
+# Logos
+# ---------------------------------------------------------------------------
+
+# Logos shown in the sidebar (main app, after login).
 # Supported formats: SVG (recommended), PNG, WebP.
-# Recommended size: min 24×24px, max 128×128px
+# Recommended size: min 24×24px, max 128×128px.
 # Can be absolute URLs or paths relative to the public/ directory.
 # If not set, no logo is shown in the sidebar.
 # APP_LOGO_LIGHT_URL=/branding/my-logo-color.svg
 # APP_LOGO_DARK_URL=/branding/my-logo-white.svg
 
-# Custom logo images for the login page.
+# Logos shown on the login page.
 # Supported formats: SVG (recommended), PNG, WebP.
-# Recommended size: min 32×32px, max 512×512px
+# Recommended size: min 32×32px, max 512×512px.
 # Can be absolute URLs or paths relative to the public/ directory.
-# Light mode logo (shown on light backgrounds), defaults to Bulwark logo.
+# Light mode logo (shown on light backgrounds). Defaults to the Bulwark logo.
 LOGIN_LOGO_LIGHT_URL=/branding/Bulwark_Logo_Color.svg
-#
+# Dark mode logo (shown on dark backgrounds). Defaults to the Bulwark white logo.
-# Dark mode logo (shown on dark backgrounds), defaults to Bulwark white logo.
 LOGIN_LOGO_DARK_URL=/branding/Bulwark_Logo_Color.svg
 
-# Company or organization name displayed above the version on the login page
+# ---------------------------------------------------------------------------
+# Login page
+# ---------------------------------------------------------------------------
+
+# Company name shown above the version number on the login page.
 LOGIN_COMPANY_NAME=Bulwark Webmail
 
-# URL for the imprint/legal notice link on the login page
+# URL for the imprint / legal notice link on the login page.
 # LOGIN_IMPRINT_URL=https://example.com/imprint
 
-# URL for the privacy policy link on the login page
+# URL for the privacy policy link on the login page.
 # LOGIN_PRIVACY_POLICY_URL=https://example.com/privacy
 
-# URL for the company website link on the login page
+# URL for the company website link on the login page.
 LOGIN_WEBSITE_URL=https://bulwarkmail.org
 
+# Cap the login logo's rendered size. Any CSS length ("120px", "8rem").
+# Unset means the logo renders at its natural size.
+# LOGIN_LOGO_MAX_HEIGHT=96px
+# LOGIN_LOGO_MAX_WIDTH=320px
+
+# Hide parts of the login page. All default to true.
+# Turn the heading and subtitle off when the logo already reads as the brand.
+# LOGIN_SHOW_HEADING=false
+# LOGIN_SHOW_SUBTITLE=false
+#
+# Hide the optional TOTP field. A server that requires TOTP (totp_required)
+# still shows it regardless of this setting.
+# LOGIN_SHOW_TOTP=false
+#
+# Hide the version number, so it isn't disclosed to unauthenticated visitors.
+# LOGIN_SHOW_VERSION=false
+
+# ---------------------------------------------------------------------------
+# Per-domain branding overrides (optional)
+# ---------------------------------------------------------------------------
+#
+# When you serve the webmail on multiple hostnames, each hostname can override
+# a subset of branding fields. Unset fields fall back to the global values
+# above. Match is on the request's Host (or X-Forwarded-Host) header.
+#
+# Use the leftmost label "*." to match any subdomain (e.g. "*.example.com"
+# matches mail.example.com and any deeper subdomain, but NOT example.com).
+# Exact matches always win over wildcards; the longest wildcard suffix wins
+# among multiple wildcard matches.
+#
+# Overridable keys: appName, appShortName, appDescription, faviconUrl,
+# pwaIconUrl, pwaThemeColor, pwaBackgroundColor, appLogoLightUrl,
+# appLogoDarkUrl, loginLogoLightUrl, loginLogoDarkUrl, loginCompanyName,
+# loginImprintUrl, loginPrivacyPolicyUrl, loginWebsiteUrl.
+#
+# Prefer setting this from the admin dashboard (PATCH /api/admin/config).
+# The env-var form is provided for stateless deployments.
+#
+# DOMAIN_BRANDING=[{"host":"maildomain1.com","loginCompanyName":"Company One","loginLogoLightUrl":"/branding/one-color.svg","loginLogoDarkUrl":"/branding/one-white.svg","loginWebsiteUrl":"https://one.example"},{"host":"maildomain2.com","loginCompanyName":"Company Two","faviconUrl":"/branding/two-favicon.svg"},{"host":"*.intranet.example.com","loginCompanyName":"Internal"}]
+
+# =============================================================================
+# Extension Directory / Marketplace
+# =============================================================================
+
+# URL of the BulwarkMail extension directory for the admin marketplace.
+# Defaults to https://extensions.bulwarkmail.org. Override only if you run
+# your own directory (e.g. http://localhost:3001 for local development).
+# EXTENSION_DIRECTORY_URL=https://extensions.bulwarkmail.org
+
+# =============================================================================
+# Admin Dashboard Access
+# =============================================================================
+
+# Bootstrap password for the admin dashboard. Read only when admin.json does
+# not already exist; the app hashes it, writes admin.json, and logs a warning
+# telling you to remove this variable. Without it (and without the setup
+# wizard) the admin dashboard stays disabled.
+# Accepts a plaintext password or an existing hash.
+# ADMIN_PASSWORD=change-me
+
+# Admin session lifetime in seconds. Default: 3600 (1 hour).
+# ADMIN_SESSION_TTL=3600
+
+# How many trusted reverse proxies sit in front of the app. The client IP is
+# taken that many entries from the right of X-Forwarded-For, so an attacker
+# can't spoof it by prepending values. Default: 1.
+# TRUSTED_PROXY_DEPTH=2
+
+# Allow search engines to index the app (robots.txt / noindex). Default: false.
+# SEARCH_ENGINE_INDEXING=true
+
+# =============================================================================
+# Cookies, Embedding & Reverse Proxies
+# =============================================================================
+
+# SameSite attribute for session cookies: lax (default), strict, or none.
+# Embedding the app cross-origin in an iframe requires "none".
+# COOKIE_SAME_SITE=none
+
+# Force the Secure flag on cookies. Defaults to on when NODE_ENV=production or
+# COOKIE_SAME_SITE=none. Set to false only for local HTTP development.
+# COOKIE_SECURE=false
+
+# Who may frame the app, as a CSP frame-ancestors value. Defaults to 'none',
+# which blocks all framing. Space-separate multiple origins.
+# ALLOWED_FRAME_ANCESTORS=https://portal.example.com
+
+# Origin of the parent page when embedded, used for postMessage handshakes.
+# NEXT_PUBLIC_PARENT_ORIGIN=https://portal.example.com
+
+# =============================================================================
+# Update Check
+# =============================================================================
+
+# The app periodically checks for new releases and shows a notice. Set to
+# "off" (or false/0/no) to disable the check entirely.
+# BULWARK_UPDATE_CHECK=off
+
+# Override the endpoint it checks. Takes priority over the on-disk state file.
+# An explicit empty value also disables the check.
+# BULWARK_UPDATE_CHECK_URL=https://updates.example.com/bulwark.json
+
+# Where the check stores its state. Default: ./data/version-check
+# VERSION_CHECK_DATA_DIR=./data/version-check
+
+# =============================================================================
+# Translation Proxy (optional)
+# =============================================================================
+
+# /api/translate defaults to the public MyMemory API, which needs no setup.
+# Point it at a LibreTranslate instance instead to keep message text on
+# infrastructure you control. LibreTranslate also auto-detects the source
+# language natively.
+# LIBRETRANSLATE_URL=https://libretranslate.example.com
+# LIBRETRANSLATE_API_KEY=
+
+# =============================================================================
+# Web Push
+# =============================================================================
+
+# Push notifications go through a hosted relay so self-hosters don't need
+# their own VAPID keys and Firebase project. Point this at your own relay to
+# avoid the default. Build-time variable.
+# Default: https://notifications.relay.bulwarkmail.org
+# NEXT_PUBLIC_PUSH_RELAY_URL=https://push.example.com
+
+# =============================================================================
+# Demo Mode
+# =============================================================================
+
+# Serve fixture data instead of talking to a mail server. Default: false.
+# DEMO_MODE=true
+
+# =============================================================================
+# Stalwart Impersonation (advanced)
+# =============================================================================
+
+# Lets a trusted platform mint a JWT that logs a user in without their
+# password, using a Stalwart master account. Intended for embedded
+# deployments where an outer platform already authenticated the user.
+#
+# SECURITY: this grants sign-in as any mailbox on the server. The endpoint
+# returns 404 unless all three required variables below are set, so leaving
+# them unset keeps the feature fully off. Treat the secret and the master
+# password as you would a root credential.
+#
+# BULWARK_JWT_AUTH_SECRET=            # required, >= 32 characters
+# BULWARK_STALWART_MASTER_USER=       # required, e.g. master@example.com
+# BULWARK_STALWART_MASTER_PASSWORD=   # required
+# BULWARK_JWT_AUTH_ISSUER=            # optional, default "platform-api/webmail"
+
+# =============================================================================
+# Internationalization
+# =============================================================================
+# These are build-time variables - to change them with the published Docker
+# image, rebuild it with --build-arg (see README "Default UI locale").
+#
+# Fallback UI locale used when the visitor's Accept-Language header does not
+# match any supported locale. Defaults to "en".
+# Supported: ar, ca, cs, da, de, en, es, fa, fr, he, hu, it, ja, ko, lv, nl, pl,
+#            pt, ro, ru, sk, tr, uk, zh
+# An unsupported value falls back to "en".
+# NEXT_PUBLIC_DEFAULT_LOCALE=tr
+
+# Locale prefix mode for URLs. Recommended "always" when proxying under a
+# subpath (NEXT_PUBLIC_BASE_PATH) to avoid next-intl rewrite loops.
+# Values: never (default) | always | as-needed
+# NEXT_PUBLIC_LOCALE_PREFIX=always
+
 # =============================================================================
 # Legacy Build-time Variables (still supported as fallback)
 # =============================================================================

.github/FUNDING.yml

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

.github/workflows/docker-publish-releases.yml

@@ -0,0 +1,231 @@
+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 }}
+          build-args: |
+            GIT_COMMIT=${{ github.sha }}
+          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 }}
+
+  build-always:
+    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 }}
+          build-args: |
+            GIT_COMMIT=${{ github.sha }}
+            NEXT_PUBLIC_LOCALE_PREFIX=always
+          outputs: type=image,name=${{ env.IMAGE_NAME }},push-by-digest=true,name-canonical=true,push=true
+          cache-from: type=gha,scope=always-${{ matrix.platform }}
+          cache-to: type=gha,mode=max,scope=always-${{ matrix.platform }}
+
+      - name: Export digest
+        run: |
+          mkdir -p /tmp/digests-always
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests-always/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-always-${{ matrix.platform == 'linux/amd64' && 'amd64' || 'arm64' }}
+          path: /tmp/digests-always/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge-always:
+    runs-on: ubuntu-latest
+    needs: build-always
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v4
+        with:
+          path: /tmp/digests-always
+          pattern: digests-always-*
+          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 }}
+          flavor: |
+            suffix=-always,onlatest=true
+          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-always
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.IMAGE_NAME }}@sha256:%s ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}

.github/workflows/docker-publish.yml

@@ -2,7 +2,9 @@ name: Publish Docker Image
 
 on:
   push:
-    branches: [main]
+    branches:
+      - main
+      - dev
     paths:
       - "Dockerfile"
       - ".dockerignore"
@@ -17,14 +19,25 @@ on:
       - "package.json"
       - "package-lock.json"
       - ".github/workflows/docker-publish.yml"
-    tags: ["v*.*.*"]
   workflow_dispatch:
 
-env:
-  IMAGE_NAME: ghcr.io/${{ github.repository }}
-
 jobs:
+  prepare:
+    runs-on: ubuntu-latest
+    outputs:
+      image_name: ${{ steps.set.outputs.image_name }}
+    steps:
+      - name: Set image name
+        id: set
+        run: |
+          if [ "${{ github.ref_name }}" = "main" ]; then
+            echo "image_name=ghcr.io/${{ github.repository }}-beta" >> $GITHUB_OUTPUT
+          else
+            echo "image_name=ghcr.io/${{ github.repository }}-${{ github.ref_name }}" >> $GITHUB_OUTPUT
+          fi
+
   build:
+    needs: prepare
     strategy:
       fail-fast: false
       matrix:
@@ -56,7 +69,7 @@ jobs:
         id: meta
         uses: docker/metadata-action@v5
         with:
-          images: ${{ env.IMAGE_NAME }}
+          images: ${{ needs.prepare.outputs.image_name }}
 
       - name: Build and push by digest
         id: build
@@ -65,7 +78,9 @@ jobs:
           context: .
           platforms: ${{ matrix.platform }}
           labels: ${{ steps.meta.outputs.labels }}
-          outputs: type=image,name=${{ env.IMAGE_NAME }},push-by-digest=true,name-canonical=true,push=true
+          build-args: |
+            GIT_COMMIT=${{ github.sha }}
+          outputs: type=image,name=${{ needs.prepare.outputs.image_name }},push-by-digest=true,name-canonical=true,push=true
           cache-from: type=gha,scope=${{ matrix.platform }}
           cache-to: type=gha,mode=max,scope=${{ matrix.platform }}
 
@@ -85,7 +100,7 @@ jobs:
 
   merge:
     runs-on: ubuntu-latest
-    needs: build
+    needs: [prepare, build]
     permissions:
       contents: read
       packages: write
@@ -112,19 +127,17 @@ jobs:
         id: meta
         uses: docker/metadata-action@v5
         with:
-          images: ${{ env.IMAGE_NAME }}
+          images: ${{ needs.prepare.outputs.image_name }}
           tags: |
-            type=raw,value=latest,enable={{is_default_branch}}
+            type=raw,value=latest
-            type=semver,pattern={{version}}
+            type=sha
-            type=semver,pattern={{major}}.{{minor}}
-            type=sha,prefix=
 
       - name: Create manifest list and push
         working-directory: /tmp/digests
         run: |
           docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
-            $(printf '${{ env.IMAGE_NAME }}@sha256:%s ' *)
+            $(printf '${{ needs.prepare.outputs.image_name }}@sha256:%s ' *)
 
       - name: Inspect image
         run: |
-          docker buildx imagetools inspect ${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}
+          docker buildx imagetools inspect ${{ needs.prepare.outputs.image_name }}:${{ steps.meta.outputs.version }}

.github/workflows/standalone-release.yml

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

.gitignore

@@ -46,4 +46,18 @@ next-env.d.ts
 /data/
 
 # Local private data
-/local-data/
+/local-data/
+
+# Sibling repos
+/repos/
+
+# k8s deploy secret (create from deploy/k8s/secret.example.yaml)
+/deploy/k8s/secret.yaml
+
+# S/MIME plugin build output (rebuild with: cd vnc/plugins/smime && npm run build)
+vnc/plugins/smime/node_modules/
+vnc/plugins/smime/dist/
+vnc/plugins/smime/smime-vnc.zip
+
+# macOS
+.DS_Store

.husky/commit-msg

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

CONTRIBUTING.md

@@ -1,20 +1,34 @@
 <div align="center">
 
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="public/branding/Bulwark%20Logo%20with%20Lettering%20White%20and%20Color.svg" />
+  <source media="(prefers-color-scheme: dark)" srcset="public/branding/Bulwark_Logo_with_Lettering_White_and_Color.svg" />
-  <source media="(prefers-color-scheme: light)" srcset="public/branding/Bulwark%20Logo%20with%20Lettering%20Dark%20Color.svg" />
+  <source media="(prefers-color-scheme: light)" srcset="public/branding/Bulwark_Logo_with_Lettering_Dark_Color.svg" />
-  <img src="public/branding/Bulwark%20Logo%20with%20Lettering%20Dark%20Color.svg" alt="Bulwark Webmail" width="220" />
+  <img src="public/branding/Bulwark_Logo_with_Lettering_Dark_Color.svg" alt="Bulwark Webmail" width="280" />
 </picture>
 
 </div>
 
 # Contributing to Bulwark Webmail
 
-Thank you for your interest in contributing to Bulwark Webmail! This document provides guidelines and information for contributors.
+We're writing the webmail we wanted in 2026 and didn't find: a JMAP-native client with an interface built this decade. It's AGPL and self-hosted, run by the people who use it rather than sold to them.
 
-## Getting Started
+If that sounds like your kind of project, we'd love the help.
 
-### Development Setup
+## Join the community
+
+You don't need to be an expert to contribute. A dev environment that won't start, a bug you're not sure how to report, a translation you're stuck on: Discord is the fastest way to get unstuck and to meet the people working on this.
+
+- **Get support** - real-time help with development hurdles
+- **Share ideas** - feature suggestions, design feedback, doc improvements
+- **Collaborate** - meet the team and other contributors
+
+[**Join the Bulwark Discord Server**](https://discord.gg/tYCujymGrT)
+
+---
+
+## Getting started
+
+### Development setup
 
 1. **Fork and clone** the repository:
 
@@ -32,16 +46,22 @@ Thank you for your interest in contributing to Bulwark Webmail! This document pr
 3. **Set up environment**:
 
    ```bash
-   cp .env.example .env.local
+   cp .env.dev.example .env.local
-   # Edit .env.local with your JMAP server URL
    ```
 
+   This enables the built-in mock JMAP server (`DEV_MOCK_JMAP=true`), so you can
+   develop without a mail server. Log in with any username and password. To work
+   against a real server instead, copy `.env.example` and set `JMAP_SERVER_URL`.
+
 4. **Start development server**:
+
    ```bash
    npm run dev
    ```
 
-### Code Quality
+   Then open http://localhost:3000.
+
+### Code quality
 
 Before submitting a pull request, ensure your code passes all checks:
 
@@ -58,7 +78,20 @@ npm run lint:fix
 
 These checks run automatically on commit via Husky pre-commit hooks.
 
-## Code Style Guidelines
+### Testing
+
+| Suite            | Command                    | What it covers                                                     |
+| ---------------- | -------------------------- | ------------------------------------------------------------------ |
+| **Unit**         | `npx vitest run`           | Vitest + jsdom. Tests live in `__tests__/` folders next to the code |
+| **Translations** | `npm run test:translations` | Locale files checked for structural drift against English           |
+| **Integration**  | `npm run test:integration`  | Playwright against a real Stalwart server in Docker                 |
+| **E2E smoke**    | `npx playwright test`      | UI smoke tests against `npm run dev`                                |
+
+Run a single unit test file with `npx vitest run lib/__tests__/<name>.test.ts`, or `npx vitest` to watch.
+
+The integration suite needs Docker and takes several minutes; it has its own setup notes and findings log in [integration/README.md](integration/README.md). New behavior that touches mail/folder synchronization or multi-account handling belongs there.
+
+## Code style guidelines
 
 ### TypeScript
 
@@ -67,7 +100,7 @@ These checks run automatically on commit via Husky pre-commit hooks.
 - Avoid `any` types when possible
 - Use meaningful variable and function names
 
-### React Components
+### React components
 
 - Use functional components with hooks
 - Keep components focused and single-purpose
@@ -83,44 +116,53 @@ These checks run automatically on commit via Husky pre-commit hooks.
 
 ## Internationalization (i18n)
 
-This project uses **next-intl** for internationalization. Please follow these guidelines:
+This project uses **next-intl**. English (`/locales/en/common.json`) is the source of truth; we ship 23 additional locales (ar, ca, cs, da, de, es, fa, fr, he, hu, it, ja, ko, lv, nl, pl, pt, ro, ru, sk, tr, uk, zh).
 
-### Key Rules
+Arabic, Hebrew, and Persian render right-to-left (see `i18n/direction.ts`). Use Tailwind's **logical** utilities (`ms-*`/`me-*`, `ps-*`/`pe-*`, `start-*`/`end-*`) rather than physical ones (`ml-*`, `pl-*`, `left-*`) so layouts flip correctly. For popovers positioned in JS via `getBoundingClientRect()`, check `isDocumentRTL()`: inline `position: fixed` styles don't pick up logical utilities.
 
-1. **Never hardcode user-facing text** - Always use translations:
+### Rules
+
+1. **Never hardcode user-facing text** - always use translations:
 
    ```tsx
    const t = useTranslations("namespace");
    return <div>{t("key")}</div>;
    ```
 
-2. **Translation file locations**:
+2. **Add new keys to `en/common.json` first.** Other locales can follow in the same PR or a follow-up - missing keys fall back to English.
-   - English: `/locales/en/common.json`
-   - French: `/locales/fr/common.json`
 
 3. **Namespace organization**:
-   - `login.*` - Login page strings
+   - `login.*` - login page
-   - `sidebar.*` - Sidebar navigation
+   - `sidebar.*` - sidebar navigation
-   - `email_list.*` - Email list component
+   - `email_list.*` - email list
-   - `email_viewer.*` - Email viewer component
+   - `email_viewer.*` - email viewer
-   - `email_composer.*` - Email composer
+   - `email_composer.*` - composer
-   - `common.*` - Shared strings
+   - `settings.*` - settings page
-   - `notifications.*` - Toast/alert messages
+   - `notifications.*` - toasts and alerts
-   - `settings.*` - Settings page
+   - `common.*` - shared strings
 
-4. **Adding new strings**:
+4. **Locale-aware navigation**:
-   - Add to **both** English and French translation files
-   - Use descriptive, hierarchical keys
-   - Keep translations consistent in tone
 
-5. **Locale-aware navigation**:
    ```tsx
    router.push(`/${params.locale}/settings`);
    ```
 
-## Pull Request Process
+### Adding a new locale
 
-### Before Submitting
+Registering a new locale takes edits in four places:
+
+1. `locales/<code>/common.json` - copy `locales/en/common.json` and translate
+2. `i18n/routing.ts` - add the code to `SUPPORTED_LOCALES`
+3. `i18n/request.ts` - add a `case` to the static-import switch
+4. `components/ui/language-switcher.tsx` - add `{ value, label }` with the **native** language name, plus a flag in `components/ui/flag-icons.tsx`
+
+For a right-to-left language, also add the code to `rtlLocales` in `i18n/direction.ts`.
+
+Run `npm run test:translations` afterwards - it checks the locale files for structural drift against English.
+
+## Pull request process
+
+### Before submitting
 
 1. **Create a feature branch**:
 
@@ -130,13 +172,13 @@ This project uses **next-intl** for internationalization. Please follow these gu
 
 2. **Make your changes** following the code style guidelines
 
-3. **Test your changes** thoroughly
+3. **Test your changes** thoroughly, and add unit tests for new logic
 
 4. **Update translations** if you added user-facing text
 
 5. **Run all checks**:
    ```bash
-   npm run typecheck && npm run lint
+   npm run typecheck && npm run lint && npx vitest run
    ```
 
 ### Submitting
@@ -149,7 +191,7 @@ This project uses **next-intl** for internationalization. Please follow these gu
    - Screenshots for UI changes
    - Reference to any related issues
 
-### Commit Message Convention
+### Commit message convention
 
 Follow the conventional commits format:
 
@@ -169,39 +211,46 @@ fix: resolve attachment download issue
 docs: update README with keyboard shortcuts
 ```
 
-## Project Structure
+## Project structure
 
 ```
 webmail/
-├── app/                    # Next.js App Router pages
+├── app/                       # Next.js App Router
-│   └── [locale]/          # Locale-aware routing
+│   ├── (main)/[locale]/      # Locale-aware app pages (mail, calendar, contacts, files, settings)
-├── components/            # React components
+│   ├── (main)/admin/         # Admin dashboard
-│   ├── email/            # Email-related components
+│   ├── (main)/setup/         # First-launch setup wizard
-│   ├── layout/           # Layout components
+│   ├── (sandbox)/            # Isolated plugin sandbox routes
-│   ├── settings/         # Settings components
+│   └── api/                  # Route handlers (auth, admin, jmap, caldav, …)
-│   └── ui/               # Reusable UI components
+├── components/               # React components
-├── contexts/             # React contexts
+│   ├── email/               # Email list, viewer, composer
-├── hooks/                # Custom React hooks
+│   ├── calendar/ contacts/ files/ filters/ templates/
-├── lib/                  # Utilities and libraries
+│   ├── layout/              # Sidebar, shell, navigation
-│   └── jmap/            # JMAP client implementation
+│   ├── settings/            # Settings panels
-├── locales/              # Translation files
+│   ├── plugins/             # Plugin host UI
-│   ├── en/              # English translations
+│   └── ui/                  # Reusable primitives
-│   └── fr/              # French translations
+├── contexts/                 # React contexts
-└── stores/               # Zustand state stores
+├── hooks/                    # Custom React hooks
+├── i18n/                     # next-intl routing, locale detection, RTL direction
+├── lib/                      # Utilities and libraries
+│   ├── jmap/                # JMAP client implementation
+│   ├── stalwart/            # Stalwart-specific admin/API helpers
+│   ├── admin/ auth/ oauth/  # Config, sessions, OAuth flows
+│   ├── plugin-sandbox/      # Plugin sandbox bridge and hardening
+│   └── __tests__/           # Vitest unit tests
+├── locales/                  # Translation files, one directory per locale
+├── stores/                   # Zustand state stores
+├── public/                   # Static assets and branding
+├── e2e/                      # Playwright smoke tests (against `npm run dev`)
+└── integration/              # Dockerized Stalwart + Playwright suite
 ```
 
 ## Security
 
-- **Never commit sensitive data** (API keys, passwords, etc.)
+- **Never commit secrets** - API keys, passwords, tokens, `.env*` files
 - **Sanitize user input** and email content
-- **Block external content** by default for privacy
+- **Block external content** by default - privacy is the point
-- Report security vulnerabilities privately
+- **Report vulnerabilities privately** to bulwark@rbm.systems, not via public issues
 
 ## Questions?
 
-If you have questions about contributing, feel free to:
+Open an issue, search existing ones, or ask in Discord. Thanks for helping build the webmail we all wished existed.
-
-- Open an issue for discussion
-- Check existing issues and pull requests
-
-Thank you for helping improve Bulwark Webmail!

Dockerfile

@@ -4,6 +4,23 @@ COPY package.json package-lock.json ./
 RUN npm ci
 COPY . .
 ENV NEXT_TELEMETRY_DISABLED=1
+# Optional: serve under a subpath like /webmail. Baked into emitted asset URLs
+# at build time, so it cannot be changed without rebuilding.
+ARG NEXT_PUBLIC_BASE_PATH=
+ENV NEXT_PUBLIC_BASE_PATH=$NEXT_PUBLIC_BASE_PATH
+# Optional: avoid next-intl rewrite loops when served under a subpath.
+# Baked in at build time.
+ARG NEXT_PUBLIC_LOCALE_PREFIX=
+ENV NEXT_PUBLIC_LOCALE_PREFIX=$NEXT_PUBLIC_LOCALE_PREFIX
+# Optional: fallback UI locale (e.g. tr, de, fr) used when the visitor's
+# Accept-Language header does not match any supported locale. Baked in at
+# build time because next-intl wires it into client-side routing too.
+ARG NEXT_PUBLIC_DEFAULT_LOCALE=
+ENV NEXT_PUBLIC_DEFAULT_LOCALE=$NEXT_PUBLIC_DEFAULT_LOCALE
+# Commit SHA shown in the About screen. .dockerignore excludes .git, so
+# `git rev-parse` inside the build can't find it - CI must pass it in.
+ARG GIT_COMMIT=unknown
+ENV GIT_COMMIT=$GIT_COMMIT
 RUN npx next build --webpack
 
 FROM node:24-alpine AS runner
@@ -26,6 +43,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 /app/data/admin-state /app/data/telemetry && chown -R nextjs:nodejs /app/data
 USER nextjs
 EXPOSE 3000
 ENV PORT=3000

FEATURES.md

@@ -0,0 +1,150 @@
+# Features
+
+## Mail
+
+- Read, compose, reply, reply-all, and forward in a Tiptap rich-text editor that handles inline images, drag-and-drop embedding, and tables
+- Gmail-style threading, expanded inline, with a conversation toggle you can switch off
+- The Unified Mailbox combines Inbox, Sent, Drafts, Junk, Archive, and Trash. By default it stays inside the active account and its shared/group folders; an admin can unlock a cross-account mode that spans every connected account.
+- All mail, Unread, and Starred obey that same account boundary and can be narrowed to a per-account folder selection. Every row names the folder its message came from.
+- Search runs across all unified views; the per-role mailboxes add the full filter panel on top
+- Three mail layouts: split three-pane, focused list, or reading pane at the bottom
+- Drafts auto-save, keeping the chosen identity, the HTML body, and correct `In-Reply-To` / `References` headers on replies
+- Attachments upload, download, drag out to the file system, and preview inline. Images and PDFs render on desktop and mobile, composer attachments open on click, and `.eml` (`message/rfc822`) parts display as a nested email. There are list thumbnails, and a warning when you mention an attachment and forget it.
+- Scheduled send, plus a configurable delay before anything leaves the outbox
+- Read receipts (MDN, RFC 8098)
+- Quoted text lands in an editable island that keeps the original layout
+- Full-text search with a JMAP filter panel, search chips, wildcards, OR conditions, and cross-mailbox queries
+- Multi-select for batch archive, delete, move, and tag
+- Archive directly, by year, or by month
+- Tags carry color labels, reorder by drag, and can be assigned by dropping a message onto them
+- Tags optionally nest: pick a parent when you create one and the sidebar turns them into a tree
+- Each tag can be configured to show always, only when there are unread mails or always be hidden
+- Star or unstar, with a configurable mark-as-read delay
+- Large mailboxes scroll virtually, and the first page of mail prefetches at login
+- Quick reply, hover actions, favicon-based sender avatars, recipient popovers
+- Plain-text composer mode and Reply-To
+- The signature sits above or below the quoted text, per identity
+- Override the From header in the composer. Reply to an alias on a domain you own and it auto-fills as the sender, even when no identity exists for it.
+- Import `.eml` files from the folder right-click menu
+- TNEF (`winmail.dat`) extraction and `message/rfc822` unwrapping
+- Folders take an icon, nest, and show counts in the sidebar
+- Print from the viewer
+- Browser back and forward move through mail history
+
+## Calendar
+
+- Month, week, day, and agenda views, with a mini-calendar and task list in the sidebar
+- Drag an event to reschedule it, click-drag to create one, pull an edge to resize. Everything snaps to 15 minutes.
+- Recurring events edit and delete by scope: this occurrence, this and following, or all
+- iMIP invitations on create and update (RFC 5545 / 6047), an organizer/attendee panel, and RSVP with trust assessment
+- `.ics` attachments are detected in the email viewer, so you can RSVP or import without leaving the message
+- iCalendar import previews first, then bulk-creates, deduplicating on UID
+- iCal / webcal subscriptions, editable, with batch import
+- A birthday calendar generated from your contacts
+- Virtual locations (video-conference URLs) are first-class event fields
+- Tasks with due dates, priority, and completion status
+- Shared calendars through CalDAV discovery, resolving homes across accounts, colored per viewer
+- Week numbers, hover preview, notifications with a sound picker
+- JMAP push keeps everything in sync
+
+## Contacts
+
+- JMAP sync (RFC 9553 / 9610), falling back to local storage
+- Several address books, with drag-and-drop between them
+- Groups with member management
+- vCard import/export (RFC 6350) that flags duplicates
+- Trusted senders live in their own JMAP address book
+- Autocomplete on To, Cc, and Bcc
+
+## Filters & templates
+
+- Server-side filters as JMAP Sieve Scripts (RFC 9661)
+- A visual rule builder: conditions on From, To, Subject, Size, Body, Attachment and more, each matching multiple values, with actions to move, forward, star, or discard
+- Rules written in other clients survive the round-trip
+- Raw Sieve editor with syntax validation
+- A vacation responder you can schedule to a date range
+- Templates with placeholder auto-fill (`{{recipientName}}`, `{{date}}`, …)
+
+## Files
+
+- Browse Stalwart's native JMAP FileNode storage as a real folder tree. Legacy flat-named files migrate into nested `FileNode` folders on first load.
+- Streamed WebDAV PUT upload, whole folders included, with progress
+- Upload limits follow the server's own configuration
+- Grid or list, sorted by name, size, or date
+- Preview images, text, audio, and video
+- Cut, copy, paste, duplicate; favorites; recent files
+- JMAP sharing (RFC 9670) for files and folders. Pick a user or group from the principal picker and grant read, read/write, or manager. Shared items get an indicator, and anything other principals share with you appears under "Shared with me".
+
+## Security & privacy
+
+- External content stays blocked until you say otherwise, and trusted senders are remembered
+- HTML sanitized through DOMPurify
+- S/MIME: manage certificates, then sign, encrypt, decrypt, and verify. Legacy 3DES / PBE is supported, and keys stay isolated per account.
+- SPF / DKIM / DMARC indicators surface the most severe SPF result and drop the "via" badge on spoofed mail
+- OAuth2 / OIDC with PKCE against Keycloak, Authentik, or the built-in provider, plus OAuth-only mode, OAuth app passwords, and non-interactive SSO for embedded deployments
+- TOTP two-factor authentication
+- Password and 2FA management through the Stalwart admin API
+- "Remember me" is optional and rides an AES-256-GCM encrypted httpOnly cookie
+- CSP is enforced with a per-request nonce, alongside SSRF redirect validation, a sandboxed PDF iframe, and IP spoofing prevention
+- Plugins are scanned for dangerous patterns and need admin approval
+- Newsletter unsubscribe (RFC 2369)
+
+## Interface
+
+- Split three-pane, focused list, or bottom reading pane, columns resizable
+- Dark and light themes. Email colors are remapped by luminance, so a mail hard-coded to dark-on-white stays readable on a dark background.
+- Bundled themes such as Aurora Glass and Elastic. Each theme card renders as a miniature mailbox built from that theme's own colors, with chips for the light and dark variants.
+- Layouts for desktop, tablet, and mobile
+- Full keyboard navigation
+- Drag and drop to organize mail and assign tags
+- A guided tour for first-time users
+- Right-click menus, and toasts that offer an undo
+- Toolbar position, favicon, and login branding are configurable
+- Sidebar apps pin and reorder by drag
+- Settings sync between devices, encrypted
+- Storage quota display
+- WCAG AA contrast, reduced-motion support, focus traps, and screen-reader live regions
+
+## Internationalization
+
+24 languages: Català · Česky · Dansk · Deutsch · English · Español · Français · Italiano · Latviešu · Magyar · Nederlands · Polski · Português · Română · Slovenčina · Türkçe · Русский · Українська · עברית · العربية · فارسی · 한국어 · 日本語 · 简体中文
+
+- Arabic, Hebrew, and Persian render right-to-left; document direction and logical layout flip automatically
+- The browser's `Accept-Language` picks the first language, and the choice persists per user
+- `NEXT_PUBLIC_DEFAULT_LOCALE` sets the fallback, `NEXT_PUBLIC_LOCALE_PREFIX` the URL prefix
+
+## Identity & multi-account
+
+- Run several accounts at once and switch instantly, each keeping its own session. The 5-account cap lifts on HTTP/2 servers; on HTTP/1.1, browser connection pooling still sets the limit.
+- An account switcher showing connection status, and a default account
+- Multiple sender identities, each with its own signature, synced automatically and badged in the viewer and list
+- Signature above or below the quoted text
+- Sub-addressing (`user+tag@domain.com`), delimiter configurable, with tag suggestions drawn from context
+- Shared folders across accounts
+- Shared and group (delegated) accounts put their folders next to your own, and "Include group inboxes" merges them into the Unified Mailbox. You can open, mark read, flag as spam or not-spam, move, delete, and archive their messages from there, and folder unread counts stay in step.
+- Several JMAP servers per deployment, optionally auto-picked by email domain
+- Custom JMAP endpoints on the login form, when `ALLOW_CUSTOM_JMAP_ENDPOINT` permits it
+
+## Admin & extensibility
+
+- A setup wizard runs on first launch and walks through JMAP servers, OAuth/OIDC, the session secret, logging, branding (uploads included), and the admin password. It writes to the admin config dir, so `.env.local` stays untouched.
+- The Stalwart admin dashboard, its policy sections collapsed into one tabbed page
+- Admin policy gates for the Unified Mailbox: turn All mail / Unread / Starred on or off org-wide, and gate cross-account capability separately (off by default, auto-enabled on upgrade for instances already using it). A gated view still respects the user's own toggle.
+- Admin storage splits in two. `ADMIN_CONFIG_DIR` is operator-authored and can be mounted read-only once setup finishes; `ADMIN_STATE_DIR` holds the runtime audit log and login timestamps.
+- JSON config can read secrets from files (`passwordHashFile`, `sessionSecretFile`, `oauthClientSecretFile`) for Docker and Kubernetes secret mounts
+- An admin toggle controls search-engine indexing (`robots.txt` / `noindex`)
+- Plugin system: a schema-driven config UI, render and intercept hooks, `onAvatarResolve`, `onBeforeEmailSend`, composer-sidebar and email-banner slots, calendar event slots, i18n APIs (sandboxed plugins localize through manifest locales and `api.i18n.t`), an `/api/translate` proxy, email-body access, and managed policy enforcement
+- Plugins hot-reload, load from a dev folder, bundle `src/` on demand through esbuild, and can request `http:fetch` scoped by `httpOrigins`
+- Themes upload as ZIP bundles, and admins can enforce one
+- An extension marketplace browses and installs plugins and themes from a configurable directory (`EXTENSION_DIRECTORY_URL`). Installing and uninstalling stay in the admin dashboard.
+- Bundled plugins, including Jitsi Meet for the calendar
+
+## Operations
+
+- Progressive Web App: service worker, install prompt, web push for new inbox mail, a dynamic manifest, and install screenshots configurable per domain
+- Update checks run on their own, log new releases server-side, and raise a notice that can't be dismissed
+- Structured logging (`text` or `json`) with per-category levels
+- Anonymous instance telemetry, off unless you enable it through the admin UI, the installer, or `BULWARK_TELEMETRY=on`. It reports version, platform, bucketed account counts, and feature toggles.
+- Docker images on GHCR, for release (`main`) and development (`dev`)
+- `NEXT_PUBLIC_BASE_PATH` mounts the app at a subpath behind a reverse proxy
+- Demo mode runs on fixture data, no mail server required

README.md

@@ -8,328 +8,355 @@
 
 # Bulwark Webmail
 
-A modern, self-hosted webmail client for [Stalwart Mail Server](https://stalw.art/).<br/>
+A self-hosted webmail client for [Stalwart Mail Server](https://stalw.art/), built with Next.js and the JMAP protocol.
-Built with Next.js and the JMAP protocol.
-
-[![License: AGPL v3](https://img.shields.io/badge/license-AGPL%20v3-blue.svg)](LICENSE)
-[![Version](https://img.shields.io/badge/version-1.4.3-green.svg)](CHANGELOG.md)
-[![Docker](https://img.shields.io/badge/docker-ghcr.io%2Fbulwarkmail%2Fwebmail-blue)](https://ghcr.io/bulwarkmail/webmail)
 
+[![License: AGPL v3](https://img.shields.io/badge/license-AGPL%20v3-blue.svg?logo=gnu&logoColor=white)](LICENSE)
+[![Discord](https://img.shields.io/discord/1482128142939455674?color=7289da&label=discord&logo=discord&logoColor=white)](https://discord.gg/tYCujymGrT)
+[![Version](https://img.shields.io/badge/version-1.7.8-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>
 
 ---
 
+## Installer
+
+Since **1.6.4**, a web-based setup wizard runs on first launch – no `.env.local` editing, no shelling into the container.
+
+Point a browser at the running container and the wizard guides you through:
+
+- **Server** – probe one or more JMAP endpoints, optional auto-pick by email domain, Stalwart feature toggle
+- **Auth** – OAuth2 / OIDC discovery and validation, or basic-auth fallback
+- **Security** – generate or paste a `SESSION_SECRET`, opt into settings sync
+- **Logging** – text or JSON, level
+- **Branding** – upload favicon, app logos, login logos, and company / legal URLs
+- **Review** – grouped summary with an advanced toggle for the full config
+- **Admin** – set the initial admin password and optionally drop a `.config-locked` marker so the config volume can be remounted read-only
+
+The wizard writes to `ADMIN_CONFIG_DIR` (`./data/admin` by default). Setting `JMAP_SERVER_URL` in the environment skips the wizard and uses env-managed configuration instead.
+
+---
+
 ## Screenshots
 
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="screenshots/mail-dark.png" />
+  <img src="screenshots/mail-white.png" alt="Mail view" width="100%" />
+</picture>
+
 <table>
 <tr>
-<td width="50%">
+<td width="50%"><img src="screenshots/calendar.png" alt="Calendar" /></td>
-
+<td width="50%"><img src="screenshots/contacts.png" alt="Contacts" /></td>
-<img src="screenshots/inbox.png" width="100%" alt="Inbox — three-pane layout with sidebar, email list, and viewer (dark mode)">
-
-**Mail** — Three-pane layout with sidebar, email list, and viewer
-
-</td>
-<td width="50%">
-
-<img src="screenshots/calendar.png" width="100%" alt="Calendar">
-
-**Calendar** — Month, week, day, and agenda views with event management
-
-</td>
 </tr>
 <tr>
-<td width="50%">
+<td><sub><b>Calendar</b> – month, week, day, and agenda views with drag-to-reschedule, iMIP invitations, and CalDAV subscriptions.</sub></td>
-
+<td><sub><b>Contacts</b> – multiple address books, groups, vCard import/export, and autocomplete in the composer.</sub></td>
-<img src="screenshots/contacts.png" width="100%" alt="Contacts">
+</tr>
-
+<tr>
-**Contacts** — Contact management with groups and vCard support
+<td><img src="screenshots/theme.png" alt="Themes" /></td>
-
+<td><img src="screenshots/plugins.png" alt="Plugins" /></td>
-</td>
+</tr>
-<td width="50%">
+<tr>
-
+<td><sub><b>Themes</b> – bundled color themes or upload your own as ZIP bundles; admins can enforce presets.</sub></td>
-<img src="screenshots/files.png" width="100%" alt="File browser">
+<td><sub><b>Plugins</b> – extend the client with bundled or third-party plugins installed from a .zip file.</sub></td>
-
+</tr>
-**Files** — Cloud file browser with upload, preview, and folder navigation
+<tr>
-
+<td><img src="screenshots/mail-white.png" alt="Light mode" /></td>
-</td>
+<td><img src="screenshots/settings.png" alt="Settings" /></td>
+</tr>
+<tr>
+<td><sub><b>Light mode</b> – full theme support, remapping HTML email colors by luminance so dark-on-dark text stays readable.</sub></td>
+<td><sub><b>Settings</b> – appearance, identities, filters, templates, security, and more.</sub></td>
 </tr>
 </table>
 
-<details>
+## What Bulwark includes
-<summary>More screenshots</summary>
-<table>
-<tr>
-<td width="50%">
 
-<img src="screenshots/inbox%20whitemode.png" width="100%" alt="Inbox — light mode">
+Bulwark is a full webmail suite. It bundles the four apps most self-hosters end up wanting:
 
-**Light mode** — Full theme support with intelligent color transformation
+- **Mail** – threading, unified inbox, cross-account "All accounts" views, full-text search, Sieve filters, S/MIME, templates
+- **Calendar** – month/week/day/agenda, recurring events, iMIP invitations, CalDAV subscriptions
+- **Contacts** – multiple address books, groups, vCard import/export
+- **Files** – Stalwart's JMAP FileNode storage with previews and folder upload
 
-</td>
+They share one login, one settings store, and one admin dashboard. SSO, 2FA, multi-account, 24 languages, PWA install, themes, and plugins apply across all four.
-<td width="50%">
 
-<img src="screenshots/settings.png" width="100%" alt="Settings">
+Full feature list: **[FEATURES.md](FEATURES.md)**.
-
-**Settings** — Appearance, identities, filters, templates, and more
-
-</td>
-</tr>
-<tr>
-<td width="50%">
-
-<img src="screenshots/login.png" width="100%" alt="Login page">
-
-**Login** — Configurable branding with OAuth2/OIDC and 2FA support
-
-</td>
-<td width="50%">
-</td>
-</tr>
-</table>
-</details>
-
-## Features
-
-### Mail
-
-- **Read, compose, reply, reply-all, forward** with rich HTML rendering
-- **Threading** — Gmail-style inline expansion with thread navigation
-- **Draft auto-save** with discard confirmation
-- **Attachments** — upload, download, and inline preview
-- **Search** — full-text with JMAP filter panel, search chips, cross-mailbox queries, wildcard support, and OR conditions
-- **Batch operations** — multi-select with checkboxes, archive, delete, move, tag
-- **Archive modes** — archive directly or organize archived mail by year or month
-- **Print** emails directly from the viewer
-- **Color tags/labels** and star/unstar
-- **Virtual scrolling** for large mailboxes
-- **Quick reply** from the viewer
-- **Sender avatars** — favicon-based with negative caching for performance
-- **Recipient popover** for quick contact interaction
-- **TNEF support** — extract Outlook `winmail.dat` message bodies and attachments automatically
-- **Folder management** — create, rename, delete folders with icon picker and subfolder support
-- **Tag counts** — unread and total counts displayed in sidebar
-
-### Calendar
-
-- **Month, week, day, and agenda views** with mini-calendar sidebar
-- **Event hover preview** popover with details
-- **Drag-and-drop rescheduling**, click-drag creation, edge-resize (15-min snap)
-- **Recurring events** with edit/delete scope (this / this and following / all)
-- **Participant scheduling** — iTIP invitations, organizer/attendee UI, RSVP
-- **Inline calendar invitations** in email viewer — auto-detect `.ics`, RSVP, import
-- **iCalendar import** with preview and bulk create
-- **Notifications** with configurable sound and alert persistence
-- **Real-time sync** via JMAP push
-
-### Contacts
-
-- **Contact management** with JMAP sync (RFC 9553/9610) and local fallback
-- **Contact groups** with group expansion and member management
-- **vCard import/export** (RFC 6350) with duplicate detection
-- **Autocomplete** in composer (To/Cc/Bcc)
-- **Bulk operations** — multi-select, delete, group add, export
-
-### Filters & Automation
-
-- **Server-side email filters** via JMAP Sieve Scripts (RFC 9661)
-- **Visual rule builder** — conditions (From, To, Subject, Size, Body…) and actions (Move, Forward, Star, Discard…)
-- **Raw Sieve editor** with syntax validation
-- **Vacation responder** with date range scheduling and sidebar indicator
-- **Email templates** — reusable, categorized, with placeholder auto-fill (`{{recipientName}}`, `{{date}}`, etc.)
-
-### Files
-
-- **File browser** with JMAP FileNode cloud storage (Stalwart native)
-- **Upload and download** files with progress tracking and folder upload support
-- **Folder navigation** with breadcrumb path and tree sidebar
-- **Grid and list views** with sorting by name, size, or date
-- **Clipboard operations** — cut, copy, paste, duplicate files
-- **File preview** for images, text, audio, video, and more
-- **Favorites and recent files** for quick access
-- **Bulk operations** — multi-select, delete, move, download
-
-### Security & Privacy
-
-- **External content blocked** by default — trusted senders list for auto-load
-- **HTML sanitization** via DOMPurify with XSS prevention
-- **S/MIME** — manage certificates, sign outgoing mail, encrypt to recipients, decrypt messages, and verify signatures
-- **SPF/DKIM/DMARC** status indicators
-- **OAuth2/OIDC with PKCE** for SSO (Keycloak, Authentik, or built-in), with OAuth-only mode
-- **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
-- **Right-click context menus**, toast notifications with undo, form validation with shake feedback
-- **Customizable toolbar** position, custom favicon, sidebar/login logos, and login page branding
-- **Sidebar apps** — pin custom tools to the navigation rail and open them inline or in a new tab
-- **Settings sync** — preferences synchronized with the server (encrypted)
-- **Storage quota** display
-- **Shared folders** — multi-account access
-- **Accessibility** — WCAG AA contrast, reduced-motion support, focus trap, screen reader live regions
-
-### Internationalization
-
-8 languages: English · Français · 日本語 · Español · Italiano · Deutsch · Nederlands · Português
-
-Automatic browser detection with persistent preference.
-
-### Identity Management
-
-- **Multiple sender identities** with per-identity signatures
-- **Identity refresh** — keep the identity manager aligned with server-side changes after edits
-- **Sub-addressing** — `user+tag@domain.com` with contextual tag suggestions
-- **Identity badges** in viewer and email list
-
-### Operations
-
-- **Automatic update check** — server logs when a newer release is available
 
 ---
 
-## Quick Start
+## Quick start
 
-### Docker (recommended)
+### Docker
 
 ```bash
-docker run -d -p 3000:3000 \
+docker run -d -p 3000:3000 ghcr.io/bulwarkmail/webmail:latest
-  -e JMAP_SERVER_URL=https://mail.example.com \
-  ghcr.io/bulwarkmail/webmail:latest
 ```
 
 Or with Docker Compose:
 
 ```bash
-cp .env.example .env.local
-# Edit .env.local — set JMAP_SERVER_URL
 docker compose up -d
 ```
 
-### From Source
+On first launch, open `http://localhost:3000` and the setup wizard takes over. Installs that already define `JMAP_SERVER_URL` skip it and keep the env-managed flow under [Configuration](#configuration).
+
+### 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
+# Then open http://localhost:3000 to run the setup wizard
 ```
 
 ### Development
 
 ```bash
-npm run dev        # Start dev server (mock JMAP server included)
+cp .env.dev.example .env.local   # Built-in mock JMAP server, no mail server needed
-npm run typecheck  # Type checking
+
-npm run lint       # Linting
+npm run dev                # Dev server
+npm run typecheck
+npm run lint
+npx vitest run             # Unit tests
+npm run test:integration   # Dockerized Stalwart + Playwright suite (see integration/README.md)
 ```
 
 ## Configuration
 
-Edit `.env.local`:
+Most deployments are configured through the setup wizard on first launch, then the admin dashboard; those values live in the admin config directory rather than `.env.local`. Environment variables still work, and they suit read-only or immutable infrastructure better. An environment variable always wins over the admin-managed value, so setting `JMAP_SERVER_URL` hides that field from the wizard and locks it in the admin UI.
+
+Nearly all variables are evaluated at runtime, so Docker deployments can be reconfigured without rebuilding. The exceptions are the `NEXT_PUBLIC_*` ones noted below, which Next.js bakes in at build time. Edit `.env.local`:
 
 ```env
-# Required
+# Optional – overrides whatever the wizard writes
 JMAP_SERVER_URL=https://mail.example.com
-
-# Optional
 APP_NAME=My Webmail
 ```
 
-All variables are **runtime** — Docker deployments can be configured without rebuilding.
-
 <details>
-<summary>Server Listen Address</summary>
+<summary>Server listen address</summary>
 
 ```env
 HOSTNAME=0.0.0.0    # Default; use "::" for IPv6
-PORT=3000            # Default listen port
+PORT=3000
 ```
 
 </details>
 
 <details>
-<summary>OAuth2/OIDC (SSO)</summary>
+<summary>OAuth2 / OIDC</summary>
 
 ```env
 OAUTH_ENABLED=true
+OAUTH_ONLY=true                   # hide the username/password form entirely
 OAUTH_CLIENT_ID=webmail
 OAUTH_CLIENT_SECRET=              # optional, for confidential clients
-OAUTH_ISSUER_URL=                 # optional, for external IdPs (Keycloak, Authentik)
+OAUTH_CLIENT_SECRET_FILE=         # path to a file containing the secret
+OAUTH_ISSUER_URL=                 # optional, for external IdPs
+OAUTH_AUTHORIZE_URL=              # override only the user-facing authorize endpoint
+OAUTH_ALLOW_PRIVATE_ENDPOINTS=    # allow discovery to resolve to RFC-1918 addresses
 ```
 
-Endpoints are auto-discovered via `.well-known/oauth-authorization-server` or `.well-known/openid-configuration`.
+Endpoints are auto-discovered via `.well-known/oauth-authorization-server` or `.well-known/openid-configuration`. `OAUTH_ALLOW_PRIVATE_ENDPOINTS` is off by default as an SSRF guard. Enable it only for split-DNS deployments where the issuer's public hostname resolves to an internal IP.
 
 </details>
 
 <details>
-<summary>Remember Me</summary>
+<summary>Anonymous telemetry</summary>
 
 ```env
-SESSION_SECRET=your-secret-key    # Generate with: openssl rand -base64 32
+BULWARK_TELEMETRY=on                 # opt-in; off by default
+TELEMETRY_DATA_DIR=./data/telemetry  # instance id and consent; mount a volume
 ```
 
-Credentials encrypted with AES-256-GCM, stored in an httpOnly cookie (30-day expiry).
+Off unless you turn it on, in the admin UI, the installer, or here. Heartbeats carry version, platform, bucketed account counts, and feature toggles. No email addresses, hostnames, or IPs. Setting the variable (to either value) locks the choice and disables the admin toggle.
 
 </details>
 
-## Keyboard Shortcuts
+<details>
+<summary>Session & settings sync</summary>
 
-| Key           | Action                  |
+```env
-| ------------- | ----------------------- |
+SESSION_SECRET=                      # openssl rand -base64 32
-| `j` / `k`     | Navigate between emails |
+SESSION_SECRET_FILE=/session-secret  # path to a file containing the secret
-| `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      |
 
-## Tech Stack
+SETTINGS_SYNC_ENABLED=true
+SETTINGS_DATA_DIR=./data/settings    # mount as a volume in Docker
+```
+
+Credentials are encrypted with AES-256-GCM and stored in an httpOnly cookie (30-day expiry). Settings sync stores per-account preferences encrypted at rest and requires `SESSION_SECRET`.
+
+</details>
+
+<details>
+<summary>Custom JMAP endpoint</summary>
+
+```env
+ALLOW_CUSTOM_JMAP_ENDPOINT=true
+```
+
+Shows a "JMAP Server" field on the login form. External servers must CORS-allow the webmail origin.
+
+</details>
+
+<details>
+<summary>Branding & PWA</summary>
+
+```env
+APP_NAME=My Webmail
+APP_SHORT_NAME=Webmail
+APP_DESCRIPTION=Your personal mail
+
+FAVICON_URL=/branding/favicon.svg
+PWA_ICON_URL=/branding/icon.svg      # falls back to FAVICON_URL
+PWA_THEME_COLOR=#3b82f6
+PWA_BACKGROUND_COLOR=#ffffff
+
+APP_LOGO_LIGHT_URL=/branding/logo-light.svg
+APP_LOGO_DARK_URL=/branding/logo-dark.svg
+LOGIN_LOGO_LIGHT_URL=/branding/login-light.svg
+LOGIN_LOGO_DARK_URL=/branding/login-dark.svg
+
+LOGIN_COMPANY_NAME=My Company
+LOGIN_WEBSITE_URL=https://example.com
+LOGIN_IMPRINT_URL=https://example.com/imprint
+LOGIN_PRIVACY_POLICY_URL=https://example.com/privacy
+
+# Per-domain overrides (optional). When the webmail is served on multiple
+# hostnames, each host can override any subset of the branding fields above.
+# Match is on the request Host (or X-Forwarded-Host). Use "*.example.com" to
+# match any subdomain. Unset fields fall back to the global values.
+DOMAIN_BRANDING=[{"host":"maildomain1.com","loginCompanyName":"Company One","loginLogoLightUrl":"/branding/one.svg"},{"host":"maildomain2.com","loginCompanyName":"Company Two"}]
+```
+
+</details>
+
+<details>
+<summary>Extension directory</summary>
+
+```env
+EXTENSION_DIRECTORY_URL=https://extensions.bulwarkmail.org
+```
+
+Enables the admin marketplace for browsing and installing plugins and themes.
+
+</details>
+
+<details>
+<summary>Stalwart integration & logging</summary>
+
+```env
+STALWART_FEATURES=true               # password change, Sieve filters, etc.
+
+LOG_FORMAT=text                      # "text" or "json"
+LOG_LEVEL=info                       # error | warn | info | debug
+```
+
+</details>
+
+<details>
+<summary>Admin data directories</summary>
+
+```env
+ADMIN_CONFIG_DIR=./data/admin        # operator-authored: config.json, policy.json, plugins/, themes/
+ADMIN_STATE_DIR=./data/admin-state   # runtime: audit log, login timestamps, setup token
+ADMIN_CONFIG_READONLY=true           # enforce read-only mode at the app layer
+```
+
+The split lets you mount the config volume read-only after the setup wizard completes. Legacy installs that pre-date the split keep working through `ADMIN_DATA_DIR`.
+
+</details>
+
+<details>
+<summary>Default UI locale</summary>
+
+The UI language follows each visitor's `Accept-Language` header and their stored preference. `NEXT_PUBLIC_DEFAULT_LOCALE` sets the fallback used when neither matches a supported locale (default `en`):
+
+```env
+NEXT_PUBLIC_DEFAULT_LOCALE=de
+```
+
+Supported: `ar`, `ca`, `cs`, `da`, `de`, `en`, `es`, `fa`, `fr`, `he`, `hu`, `it`, `ja`, `ko`, `lv`, `nl`, `pl`, `pt`, `ro`, `ru`, `sk`, `tr`, `uk`, `zh`. An unsupported value falls back to `en`.
+
+Like `NEXT_PUBLIC_BASE_PATH`, this is read at **build time**. To use it with the published Docker image, build your own:
+
+```bash
+docker build --build-arg NEXT_PUBLIC_DEFAULT_LOCALE=de -t bulwark-webmail .
+```
+
+</details>
+
+<details>
+<summary>Subpath / reverse proxy mount</summary>
+
+To serve the webmail at a subpath (e.g. `https://example.com/webmail`):
+
+```env
+NEXT_PUBLIC_BASE_PATH=/webmail
+NEXT_PUBLIC_LOCALE_PREFIX=always     # avoids next-intl rewrite loops
+```
+
+Unlike most other variables, `NEXT_PUBLIC_BASE_PATH` is read at **build time** because Next.js bakes it into emitted asset URLs. To use it with the published Docker image, build your own image with the variable set:
+
+```bash
+docker build --build-arg NEXT_PUBLIC_BASE_PATH=/webmail -t bulwark-webmail .
+```
+
+Then point your reverse proxy at the container without stripping the prefix. The app expects requests under `/webmail/...` and serves every route (`/webmail/api/...`, `/webmail/_next/static/...`, `/webmail/sw.js`, and so on) accordingly.
+
+</details>
+
+## Keyboard shortcuts
+
+| Key                  | Action                  |
+| -------------------- | ----------------------- |
+| `j` `↓` / `k` `↑`    | Navigate between emails |
+| `Enter` / `o`        | Open email              |
+| `Esc`                | Close / deselect        |
+| `x`                  | Expand / collapse thread |
+| `c`                  | Compose                 |
+| `r` / `R` `a`        | Reply / Reply all       |
+| `f`                  | Forward                 |
+| `s`                  | Star                    |
+| `e`                  | Archive                 |
+| `#` / `Del`          | Delete                  |
+| `u` / `Shift`+`I`    | Mark unread / read      |
+| `!`                  | Toggle spam             |
+| `Ctrl`+`A`           | Select all              |
+| `Shift`+`G`          | Refresh                 |
+| `/`                  | Search                  |
+| `?`                  | Show all shortcuts      |
+
+In the composer: `Ctrl/Cmd`+`Enter` sends, `Ctrl/Cmd`+`Shift`+`Enter` opens scheduled send, and `t` opens the template picker.
+
+## Tech stack
 
 |               |                                                   |
 | ------------- | ------------------------------------------------- |
-| **Framework** | [Next.js 16](https://nextjs.org/) with App Router |
+| **Framework** | [Next.js 16](https://nextjs.org/) with App Router, React 19 |
 | **Language**  | TypeScript                                        |
 | **Styling**   | [Tailwind CSS v4](https://tailwindcss.com/)       |
 | **State**     | [Zustand](https://zustand-demo.pmnd.rs/)          |
 | **Protocol**  | Custom JMAP client (RFC 8620)                     |
+| **Editor**    | [Tiptap](https://tiptap.dev/)                     |
 | **i18n**      | [next-intl](https://next-intl-docs.vercel.app/)   |
 | **Icons**     | [Lucide React](https://lucide.dev/)               |
+| **Testing**   | [Vitest](https://vitest.dev/) + [Playwright](https://playwright.dev/) |
 
 ## Why Stalwart?
 
-[Stalwart](https://github.com/stalwartlabs/mail-server) is a mail server written in Rust with **native JMAP support** — not IMAP/SMTP with JMAP bolted on. It handles JMAP, IMAP, SMTP, and ManageSieve in a single binary. Self-hosted, no third-party dependencies.
+[Stalwart](https://github.com/stalwartlabs/mail-server) is a Rust mail server with native JMAP support – not IMAP/SMTP with JMAP bolted on. It handles JMAP, IMAP, SMTP, and ManageSieve in a single self-hosted binary with no third-party dependencies.
 
 ## Contributing
 
-See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
+See [CONTRIBUTING.md](CONTRIBUTING.md).
-
-## Roadmap
-
-See [ROADMAP.md](ROADMAP.md) for planned features and current status.
 
 ## License
 
-[GNU AGPL v3](LICENSE)
+[GNU AGPL v3](LICENSE). This repository preserves the original MIT attribution for the fork lineage in [NOTICE](NOTICE).
-
-This repository also preserves the original MIT attribution notice for the
-fork lineage in [NOTICE](NOTICE).
 
 ## Acknowledgments
 
-Thanks to [root-fr/jmap-webmail](https://github.com/root-fr/jmap-webmail/) and [@ma2t](https://github.com/ma2t) for doing most of the groundwork that this project builds upon.
+Thanks to [root-fr/jmap-webmail](https://github.com/root-fr/jmap-webmail/) and [@ma2t](https://github.com/ma2t) for the groundwork this project builds upon.

VERSION

@@ -1 +1 @@
-1.4.6
+1.7.8

VNCMAIL-SETUP.md

@@ -0,0 +1,76 @@
+# VNCmail+ — setup & deploy runbook
+
+VNCmail+ is VNC's fork of [Bulwark](https://github.com/bulwarkmail/webmail), a
+Next.js (App Router) JMAP webmail client for **Stalwart**. Stalwart is the source
+of truth; VNCmail+ is the UI. It deploys as a **container on Kubernetes
+(microk8s)** at `vncmail.sandbox.vnc.de` — see **[deploy/k8s/](deploy/k8s/README.md)**.
+
+> **License:** AGPL-3.0. Serving a modified VNCmail+ to users over the network
+> obligates VNC to offer those users the corresponding source. Keeping this fork
+> public (with a "Source" link in the imprint/UI) satisfies that. Loop in legal
+> before a public/customer-facing launch if a closed fork is ever desired.
+
+## Architecture — why a container, not Vercel
+
+- Bulwark is a **stateful, long-lived server**: it persists settings-sync, admin
+  config/state, and telemetry to a **local data directory** (`/app/data/*`).
+- **Vercel serverless was tried and dropped** — its filesystem is read-only
+  except `/tmp`, so Bulwark's `mkdir ./data` crashes (`ENOENT /var/task/data`).
+  You cannot point its data dirs at a remote host either (they're POSIX paths,
+  not URLs). Bulwark's native model is a container + persistent volumes.
+- So VNCmail+ runs as a Docker image (`ghcr.io/brvncde-dotcom/vncmail-plus-*`)
+  with **4 persistent volumes**, exactly like the existing `bulwark.sandbox.vnc.de`.
+- JMAP calls go through **server-side `/api/*` routes** (`proxy.ts`) → server-to-
+  server to Stalwart, **no browser CORS**. Config is **runtime-read**.
+
+## Branches (dev-first)
+
+| Branch | Role |
+|--------|------|
+| `main` | **Production** — CI builds `…/vncmail-plus-beta`. Only updated by an explicit promote. |
+| `dev`  | Integration + QA — CI builds `…/vncmail-plus-dev` on push. Default working branch. |
+| `vnc/*`| Feature branches for UI work (branch off `dev`, PR into `dev`). |
+
+All VNC customization lives under `vnc/` (see `vnc/VNC-CHANGES.md`).
+
+## Deploy (Kubernetes / microk8s)
+
+Full runbook: **[deploy/k8s/README.md](deploy/k8s/README.md)**. In short:
+
+1. CI builds the image on push to `dev`/`main` → `ghcr.io/brvncde-dotcom/vncmail-plus-dev` (`.github/workflows/docker-publish.yml`).
+2. `kubectl apply` the manifests in `deploy/k8s/` (namespace, 4 PVCs, deployment, service, ingress) + a `secret.yaml` (from `secret.example.yaml`) + a `ghcr-pull` image-pull secret.
+3. Point `vncmail.sandbox.vnc.de` DNS at the ingress; cert-manager issues TLS.
+
+Runs alongside the existing `bulwark.sandbox.vnc.de`. Match your cluster's
+StorageClass / IngressClass / cert issuer to bulwark's (see the runbook).
+
+## Deploy workflow (dev-first — ALWAYS)
+
+Same flow as every other VNC/SRC repo:
+
+1. Work on `dev` (or `vnc/*` → PR into `dev`). Push to `dev` → CI builds the `-dev` image → `kubectl -n vncmail rollout restart deploy/vncmail-plus` to pull it. QA at `vncmail.sandbox.vnc.de`.
+2. **Promote to production only on explicit go-live** — merge `dev` → `main`:
+   ```bash
+   git log dev..main            # MUST be empty — main must have nothing dev lacks (else prod would revert)
+   git checkout main && git merge --ff-only dev
+   git push origin main         # CI builds the production image
+   git checkout dev
+   ```
+   Then roll the production deployment to the new image (pin its digest — see deploy/k8s/README.md).
+   Never push straight to `main`. Never let a dev→main merge silently revert prod.
+
+## Syncing upstream (Bulwark releases)
+
+Bring upstream into `dev` (NOT main), integrate + QA on the dev image, then promote as above:
+
+```bash
+git fetch upstream
+git checkout dev && git merge upstream/main    # resolve conflicts via vnc/VNC-CHANGES.md; QA on preview
+```
+
+## Auth
+
+Basic auth via Stalwart is the default — users sign in with their
+`@sandbox.vnc.de` address + password; VNCmail+ authenticates them over JMAP. No
+extra config. (SSO via vncdirectory/OIDC is a later option — see
+`vnc/vercel.env.template`.)

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

@@ -0,0 +1,10 @@
+import { notFound } from 'next/navigation';
+
+// Catch-all that anchors unmatched URLs into the (main) route group so
+// Next renders app/(main)/not-found.tsx (wrapped by (main)/layout.tsx)
+// instead of the built-in __next_builtin__not-found page. Without this,
+// route groups can't pick a root layout for URLs that match nothing, so
+// 404s render bare.
+export default function CatchAll() {
+  notFound();
+}

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

@@ -0,0 +1,253 @@
+"use client";
+
+import { Suspense, useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useAuthStore } from "@/stores/auth-store";
+import { apiFetch, getPathPrefix, toRouterPath } from "@/lib/browser-navigation";
+import { Loader2, AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useParams } from "next/navigation";
+
+function OAuthCallbackInner() {
+  const router = useRouter();
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const t = useTranslations("login");
+  const { loginWithOAuth, loginWithServerSso } = useAuthStore();
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const code = searchParams.get("code");
+    const state = searchParams.get("state");
+    const errorParam = searchParams.get("error");
+
+    if (errorParam) {
+      setError(errorParam === "access_denied" ? "access_denied" : "token_exchange_failed");
+      return;
+    }
+
+    if (!code) {
+      setError("missing_params");
+      return;
+    }
+
+    // Step-up re-auth for device pairing: the QR generator sent the user here
+    // via prompt=login. Don't create a login session — just confirm the fresh
+    // auth (sets the short-lived pairing proof cookie) and bounce back to the
+    // Security settings, where the QR generation auto-resumes.
+    let pairReauthResume = false;
+    try {
+      pairReauthResume = sessionStorage.getItem("pair_reauth_resume") === "1";
+    } catch { /* sessionStorage unavailable */ }
+    if (pairReauthResume && state) {
+      try { sessionStorage.removeItem("pair_reauth_resume"); } catch { /* ignore */ }
+      (async () => {
+        try {
+          const res = await apiFetch("/api/auth/reauth/sso/complete", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            credentials: "include",
+            body: JSON.stringify({ code, state }),
+          });
+          if (!res.ok) {
+            setError("token_exchange_failed");
+            return;
+          }
+          try {
+            sessionStorage.setItem("pair_reauth_done", "1");
+            // Land back on the Security tab (readPersistedTab reads this key).
+            sessionStorage.setItem("settings-deep-link-tab", "security");
+          } catch { /* ignore */ }
+          const prefix = getPathPrefix(params.locale as string);
+          router.push(toRouterPath(`${prefix}/${params.locale}/settings`));
+        } catch {
+          setError("token_exchange_failed");
+        }
+      })();
+      return;
+    }
+
+    const savedState = sessionStorage.getItem("oauth_state");
+
+    if (savedState) {
+      // Classic flow - sessionStorage has the PKCE state (same-tab OAuth)
+      if (!state || state !== savedState) {
+        setError("invalid_state");
+        return;
+      }
+
+      const codeVerifier = sessionStorage.getItem("oauth_code_verifier");
+      const serverUrl = sessionStorage.getItem("oauth_server_url");
+      const serverId = sessionStorage.getItem("oauth_server_id") || undefined;
+
+      if (!codeVerifier || !serverUrl) {
+        setError("missing_params");
+        return;
+      }
+
+      const prefix = getPathPrefix(params.locale as string);
+      const redirectUri = `${window.location.origin}${prefix}/${params.locale}/auth/callback`;
+
+      loginWithOAuth(serverUrl, code, codeVerifier, redirectUri, serverId)
+        .then((success) => {
+          if (success) {
+            sessionStorage.removeItem("oauth_state");
+            sessionStorage.removeItem("oauth_code_verifier");
+            sessionStorage.removeItem("oauth_server_url");
+            sessionStorage.removeItem("oauth_server_id");
+            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(toRouterPath(redirectTo));
+          } else {
+            setError("token_exchange_failed");
+          }
+        })
+        .catch(() => {
+          setError("token_exchange_failed");
+        });
+    } else if (state) {
+      // Server-side SSO flow - state was stored in encrypted httpOnly cookie.
+      // Branch on mobile handoff first: the login page left a marker in
+      // sessionStorage if it kicked this OAuth dance off for the mobile app.
+      let mobileRedirectUri: string | null = null;
+      let mobileState: string | null = null;
+      try {
+        mobileRedirectUri = sessionStorage.getItem("mobile_redirect_uri");
+        mobileState = sessionStorage.getItem("mobile_state");
+      } catch { /* sessionStorage may be unavailable */ }
+
+      if (mobileRedirectUri && mobileRedirectUri.startsWith("bulwarkmobile://")) {
+        // Drive /api/auth/sso/complete directly so we can read the tokens
+        // out of the response - loginWithServerSso would consume them and
+        // wire up the webmail auth store, which isn't useful here. The
+        // server's mobile-flow branch (keyed on the pending cookie) skips
+        // the refresh-token cookie write for the same reason.
+        (async () => {
+          try {
+            const res = await apiFetch("/api/auth/sso/complete", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              credentials: "include",
+              body: JSON.stringify({ code, state }),
+            });
+            if (!res.ok) {
+              setError("token_exchange_failed");
+              return;
+            }
+            const data = await res.json();
+            const serverUrl = data.server_url as string | undefined;
+            const accessToken = data.access_token as string | undefined;
+            const tokenEndpoint = data.token_endpoint as string | undefined;
+            const clientId = data.client_id as string | undefined;
+            if (!serverUrl || !accessToken || !tokenEndpoint || !clientId) {
+              setError("token_exchange_failed");
+              return;
+            }
+            const fragment = new URLSearchParams({
+              flow: "oauth",
+              server_url: serverUrl,
+              access_token: accessToken,
+              token_endpoint: tokenEndpoint,
+              client_id: clientId,
+              state: mobileState ?? "",
+            });
+            if (typeof data.refresh_token === "string") {
+              fragment.set("refresh_token", data.refresh_token);
+            }
+            if (typeof data.expires_in === "number") {
+              fragment.set("expires_in", String(data.expires_in));
+            }
+            try {
+              sessionStorage.removeItem("mobile_redirect_uri");
+              sessionStorage.removeItem("mobile_state");
+            } catch { /* ignore */ }
+            window.location.replace(`${mobileRedirectUri}#${fragment.toString()}`);
+          } catch {
+            setError("token_exchange_failed");
+          }
+        })();
+        return;
+      }
+
+      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(toRouterPath(redirectTo));
+          } else {
+            setError("token_exchange_failed");
+          }
+        })
+        .catch(() => {
+          setError("token_exchange_failed");
+        });
+    } else {
+      setError("invalid_state");
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
+        <div className="w-full max-w-sm mx-auto px-4 text-center">
+          <div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-red-500/10 mb-6">
+            <AlertCircle className="w-10 h-10 text-red-500" />
+          </div>
+          <h1 className="text-xl font-medium text-foreground mb-2">
+            {t("oauth_error.title")}
+          </h1>
+          <p className="text-muted-foreground text-sm mb-6">
+            {t(`oauth_error.${error}`)}
+          </p>
+          <Button
+            variant="outline"
+            onClick={() => router.push(toRouterPath(`${getPathPrefix(params.locale as string)}/${params.locale}/login`))}
+          >
+            {t("oauth_error.back_to_login")}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
+      <div className="w-full max-w-sm mx-auto px-4 text-center" role="status">
+        <Loader2 className="w-8 h-8 animate-spin text-primary mx-auto mb-4" />
+        <p className="text-muted-foreground text-sm">{t("oauth_completing")}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function OAuthCallbackPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
+          <div className="w-full max-w-sm mx-auto px-4 text-center" role="status">
+            <Loader2 className="w-8 h-8 animate-spin text-primary mx-auto mb-4" />
+          </div>
+        </div>
+      }
+    >
+      <OAuthCallbackInner />
+    </Suspense>
+  );
+}

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

@@ -1,9 +1,10 @@
 "use client";
 
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
-import { useRouter } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
-import { ArrowLeft, Users } from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "@/i18n/navigation";
+import { ArrowLeft, Users, AlertTriangle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import { useConfirmDialog } from "@/hooks/use-confirm-dialog";
@@ -14,19 +15,28 @@ import { ContactGroupForm } from "@/components/contacts/contact-group-form";
 import { ContactGroupDetail } from "@/components/contacts/contact-group-detail";
 import { ContactsSidebar, type ContactCategory } from "@/components/contacts/contacts-sidebar";
 import { ContactImportDialog } from "@/components/contacts/contact-import-dialog";
+import { RenameDialog } from "@/components/files/rename-dialog";
 import { exportContacts } from "@/components/contacts/contact-export";
-import { useContactStore, getContactDisplayName } from "@/stores/contact-store";
+import { AppTopBannerSlot } from "@/components/plugins/app-top-banner-slot";
-import { useAuthStore } from "@/stores/auth-store";
+import { useContactStore, getContactDisplayName, getContactPrimaryEmail } from "@/stores/contact-store";
+import { savePendingMailto } from "@/lib/protocol-handlers/session";
+import { formatRecipient, formatRecipientEntry, type Recipient } from "@/lib/email-composer-utils";
+import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
 import { useEmailStore } from "@/stores/email-store";
+import { usePolicyStore } from "@/stores/policy-store";
 import { toast } from "@/stores/toast-store";
-import { cn } from "@/lib/utils";
+import { cn, generateUUID } from "@/lib/utils";
 import { NavigationRail } from "@/components/layout/navigation-rail";
 import { SidebarAppsModal } from "@/components/layout/sidebar-apps-modal";
 import { InlineAppView } from "@/components/layout/inline-app-view";
 import { useSidebarApps } from "@/hooks/use-sidebar-apps";
+import { useIsEmbedded } from "@/hooks/use-is-embedded";
+import { useProMultiAccountContacts } from "@/hooks/use-pro-multi-account-contacts";
 import { ResizeHandle } from "@/components/layout/resize-handle";
-import { useIsMobile } from "@/hooks/use-media-query";
+import { useIsDesktop, useIsMobile } from "@/hooks/use-media-query";
-import type { ContactCard, AddressBook } from "@/lib/jmap/types";
+import { useRefreshGesture } from "@/hooks/use-refresh-gesture";
+import type { ContactCard, AddressBook, AddressBookRights } from "@/lib/jmap/types";
+import { ShareCollectionDialog } from "@/components/settings/share-collection-dialog";
 
 type View =
   | "list"
@@ -39,8 +49,8 @@ type View =
   | "bulk-add-to-group";
 
 export default function ContactsPage() {
-  const router = useRouter();
   const t = useTranslations("contacts");
+  const contactsEnabled = usePolicyStore((s) => s.isFeatureEnabled('contactsEnabled'));
   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);
@@ -74,16 +84,41 @@ export default function ContactsPage() {
     bulkDeleteContacts,
     bulkAddToGroup,
     moveContactToAddressBook,
+    createAddressBook,
+    renameAddressBook,
+    removeAddressBook,
+    shareAddressBook,
+    renameKeyword,
     importContacts,
   } = useContactStore();
 
   const [view, setView] = useState<View>("list");
   const [activeCategory, setActiveCategory] = useState<ContactCategory>("all");
   const [showImportDialog, setShowImportDialog] = useState(false);
+  const [renamingAddressBook, setRenamingAddressBook] = useState<AddressBook | null>(null);
+  const [creatingAddressBook, setCreatingAddressBook] = useState(false);
+  const [sharingAddressBookId, setSharingAddressBookId] = useState<string | null>(null);
+  const [defaultBookIdForCreate, setDefaultBookIdForCreate] = useState<string | undefined>(undefined);
+  const [createPrefill, setCreatePrefill] = useState<{ email?: string; name?: string } | undefined>(undefined);
+  const [returnToEmail, setReturnToEmail] = useState(false);
+  const [renamingKeyword, setRenamingKeyword] = useState<string | null>(null);
   const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
   const hasFetched = useRef(false);
   const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
   const isMobile = useIsMobile();
+  const isDesktop = useIsDesktop();
+  const isEmbedded = useIsEmbedded();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  // One-shot intent flag: only consume the URL params on the first render that
+  // has them. After applying, we strip the query so a later refresh or
+  // re-mount doesn't re-trigger the navigation.
+  const intentAppliedRef = useRef(false);
+  // Narrow pane (Pro split or small window): the categories sidebar collapses
+  // into a burger-toggled overlay.
+  const isNarrow = !isDesktop;
+  const [narrowSidebarOpen, setNarrowSidebarOpen] = useState(false);
+  useEffect(() => { if (!isNarrow) setNarrowSidebarOpen(false); }, [isNarrow]);
 
   // Panel resize state - sidebar (categories)
   const [sidebarWidth, setSidebarWidth] = useState(() => {
@@ -94,13 +129,20 @@ export default function ContactsPage() {
 
   // Panel resize state - contact list
   const [listWidth, setListWidth] = useState(() => {
-    try { const v = localStorage.getItem("contacts-list-width"); return v ? Number(v) : 320; } catch { return 320; }
+    try { const v = localStorage.getItem("contacts-list-width"); return v ? Number(v) : 384; } catch { return 384; }
   });
   const [isListResizing, setIsListResizing] = useState(false);
-  const listDragStartWidth = useRef(320);
+  const listDragStartWidth = useRef(384);
 
-  // Check auth on mount
+  // Check auth on mount – skip when already authenticated so that navigating
+  // between routes doesn't retrigger checkAuth's transient `{ client: null,
+  // isLoading: true }` reset, which was flashing the spinner on every nav.
   useEffect(() => {
+    const state = useAuthStore.getState();
+    if (state.isAuthenticated && state.client) {
+      setInitialCheckDone(true);
+      return;
+    }
     checkAuth().finally(() => {
       setInitialCheckDone(true);
     });
@@ -109,22 +151,73 @@ export default function ContactsPage() {
   useEffect(() => {
     if (initialCheckDone && !isAuthenticated && !authLoading) {
       try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
-      router.push("/login");
+      redirectToLogin();
     }
-  }, [initialCheckDone, isAuthenticated, authLoading, router]);
+  }, [initialCheckDone, isAuthenticated, authLoading]);
+
+  // Pro shell only: aggregate contacts and address books from every
+  // connected account so the sidebar lists them all. The hook is a no-op
+  // outside the embedded shell.
+  const { enabled: multiAccountEnabled, accountClients } = useProMultiAccountContacts();
 
   useEffect(() => {
+    if (isEmbedded) return;
     if (client && supportsSync && !hasFetched.current) {
       hasFetched.current = true;
       fetchContacts(client);
     }
-  }, [client, supportsSync, fetchContacts]);
+  }, [client, supportsSync, fetchContacts, isEmbedded]);
+
+  // Consume one-shot URL params (set by the mobile recipient popover when no
+  // sidebar is available) and strip them so a refresh doesn't replay the
+  // intent. `from=email` flips the mobile back button to `router.back()`.
+  useEffect(() => {
+    if (intentAppliedRef.current) return;
+    const contactId = searchParams.get('contactId');
+    const addEmail = searchParams.get('addEmail');
+    const addName = searchParams.get('addName');
+    const from = searchParams.get('from');
+    const viewParam = searchParams.get('view');
+    if (!contactId && !addEmail && !from) return;
+    intentAppliedRef.current = true;
+    if (from === 'email') setReturnToEmail(true);
+    if (contactId) {
+      setSelectedContact(contactId);
+      setView(viewParam === 'edit' ? 'edit' : 'detail');
+    } else if (addEmail) {
+      setCreatePrefill({ email: addEmail, name: addName ?? undefined });
+      setSelectedContact(null);
+      setView('create');
+    }
+    router.replace('/contacts');
+  }, [searchParams, router, setSelectedContact]);
+
+  // Intercept browser refresh gestures (F5, Ctrl/Cmd+R, pull-to-refresh)
+  // and refresh contacts via JMAP instead of reloading the page.
+  useRefreshGesture({
+    enabled: isAuthenticated && !!client && supportsSync,
+    onRefresh: async () => {
+      if (!client) return;
+      if (multiAccountEnabled && accountClients.length > 0) {
+        const activeId = useAuthStore.getState().activeAccountId;
+        if (activeId) {
+          const { fetchAllAccountsContacts, fetchAllAccountsAddressBooks } = useContactStore.getState();
+          await Promise.all([
+            fetchAllAccountsAddressBooks(accountClients, activeId),
+            fetchAllAccountsContacts(accountClients, activeId),
+          ]);
+          return;
+        }
+      }
+      await fetchContacts(client);
+    },
+  });
 
   const groups = useMemo(() => contacts.filter(c => c.kind === 'group'), [contacts]);
   const individuals = useMemo(() => contacts.filter(c => c.kind !== 'group'), [contacts]);
   const selectedContact = contacts.find((c) => c.id === selectedContactId) || null;
   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(() => {
@@ -158,21 +251,6 @@ export default function ContactsPage() {
     return getGroupMembers(activeCategory.groupId);
   }, [activeCategory, individuals, getGroupMembers]);
 
-  // Label for the current category
-  const categoryLabel = useMemo(() => {
-    if (activeCategory === "all") return t("tabs.all");
-    if (activeCategory === "uncategorized") return t("no_category");
-    if ("addressBookId" in activeCategory) {
-      const book = addressBooks.find(b => b.id === activeCategory.addressBookId);
-      return book?.name || t("tabs.all");
-    }
-    if ("keyword" in activeCategory) {
-      return activeCategory.keyword;
-    }
-    const group = contacts.find(c => c.id === activeCategory.groupId);
-    return group ? getContactDisplayName(group) : t("tabs.all");
-  }, [activeCategory, contacts, addressBooks, t]);
-
   const handleSelectCategory = useCallback((category: ContactCategory) => {
     setActiveCategory(category);
     clearSelection();
@@ -182,6 +260,7 @@ export default function ContactsPage() {
     } else {
       setSelectedGroupId(null);
     }
+    setNarrowSidebarOpen(false);
   }, [clearSelection]);
 
   const handleDropContacts = useCallback(async (contactIds: string[], addressBook: AddressBook) => {
@@ -223,6 +302,34 @@ export default function ContactsPage() {
     }
   }, [client, supportsSync, contacts, updateContact, updateLocalContact, t]);
 
+  // Refresh address books (and contacts) after a structural change, staying
+  // multi-account aware so a freshly created book lands in the sidebar.
+  const refreshAddressBooks = useCallback(async () => {
+    if (!client) return;
+    if (multiAccountEnabled && accountClients.length > 0) {
+      const activeId = useAuthStore.getState().activeAccountId;
+      if (activeId) {
+        const { fetchAllAccountsAddressBooks } = useContactStore.getState();
+        await fetchAllAccountsAddressBooks(accountClients, activeId);
+        return;
+      }
+    }
+    await useContactStore.getState().fetchAddressBooks(client);
+  }, [client, multiAccountEnabled, accountClients]);
+
+  const handleCreateAddressBook = useCallback(async (name: string) => {
+    if (!client) return;
+    try {
+      await createAddressBook(client, name);
+      await refreshAddressBooks();
+      toast.success(t("address_books.created"));
+      setCreatingAddressBook(false);
+    } catch (error) {
+      console.error('Failed to create address book:', error);
+      toast.error(t("address_books.create_failed"));
+    }
+  }, [client, createAddressBook, refreshAddressBooks, t]);
+
   const handleImportContacts = useCallback(async (importedContacts: ContactCard[]) => {
     return importContacts(
       supportsSync && client ? client : null,
@@ -245,9 +352,7 @@ export default function ContactsPage() {
     setView("edit");
   };
 
-  const handleDelete = async () => {
+  const deleteContactById = useCallback(async (contactId: string) => {
-    if (!selectedContact) return;
-
     const confirmed = await confirmDialog({
       title: t("delete_confirm_title"),
       message: t("delete_confirm"),
@@ -258,33 +363,82 @@ export default function ContactsPage() {
 
     try {
       if (supportsSync && client) {
-        await deleteContact(client, selectedContact.id);
+        await deleteContact(client, contactId);
       } else {
-        deleteLocalContact(selectedContact.id);
+        deleteLocalContact(contactId);
       }
       toast.success(t("toast.deleted"));
-      setView("list");
+      if (selectedContactId === contactId) setView("list");
     } catch (error) {
       console.error('Failed to delete contact:', error);
       toast.error(t("toast.error_delete"));
     }
+  }, [confirmDialog, t, supportsSync, client, deleteContact, deleteLocalContact, selectedContactId]);
+
+  const handleDelete = async () => {
+    if (!selectedContact) return;
+    await deleteContactById(selectedContact.id);
   };
 
+  const handleEditContact = useCallback((id: string) => {
+    setSelectedContact(id);
+    setView("edit");
+  }, [setSelectedContact]);
+
+  const handleDeleteContact = useCallback((contact: ContactCard) => {
+    void deleteContactById(contact.id);
+  }, [deleteContactById]);
+
+  const handleAddContactToGroup = useCallback((id: string) => {
+    clearSelection();
+    toggleContactSelection(id);
+    if (groups.length === 0) {
+      setView("group-create");
+      return;
+    }
+    setView("bulk-add-to-group");
+  }, [clearSelection, toggleContactSelection, groups.length]);
+
+  const handleDuplicateContact = useCallback(async (source: ContactCard) => {
+    const { id: _id, uid: _uid, created: _created, updated: _updated, ...rest } = source;
+    void _id; void _uid; void _created; void _updated;
+    const data: Partial<ContactCard> = JSON.parse(JSON.stringify(rest));
+    if (supportsSync && client) {
+      await createContact(client, data);
+      toast.success(t("toast.created"));
+    } else {
+      const localContact: ContactCard = {
+        id: `local-${generateUUID()}`,
+        addressBookIds: data.addressBookIds || {},
+        ...data,
+      };
+      addLocalContact(localContact);
+      toast.success(t("toast.created"));
+    }
+  }, [supportsSync, client, createContact, addLocalContact, t]);
+
   const handleSaveNew = useCallback(async (data: Partial<ContactCard>) => {
     if (supportsSync && client) {
       await createContact(client, data);
       toast.success(t("toast.created"));
     } else {
       const localContact: ContactCard = {
-        id: `local-${crypto.randomUUID()}`,
+        id: `local-${generateUUID()}`,
         addressBookIds: {},
         ...data,
       };
       addLocalContact(localContact);
       toast.success(t("toast.created"));
     }
+    setDefaultBookIdForCreate(undefined);
+    setCreatePrefill(undefined);
+    if (returnToEmail) {
+      setReturnToEmail(false);
+      router.back();
+      return;
+    }
     setView("list");
-  }, [supportsSync, client, createContact, addLocalContact, t]);
+  }, [supportsSync, client, createContact, addLocalContact, t, returnToEmail, router]);
 
   const handleSaveEdit = useCallback(async (data: Partial<ContactCard>) => {
     if (!selectedContact) return;
@@ -300,6 +454,15 @@ export default function ContactsPage() {
   }, [supportsSync, client, selectedContact, updateContact, updateLocalContact, t]);
 
   const handleCancel = () => {
+    setDefaultBookIdForCreate(undefined);
+    // Came from email → cancel returns to the email instead of the contact list.
+    if (returnToEmail && view === "create") {
+      setCreatePrefill(undefined);
+      setReturnToEmail(false);
+      router.back();
+      return;
+    }
+    if (view === "create") setCreatePrefill(undefined);
     if (view === "group-create" || view === "group-edit") {
       setView(selectedGroup ? "group-detail" : "list");
     } else if (view === "bulk-add-to-group") {
@@ -309,7 +472,7 @@ export default function ContactsPage() {
     }
   };
 
-  const handleSelectGroup = (id: string) => {
+  const _handleSelectGroup = (id: string) => {
     setSelectedGroupId(id);
     setActiveCategory({ groupId: id });
     setView("group-detail");
@@ -330,6 +493,59 @@ export default function ContactsPage() {
     setView("group-edit");
   }, []);
 
+  // Open the in-app composer in the current session rather than routing through
+  // a mailto: URL. `window.location='mailto:'` hands off to the OS handler
+  // (which may open a different mail app), and the mailto protocol round-trip
+  // reloads the app - dropping the in-memory per-account JMAP clients of a
+  // multi-account session, which reads as a logout. Stashing the recipients and
+  // doing a client-side router.push keeps the session and the active account
+  // intact; the main route consumes the pending compose and opens the composer
+  // (see consumePendingMailto in page.tsx).
+  const openComposeInApp = useCallback((recipients: string[], field: "to" | "cc" | "bcc") => {
+    savePendingMailto({
+      to: field === "to" ? recipients : [],
+      cc: field === "cc" ? recipients : [],
+      bcc: field === "bcc" ? recipients : [],
+      subject: "",
+      body: "",
+    });
+    router.push("/");
+  }, [router]);
+
+  const handleComposeGroupFromSidebar = useCallback((groupId: string, field: "to" | "cc" | "bcc") => {
+    // Hand the composer a single group chip (RFC 5322 group syntax survives
+    // the string hand-off) instead of one entry per member - the chip expands
+    // into the members when the message is sent. Dedupe by email,
+    // case-insensitively; members without an email are skipped.
+    const seen = new Set<string>();
+    const members: Array<{ name?: string; email: string }> = [];
+    for (const member of getGroupMembers(groupId)) {
+      const email = getContactPrimaryEmail(member).trim();
+      const key = email.toLowerCase();
+      if (!email || seen.has(key)) continue;
+      seen.add(key);
+      const name = getContactDisplayName(member);
+      members.push({ name: name && name !== email ? name : undefined, email });
+    }
+    if (members.length === 0) {
+      toast.error(t("groups.no_member_emails"));
+      return;
+    }
+    const group = useContactStore.getState().contacts.find((c) => c.id === groupId);
+    const chip: Recipient = {
+      name: (group && getContactDisplayName(group)) || "Group",
+      email: "",
+      group: { members },
+    };
+    openComposeInApp([formatRecipientEntry(chip)], field);
+  }, [getGroupMembers, t, openComposeInApp]);
+
+  const handleComposeContact = useCallback((contact: ContactCard) => {
+    const email = getContactPrimaryEmail(contact).trim();
+    if (!email) return;
+    openComposeInApp([formatRecipient(getContactDisplayName(contact), email)], "to");
+  }, [openComposeInApp]);
+
   const handleDeleteGroupFromSidebar = useCallback(async (groupId: string) => {
     const confirmed = await confirmDialog({
       title: t("groups.delete_confirm_title"),
@@ -471,7 +687,7 @@ export default function ContactsPage() {
   const renderRightPanel = () => {
     switch (view) {
       case "create":
-        return <ContactForm addressBooks={addressBooks} allKeywords={allKeywords} onSave={handleSaveNew} onCancel={handleCancel} />;
+        return <ContactForm addressBooks={addressBooks} allKeywords={allKeywords} defaultAddressBookId={defaultBookIdForCreate} prefill={createPrefill} onSave={handleSaveNew} onCancel={handleCancel} />;
 
       case "edit":
         if (!selectedContact) return null;
@@ -494,6 +710,7 @@ export default function ContactsPage() {
             onEdit={handleEditGroup}
             onDelete={handleDeleteGroup}
             onRemoveMember={handleRemoveGroupMember}
+            onComposeGroup={(field) => handleComposeGroupFromSidebar(selectedGroup.id, field)}
             isMobile={isMobile}
             onSelectMember={(id) => {
               setSelectedContact(id);
@@ -542,7 +759,7 @@ export default function ContactsPage() {
                   <button
                     key={group.id}
                     onClick={() => handleBulkAddToGroupConfirm(group.id)}
-                    className="w-full flex items-center gap-3 px-6 py-3 text-left hover:bg-muted transition-colors"
+                    className="w-full flex items-center gap-3 px-6 py-3 text-start hover:bg-muted transition-colors"
                   >
                     <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" />
@@ -571,30 +788,65 @@ export default function ContactsPage() {
             contact={selectedContact}
             onEdit={handleEdit}
             onDelete={handleDelete}
+            onCompose={
+              selectedContact
+                ? () => handleComposeContact(selectedContact)
+                : undefined
+            }
+            onAddToGroup={
+              selectedContact
+                ? () => handleAddContactToGroup(selectedContact.id)
+                : undefined
+            }
+            onDuplicate={
+              selectedContact
+                ? () => void handleDuplicateContact(selectedContact)
+                : undefined
+            }
             isMobile={isMobile}
           />
         );
     }
   };
 
+  if (!contactsEnabled) {
+    return (
+      <div className="flex h-dvh items-center justify-center bg-background p-6">
+        <div className="max-w-lg text-center space-y-3">
+          <AlertTriangle className="w-10 h-10 text-yellow-500 mx-auto" />
+          <p className="text-sm font-medium">Contacts feature is disabled by your administrator</p>
+          <p className="text-xs text-muted-foreground">Please contact your administrator if you need access.</p>
+        </div>
+      </div>
+    );
+  }
+
   const showListPanel = !isMobile || view === "list";
   const showRightPanel = !isMobile || view !== "list";
 
   const mobileBackToList = () => {
+    if (returnToEmail) {
+      setReturnToEmail(false);
+      setCreatePrefill(undefined);
+      router.back();
+      return;
+    }
     setView("list");
     clearSelection();
   };
 
   return (
-    <div className={cn("flex h-dvh bg-background overflow-hidden", isMobile && "flex-col")}>
+    <div className={cn("flex flex-col bg-background overflow-hidden pt-[env(safe-area-inset-top)]", isEmbedded ? "h-full" : "h-dvh")}>
-      {/* Navigation Rail - desktop only */}
+      <AppTopBannerSlot />
-      {!isMobile && (
+      <div className={cn("flex flex-1 min-h-0 overflow-hidden", isMobile && "flex-col")}>
+      {/* Navigation Rail - desktop only (hidden when embedded in Pro shell) */}
+      {!isMobile && !isEmbedded && (
         <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(); if (!useAuthStore.getState().isAuthenticated) router.push('/login'); }}
+            onLogout={logout}
             onManageApps={handleManageApps}
             onInlineApp={handleInlineApp}
             onCloseInlineApp={closeInlineApp}
@@ -603,22 +855,37 @@ export default function ContactsPage() {
         </div>
       )}
 
-      <div className="flex flex-col flex-1 min-w-0">
+      <div className="flex flex-col flex-1 min-w-0 min-h-0">
         {inlineApp && (
           <InlineAppView apps={loadedApps} activeAppId={inlineApp!.id} onClose={closeInlineApp} />
         )}
-        <div className={cn("flex flex-1 min-h-0", inlineApp && "hidden")}>
+        <div className={cn("relative flex flex-1 min-h-0", inlineApp && "hidden")}>
+          {/* Narrow-pane backdrop for the overlay categories sidebar */}
+          {isNarrow && narrowSidebarOpen && (
+            <div
+              className={cn(
+                "inset-0 bg-black/50 z-40",
+                isEmbedded ? "absolute" : "fixed"
+              )}
+              onClick={() => setNarrowSidebarOpen(false)}
+            />
+          )}
           {showListPanel && (
             <>
-              {/* Panel 1: Categories sidebar */}
+              {/* Panel 1: Categories sidebar (in-flow on desktop, overlay on narrow) */}
-              {!isMobile && (
+              {(!isMobile || isNarrow) && (
                 <>
                   <div
                     className={cn(
-                      "border-r border-border flex flex-col flex-shrink-0",
+                      "border-e border-border flex flex-col flex-shrink-0 bg-background",
-                      !isSidebarResizing && "transition-[width] duration-300"
+                      !isSidebarResizing && "transition-[width] duration-300",
+                      isNarrow && cn(
+                        "absolute inset-y-0 left-0 z-50 w-72 pt-[env(safe-area-inset-top)]",
+                        "transform transition-transform duration-300 ease-in-out",
+                        !narrowSidebarOpen && "-translate-x-full"
+                      )
                     )}
-                    style={{ width: `${sidebarWidth}px` }}
+                    style={isNarrow ? undefined : { width: `${sidebarWidth}px` }}
                   >
                     <ContactsSidebar
                       groups={groups}
@@ -628,22 +895,49 @@ export default function ContactsPage() {
                       onSelectCategory={handleSelectCategory}
                       onCreateGroup={handleCreateGroup}
                       onCreateContact={handleCreateNew}
+                      onCreateAddressBook={client ? () => setCreatingAddressBook(true) : undefined}
                       onImport={() => setShowImportDialog(true)}
                       onEditGroup={handleEditGroupFromSidebar}
                       onDeleteGroup={handleDeleteGroupFromSidebar}
+                      onComposeGroup={handleComposeGroupFromSidebar}
                       onDropContacts={handleDropContacts}
                       onDropContactsToCategory={handleDropContactsToCategory}
+                      onRenameAddressBook={client ? (book) => setRenamingAddressBook(book) : undefined}
+                      onShareAddressBook={client ? (book) => setSharingAddressBookId(book.id) : undefined}
+                      onCreateContactInBook={(book) => {
+                        setDefaultBookIdForCreate(book.id);
+                        handleCreateNew();
+                      }}
+                      onDeleteAddressBook={client ? async (book) => {
+                        const ok = await confirmDialog({
+                          title: t("address_books.delete"),
+                          message: t("address_books.confirm_delete", { name: book.name }),
+                          variant: "destructive",
+                          confirmText: t("address_books.delete"),
+                        });
+                        if (!ok) return;
+                        try {
+                          await removeAddressBook(client, book);
+                          toast.success(t("address_books.deleted"));
+                        } catch {
+                          toast.error(t("address_books.delete_failed"));
+                        }
+                      } : undefined}
+                      onRenameKeyword={(kw) => setRenamingKeyword(kw)}
+                      multiAccountMode={multiAccountEnabled && accountClients.length > 1}
                     />
                   </div>
-                  <ResizeHandle
+                  {!isNarrow && (
-                    onResizeStart={() => { sidebarDragStartWidth.current = sidebarWidth; setIsSidebarResizing(true); }}
+                    <ResizeHandle
-                    onResize={(delta) => setSidebarWidth(Math.max(180, Math.min(400, sidebarDragStartWidth.current + delta)))}
+                      onResizeStart={() => { sidebarDragStartWidth.current = sidebarWidth; setIsSidebarResizing(true); }}
-                    onResizeEnd={() => {
+                      onResize={(delta) => setSidebarWidth(Math.max(180, Math.min(400, sidebarDragStartWidth.current + delta)))}
-                      setIsSidebarResizing(false);
+                      onResizeEnd={() => {
-                      localStorage.setItem("contacts-sidebar-width", String(sidebarWidth));
+                        setIsSidebarResizing(false);
-                    }}
+                        localStorage.setItem("contacts-sidebar-width", String(sidebarWidth));
-                    onDoubleClick={() => { setSidebarWidth(256); localStorage.setItem("contacts-sidebar-width", "256"); }}
+                      }}
-                  />
+                      onDoubleClick={() => { setSidebarWidth(256); localStorage.setItem("contacts-sidebar-width", "256"); }}
+                    />
+                  )}
                 </>
               )}
 
@@ -651,7 +945,7 @@ export default function ContactsPage() {
               <div
                 data-tour="contacts-list"
                 className={cn(
-                  "border-r border-border bg-background flex flex-col flex-shrink-0",
+                  "border-e border-border bg-background flex flex-col flex-shrink-0",
                   isMobile ? "w-full" : "",
                   !isListResizing && !isMobile && "transition-[width] duration-300"
                 )}
@@ -664,7 +958,6 @@ export default function ContactsPage() {
                   onSearchChange={setSearchQuery}
                   onSelectContact={handleSelectContact}
                   onCreateNew={handleCreateNew}
-                  categoryLabel={categoryLabel}
                   className="flex-1"
                   selectedContactIds={selectedContactIds}
                   onToggleSelection={toggleContactSelection}
@@ -674,6 +967,10 @@ export default function ContactsPage() {
                   onBulkDelete={handleBulkDelete}
                   onBulkAddToGroup={handleBulkAddToGroup}
                   onBulkExport={handleBulkExport}
+                  onEditContact={handleEditContact}
+                  onDeleteContact={handleDeleteContact}
+                  onAddContactToGroup={handleAddContactToGroup}
+                  onMenuClick={isNarrow ? () => setNarrowSidebarOpen(true) : undefined}
                 />
               </div>
 
@@ -685,7 +982,7 @@ export default function ContactsPage() {
                     setIsListResizing(false);
                     localStorage.setItem("contacts-list-width", String(listWidth));
                   }}
-                  onDoubleClick={() => { setListWidth(320); localStorage.setItem("contacts-list-width", "320"); }}
+                  onDoubleClick={() => { setListWidth(384); localStorage.setItem("contacts-list-width", "384"); }}
                 />
               )}
             </>
@@ -702,8 +999,8 @@ export default function ContactsPage() {
                     onClick={mobileBackToList}
                     className="touch-manipulation"
                   >
-                    <ArrowLeft className="w-4 h-4 mr-2" />
+                    <ArrowLeft className="w-4 h-4 me-2" />
-                    {t("back_to_mail")}
+                    {returnToEmail ? t("back_to_email") : t("back_to_contacts")}
                   </Button>
                 </div>
               )}
@@ -714,7 +1011,7 @@ export default function ContactsPage() {
           )}
         </div>
 
-        {isMobile && (
+        {isMobile && !isEmbedded && (
           <NavigationRail
             orientation="horizontal"
             onManageApps={handleManageApps}
@@ -727,6 +1024,55 @@ export default function ContactsPage() {
 
       <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
       <ConfirmDialog {...confirmDialogProps} />
+      {renamingKeyword !== null && (
+        <RenameDialog
+          currentName={renamingKeyword}
+          title={t("rename_category")}
+          label={t("category_name_label")}
+          onCancel={() => setRenamingKeyword(null)}
+          onConfirm={async (newName) => {
+            try {
+              await renameKeyword(supportsSync && client ? client : null, renamingKeyword, newName);
+              toast.success(t("category_renamed"));
+              if (typeof activeCategory === "object" && "keyword" in activeCategory && activeCategory.keyword === renamingKeyword) {
+                setActiveCategory({ keyword: newName.trim() });
+              }
+              setRenamingKeyword(null);
+            } catch (err) {
+              console.error("Failed to rename category:", err);
+              toast.error(t("category_rename_failed"));
+            }
+          }}
+        />
+      )}
+      {creatingAddressBook && (
+        <RenameDialog
+          currentName=""
+          title={t("address_books.create")}
+          label={t("address_books.name_label")}
+          onCancel={() => setCreatingAddressBook(false)}
+          onConfirm={handleCreateAddressBook}
+        />
+      )}
+      {renamingAddressBook && (
+        <RenameDialog
+          currentName={renamingAddressBook.name}
+          title={t("address_books.rename")}
+          label={t("address_books.name_label")}
+          onCancel={() => setRenamingAddressBook(null)}
+          onConfirm={async (newName) => {
+            if (!client) return;
+            try {
+              await renameAddressBook(client, renamingAddressBook, newName);
+              toast.success(t("address_books.renamed"));
+              setRenamingAddressBook(null);
+            } catch (err) {
+              console.error("Failed to rename address book:", err);
+              toast.error(t("address_books.rename_failed"));
+            }
+          }}
+        />
+      )}
       {showImportDialog && (
         <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
           <div className="bg-background rounded-lg border border-border shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
@@ -738,6 +1084,24 @@ export default function ContactsPage() {
           </div>
         </div>
       )}
+      {sharingAddressBookId && client && (() => {
+        const book = addressBooks.find((b) => b.id === sharingAddressBookId);
+        if (!book) return null;
+        return (
+          <ShareCollectionDialog
+            client={client}
+            kind="addressBook"
+            collectionName={book.name}
+            shareWith={book.shareWith}
+            ownAccountId={client.getAccountId()}
+            onShare={async (principalId, rights) => {
+              await shareAddressBook(client, book, principalId, rights as AddressBookRights | null);
+            }}
+            onClose={() => setSharingAddressBookId(null)}
+          />
+        );
+      })()}
+      </div>
     </div>
   );
 }

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

@@ -38,11 +38,11 @@ export default function LocaleError({
         </p>
         <div className="flex gap-3 justify-center">
           <Button variant="outline" onClick={() => router.push('/')}>
-            <Home className="w-4 h-4 mr-2" />
+            <Home className="w-4 h-4 me-2" />
             {t("go_home")}
           </Button>
           <Button onClick={reset}>
-            <RefreshCw className="w-4 h-4 mr-2" />
+            <RefreshCw className="w-4 h-4 me-2" />
             {t("try_again")}
           </Button>
         </div>

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

@@ -7,26 +7,37 @@ import { ArrowLeft } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import { useConfirmDialog } from "@/hooks/use-confirm-dialog";
-import { useAuthStore } from "@/stores/auth-store";
+import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
+import { useAccountStore } from "@/stores/account-store";
 import { useEmailStore } from "@/stores/email-store";
 import { useFileStore } from "@/stores/file-store";
 import { toast } from "@/stores/toast-store";
-import { cn } from "@/lib/utils";
+import { cn, formatFileSize } from "@/lib/utils";
 import { NavigationRail } from "@/components/layout/navigation-rail";
 import { SidebarAppsModal } from "@/components/layout/sidebar-apps-modal";
 import { InlineAppView } from "@/components/layout/inline-app-view";
 import { useSidebarApps } from "@/hooks/use-sidebar-apps";
+import { useIsEmbedded } from "@/hooks/use-is-embedded";
 import { useIsMobile } from "@/hooks/use-media-query";
+import { useRefreshGesture } from "@/hooks/use-refresh-gesture";
+import { usePolicyStore } from "@/stores/policy-store";
 import { FileBrowser } from "@/components/files/file-browser";
+import type { FileNodeRights } from "@/lib/jmap/types";
 import { ImagePreviewModal } from "@/components/files/image-preview-modal";
 import { FilePreviewModal } from "@/components/files/file-preview-modal";
 import { loadFilesSettings } from "@/components/files/files-settings-dialog";
 import type { FolderLayout } from "@/components/files/files-settings-dialog";
+import { AppTopBannerSlot } from "@/components/plugins/app-top-banner-slot";
+import { AlertTriangle, Loader2 } from "lucide-react";
 
 export default function FilesPage() {
   const router = useRouter();
   const t = useTranslations("files");
+  const filesEnabled = usePolicyStore((s) => s.isFeatureEnabled('filesEnabled'));
   const { isAuthenticated, logout, checkAuth, isLoading: authLoading, client } = useAuthStore();
+  const activeAccountId = useAuthStore((s) => s.activeAccountId);
+  const getClientForAccount = useAuthStore((s) => s.getClientForAccount);
+  const accounts = useAccountStore((s) => s.accounts);
   const { showAppsModal, inlineApp, loadedApps, handleManageApps, handleInlineApp, closeInlineApp, closeAppsModal } = useSidebarApps();
   const [initialCheckDone, setInitialCheckDone] = useState(() => useAuthStore.getState().isAuthenticated && !!useAuthStore.getState().client);
   const { quota, isPushConnected } = useEmailStore();
@@ -38,14 +49,16 @@ export default function FilesPage() {
     supportsFiles,
     selectedResources,
     uploadProgress,
+    migrationProgress,
     clipboard,
     initClient,
     checkSupport,
+    migrateLegacyFlatNodes,
     navigate,
     navigateByPath,
     refresh,
     createDirectory,
-    uploadFile,
+    uploadFile: _uploadFile,
     uploadFiles,
     uploadFolder,
     deleteResource,
@@ -76,9 +89,11 @@ export default function FilesPage() {
     cancelUpload,
     undoLastAction,
     lastAction,
+    shareResource,
   } = useFileStore();
 
   const isMobile = useIsMobile();
+  const isEmbedded = useIsEmbedded();
   const [folderLayout, setFolderLayout] = useState<FolderLayout>(() => loadFilesSettings().folderLayout);
   const hasFetched = useRef(false);
 
@@ -101,8 +116,15 @@ export default function FilesPage() {
 
   const detailResource = detailName ? resources.find(r => r.name === detailName) || null : null;
 
-  // Check auth on mount
+  // Check auth on mount – skip when already authenticated so that navigating
+  // between routes doesn't retrigger checkAuth's transient `{ client: null,
+  // isLoading: true }` reset, which was flashing the spinner on every nav.
   useEffect(() => {
+    const state = useAuthStore.getState();
+    if (state.isAuthenticated && state.client) {
+      setInitialCheckDone(true);
+      return;
+    }
     checkAuth().finally(() => {
       setInitialCheckDone(true);
     });
@@ -112,31 +134,59 @@ export default function FilesPage() {
   useEffect(() => {
     if (initialCheckDone && !isAuthenticated && !authLoading) {
       try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
-      router.push("/login");
+      redirectToLogin();
     }
-  }, [initialCheckDone, isAuthenticated, authLoading, router]);
+  }, [initialCheckDone, isAuthenticated, authLoading]);
 
-  // Initialize JMAP files client
+  // Initialize JMAP files client. In the Pro shell, all connected accounts
+  // are surfaced as top-level folders at the root, so we *don't* auto-attach
+  // to the active account - the user picks one explicitly.
   useEffect(() => {
-    if (isAuthenticated && client && !hasFetched.current) {
+    if (!isAuthenticated || !client || hasFetched.current) return;
-      hasFetched.current = true;
+    hasFetched.current = true;
-      initClient(client);
+    if (isEmbedded) {
+      useFileStore.getState().clearClient();
+    } else {
+      initClient(client, activeAccountId);
     }
-  }, [isAuthenticated, client, initClient]);
+  }, [isAuthenticated, client, initClient, activeAccountId, isEmbedded]);
+
+  // Intercept browser refresh gestures (F5, Ctrl/Cmd+R, pull-to-refresh)
+  // and refresh files via JMAP instead of reloading the page.
+  useRefreshGesture({
+    enabled: isAuthenticated && !!client && supportsFiles === true,
+    onRefresh: async () => {
+      await refresh();
+    },
+  });
 
   // Check support and load root after client is initialized
   const storeClient = useFileStore(s => s.client);
   useEffect(() => {
     if (storeClient && supportsFiles === null) {
-      checkSupport().then((supported) => {
+      checkSupport().then(async (supported) => {
         if (supported) {
+          // Upgrade any files created by older builds (flat path-encoded names)
+          // into the real FileNode hierarchy before the first listing.
+          await migrateLegacyFlatNodes();
           navigate(null);
         }
       });
     }
-  }, [storeClient, supportsFiles, checkSupport, navigate]);
+  }, [storeClient, supportsFiles, checkSupport, migrateLegacyFlatNodes, navigate]);
 
   const handleNavigate = useCallback((path: string, resourceId?: string | null) => {
+    // Pro shell only: the Account breadcrumb segment signals "go to this
+    // account's filesystem root" via a sentinel, distinguishing it from a
+    // Home click (which detaches the account and returns to the picker).
+    if (resourceId === '__account_root__') {
+      void navigate(null);
+      return;
+    }
+    if (isEmbedded && path === '/' && resourceId === undefined) {
+      useFileStore.getState().clearClient();
+      return;
+    }
     if (resourceId !== undefined) {
       // Direct ID-based navigation (directory click, breadcrumb dropdown folder)
       navigate(resourceId, path.split('/').pop() || '');
@@ -144,7 +194,7 @@ export default function FilesPage() {
       // Path-based navigation (breadcrumbs, favorites, recent files)
       navigateByPath(path);
     }
-  }, [navigate, navigateByPath]);
+  }, [navigate, navigateByPath, isEmbedded]);
 
   const handleCreateFolder = useCallback(async (name: string) => {
     try {
@@ -156,39 +206,43 @@ export default function FilesPage() {
     }
   }, [createDirectory, t]);
 
-  const MAX_FILE_SIZE = 500 * 1024 * 1024; // 500 MB
+  const maxSizeUpload = client?.getMaxSizeUpload() || 0;
 
   const handleUploadFiles = useCallback(async (files: File[]) => {
-    const oversized = files.filter(f => f.size > MAX_FILE_SIZE);
+    if (maxSizeUpload > 0) {
-    const valid = files.filter(f => f.size <= MAX_FILE_SIZE);
+      const oversized = files.filter(f => f.size > maxSizeUpload);
-    if (oversized.length > 0) {
+      files = files.filter(f => f.size <= maxSizeUpload);
-      toast.error(t("file_too_large", { name: oversized[0].name, max: "500 MB" }));
+      if (oversized.length > 0) {
+        toast.error(t("file_too_large", { name: oversized[0].name, max: formatFileSize(maxSizeUpload) }));
+      }
     }
-    if (valid.length === 0) return;
+    if (files.length === 0) return;
     try {
-      await uploadFiles(valid);
+      await uploadFiles(files);
-      toast.success(t("upload_success", { count: valid.length }));
+      toast.success(t("upload_success", { count: files.length }));
     } catch (err) {
       console.error("Failed to upload files:", err);
       toast.error(t("upload_error"));
     }
-  }, [uploadFiles, t]);
+  }, [uploadFiles, t, maxSizeUpload]);
 
   const handleUploadFolder = useCallback(async (files: File[]) => {
-    const oversized = files.filter(f => f.size > MAX_FILE_SIZE);
+    if (maxSizeUpload > 0) {
-    const valid = files.filter(f => f.size <= MAX_FILE_SIZE);
+      const oversized = files.filter(f => f.size > maxSizeUpload);
-    if (oversized.length > 0) {
+      files = files.filter(f => f.size <= maxSizeUpload);
-      toast.error(t("file_too_large", { name: oversized[0].name, max: "500 MB" }));
+      if (oversized.length > 0) {
+        toast.error(t("file_too_large", { name: oversized[0].name, max: formatFileSize(maxSizeUpload) }));
+      }
     }
-    if (valid.length === 0) return;
+    if (files.length === 0) return;
     try {
-      await uploadFolder(valid);
+      await uploadFolder(files);
-      toast.success(t("upload_success", { count: valid.length }));
+      toast.success(t("upload_success", { count: files.length }));
     } catch (err) {
       console.error("Failed to upload folder:", err);
       toast.error(t("upload_error"));
     }
-  }, [uploadFolder, t]);
+  }, [uploadFolder, t, maxSizeUpload]);
 
   const handleDelete = useCallback(async (name: string) => {
     const confirmed = await confirmDialog({
@@ -347,17 +401,59 @@ export default function FilesPage() {
     setShowDetails(v => !v);
   }, []);
 
+  const currentFilesAccountId = useFileStore((s) => s.currentAccountId);
+
+  // Sharing: the browsing client (store-attached) drives the principal picker
+  // and share mutations. supportsPrincipals() gates the whole Share affordance.
+  const sharingEnabled = !!storeClient?.supportsPrincipals();
+  const filesAccountId = storeClient?.getFilesAccountId() ?? null;
+  const handleShare = useCallback(async (id: string, principalId: string, rights: FileNodeRights | null) => {
+    await shareResource(id, principalId, rights);
+  }, [shareResource]);
+
+  // Pro shell only: all connected accounts are equal top-level entries at
+  // the root. The root path "/" itself is a cross-account picker - no
+  // account's files are shown until the user enters one.
+  const accountFolders = isEmbedded
+    ? accounts
+        .filter((a) => a.isConnected)
+        .map((a) => ({
+          accountId: a.id,
+          label: a.label || a.email,
+          email: a.email,
+          avatarColor: a.avatarColor,
+        }))
+    : [];
+  const isAccountPicker = isEmbedded && currentFilesAccountId === null;
+  const currentAccountLabel = isEmbedded && currentFilesAccountId
+    ? (accounts.find((a) => a.id === currentFilesAccountId)?.label
+        || accounts.find((a) => a.id === currentFilesAccountId)?.email
+        || null)
+    : null;
+
+  const handleSelectAccount = useCallback((accountId: string) => {
+    const nextClient = getClientForAccount(accountId);
+    if (!nextClient) return;
+    const store = useFileStore.getState();
+    store.initClient(nextClient, accountId);
+    // Reset supportsFiles so the existing checkSupport effect re-runs for
+    // the freshly-attached client and triggers the initial navigate(null).
+    useFileStore.setState({ supportsFiles: null });
+  }, [getClientForAccount]);
+
   if (!isAuthenticated) return null;
 
   return (
-    <div className="flex h-dvh bg-background overflow-hidden">
+    <div className={cn("flex flex-col bg-background overflow-hidden pt-[env(safe-area-inset-top)]", isEmbedded ? "h-full" : "h-dvh")}>
-      {!isMobile && (
+      <AppTopBannerSlot />
+      <div className="flex flex-1 min-h-0 overflow-hidden">
+      {!isMobile && !isEmbedded && (
         <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(); if (!useAuthStore.getState().isAuthenticated) router.push('/login'); }}
+            onLogout={logout}
             onManageApps={handleManageApps}
             onInlineApp={handleInlineApp}
             onCloseInlineApp={closeInlineApp}
@@ -372,7 +468,7 @@ export default function FilesPage() {
         )}
         <div className={cn("flex flex-1 min-h-0", inlineApp && "hidden")}>
           <div className="flex-1 min-w-0 flex flex-col">
-            {folderLayout !== "sidebar" && (
+            {folderLayout !== "sidebar" && !isEmbedded && (
               <div className={cn("p-4 border-b border-border", isMobile && "px-3 py-3")}>
                 <div className="flex items-center justify-between">
                   <Button
@@ -381,19 +477,32 @@ export default function FilesPage() {
                     onClick={() => router.push("/")}
                     className="justify-start"
                   >
-                    <ArrowLeft className="w-4 h-4 mr-2" />
+                    <ArrowLeft className="w-4 h-4 me-2" />
                     {t("title")}
                   </Button>
                 </div>
               </div>
             )}
 
-            <div className="flex-1 min-h-0">
+            <div className="flex-1 min-h-0 flex flex-col">
-              {supportsFiles === false ? (
+              {!filesEnabled ? (
+                <div className="flex items-center justify-center h-full">
+                  <div className="max-w-lg text-center space-y-3 px-4">
+                    <AlertTriangle className="w-10 h-10 text-yellow-500 mx-auto" />
+                    <p className="text-sm font-medium">{t("disabled_title")}</p>
+                    <p className="text-xs text-muted-foreground">{t("disabled_description")}</p>
+                  </div>
+                </div>
+              ) : supportsFiles === false ? (
                 <div className="flex items-center justify-center h-full">
                   <p className="text-sm text-muted-foreground">{t("not_available")}</p>
                 </div>
               ) : (
+                <div className="flex flex-col flex-1 min-h-0">
+                  <div className="mx-4 mt-3 mb-1 flex items-start gap-2 rounded-md border border-yellow-500/30 bg-yellow-500/10 px-3 py-2">
+                    <AlertTriangle className="w-4 h-4 text-yellow-500 shrink-0 mt-0.5" />
+                    <p className="text-xs text-yellow-700 dark:text-yellow-400">{t("stability_warning")}</p>
+                  </div>
                 <FileBrowser
                   currentPath={currentPath}
                   resources={resources}
@@ -437,13 +546,22 @@ export default function FilesPage() {
                   showDetails={showDetails}
                   onToggleDetails={handleToggleDetails}
                   detailResource={detailResource}
+                  accountFolders={accountFolders}
+                  onSelectAccount={handleSelectAccount}
+                  accountPickerMode={isAccountPicker}
+                  accountLabel={currentAccountLabel}
+                  client={storeClient}
+                  ownAccountId={filesAccountId}
+                  sharingEnabled={sharingEnabled}
+                  onShare={handleShare}
                 />
+                </div>
               )}
             </div>
           </div>
         </div>
 
-        {isMobile && (
+        {isMobile && !isEmbedded && (
           <NavigationRail
             orientation="horizontal"
             onManageApps={handleManageApps}
@@ -474,8 +592,35 @@ export default function FilesPage() {
         />
       )}
 
+      {/* Legacy file migration progress (issue #379) */}
+      {migrationProgress && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
+          <div className="w-[22rem] max-w-[90vw] rounded-lg border border-border bg-background p-6 shadow-xl">
+            <div className="flex items-center gap-3">
+              <Loader2 className="w-5 h-5 text-primary animate-spin shrink-0" />
+              <div>
+                <p className="text-sm font-medium">{t("migration_title")}</p>
+                <p className="text-xs text-muted-foreground">{t("migration_description")}</p>
+              </div>
+            </div>
+            <div className="mt-4 h-1.5 bg-primary/20 rounded-full overflow-hidden">
+              <div
+                className="h-full bg-primary rounded-full transition-all duration-300"
+                style={{ width: migrationProgress.total > 0
+                  ? `${(migrationProgress.current / migrationProgress.total) * 100}%`
+                  : '0%' }}
+              />
+            </div>
+            <p className="mt-2 text-xs text-muted-foreground tabular-nums text-end">
+              {migrationProgress.current} / {migrationProgress.total}
+            </p>
+          </div>
+        </div>
+      )}
+
       <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
       <ConfirmDialog {...confirmDialogProps} />
+      </div>
     </div>
   );
 }

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

@@ -0,0 +1,56 @@
+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 { ProtocolLaunchHandlerProvider } from "@/components/protocol/protocol-launch-handler-provider";
+import { ProInterfaceRedirect } from "@/components/pro/pro-interface-redirect";
+import { ImpersonationReconciler } from "@/components/impersonation/impersonation-reconciler";
+import { PluginDialogHost } from "@/components/plugins/plugin-dialog-host";
+import { PluginConsentDialog } from "@/components/plugins/plugin-consent-dialog";
+import { PWAInstallPrompt } from "@/components/pwa-install-prompt";
+import { locales } from "@/i18n/routing";
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+
+  if (!(locales as readonly string[]).includes(locale)) notFound();
+
+  let messages;
+  try {
+    messages = (await import(`@/locales/${locale}/common.json`)).default;
+  } catch {
+    notFound();
+  }
+
+  return (
+    <IntlProvider locale={locale} messages={messages}>
+      <ThemeProvider>
+        <CalendarAlertProvider>
+          <RateLimitToastProvider>
+            <EmbeddedBridgeProvider>
+              <TourProvider>
+                <ProtocolLaunchHandlerProvider>
+                  <ProInterfaceRedirect />
+                  <ImpersonationReconciler />
+                  {children}
+                  <PluginDialogHost />
+                  <PluginConsentDialog />
+                  <PWAInstallPrompt />
+                </ProtocolLaunchHandlerProvider>
+              </TourProvider>
+            </EmbeddedBridgeProvider>
+          </RateLimitToastProvider>
+        </CalendarAlertProvider>
+      </ThemeProvider>
+    </IntlProvider>
+  );
+}

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

@@ -7,16 +7,28 @@ import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useAuthStore } from "@/stores/auth-store";
+import { useAccountStore } from "@/stores/account-store";
 import { useThemeStore } from "@/stores/theme-store";
+import { resolveThemeLogo } from "@/lib/theme-logo";
 import { useShallow } from "zustand/react/shallow";
 import { useConfig } from "@/hooks/use-config";
+import { apiFetch, getPathPrefix, toRouterPath, withBasePath } from "@/lib/browser-navigation";
 import { cn } from "@/lib/utils";
-import { Mail, AlertCircle, Loader2, X, Info, Eye, EyeOff, LogIn, Sun, Moon, Monitor, Check, Shield, Play } from "lucide-react";
+import { AlertCircle, Loader2, X, Info, Eye, EyeOff, LogIn, Sun, Moon, Monitor, Check, Shield, Play, Copy } from "lucide-react";
-import { discoverOAuth, type OAuthMetadata } from "@/lib/oauth/discovery";
+import { type OAuthMetadata } from "@/lib/oauth/discovery";
 import { generateCodeVerifier, generateCodeChallenge, generateState } from "@/lib/oauth/pkce";
-import { OAUTH_SCOPES } from "@/lib/oauth/tokens";
+import { useUpdateStore, selectBanner } from "@/stores/update-store";
+import type { PublicJmapServerEntry } from "@/lib/admin/jmap-servers";
 
-const APP_VERSION = "1.4.3";
+function findServerByDomain(servers: PublicJmapServerEntry[], email: string | undefined): PublicJmapServerEntry | undefined {
+  if (!email || !email.includes("@")) return undefined;
+  const domain = email.split("@")[1]?.trim().toLowerCase();
+  if (!domain) return undefined;
+  return servers.find((s) => (s.domains ?? []).some((d) => d.toLowerCase() === domain));
+}
+
+const APP_VERSION = process.env.NEXT_PUBLIC_APP_VERSION || "0.0.0";
+const GIT_COMMIT = process.env.NEXT_PUBLIC_GIT_COMMIT || "unknown";
 
 const THEME_OPTIONS = [
   { value: "light" as const, icon: Sun, label: "Light" },
@@ -24,21 +36,135 @@ const THEME_OPTIONS = [
   { value: "system" as const, icon: Monitor, label: "System" },
 ];
 
+function VersionBadge() {
+  const [copied, setCopied] = useState(false);
+  const banner = useUpdateStore(useShallow(selectBanner));
+  const startPolling = useUpdateStore((s) => s.startPolling);
+
+  useEffect(() => { startPolling(); }, [startPolling]);
+
+  const versionInfo = `Version: ${APP_VERSION}\nBuild: ${GIT_COMMIT}${banner?.latest ? `\nLatest: ${banner.latest}` : ""}`;
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(versionInfo).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  const isRed = banner?.variant === "red";
+  const triggerText = !banner
+    ? `v${APP_VERSION}`
+    : banner.severity === "security"
+      ? "Security update available"
+      : banner.severity === "deprecated"
+        ? "Version no longer supported"
+        : "New version available";
+
+  const triggerColor = !banner
+    ? "text-muted-foreground/40"
+    : isRed
+      ? "text-red-600/80 dark:text-red-400/80 hover:text-red-600 dark:hover:text-red-400"
+      : "text-amber-600/80 dark:text-amber-400/80 hover:text-amber-600 dark:hover:text-amber-400";
+
+  const triggerClass = cn(
+    "peer text-center text-xs transition-colors",
+    triggerColor,
+    banner?.url ? "cursor-pointer underline-offset-2 hover:underline" : "cursor-default",
+  );
+
+  const trigger = banner?.url ? (
+    <a href={banner.url} target="_blank" rel="noopener noreferrer" className={triggerClass}>
+      {triggerText}
+    </a>
+  ) : (
+    <p className={triggerClass}>{triggerText}</p>
+  );
+
+  return (
+    <div className="relative inline-flex justify-center">
+      {trigger}
+      <div className="absolute top-full left-1/2 -translate-x-1/2 mt-1.5 px-3 py-2 rounded-md bg-popover text-popover-foreground text-xs shadow-md border border-border opacity-0 peer-hover:opacity-100 hover:opacity-100 transition-opacity whitespace-nowrap z-10">
+        <div className="flex items-center gap-2">
+          <div className="space-y-0.5">
+            <p>Version: <span className="font-medium">{APP_VERSION}</span></p>
+            <p>Build: <span className="font-medium">{GIT_COMMIT}</span></p>
+            {banner?.latest && (
+              <p>Latest: <span className="font-medium">{banner.latest}</span></p>
+            )}
+            {banner?.advisory && (
+              <p className="text-red-500 dark:text-red-400">{banner.advisory}</p>
+            )}
+          </div>
+          <button
+            onClick={handleCopy}
+            className="p-1 rounded hover:bg-muted transition-colors"
+            aria-label="Copy version info"
+          >
+            {copied ? <Check className="w-3.5 h-3.5 text-green-500" /> : <Copy className="w-3.5 h-3.5" />}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Only redirect targets matching this scheme are honored by the mobile
+// handoff path. Without the check the login page becomes an open redirector
+// that funnels password and token material to any caller-supplied URL.
+const MOBILE_REDIRECT_SCHEME = "bulwarkmobile://";
+
 export default function LoginPage() {
   const router = useRouter();
   const t = useTranslations("login");
   const params = useParams();
   const searchParams = useSearchParams();
   const isAddAccountMode = searchParams.get("mode") === "add-account";
+
+  // When the mobile app launches the webmail in a browser tab it tacks on
+  // these params. We grab them once at mount and stash them in a ref so any
+  // login path that completes (password or OAuth) can hand control back to
+  // the app instead of routing into /mail.
+  const rawMobileRedirectUri = searchParams.get("mobile_redirect_uri") ?? "";
+  const rawMobileState = searchParams.get("mobile_state") ?? "";
+  const mobileRedirectUri = rawMobileRedirectUri.startsWith(MOBILE_REDIRECT_SCHEME)
+    ? rawMobileRedirectUri
+    : "";
+  const mobileState = mobileRedirectUri ? rawMobileState : "";
+  const isMobileHandoff = Boolean(mobileRedirectUri);
   const { login, loginDemo, isLoading, error, clearError, isAuthenticated } = useAuthStore();
   const { theme, setTheme, initializeTheme } = useThemeStore(useShallow((s) => ({ theme: s.theme, setTheme: s.setTheme, initializeTheme: s.initializeTheme })));
-  const { appName, jmapServerUrl: serverUrl, oauthEnabled, oauthOnly, oauthClientId, oauthIssuerUrl, rememberMeEnabled, devMode, demoMode, loginLogoLightUrl, loginLogoDarkUrl, loginCompanyName, loginImprintUrl, loginPrivacyPolicyUrl, loginWebsiteUrl, isLoading: configLoading, error: configError } = useConfig();
+  const { appName, jmapServerUrl: configuredServerUrl, oauthEnabled, oauthOnly, oauthClientId: globalOauthClientId, oauthIssuerUrl: globalOauthIssuerUrl, oauthScopes, rememberMeEnabled, devMode, demoMode, loginLogoLightUrl, loginLogoDarkUrl, loginCompanyName, loginImprintUrl, loginPrivacyPolicyUrl, loginWebsiteUrl, loginLogoMaxHeight, loginLogoMaxWidth, loginShowHeading, loginShowSubtitle, loginShowTotp, loginShowVersion, isLoading: configLoading, error: configError, autoSsoEnabled, embeddedMode: _embeddedMode, allowCustomJmapEndpoint, jmapServers, jmapServerAutoPickByDomain } = useConfig();
   const resolvedTheme = useThemeStore((s) => s.resolvedTheme);
+  const { activeThemeId, installedThemes } = useThemeStore(useShallow((s) => ({ activeThemeId: s.activeThemeId, installedThemes: s.installedThemes })));
+  // Active theme may carry its own brand logo (VNClagoon wordmark, SRC mark);
+  // fall back to the globally configured login logo.
+  const effLoginLogo = resolveThemeLogo(installedThemes, activeThemeId, resolvedTheme === 'dark', loginLogoLightUrl, loginLogoDarkUrl);
+
+  // Login logo sizing: when a max height/width is configured, drop the fixed
+  // 64×64 box so the logo (e.g. a wide wordmark) can render at its true size.
+  const hasLogoSize = Boolean(loginLogoMaxHeight || loginLogoMaxWidth);
+  const loginLogoStyle = hasLogoSize
+    ? { maxHeight: loginLogoMaxHeight || undefined, maxWidth: loginLogoMaxWidth || undefined }
+    : undefined;
 
   const [formData, setFormData] = useState({
     username: "",
     password: "",
   });
+  const [jmapEndpoint, setJmapEndpoint] = useState("");
+  const [selectedServerId, setSelectedServerId] = useState<string | null>(null);
+  const [domainAutoLocked, setDomainAutoLocked] = useState(false);
+
+  const hasServerList = jmapServers.length > 0;
+  const selectedServer = hasServerList
+    ? jmapServers.find((s) => s.id === selectedServerId) ?? jmapServers[0]
+    : undefined;
+
+  // Effective values: per-server overrides win, then global config.
+  const serverUrl = selectedServer?.url || configuredServerUrl;
+  const effectiveOauthClientId = selectedServer?.oauth?.clientId || globalOauthClientId;
+  const effectiveOauthIssuerUrl = selectedServer?.oauth?.issuerUrl || globalOauthIssuerUrl;
   const [totpCode, setTotpCode] = useState("");
   const [showTotpField, setShowTotpField] = useState(false);
   const [rememberMe, setRememberMe] = useState(false);
@@ -62,6 +188,9 @@ export default function LoginPage() {
   const totpInputRef = useRef<HTMLInputElement>(null);
   const prevError = useRef<string | null>(null);
   const themeMenuRef = useRef<HTMLDivElement>(null);
+  // Captured by handleSubmit when in mobile handoff mode; consumed by the
+  // isAuthenticated effect to build the deep-link fragment.
+  const mobileHandoffPayloadRef = useRef<{ server_url: string; username: string; password: string } | null>(null);
 
   useEffect(() => {
     initializeTheme();
@@ -73,6 +202,33 @@ export default function LoginPage() {
     }
   }, [appName, serverUrl]);
 
+  useEffect(() => {
+    if (serverUrl && !jmapEndpoint) {
+      setJmapEndpoint(serverUrl);
+    }
+  }, [serverUrl, jmapEndpoint]);
+
+  // Initialize selected server when the server list arrives. Picks the first
+  // entry; the auto-pick effect below may override based on the email domain.
+  useEffect(() => {
+    if (!hasServerList) return;
+    if (selectedServerId && jmapServers.some((s) => s.id === selectedServerId)) return;
+    setSelectedServerId(jmapServers[0].id);
+  }, [hasServerList, jmapServers, selectedServerId]);
+
+  // Auto-pick by email domain. Locks the dropdown to the matched server until
+  // the user clears the email or types a domain we don't recognize.
+  useEffect(() => {
+    if (!jmapServerAutoPickByDomain || !hasServerList) return;
+    const match = findServerByDomain(jmapServers, formData.username);
+    if (match) {
+      if (selectedServerId !== match.id) setSelectedServerId(match.id);
+      setDomainAutoLocked(true);
+    } else {
+      setDomainAutoLocked(false);
+    }
+  }, [jmapServerAutoPickByDomain, hasServerList, jmapServers, formData.username, selectedServerId]);
+
   useEffect(() => {
     try {
       if (sessionStorage.getItem('session_expired') === 'true') {
@@ -91,6 +247,14 @@ export default function LoginPage() {
     prevError.current = error;
   }, [error]);
 
+  // Auto-show and focus TOTP field when server requires it
+  useEffect(() => {
+    if (error === 'totp_required') {
+      setShowTotpField(true);
+      setTimeout(() => totpInputRef.current?.focus(), 100);
+    }
+  }, [error]);
+
   useEffect(() => {
     if (!serverUrl) return;
     const saved = localStorage.getItem("webmail_usernames");
@@ -106,6 +270,19 @@ export default function LoginPage() {
 
   useEffect(() => {
     if (isAuthenticated && !isAddAccountMode) {
+      // Mobile handoff: the password path completes here once the auth store
+      // flips isAuthenticated. Hand the verified credentials back to the
+      // mobile app instead of pushing to /mail. handleSubmit captured the
+      // values needed for the fragment.
+      if (isMobileHandoff && mobileHandoffPayloadRef.current) {
+        const fragment = new URLSearchParams({
+          flow: "password",
+          ...mobileHandoffPayloadRef.current,
+          state: mobileState,
+        });
+        window.location.replace(`${mobileRedirectUri}#${fragment.toString()}`);
+        return;
+      }
       let redirectTo = '/';
       try {
         const saved = sessionStorage.getItem('redirect_after_login');
@@ -114,9 +291,9 @@ export default function LoginPage() {
           redirectTo = saved;
         }
       } catch { /* ignore */ }
-      router.push(redirectTo);
+      router.push(toRouterPath(redirectTo));
     }
-  }, [isAuthenticated, router, isAddAccountMode]);
+  }, [isAuthenticated, router, isAddAccountMode, isMobileHandoff, mobileRedirectUri, mobileState]);
 
   useEffect(() => {
     clearError();
@@ -162,16 +339,104 @@ export default function LoginPage() {
 
   useEffect(() => {
     if (!oauthEnabled || !serverUrl) return;
-    discoverOAuth(oauthIssuerUrl || serverUrl)
+    setOauthDiscoveryDone(false);
+    setOauthMetadata(null);
+    const controller = new AbortController();
+    // Discover via our own origin rather than fetching the IdP's /.well-known/*
+    // documents directly from the browser. A direct cross-origin discovery
+    // fetch is subject to CORS, and providers like Authentik serve those
+    // documents without Access-Control-Allow-Origin, so the browser blocks the
+    // response and login breaks (issue #382). The proxy runs discovery server
+    // side where CORS does not apply.
+    const query = selectedServer?.id ? `?server_id=${encodeURIComponent(selectedServer.id)}` : "";
+    apiFetch(`/api/auth/oauth/metadata${query}`, { signal: controller.signal })
+      .then(async (res) => (res.ok ? ((await res.json()) as OAuthMetadata) : null))
       .then((metadata) => {
         setOauthMetadata(metadata);
         setOauthDiscoveryDone(true);
       })
-      .catch(() => {
+      .catch((err) => {
+        if (err?.name === "AbortError") return;
         setOauthMetadata(null);
         setOauthDiscoveryDone(true);
       });
-  }, [oauthEnabled, serverUrl, oauthIssuerUrl]);
+    return () => controller.abort();
+  }, [oauthEnabled, serverUrl, effectiveOauthIssuerUrl, selectedServer?.id]);
+
+  // Auto-SSO: when enabled with OAUTH_ONLY, skip the login page entirely
+  const ssoError = searchParams.get("sso_error");
+  const autoSsoTriggered = useRef(false);
+
+  const startServerSideSso = useCallback(async () => {
+    setOauthLoading(true);
+    try {
+      const prefix = getPathPrefix(params.locale as string);
+      const redirectUri = `${window.location.origin}${prefix}/${params.locale}/auth/callback`;
+      // In mobile-handoff mode the callback page needs to know it should
+      // redirect into the app rather than into /mail. Stash the params in
+      // sessionStorage so the same-tab callback can read them - the SSO
+      // pending cookie carries the authoritative copy server-side too.
+      if (isMobileHandoff) {
+        try {
+          sessionStorage.setItem("mobile_redirect_uri", mobileRedirectUri);
+          sessionStorage.setItem("mobile_state", mobileState);
+        } catch { /* sessionStorage unavailable */ }
+      }
+      const res = await apiFetch('/api/auth/sso/start', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          redirect_uri: redirectUri,
+          locale: params.locale,
+          server_id: selectedServer?.id,
+          ...(isMobileHandoff
+            ? { mobile_redirect_uri: mobileRedirectUri, mobile_state: mobileState }
+            : {}),
+        }),
+      });
+
+      if (!res.ok) {
+        setOauthLoading(false);
+        return;
+      }
+
+      const { authorize_url } = await res.json();
+
+      // Navigate to the authorize URL
+      const isIframe = (() => { try { return window.self !== window.top; } catch { return true; } })();
+      if (isIframe) {
+        // In an iframe, try top-level navigation
+        try {
+          window.top!.location.href = authorize_url;
+        } catch {
+          // Cross-origin restriction - fall back to current frame
+          window.location.href = authorize_url;
+        }
+      } else {
+        window.location.href = authorize_url;
+      }
+    } catch {
+      setOauthLoading(false);
+    }
+  }, [params.locale, selectedServer?.id, isMobileHandoff, mobileRedirectUri, mobileState]);
+
+  useEffect(() => {
+    if (!autoSsoEnabled || !oauthOnly || !oauthDiscoveryDone || !oauthMetadata) return;
+    if (ssoError || isAddAccountMode || isAuthenticated) return;
+    if (autoSsoTriggered.current) return;
+
+    // Guard against redirect loops
+    try {
+      if (sessionStorage.getItem("sso_attempted")) return;
+      sessionStorage.setItem("sso_attempted", "1");
+      // Clear the flag after 30 seconds so retries are possible
+      setTimeout(() => { try { sessionStorage.removeItem("sso_attempted"); } catch { /* ignore */ } }, 30000);
+    } catch { /* sessionStorage unavailable */ }
+
+    autoSsoTriggered.current = true;
+    startServerSideSso();
+  }, [autoSsoEnabled, oauthOnly, oauthDiscoveryDone, oauthMetadata, ssoError, isAddAccountMode, isAuthenticated, startServerSideSso]);
 
   const handleThemeSelect = useCallback((newTheme: "light" | "dark" | "system") => {
     setTheme(newTheme);
@@ -207,7 +472,7 @@ export default function LoginPage() {
     );
   }
 
-  if (!serverUrl && !demoMode) {
+  if (!serverUrl && !demoMode && !allowCustomJmapEndpoint) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/30">
         <div className="w-full max-w-md mx-auto px-4 text-center">
@@ -295,26 +560,56 @@ export default function LoginPage() {
   };
 
   const handleOAuthLogin = async () => {
-    if (!oauthMetadata || !oauthClientId) return;
+    if (!oauthMetadata || !effectiveOauthClientId) return;
+    // In mobile-handoff mode the client-side PKCE flow doesn't help us:
+    // tokens would land in sessionStorage on the webmail origin and the
+    // mobile app couldn't read them. Route through the server-side SSO
+    // path instead, which has the mobile-aware /api/auth/sso/complete
+    // branch.
+    if (isMobileHandoff) {
+      await startServerSideSso();
+      return;
+    }
     setOauthLoading(true);
 
     const verifier = generateCodeVerifier();
     const challenge = await generateCodeChallenge(verifier);
     const state = generateState();
-    const redirectUri = `${window.location.origin}/${params.locale}/auth/callback`;
+    const prefix = getPathPrefix(params.locale as string);
+    const redirectUri = `${window.location.origin}${prefix}/${params.locale}/auth/callback`;
+
+    // Resolve the JMAP URL to send to the callback. Server-list entries win
+    // over the custom-endpoint input, which wins over the global server URL.
+    const oauthServerUrl = selectedServer?.url
+      || (allowCustomJmapEndpoint ? jmapEndpoint : configuredServerUrl);
 
     sessionStorage.setItem("oauth_code_verifier", verifier);
     sessionStorage.setItem("oauth_state", state);
-    sessionStorage.setItem("oauth_server_url", serverUrl!);
+    sessionStorage.setItem("oauth_server_url", oauthServerUrl!);
+    if (selectedServer?.id) {
+      sessionStorage.setItem("oauth_server_id", selectedServer.id);
+    } else {
+      sessionStorage.removeItem("oauth_server_id");
+    }
     if (isAddAccountMode) {
       sessionStorage.setItem("oauth_add_account_mode", "true");
     }
 
+    // Persist the next-free cookie slot so loginWithOAuth (in stores/auth-store.ts)
+    // writes the refresh token to the correct per-account jmap_rt_<slot> cookie.
+    // loginWithOAuth reads this key but it was previously never written, so every
+    // OAuth account collapsed onto slot 0 and clobbered earlier accounts' refresh
+    // tokens. getNextCookieSlot() returns 0 when no accounts exist (correct for
+    // first sign-in) and the lowest unused slot otherwise (correct for "+ Add
+    // Account").
+    const nextSlot = useAccountStore.getState().getNextCookieSlot();
+    sessionStorage.setItem("oauth_cookie_slot", nextSlot.toString());
+
     const authUrl = new URL(oauthMetadata.authorization_endpoint);
     authUrl.searchParams.set("response_type", "code");
-    authUrl.searchParams.set("client_id", oauthClientId);
+    authUrl.searchParams.set("client_id", effectiveOauthClientId);
     authUrl.searchParams.set("redirect_uri", redirectUri);
-    authUrl.searchParams.set("scope", OAUTH_SCOPES);
+    authUrl.searchParams.set("scope", oauthScopes || "openid email profile");
     authUrl.searchParams.set("state", state);
     authUrl.searchParams.set("code_challenge", challenge);
     authUrl.searchParams.set("code_challenge_method", "S256");
@@ -325,8 +620,22 @@ export default function LoginPage() {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
+    // Server-list entries always win - `allowCustomJmapEndpoint` is only honored
+    // when the admin hasn't configured a server list.
+    const effectiveServerUrl = selectedServer?.url
+      || (allowCustomJmapEndpoint ? jmapEndpoint : serverUrl);
+    // Capture before login() so the isAuthenticated effect can build the
+    // deep-link fragment with values the user actually typed (formData may
+    // be cleared by the auth store on success).
+    if (isMobileHandoff) {
+      mobileHandoffPayloadRef.current = {
+        server_url: effectiveServerUrl,
+        username: formData.username,
+        password: formData.password,
+      };
+    }
     const success = await login(
-      serverUrl,
+      effectiveServerUrl,
       formData.username,
       formData.password,
       totpCode || undefined,
@@ -335,7 +644,15 @@ export default function LoginPage() {
 
     if (success) {
       saveUsername(formData.username);
+      if (isMobileHandoff) {
+        // The isAuthenticated effect handles the redirect; nothing else to
+        // do here. Don't push to / - that would race the deep link.
+        return;
+      }
       router.push('/');
+    } else if (isMobileHandoff) {
+      // Stale payload should never feed into a later retry's redirect.
+      mobileHandoffPayloadRef.current = null;
     }
   };
 
@@ -350,7 +667,7 @@ export default function LoginPage() {
           redirectTo = saved;
         }
       } catch { /* ignore */ }
-      router.push(redirectTo);
+      router.push(toRouterPath(redirectTo));
     }
   };
 
@@ -413,7 +730,7 @@ export default function LoginPage() {
                     )}
                   >
                     <Icon className="w-4 h-4" />
-                    <span className="flex-1 text-left">{option.label}</span>
+                    <span className="flex-1 text-start">{option.label}</span>
                     {isActive && <Check className="w-3.5 h-3.5 text-primary" />}
                   </button>
                 );
@@ -428,7 +745,7 @@ export default function LoginPage() {
             <div className="px-8 pt-12 pb-4 text-center">
               <div className="inline-flex items-center justify-center w-20 h-20 mb-6">
                 <img
-                  src={resolvedTheme === 'dark' ? loginLogoDarkUrl : loginLogoLightUrl}
+                  src={withBasePath(effLoginLogo)}
                   alt={appName}
                   className="max-w-20 max-h-20 object-contain"
                 />
@@ -445,13 +762,17 @@ export default function LoginPage() {
             <div className="px-8 pb-10 pt-4">
               {error && (
                 <div className={cn(
-                  "mb-5 p-3.5 bg-red-500/10 border border-red-500/20 rounded-xl flex items-start gap-3",
+                  "mb-5 p-3 rounded-xl border border-destructive/20 bg-destructive/5 flex items-start gap-3",
                   shakeError && "animate-shake"
                 )}>
-                  <AlertCircle className="w-4.5 h-4.5 text-red-500 flex-shrink-0 mt-0.5" />
+                  <div className="w-10 h-10 rounded-full bg-destructive/15 text-destructive flex items-center justify-center flex-shrink-0 shadow-sm">
-                  <p className="text-sm text-red-600 dark:text-red-400 leading-relaxed">
+                    <AlertCircle className="w-5 h-5" />
-                    {t(`error.${error}`) || t("error.generic")}
+                  </div>
-                  </p>
+                  <div className="flex-1 min-w-0 self-center">
+                    <p className="text-sm text-destructive leading-relaxed">
+                      {t(`error.${error}`) || t("error.generic")}
+                    </p>
+                  </div>
                 </div>
               )}
 
@@ -506,9 +827,7 @@ export default function LoginPage() {
                 )}
               </div>
             )}
-            <p className="text-center text-xs text-muted-foreground/40">
+            {loginShowVersion && <VersionBadge />}
-              v{APP_VERSION}
-            </p>
           </div>
         </div>
       </div>
@@ -560,7 +879,7 @@ export default function LoginPage() {
                   )}
                 >
                   <Icon className="w-4 h-4" />
-                  <span className="flex-1 text-left">{option.label}</span>
+                  <span className="flex-1 text-start">{option.label}</span>
                   {isActive && <Check className="w-3.5 h-3.5 text-primary" />}
                 </button>
               );
@@ -574,19 +893,24 @@ export default function LoginPage() {
         <div className="rounded-2xl border border-border/60 bg-background/80 backdrop-blur-sm shadow-xl shadow-black/5 dark:shadow-black/20 overflow-hidden">
           {/* Header section with logo */}
           <div className="px-8 pt-10 pb-6 text-center">
-            <div className="inline-flex items-center justify-center w-16 h-16 mb-5">
+            <div className={cn("inline-flex items-center justify-center mb-5", !hasLogoSize && "w-16 h-16")}>
               <img
-                src={resolvedTheme === 'dark' ? loginLogoDarkUrl : loginLogoLightUrl}
+                src={withBasePath(effLoginLogo)}
                 alt={appName}
-                className="max-w-16 max-h-16 object-contain"
+                className={cn("object-contain", !hasLogoSize && "max-w-16 max-h-16")}
+                style={loginLogoStyle}
               />
             </div>
-            <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+            {loginShowHeading && (
-              {isAddAccountMode ? t("add_account_title") : appName}
+              <h1 className="text-2xl font-semibold text-foreground tracking-tight">
-            </h1>
+                {isAddAccountMode ? t("add_account_title") : appName}
-            <p className="text-sm text-muted-foreground mt-1.5">
+              </h1>
-              {isAddAccountMode ? t("add_account_subtitle") : (t("title") !== appName ? t("title") : "Sign in to your account")}
+            )}
-            </p>
+            {loginShowSubtitle && (
+              <p className="text-sm text-muted-foreground mt-1.5">
+                {isAddAccountMode ? t("add_account_subtitle") : (t("title") !== appName ? t("title") : "Sign in to your account")}
+              </p>
+            )}
           </div>
 
           {/* Form section */}
@@ -594,37 +918,45 @@ export default function LoginPage() {
             {/* Session Expired Banner */}
             {sessionExpired && (
               <div
-                className="mb-5 p-3.5 bg-blue-500/10 border border-blue-500/20 rounded-xl flex items-start gap-3"
+                className="mb-5 p-3 rounded-xl border border-info/20 bg-info/5 flex items-start gap-3"
                 role="status"
                 aria-live="polite"
               >
-                <Info className="w-4.5 h-4.5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
+                <div className="w-10 h-10 rounded-full bg-info/15 text-info flex items-center justify-center flex-shrink-0 shadow-sm">
-                <p className="text-sm text-blue-700 dark:text-blue-300 flex-1 leading-relaxed">
+                  <Info className="w-5 h-5" />
-                  {t("session_expired")}
+                </div>
-                </p>
+                <div className="flex-1 min-w-0 self-center flex items-center gap-2">
-                <button
+                  <p className="text-sm text-info flex-1 leading-relaxed">
-                  type="button"
+                    {t("session_expired")}
-                  onClick={() => setSessionExpired(false)}
+                  </p>
-                  className="p-0.5 rounded-md hover:bg-blue-500/10 transition-colors flex-shrink-0"
+                  <button
-                  aria-label={t("dismiss")}
+                    type="button"
-                >
+                    onClick={() => setSessionExpired(false)}
-                  <X className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+                    className="p-1 rounded-md text-info hover:bg-info/10 transition-colors flex-shrink-0"
-                </button>
+                    aria-label={t("dismiss")}
+                  >
+                    <X className="w-4 h-4" />
+                  </button>
+                </div>
               </div>
             )}
 
             {/* Error Message */}
             {error && (
               <div className={cn(
-                "mb-5 p-3.5 bg-red-500/10 border border-red-500/20 rounded-xl flex items-start gap-3",
+                "mb-5 p-3 rounded-xl border border-destructive/20 bg-destructive/5 flex items-start gap-3",
                 shakeError && "animate-shake"
               )}>
-                <AlertCircle className="w-4.5 h-4.5 text-red-500 flex-shrink-0 mt-0.5" />
+                <div className="w-10 h-10 rounded-full bg-destructive/15 text-destructive flex items-center justify-center flex-shrink-0 shadow-sm">
-                <p className="text-sm text-red-600 dark:text-red-400 leading-relaxed">
+                  <AlertCircle className="w-5 h-5" />
-                  {error === 'invalid_credentials' && showTotpField && totpCode
+                </div>
-                    ? t('error.totp_invalid')
+                <div className="flex-1 min-w-0 self-center">
-                    : t(`error.${error}`) || t("error.generic")}
+                  <p className="text-sm text-destructive leading-relaxed">
-                </p>
+                    {error === 'invalid_credentials' && showTotpField && totpCode
+                      ? t('error.totp_invalid')
+                      : t(`error.${error}`) || t("error.generic")}
+                  </p>
+                </div>
               </div>
             )}
 
@@ -650,7 +982,7 @@ export default function LoginPage() {
                   )}
                 </Button>
                 <p className="text-center text-xs text-muted-foreground">
-                  Dev mode — logging in as dev@localhost
+                  Dev mode - logging in as dev@localhost
                 </p>
               </div>
             ) : oauthOnly ? (
@@ -676,11 +1008,15 @@ export default function LoginPage() {
                     )}
                   </Button>
                 ) : oauthDiscoveryDone ? (
-                  <div className="p-3.5 bg-amber-500/10 border border-amber-500/20 rounded-xl flex items-start gap-2">
+                  <div className="p-3 rounded-xl border border-warning/20 bg-warning/5 flex items-start gap-3">
-                    <AlertCircle className="w-4 h-4 text-amber-700 dark:text-amber-400 flex-shrink-0 mt-0.5" />
+                    <div className="w-10 h-10 rounded-full bg-warning/15 text-warning flex items-center justify-center flex-shrink-0 shadow-sm">
-                    <p className="text-sm text-amber-700 dark:text-amber-400">
+                      <AlertCircle className="w-5 h-5" />
-                      {t("error.oauth_discovery_failed")}
+                    </div>
-                    </p>
+                    <div className="flex-1 min-w-0 self-center">
+                      <p className="text-sm text-warning leading-relaxed">
+                        {t("error.oauth_discovery_failed")}
+                      </p>
+                    </div>
                   </div>
                 ) : (
                   <div className="flex justify-center py-4">
@@ -692,6 +1028,51 @@ export default function LoginPage() {
               /* Login Form */
               <form onSubmit={handleSubmit} className="space-y-5">
                 <fieldset disabled={isLoading} className="space-y-4">
+                  {/* Server picker (when admin has configured a server list) */}
+                  {hasServerList && jmapServers.length > 1 && (
+                    <div className="space-y-1.5">
+                      <label htmlFor="jmap-server-select" className="block text-sm font-medium text-foreground">
+                        {t("jmap_server_label")}
+                      </label>
+                      <select
+                        id="jmap-server-select"
+                        value={selectedServer?.id ?? ""}
+                        onChange={(e) => setSelectedServerId(e.target.value)}
+                        disabled={domainAutoLocked}
+                        className="h-11 w-full px-3.5 bg-muted/40 border border-border/60 rounded-xl focus:bg-background focus:border-primary/50 transition-all duration-200 text-sm text-foreground disabled:opacity-70 disabled:cursor-not-allowed"
+                      >
+                        {jmapServers.map((s) => (
+                          <option key={s.id} value={s.id}>{s.label}</option>
+                        ))}
+                      </select>
+                      {domainAutoLocked && (
+                        <p className="text-[11px] text-muted-foreground leading-snug">
+                          {t("jmap_server_auto_picked")}
+                        </p>
+                      )}
+                    </div>
+                  )}
+                  {/* JMAP Endpoint field (only when no server list and custom endpoints are allowed) */}
+                  {!hasServerList && allowCustomJmapEndpoint && (
+                    <div className="space-y-1.5">
+                      <label htmlFor="jmap-endpoint" className="block text-sm font-medium text-foreground">
+                        {t("jmap_endpoint_label")}
+                      </label>
+                      <Input
+                        id="jmap-endpoint"
+                        type="url"
+                        value={jmapEndpoint}
+                        onChange={(e) => setJmapEndpoint(e.target.value)}
+                        className="h-11 px-3.5 bg-muted/40 border-border/60 rounded-xl focus:bg-background focus:border-primary/50 transition-all duration-200"
+                        placeholder={t("jmap_endpoint_placeholder")}
+                        required
+                      />
+                      <p className="text-[11px] text-muted-foreground leading-snug">
+                        {t("jmap_endpoint_cors_hint")}
+                      </p>
+                    </div>
+                  )}
+
                   {/* Username field */}
                   <div className="space-y-1.5">
                     <label htmlFor="username" className="block text-sm font-medium text-foreground">
@@ -757,7 +1138,7 @@ export default function LoginPage() {
                         type={showPassword ? "text" : "password"}
                         value={formData.password}
                         onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-                        className="h-11 px-3.5 pr-11 bg-muted/40 border-border/60 rounded-xl focus:bg-background focus:border-primary/50 transition-all duration-200"
+                        className="h-11 px-3.5 pe-11 bg-muted/40 border-border/60 rounded-xl focus:bg-background focus:border-primary/50 transition-all duration-200"
                         placeholder={t("password_placeholder")}
                         required
                         autoComplete="current-password"
@@ -778,8 +1159,12 @@ export default function LoginPage() {
                     </div>
                   </div>
 
-                  {/* 2FA toggle / field */}
+                  {/* 2FA toggle / field. The manual toggle can be hidden via
+                      LOGIN_SHOW_TOTP (loginShowTotp) for deployments whose mail
+                      server has no per-account TOTP (auth delegated to an
+                      external directory); server-required TOTP still shows. */}
                   {!showTotpField ? (
+                    loginShowTotp ? (
                     <button
                       type="button"
                       onClick={() => {
@@ -791,6 +1176,7 @@ export default function LoginPage() {
                       <Shield className="w-3.5 h-3.5" />
                       {t("totp_toggle")}
                     </button>
+                    ) : null
                   ) : (
                     <div className="space-y-1.5">
                       <label htmlFor="totp" className="block text-sm font-medium text-foreground">
@@ -804,7 +1190,10 @@ export default function LoginPage() {
                         maxLength={6}
                         value={totpCode}
                         onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, ''))}
-                        className="h-11 px-3.5 bg-muted/40 border-border/60 rounded-xl focus:bg-background focus:border-primary/50 transition-all duration-200 text-center font-mono tracking-widest"
+                        className={cn(
+                          "h-11 px-3.5 bg-muted/40 border-border/60 rounded-xl focus:bg-background focus:border-primary/50 transition-all duration-200 text-center font-mono tracking-widest",
+                          error === 'totp_required' && "border-primary ring-2 ring-primary/30"
+                        )}
                         placeholder={t("totp_placeholder")}
                         autoComplete="one-time-code"
                         aria-label={t("totp_label")}
@@ -874,9 +1263,9 @@ export default function LoginPage() {
                       disabled={oauthLoading || isLoading}
                     >
                       {oauthLoading ? (
-                        <Loader2 className="w-4 h-4 animate-spin mr-2" />
+                        <Loader2 className="w-4 h-4 animate-spin me-2" />
                       ) : (
-                        <LogIn className="w-4 h-4 mr-2" />
+                        <LogIn className="w-4 h-4 me-2" />
                       )}
                       {t("sign_in_sso")}
                     </Button>
@@ -884,11 +1273,15 @@ export default function LoginPage() {
                 )}
 
                 {oauthEnabled && oauthDiscoveryDone && !oauthMetadata && (
-                  <div className="mt-2 p-3 bg-amber-500/10 border border-amber-500/20 rounded-xl flex items-start gap-2">
+                  <div className="mt-2 p-3 rounded-xl border border-warning/20 bg-warning/5 flex items-start gap-3">
-                    <AlertCircle className="w-4 h-4 text-amber-700 dark:text-amber-400 flex-shrink-0 mt-0.5" />
+                    <div className="w-10 h-10 rounded-full bg-warning/15 text-warning flex items-center justify-center flex-shrink-0 shadow-sm">
-                    <p className="text-sm text-amber-700 dark:text-amber-400">
+                      <AlertCircle className="w-5 h-5" />
-                      {t("error.oauth_discovery_failed")}
+                    </div>
-                    </p>
+                    <div className="flex-1 min-w-0 self-center">
+                      <p className="text-sm text-warning leading-relaxed">
+                        {t("error.oauth_discovery_failed")}
+                      </p>
+                    </div>
                   </div>
                 )}
               </form>
@@ -978,9 +1371,7 @@ export default function LoginPage() {
               )}
             </div>
           )}
-          <p className="text-center text-xs text-muted-foreground/40">
+          {loginShowVersion && <VersionBadge />}
-            v{APP_VERSION}
-          </p>
         </div>
       </div>
     </div>

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

@@ -0,0 +1,403 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState, type ComponentType, type DragEvent } from "react";
+import { useTranslations } from "next-intl";
+import { NavigationRail } from "@/components/layout/navigation-rail";
+import { KeyboardShortcutsModal } from "@/components/keyboard-shortcuts-modal";
+import { SidebarAppsModal } from "@/components/layout/sidebar-apps-modal";
+import { InlineAppView } from "@/components/layout/inline-app-view";
+import { useSidebarApps } from "@/hooks/use-sidebar-apps";
+import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
+import { useEmailStore } from "@/stores/email-store";
+import { useSettingsStore } from "@/stores/settings-store";
+import { useDeviceDetection } from "@/hooks/use-media-query";
+import { EmbeddedContext } from "@/hooks/use-is-embedded";
+import { PaneSizeContext } from "@/hooks/use-pane-size";
+import { ProTabBar, PRO_TAB_DRAG_MIME } from "@/components/pro/pro-tab-bar";
+import { useProTabStore, type ProTab, type ProTabKind, type ProPaneId } from "@/stores/pro-tab-store";
+import { cn } from "@/lib/utils";
+import { getPathPrefix } from "@/lib/browser-navigation";
+
+import MailPage from "@/app/(main)/[locale]/page";
+import CalendarPage from "@/app/(main)/[locale]/calendar/page";
+import ContactsPage from "@/app/(main)/[locale]/contacts/page";
+import FilesPage from "@/app/(main)/[locale]/files/page";
+import SettingsPage from "@/app/(main)/[locale]/settings/page";
+import { ProComposeTabBody } from "@/components/pro/pro-compose-tab-body";
+import { ProEmailTabBody } from "@/components/pro/pro-email-tab-body";
+
+const APP_TAB_COMPONENTS: Partial<Record<ProTabKind, ComponentType>> = {
+  mail: MailPage,
+  calendar: CalendarPage,
+  contacts: ContactsPage,
+  files: FilesPage,
+  settings: SettingsPage,
+};
+
+type DropTarget = 'left' | 'right' | null;
+
+function renderTabBody(tab: ProTab): React.ReactNode {
+  if (tab.kind === 'compose' && tab.composeData) {
+    return <ProComposeTabBody tabId={tab.id} data={tab.composeData} />;
+  }
+  if (tab.kind === 'email' && tab.emailData) {
+    return <ProEmailTabBody tabId={tab.id} data={tab.emailData} />;
+  }
+  const Component = APP_TAB_COMPONENTS[tab.kind];
+  return Component ? <Component /> : null;
+}
+
+interface PaneProps {
+  paneId: ProPaneId;
+  tabs: ProTab[];
+  activeTabId: string | null;
+  loadedTabIds: string[];
+  onPaneFocus: (paneId: ProPaneId) => void;
+  isFocused: boolean;
+}
+
+function Pane({ paneId, tabs, activeTabId, loadedTabIds, onPaneFocus, isFocused }: PaneProps) {
+  const paneRef = useRef<HTMLDivElement | null>(null);
+  // Measured pane width, published to children via PaneSizeContext so that
+  // useDeviceDetection / useIsMobile / etc. branch on pane width - not full
+  // viewport - and inner pages collapse to their mobile/tablet layouts when
+  // the pane is narrow.
+  const [paneWidth, setPaneWidth] = useState<number | null>(null);
+
+  useEffect(() => {
+    const el = paneRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const initialRect = el.getBoundingClientRect();
+    if (initialRect.width > 0) setPaneWidth(initialRect.width);
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const w = entry.contentRect.width;
+      setPaneWidth((prev) => (prev !== null && Math.abs(prev - w) < 0.5 ? prev : w));
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={paneRef}
+      className="relative flex flex-1 flex-col overflow-hidden min-w-0 min-h-0"
+      onMouseDownCapture={() => { if (!isFocused) onPaneFocus(paneId); }}
+    >
+      <PaneSizeContext.Provider value={paneWidth}>
+        {tabs
+          .filter((tab) => loadedTabIds.includes(tab.id))
+          .map((tab) => {
+            const isActive = tab.id === activeTabId;
+            return (
+              <div
+                key={tab.id}
+                className={cn("absolute inset-0 overflow-hidden", !isActive && "hidden")}
+                aria-hidden={!isActive}
+              >
+                {renderTabBody(tab)}
+              </div>
+            );
+          })}
+      </PaneSizeContext.Provider>
+    </div>
+  );
+}
+
+export default function ProHome() {
+  const t = useTranslations();
+  const { isMobile, isTablet, isDesktop } = useDeviceDetection();
+
+  const [initialCheckDone, setInitialCheckDone] = useState(
+    () => useAuthStore.getState().isAuthenticated && !!useAuthStore.getState().client
+  );
+  const [showShortcutsModal, setShowShortcutsModal] = useState(false);
+  const {
+    showAppsModal,
+    inlineApp,
+    loadedApps,
+    handleManageApps,
+    handleInlineApp,
+    closeInlineApp,
+    closeAppsModal,
+  } = useSidebarApps();
+
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  const client = useAuthStore((s) => s.client);
+  const logout = useAuthStore((s) => s.logout);
+  const checkAuth = useAuthStore((s) => s.checkAuth);
+  const authLoading = useAuthStore((s) => s.isLoading);
+  const quota = useEmailStore((s) => s.quota);
+  const isPushConnected = useEmailStore((s) => s.isPushConnected);
+  const proInterface = useSettingsStore((s) => s.proInterface);
+
+  const tabs = useProTabStore((s) => s.tabs);
+  const activeMainTabId = useProTabStore((s) => s.activeTabId);
+  const activeSplitTabId = useProTabStore((s) => s.activeSplitTabId);
+  const splitOrientation = useProTabStore((s) => s.splitOrientation);
+  const focusedPaneId = useProTabStore((s) => s.focusedPaneId);
+  const loadedTabIds = useProTabStore((s) => s.loadedTabIds);
+  const openTab = useProTabStore((s) => s.openTab);
+  const requestCloseTab = useProTabStore((s) => s.requestCloseTab);
+  const setActiveTab = useProTabStore((s) => s.setActiveTab);
+  const setFocusedPane = useProTabStore((s) => s.setFocusedPane);
+  const moveTabToPane = useProTabStore((s) => s.moveTabToPane);
+
+  const [isTabDragging, setIsTabDragging] = useState(false);
+  const [splitDropTarget, setSplitDropTarget] = useState<DropTarget>(null);
+  /** Whether the split pane visually renders before (true) or after (false) main. */
+  const [splitLeading, setSplitLeading] = useState(false);
+
+  // Auth bootstrap (mirrors standard page)
+  useEffect(() => {
+    const state = useAuthStore.getState();
+    if (state.isAuthenticated && state.client) {
+      setInitialCheckDone(true);
+      return;
+    }
+    checkAuth().finally(() => {
+      setInitialCheckDone(true);
+    });
+  }, [checkAuth]);
+
+  useEffect(() => {
+    if (initialCheckDone && !isAuthenticated && !authLoading) {
+      redirectToLogin();
+    }
+  }, [initialCheckDone, isAuthenticated, authLoading]);
+
+  useEffect(() => {
+    if (!initialCheckDone || typeof window === "undefined") return;
+    // Pro is desktop-only, and only used when the user has explicitly
+    // enabled it. If either precondition stops holding, hand the user back
+    // to the standard shell.
+    if (isMobile || isTablet || !proInterface) {
+      window.location.replace(`${getPathPrefix()}/`);
+    }
+  }, [initialCheckDone, isMobile, isTablet, proInterface]);
+
+  const mainTabs = useMemo(() => tabs.filter((t) => t.paneId === 'main'), [tabs]);
+  const splitTabs = useMemo(() => tabs.filter((t) => t.paneId === 'split'), [tabs]);
+
+  const focusedActiveTab = useMemo(() => {
+    const id = focusedPaneId === 'main' ? activeMainTabId : activeSplitTabId;
+    return tabs.find((t) => t.id === id) ?? null;
+  }, [tabs, focusedPaneId, activeMainTabId, activeSplitTabId]);
+
+  const handleRailNavigate = (itemId: 'mail' | 'calendar' | 'contacts' | 'files' | 'settings') => {
+    openTab(itemId);
+    return true;
+  };
+
+  const railActiveItemId: 'mail' | 'calendar' | 'contacts' | 'files' | 'settings' | null =
+    focusedActiveTab && (
+      focusedActiveTab.kind === 'mail' || focusedActiveTab.kind === 'calendar'
+      || focusedActiveTab.kind === 'contacts' || focusedActiveTab.kind === 'files'
+      || focusedActiveTab.kind === 'settings'
+    ) ? focusedActiveTab.kind : null;
+
+  const isSplit = splitOrientation !== null && splitTabs.length > 0;
+
+  // ---- Body-level drop targets ----
+
+  const isProTabDrag = (e: DragEvent) => e.dataTransfer.types.includes(PRO_TAB_DRAG_MIME);
+
+  const computeDropTarget = (e: DragEvent<HTMLDivElement>): DropTarget => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const xFrac = (e.clientX - rect.left) / rect.width;
+    return xFrac < 0.5 ? 'left' : 'right';
+  };
+
+  const targetPaneFromDrop = (target: DropTarget): ProPaneId | null => {
+    if (!target || !isSplit) return null;
+    const leftIsSplit = splitLeading;
+    if (target === 'left') return leftIsSplit ? 'split' : 'main';
+    return leftIsSplit ? 'main' : 'split';
+  };
+
+  const handleBodyDragOver = (e: DragEvent<HTMLDivElement>) => {
+    if (!isProTabDrag(e)) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    const next = computeDropTarget(e);
+    if (next !== splitDropTarget) setSplitDropTarget(next);
+  };
+
+  const handleBodyDragLeave = (e: DragEvent<HTMLDivElement>) => {
+    const next = e.relatedTarget as Node | null;
+    if (next && e.currentTarget.contains(next)) return;
+    setSplitDropTarget(null);
+  };
+
+  const handleBodyDrop = (e: DragEvent<HTMLDivElement>) => {
+    if (!isProTabDrag(e)) return;
+    const target = computeDropTarget(e);
+    setSplitDropTarget(null);
+    setIsTabDragging(false);
+    if (!target) return;
+    e.preventDefault();
+    const draggedId = e.dataTransfer.getData(PRO_TAB_DRAG_MIME);
+    if (!draggedId) return;
+
+    if (isSplit) {
+      // Move tab to whichever pane occupies the dropped side.
+      const destPane = targetPaneFromDrop(target);
+      if (destPane) moveTabToPane(draggedId, destPane);
+      return;
+    }
+    // Create a new side-by-side split. `splitLeading` controls which side
+    // visually hosts the split pane.
+    moveTabToPane(draggedId, 'split', 'vertical');
+    setSplitLeading(target === 'left');
+  };
+
+  // Loading state (matches standard page exactly)
+  if (!initialCheckDone || authLoading || !isAuthenticated || !client) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-background">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-foreground mx-auto"></div>
+          <p className="mt-4 text-sm text-muted-foreground">{t("common.loading")}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isDesktop) return null;
+
+  // Stable keys are essential: when the split collapses, the row's child
+  // list goes from [splitPane, divider, mainPane] (or the leading variant)
+  // to [mainPane]. Without keys, React would reuse the Pane instance at
+  // index 0 - repurposing the *split* pane's instance into the main pane,
+  // which strands the main pane's ResizeObserver/paneWidth on a now-
+  // unmounted DOM node and reparents the mail tab body (causing remount
+  // + stale "still-narrow" measurements after the split is closed).
+  const mainPane = (
+    <Pane
+      key="pane-main"
+      paneId="main"
+      tabs={mainTabs}
+      activeTabId={activeMainTabId}
+      loadedTabIds={loadedTabIds}
+      onPaneFocus={setFocusedPane}
+      isFocused={focusedPaneId === 'main'}
+    />
+  );
+
+  const splitPane = isSplit ? (
+    <Pane
+      key="pane-split"
+      paneId="split"
+      tabs={splitTabs}
+      activeTabId={activeSplitTabId}
+      loadedTabIds={loadedTabIds}
+      onPaneFocus={setFocusedPane}
+      isFocused={focusedPaneId === 'split'}
+    />
+  ) : null;
+
+  const splitDivider = isSplit ? (
+    <div
+      key="pane-divider"
+      aria-hidden="true"
+      className="flex-shrink-0 w-px bg-transparent"
+      style={{ borderLeft: '1px solid rgba(128, 128, 128, 0.3)' }}
+    />
+  ) : null;
+
+  // Drop-zone overlay: a single half-body preview of where the dragged tab
+  // would land. The whole body is always a drop target (the entire surface
+  // maps to one of the four sides), so we only render the active side.
+  const dropZone = isTabDragging && splitDropTarget ? (
+    <DropZone side={splitDropTarget} />
+  ) : null;
+
+  return (
+    <EmbeddedContext.Provider value={true}>
+      <div className="flex flex-col h-dvh bg-background overflow-hidden pt-[env(safe-area-inset-top)]">
+        <div className="flex flex-1 overflow-hidden">
+          {/* Leftmost Navigation Rail - identical to the standard layout */}
+          <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}
+              onShowShortcuts={() => setShowShortcutsModal(true)}
+              onManageApps={handleManageApps}
+              onInlineApp={handleInlineApp}
+              onCloseInlineApp={closeInlineApp}
+              activeAppId={inlineApp?.id ?? null}
+              onNavigate={handleRailNavigate}
+              activeItemId={railActiveItemId}
+            />
+          </div>
+
+          {inlineApp && (
+            <InlineAppView
+              apps={loadedApps}
+              activeAppId={inlineApp.id}
+              onClose={closeInlineApp}
+              className="flex-1"
+            />
+          )}
+
+          {!inlineApp && (
+            <div className="flex flex-1 flex-col overflow-hidden min-w-0">
+              {/* Single, unified tab bar above both panes. */}
+              <ProTabBar
+                tabs={tabs}
+                activeMainTabId={activeMainTabId}
+                activeSplitTabId={activeSplitTabId}
+                onActivate={setActiveTab}
+                onClose={requestCloseTab}
+                onDragStateChange={setIsTabDragging}
+              />
+
+              {/* Panes container - accepts body drops for split/move. */}
+              <div
+                className="relative flex flex-row flex-1 overflow-hidden min-w-0"
+                onDragOver={handleBodyDragOver}
+                onDragLeave={handleBodyDragLeave}
+                onDrop={handleBodyDrop}
+              >
+                {isSplit
+                  ? (splitLeading
+                      ? <>{splitPane}{splitDivider}{mainPane}</>
+                      : <>{mainPane}{splitDivider}{splitPane}</>)
+                  : mainPane}
+
+                {dropZone}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <KeyboardShortcutsModal
+          isOpen={showShortcutsModal}
+          onClose={() => setShowShortcutsModal(false)}
+        />
+        {showAppsModal && (
+          <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
+        )}
+      </div>
+    </EmbeddedContext.Provider>
+  );
+}
+
+function DropZone({ side }: { side: 'left' | 'right' }) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute top-0 bottom-0 w-1/2 z-10",
+        "bg-primary/15 ring-2 ring-primary/40 ring-inset",
+        side === 'left' ? "left-0" : "right-0",
+      )}
+    />
+  );
+}

app/(main)/admin/_tabs/_jmap-servers-section.tsx

@@ -0,0 +1,259 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { Plus, Trash2, RotateCcw, ChevronDown, ChevronRight } from 'lucide-react';
+import type { JmapServerEntry } from '@/lib/admin/jmap-servers';
+
+interface Props {
+  value: JmapServerEntry[];
+  source?: string;
+  onChange: (next: JmapServerEntry[]) => void;
+  onRevert: () => void;
+}
+
+interface RowDraft {
+  id: string;
+  label: string;
+  url: string;
+  domains: string;
+  oauthClientId: string;
+  oauthIssuerUrl: string;
+  oauthClientSecret: string;
+  oauthExpanded: boolean;
+}
+
+function entryToDraft(e: JmapServerEntry): RowDraft {
+  return {
+    id: e.id,
+    label: e.label,
+    url: e.url,
+    domains: (e.domains ?? []).join(', '),
+    oauthClientId: e.oauth?.clientId ?? '',
+    oauthIssuerUrl: e.oauth?.issuerUrl ?? '',
+    oauthClientSecret: e.oauth?.clientSecret ?? '',
+    oauthExpanded: !!(e.oauth && (e.oauth.clientId || e.oauth.issuerUrl || e.oauth.clientSecret)),
+  };
+}
+
+function draftToEntry(d: RowDraft): JmapServerEntry | null {
+  const id = d.id.trim();
+  const url = d.url.trim().replace(/\/+$/, '');
+  if (!id || !url) return null;
+  const domains = d.domains
+    .split(/[,\s]+/)
+    .map((s) => s.trim().toLowerCase())
+    .filter(Boolean);
+  const clientId = d.oauthClientId.trim();
+  const issuerUrl = d.oauthIssuerUrl.trim().replace(/\/+$/, '');
+  const clientSecret = d.oauthClientSecret;
+  const oauth = clientId || issuerUrl || clientSecret
+    ? {
+        ...(clientId ? { clientId } : {}),
+        ...(issuerUrl ? { issuerUrl } : {}),
+        ...(clientSecret ? { clientSecret } : {}),
+      }
+    : undefined;
+  return {
+    id,
+    label: d.label.trim() || id,
+    url,
+    ...(domains.length > 0 ? { domains } : {}),
+    ...(oauth ? { oauth } : {}),
+  };
+}
+
+function emptyDraft(): RowDraft {
+  return {
+    id: '',
+    label: '',
+    url: '',
+    domains: '',
+    oauthClientId: '',
+    oauthIssuerUrl: '',
+    oauthClientSecret: '',
+    oauthExpanded: false,
+  };
+}
+
+export function JmapServersSection({ value, source, onChange, onRevert }: Props) {
+  const [drafts, setDrafts] = useState<RowDraft[]>(() => value.map(entryToDraft));
+  const lastEmittedRef = useRef(value);
+
+  useEffect(() => {
+    if (value === lastEmittedRef.current) return;
+    setDrafts(value.map(entryToDraft))
+  }, [value]);
+
+  function commit(next: RowDraft[]) {
+    setDrafts(next);
+    const entries = next.map(draftToEntry).filter((e): e is JmapServerEntry => e !== null);
+    lastEmittedRef.current = entries;
+    onChange(entries);
+  }
+
+  function update(idx: number, patch: Partial<RowDraft>) {
+    commit(drafts.map((d, i) => (i === idx ? { ...d, ...patch } : d)));
+  }
+
+  function remove(idx: number) {
+    commit(drafts.filter((_, i) => i !== idx));
+  }
+
+  function add() {
+    setDrafts((prev) => [...prev, emptyDraft()]);
+    // Don't commit yet - new row needs id+url before it counts.
+  }
+
+  const ids = new Set<string>();
+  const duplicateIdx = new Set<number>();
+  drafts.forEach((d, i) => {
+    const id = d.id.trim();
+    if (!id) return;
+    if (ids.has(id)) duplicateIdx.add(i);
+    ids.add(id);
+  });
+
+  return (
+    <div className="px-4 py-3 space-y-3">
+      <div className="flex items-center justify-between gap-2">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-foreground">Servers</span>
+            {source && source !== 'default' && (
+              <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>
+            )}
+          </div>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            Each entry appears as an option on the login dropdown. Leave the list empty to fall back to the single <code className="text-[11px]">JMAP Server URL</code> above.
+          </p>
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          {source === 'admin' && (
+            <button
+              onClick={onRevert}
+              className="text-muted-foreground hover:text-foreground"
+              title="Revert to default"
+            >
+              <RotateCcw className="w-3.5 h-3.5" />
+            </button>
+          )}
+          <button
+            onClick={add}
+            className="inline-flex items-center gap-1.5 h-8 px-2.5 rounded-md border border-input bg-background text-xs text-foreground hover:bg-muted transition-colors"
+          >
+            <Plus className="w-3.5 h-3.5" />
+            Add server
+          </button>
+        </div>
+      </div>
+
+      {drafts.length === 0 && (
+        <div className="text-xs text-muted-foreground italic">No servers configured.</div>
+      )}
+
+      {drafts.map((d, i) => {
+        const isDuplicate = duplicateIdx.has(i);
+        return (
+          <div key={i} className="rounded-md border border-border bg-muted/20 p-3 space-y-2">
+            <div className="grid grid-cols-1 sm:grid-cols-12 gap-2 items-start">
+              <div className="sm:col-span-3">
+                <label className="block text-[11px] font-medium text-muted-foreground mb-1">ID</label>
+                <input
+                  type="text"
+                  value={d.id}
+                  onChange={(e) => update(i, { id: e.target.value })}
+                  placeholder="main"
+                  className={`h-8 w-full rounded-md border bg-background px-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${isDuplicate ? 'border-destructive' : 'border-input'}`}
+                />
+                {isDuplicate && <p className="text-[10px] text-destructive mt-0.5">Duplicate id</p>}
+              </div>
+              <div className="sm:col-span-4">
+                <label className="block text-[11px] font-medium text-muted-foreground mb-1">Label</label>
+                <input
+                  type="text"
+                  value={d.label}
+                  onChange={(e) => update(i, { label: e.target.value })}
+                  placeholder="Main server"
+                  className="h-8 w-full rounded-md border border-input bg-background px-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                />
+              </div>
+              <div className="sm:col-span-5">
+                <label className="block text-[11px] font-medium text-muted-foreground mb-1">JMAP URL</label>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="url"
+                    value={d.url}
+                    onChange={(e) => update(i, { url: e.target.value })}
+                    placeholder="https://mail.example.com"
+                    className="h-8 w-full rounded-md border border-input bg-background px-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  />
+                  <button
+                    onClick={() => remove(i)}
+                    className="shrink-0 text-muted-foreground hover:text-destructive"
+                    title="Remove server"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div>
+              <label className="block text-[11px] font-medium text-muted-foreground mb-1">
+                Email domains (comma-separated, used for auto-pick)
+              </label>
+              <input
+                type="text"
+                value={d.domains}
+                onChange={(e) => update(i, { domains: e.target.value })}
+                placeholder="example.com, example.org"
+                className="h-8 w-full rounded-md border border-input bg-background px-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+            </div>
+            <button
+              onClick={() => update(i, { oauthExpanded: !d.oauthExpanded })}
+              className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+              type="button"
+            >
+              {d.oauthExpanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
+              Per-server OAuth (optional, overrides global)
+            </button>
+            {d.oauthExpanded && (
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 ps-4 border-s border-border">
+                <div>
+                  <label className="block text-[11px] font-medium text-muted-foreground mb-1">OAuth Client ID</label>
+                  <input
+                    type="text"
+                    value={d.oauthClientId}
+                    onChange={(e) => update(i, { oauthClientId: e.target.value })}
+                    className="h-8 w-full rounded-md border border-input bg-background px-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  />
+                </div>
+                <div>
+                  <label className="block text-[11px] font-medium text-muted-foreground mb-1">OAuth Issuer URL</label>
+                  <input
+                    type="url"
+                    value={d.oauthIssuerUrl}
+                    onChange={(e) => update(i, { oauthIssuerUrl: e.target.value })}
+                    placeholder="https://auth.example.com"
+                    className="h-8 w-full rounded-md border border-input bg-background px-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  />
+                </div>
+                <div>
+                  <label className="block text-[11px] font-medium text-muted-foreground mb-1">OAuth Client Secret</label>
+                  <input
+                    type="password"
+                    value={d.oauthClientSecret}
+                    onChange={(e) => update(i, { oauthClientSecret: e.target.value })}
+                    className="h-8 w-full rounded-md border border-input bg-background px-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,385 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Save, Loader2, RotateCcw, Sparkles } from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
+
+interface ConfigEntry {
+  // Sensitive keys (sessionSecret, oauthClientSecret) come back with
+  // `value` omitted and `hasValue` set instead - the server never echoes
+  // the raw secret to the client.
+  value?: unknown;
+  source: 'admin' | 'env' | 'default';
+  hasValue?: boolean;
+}
+
+export function AuthTab() {
+  const [config, setConfig] = useState<Record<string, ConfigEntry>>({});
+  const [edits, setEdits] = useState<Record<string, unknown>>({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  useEffect(() => { fetchConfig(); }, []);
+
+  async function fetchConfig() {
+    setLoading(true);
+    const res = await apiFetch('/api/admin/config');
+    if (res.ok) setConfig(await res.json());
+    setLoading(false);
+  }
+
+  function handleChange(key: string, value: unknown) {
+    setEdits(prev => ({ ...prev, [key]: value }));
+    setMessage(null);
+  }
+
+  function currentValue(key: string): unknown {
+    if (key in edits) return edits[key];
+    return config[key]?.value;
+  }
+
+  async function handleSave() {
+    if (Object.keys(edits).length === 0) return;
+    setSaving(true);
+    setMessage(null);
+
+    const res = await apiFetch('/api/admin/config', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(edits),
+    });
+
+    if (res.ok) {
+      setMessage({ type: 'success', text: 'Authentication settings saved.' });
+      setEdits({});
+      await fetchConfig();
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Failed to save' });
+    }
+    setSaving(false);
+  }
+
+  async function handleRevert(key: string) {
+    const res = await apiFetch('/api/admin/config', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key }),
+    });
+    if (res.ok) {
+      setEdits(prev => { const next = { ...prev }; delete next[key]; return next; });
+      await fetchConfig();
+    }
+  }
+
+  const [setupRunning, setSetupRunning] = useState(false);
+  const [setupOpen, setSetupOpen] = useState(false);
+  const [setupOrigin, setSetupOrigin] = useState('');
+  const [setupIssuer, setSetupIssuer] = useState('');
+  const [setupOauthOnly, setSetupOauthOnly] = useState(false);
+
+  function openSetupDialog() {
+    if (typeof window === 'undefined') return;
+    const origin = window.location.origin;
+    const jmapUrl = (currentValue('jmapServerUrl') as string | undefined)?.replace(/\/+$/, '') || '';
+    setSetupOrigin(origin);
+    setSetupIssuer(jmapUrl || origin);
+    setSetupOauthOnly(currentValue('oauthOnly') === true);
+    setSetupOpen(true);
+  }
+
+  async function handleAutoSetup() {
+    setSetupRunning(true);
+    setMessage(null);
+    try {
+      const res = await apiFetch('/api/admin/oauth/setup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          origin: setupOrigin.trim().replace(/\/+$/, ''),
+          issuerUrl: setupIssuer.trim().replace(/\/+$/, ''),
+          oauthOnly: setupOauthOnly,
+        }),
+      });
+      const data = await res.json();
+      if (res.ok) {
+        setMessage({
+          type: 'success',
+          text: `OAuth client ${data.action} on Stalwart (${data.issuerUrl}). ${data.redirectUriCount} redirect URI(s) registered for ${data.origin}.`,
+        });
+        setEdits({});
+        setSetupOpen(false);
+        await fetchConfig();
+      } else {
+        const detail = data.detail ? ` (${typeof data.detail === 'string' ? data.detail : JSON.stringify(data.detail).slice(0, 200)})` : '';
+        setMessage({ type: 'error', text: (data.error || 'Setup failed') + detail });
+      }
+    } catch (err) {
+      setMessage({ type: 'error', text: err instanceof Error ? err.message : 'Setup failed' });
+    } finally {
+      setSetupRunning(false);
+    }
+  }
+
+  const setupOriginValid = /^https?:\/\/[^/]+$/.test(setupOrigin.trim().replace(/\/+$/, ''));
+  const setupIssuerValid = /^https?:\/\/[^/]+$/.test(setupIssuer.trim().replace(/\/+$/, ''));
+
+  const hasEdits = Object.keys(edits).length > 0;
+
+  if (loading) {
+    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 flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <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>
+      )}
+
+      <div className="rounded-lg border border-primary/30 bg-primary/5 p-4">
+        <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <Sparkles className="w-4 h-4 text-primary shrink-0" />
+              <h3 className="text-sm font-medium text-foreground">Auto-configure OAuth (Stalwart)</h3>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              Registers an OAuth client on the connected Stalwart server, generates a client secret, and saves the settings here.
+              Requires your Stalwart account to have admin permissions.
+            </p>
+          </div>
+          <button
+            onClick={openSetupDialog}
+            disabled={setupRunning}
+            className="shrink-0 inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
+          >
+            {setupRunning ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
+            {setupRunning ? 'Configuring…' : 'Set up automagically'}
+          </button>
+        </div>
+      </div>
+
+      {setupOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="oauth-setup-title"
+          onClick={(e) => { if (e.target === e.currentTarget && !setupRunning) setSetupOpen(false); }}
+        >
+          <div className="w-full max-w-md rounded-lg border border-border bg-background shadow-xl">
+            <div className="px-5 py-4 border-b border-border">
+              <h3 id="oauth-setup-title" className="text-base font-medium text-foreground">Auto-configure OAuth</h3>
+              <p className="text-xs text-muted-foreground mt-1">
+                Verify the URLs below before continuing. The webmail and Stalwart can live on different domains.
+              </p>
+            </div>
+            <div className="px-5 py-4 space-y-4">
+              <div>
+                <label htmlFor="setup-origin" className="block text-xs font-medium text-foreground mb-1">
+                  Webmail origin
+                </label>
+                <input
+                  id="setup-origin"
+                  type="url"
+                  value={setupOrigin}
+                  onChange={(e) => setSetupOrigin(e.target.value)}
+                  disabled={setupRunning}
+                  placeholder="https://webmail.example.com"
+                  className="w-full h-9 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                />
+                <p className="text-[11px] text-muted-foreground mt-1">
+                  Used to register redirect URIs (one per locale: <code>{setupOrigin.trim().replace(/\/+$/, '') || 'https://…'}/&lt;locale&gt;/auth/callback</code>) on Stalwart.
+                </p>
+                {!setupOriginValid && setupOrigin.length > 0 && (
+                  <p className="text-[11px] text-destructive mt-1">Must be like https://host with no path.</p>
+                )}
+              </div>
+              <div>
+                <label htmlFor="setup-issuer" className="block text-xs font-medium text-foreground mb-1">
+                  Stalwart issuer URL
+                </label>
+                <input
+                  id="setup-issuer"
+                  type="url"
+                  value={setupIssuer}
+                  onChange={(e) => setSetupIssuer(e.target.value)}
+                  disabled={setupRunning}
+                  placeholder="https://mail.example.com"
+                  className="w-full h-9 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                />
+                <p className="text-[11px] text-muted-foreground mt-1">
+                  Where Stalwart serves <code>/.well-known/oauth-authorization-server</code>. Saved as <code>OAUTH_ISSUER_URL</code>. Pre-filled from your JMAP server URL.
+                </p>
+                {!setupIssuerValid && setupIssuer.length > 0 && (
+                  <p className="text-[11px] text-destructive mt-1">Must be like https://host with no path.</p>
+                )}
+              </div>
+              <label className="inline-flex items-center gap-2 text-xs text-foreground select-none cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={setupOauthOnly}
+                  onChange={(e) => setSetupOauthOnly(e.target.checked)}
+                  className="h-3.5 w-3.5 rounded border-input"
+                  disabled={setupRunning}
+                />
+                Also enable “OAuth only” (hide password login)
+              </label>
+            </div>
+            <div className="px-5 py-3 border-t border-border flex items-center justify-end gap-2 bg-muted/30 rounded-b-lg">
+              <button
+                onClick={() => setSetupOpen(false)}
+                disabled={setupRunning}
+                className="h-9 px-3 rounded-md border border-input bg-background text-sm text-foreground hover:bg-muted disabled:opacity-50 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleAutoSetup}
+                disabled={setupRunning || !setupOriginValid || !setupIssuerValid}
+                className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
+              >
+                {setupRunning ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
+                {setupRunning ? 'Configuring…' : 'Configure'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <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" placeholder={config.oauthClientSecret?.hasValue ? '••••••••  (saved - type to replace)' : undefined} />
+        <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" />
+        <Toggle label="Allow private OAuth endpoints" description="Permit discovery to resolve to RFC-1918 / loopback hosts. Enable only for split-DNS deployments where the mail server's public hostname resolves to an internal IP." configKey="oauthAllowPrivateEndpoints" value={currentValue('oauthAllowPrivateEndpoints') as boolean} source={config.oauthAllowPrivateEndpoints?.source} onChange={handleChange} onRevert={handleRevert} />
+        <Text label="OAuth Scopes" description="Space-separated scopes that replace the defaults. Leave blank to use the built-in scope list." configKey="oauthScopes" value={currentValue('oauthScopes') as string} source={config.oauthScopes?.source} onChange={handleChange} onRevert={handleRevert} placeholder="openid email offline_access" />
+        <Text label="OAuth Extra Scopes" description="Additional space-separated scopes appended to the defaults." configKey="oauthExtraScopes" value={currentValue('oauthExtraScopes') as string} source={config.oauthExtraScopes?.source} onChange={handleChange} onRevert={handleRevert} placeholder="urn:ietf:params:oauth:..." />
+      </Section>
+
+      <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>
+
+      <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 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm: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 w-full sm:w-auto">
+        <input type={type} value={value ?? ''} onChange={(e) => onChange(configKey, e.target.value)} placeholder={placeholder}
+          className="h-8 w-full sm: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="shrink-0 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 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm: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 shrink-0">
+        <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 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+      <div className="flex items-center gap-2 min-w-0">
+        <span className="text-sm text-foreground">{label}</span>
+        <SourceBadge source={source} />
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        <select value={value ?? ''} onChange={(e) => onChange(configKey, e.target.value)}
+          className="h-8 rounded-md border border-input bg-background px-2.5 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+          {options.map(o => <option key={o} value={o}>{o}</option>)}
+        </select>
+        {source === 'admin' && (
+          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert"><RotateCcw className="w-3.5 h-3.5" /></button>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,721 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Save, Loader2, RotateCcw, ImageIcon, Upload, Trash2, Globe, Plus, X } from 'lucide-react';
+import { apiFetch, withBasePath } from '@/lib/browser-navigation';
+import {
+  BRANDING_OVERRIDE_KEYS,
+  parseDomainBranding,
+  type BrandingOverrideKey,
+  type DomainBrandingEntry,
+} from '@/lib/admin/domain-branding';
+
+interface ConfigEntry {
+  value?: unknown;
+  source: 'admin' | 'env' | 'default';
+  hasValue?: boolean;
+}
+
+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' },
+] as const;
+
+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' },
+] as const;
+
+const PWA_IMAGE_FIELDS = [
+  { key: 'pwaIconUrl', label: 'PWA Icon', accept: '.svg,.png,.jpg,.webp' },
+  { key: 'pwaScreenshotMobileUrl', label: 'PWA Screenshot (Mobile)', accept: '.png,.jpg,.webp' },
+  { key: 'pwaScreenshotDesktopUrl', label: 'PWA Screenshot (Desktop)', accept: '.png,.jpg,.webp' },
+] as const;
+
+const PWA_TEXT_FIELDS = [
+  { key: 'appShortName', label: 'Short Name', placeholder: 'Shown on home screen (max ~12 chars)' },
+  { key: 'appDescription', label: 'Description', placeholder: 'App description for install prompts' },
+] as const;
+
+const PWA_COLOR_FIELDS = [
+  { key: 'pwaThemeColor', label: 'Theme Color', defaultValue: '#ffffff' },
+  { key: 'pwaBackgroundColor', label: 'Background Color', defaultValue: '#ffffff' },
+] as const;
+
+// Accepts exact hosts and one-level wildcards (e.g. *.example.com).
+const HOST_RE = /^(\*\.)?[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/;
+// Tighter rule for uploads: wildcards can only point to externally-hosted
+// URLs, since we'd have no concrete subdomain to serve a file from.
+const EXACT_HOST_RE = /^[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/;
+
+export function BrandingTab() {
+  const [config, setConfig] = useState<Record<string, ConfigEntry>>({});
+  const [edits, setEdits] = useState<Record<string, string>>({});
+  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 [selectedHost, setSelectedHost] = useState<string | null>(null);
+  const [addingHost, setAddingHost] = useState(false);
+  const [newHostInput, setNewHostInput] = useState('');
+  const [newHostError, setNewHostError] = useState<string | null>(null);
+  const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({});
+
+  useEffect(() => {
+    fetchConfig();
+  }, []);
+
+  const domainEntries = useMemo<DomainBrandingEntry[]>(
+    () => parseDomainBranding(config['domainBranding']?.value),
+    [config],
+  );
+
+  // Drop selection if the host disappeared from the config (e.g. concurrent edit).
+  useEffect(() => {
+    if (selectedHost && !domainEntries.some(e => e.host === selectedHost)) {
+      setSelectedHost(null);
+      setEdits({});
+    }
+  }, [domainEntries, selectedHost]);
+
+  async function fetchConfig() {
+    setLoading(true);
+    const res = await apiFetch('/api/admin/config');
+    if (res.ok) setConfig(await res.json());
+    setLoading(false);
+  }
+
+  function selectedEntry(): DomainBrandingEntry | null {
+    if (!selectedHost) return null;
+    return domainEntries.find(e => e.host === selectedHost) ?? null;
+  }
+
+  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];
+    if (selectedHost) {
+      const entry = selectedEntry();
+      return (entry?.[key as BrandingOverrideKey] as string | undefined) ?? '';
+    }
+    return (config[key]?.value as string) ?? '';
+  }
+
+  function isOverriddenInScope(key: string): boolean {
+    if (selectedHost) {
+      const entry = selectedEntry();
+      const v = entry?.[key as BrandingOverrideKey];
+      return typeof v === 'string' && v.length > 0;
+    }
+    return config[key]?.source === 'admin';
+  }
+
+  const isUploadedFile = (key: string): boolean => {
+    const val = currentValue(key);
+    return val.startsWith('/api/admin/branding/');
+  };
+
+  function buildUpdatedDomainBranding(merge: Record<string, string>): DomainBrandingEntry[] {
+    if (!selectedHost) return domainEntries;
+    const next = domainEntries.slice();
+    const idx = next.findIndex(e => e.host === selectedHost);
+    const base: DomainBrandingEntry =
+      idx === -1 ? { host: selectedHost } : { ...next[idx] };
+    const writable = base as unknown as Record<string, string | undefined>;
+    for (const [key, value] of Object.entries(merge)) {
+      if (!(BRANDING_OVERRIDE_KEYS as readonly string[]).includes(key)) continue;
+      if (typeof value === 'string' && value.length > 0) {
+        writable[key] = value;
+      } else {
+        delete writable[key];
+      }
+    }
+    if (idx === -1) next.push(base);
+    else next[idx] = base;
+    return next;
+  }
+
+  async function handleSave() {
+    if (Object.keys(edits).length === 0) return;
+    setSaving(true);
+    setMessage(null);
+
+    const payload = selectedHost
+      ? { domainBranding: buildUpdatedDomainBranding(edits) }
+      : edits;
+
+    const res = await apiFetch('/api/admin/config', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    });
+
+    if (res.ok) {
+      setMessage({
+        type: 'success',
+        text: selectedHost
+          ? `Branding for ${selectedHost} updated. Changes visible on next page load.`
+          : '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) {
+    if (selectedHost && !EXACT_HOST_RE.test(selectedHost)) {
+      setMessage({
+        type: 'error',
+        text: 'Wildcard hosts cannot upload files. Enter a URL instead.',
+      });
+      return;
+    }
+    setUploading(slot);
+    setMessage(null);
+
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('slot', slot);
+    if (selectedHost) formData.append('host', selectedHost);
+
+    const res = await apiFetch('/api/admin/branding', {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (res.ok) {
+      const data = await res.json();
+      setMessage({ type: 'success', text: `Uploaded ${file.name} successfully.` });
+      setEdits(prev => {
+        const next = { ...prev };
+        delete next[slot];
+        return next;
+      });
+      // Refresh from server so domainBranding entries reflect the upload.
+      await fetchConfig();
+      void data;
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Upload failed' });
+    }
+    setUploading(null);
+  }
+
+  async function handleDeleteUpload(slot: string) {
+    setMessage(null);
+
+    const body: { slot: string; host?: string } = { slot };
+    if (selectedHost) body.host = selectedHost;
+
+    const res = await apiFetch('/api/admin/branding', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+
+    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) {
+    if (selectedHost) {
+      // Domain scope: drop the field from the entry and PATCH the array.
+      const updated = buildUpdatedDomainBranding({ [key]: '' });
+      const res = await apiFetch('/api/admin/config', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ domainBranding: updated }),
+      });
+      if (res.ok) {
+        setEdits(prev => {
+          const next = { ...prev };
+          delete next[key];
+          return next;
+        });
+        await fetchConfig();
+      }
+      return;
+    }
+    // Default scope: revert via DELETE /api/admin/config
+    const res = await apiFetch('/api/admin/config', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key }),
+    });
+    if (res.ok) {
+      setEdits(prev => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+      await fetchConfig();
+    }
+  }
+
+  async function handleAddDomain() {
+    const host = newHostInput.trim().toLowerCase().replace(/\.+$/, '');
+    if (!host) {
+      setNewHostError('Enter a hostname');
+      return;
+    }
+    if (!HOST_RE.test(host)) {
+      setNewHostError('Invalid hostname. Use foo.example.com or *.example.com');
+      return;
+    }
+    if (domainEntries.some(e => e.host === host)) {
+      setNewHostError('A branding entry for this host already exists');
+      return;
+    }
+    setNewHostError(null);
+
+    const next: DomainBrandingEntry[] = [...domainEntries, { host }];
+    const res = await apiFetch('/api/admin/config', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ domainBranding: next }),
+    });
+    if (res.ok) {
+      setNewHostInput('');
+      setAddingHost(false);
+      setSelectedHost(host);
+      setEdits({});
+      await fetchConfig();
+    } else {
+      const data = await res.json();
+      setNewHostError(data.error || 'Failed to add domain');
+    }
+  }
+
+  async function handleDeleteDomain() {
+    if (!selectedHost) return;
+    if (!confirm(`Remove branding entry for ${selectedHost}? Uploaded files for this domain will be left behind on disk.`)) {
+      return;
+    }
+    const next = domainEntries.filter(e => e.host !== selectedHost);
+    const res = await apiFetch('/api/admin/config', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ domainBranding: next }),
+    });
+    if (res.ok) {
+      setSelectedHost(null);
+      setEdits({});
+      await fetchConfig();
+      setMessage({ type: 'success', text: `Removed branding entry for ${selectedHost}.` });
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Failed to remove domain' });
+    }
+  }
+
+  function handleScopeChange(host: string | null) {
+    if (Object.keys(edits).length > 0 && !confirm('Discard unsaved changes?')) return;
+    setSelectedHost(host);
+    setEdits({});
+    setMessage(null);
+  }
+
+  const hasEdits = Object.keys(edits).length > 0;
+  const wildcardScope = !!selectedHost && !EXACT_HOST_RE.test(selectedHost);
+
+  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 flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <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>
+
+      {/* Scope picker */}
+      <div className="border border-border rounded-lg">
+        <div className="px-4 py-3 border-b border-border bg-muted/30 flex items-center gap-2">
+          <Globe className="w-4 h-4 text-muted-foreground" />
+          <h2 className="text-sm font-medium text-foreground">Scope</h2>
+        </div>
+        <div className="px-4 py-3 space-y-3">
+          <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              onClick={() => handleScopeChange(null)}
+              className={`h-8 px-3 rounded-md text-sm font-medium transition-colors ${
+                selectedHost === null
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-muted text-foreground hover:bg-muted/70'
+              }`}
+            >
+              Default
+            </button>
+            {domainEntries.map(entry => (
+              <button
+                key={entry.host}
+                type="button"
+                onClick={() => handleScopeChange(entry.host)}
+                className={`h-8 px-3 rounded-md text-sm font-medium transition-colors ${
+                  selectedHost === entry.host
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted text-foreground hover:bg-muted/70'
+                }`}
+              >
+                {entry.host}
+              </button>
+            ))}
+            {!addingHost && (
+              <button
+                type="button"
+                onClick={() => { setAddingHost(true); setNewHostError(null); }}
+                className="inline-flex items-center gap-1 h-8 px-3 rounded-md border border-dashed border-input text-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+              >
+                <Plus className="w-3.5 h-3.5" />
+                Add domain
+              </button>
+            )}
+          </div>
+          {addingHost && (
+            <div className="flex flex-wrap items-center gap-2">
+              <input
+                type="text"
+                autoFocus
+                value={newHostInput}
+                onChange={(e) => { setNewHostInput(e.target.value); setNewHostError(null); }}
+                onKeyDown={(e) => { if (e.key === 'Enter') void handleAddDomain(); }}
+                placeholder="mail.example.com or *.example.com"
+                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"
+              />
+              <button
+                type="button"
+                onClick={handleAddDomain}
+                className="h-8 px-3 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors"
+              >
+                Add
+              </button>
+              <button
+                type="button"
+                onClick={() => { setAddingHost(false); setNewHostInput(''); setNewHostError(null); }}
+                className="h-8 px-2.5 rounded-md text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Cancel
+              </button>
+              {newHostError && <span className="text-xs text-destructive">{newHostError}</span>}
+            </div>
+          )}
+          {selectedHost ? (
+            <div className="flex items-center justify-between gap-3 text-xs">
+              <p className="text-muted-foreground">
+                Editing overrides for <span className="font-mono text-foreground">{selectedHost}</span>.
+                Unset fields fall back to the Default values.
+                {wildcardScope && ' Uploads are disabled for wildcard hosts; enter a URL instead.'}
+              </p>
+              <button
+                type="button"
+                onClick={handleDeleteDomain}
+                className="inline-flex items-center gap-1 text-destructive hover:underline whitespace-nowrap"
+              >
+                <X className="w-3.5 h-3.5" />
+                Remove domain
+              </button>
+            </div>
+          ) : (
+            <p className="text-xs text-muted-foreground">
+              Editing the Default branding. Add a domain to override branding when the webmail is served on a specific hostname.
+            </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>
+      )}
+
+      <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 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+                <div className="flex items-center gap-2 min-w-0">
+                  <label className="text-sm text-foreground">{field.label}</label>
+                  {isOverriddenInScope(field.key) && (
+                    <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' : selectedHost ? 'domain' : 'admin'}
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-2 w-full sm:w-auto">
+                  <input
+                    type="text"
+                    value={currentValue(field.key)}
+                    onChange={(e) => handleChange(field.key, e.target.value)}
+                    placeholder={selectedHost ? 'Enter URL (uploads only for default scope)' : 'Enter URL or upload a file'}
+                    className="h-8 w-full sm:w-64 min-w-0 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 || wildcardScope}
+                    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={wildcardScope ? 'Uploads disabled for wildcard hosts' : '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>
+                  )}
+                  {isOverriddenInScope(field.key) && !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>
+              {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={withBasePath(currentValue(field.key))}
+                      alt={field.label}
+                      className="max-h-6 max-w-[200px] object-contain"
+                      onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
+                    />
+                  </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">Progressive Web App</h2>
+          <p className="text-xs text-muted-foreground mt-0.5">Shown when users install the webmail to their home screen. Leave fields blank to fall back to the favicon and app name.</p>
+        </div>
+        <div className="divide-y divide-border">
+          {PWA_IMAGE_FIELDS.map(field => (
+            <div key={field.key} className="px-4 py-3">
+              <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+                <div className="flex items-center gap-2 min-w-0">
+                  <label className="text-sm text-foreground">{field.label}</label>
+                  {isOverriddenInScope(field.key) && (
+                    <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' : selectedHost ? 'domain' : 'admin'}
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-2 w-full sm:w-auto">
+                  <input
+                    type="text"
+                    value={currentValue(field.key)}
+                    onChange={(e) => handleChange(field.key, e.target.value)}
+                    placeholder={selectedHost ? 'Enter URL (uploads only for default scope)' : 'Enter URL or upload a file'}
+                    className="h-8 w-full sm:w-64 min-w-0 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 || wildcardScope}
+                    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={wildcardScope ? 'Uploads disabled for wildcard hosts' : '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>
+                  )}
+                  {isOverriddenInScope(field.key) && !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>
+              {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={withBasePath(currentValue(field.key))}
+                      alt={field.label}
+                      className="max-h-6 max-w-[200px] object-contain"
+                      onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+          {PWA_TEXT_FIELDS.map(field => (
+            <div key={field.key} className="px-4 py-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+              <div className="flex items-center gap-2 min-w-0">
+                <label className="text-sm text-foreground">{field.label}</label>
+                {isOverriddenInScope(field.key) && (
+                  <span className="text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded bg-primary/10 text-primary">
+                    {selectedHost ? 'domain' : 'admin'}
+                  </span>
+                )}
+              </div>
+              <div className="flex items-center gap-2 w-full sm:w-auto">
+                <input
+                  type="text"
+                  value={currentValue(field.key)}
+                  onChange={(e) => handleChange(field.key, e.target.value)}
+                  placeholder={field.placeholder}
+                  className="h-8 w-full sm:w-72 min-w-0 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"
+                />
+                {isOverriddenInScope(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>
+          ))}
+          {PWA_COLOR_FIELDS.map(field => {
+            const value = currentValue(field.key) || field.defaultValue;
+            return (
+              <div key={field.key} className="px-4 py-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+                <div className="flex items-center gap-2 min-w-0">
+                  <label className="text-sm text-foreground">{field.label}</label>
+                  {isOverriddenInScope(field.key) && (
+                    <span className="text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded bg-primary/10 text-primary">
+                      {selectedHost ? 'domain' : 'admin'}
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-2 w-full sm:w-auto">
+                  <input
+                    type="color"
+                    value={/^#[0-9a-fA-F]{6}$/.test(value) ? value : field.defaultValue}
+                    onChange={(e) => handleChange(field.key, e.target.value)}
+                    className="h-8 w-10 cursor-pointer rounded-md border border-input bg-background p-0.5"
+                    title="Pick a color"
+                  />
+                  <input
+                    type="text"
+                    value={currentValue(field.key)}
+                    onChange={(e) => handleChange(field.key, e.target.value)}
+                    placeholder={field.defaultValue}
+                    className="h-8 w-full sm:w-32 min-w-0 rounded-md border border-input bg-background px-2.5 text-sm font-mono text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  />
+                  {isOverriddenInScope(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>
+            );
+          })}
+        </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 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+              <div className="flex items-center gap-2 min-w-0">
+                <label className="text-sm text-foreground">{field.label}</label>
+                {isOverriddenInScope(field.key) && (
+                  <span className="text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded bg-primary/10 text-primary">
+                    {selectedHost ? 'domain' : 'admin'}
+                  </span>
+                )}
+              </div>
+              <div className="flex items-center gap-2 w-full sm:w-auto">
+                <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-full sm:w-72 min-w-0 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"
+                />
+                {isOverriddenInScope(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>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,194 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { SettingsSection, SettingItem, ToggleSwitch } from '@/components/settings/settings-section';
+import type { AuditEntry } from '@/lib/admin/types';
+import { apiFetch } from '@/lib/browser-navigation';
+
+interface AdminStatus {
+  enabled: boolean;
+  authenticated: boolean;
+  lastLogin: string | null;
+  passwordChangedAt: string | null;
+}
+
+interface ConfigData {
+  appName?: string;
+  jmapServerUrl?: string;
+  settingsSyncEnabled?: boolean;
+  stalwartFeaturesEnabled?: boolean;
+  oauthEnabled?: boolean;
+  devMode?: boolean;
+}
+
+export function DashboardTab() {
+  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; hasValue?: boolean }> | null>(null);
+  const [warnings, setWarnings] = useState<string[]>([]);
+  const [pluginCount, setPluginCount] = useState(0);
+  const [themeCount, setThemeCount] = useState(0);
+  const [policyRuleCount, setPolicyRuleCount] = useState(0);
+  const [accountCounts, setAccountCounts] = useState<{ total: number; active7d: number } | null>(null);
+
+  useEffect(() => {
+    fetchDashboardData();
+  }, []);
+
+  async function fetchDashboardData() {
+    const [statusRes, auditRes, configRes, adminConfigRes, pluginRes, themeRes, policyRes, telemetryRes] = await Promise.all([
+      apiFetch('/api/admin/auth'),
+      apiFetch('/api/admin/audit?limit=10'),
+      apiFetch('/api/config'),
+      apiFetch('/api/admin/config'),
+      apiFetch('/api/admin/plugins').catch(() => null),
+      apiFetch('/api/admin/themes').catch(() => null),
+      apiFetch('/api/admin/policy').catch(() => null),
+      apiFetch('/api/admin/telemetry').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 (telemetryRes?.ok) {
+      const telemetry = await telemetryRes.json();
+      if (telemetry.accountCounts && typeof telemetry.accountCounts.total === 'number') {
+        setAccountCounts(telemetry.accountCounts);
+      }
+    }
+
+    const w: string[] = [];
+    if (adminConfigRes.ok) {
+      const sources = await adminConfigRes.json();
+      setConfigSources(sources);
+      const sessionSecret = sources?.sessionSecret;
+      // Server redacts the raw value for sensitive keys; rely on hasValue,
+      // which is false when unset or matching a known placeholder default.
+      if (!sessionSecret?.hasValue) {
+        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.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>
+      ))}
+
+      <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="Last Login">
+          <span className="text-sm text-foreground">
+            {status?.lastLogin ? new Date(status.lastLogin).toLocaleString() : 'Never'}
+          </span>
+        </SettingItem>
+      </SettingsSection>
+
+      <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>
+
+      <SettingsSection title="Accounts" description="Unique logins recorded over the last 90 days">
+        <SettingItem label="Total accounts" description="Distinct identities seen in the retention window">
+          <span className="text-sm text-foreground">{accountCounts?.total ?? '-'}</span>
+        </SettingItem>
+        <SettingItem label="Active in last 7 days" description="Identities with a login in the past week">
+          <span className="text-sm text-foreground">{accountCounts?.active7d ?? '-'}</span>
+        </SettingItem>
+      </SettingsSection>
+
+      <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>
+
+      <SettingsSection title="Recent Activity" description="Latest administrative actions">
+        {recentActivity.length === 0 ? (
+          <div className="py-4 text-sm text-muted-foreground">
+            No activity recorded yet
+          </div>
+        ) : (
+          recentActivity.map((entry, i) => (
+            <SettingItem
+              key={i}
+              label={entry.action}
+              description={formatDetail(entry.detail) || undefined}
+            >
+              <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                <span>{entry.ip}</span>
+                <span>{new Date(entry.ts).toLocaleString()}</span>
+              </div>
+            </SettingItem>
+          ))
+        )}
+      </SettingsSection>
+    </div>
+  );
+}
+
+function formatDetail(detail: Record<string, unknown>): string {
+  if (!detail || Object.keys(detail).length === 0) return '';
+  if (detail.key) return `${detail.key}: ${detail.old} → ${detail.new}`;
+  if (detail.reason) return String(detail.reason);
+  if (detail.changes && Array.isArray(detail.changes)) return `${detail.changes.length} setting(s) changed`;
+  return JSON.stringify(detail).slice(0, 80);
+}

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

@@ -0,0 +1,174 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { RefreshCw } from 'lucide-react';
+import type { AuditEntry } from '@/lib/admin/types';
+import { apiFetch } from '@/lib/browser-navigation';
+
+export function LogsTab() {
+  const [entries, setEntries] = useState<AuditEntry[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const [actionFilter, setActionFilter] = useState('');
+  const limit = 50;
+
+  const fetchLogs = useCallback(async () => {
+    setLoading(true);
+    const params = new URLSearchParams({ page: String(page), limit: String(limit) });
+    if (actionFilter) params.set('action', actionFilter);
+
+    const res = await apiFetch(`/api/admin/audit?${params}`);
+    if (res.ok) {
+      const data = await res.json();
+      setEntries(data.entries || []);
+      setTotal(data.total || 0);
+    }
+    setLoading(false);
+  }, [page, actionFilter]);
+
+  useEffect(() => { fetchLogs(); }, [fetchLogs]);
+
+  const totalPages = Math.max(1, Math.ceil(total / limit));
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <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>
+
+      <div className="flex items-center gap-3">
+        <select
+          value={actionFilter}
+          onChange={(e) => { setActionFilter(e.target.value); setPage(1); }}
+          className="h-8 w-full sm:w-auto 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>
+
+      <div className="sm:hidden space-y-2">
+        {loading && entries.length === 0 ? (
+          <div className="rounded-lg border border-border px-4 py-8 text-center text-sm text-muted-foreground">Loading...</div>
+        ) : entries.length === 0 ? (
+          <div className="rounded-lg border border-border px-4 py-8 text-center text-sm text-muted-foreground">No entries found</div>
+        ) : (
+          entries.map((entry, i) => (
+            <div key={i} className="rounded-lg border border-border p-3 space-y-1.5">
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-xs font-mono px-2 py-0.5 rounded bg-muted text-muted-foreground truncate">
+                  {entry.action}
+                </span>
+                <span className="text-[11px] text-muted-foreground whitespace-nowrap">
+                  {new Date(entry.ts).toLocaleString()}
+                </span>
+              </div>
+              <div className="text-xs text-foreground break-words">
+                {formatDetail(entry.detail)}
+              </div>
+              <div className="text-[11px] text-muted-foreground font-mono">
+                {entry.ip}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      <div className="hidden sm:block border border-border rounded-lg overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-border bg-muted/30">
+              <th className="text-start px-4 py-2 font-medium text-muted-foreground whitespace-nowrap">Time</th>
+              <th className="text-start px-4 py-2 font-medium text-muted-foreground whitespace-nowrap">Action</th>
+              <th className="text-start px-4 py-2 font-medium text-muted-foreground">Details</th>
+              <th className="text-start px-4 py-2 font-medium text-muted-foreground whitespace-nowrap">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>
+
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between">
+          <p className="text-xs text-muted-foreground">
+            Page {page} of {totalPages}
+          </p>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setPage(p => Math.max(1, p - 1))}
+              disabled={page === 1}
+              className="h-8 px-3 rounded-md border border-input bg-background text-sm disabled:opacity-50 hover:bg-accent transition-colors"
+            >
+              Previous
+            </button>
+            <button
+              onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+              disabled={page === totalPages}
+              className="h-8 px-3 rounded-md border border-input bg-background text-sm disabled:opacity-50 hover:bg-accent transition-colors"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatDetail(detail: Record<string, unknown>): string {
+  if (!detail || Object.keys(detail).length === 0) return '-';
+  if (detail.reason) return String(detail.reason);
+  if (detail.key) return `${detail.key}: ${JSON.stringify(detail.old)} → ${JSON.stringify(detail.new)}`;
+  if (detail.changes && Array.isArray(detail.changes)) {
+    return detail.changes.map((c: Record<string, unknown>) => `${c.key}`).join(', ');
+  }
+  if (detail.restrictionCount !== undefined) return `${detail.restrictionCount} restriction(s)`;
+  return JSON.stringify(detail).slice(0, 100);
+}

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

@@ -0,0 +1,426 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import Link from 'next/link';
+import { Search, Download, Check, Loader2, Store, Puzzle, SwatchBook, Star, Eye, AlertTriangle, ArrowUpCircle } from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
+import { compareVersions, isVersionSatisfied } from '@/lib/version-compare';
+
+const CURRENT_APP_VERSION = process.env.NEXT_PUBLIC_APP_VERSION || '0.0.0';
+
+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;
+  installedVersion: string | null;
+  iconUrl: string | null;
+  bannerUrl: string | null;
+  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 function MarketplaceTab() {
+  const [extensions, setExtensions] = useState<Extension[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [query, setQuery] = useState('');
+  const [typeFilter, setTypeFilter] = useState<TypeFilter>('all');
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [perPage] = useState(12);
+  const [installing, setInstalling] = useState<string | null>(null);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchExtensions = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const params = new URLSearchParams();
+      if (query) params.set('q', query);
+      if (typeFilter !== 'all') params.set('type', typeFilter);
+      params.set('page', String(page));
+      params.set('perPage', String(perPage));
+      params.set('sort', 'newest');
+
+      const res = await apiFetch(`/api/admin/marketplace?${params}`);
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        setError(data.error || 'Failed to connect to extension directory');
+        setExtensions([]);
+        return;
+      }
+
+      const data: SearchResult = await res.json();
+      setExtensions(data.data || []);
+      setTotal(data.meta?.total || 0);
+    } catch {
+      setError('Failed to connect to extension directory. Make sure it is running.');
+      setExtensions([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [query, typeFilter, page, perPage]);
+
+  useEffect(() => {
+    fetchExtensions();
+  }, [fetchExtensions]);
+
+  const [searchInput, setSearchInput] = useState('');
+  useEffect(() => {
+    const t = setTimeout(() => {
+      setQuery(searchInput);
+      setPage(1);
+    }, 300);
+    return () => clearTimeout(t);
+  }, [searchInput]);
+
+  async function handleInstall(ext: Extension) {
+    if (ext.minAppVersion && !isVersionSatisfied(CURRENT_APP_VERSION, ext.minAppVersion)) {
+      setMessage({
+        type: 'error',
+        text: `"${ext.name}" requires app v${ext.minAppVersion}+. You are running v${CURRENT_APP_VERSION}.`,
+      });
+      return;
+    }
+    const isUpdate = ext.installed;
+    const targetVersion = ext.latestVersion || '1.0.0';
+    setInstalling(ext.slug);
+    setMessage(null);
+
+    try {
+      const res = await apiFetch('/api/admin/marketplace', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          slug: ext.slug,
+          version: targetVersion,
+          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: isUpdate
+            ? `"${ext.name}" updated to v${targetVersion}${warnings}`
+            : `"${ext.name}" installed successfully${warnings}`,
+        });
+        setExtensions(prev => prev.map(e =>
+          e.slug === ext.slug
+            ? { ...e, installed: true, installedVersion: targetVersion }
+            : e,
+        ));
+      } else {
+        setMessage({ type: 'error', text: data.error || (isUpdate ? 'Update failed' : 'Installation failed') });
+      }
+    } catch {
+      setMessage({ type: 'error', text: isUpdate ? 'Update failed - network error' : '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>
+      )}
+
+      <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+        <div className="relative flex-1 min-w-0">
+          <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 ps-9 pe-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 self-start sm:self-auto">
+          {(['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 && (
+        <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 && !error && (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+          <span className="ms-2 text-sm text-muted-foreground">Searching extensions...</span>
+        </div>
+      )}
+
+      {!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>
+      )}
+
+      {!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>
+
+          {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';
+  const previewHref = `/admin/marketplace/${encodeURIComponent(extension.slug)}`;
+  const versionMismatch = !!extension.minAppVersion
+    && !isVersionSatisfied(CURRENT_APP_VERSION, extension.minAppVersion);
+  const updateAvailable = extension.installed
+    && !!extension.installedVersion
+    && !!extension.latestVersion
+    && compareVersions(extension.latestVersion, extension.installedVersion) > 0
+    && !versionMismatch;
+
+  return (
+    <div className="group relative border border-border rounded-lg overflow-hidden hover:border-ring/30 transition-colors">
+      {extension.bannerUrl && (
+        <Link href={previewHref} className="block focus:outline-none">
+          <img
+            src={extension.bannerUrl}
+            alt=""
+            className="block h-24 w-full object-cover border-b border-border"
+            loading="lazy"
+          />
+        </Link>
+      )}
+      <Link href={previewHref} className="block p-4 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 rounded-lg">
+        <div className="flex items-start gap-3">
+          <div className="w-10 h-10 rounded-md bg-muted flex items-center justify-center shrink-0 overflow-hidden">
+            {extension.iconUrl ? (
+              <img
+                src={extension.iconUrl}
+                alt=""
+                className="w-10 h-10 object-cover"
+                loading="lazy"
+              />
+            ) : 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 group-hover:underline">
+                {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>
+
+        <p className="text-xs text-muted-foreground mt-3 line-clamp-2">
+          {extension.description}
+        </p>
+
+        {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>
+        )}
+
+        <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>
+          <span className="inline-flex items-center gap-1 text-xs text-muted-foreground group-hover:text-foreground">
+            <Eye className="w-3 h-3" />
+            Preview
+          </span>
+        </div>
+      </Link>
+
+      <div className="px-4 pb-4 -mt-1 flex items-center gap-2 flex-wrap">
+        {extension.installed && updateAvailable ? (
+          <button
+            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onInstall(); }}
+            disabled={installing}
+            title={`Update from v${extension.installedVersion} to v${extension.latestVersion}`}
+            className="inline-flex items-center gap-1.5 h-7 px-3 rounded-md bg-blue-600 text-white text-xs font-medium hover:bg-blue-700 disabled:opacity-50 transition-colors"
+          >
+            {installing ? (
+              <Loader2 className="w-3 h-3 animate-spin" />
+            ) : (
+              <ArrowUpCircle className="w-3 h-3" />
+            )}
+            Update to v{extension.latestVersion}
+          </button>
+        ) : 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"
+            title={extension.installedVersion ? `Installed: v${extension.installedVersion}` : undefined}
+          >
+            <Check className="w-3 h-3" />
+            Installed
+          </span>
+        ) : versionMismatch ? (
+          <span
+            className="inline-flex items-center gap-1 h-7 px-2.5 rounded-md bg-amber-100 text-amber-800 dark:bg-amber-950/30 dark:text-amber-300 text-xs font-medium"
+            title={`Requires app v${extension.minAppVersion}+. You are running v${CURRENT_APP_VERSION}.`}
+          >
+            <AlertTriangle className="w-3 h-3" />
+            Requires v{extension.minAppVersion}+
+          </span>
+        ) : (
+          <button
+            onClick={(e) => { e.preventDefault(); e.stopPropagation(); 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" />
+            )}
+            Quick install
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

app/(main)/admin/_tabs/plugin-config-panel.tsx

@@ -0,0 +1,314 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Puzzle, ArrowLeft, Loader2, Eye, EyeOff } from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
+import { usePluginSlotOffers } from '@/hooks/use-plugin-slot-offers';
+import { PluginIframeSlot } from '@/components/plugins/plugin-iframe-slot';
+
+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>;
+}
+
+interface Props {
+  pluginId: string;
+  onBack: () => void;
+}
+
+export function PluginConfigPanel({ pluginId, onBack }: Props) {
+  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(() => {
+    let cancelled = false;
+    async function fetchData() {
+      setLoading(true);
+      try {
+        const [pluginsRes, configRes] = await Promise.all([
+          apiFetch('/api/admin/plugins'),
+          apiFetch(`/api/admin/plugins/${encodeURIComponent(pluginId)}/config`),
+        ]);
+        if (cancelled) return;
+
+        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 {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    fetchData();
+    return () => { cancelled = true; };
+  }, [pluginId]);
+
+  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 handleSaveAll() {
+    if (!plugin?.configSchema) return;
+    setSaving(true);
+    setMessage(null);
+
+    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 {
+      let hasError = false;
+      for (const [key, field] of Object.entries(plugin.configSchema)) {
+        const newVal = formValues[key] ?? '';
+        const oldVal = config[key] !== undefined ? String(config[key]) : '';
+
+        if (newVal === oldVal) continue;
+        if (field.type === 'secret' && !newVal && config[key]) continue;
+
+        let value: unknown = newVal;
+        if (field.type === 'boolean') value = newVal === 'true';
+        else if (field.type === 'number') value = Number(newVal);
+
+        if (!newVal && !field.required) {
+          const res = await apiFetch(`/api/admin/plugins/${encodeURIComponent(pluginId)}/config`, {
+            method: 'DELETE',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ key }),
+          });
+          if (res.ok) {
+            setConfig(prev => { const next = { ...prev }; delete next[key]; return next; });
+          } else {
+            hasError = true;
+          }
+          continue;
+        }
+
+        const res = await apiFetch(`/api/admin/plugins/${encodeURIComponent(pluginId)}/config`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ key, value }),
+        });
+        if (res.ok) {
+          setConfig(prev => ({ ...prev, [key]: value }));
+        } else {
+          hasError = true;
+        }
+      }
+
+      setMessage(hasError
+        ? { type: 'error', text: 'Some settings failed to save' }
+        : { type: 'success', text: 'Configuration saved' }
+      );
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to save configuration' });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">
+        <Loader2 className="w-4 h-4 animate-spin me-2" />
+        Loading...
+      </div>
+    );
+  }
+
+  if (!plugin) {
+    return (
+      <div className="space-y-4">
+        <button
+          type="button"
+          onClick={onBack}
+          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
+        </button>
+        <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">
+        <button
+          type="button"
+          onClick={onBack}
+          className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
+          aria-label="Back to Plugins"
+        >
+          <ArrowLeft className="w-4 h-4" />
+        </button>
+        <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 ms-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 pe-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>
+      )}
+
+      <PluginAdminSection pluginId={pluginId} />
+    </div>
+  );
+}
+
+/**
+ * Renders the plugin's own `admin-plugin-page` slot, if the plugin offers
+ * one. Sandboxed plugins ship a React component under `slots['admin-plugin-page']`
+ * and the host gives it a dedicated iframe inside the admin panel.
+ */
+function PluginAdminSection({ pluginId }: { pluginId: string }) {
+  const offers = usePluginSlotOffers('admin-plugin-page');
+  const offer = offers.find((o) => o.pluginId === pluginId);
+  if (!offer) return null;
+  return (
+    <div className="border border-border rounded-lg overflow-hidden">
+      <div className="bg-muted/40 px-4 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+        Plugin admin panel
+      </div>
+      <PluginIframeSlot pluginId={pluginId} slot="admin-plugin-page" />
+    </div>
+  );
+}

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

@@ -0,0 +1,526 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { Upload, Trash2, Power, PowerOff, AlertTriangle, Loader2, Package, Save, Shield, Lock, LockOpen, Settings } from 'lucide-react';
+import type { SettingsPolicy } from '@/lib/admin/types';
+import { DEFAULT_POLICY } from '@/lib/admin/types';
+import { apiFetch } from '@/lib/browser-navigation';
+import { PluginConfigPanel } from './plugin-config-panel';
+
+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 function PluginsTab() {
+  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);
+  // Bundle held back by the pattern scanner, awaiting an explicit admin decision.
+  const [pendingScan, setPendingScan] = useState<
+    { file: File; findings: Array<{ file: string; patterns: 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);
+  const [configuringId, setConfiguringId] = useState<string | null>(null);
+
+  useEffect(() => { fetchPlugins(); fetchPolicy(); }, []);
+
+  async function fetchPolicy() {
+    try {
+      const res = await apiFetch('/api/admin/policy');
+      if (res.ok) {
+        const data = await res.json();
+        setPolicy(data);
+      }
+    } catch { /* ignore */ }
+  }
+
+  function togglePluginsEnabled() {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, pluginsEnabled: !prev.features.pluginsEnabled },
+    }));
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  function togglePluginsUploadEnabled() {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, pluginsUploadEnabled: !prev.features.pluginsUploadEnabled },
+    }));
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  function toggleRequirePluginApproval() {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, requirePluginApproval: !prev.features.requirePluginApproval },
+    }));
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  async function handleSavePolicy() {
+    setSavingPolicy(true);
+    setMessage(null);
+    try {
+      const res = await apiFetch('/api/admin/policy', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(policy),
+      });
+      if (res.ok) {
+        setMessage({ type: 'success', text: 'Plugin policy saved. Users will see changes on next login.' });
+        setPolicyDirty(false);
+      } else {
+        const data = await res.json();
+        setMessage({ type: 'error', text: data.error || 'Failed to save policy' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to save policy' });
+    } finally {
+      setSavingPolicy(false);
+    }
+  }
+
+  async function fetchPlugins() {
+    setLoading(true);
+    try {
+      const res = await apiFetch('/api/admin/plugins');
+      if (res.ok) setPlugins(await res.json());
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // Upload a bundle. The scanner may refuse it for containing patterns that are
+  // expected in a vendored crypto library (openpgp.js, pkijs); in that case the
+  // server returns `canOverride` and we hold the file so the admin can review
+  // the findings and decide. `override` re-posts the same file with consent.
+  async function uploadPlugin(file: File, override: boolean) {
+    setUploading(true);
+    setMessage(null);
+
+    const formData = new FormData();
+    formData.append('file', file);
+    if (override) formData.append('overrideWarnings', 'true');
+
+    try {
+      const res = await apiFetch('/api/admin/plugins', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const data = await res.json();
+      if (res.ok) {
+        setPendingScan(null);
+        const accepted = data.findings?.length
+          ? ` — ${data.findings.length} scanner finding(s) accepted and logged`
+          : '';
+        setMessage({ type: 'success', text: `Plugin "${data.plugin.name}" installed${accepted}` });
+        await fetchPlugins();
+      } else if (data.canOverride && Array.isArray(data.findings) && !override) {
+        // Hold the file rather than the error: the admin needs to see WHAT
+        // tripped, in WHICH file, before deciding.
+        setPendingScan({ file, findings: data.findings });
+      } else {
+        setPendingScan(null);
+        setMessage({ type: 'error', text: data.error || 'Upload failed' });
+      }
+    } catch {
+      setPendingScan(null);
+      setMessage({ type: 'error', text: 'Upload failed' });
+    } finally {
+      setUploading(false);
+      if (fileInputRef.current) fileInputRef.current.value = '';
+    }
+  }
+
+  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setPendingScan(null);
+    await uploadPlugin(file, false);
+  }
+
+  async function togglePlugin(id: string, enabled: boolean) {
+    setMessage(null);
+    const res = await apiFetch('/api/admin/plugins', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, enabled }),
+    });
+
+    if (res.ok) {
+      setPlugins(prev => prev.map(p => p.id === id ? { ...p, enabled } : p));
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Update failed' });
+    }
+  }
+
+  async function toggleForceEnabled(id: string, forceEnabled: boolean) {
+    setMessage(null);
+    const body: Record<string, unknown> = { id, forceEnabled };
+    if (forceEnabled) body.enabled = true;
+
+    const res = await apiFetch('/api/admin/plugins', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+
+    if (res.ok) {
+      setPlugins(prev => prev.map(p => p.id === id ? { ...p, forceEnabled, ...(forceEnabled ? { enabled: true } : {}) } : p));
+      setPolicy(prev => {
+        const current = prev.forceEnabledPlugins || [];
+        return {
+          ...prev,
+          forceEnabledPlugins: forceEnabled
+            ? [...current.filter(pid => pid !== id), id]
+            : current.filter(pid => pid !== id),
+        };
+      });
+      setPolicyDirty(true);
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Update failed' });
+    }
+  }
+
+  async function forceEnableAll() {
+    setMessage(null);
+    const disabled = plugins.filter(p => !p.enabled);
+    if (disabled.length === 0) {
+      setMessage({ type: 'success', text: 'All plugins are already enabled' });
+      return;
+    }
+    let failed = 0;
+    for (const p of disabled) {
+      const res = await apiFetch('/api/admin/plugins', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: p.id, enabled: true }),
+      });
+      if (!res.ok) failed++;
+    }
+    setPlugins(prev => prev.map(p => failed === 0 ? { ...p, enabled: true } : p));
+    if (failed === 0) {
+      await fetchPlugins();
+      setMessage({ type: 'success', text: `All ${disabled.length} plugin(s) enabled` });
+    } else {
+      await fetchPlugins();
+      setMessage({ type: 'error', text: `${failed} plugin(s) failed to enable` });
+    }
+  }
+
+  async function forceDisableAll() {
+    setMessage(null);
+    const enabled = plugins.filter(p => p.enabled);
+    if (enabled.length === 0) {
+      setMessage({ type: 'success', text: 'All plugins are already disabled' });
+      return;
+    }
+    let failed = 0;
+    for (const p of enabled) {
+      const res = await apiFetch('/api/admin/plugins', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: p.id, enabled: false }),
+      });
+      if (!res.ok) failed++;
+    }
+    if (failed === 0) {
+      await fetchPlugins();
+      setMessage({ type: 'success', text: `All ${enabled.length} plugin(s) disabled` });
+    } else {
+      await fetchPlugins();
+      setMessage({ type: 'error', text: `${failed} plugin(s) failed to disable` });
+    }
+  }
+
+  async function deletePlugin(id: string, name: string) {
+    if (!confirm(`Remove plugin "${name}"? This cannot be undone.`)) return;
+
+    setMessage(null);
+    const res = await apiFetch('/api/admin/plugins', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id }),
+    });
+
+    if (res.ok) {
+      setPlugins(prev => prev.filter(p => p.id !== id));
+      setMessage({ type: 'success', text: `Plugin "${name}" removed` });
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Delete failed' });
+    }
+  }
+
+  if (configuringId) {
+    return <PluginConfigPanel pluginId={configuringId} onBack={() => { setConfiguringId(null); fetchPlugins(); }} />;
+  }
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  const pluginsEnabled = policy.features.pluginsEnabled ?? true;
+  const pluginsUploadEnabled = policy.features.pluginsUploadEnabled ?? true;
+  const requirePluginApproval = policy.features.requirePluginApproval ?? true;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <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 flex-wrap 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>
+      )}
+
+      {pendingScan && (
+        <div className="border border-warning/40 bg-warning/5 rounded-lg p-4 space-y-3">
+          <div className="flex items-start gap-2">
+            <AlertTriangle className="w-4 h-4 text-warning mt-0.5 flex-shrink-0" />
+            <div className="space-y-1">
+              <p className="text-sm font-medium text-foreground">
+                Scanner flagged <span className="font-mono">{pendingScan.file.name}</span>
+              </p>
+              <p className="text-xs text-muted-foreground">
+                These patterns can indicate malicious code, but they also appear in legitimate
+                minified crypto libraries such as openpgp.js and pkijs. Review the findings before
+                proceeding — installing anyway is recorded in the audit log.
+              </p>
+            </div>
+          </div>
+
+          <ul className="space-y-1">
+            {pendingScan.findings.map(f => (
+              <li key={f.file} className="text-xs font-mono bg-background/60 border border-border rounded px-2 py-1">
+                <span className="text-foreground">{f.file}</span>
+                <span className="text-muted-foreground"> — {f.patterns.join(', ')}</span>
+              </li>
+            ))}
+          </ul>
+
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => uploadPlugin(pendingScan.file, true)}
+              disabled={uploading}
+              className="inline-flex items-center gap-2 h-8 px-3 rounded-md bg-destructive text-destructive-foreground text-xs font-medium hover:bg-destructive/90 disabled:opacity-50 transition-all"
+            >
+              {uploading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <AlertTriangle className="w-3.5 h-3.5" />}
+              Install anyway
+            </button>
+            <button
+              onClick={() => { setPendingScan(null); setMessage(null); }}
+              disabled={uploading}
+              className="inline-flex items-center h-8 px-3 rounded-md border border-border text-xs font-medium text-foreground hover:bg-muted disabled:opacity-50 transition-all"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      <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 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm: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 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+            <div>
+              <span className="text-sm text-foreground">User Plugin Uploads</span>
+              <p className="text-xs text-muted-foreground mt-0.5">Allow users to upload plugin ZIP files in Settings</p>
+            </div>
+            <button onClick={togglePluginsUploadEnabled}
+              className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${pluginsUploadEnabled ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
+              <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${pluginsUploadEnabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+            </button>
+          </div>
+
+          <div className="px-4 py-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+            <div>
+              <span className="text-sm text-foreground">Require Admin Approval</span>
+              <p className="text-xs text-muted-foreground mt-0.5">User-uploaded plugins must be approved by an admin before they can be enabled</p>
+            </div>
+            <button onClick={toggleRequirePluginApproval}
+              className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${requirePluginApproval ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
+              <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${requirePluginApproval ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
+            </button>
+          </div>
+
+          {plugins.length > 0 && (
+            <div className="px-4 py-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm: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>
+
+      <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 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+                <div className="min-w-0 flex-1">
+                  <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                    <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">
+                <button
+                  type="button"
+                  onClick={() => setConfiguringId(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" />
+                </button>
+                <button
+                  onClick={() => toggleForceEnabled(plugin.id, !plugin.forceEnabled)}
+                  title={plugin.forceEnabled ? 'Remove force-enable (users can disable)' : 'Force enable (users cannot disable)'}
+                  className={`p-2 rounded-md transition-colors ${plugin.forceEnabled ? 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-950/30 dark:text-amber-400 dark:hover:bg-amber-950/50' : 'hover:bg-accent text-muted-foreground hover:text-foreground'}`}
+                >
+                  {plugin.forceEnabled ? <Lock className="w-4 h-4" /> : <LockOpen className="w-4 h-4" />}
+                </button>
+                <button
+                  onClick={() => togglePlugin(plugin.id, !plugin.enabled)}
+                  title={plugin.enabled ? 'Disable' : 'Enable'}
+                  className="p-2 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <Power className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={() => deletePlugin(plugin.id, plugin.name)}
+                  title="Remove"
+                  className="p-2 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,264 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Save, Loader2, Lock } from 'lucide-react';
+import type { SettingsPolicy, FeatureGates } from '@/lib/admin/types';
+import { DEFAULT_FEATURE_GATES, DEFAULT_POLICY } from '@/lib/admin/types';
+import { apiFetch } from '@/lib/browser-navigation';
+
+// `allMailViewEnabled` is deprecated (folded into `crossAllViewEnabled`, normalized
+// forward on policy load), so it is hidden from the admin UI.
+const EXCLUDED_FEATURE_GATES: (keyof FeatureGates)[] = ['pluginsEnabled', 'pluginsUploadEnabled', 'themesEnabled', 'userThemesEnabled', 'allMailViewEnabled'];
+
+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' },
+  calendarEnabled: { label: 'Calendar', description: 'Enable calendar features and views' },
+  calendarTasksEnabled: { label: 'Calendar Tasks', description: 'Show task panel in calendar view' },
+  contactsEnabled: { label: 'Contacts', description: 'Enable contacts/address book features' },
+  smimeEnabled: { label: 'S/MIME', description: 'Enable certificate management and email signing' },
+  externalContentEnabled: { label: 'External Content', description: 'Allow users to choose external content loading policy' },
+  debugModeEnabled: { label: 'Debug Mode', description: 'Allow users to enable debug/diagnostic mode' },
+  folderIconsEnabled: { label: 'Folder Icons', description: 'Allow custom folder icon picker' },
+  hoverActionsConfigEnabled: { label: 'Hover Actions Config', description: 'Allow users to customize email hover actions' },
+  filesEnabled: { label: 'Files (WebDAV)', description: 'Enable file storage via WebDAV. WARNING: Large uploads can cause Stalwart/RocksDB instability. Not recommended for production.' },
+  crossUnreadViewEnabled: { label: 'Unified Mailbox: Unread', description: 'Allow an "Unread" entry in the Unified Mailbox section that lists unread mail across the account and its shared folders (or every account when the cross-account sub-option is on). Honors the user\'s folder selection. Requires the matching per-user toggle in Settings → Appearance.' },
+  crossStarredViewEnabled: { label: 'Unified Mailbox: Starred', description: 'Allow a "Starred" entry in the Unified Mailbox section that lists flagged/starred mail across the account and its shared folders (or every account when the cross-account sub-option is on). Honors the user\'s folder selection. Requires the matching per-user toggle in Settings → Appearance.' },
+  crossAllViewEnabled: { label: 'Unified Mailbox: All Mail', description: 'Allow an "All mail" entry in the Unified Mailbox section that lists all mail across the account and its shared folders (or every account when the cross-account sub-option is on). Honors the user\'s folder selection. Requires the matching per-user toggle in Settings → Appearance.' },
+  unifiedCrossAccountEnabled: { label: 'Unified Mailbox: Cross-account', description: 'Allow users to expand the Unified Mailbox beyond the active account boundary so its lists merge across every logged-in account. When off, the Unified Mailbox stays within the active account and its shared folders.' },
+};
+
+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', 'trash-and-read', 'permanent'] },
+  { key: 'showPreview', label: 'Show Preview', category: 'Email', type: 'boolean' },
+  { key: 'mailLayout', label: 'Mail Layout', category: 'Email', type: 'enum', allowedValues: ['split', 'focus', 'horizontal'] },
+  { 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 function PolicyTab() {
+  const [policy, setPolicy] = useState<SettingsPolicy>({ ...DEFAULT_POLICY });
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [dirty, setDirty] = useState(false);
+
+  useEffect(() => { fetchPolicy(); }, []);
+
+  async function fetchPolicy() {
+    setLoading(true);
+    try {
+      const res = await apiFetch('/api/admin/policy');
+      if (res.ok) {
+        const data = await res.json();
+        setPolicy(data);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function toggleFeature(key: keyof FeatureGates) {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, [key]: !prev.features[key] },
+    }));
+    setDirty(true);
+    setMessage(null);
+  }
+
+  function setPushRelayUrl(value: string) {
+    setPolicy(prev => ({ ...prev, pushRelayUrl: value }));
+    setDirty(true);
+    setMessage(null);
+  }
+
+  function togglePushRelayLocked() {
+    setPolicy(prev => ({ ...prev, pushRelayUrlLocked: !prev.pushRelayUrlLocked }));
+    setDirty(true);
+    setMessage(null);
+  }
+
+  function toggleLocked(settingKey: string) {
+    setPolicy(prev => {
+      const existing = prev.restrictions[settingKey] || {};
+      const newRestrictions = { ...prev.restrictions };
+      if (existing.locked) {
+        delete newRestrictions[settingKey];
+      } else {
+        newRestrictions[settingKey] = { ...existing, locked: true };
+      }
+      return { ...prev, restrictions: newRestrictions };
+    });
+    setDirty(true);
+    setMessage(null);
+  }
+
+  function toggleHidden(settingKey: string) {
+    setPolicy(prev => {
+      const existing = prev.restrictions[settingKey] || {};
+      const newRestrictions = { ...prev.restrictions };
+      newRestrictions[settingKey] = { ...existing, hidden: !existing.hidden };
+      if (!newRestrictions[settingKey].hidden && !newRestrictions[settingKey].locked) {
+        delete newRestrictions[settingKey];
+      }
+      return { ...prev, restrictions: newRestrictions };
+    });
+    setDirty(true);
+    setMessage(null);
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    setMessage(null);
+
+    const res = await apiFetch('/api/admin/policy', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(policy),
+    });
+
+    if (res.ok) {
+      setMessage({ type: 'success', text: 'Policy saved. Users will see changes on next login.' });
+      setDirty(false);
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Failed to save' });
+    }
+    setSaving(false);
+  }
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  const categories = [...new Set(RESTRICTABLE_SETTINGS.map(s => s.category))];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <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>
+      )}
+
+      <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 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+                <div className="min-w-0">
+                  <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={`shrink-0 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>
+
+      <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">Push Relay</h2>
+          <p className="text-xs text-muted-foreground mt-0.5">Override the Web Push relay URL shown in user notification settings. Leave empty to use the built-in default.</p>
+        </div>
+        <div className="px-4 py-3 space-y-3">
+          <input
+            type="url"
+            inputMode="url"
+            autoComplete="off"
+            spellCheck={false}
+            value={policy.pushRelayUrl ?? ''}
+            onChange={(e) => setPushRelayUrl(e.target.value)}
+            placeholder="https://notifications.relay.example.com"
+            className="w-full rounded border border-input bg-background px-3 py-2 text-sm"
+          />
+          <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer">
+            <input
+              type="checkbox"
+              checked={!!policy.pushRelayUrlLocked}
+              onChange={togglePushRelayLocked}
+              className="rounded border-input"
+            />
+            <Lock className="w-3 h-3" /> Lock - users cannot change this URL
+          </label>
+        </div>
+      </div>
+
+      {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 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+                  <span className="text-sm text-foreground">{setting.label}</span>
+                  <div className="flex items-center gap-3 shrink-0">
+                    <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer">
+                      <input type="checkbox" checked={!!restriction.locked} onChange={() => toggleLocked(setting.key)}
+                        className="rounded border-input" />
+                      <Lock className="w-3 h-3" /> Lock
+                    </label>
+                    <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer">
+                      <input type="checkbox" checked={!!restriction.hidden} onChange={() => toggleHidden(setting.key)}
+                        className="rounded border-input" />
+                      Hide
+                    </label>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,274 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Save, RotateCcw, Loader2 } from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
+import { JmapServersSection } from './_jmap-servers-section';
+import type { JmapServerEntry } from '@/lib/admin/jmap-servers';
+
+interface ConfigEntry {
+  value?: unknown;
+  source: 'admin' | 'env' | 'default';
+  hasValue?: boolean;
+}
+
+export function SettingsTab() {
+  const [config, setConfig] = useState<Record<string, ConfigEntry>>({});
+  const [edits, setEdits] = useState<Record<string, unknown>>({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  useEffect(() => {
+    fetchConfig();
+  }, []);
+
+  async function fetchConfig() {
+    setLoading(true);
+    const res = await apiFetch('/api/admin/config');
+    if (res.ok) {
+      setConfig(await res.json());
+    }
+    setLoading(false);
+  }
+
+  function handleChange(key: string, value: unknown) {
+    setEdits(prev => ({ ...prev, [key]: value }));
+    setMessage(null);
+  }
+
+  function currentValue(key: string): unknown {
+    if (key in edits) return edits[key];
+    return config[key]?.value;
+  }
+
+  async function handleSave() {
+    if (Object.keys(edits).length === 0) return;
+    setSaving(true);
+    setMessage(null);
+
+    const res = await apiFetch('/api/admin/config', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(edits),
+    });
+
+    if (res.ok) {
+      setMessage({ type: 'success', text: 'Settings saved. Changes take effect on next page load.' });
+      setEdits({});
+      await fetchConfig();
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Failed to save' });
+    }
+    setSaving(false);
+  }
+
+  async function handleRevert(key: string) {
+    const res = await apiFetch('/api/admin/config', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key }),
+    });
+    if (res.ok) {
+      setEdits(prev => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+      await fetchConfig();
+      setMessage({ type: 'success', text: `${key} reverted to default` });
+    }
+  }
+
+  const hasEdits = Object.keys(edits).length > 0;
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <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>
+      )}
+
+      <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-s-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} />
+        <ToggleSetting label="Demo Mode" description="Enable demo mode with sample data" configKey="demoMode" value={currentValue('demoMode') as boolean} source={config.demoMode?.source} onChange={handleChange} onRevert={handleRevert} />
+        <ToggleSetting label="Search Engine Indexing" description="Allow search engines to index this webmail. Off (the default) sends noindex/nofollow in the page head, recommended for private deployments." configKey="searchEngineIndexing" value={currentValue('searchEngineIndexing') as boolean} source={config.searchEngineIndexing?.source} onChange={handleChange} onRevert={handleRevert} />
+      </SettingsSection>
+
+      <SettingsSection title="JMAP Servers (multi-server)">
+        <ToggleSetting
+          label="Auto-pick server by email domain"
+          description="When users type their email, automatically select the matching server from the list below."
+          configKey="jmapServerAutoPickByDomain"
+          value={currentValue('jmapServerAutoPickByDomain') as boolean}
+          source={config.jmapServerAutoPickByDomain?.source}
+          onChange={handleChange}
+          onRevert={handleRevert}
+        />
+        <JmapServersSection
+          value={(currentValue('jmapServers') as JmapServerEntry[]) ?? []}
+          source={config.jmapServers?.source}
+          onChange={(next) => handleChange('jmapServers', next)}
+          onRevert={() => handleRevert('jmapServers')}
+        />
+        {Array.isArray(currentValue('jmapServers')) && (currentValue('jmapServers') as JmapServerEntry[]).length > 0 && (
+          <div className="px-4 py-2.5 bg-amber-50 dark:bg-amber-950/30 border-s-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> Each JMAP server must allow this webmail's origin in its <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 browser requests will be blocked.
+            </p>
+          </div>
+        )}
+      </SettingsSection>
+
+      <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>
+
+      <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 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+      <div className="flex items-center gap-2 min-w-0">
+        <label className="text-sm text-foreground">{label}</label>
+        <SourceBadge source={source} />
+      </div>
+      <div className="flex items-center gap-2 w-full sm:w-auto">
+        <input
+          type="text"
+          value={value ?? ''}
+          onChange={(e) => onChange(configKey, e.target.value)}
+          placeholder={placeholder}
+          className="h-8 w-full sm: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="shrink-0 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 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm: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 shrink-0">
+        <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 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+      <div className="flex items-center gap-2 min-w-0">
+        <span className="text-sm text-foreground">{label}</span>
+        <SourceBadge source={source} />
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        <select
+          value={value ?? ''}
+          onChange={(e) => onChange(configKey, e.target.value)}
+          className="h-8 rounded-md border border-input bg-background px-2.5 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {options.map(opt => <option key={opt} value={opt}>{opt}</option>)}
+        </select>
+        {source === 'admin' && (
+          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert to default">
+            <RotateCcw className="w-3.5 h-3.5" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,251 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Loader2, Send, Save, CheckCircle2, XCircle, ExternalLink } from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
+
+interface TelemetryStatus {
+  consent: 'pending' | 'on' | 'off';
+  consentSource: 'env' | 'file';
+  endpoint: string;
+  defaultEndpoint: string;
+  consentedAt: string | null;
+  lastSentAt: string | null;
+  nextScheduledAt: string | null;
+  payloadPreview: Record<string, unknown>;
+  accountCounts: { total: number; active7d: number };
+}
+
+function timeAgo(iso: string | null): string {
+  if (!iso) return 'never';
+  const d = Date.now() - new Date(iso).getTime();
+  if (d < 0) return new Date(iso).toLocaleString();
+  const m = Math.floor(d / 60000);
+  if (m < 1) return 'just now';
+  if (m < 60) return `${m} min ago`;
+  const h = Math.floor(m / 60);
+  if (h < 48) return `${h} hours ago`;
+  const days = Math.floor(h / 24);
+  return `${days} days ago`;
+}
+
+export function TelemetryTab() {
+  const [status, setStatus] = useState<TelemetryStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [endpointDraft, setEndpointDraft] = useState('');
+  const [sendResult, setSendResult] = useState<{ ok: boolean; msg: string } | null>(null);
+
+  async function refresh(): Promise<void> {
+    setLoading(true);
+    try {
+      const r = await apiFetch('/api/admin/telemetry');
+      if (!r.ok) throw new Error('failed to load');
+      const data = (await r.json()) as TelemetryStatus;
+      setStatus(data);
+      setEndpointDraft(data.endpoint);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  }
+  useEffect(() => { void refresh(); }, []);
+
+  async function setConsent(consent: 'on' | 'off'): Promise<void> {
+    setBusy('consent');
+    try {
+      const r = await apiFetch('/api/admin/telemetry', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ action: 'set-consent', consent }),
+      });
+      if (!r.ok) {
+        const j = (await r.json().catch(() => ({}))) as { error?: string };
+        alert(j.error ?? 'failed');
+      }
+      await refresh();
+    } finally { setBusy(null); }
+  }
+
+  async function saveEndpoint(): Promise<void> {
+    setBusy('endpoint');
+    try {
+      const r = await apiFetch('/api/admin/telemetry', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ action: 'set-endpoint', endpoint: endpointDraft }),
+      });
+      if (!r.ok) {
+        const j = (await r.json().catch(() => ({}))) as { error?: string };
+        alert(j.error ?? 'failed');
+      }
+      await refresh();
+    } finally { setBusy(null); }
+  }
+
+  async function sendNow(): Promise<void> {
+    setBusy('send');
+    setSendResult(null);
+    try {
+      const r = await apiFetch('/api/admin/telemetry', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ action: 'send-now' }),
+      });
+      const j = (await r.json().catch(() => ({}))) as { ok?: boolean; status?: number; error?: string };
+      setSendResult({
+        ok: !!j.ok,
+        msg: j.ok ? `sent (HTTP ${j.status ?? '?'})` : `failed: ${j.error ?? 'unknown'}`,
+      });
+      await refresh();
+    } finally { setBusy(null); }
+  }
+
+  if (loading || !status) {
+    return (
+      <div className="p-8 flex items-center gap-2 text-muted-foreground">
+        <Loader2 className="h-4 w-4 animate-spin" /> loading…
+      </div>
+    );
+  }
+
+  const envOverridden = status.consentSource === 'env';
+  const isOn = status.consent === 'on';
+
+  return (
+    <div className="space-y-6">
+      <header className="space-y-2">
+        <h1 className="text-2xl font-semibold">Anonymous Usage Stats</h1>
+        <p className="text-sm text-muted-foreground">
+          Bulwark can send one anonymous heartbeat per day so we can see how many instances are
+          running, on what platforms, and which features they use. It&apos;s <strong>off by
+          default</strong>; one click below enables it and helps us make the product better. No
+          email addresses, no hostnames, no IPs are sent.{' '}
+          <a
+            href="https://bulwarkmail.org/docs/legal/privacy/telemetry"
+            target="_blank"
+            rel="noreferrer"
+            className="underline inline-flex items-center gap-1"
+          >
+            Full schema and policy <ExternalLink className="h-3 w-3" />
+          </a>
+        </p>
+      </header>
+
+      <section className="rounded-lg border p-4 space-y-3">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+          <div className="min-w-0">
+            <div className="font-medium">Status</div>
+            <div className="text-sm text-muted-foreground">
+              {status.consent === 'pending' && 'Initialising - no heartbeats sent yet.'}
+              {status.consent === 'on' && 'Heartbeats are enabled. Thanks for helping us improve!'}
+              {status.consent === 'off' && 'Heartbeats are off (default).'}
+              {envOverridden && (
+                <> Locked by <code>BULWARK_TELEMETRY</code> env var.</>
+              )}
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              disabled={busy === 'consent' || envOverridden || isOn}
+              onClick={() => void setConsent('on')}
+              className="px-3 py-1.5 rounded-md border bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+            >
+              Enable
+            </button>
+            <button
+              type="button"
+              disabled={busy === 'consent' || envOverridden || status.consent === 'off'}
+              onClick={() => void setConsent('off')}
+              className="px-3 py-1.5 rounded-md border hover:bg-accent disabled:opacity-50"
+            >
+              Disable
+            </button>
+          </div>
+        </div>
+        <dl className="grid grid-cols-2 gap-2 text-sm pt-2 border-t">
+          <dt className="text-muted-foreground">Last sent</dt>
+          <dd>{timeAgo(status.lastSentAt)}</dd>
+          <dt className="text-muted-foreground">Next scheduled</dt>
+          <dd>{timeAgo(status.nextScheduledAt)}</dd>
+          <dt className="text-muted-foreground">Consented at</dt>
+          <dd>{status.consentedAt ? new Date(status.consentedAt).toLocaleString() : '-'}</dd>
+        </dl>
+      </section>
+
+      <section className="rounded-lg border p-4 space-y-2">
+        <div className="font-medium">Account activity</div>
+        <p className="text-sm text-muted-foreground">
+          Unique accounts that have logged in over the last 90 days. Identities are stored as a
+          per-instance HMAC, never as plaintext usernames. These are the numbers reported in the
+          heartbeat as bucketed ranges.
+        </p>
+        <dl className="grid grid-cols-2 gap-2 text-sm pt-1">
+          <dt className="text-muted-foreground">Total (90d)</dt>
+          <dd className="font-mono">{status.accountCounts?.total ?? 0}</dd>
+          <dt className="text-muted-foreground">Active (7d)</dt>
+          <dd className="font-mono">{status.accountCounts?.active7d ?? 0}</dd>
+        </dl>
+      </section>
+
+      <section className="rounded-lg border p-4 space-y-3">
+        <div className="font-medium">Endpoint</div>
+        <p className="text-sm text-muted-foreground">
+          Where heartbeats are sent. Defaults to the project&apos;s collector. Point at your own collector
+          (open source at <code>bulwarkmail/dashboard</code>) or clear this field to disable sending.
+        </p>
+        <div className="flex flex-col sm:flex-row gap-2">
+          <input
+            type="url"
+            value={endpointDraft}
+            onChange={(e) => setEndpointDraft(e.target.value)}
+            placeholder={status.defaultEndpoint}
+            className="flex-1 min-w-0 px-3 py-1.5 rounded-md border bg-background"
+          />
+          <button
+            type="button"
+            disabled={busy === 'endpoint' || endpointDraft === status.endpoint}
+            onClick={() => void saveEndpoint()}
+            className="shrink-0 px-3 py-1.5 rounded-md border bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 inline-flex items-center justify-center gap-1"
+          >
+            <Save className="h-4 w-4" /> Save
+          </button>
+        </div>
+      </section>
+
+      <section className="rounded-lg border p-4 space-y-3">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+          <div className="min-w-0">
+            <div className="font-medium">Payload preview</div>
+            <div className="text-sm text-muted-foreground">
+              Exactly what the next heartbeat would send from this install, right now.
+            </div>
+          </div>
+          <button
+            type="button"
+            disabled={busy === 'send' || !isOn}
+            onClick={() => void sendNow()}
+            className="shrink-0 px-3 py-1.5 rounded-md border bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 inline-flex items-center gap-1"
+          >
+            <Send className="h-4 w-4" /> Send now
+          </button>
+        </div>
+        {sendResult && (
+          <div
+            className={`text-sm flex items-center gap-2 ${
+              sendResult.ok ? 'text-emerald-600' : 'text-red-600'
+            }`}
+          >
+            {sendResult.ok ? <CheckCircle2 className="h-4 w-4" /> : <XCircle className="h-4 w-4" />}
+            {sendResult.msg}
+          </div>
+        )}
+        <pre className="text-xs bg-muted/50 rounded-md p-3 overflow-x-auto max-h-96">
+          {JSON.stringify(status.payloadPreview, null, 2)}
+        </pre>
+      </section>
+    </div>
+  );
+}

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

@@ -0,0 +1,544 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { Upload, Trash2, Power, PowerOff, Loader2, Palette, Save, Shield, Lock, LockOpen } from 'lucide-react';
+import type { SettingsPolicy } from '@/lib/admin/types';
+import { DEFAULT_POLICY, DEFAULT_THEME_POLICY } from '@/lib/admin/types';
+import { apiFetch } from '@/lib/browser-navigation';
+import { BUILTIN_THEMES } from '@/lib/builtin-themes';
+
+// Derive from the single source of truth so newly added built-in themes show
+// up here automatically (was previously a hardcoded subset — see #496).
+const BUILTIN_THEME_OPTIONS = BUILTIN_THEMES.map(t => ({ id: t.id, name: t.name }));
+
+interface ThemeEntry {
+  id: string;
+  name: string;
+  version: string;
+  author: string;
+  description: string;
+  variants: string[];
+  enabled: boolean;
+  forceEnabled?: boolean;
+  installedAt: string;
+  updatedAt: string;
+}
+
+export function ThemesTab() {
+  const [themes, setThemes] = useState<ThemeEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [uploading, setUploading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [policy, setPolicy] = useState<SettingsPolicy>({ ...DEFAULT_POLICY });
+  const [policyDirty, setPolicyDirty] = useState(false);
+  const [savingPolicy, setSavingPolicy] = useState(false);
+
+  useEffect(() => { fetchThemes(); fetchPolicy(); }, []);
+
+  async function fetchPolicy() {
+    try {
+      const res = await apiFetch('/api/admin/policy');
+      if (res.ok) {
+        const data = await res.json();
+        setPolicy({
+          ...data,
+          themePolicy: { ...DEFAULT_THEME_POLICY, ...(data.themePolicy || {}) },
+        });
+      }
+    } catch { /* ignore */ }
+  }
+
+  function toggleThemesEnabled() {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, themesEnabled: !prev.features.themesEnabled },
+    }));
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  function toggleUserThemeUploads() {
+    setPolicy(prev => ({
+      ...prev,
+      features: { ...prev.features, userThemesEnabled: !prev.features.userThemesEnabled },
+    }));
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  function toggleBuiltinTheme(themeId: string) {
+    setPolicy(prev => {
+      const disabled = prev.themePolicy?.disabledBuiltinThemes || [];
+      const isDisabled = disabled.includes(themeId);
+      return {
+        ...prev,
+        themePolicy: {
+          ...DEFAULT_THEME_POLICY,
+          ...prev.themePolicy,
+          disabledBuiltinThemes: isDisabled
+            ? disabled.filter((id: string) => id !== themeId)
+            : [...disabled, themeId],
+        },
+      };
+    });
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  function toggleAdminTheme(themeId: string) {
+    setPolicy(prev => {
+      const disabled = prev.themePolicy?.disabledThemes || [];
+      const isDisabled = disabled.includes(themeId);
+      return {
+        ...prev,
+        themePolicy: {
+          ...DEFAULT_THEME_POLICY,
+          ...prev.themePolicy,
+          disabledThemes: isDisabled
+            ? disabled.filter((id: string) => id !== themeId)
+            : [...disabled, themeId],
+        },
+      };
+    });
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  function setDefaultTheme(themeId: string | null) {
+    setPolicy(prev => ({
+      ...prev,
+      themePolicy: {
+        ...DEFAULT_THEME_POLICY,
+        ...prev.themePolicy,
+        defaultThemeId: themeId,
+      },
+    }));
+    setPolicyDirty(true);
+    setMessage(null);
+  }
+
+  async function handleSavePolicy() {
+    setSavingPolicy(true);
+    setMessage(null);
+    try {
+      const res = await apiFetch('/api/admin/policy', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(policy),
+      });
+      if (res.ok) {
+        setMessage({ type: 'success', text: 'Theme policy saved. Users will see changes on next login.' });
+        setPolicyDirty(false);
+      } else {
+        const data = await res.json();
+        setMessage({ type: 'error', text: data.error || 'Failed to save policy' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to save policy' });
+    } finally {
+      setSavingPolicy(false);
+    }
+  }
+
+  async function fetchThemes() {
+    setLoading(true);
+    try {
+      const res = await apiFetch('/api/admin/themes');
+      if (res.ok) setThemes(await res.json());
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setUploading(true);
+    setMessage(null);
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const res = await apiFetch('/api/admin/themes', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const data = await res.json();
+      if (res.ok) {
+        const warnings = data.warnings?.length ? ` (${data.warnings.length} warning(s))` : '';
+        setMessage({ type: 'success', text: `Theme "${data.theme.name}" installed${warnings}` });
+        await fetchThemes();
+      } else {
+        setMessage({ type: 'error', text: data.error || 'Upload failed' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Upload failed' });
+    } finally {
+      setUploading(false);
+      if (fileInputRef.current) fileInputRef.current.value = '';
+    }
+  }
+
+  async function toggleTheme(id: string, enabled: boolean) {
+    setMessage(null);
+    const res = await apiFetch('/api/admin/themes', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, enabled }),
+    });
+
+    if (res.ok) {
+      setThemes(prev => prev.map(t => t.id === id ? { ...t, enabled } : t));
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Update failed' });
+    }
+  }
+
+  async function toggleForceEnabled(id: string, forceEnabled: boolean) {
+    setMessage(null);
+    const body: Record<string, unknown> = { id, forceEnabled };
+    if (forceEnabled) body.enabled = true;
+
+    const res = await apiFetch('/api/admin/themes', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+
+    if (res.ok) {
+      setThemes(prev => prev.map(t => t.id === id ? { ...t, forceEnabled, ...(forceEnabled ? { enabled: true } : {}) } : t));
+      setPolicy(prev => {
+        const current = prev.forceEnabledThemes || [];
+        return {
+          ...prev,
+          forceEnabledThemes: forceEnabled
+            ? [...current.filter(tid => tid !== id), id]
+            : current.filter(tid => tid !== id),
+        };
+      });
+      setPolicyDirty(true);
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Update failed' });
+    }
+  }
+
+  async function forceEnableAll() {
+    setMessage(null);
+    const disabled = themes.filter(t => !t.enabled);
+    if (disabled.length === 0) {
+      setMessage({ type: 'success', text: 'All themes are already enabled' });
+      return;
+    }
+    let failed = 0;
+    for (const t of disabled) {
+      const res = await apiFetch('/api/admin/themes', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: t.id, enabled: true }),
+      });
+      if (!res.ok) failed++;
+    }
+    if (failed === 0) {
+      await fetchThemes();
+      setMessage({ type: 'success', text: `All ${disabled.length} theme(s) enabled` });
+    } else {
+      await fetchThemes();
+      setMessage({ type: 'error', text: `${failed} theme(s) failed to enable` });
+    }
+  }
+
+  async function forceDisableAll() {
+    setMessage(null);
+    const enabled = themes.filter(t => t.enabled);
+    if (enabled.length === 0) {
+      setMessage({ type: 'success', text: 'All themes are already disabled' });
+      return;
+    }
+    let failed = 0;
+    for (const t of enabled) {
+      const res = await apiFetch('/api/admin/themes', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: t.id, enabled: false }),
+      });
+      if (!res.ok) failed++;
+    }
+    if (failed === 0) {
+      await fetchThemes();
+      setMessage({ type: 'success', text: `All ${enabled.length} theme(s) disabled` });
+    } else {
+      await fetchThemes();
+      setMessage({ type: 'error', text: `${failed} theme(s) failed to disable` });
+    }
+  }
+
+  async function deleteTheme(id: string, name: string) {
+    if (!confirm(`Remove theme "${name}"? This cannot be undone.`)) return;
+
+    setMessage(null);
+    const res = await apiFetch('/api/admin/themes', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id }),
+    });
+
+    if (res.ok) {
+      setThemes(prev => prev.filter(t => t.id !== id));
+      setMessage({ type: 'success', text: `Theme "${name}" removed` });
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Delete failed' });
+    }
+  }
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  const themesEnabled = policy.features.themesEnabled ?? true;
+  const userThemesEnabled = policy.features.userThemesEnabled ?? true;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <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 flex-wrap 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>
+      )}
+
+      <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">
+          <div className="px-4 py-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+            <div className="min-w-0">
+              <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={`shrink-0 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>
+
+          <div className="px-4 py-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+            <div className="min-w-0">
+              <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={`shrink-0 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>
+
+          {themes.length > 0 && (
+            <div className="px-4 py-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+              <div className="min-w-0">
+                <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 shrink-0">
+                <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 className="px-4 py-3">
+            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+              <div className="min-w-0">
+                <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 w-full sm:w-auto shrink-0 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>
+
+          <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>
+
+          {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>
+
+      <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 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+                <div className="min-w-0 flex-1">
+                  <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                    <span className="text-sm font-medium text-foreground">{theme.name}</span>
+                    <span className="text-xs text-muted-foreground">v{theme.version}</span>
+                    <span className={`text-xs px-1.5 py-0.5 rounded ${theme.enabled ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400' : 'bg-muted text-muted-foreground'}`}>
+                      {theme.enabled ? 'Enabled' : 'Disabled'}
+                    </span>
+                    {theme.forceEnabled && (
+                      <span className="text-xs px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400 flex items-center gap-1">
+                        <Lock className="w-3 h-3" /> Forced
+                      </span>
+                    )}
+                  </div>
+                  {theme.description && (
+                    <p className="text-xs text-muted-foreground mt-0.5 truncate">{theme.description}</p>
+                  )}
+                  <div className="text-xs text-muted-foreground mt-1">
+                    by {theme.author} &middot; {theme.variants.join(', ')} &middot; installed {new Date(theme.installedAt).toLocaleDateString()}
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => toggleForceEnabled(theme.id, !theme.forceEnabled)}
+                    title={theme.forceEnabled ? 'Remove force-enable (users can deactivate)' : 'Force enable (users cannot deactivate)'}
+                    className={`p-2 rounded-md transition-colors ${theme.forceEnabled ? 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-950/30 dark:text-amber-400 dark:hover:bg-amber-950/50' : 'hover:bg-accent text-muted-foreground hover:text-foreground'}`}
+                  >
+                    {theme.forceEnabled ? <Lock className="w-4 h-4" /> : <LockOpen className="w-4 h-4" />}
+                  </button>
+                  <button
+                    onClick={() => toggleTheme(theme.id, !theme.enabled)}
+                    title={theme.enabled ? 'Disable' : 'Enable'}
+                    className="p-2 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    <Power className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => deleteTheme(theme.id, theme.name)}
+                    title="Remove"
+                    className="p-2 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,237 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import {
+  Loader2,
+  RefreshCw,
+  CheckCircle2,
+  AlertTriangle,
+  ShieldAlert,
+  ExternalLink,
+} from 'lucide-react';
+import { SettingsSection, SettingItem } from '@/components/settings/settings-section';
+import { apiFetch } from '@/lib/browser-navigation';
+import type { UpdateStatus, UpdateSeverity } from '@/lib/version-check/types';
+
+interface VersionAdminStatus {
+  current: string;
+  build: string;
+  endpoint: string;
+  defaultEndpoint: string;
+  disabledByEnv: boolean;
+  lastCheckedAt: string | null;
+  lastSuccessAt: string | null;
+  nextScheduledAt: string | null;
+  status: UpdateStatus | null;
+}
+
+function timeAgo(iso: string | null): string {
+  if (!iso) return 'never';
+  const d = Date.now() - new Date(iso).getTime();
+  if (d < 0) return new Date(iso).toLocaleString();
+  const m = Math.floor(d / 60000);
+  if (m < 1) return 'just now';
+  if (m < 60) return `${m} min ago`;
+  const h = Math.floor(m / 60);
+  if (h < 48) return `${h} hours ago`;
+  return `${Math.floor(h / 24)} days ago`;
+}
+
+function severityChip(severity: UpdateSeverity) {
+  switch (severity) {
+    case 'security':
+      return {
+        label: 'Security update',
+        className: 'bg-red-500/10 text-red-700 dark:text-red-300 border-red-500/30',
+        Icon: ShieldAlert,
+      };
+    case 'deprecated':
+      return {
+        label: 'Deprecated',
+        className: 'bg-red-500/10 text-red-700 dark:text-red-300 border-red-500/30',
+        Icon: ShieldAlert,
+      };
+    case 'normal':
+      return {
+        label: 'Update available',
+        className: 'bg-amber-500/10 text-amber-700 dark:text-amber-300 border-amber-500/30',
+        Icon: AlertTriangle,
+      };
+    case 'unknown':
+      return {
+        label: 'Unknown',
+        className: 'bg-muted text-muted-foreground border-border',
+        Icon: AlertTriangle,
+      };
+    case 'none':
+    default:
+      return {
+        label: 'Up to date',
+        className: 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 border-emerald-500/30',
+        Icon: CheckCircle2,
+      };
+  }
+}
+
+export function VersionTab() {
+  const [data, setData] = useState<VersionAdminStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [checking, setChecking] = useState(false);
+  const [checkResult, setCheckResult] = useState<{ ok: boolean; msg: string } | null>(null);
+
+  async function refresh(): Promise<void> {
+    setLoading(true);
+    try {
+      const r = await apiFetch('/api/admin/version');
+      if (!r.ok) throw new Error('failed to load');
+      setData((await r.json()) as VersionAdminStatus);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  }
+  useEffect(() => { void refresh(); }, []);
+
+  async function checkNow(): Promise<void> {
+    setChecking(true);
+    setCheckResult(null);
+    try {
+      const r = await apiFetch('/api/admin/version', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ action: 'check-now' }),
+      });
+      const j = (await r.json().catch(() => ({}))) as { ok?: boolean; error?: string };
+      setCheckResult({
+        ok: !!j.ok,
+        msg: j.ok ? 'Update check completed.' : `Failed: ${j.error ?? 'unknown'}`,
+      });
+      await refresh();
+    } finally {
+      setChecking(false);
+    }
+  }
+
+  if (loading || !data) {
+    return (
+      <div className="p-8 flex items-center gap-2 text-muted-foreground">
+        <Loader2 className="h-4 w-4 animate-spin" /> loading…
+      </div>
+    );
+  }
+
+  const status = data.status;
+  const chip = severityChip(status?.severity ?? 'none');
+  const ChipIcon = chip.Icon;
+  const releaseUrl = status?.url ?? null;
+  const newer = status?.latest && status.latest !== data.current ? status.latest : null;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h1 className="text-2xl font-semibold text-foreground">Version</h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            Hourly check against the Bulwark version server. Severity is decided server-side and
+            disable with <code>BULWARK_UPDATE_CHECK=off</code>.
+          </p>
+        </div>
+        <button
+          type="button"
+          disabled={checking}
+          onClick={() => void checkNow()}
+          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"
+        >
+          {checking ? <Loader2 className="w-4 h-4 animate-spin" /> : <RefreshCw className="w-4 h-4" />}
+          Check now
+        </button>
+      </div>
+
+      {checkResult && (
+        <div
+          className={`text-sm rounded-md px-3 py-2 ${
+            checkResult.ok
+              ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300'
+              : 'bg-destructive/10 text-destructive'
+          }`}
+        >
+          {checkResult.msg}
+        </div>
+      )}
+
+      <SettingsSection title="Status">
+        <SettingItem label="Severity">
+          <span
+            className={`inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium ${chip.className}`}
+          >
+            <ChipIcon className="h-3 w-3" />
+            {chip.label}
+          </span>
+        </SettingItem>
+        <SettingItem label="Running" description={data.build !== 'unknown' ? `Build ${data.build}` : undefined}>
+          <span className="text-sm font-mono text-foreground">{data.current}</span>
+        </SettingItem>
+        {newer && (
+          <SettingItem label="Latest release">
+            {releaseUrl ? (
+              <a
+                href={releaseUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1 text-sm font-mono text-foreground hover:underline"
+              >
+                {newer} <ExternalLink className="w-3 h-3" />
+              </a>
+            ) : (
+              <span className="text-sm font-mono text-foreground">{newer}</span>
+            )}
+          </SettingItem>
+        )}
+        {status?.advisory && (
+          <SettingItem label="Advisory">
+            <span className="text-sm font-mono text-red-600 dark:text-red-400">{status.advisory}</span>
+          </SettingItem>
+        )}
+      </SettingsSection>
+
+      <SettingsSection title="Schedule" description="Hourly polling with ±5 minute jitter.">
+        <SettingItem label="Last checked">
+          <span className="text-sm text-foreground">{timeAgo(data.lastCheckedAt)}</span>
+        </SettingItem>
+        <SettingItem label="Last success">
+          <span className="text-sm text-foreground">{timeAgo(data.lastSuccessAt)}</span>
+        </SettingItem>
+        <SettingItem label="Next scheduled">
+          <span className="text-sm text-foreground">{timeAgo(data.nextScheduledAt)}</span>
+        </SettingItem>
+        {status?.checkedAt && (
+          <SettingItem label="Server timestamp" description="When the server last refreshed its release list.">
+            <span className="text-sm text-foreground">{new Date(status.checkedAt).toLocaleString()}</span>
+          </SettingItem>
+        )}
+      </SettingsSection>
+
+      <SettingsSection title="Source">
+        <SettingItem
+          label="Endpoint"
+          description={data.endpoint === data.defaultEndpoint ? 'Default endpoint.' : `Default: ${data.defaultEndpoint}`}
+        >
+          <a
+            href={data.endpoint}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-1 text-sm text-foreground hover:underline break-all"
+          >
+            {data.endpoint} <ExternalLink className="w-3 h-3 shrink-0" />
+          </a>
+        </SettingItem>
+        <SettingItem label="Disabled by env" description="Set BULWARK_UPDATE_CHECK=off to disable.">
+          <span className={`text-sm font-medium ${data.disabledByEnv ? 'text-amber-600 dark:text-amber-400' : 'text-muted-foreground'}`}>
+            {data.disabledByEnv ? 'Yes' : 'No'}
+          </span>
+        </SettingItem>
+      </SettingsSection>
+    </div>
+  );
+}

app/(main)/admin/auth/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function Page() {
+  redirect('/admin?tab=auth');
+}

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

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function Page() {
+  redirect('/admin?tab=branding');
+}

app/(main)/admin/change-password/page.tsx

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

app/(main)/admin/layout.tsx

@@ -0,0 +1,479 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { useAdminTabStore, type AdminTabId } from '@/stores/admin-tab-store';
+import {
+  LayoutDashboard,
+  Settings,
+  Palette,
+  Shield,
+  Scale,
+  ScrollText,
+  LogOut,
+  KeyRound,
+  Puzzle,
+  SwatchBook,
+  Activity,
+  Package,
+  Mail,
+  Calendar,
+  BookUser,
+  HardDrive,
+  Store,
+  Menu,
+  X,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useConfig } from '@/hooks/use-config';
+import { usePolicyStore } from '@/stores/policy-store';
+import { useThemeStore } from '@/stores/theme-store';
+import { getActiveAccountSlotHeaders } from '@/lib/auth/active-account-slot';
+
+import { useUpdateStore, selectHasUpdate } from '@/stores/update-store';
+import { apiFetch, getPathPrefix, withBasePath } from '@/lib/browser-navigation';
+
+// Single-page tab navigation: clicks update a Zustand store. The URL stays
+// at /admin so React doesn't fire a route transition on every tab switch -
+// matches the regular settings page pattern, fixes the dev-mode "Rendering…"
+// hang we saw with both /admin/<segment> routes and ?tab= search params.
+const NAV_GROUPS: ReadonlyArray<{
+  label: string;
+  items: ReadonlyArray<{ tab: AdminTabId; label: string; icon: typeof LayoutDashboard }>;
+}> = [
+  {
+    label: 'Overview',
+    items: [
+      { tab: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
+    ],
+  },
+  {
+    label: 'Configuration',
+    items: [
+      { tab: 'settings', label: 'Settings', icon: Settings },
+      { tab: 'branding', label: 'Branding', icon: Palette },
+      { tab: 'auth', label: 'Authentication', icon: Shield },
+      { tab: 'policy', label: 'Policy', icon: Scale },
+    ],
+  },
+  {
+    label: 'Extensions',
+    items: [
+      { tab: 'plugins', label: 'Plugins', icon: Puzzle },
+      { tab: 'themes', label: 'Themes', icon: SwatchBook },
+      { tab: 'marketplace', label: 'Marketplace', icon: Store },
+    ],
+  },
+  {
+    label: 'System',
+    items: [
+      { tab: 'version', label: 'Version', icon: Package },
+      { tab: 'telemetry', label: 'Telemetry', icon: Activity },
+      { tab: 'logs', label: 'Audit Log', icon: ScrollText },
+    ],
+  },
+];
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const storeActiveTab = useAdminTabStore((s) => s.activeTab);
+  const setActiveTab = useAdminTabStore((s) => s.setActiveTab);
+  // Highlight the active tab only on /admin itself - on dynamic routes
+  // (e.g. /admin/plugins/[id]) no tab is "current".
+  const activeTab = pathname === '/admin' ? storeActiveTab : null;
+  const [authenticated, setAuthenticated] = useState<boolean | null>(null);
+  const [authError, setAuthError] = useState<string | null>(null);
+  const [isStalwartAdmin, setIsStalwartAdmin] = useState(false);
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+  const { appLogoLightUrl, appLogoDarkUrl, loginLogoLightUrl, loginLogoDarkUrl } = useConfig();
+  const filesEnabled = usePolicyStore((s) => s.isFeatureEnabled('filesEnabled'));
+  const resolvedTheme = useThemeStore((s) => s.resolvedTheme);
+  const logoUrl = withBasePath(resolvedTheme === 'dark'
+    ? (appLogoDarkUrl || appLogoLightUrl || loginLogoDarkUrl)
+    : (appLogoLightUrl || appLogoDarkUrl || loginLogoLightUrl));
+
+  // Match the navigation rail: red for security/deprecated, amber for normal.
+  const hasUpdate = useUpdateStore(selectHasUpdate);
+  const updateSeverity = useUpdateStore((s) => s.status?.severity);
+  const startUpdatePolling = useUpdateStore((s) => s.startPolling);
+  useEffect(() => { startUpdatePolling(); }, [startUpdatePolling]);
+  const updateImportant = updateSeverity === 'security' || updateSeverity === 'deprecated';
+
+  useEffect(() => {
+    setMobileNavOpen(false);
+  }, [pathname]);
+
+  useEffect(() => {
+    if (!mobileNavOpen) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, [mobileNavOpen]);
+
+  useEffect(() => {
+    if (pathname === '/admin/login') return;
+    let cancelled = false;
+
+    async function checkAuth() {
+      try {
+        const jmapHeaders = getActiveAccountSlotHeaders();
+        const res = await apiFetch('/api/admin/auth', { headers: jmapHeaders });
+        const data = await res.json();
+        if (cancelled) return;
+
+        const stalwartAdmin = data.stalwartAdmin === true;
+        setIsStalwartAdmin(stalwartAdmin);
+
+        // If neither password-based admin nor Stalwart admin, redirect away
+        if (!data.enabled && !stalwartAdmin) {
+          router.replace('/');
+          return;
+        }
+
+        if (data.authenticated) {
+          setAuthenticated(true);
+          return;
+        }
+
+        // If Stalwart admin but not yet authenticated, auto-login
+        if (stalwartAdmin) {
+          const loginRes = await apiFetch('/api/admin/auth', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', ...jmapHeaders },
+            body: JSON.stringify({ stalwartAuth: true }),
+          });
+          if (cancelled) return;
+          if (loginRes.ok) {
+            setAuthenticated(true);
+            return;
+          }
+          const body = await loginRes.json().catch(() => ({}));
+          setAuthError(body?.error || `Admin auto-login failed (HTTP ${loginRes.status})`);
+          setAuthenticated(false);
+          return;
+        }
+
+        router.replace('/admin/login');
+      } catch (err) {
+        if (cancelled) return;
+        setAuthError(err instanceof Error ? err.message : 'Network error during admin check');
+        setAuthenticated(false);
+      }
+    }
+
+    checkAuth();
+    return () => { cancelled = true; };
+  }, [pathname, router]);
+
+  async function handleLogout() {
+    await apiFetch('/api/admin/auth', { method: 'DELETE' });
+    router.replace('/admin/login');
+  }
+
+  // Don't gate the login page
+  if (pathname === '/admin/login') {
+    return <>{children}</>;
+  }
+
+  // /admin lives outside the [locale] tree, so links back to the webmail
+  // apps are bare <a> tags (hard navigation). Next.js only auto-applies
+  // basePath to <Link>/router APIs - for these we prepend it manually so
+  // NEXT_PUBLIC_BASE_PATH=/webmail deployments don't redirect to "/".
+  const prefix = getPathPrefix();
+
+  const navContent = (
+    <>
+      <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(({ tab, label, icon: Icon }) => {
+                const active = activeTab === tab;
+                const showDot = tab === 'version' && hasUpdate;
+                const handleClick = () => {
+                  setActiveTab(tab);
+                  // From a dynamic route (/admin/plugins/[id], /admin/marketplace/[slug])
+                  // we still need a real navigation back to /admin so the page renders.
+                  if (pathname !== '/admin') router.push('/admin');
+                };
+                return (
+                  <button
+                    key={tab}
+                    type="button"
+                    onClick={handleClick}
+                    className={cn(
+                      'w-full text-start 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'
+                    )}
+                  >
+                    <span className="relative shrink-0">
+                      <Icon className={cn(
+                        'w-4 h-4',
+                        active ? 'text-accent-foreground' : 'text-muted-foreground'
+                      )} />
+                      {showDot && (
+                        <span
+                          className={cn(
+                            'absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full ring-2',
+                            active ? 'ring-accent' : 'ring-background',
+                            updateImportant ? 'bg-red-500' : 'bg-amber-500',
+                          )}
+                          aria-label={updateImportant ? 'Important update available' : 'Update available'}
+                        />
+                      )}
+                    </span>
+                    {label}
+                  </button>
+                );
+              })}
+            </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-start 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-start 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>
+    </>
+  );
+
+  return (
+    <div className="min-h-screen flex bg-background">
+      {/* Slim webmail nav rail (desktop only) */}
+      <nav className="hidden md:flex w-14 bg-secondary flex-col items-center py-3 gap-2 border-e 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={`${prefix}/`}
+          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={`${prefix}/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={`${prefix}/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>
+        {filesEnabled && (
+          <a
+            href={`${prefix}/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={`${prefix}/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 (desktop only) */}
+      <aside className="hidden md:flex w-60 border-e border-border bg-secondary 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 me-2" />
+          ) : (
+            <Shield className="w-5 h-5 text-primary me-2" />
+          )}
+          <span className="font-semibold text-sm text-foreground">Admin Panel</span>
+        </div>
+        {navContent}
+      </aside>
+
+      {/* Mobile drawer overlay */}
+      {mobileNavOpen && (
+        <div
+          className="md:hidden fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"
+          onClick={() => setMobileNavOpen(false)}
+          aria-hidden="true"
+        />
+      )}
+
+      {/* Mobile drawer */}
+      <aside
+        className={cn(
+          'md:hidden fixed inset-y-0 left-0 z-50 w-72 max-w-[85vw] border-e border-border bg-secondary flex flex-col transition-transform duration-200 ease-out',
+          mobileNavOpen ? 'translate-x-0' : '-translate-x-full'
+        )}
+        aria-label="Admin navigation"
+        aria-hidden={!mobileNavOpen}
+      >
+        <div className="h-14 flex items-center justify-between px-3 border-b border-border shrink-0">
+          <div className="flex items-center min-w-0">
+            {logoUrl ? (
+              <img src={logoUrl} alt="" className="w-5 h-5 object-contain me-2" />
+            ) : (
+              <Shield className="w-5 h-5 text-primary me-2" />
+            )}
+            <span className="font-semibold text-sm text-foreground truncate">Admin Panel</span>
+          </div>
+          <button
+            type="button"
+            onClick={() => setMobileNavOpen(false)}
+            className="flex items-center justify-center w-9 h-9 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+            aria-label="Close navigation"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+        {navContent}
+      </aside>
+
+      {/* Main content */}
+      <main className="flex-1 min-w-0 overflow-x-hidden">
+        {/* Mobile header */}
+        <div className="md:hidden sticky top-0 z-30 h-14 flex items-center gap-2 px-3 border-b border-border bg-background">
+          <button
+            type="button"
+            onClick={() => setMobileNavOpen(true)}
+            className="flex items-center justify-center w-9 h-9 rounded-md text-foreground hover:bg-muted transition-colors"
+            aria-label="Open navigation"
+          >
+            <Menu className="w-5 h-5" />
+          </button>
+          <div className="flex items-center min-w-0">
+            {logoUrl ? (
+              <img src={logoUrl} alt="" className="w-5 h-5 object-contain me-2" />
+            ) : (
+              <Shield className="w-5 h-5 text-primary me-2" />
+            )}
+            <span className="font-semibold text-sm text-foreground truncate">Admin Panel</span>
+          </div>
+        </div>
+
+        <div className="max-w-4xl mx-auto p-4 md:p-6 pb-[calc(4rem+env(safe-area-inset-bottom))] md:pb-6">
+          {authError ? (
+            <div className="rounded-lg border border-destructive/40 bg-destructive/10 p-4 text-sm text-destructive">
+              <p className="font-medium">Admin authentication failed</p>
+              <p className="mt-1 text-destructive/80">{authError}</p>
+            </div>
+          ) : authenticated === null ? (
+            <div className="py-12 text-center text-sm text-muted-foreground animate-pulse">
+              Loading admin panel…
+            </div>
+          ) : authenticated ? (
+            children
+          ) : null}
+        </div>
+      </main>
+
+      {/* Mobile bottom nav (main webmail nav) */}
+      <nav
+        className="md:hidden fixed inset-x-0 bottom-0 z-30 flex items-center bg-background border-t border-border pb-[env(safe-area-inset-bottom)]"
+        aria-label="Main navigation"
+      >
+        <a
+          href={`${prefix}/`}
+          className="flex flex-col items-center justify-center gap-1 py-2 px-1 min-h-[44px] grow shrink-0 basis-[64px] transition-colors duration-150 text-muted-foreground hover:text-foreground"
+          title="Mail"
+        >
+          <Mail className="w-5 h-5" />
+          <span className="text-[10px] font-medium leading-tight truncate max-w-full">Mail</span>
+        </a>
+        <a
+          href={`${prefix}/calendar`}
+          className="flex flex-col items-center justify-center gap-1 py-2 px-1 min-h-[44px] grow shrink-0 basis-[64px] transition-colors duration-150 text-muted-foreground hover:text-foreground"
+          title="Calendar"
+        >
+          <Calendar className="w-5 h-5" />
+          <span className="text-[10px] font-medium leading-tight truncate max-w-full">Calendar</span>
+        </a>
+        <a
+          href={`${prefix}/contacts`}
+          className="flex flex-col items-center justify-center gap-1 py-2 px-1 min-h-[44px] grow shrink-0 basis-[64px] transition-colors duration-150 text-muted-foreground hover:text-foreground"
+          title="Contacts"
+        >
+          <BookUser className="w-5 h-5" />
+          <span className="text-[10px] font-medium leading-tight truncate max-w-full">Contacts</span>
+        </a>
+        {filesEnabled && (
+          <a
+            href={`${prefix}/files`}
+            className="flex flex-col items-center justify-center gap-1 py-2 px-1 min-h-[44px] grow shrink-0 basis-[64px] transition-colors duration-150 text-muted-foreground hover:text-foreground"
+            title="Files"
+          >
+            <HardDrive className="w-5 h-5" />
+            <span className="text-[10px] font-medium leading-tight truncate max-w-full">Files</span>
+          </a>
+        )}
+        <div
+          className="flex flex-col items-center justify-center gap-1 py-2 px-1 min-h-[44px] grow shrink-0 basis-[64px] text-primary"
+          title="Admin"
+          aria-current="page"
+        >
+          <div className="relative">
+            <Shield className="w-5 h-5" />
+            <span className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-4 h-0.5 rounded-full bg-primary" />
+          </div>
+          <span className="text-[10px] font-medium leading-tight truncate max-w-full">Admin</span>
+        </div>
+        <a
+          href={`${prefix}/settings`}
+          className="flex flex-col items-center justify-center gap-1 py-2 px-1 min-h-[44px] grow shrink-0 basis-[64px] transition-colors duration-150 text-muted-foreground hover:text-foreground"
+          title="Settings"
+        >
+          <Settings className="w-5 h-5" />
+          <span className="text-[10px] font-medium leading-tight truncate max-w-full">Settings</span>
+        </a>
+      </nav>
+    </div>
+  );
+}

app/(main)/admin/login/page.tsx

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

app/(main)/admin/logs/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function Page() {
+  redirect('/admin?tab=logs');
+}

app/(main)/admin/marketplace/[slug]/page.tsx

@@ -0,0 +1,620 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+import {
+  ArrowLeft,
+  ArrowUpCircle,
+  Download,
+  Loader2,
+  Puzzle,
+  SwatchBook,
+  Star,
+  Trash2,
+  Check,
+  Settings as SettingsIcon,
+  ExternalLink,
+  Shield,
+  AlertTriangle,
+  FileCode,
+  ChevronDown,
+  ChevronUp,
+} from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
+import { compareVersions, isVersionSatisfied } from '@/lib/version-compare';
+
+const CURRENT_APP_VERSION = process.env.NEXT_PUBLIC_APP_VERSION || '0.0.0';
+
+interface PreviewData {
+  extension: {
+    slug: string;
+    name: string;
+    type: 'plugin' | 'theme';
+    pluginType: string | null;
+    description: string;
+    longDescription: string | null;
+    tags: string[];
+    permissions: string[];
+    totalDownloads: number;
+    featured: boolean;
+    githubRepo: string | null;
+    license: string | null;
+    minAppVersion: string | null;
+    iconUrl: string | null;
+    bannerUrl: string | null;
+    author: {
+      displayName: string;
+      githubLogin: string;
+      avatarUrl: string | null;
+      verified?: boolean;
+    } | null;
+    latestVersion: string | null;
+    versions: Array<{
+      version: string;
+      changelog: string | null;
+      bundleSize: number;
+      minAppVersion: string | null;
+      publishedAt: string | null;
+      permissions: string[];
+    }>;
+    screenshots: Array<{ url: string; altText: string | null }>;
+    themePreviews: Array<{
+      variant: 'light' | 'dark';
+      previewPath: string;
+      colors: Record<string, string> | null;
+    }>;
+    createdAt: string | null;
+    updatedAt: string | null;
+  };
+  bundle: {
+    manifest: Record<string, unknown> | null;
+    source: { name: string; content: string; truncated: boolean } | null;
+    size: number;
+    error: string | null;
+  };
+  installed: boolean;
+  installedVersion: string | null;
+}
+
+const RISKY_PERMISSIONS = new Set([
+  'mail:write',
+  'mail:delete',
+  'storage:write',
+  'network',
+  'admin',
+]);
+
+export default function MarketplacePreviewPage() {
+  const params = useParams();
+  const slug = params.slug as string;
+
+  const [data, setData] = useState<PreviewData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [installing, setInstalling] = useState(false);
+  const [uninstalling, setUninstalling] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [showSource, setShowSource] = useState(false);
+  const [showManifest, setShowManifest] = useState(false);
+
+  const fetchPreview = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await apiFetch(`/api/admin/marketplace/${encodeURIComponent(slug)}`);
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        setError(body.error || 'Failed to load preview');
+        return;
+      }
+      setData(await res.json());
+    } catch {
+      setError('Failed to connect to extension directory');
+    } finally {
+      setLoading(false);
+    }
+  }, [slug]);
+
+  useEffect(() => { fetchPreview(); }, [fetchPreview]);
+
+  async function handleInstall() {
+    if (!data) return;
+    const isUpdate = data.installed;
+    const targetVersion = data.extension.latestVersion || '1.0.0';
+    setInstalling(true);
+    setMessage(null);
+    try {
+      const res = await apiFetch('/api/admin/marketplace', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          slug: data.extension.slug,
+          version: targetVersion,
+          type: data.extension.type,
+        }),
+      });
+      const body = await res.json();
+      if (res.ok) {
+        const warnings = body.warnings?.length ? ` (${body.warnings.length} warning(s))` : '';
+        setMessage({
+          type: 'success',
+          text: isUpdate
+            ? `"${data.extension.name}" updated to v${targetVersion}${warnings}`
+            : `"${data.extension.name}" installed${warnings}`,
+        });
+        setData(prev => prev ? { ...prev, installed: true, installedVersion: targetVersion } : prev);
+      } else {
+        setMessage({ type: 'error', text: body.error || (isUpdate ? 'Update failed' : 'Installation failed') });
+      }
+    } catch {
+      setMessage({ type: 'error', text: isUpdate ? 'Update failed - network error' : 'Installation failed - network error' });
+    } finally {
+      setInstalling(false);
+    }
+  }
+
+  async function handleUninstall() {
+    if (!data) return;
+    if (!confirm(`Remove "${data.extension.name}"? This cannot be undone.`)) return;
+
+    setUninstalling(true);
+    setMessage(null);
+    try {
+      const endpoint = data.extension.type === 'theme'
+        ? '/api/admin/themes'
+        : '/api/admin/plugins';
+      const res = await apiFetch(endpoint, {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: data.extension.slug }),
+      });
+      const body = await res.json().catch(() => ({}));
+      if (res.ok) {
+        setMessage({ type: 'success', text: `"${data.extension.name}" removed` });
+        setData(prev => prev ? { ...prev, installed: false } : prev);
+      } else {
+        setMessage({ type: 'error', text: body.error || 'Uninstall failed' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Uninstall failed - network error' });
+    } finally {
+      setUninstalling(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 me-2" />
+        Loading...
+      </div>
+    );
+  }
+
+  if (error || !data) {
+    return (
+      <div className="space-y-4">
+        <Link
+          href="/admin/marketplace"
+          className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
+        >
+          <ArrowLeft className="w-4 h-4" /> Back to Marketplace
+        </Link>
+        <p className="text-sm text-destructive">{error || 'Extension not found'}</p>
+      </div>
+    );
+  }
+
+  const ext = data.extension;
+  const bundle = data.bundle;
+  const isPlugin = ext.type === 'plugin';
+  const manifestPerms = (bundle.manifest?.permissions as string[] | undefined) || ext.permissions || [];
+  const frameOrigins = (bundle.manifest?.frameOrigins as string[] | undefined) || [];
+  const settingsSchema = bundle.manifest?.settingsSchema as Record<string, { type: string; label: string; description?: string; default?: unknown }> | undefined;
+  const versionMismatch = !!ext.minAppVersion && !isVersionSatisfied(CURRENT_APP_VERSION, ext.minAppVersion);
+  const updateAvailable = data.installed
+    && !!data.installedVersion
+    && !!ext.latestVersion
+    && compareVersions(ext.latestVersion, data.installedVersion) > 0
+    && !versionMismatch;
+
+  return (
+    <div className="space-y-6 max-w-4xl">
+      {/* Back link */}
+      <Link
+        href="/admin/marketplace"
+        className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
+      >
+        <ArrowLeft className="w-4 h-4" /> Back to Marketplace
+      </Link>
+
+      {/* Banner / hero */}
+      {ext.bannerUrl && (
+        <div className="mb-6 overflow-hidden rounded-lg border border-border bg-muted">
+          <img
+            src={ext.bannerUrl}
+            alt=""
+            className="block w-full max-h-64 object-cover"
+            loading="lazy"
+          />
+        </div>
+      )}
+
+      {/* Header */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
+        <div className="flex items-start gap-4 flex-1 min-w-0">
+          <div className="w-14 h-14 rounded-lg bg-muted flex items-center justify-center shrink-0 overflow-hidden">
+            {ext.iconUrl ? (
+              <img
+                src={ext.iconUrl}
+                alt=""
+                className="w-14 h-14 object-cover"
+                loading="lazy"
+              />
+            ) : isPlugin ? (
+              <Puzzle className="w-7 h-7 text-muted-foreground" />
+            ) : (
+              <SwatchBook className="w-7 h-7 text-muted-foreground" />
+            )}
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+              <h1 className="text-2xl font-semibold text-foreground break-words min-w-0">{ext.name}</h1>
+              {ext.featured && <Star className="w-4 h-4 text-warning fill-warning shrink-0" />}
+              {data.installed && !updateAvailable && (
+                <span
+                  className="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-md bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400 font-medium"
+                  title={data.installedVersion ? `Installed: v${data.installedVersion}` : undefined}
+                >
+                  <Check className="w-3 h-3" /> Installed
+                </span>
+              )}
+              {data.installed && updateAvailable && (
+                <span
+                  className="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-md bg-blue-100 text-blue-700 dark:bg-blue-950/30 dark:text-blue-400 font-medium"
+                  title={`Installed v${data.installedVersion} → v${ext.latestVersion} available`}
+                >
+                  <ArrowUpCircle className="w-3 h-3" /> Update available
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-2 mt-1 text-sm text-muted-foreground flex-wrap">
+              <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 ? (ext.pluginType || 'plugin') : 'theme'}
+              </span>
+              {ext.author && (
+                <span>by {ext.author.displayName}</span>
+              )}
+              {ext.latestVersion && <span>v{ext.latestVersion}</span>}
+              {ext.license && <span>{ext.license}</span>}
+              <span className="inline-flex items-center gap-1">
+                <Download className="w-3 h-3" />
+                {ext.totalDownloads.toLocaleString()}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Action buttons */}
+        <div className="flex flex-wrap items-center gap-2 shrink-0">
+          {data.installed ? (
+            <>
+              {updateAvailable && (
+                <button
+                  onClick={handleInstall}
+                  disabled={installing || !!bundle.error}
+                  title={`Update from v${data.installedVersion} to v${ext.latestVersion}`}
+                  className="inline-flex items-center gap-1.5 h-9 px-4 rounded-md bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  {installing ? <Loader2 className="w-4 h-4 animate-spin" /> : <ArrowUpCircle className="w-4 h-4" />}
+                  Update to v{ext.latestVersion}
+                </button>
+              )}
+              <Link
+                href={isPlugin ? `/admin/plugins/${ext.slug}` : '/admin/themes'}
+                className="inline-flex items-center gap-1.5 h-9 px-3 rounded-md border border-border text-sm font-medium text-foreground hover:bg-muted transition-colors"
+              >
+                <SettingsIcon className="w-4 h-4" />
+                Manage
+              </Link>
+              <button
+                onClick={handleUninstall}
+                disabled={uninstalling}
+                className="inline-flex items-center gap-1.5 h-9 px-3 rounded-md bg-destructive text-destructive-foreground text-sm font-medium hover:bg-destructive/90 disabled:opacity-50 transition-colors"
+              >
+                {uninstalling ? <Loader2 className="w-4 h-4 animate-spin" /> : <Trash2 className="w-4 h-4" />}
+                Uninstall
+              </button>
+            </>
+          ) : (
+            <button
+              onClick={handleInstall}
+              disabled={installing || !!bundle.error || versionMismatch}
+              title={versionMismatch
+                ? `Requires app v${ext.minAppVersion}+. You are running v${CURRENT_APP_VERSION}. Update Bulwark to install.`
+                : undefined}
+              className="inline-flex items-center gap-1.5 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              {installing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Download className="w-4 h-4" />}
+              Install
+            </button>
+          )}
+        </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>
+      )}
+
+      {versionMismatch && (
+        <div className="flex items-start gap-2 text-sm rounded-md px-3 py-2 bg-amber-50 text-amber-800 dark:bg-amber-950/30 dark:text-amber-300">
+          <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5" />
+          <div>
+            <p className="font-medium">Update Bulwark to install this extension</p>
+            <p className="text-xs mt-0.5 opacity-90">
+              Requires app v{ext.minAppVersion}+. You are running v{CURRENT_APP_VERSION}.
+            </p>
+          </div>
+        </div>
+      )}
+
+      {bundle.error && (
+        <div className="flex items-start gap-2 text-sm rounded-md px-3 py-2 bg-amber-50 text-amber-800 dark:bg-amber-950/30 dark:text-amber-300">
+          <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5" />
+          <div>
+            <p className="font-medium">Could not preview bundle</p>
+            <p className="text-xs mt-0.5 opacity-90">{bundle.error}</p>
+          </div>
+        </div>
+      )}
+
+      {/* Description */}
+      <section className="border border-border rounded-lg p-4">
+        <h2 className="text-sm font-medium text-foreground">About</h2>
+        <p className="text-sm text-muted-foreground mt-2">{ext.description}</p>
+        {ext.longDescription && ext.longDescription !== ext.description && (
+          <p className="text-sm text-muted-foreground mt-3 whitespace-pre-wrap">{ext.longDescription}</p>
+        )}
+        {ext.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1 mt-3">
+            {ext.tags.map(tag => (
+              <span key={tag} className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+        <div className="flex items-center gap-3 text-xs text-muted-foreground mt-4 pt-3 border-t border-border flex-wrap">
+          {ext.minAppVersion && <span>Requires app v{ext.minAppVersion}+</span>}
+          {bundle.size > 0 && <span>Bundle: {(bundle.size / 1024).toFixed(1)} KB</span>}
+          {ext.githubRepo && (
+            <a
+              href={`https://github.com/${ext.githubRepo}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 hover:text-foreground"
+            >
+              <ExternalLink className="w-3 h-3" />
+              {ext.githubRepo}
+            </a>
+          )}
+        </div>
+      </section>
+
+      {/* Screenshots */}
+      {ext.screenshots.length > 0 && (
+        <section className="border border-border rounded-lg p-4">
+          <h2 className="text-sm font-medium text-foreground">Screenshots</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-3">
+            {ext.screenshots.map((s, i) => (
+              <img
+                key={i}
+                src={s.url}
+                alt={s.altText || `Screenshot ${i + 1}`}
+                className="w-full rounded-md border border-border bg-muted"
+                loading="lazy"
+              />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Theme color preview */}
+      {!isPlugin && ext.themePreviews.length > 0 && (
+        <section className="border border-border rounded-lg p-4">
+          <h2 className="text-sm font-medium text-foreground">Theme preview</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-3">
+            {ext.themePreviews.map(preview => (
+              <ThemeColorSwatch key={preview.variant} preview={preview} />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Permissions */}
+      {isPlugin && (
+        <section className="border border-border rounded-lg p-4">
+          <div className="flex items-center gap-2">
+            <Shield className="w-4 h-4 text-muted-foreground" />
+            <h2 className="text-sm font-medium text-foreground">Permissions</h2>
+          </div>
+          {manifestPerms.length === 0 ? (
+            <p className="text-sm text-muted-foreground mt-2">This plugin requests no permissions.</p>
+          ) : (
+            <ul className="mt-3 space-y-1.5">
+              {manifestPerms.map(perm => {
+                const risky = RISKY_PERMISSIONS.has(perm);
+                return (
+                  <li
+                    key={perm}
+                    className={`flex items-center gap-2 text-sm rounded-md px-2 py-1 ${
+                      risky
+                        ? 'bg-amber-50 text-amber-800 dark:bg-amber-950/30 dark:text-amber-300'
+                        : 'bg-muted/50 text-foreground'
+                    }`}
+                  >
+                    {risky && <AlertTriangle className="w-3.5 h-3.5 shrink-0" />}
+                    <code className="font-mono text-xs">{perm}</code>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+          {frameOrigins.length > 0 && (
+            <div className="mt-4 pt-3 border-t border-border">
+              <h3 className="text-xs font-medium text-foreground">Iframe origins</h3>
+              <p className="text-xs text-muted-foreground mt-0.5">
+                The plugin will be allowed to embed content from these origins.
+              </p>
+              <ul className="mt-2 space-y-1">
+                {frameOrigins.map(origin => (
+                  <li key={origin} className="text-xs font-mono text-foreground bg-muted/50 px-2 py-1 rounded">
+                    {origin}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </section>
+      )}
+
+      {/* Settings schema preview */}
+      {isPlugin && settingsSchema && Object.keys(settingsSchema).length > 0 && (
+        <section className="border border-border rounded-lg p-4">
+          <h2 className="text-sm font-medium text-foreground">User settings</h2>
+          <p className="text-xs text-muted-foreground mt-0.5">Settings users will be able to configure after install.</p>
+          <ul className="mt-3 divide-y divide-border">
+            {Object.entries(settingsSchema).map(([key, field]) => (
+              <li key={key} className="py-2">
+                <div className="flex items-center gap-2">
+                  <code className="text-xs font-mono text-foreground">{key}</code>
+                  <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{field.type}</span>
+                </div>
+                <div className="text-sm text-foreground mt-0.5">{field.label}</div>
+                {field.description && (
+                  <div className="text-xs text-muted-foreground mt-0.5">{field.description}</div>
+                )}
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {/* Source / manifest disclosure */}
+      {bundle.manifest && (
+        <section className="border border-border rounded-lg">
+          <button
+            onClick={() => setShowManifest(v => !v)}
+            className="w-full flex items-center justify-between gap-2 px-4 py-3 text-start hover:bg-muted/30 transition-colors"
+          >
+            <div className="flex items-center gap-2">
+              <FileCode className="w-4 h-4 text-muted-foreground" />
+              <h2 className="text-sm font-medium text-foreground">manifest.json</h2>
+            </div>
+            {showManifest ? <ChevronUp className="w-4 h-4 text-muted-foreground" /> : <ChevronDown className="w-4 h-4 text-muted-foreground" />}
+          </button>
+          {showManifest && (
+            <pre className="px-4 pb-4 text-xs font-mono overflow-x-auto text-foreground whitespace-pre">
+              {JSON.stringify(bundle.manifest, null, 2)}
+            </pre>
+          )}
+        </section>
+      )}
+
+      {bundle.source && (
+        <section className="border border-border rounded-lg">
+          <button
+            onClick={() => setShowSource(v => !v)}
+            className="w-full flex items-center justify-between gap-2 px-4 py-3 text-start hover:bg-muted/30 transition-colors"
+          >
+            <div className="flex items-center gap-2">
+              <FileCode className="w-4 h-4 text-muted-foreground" />
+              <h2 className="text-sm font-medium text-foreground">{bundle.source.name}</h2>
+              {bundle.source.truncated && (
+                <span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400">truncated</span>
+              )}
+            </div>
+            {showSource ? <ChevronUp className="w-4 h-4 text-muted-foreground" /> : <ChevronDown className="w-4 h-4 text-muted-foreground" />}
+          </button>
+          {showSource && (
+            <pre className="px-4 pb-4 text-xs font-mono overflow-x-auto text-foreground whitespace-pre max-h-[600px] overflow-y-auto">
+              {bundle.source.content}
+            </pre>
+          )}
+        </section>
+      )}
+
+      {/* Version history */}
+      {ext.versions.length > 0 && (
+        <section className="border border-border rounded-lg p-4">
+          <h2 className="text-sm font-medium text-foreground">Version history</h2>
+          <ul className="mt-3 divide-y divide-border">
+            {ext.versions.slice(0, 5).map(v => (
+              <li key={v.version} className="py-2 flex items-start justify-between gap-3">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <code className="text-xs font-mono text-foreground">v{v.version}</code>
+                    {v.publishedAt && (
+                      <span className="text-xs text-muted-foreground">
+                        {new Date(v.publishedAt).toLocaleDateString()}
+                      </span>
+                    )}
+                  </div>
+                  {v.changelog && (
+                    <p className="text-xs text-muted-foreground mt-0.5 whitespace-pre-wrap">{v.changelog}</p>
+                  )}
+                </div>
+                <span className="text-xs text-muted-foreground shrink-0">
+                  {(v.bundleSize / 1024).toFixed(1)} KB
+                </span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+    </div>
+  );
+}
+
+function ThemeColorSwatch({ preview }: { preview: { variant: 'light' | 'dark'; colors: Record<string, string> | null } }) {
+  const colors = preview.colors || {};
+  const bg = colors.background || (preview.variant === 'dark' ? '#0f0f10' : '#ffffff');
+  const fg = colors.foreground || (preview.variant === 'dark' ? '#fafafa' : '#0a0a0a');
+  const accent = colors.primary || colors.accent || '#7c5cff';
+  const muted = colors.muted || (preview.variant === 'dark' ? '#1a1a1c' : '#f5f5f5');
+  const border = colors.border || (preview.variant === 'dark' ? '#27272a' : '#e5e5e5');
+
+  return (
+    <div className="rounded-md border border-border overflow-hidden">
+      <div className="px-3 py-2 text-xs font-medium text-muted-foreground bg-muted/30 border-b border-border capitalize">
+        {preview.variant}
+      </div>
+      <div className="p-3 space-y-2" style={{ background: bg, color: fg }}>
+        <div className="flex items-center gap-2">
+          <span className="inline-block w-6 h-6 rounded" style={{ background: accent }} />
+          <span className="text-sm font-medium" style={{ color: fg }}>Sample text</span>
+        </div>
+        <div className="rounded p-2 text-xs" style={{ background: muted, border: `1px solid ${border}` }}>
+          <span style={{ color: fg }}>Card surface</span>
+        </div>
+        <div className="flex flex-wrap gap-1">
+          {Object.entries(colors).slice(0, 6).map(([key, value]) => (
+            <span
+              key={key}
+              title={`${key}: ${value}`}
+              className="inline-block w-4 h-4 rounded border"
+              style={{ background: value, borderColor: border }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

app/(main)/admin/marketplace/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function Page() {
+  redirect('/admin?tab=marketplace');
+}

app/(main)/admin/page.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useAdminTabStore, isAdminTab } from '@/stores/admin-tab-store';
+import { DashboardTab } from './_tabs/dashboard';
+import { SettingsTab } from './_tabs/settings';
+import { BrandingTab } from './_tabs/branding';
+import { AuthTab } from './_tabs/auth';
+import { PolicyTab } from './_tabs/policy';
+import { PluginsTab } from './_tabs/plugins';
+import { ThemesTab } from './_tabs/themes';
+import { MarketplaceTab } from './_tabs/marketplace';
+import { VersionTab } from './_tabs/version';
+import { TelemetryTab } from './_tabs/telemetry';
+import { LogsTab } from './_tabs/logs';
+
+export default function AdminPage() {
+  const activeTab = useAdminTabStore((s) => s.activeTab);
+  const setActiveTab = useAdminTabStore((s) => s.setActiveTab);
+
+  // Honour deep links from the old route structure: /admin?tab=settings
+  // (emitted by the redirect pages in /admin/<x>/page.tsx) sets the store
+  // once on mount, then strips the param so the URL stays at /admin and
+  // subsequent tab clicks don't accumulate query strings.
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const url = new URL(window.location.href);
+    const fromUrl = url.searchParams.get('tab');
+    if (isAdminTab(fromUrl)) {
+      setActiveTab(fromUrl);
+      url.searchParams.delete('tab');
+      window.history.replaceState(null, '', url.pathname + url.search + url.hash);
+    }
+  }, [setActiveTab]);
+
+  switch (activeTab) {
+    case 'dashboard': return <DashboardTab />;
+    case 'settings': return <SettingsTab />;
+    case 'branding': return <BrandingTab />;
+    case 'auth': return <AuthTab />;
+    case 'policy': return <PolicyTab />;
+    case 'plugins': return <PluginsTab />;
+    case 'themes': return <ThemesTab />;
+    case 'marketplace': return <MarketplaceTab />;
+    case 'version': return <VersionTab />;
+    case 'telemetry': return <TelemetryTab />;
+    case 'logs': return <LogsTab />;
+  }
+}

app/(main)/admin/plugins/[id]/page.tsx

@@ -0,0 +1,7 @@
+import { redirect } from 'next/navigation';
+
+// Inline panel handles plugin config now - see _tabs/plugin-config-panel.tsx.
+// Old deep links land on the plugins tab; the user clicks the gear again.
+export default function Page() {
+  redirect('/admin?tab=plugins');
+}

app/(main)/admin/plugins/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function Page() {
+  redirect('/admin?tab=plugins');
+}

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

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function Page() {
+  redirect('/admin?tab=policy');
+}

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

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function Page() {
+  redirect('/admin?tab=settings');
+}

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

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function Page() {
+  redirect('/admin?tab=telemetry');
+}

app/(main)/admin/themes/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function Page() {
+  redirect('/admin?tab=themes');
+}

app/(main)/admin/version/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function Page() {
+  redirect('/admin?tab=version');
+}

app/(main)/global-error.tsx

@@ -44,7 +44,7 @@ export default function GlobalError({
               onClick={reset}
               className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
             >
-              <RefreshCw className="w-4 h-4 mr-2" />
+              <RefreshCw className="w-4 h-4 me-2" />
               Try again
             </button>
           </div>

app/(main)/layout.tsx

@@ -0,0 +1,141 @@
+import type { Metadata, Viewport } from "next";
+import { getLocaleDirection } from "@/i18n/direction";
+import { Geist, Geist_Mono } from "next/font/google";
+import { headers } from "next/headers";
+import { getLocale, getTranslations } from "next-intl/server";
+import { ServiceWorkerRegistration } from "@/components/service-worker-registration";
+import { FaviconBadge } from "@/components/favicon-badge";
+import { configManager } from "@/lib/admin/config-manager";
+import {
+  matchDomainBranding,
+  parseDomainBranding,
+  pickRequestHost,
+} from "@/lib/admin/domain-branding";
+import { withBasePath } from "@/lib/browser-navigation";
+import { locales } from "@/i18n/routing";
+import "../globals.css";
+
+// This layout renders <html> and sits ABOVE the [locale] segment, so
+// next-intl's getLocale() returns the default locale here - emitting
+// <html lang="en"> on e.g. /de pages, which makes browsers offer to
+// "translate this page". Recover the active locale from the request pathname
+// (exposed by proxy.ts as x-pathname), falling back to getLocale() (cookie /
+// Accept-Language) when the path carries no locale segment.
+async function resolveRequestLocale(): Promise<string> {
+  const pathname = (await headers()).get("x-pathname") || "";
+  const seg = pathname.split("/").find((s) => (locales as readonly string[]).includes(s));
+  return seg ?? (await getLocale());
+}
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  viewportFit: "cover",
+};
+
+export async function generateMetadata(): Promise<Metadata> {
+  await configManager.ensureLoaded();
+  // The <head> favicon must honor per-domain branding, exactly like
+  // /api/config, app/manifest.ts, and /api/pwa-icon already do. Resolve the
+  // request host and prefer its override; fall back to the global
+  // admin/env/default value when the host has no favicon override (#585).
+  const host = pickRequestHost(await headers());
+  const domainOverride = matchDomainBranding(
+    host,
+    parseDomainBranding(configManager.get<unknown>("domainBranding", [])),
+  ).faviconUrl;
+  const faviconUrl =
+    domainOverride && domainOverride.length > 0
+      ? domainOverride
+      : configManager.get<string>("faviconUrl", "/branding/Bulwark_Favicon.svg");
+  // Localize the <head> description to match the UI language; a hardcoded
+  // English description is another signal that makes Chrome offer to
+  // "translate this page". Resolve the locale from the request path, since this
+  // layout is above the [locale] segment (see resolveRequestLocale).
+  const locale = await resolveRequestLocale();
+  const t = await getTranslations({ locale });
+
+  return {
+    title: process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || "Webmail",
+    description: t("meta_description"),
+    // A private webmail should not be indexed by search engines. This is opt-in
+    // via Settings -> General; the default (false) emits noindex/nofollow.
+    robots: configManager.get<boolean>("searchEngineIndexing", false)
+      ? { index: true, follow: true }
+      : { index: false, follow: false },
+    appleWebApp: {
+      capable: true,
+      statusBarStyle: "black-translucent",
+      title: process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || "Webmail",
+    },
+    formatDetection: {
+      telephone: false,
+    },
+    icons: { icon: withBasePath(faviconUrl) },
+  };
+}
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const locale = await resolveRequestLocale();
+  const nonce = (await headers()).get("x-nonce") ?? "";
+  const parentOrigin = process.env.NEXT_PUBLIC_PARENT_ORIGIN || "";
+
+  return (
+    <html lang={locale} dir={getLocaleDirection(locale)} suppressHydrationWarning>
+      <head>
+        <meta name="theme-color" content="#ffffff" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta
+          name="apple-mobile-web-app-title"
+          content={process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || "Webmail"}
+        />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+        {parentOrigin && (
+          <meta name="parent-origin" content={parentOrigin} />
+        )}
+        <script
+          nonce={nonce}
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  const stored = localStorage.getItem('theme-storage');
+                  const theme = stored ? JSON.parse(stored).state.theme : 'system';
+                  const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                  const resolved = theme === 'system' ? systemTheme : theme;
+                  document.documentElement.classList.remove('light', 'dark');
+                  document.documentElement.classList.add(resolved);
+                } catch (e) {
+                  document.documentElement.classList.add('light');
+                }
+              })();
+            `,
+          }}
+        />
+      </head>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <ServiceWorkerRegistration />
+        <FaviconBadge />
+        {children}
+      </body>
+    </html>
+  );
+}

app/(main)/not-found.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useEffect } from "react";
+import { useAuthStore } from "@/stores/auth-store";
+import { getPathPrefix } from "@/lib/browser-navigation";
+
+export default function NotFound() {
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      const prefix = getPathPrefix();
+      // Don't redirect admin routes to the webmail login page. Admin paths
+      // are mounted relative to the deployment prefix, so account for it.
+      const adminBase = `${prefix}/admin`;
+      const isAdminRoute = window.location.pathname === adminBase || window.location.pathname.startsWith(`${adminBase}/`);
+      if (!isAdminRoute) {
+        window.location.href = `${prefix}/login`;
+      }
+    }
+  }, [isAuthenticated]);
+
+  if (!isAuthenticated) {
+    let isAdmin = false;
+    if (typeof window !== 'undefined') {
+      const prefix = getPathPrefix();
+      const adminBase = `${prefix}/admin`;
+      isAdmin = window.location.pathname === adminBase || window.location.pathname.startsWith(`${adminBase}/`);
+    }
+    if (!isAdmin) return null;
+  }
+
+  const prefix = typeof window !== 'undefined' ? getPathPrefix() : '';
+
+  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={`${prefix}/`}
+          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>
+  );
+}

app/(main)/protocol/mailto/page.tsx

@@ -0,0 +1,8 @@
+import { getTranslations } from "next-intl/server";
+import { MailtoProtocolClient } from "@/components/protocol/mailto-protocol-client";
+
+export default async function MailtoProtocolPage() {
+  const t = await getTranslations("protocol_handlers");
+
+  return <MailtoProtocolClient openingText={t("opening_mailto")} />;
+}

app/(main)/protocol/webcal/page.tsx

@@ -0,0 +1,8 @@
+import { getTranslations } from "next-intl/server";
+import { WebcalProtocolClient } from "@/components/protocol/webcal-protocol-client";
+
+export default async function WebcalProtocolPage() {
+  const t = await getTranslations("protocol_handlers");
+
+  return <WebcalProtocolClient openingText={t("opening_webcal")} />;
+}

app/(main)/setup/layout.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+
+export default function SetupLayout({ children }: { children: ReactNode }) {
+  return <div className="min-h-screen bg-background text-foreground">{children}</div>;
+}

app/(sandbox)/layout.tsx

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

app/(sandbox)/plugin-sandbox-privileged/page.tsx

@@ -0,0 +1,15 @@
+import { SandboxRuntime } from '@/lib/plugin-sandbox/runtime';
+
+// Privileged-tier sandbox route. Identical runtime to /plugin-sandbox, but the
+// host loads it into a same-origin (`allow-same-origin`) iframe so the bundle
+// gets real `crypto.subtle` + IndexedDB. The trust gate (signature + admin
+// approval) is enforced host-side before this route is ever framed; the page
+// itself carries no extra privilege.
+//
+// Must be dynamic so the per-request CSP nonce from proxy.ts is embedded in
+// Next's injected hydration/chunk scripts.
+export const dynamic = 'force-dynamic';
+
+export default function PrivilegedPluginSandboxPage() {
+  return <SandboxRuntime />;
+}

app/(sandbox)/plugin-sandbox/page.tsx

@@ -0,0 +1,10 @@
+import { SandboxRuntime } from '@/lib/plugin-sandbox/runtime';
+
+// Must be dynamic so the per-request CSP nonce from proxy.ts is embedded in
+// Next's injected hydration/chunk scripts. With force-static, those scripts
+// render without a nonce and the strict sandbox CSP blocks them.
+export const dynamic = 'force-dynamic';
+
+export default function PluginSandboxPage() {
+  return <SandboxRuntime />;
+}

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

@@ -1,123 +0,0 @@
-"use client";
-
-import { Suspense, useEffect, useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useTranslations } from "next-intl";
-import { useAuthStore } from "@/stores/auth-store";
-import { Loader2, AlertCircle } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { useParams } from "next/navigation";
-
-function OAuthCallbackInner() {
-  const router = useRouter();
-  const params = useParams();
-  const searchParams = useSearchParams();
-  const t = useTranslations("login");
-  const { loginWithOAuth } = useAuthStore();
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const code = searchParams.get("code");
-    const state = searchParams.get("state");
-    const errorParam = searchParams.get("error");
-
-    if (errorParam) {
-      setError(errorParam === "access_denied" ? "access_denied" : "token_exchange_failed");
-      return;
-    }
-
-    if (!code) {
-      setError("missing_params");
-      return;
-    }
-
-    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 (!codeVerifier || !serverUrl) {
-      setError("missing_params");
-      return;
-    }
-
-    const redirectUri = `${window.location.origin}/${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 = `/${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");
-      });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  if (error) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
-        <div className="w-full max-w-sm mx-auto px-4 text-center">
-          <div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-red-500/10 mb-6">
-            <AlertCircle className="w-10 h-10 text-red-500" />
-          </div>
-          <h1 className="text-xl font-medium text-foreground mb-2">
-            {t("oauth_error.title")}
-          </h1>
-          <p className="text-muted-foreground text-sm mb-6">
-            {t(`oauth_error.${error}`)}
-          </p>
-          <Button
-            variant="outline"
-            onClick={() => router.push(`/${params.locale}/login`)}
-          >
-            {t("oauth_error.back_to_login")}
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
-      <div className="w-full max-w-sm mx-auto px-4 text-center" role="status">
-        <Loader2 className="w-8 h-8 animate-spin text-primary mx-auto mb-4" />
-        <p className="text-muted-foreground text-sm">{t("oauth_completing")}</p>
-      </div>
-    </div>
-  );
-}
-
-export default function OAuthCallbackPage() {
-  return (
-    <Suspense
-      fallback={
-        <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
-          <div className="w-full max-w-sm mx-auto px-4 text-center" role="status">
-            <Loader2 className="w-8 h-8 animate-spin text-primary mx-auto mb-4" />
-          </div>
-        </div>
-      }
-    >
-      <OAuthCallbackInner />
-    </Suspense>
-  );
-}

app/[locale]/calendar/page.tsx

@@ -1,912 +0,0 @@
-"use client";
-
-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,
-  startOfDay, format, parseISO,
-} from "date-fns";
-import { useCalendarStore } from "@/stores/calendar-store";
-import { isCalendarViewMode } from "@/stores/calendar-store";
-import { useAuthStore } 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 { MiniCalendar } from "@/components/calendar/mini-calendar";
-import { CalendarSidebarPanel } from "@/components/calendar/calendar-sidebar-panel";
-import { EventModal, type PendingEventPreview } from "@/components/calendar/event-modal";
-import { EventDetailPopover } from "@/components/calendar/event-detail-popover";
-import { 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 { cn } from "@/lib/utils";
-import type { CalendarEvent, CalendarParticipant } from "@/lib/jmap/types";
-import { getUserParticipantId } from "@/lib/calendar-participants";
-import { debug } from "@/lib/debug";
-
-type PendingScopeAction =
-  | { type: "edit"; event: CalendarEvent; updates: Partial<CalendarEvent>; sendScheduling?: boolean }
-  | { type: "delete"; event: CalendarEvent; sendScheduling?: boolean };
-
-function isRecurringEvent(event: CalendarEvent): boolean {
-  return (event.recurrenceRules?.length ?? 0) > 0 || event.recurrenceId != null;
-}
-
-export default function CalendarPage() {
-  const router = useRouter();
-  const t = useTranslations("calendar");
-  const isMobile = useIsMobile();
-  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, updateCalendar,
-    refreshAllSubscriptions,
-  } = useCalendarStore();
-  const { firstDayOfWeek, timeFormat } = useSettingsStore();
-  const { identities } = useIdentityStore();
-  const normalizedViewMode = isCalendarViewMode(viewMode) ? viewMode : "month";
-
-  const currentUserEmails = useMemo(() =>
-    identities.map(id => id.email).filter(Boolean),
-    [identities]
-  );
-
-  const [showEventModal, setShowEventModal] = useState(false);
-  const [showImportModal, setShowImportModal] = useState(false);
-  const [showSubscriptionModal, setShowSubscriptionModal] = useState(false);
-  const [editEvent, setEditEvent] = useState<CalendarEvent | null>(null);
-  const [defaultModalDate, setDefaultModalDate] = useState<Date | undefined>();
-  const [defaultModalEndDate, setDefaultModalEndDate] = useState<Date | undefined>();
-  const [miniMonth, setMiniMonth] = useState(new Date());
-  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 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(() => {
-    checkAuth().finally(() => {
-      setInitialCheckDone(true);
-    });
-  }, [checkAuth]);
-
-  useEffect(() => {
-    if (initialCheckDone && !isAuthenticated && !authLoading) {
-      try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
-      router.push("/login");
-    } else if (client && !supportsCalendar) {
-      router.push("/");
-    }
-  }, [initialCheckDone, isAuthenticated, authLoading, client, supportsCalendar, router]);
-
-  useEffect(() => {
-    if (error) {
-      toast.error(error);
-    }
-  }, [error]);
-
-  useEffect(() => {
-    if (client && !hasFetched.current) {
-      hasFetched.current = true;
-      fetchCalendars(client);
-    }
-  }, [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 (normalizedViewMode) {
-      case "month": {
-        const ms = startOfMonth(d);
-        const me = endOfMonth(d);
-        return {
-          start: format(startOfWeek(ms, { weekStartsOn: firstDayOfWeek }), "yyyy-MM-dd'T'00:00:00"),
-          end: format(endOfWeek(me, { weekStartsOn: firstDayOfWeek }), "yyyy-MM-dd'T'23:59:59"),
-        };
-      }
-      case "week": {
-        const ws = startOfWeek(d, { weekStartsOn: firstDayOfWeek });
-        return {
-          start: format(ws, "yyyy-MM-dd'T'00:00:00"),
-          end: format(addDays(ws, 6), "yyyy-MM-dd'T'23:59:59"),
-        };
-      }
-      case "day":
-        return {
-          start: format(d, "yyyy-MM-dd'T'00:00:00"),
-          end: format(d, "yyyy-MM-dd'T'23:59:59"),
-        };
-      case "agenda": {
-        // Agenda always starts from today at the earliest
-        const today = startOfDay(new Date());
-        const agendaStart = d >= today ? d : today;
-        return {
-          start: format(agendaStart, "yyyy-MM-dd'T'00:00:00"),
-          end: format(addDays(agendaStart, 30), "yyyy-MM-dd'T'23:59:59"),
-        };
-      }
-    }
-  }, [selectedDate, normalizedViewMode, firstDayOfWeek]);
-
-  useEffect(() => {
-    if (client && calendars.length > 0 && dateRange) {
-      fetchEvents(client, dateRange.start, dateRange.end);
-    }
-  }, [client, calendars.length, dateRange, fetchEvents]);
-
-  const navigatePrev = useCallback(() => {
-    let next: Date;
-    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;
-    }
-    setSelectedDate(next);
-    setMiniMonth(next);
-  }, [normalizedViewMode, selectedDate, setSelectedDate]);
-
-  const navigateNext = useCallback(() => {
-    let next: Date;
-    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;
-    }
-    setSelectedDate(next);
-    setMiniMonth(next);
-  }, [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;
-    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) navigatePrev();
-      else navigateNext();
-    }
-  }, [isMobile, navigatePrev, navigateNext]);
-
-  const handleSelectDate = useCallback((date: Date) => {
-    setSelectedDate(date);
-    setMiniMonth(date);
-    // On mobile month view, tapping a date switches to day view
-    if (isMobile && normalizedViewMode === "month") {
-      setViewMode("day");
-    }
-  }, [setSelectedDate, isMobile, normalizedViewMode, setViewMode]);
-
-  const handleMiniMonthChange = useCallback((date: Date) => {
-    setMiniMonth(date);
-    setSelectedDate(date);
-  }, [setSelectedDate]);
-
-  const openCreateModal = useCallback((date?: Date, endDate?: Date) => {
-    setEditEvent(null);
-    const d = date || selectedDate;
-    setDefaultModalDate(d);
-    setDefaultModalEndDate(endDate);
-    setSelectedDate(d);
-    setShowEventModal(true);
-  }, [selectedDate, setSelectedDate]);
-
-  const openEditModal = useCallback((event: CalendarEvent) => {
-    setEditEvent(event);
-    setDefaultModalDate(undefined);
-    setShowEventModal(true);
-  }, []);
-
-  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 (hoverTimerRef.current) { clearTimeout(hoverTimerRef.current); hoverTimerRef.current = null; }
-    // Don't show hover popover if the sidebar is already open for this event
-    if (showEventModal && editEvent?.id === event.id) return;
-    setDetailEvent(event);
-    setDetailAnchorRect(anchorRect);
-  }, [isMobile, showEventModal, editEvent]);
-
-  const handleHoverLeave = useCallback(() => {
-    hoverTimerRef.current = setTimeout(() => {
-      setDetailEvent(null);
-      setDetailAnchorRect(null);
-    }, 200);
-  }, []);
-
-  const handleEditFromDetail = useCallback(() => {
-    if (detailEvent) {
-      const ev = detailEvent;
-      closeDetail();
-      openEditModal(ev);
-    }
-  }, [detailEvent, closeDetail, openEditModal]);
-
-  const findMasterEvent = useCallback(async (occurrence: CalendarEvent): Promise<CalendarEvent | null> => {
-    if ((occurrence.recurrenceRules?.length ?? 0) > 0 && !occurrence.recurrenceId) {
-      return occurrence;
-    }
-    const master = events.find(e =>
-      e.uid === occurrence.uid && !e.recurrenceId && (e.recurrenceRules?.length ?? 0) > 0
-    );
-    if (master) return master;
-    if (!client) return null;
-    try {
-      const results = await client.queryCalendarEvents({ uid: occurrence.uid });
-      return results.find(e => !e.recurrenceId && (e.recurrenceRules?.length ?? 0) > 0) || null;
-    } catch (error) {
-      debug.error("Failed to query master event for UID:", occurrence.uid, error);
-      throw error;
-    }
-  }, [events, client]);
-
-  const refetchCurrentRange = useCallback(async () => {
-    if (!client) return;
-    const { dateRange: currentRange } = useCalendarStore.getState();
-    if (currentRange) {
-      await fetchEvents(client, currentRange.start, currentRange.end);
-    }
-  }, [client, fetchEvents]);
-
-  const handleSaveEvent = useCallback(async (data: Partial<CalendarEvent>, sendSchedulingMessages?: boolean) => {
-    if (!client) { toast.error(t("notifications.event_error")); return; }
-    try {
-      if (editEvent) {
-        if (isRecurringEvent(editEvent)) {
-          setPendingScopeAction({
-            type: "edit",
-            event: editEvent,
-            updates: data,
-            sendScheduling: sendSchedulingMessages,
-          });
-          setShowEventModal(false);
-          setEditEvent(null);
-          return;
-        }
-        await updateEvent(client, editEvent.id, data, sendSchedulingMessages);
-        toast.success(t("notifications.event_updated"));
-      } else {
-        const created = await createEvent(client, data, sendSchedulingMessages);
-        if (!created) {
-          toast.error(t("notifications.event_error"));
-          return;
-        }
-        if (sendSchedulingMessages) {
-          toast.success(t("notifications.invitation_sent"));
-        } else {
-          toast.success(t("notifications.event_created"));
-        }
-      }
-      setShowEventModal(false);
-      setEditEvent(null);
-    } catch {
-      toast.error(t("notifications.event_error"));
-    }
-  }, [client, editEvent, createEvent, updateEvent, t]);
-
-  const handleDuplicateEvent = useCallback(async (data: Partial<CalendarEvent>) => {
-    if (!client) { toast.error(t("notifications.event_error")); return; }
-    try {
-      const created = await createEvent(client, data);
-      if (!created) {
-        toast.error(t("notifications.event_error"));
-        return;
-      }
-      toast.success(t("notifications.event_duplicated"));
-      setEditEvent(created);
-      setDefaultModalDate(undefined);
-    } catch {
-      toast.error(t("notifications.event_error"));
-      setShowEventModal(false);
-      setEditEvent(null);
-    }
-  }, [client, createEvent, t]);
-
-  const handleDeleteEvent = useCallback(async (id: string, sendSchedulingMessages?: boolean) => {
-    if (!client) { toast.error(t("notifications.event_error")); return; }
-    const eventToDelete = events.find(e => e.id === id) || editEvent;
-    if (eventToDelete && isRecurringEvent(eventToDelete)) {
-      setPendingScopeAction({
-        type: "delete",
-        event: eventToDelete,
-        sendScheduling: sendSchedulingMessages || undefined,
-      });
-      setShowEventModal(false);
-      setEditEvent(null);
-      return;
-    }
-    try {
-      await deleteEvent(client, id, sendSchedulingMessages);
-      toast.success(t("notifications.event_deleted"));
-    } catch {
-      toast.error(t("notifications.event_error"));
-    }
-  }, [client, deleteEvent, events, editEvent, t]);
-
-  const truncateRecurrenceAtEvent = useCallback(async (event: CalendarEvent): Promise<{
-    master: CalendarEvent;
-    originalRules: CalendarEvent["recurrenceRules"];
-  } | null> => {
-    const master = await findMasterEvent(event);
-    if (!master) return null;
-    const originalRules = master.recurrenceRules
-      ? JSON.parse(JSON.stringify(master.recurrenceRules))
-      : null;
-    const occurrenceDate = event.recurrenceId || event.start;
-    const untilDate = new Date(occurrenceDate);
-    untilDate.setSeconds(untilDate.getSeconds() - 1);
-    const until = format(untilDate, "yyyy-MM-dd'T'HH:mm:ss");
-    const truncatedRules = (master.recurrenceRules || []).map(rule => ({
-      ...rule,
-      until,
-      count: null,
-    }));
-    await updateEvent(client!, master.id, { recurrenceRules: truncatedRules });
-    return { master, originalRules };
-  }, [client, findMasterEvent, updateEvent]);
-
-  const handleScopeSelect = useCallback(async (scope: RecurrenceEditScope) => {
-    if (!client || !pendingScopeAction) { toast.error(t("notifications.event_error")); return; }
-    const { type, event, sendScheduling } = pendingScopeAction;
-    const updates = type === "edit" ? pendingScopeAction.updates : undefined;
-    setPendingScopeAction(null);
-
-    try {
-      if (type === "edit" && updates) {
-        switch (scope) {
-          case "this":
-            await updateEvent(client, event.id, updates, sendScheduling);
-            break;
-          case "this_and_future": {
-            const result = await truncateRecurrenceAtEvent(event);
-            if (!result) {
-              toast.error(t("notifications.event_error"));
-              return;
-            }
-            const { master, originalRules } = result;
-            const occurrenceStart = event.recurrenceId || event.start;
-            const newEventData: Partial<CalendarEvent> = {
-              title: master.title,
-              description: master.description,
-              duration: master.duration,
-              timeZone: master.timeZone,
-              calendarIds: { ...master.calendarIds },
-              status: master.status,
-              freeBusyStatus: master.freeBusyStatus,
-              privacy: master.privacy,
-              showWithoutTime: master.showWithoutTime,
-              recurrenceRules: originalRules,
-              ...updates,
-              start: updates.start || occurrenceStart,
-            };
-            delete (newEventData as Record<string, unknown>).id;
-            delete (newEventData as Record<string, unknown>).uid;
-            delete (newEventData as Record<string, unknown>).recurrenceId;
-            try {
-              await createEvent(client, newEventData, sendScheduling);
-            } catch (createError) {
-              debug.error("Failed to create new series, rolling back master truncation:", createError);
-              try {
-                await updateEvent(client, master.id, { recurrenceRules: originalRules });
-              } catch (rollbackError) {
-                debug.error("Rollback of master event also failed:", rollbackError);
-              }
-              throw createError;
-            }
-            break;
-          }
-          case "all": {
-            const master = await findMasterEvent(event);
-            if (!master) {
-              toast.error(t("notifications.event_error"));
-              return;
-            }
-            const allUpdates = { ...updates };
-            delete (allUpdates as Record<string, unknown>).recurrenceId;
-            await updateEvent(client, master.id, allUpdates, sendScheduling);
-            break;
-          }
-          default: {
-            const _exhaustive: never = scope;
-            throw new Error(`Unhandled scope: ${_exhaustive}`);
-          }
-        }
-        toast.success(t("notifications.event_updated"));
-      } else {
-        switch (scope) {
-          case "this":
-            await deleteEvent(client, event.id, sendScheduling);
-            break;
-          case "this_and_future": {
-            const result = await truncateRecurrenceAtEvent(event);
-            if (!result) {
-              toast.error(t("notifications.event_error"));
-              return;
-            }
-            break;
-          }
-          case "all": {
-            const master = await findMasterEvent(event);
-            if (!master) {
-              toast.error(t("notifications.event_error"));
-              return;
-            }
-            await deleteEvent(client, master.id, sendScheduling);
-            break;
-          }
-          default: {
-            const _exhaustive: never = scope;
-            throw new Error(`Unhandled scope: ${_exhaustive}`);
-          }
-        }
-        toast.success(t("notifications.event_deleted"));
-      }
-      try {
-        await refetchCurrentRange();
-      } catch {
-        debug.error("Failed to refresh calendar after scope operation");
-      }
-    } catch {
-      toast.error(t("notifications.event_error"));
-    }
-  }, [client, pendingScopeAction, updateEvent, deleteEvent, createEvent, findMasterEvent, truncateRecurrenceAtEvent, refetchCurrentRange, t]);
-
-  const handleRsvp = useCallback(async (eventId: string, participantId: string, status: CalendarParticipant['participationStatus']) => {
-    if (!client) return;
-    try {
-      await rsvpEvent(client, eventId, participantId, status);
-      toast.success(t("notifications.rsvp_updated"));
-    } catch {
-      toast.error(t("notifications.rsvp_error"));
-    }
-  }, [client, rsvpEvent, t]);
-
-  const handleDeleteFromDetail = useCallback(() => {
-    if (!detailEvent) return;
-    const hasParticipants = detailEvent.participants && Object.keys(detailEvent.participants).length > 0;
-    closeDetail();
-    handleDeleteEvent(detailEvent.id, hasParticipants || undefined);
-  }, [detailEvent, closeDetail, handleDeleteEvent]);
-
-  const handleDuplicateFromDetail = useCallback(async () => {
-    if (!detailEvent || !client) return;
-    const start = parseISO(detailEvent.start);
-    const newStart = addDays(start, 1);
-    const data: Partial<CalendarEvent> = {
-      title: detailEvent.title,
-      description: detailEvent.description,
-      start: format(newStart, "yyyy-MM-dd'T'HH:mm:ss"),
-      duration: detailEvent.duration,
-      timeZone: detailEvent.timeZone,
-      showWithoutTime: detailEvent.showWithoutTime,
-      calendarIds: { ...detailEvent.calendarIds },
-      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);
-    if (detailEvent.participants) data.participants = structuredClone(detailEvent.participants);
-    closeDetail();
-    try {
-      const created = await createEvent(client, data);
-      if (created) {
-        toast.success(t("notifications.event_duplicated"));
-        openEditModal(created);
-      }
-    } catch {
-      toast.error(t("notifications.event_error"));
-    }
-  }, [detailEvent, client, createEvent, closeDetail, openEditModal, t]);
-
-  const handleSaveNoteFromDetail = useCallback(async (note: string) => {
-    if (!detailEvent || !client) return;
-    const timestamp = format(new Date(), "yyyy-MM-dd HH:mm");
-    const separator = `\n\n--- ${timestamp} ---\n`;
-    const newDescription = detailEvent.description
-      ? `${detailEvent.description}${separator}${note}`
-      : `--- ${timestamp} ---\n${note}`;
-    try {
-      await updateEvent(client, detailEvent.id, { description: newDescription });
-      setDetailEvent({ ...detailEvent, description: newDescription });
-      toast.success(t("detail.note_saved"));
-    } catch {
-      toast.error(t("notifications.event_error"));
-    }
-  }, [detailEvent, client, updateEvent, t]);
-
-  const handleRsvpFromDetail = useCallback(async (status: CalendarParticipant['participationStatus']) => {
-    if (!detailEvent || !client) return;
-    const participantId = getUserParticipantId(detailEvent, currentUserEmails);
-    if (!participantId) return;
-    closeDetail();
-    await handleRsvp(detailEvent.id, participantId, status);
-  }, [detailEvent, client, currentUserEmails, closeDetail, handleRsvp]);
-
-  useEffect(() => {
-    const handleKey = (e: KeyboardEvent) => {
-      const target = e.target as HTMLElement;
-      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT") return;
-      if (showEventModal || detailEvent) return;
-
-      switch (e.key) {
-        case "ArrowLeft": e.preventDefault(); navigatePrev(); break;
-        case "ArrowRight": e.preventDefault(); navigateNext(); break;
-        case "t": goToToday(); break;
-        case "m": setViewMode("month"); break;
-        case "w": setViewMode("week"); break;
-        case "d": setViewMode("day"); break;
-        case "a": setViewMode("agenda"); break;
-        case "n": openCreateModal(); break;
-      }
-    };
-    window.addEventListener("keydown", handleKey);
-    return () => window.removeEventListener("keydown", handleKey);
-  }, [navigatePrev, navigateNext, goToToday, setViewMode, openCreateModal, showEventModal, detailEvent]);
-
-  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]
-  );
-
-  if (!isAuthenticated || !supportsCalendar) return null;
-
-  const renderView = () => {
-    if (isLoading && calendars.length === 0) {
-      return (
-        <div className="flex items-center justify-center flex-1 text-muted-foreground">
-          <p className="text-sm">{t("status.loading_calendars")}</p>
-        </div>
-      );
-    }
-
-    const viewContent = (() => {
-      switch (normalizedViewMode) {
-        case "month":
-          return (
-            <CalendarMonthView
-              selectedDate={selectedDate}
-              events={visibleEvents}
-              calendars={calendars}
-              onSelectDate={handleSelectDate}
-              onSelectEvent={handleSelectEvent}
-              onHoverEvent={handleHoverEvent}
-              onHoverLeave={handleHoverLeave}
-              onCreateAtTime={openCreateModal}
-              firstDayOfWeek={firstDayOfWeek}
-              isMobile={isMobile}
-              pendingPreview={pendingPreview}
-            />
-          );
-        case "week":
-          return (
-            <CalendarWeekView
-              selectedDate={selectedDate}
-              events={visibleEvents}
-              calendars={calendars}
-              onSelectDate={handleSelectDate}
-              onSelectEvent={handleSelectEvent}
-              onHoverEvent={handleHoverEvent}
-              onHoverLeave={handleHoverLeave}
-              onCreateAtTime={openCreateModal}
-              firstDayOfWeek={firstDayOfWeek}
-              timeFormat={timeFormat}
-              isMobile={isMobile}
-              pendingPreview={pendingPreview}
-            />
-          );
-        case "day":
-          return (
-            <CalendarDayView
-              selectedDate={selectedDate}
-              events={visibleEvents}
-              calendars={calendars}
-              onSelectEvent={handleSelectEvent}
-              onHoverEvent={handleHoverEvent}
-              onHoverLeave={handleHoverLeave}
-              onCreateAtTime={openCreateModal}
-              timeFormat={timeFormat}
-              isMobile={isMobile}
-              pendingPreview={pendingPreview}
-            />
-          );
-        case "agenda":
-          return (
-            <CalendarAgendaView
-              selectedDate={selectedDate}
-              events={visibleEvents}
-              calendars={calendars}
-              onSelectEvent={handleSelectEvent}
-              onHoverEvent={handleHoverEvent}
-              onHoverLeave={handleHoverLeave}
-              timeFormat={timeFormat}
-            />
-          );
-      }
-    })();
-
-    return (
-      <div className="relative flex-1 flex flex-col overflow-hidden">
-        {viewContent}
-        {isLoadingEvents && calendars.length > 0 && events.length === 0 && (
-          <div className="absolute inset-0 bg-background/50 flex items-center justify-center pointer-events-none">
-            <div className="h-5 w-5 border-2 border-primary border-t-transparent rounded-full animate-spin" />
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  return (
-    <div className={cn("flex h-dvh bg-background overflow-hidden", isMobile && "flex-col")}>
-      {/* Left Navigation Rail */}
-      {!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(); if (!useAuthStore.getState().isAuthenticated) router.push('/login'); }}
-            onManageApps={handleManageApps}
-            onInlineApp={handleInlineApp}
-            onCloseInlineApp={closeInlineApp}
-            activeAppId={inlineApp?.id ?? null}
-          />
-        </div>
-      )}
-
-      {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}
-            />
-            <CalendarSidebarPanel
-              calendars={calendars}
-              selectedCalendarIds={selectedCalendarIds}
-              onToggleVisibility={toggleCalendarVisibility}
-              onColorChange={client ? (calendarId, color) => {
-                updateCalendar(client, calendarId, { color });
-              } : undefined}
-              onSubscribe={() => setShowSubscriptionModal(true)}
-              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={normalizedViewMode}
-          onPrev={navigatePrev}
-          onNext={navigateNext}
-          onToday={goToToday}
-          onViewModeChange={setViewMode}
-          onCreateEvent={() => openCreateModal()}
-          onImport={() => setShowImportModal(true)}
-          onSubscribe={() => setShowSubscriptionModal(true)}
-          isMobile={isMobile}
-          calendars={calendars}
-          selectedCalendarIds={selectedCalendarIds}
-          onToggleVisibility={toggleCalendarVisibility}
-        />
-
-        <div
-          className="flex flex-1 overflow-hidden relative"
-          data-tour="calendar-view"
-          onTouchStart={handleTouchStart}
-          onTouchEnd={handleTouchEnd}
-        >
-          {renderView()}
-
-          {/* 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}
-                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>
-          )}
-
-          {/* 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
-          event={detailEvent}
-          calendar={calendars.find(c => detailEvent.calendarIds[c.id])}
-          anchorRect={detailAnchorRect}
-          onEdit={handleEditFromDetail}
-          onDelete={handleDeleteFromDetail}
-          onDuplicate={handleDuplicateFromDetail}
-          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 && isMobile && (
-        <EventModal
-          key={editEvent?.id ?? 'new'}
-          event={editEvent}
-          calendars={calendars}
-          defaultDate={defaultModalDate}
-          defaultEndDate={defaultModalEndDate}
-          onSave={handleSaveEvent}
-          onDelete={handleDeleteEvent}
-          onDuplicate={handleDuplicateEvent}
-          onRsvp={handleRsvp}
-          onClose={() => { setShowEventModal(false); setEditEvent(null); }}
-          currentUserEmails={currentUserEmails}
-          isMobile={true}
-        />
-      )}
-
-      {showImportModal && client && (
-        <ICalImportModal
-          calendars={calendars}
-          client={client}
-          onClose={() => setShowImportModal(false)}
-        />
-      )}
-
-      {showSubscriptionModal && client && (
-        <ICalSubscriptionModal
-          client={client}
-          onClose={() => setShowSubscriptionModal(false)}
-        />
-      )}
-
-      <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
-      <RecurrenceScopeDialog
-        isOpen={!!pendingScopeAction}
-        actionType={pendingScopeAction?.type || "edit"}
-        onSelect={handleScopeSelect}
-        onClose={() => setPendingScopeAction(null)}
-      />
-    </div>
-  );
-}

app/[locale]/layout.tsx

@@ -1,37 +0,0 @@
-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 { TourProvider } from "@/components/tour/tour-provider";
-import { locales } from "@/i18n/routing";
-
-export default async function LocaleLayout({
-  children,
-  params,
-}: {
-  children: React.ReactNode;
-  params: Promise<{ locale: string }>;
-}) {
-  const { locale } = await params;
-
-  if (!(locales as readonly string[]).includes(locale)) notFound();
-
-  let messages;
-  try {
-    messages = (await import(`@/locales/${locale}/common.json`)).default;
-  } catch {
-    notFound();
-  }
-
-  return (
-    <IntlProvider locale={locale} messages={messages}>
-      <ThemeProvider>
-        <CalendarAlertProvider>
-          <TourProvider>
-            {children}
-          </TourProvider>
-        </CalendarAlertProvider>
-      </ThemeProvider>
-    </IntlProvider>
-  );
-}

app/[locale]/settings/page.tsx

@@ -1,425 +0,0 @@
-"use client";
-
-import { useState, useEffect, useRef } from 'react';
-import { useRouter } from '@/i18n/navigation';
-import { useTranslations } from 'next-intl';
-import {
-  ArrowLeft,
-  ChevronRight,
-  LogOut,
-  Settings as SettingsIcon,
-  Palette,
-  Mail,
-  User,
-  Shield,
-  UserPen,
-  PalmtreeIcon,
-  Calendar,
-  Filter,
-  FileText,
-  FolderOpen,
-  Tags,
-  HardDrive,
-  Wrench,
-  BookUser,
-  KeyRound,
-  PanelLeftClose,
-  type LucideIcon,
-} from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { AppearanceSettings } from '@/components/settings/appearance-settings';
-import { EmailSettings } from '@/components/settings/email-settings';
-import { 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 { 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 { useAuthStore } 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 { cn } from '@/lib/utils';
-
-type Tab = 'appearance' | 'email' | 'account' | 'security' | 'identities' | 'encryption' | 'vacation' | 'calendar' | 'contacts' | 'filters' | 'templates' | 'folders' | 'keywords' | 'files' | 'sidebar_apps' | 'advanced';
-type TabGroup = 'general' | 'account' | 'organization' | 'apps' | 'system';
-
-interface TabDef {
-  id: Tab;
-  label: string;
-  icon: LucideIcon;
-  group: TabGroup;
-}
-
-const tabIcons: Record<Tab, LucideIcon> = {
-  appearance: Palette,
-  email: Mail,
-  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,
-  advanced: Wrench,
-};
-
-const tabGroupOrder: TabGroup[] = ['general', 'account', 'organization', 'apps', 'system'];
-
-export default function SettingsPage() {
-  const router = useRouter();
-  const t = useTranslations('settings');
-  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 [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]);
-
-  useEffect(() => {
-    if (initialCheckDone && !isAuthenticated && !authLoading) {
-      try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
-      router.push('/login');
-    }
-  }, [initialCheckDone, isAuthenticated, authLoading, router]);
-
-  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: TabDef[] = [
-    { id: 'appearance', label: t('tabs.appearance'), icon: tabIcons.appearance, group: 'general' },
-    { id: 'email', label: t('tabs.email'), icon: tabIcons.email, group: 'general' },
-    { id: 'account', label: t('tabs.account'), icon: tabIcons.account, group: 'account' },
-    ...(stalwartFeaturesEnabled ? [{ id: 'security' as Tab, label: t('tabs.security'), icon: tabIcons.security, group: 'account' as TabGroup }] : []),
-    { id: 'identities', label: t('tabs.identities'), icon: tabIcons.identities, group: 'account' },
-    { id: 'encryption', label: t('tabs.encryption'), icon: tabIcons.encryption, group: 'account' },
-    ...(supportsVacation ? [{ id: 'vacation' as Tab, label: t('tabs.vacation'), icon: tabIcons.vacation, group: 'account' as TabGroup }] : []),
-    ...(supportsSieve ? [{ id: 'filters' as Tab, label: t('tabs.filters'), icon: tabIcons.filters, group: 'organization' as TabGroup }] : []),
-    { id: 'templates', label: t('tabs.templates'), icon: tabIcons.templates, group: 'organization' },
-    { id: 'folders', label: t('tabs.folders'), icon: tabIcons.folders, group: 'organization' },
-    { id: 'keywords', label: t('tabs.keywords'), icon: tabIcons.keywords, group: 'organization' },
-    ...(supportsCalendar ? [{ id: 'calendar' as Tab, label: t('tabs.calendar'), icon: tabIcons.calendar, group: 'apps' as TabGroup }] : []),
-    { id: 'contacts', label: t('tabs.contacts'), icon: tabIcons.contacts, group: 'apps' },
-    ...(supportsFiles ? [{ id: 'files' as Tab, label: t('tabs.files'), icon: tabIcons.files, group: 'apps' as TabGroup }] : []),
-    { id: 'sidebar_apps', label: t('tabs.sidebar_apps'), icon: tabIcons.sidebar_apps, group: 'apps' },
-    { 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 === '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 === '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}
-                      </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(); if (!useAuthStore.getState().isAuthenticated) router.push('/login'); }}
-              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-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(); if (!useAuthStore.getState().isAuthenticated) router.push('/login'); }}
-          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={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
-            variant="ghost"
-            size="sm"
-            onClick={() => router.push('/')}
-            className="w-full justify-start"
-          >
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            {t('back_to_mail')}
-          </Button>
-        </div>
-
-        {/* Tabs */}
-        <div className="flex-1 overflow-y-auto py-2" data-tour="settings-tabs">
-          <div className="px-2 space-y-0.5">
-            {groupedTabs.map((group, groupIndex) => (
-              <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}
-                    </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-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">
-            {renderTabContent()}
-          </div>
-        </div>
-      </div>
-      </>
-      )}
-      <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
-    </div>
-  );
-}

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

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

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

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

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

@@ -0,0 +1,77 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { logger } from '@/lib/logger';
+import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+import { JmapRedirectError, fetchJmapSession, postJmap, rebaseApiUrl } from '@/lib/stalwart/jmap-api';
+
+/**
+ * POST /api/account/stalwart/jmap
+ *
+ * Passthrough to Stalwart's JMAP endpoint using the stored basic-auth
+ * context so the browser does not need access to the user's credentials.
+ *
+ * Body: standard JMAP request `{ using: string[], methodCalls: [...] }`
+ *
+ * In Stalwart 0.16 all management operations (password change, app
+ * passwords, API keys, account settings, etc.) are exposed as JMAP
+ * methods under the `x:` namespace on the same endpoint.
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) {
+      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    const body = await request.text();
+
+    const directUrl = `${creds.serverUrl}/jmap/`;
+    let response = await postJmap(directUrl, creds.authHeader, body);
+
+    if (response.status === 404) {
+      // `${serverUrl}/jmap/` is not the API endpoint on this deployment
+      // (path prefix, non-Stalwart URL layout). Resolve the session's
+      // advertised apiUrl on the same host and retry once.
+      const session = await fetchJmapSession(creds.serverUrl, creds.authHeader);
+      const apiUrl = rebaseApiUrl(session, creds.serverUrl);
+      if (apiUrl && apiUrl !== directUrl) {
+        response = await postJmap(apiUrl, creds.authHeader, body);
+      }
+    }
+
+    if (!response.ok) {
+      logger.warn('Stalwart JMAP passthrough upstream error', {
+        status: response.status,
+        serverUrl: creds.serverUrl,
+      });
+    }
+
+    const responseText = await response.text();
+    return new NextResponse(responseText, {
+      status: response.status,
+      headers: { 'Content-Type': response.headers.get('Content-Type') || 'application/json' },
+    });
+  } catch (error) {
+    if (error instanceof JmapRedirectError) {
+      logger.error('Stalwart JMAP passthrough redirect error', { error: error.message });
+      return NextResponse.json({ error: error.message }, { status: 502 });
+    }
+    // `fetch failed` from undici is too generic to debug — the real reason
+    // (ENOTFOUND, ECONNREFUSED, self-signed TLS, …) lives on `error.cause`.
+    const err = error as Error & { cause?: { code?: string; message?: string } };
+    logger.error('Stalwart JMAP passthrough error', {
+      error: err?.message ?? 'Unknown',
+      causeCode: err?.cause?.code,
+      causeMessage: err?.cause?.message,
+    });
+    // The server this process failed to reach is the user's own mail server,
+    // so the reason is worth surfacing: an opaque 500 leaves operators with
+    // nothing to act on.
+    if (err?.cause?.code) {
+      return NextResponse.json(
+        { error: `Cannot reach the JMAP server (${err.cause.code})` },
+        { status: 502 },
+      );
+    }
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

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

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

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

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

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

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

app/api/admin/audit/route.ts

@@ -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(request);
+    if ('error' in result) return result.error;
+
+    const page = Math.max(1, parseInt(request.nextUrl.searchParams.get('page') || '1', 10));
+    const limit = Math.min(200, Math.max(1, parseInt(request.nextUrl.searchParams.get('limit') || '50', 10)));
+    const action = request.nextUrl.searchParams.get('action') || undefined;
+
+    const { entries, total } = await readAuditLog(page, limit, action);
+
+    return NextResponse.json({ entries, total, page, limit }, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+  } catch (error) {
+    logger.error('Audit log read error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

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

@@ -0,0 +1,77 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { readFile, stat } from 'node:fs/promises';
+import path from 'node:path';
+import { getConfigDir } from '@/lib/admin/paths';
+
+function getBrandingDir(): string {
+  return path.join(getConfigDir(), '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(getBrandingDir(), safe);
+
+    // Ensure resolved path is still within getBrandingDir()
+    const resolved = path.resolve(filePath);
+    if (!resolved.startsWith(path.resolve(getBrandingDir()))) {
+      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);
+
+    // SVG can carry inline <script> and event handlers that execute when the
+    // file is fetched as a top-level document. Defense in depth on top of
+    // admin-only upload: nosniff blocks MIME confusion, the CSP forces a
+    // sandboxed unique origin so any script in an SVG is inert and cannot
+    // touch app cookies or storage.
+    return new NextResponse(buffer, {
+      headers: {
+        'Content-Type': contentType,
+        'Cache-Control': 'public, max-age=3600, must-revalidate',
+        'Content-Length': String(buffer.length),
+        'X-Content-Type-Options': 'nosniff',
+        'Content-Security-Policy':
+          "default-src 'none'; img-src 'self' data:; style-src 'unsafe-inline'; sandbox",
+      },
+    });
+  } catch {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
+}

app/api/admin/branding/route.ts

@@ -0,0 +1,277 @@
+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 { getConfigDir } from '@/lib/admin/paths';
+import {
+  parseDomainBranding,
+  type DomainBrandingEntry,
+  type BrandingOverrideKey,
+} from '@/lib/admin/domain-branding';
+import { logger } from '@/lib/logger';
+import { writeFile, unlink, mkdir, readdir } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import path from 'node:path';
+
+function getBrandingDir(): string {
+  return path.join(getConfigDir(), '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',
+]);
+
+type UploadSlot = BrandingOverrideKey;
+
+/** Slots that correspond to branding config keys */
+const VALID_SLOTS = new Set<UploadSlot>([
+  'faviconUrl',
+  'pwaIconUrl',
+  'appLogoLightUrl',
+  'appLogoDarkUrl',
+  'loginLogoLightUrl',
+  'loginLogoDarkUrl',
+  'pwaScreenshotMobileUrl',
+  'pwaScreenshotDesktopUrl',
+]);
+
+const EXT_BY_MIME: 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 POSSIBLE_EXTS = ['.svg', '.png', '.jpg', '.jpeg', '.webp', '.ico'];
+
+// Exact hostnames only (no wildcards): wildcards can't be uploaded against
+// because we'd need a real subdomain to serve the file from.
+const EXACT_HOST_RE = /^[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/;
+
+function sanitizeFilename(name: string): string {
+  // Strip directory traversal, keep only safe chars
+  return path.basename(name).replace(/[^a-zA-Z0-9._-]/g, '_');
+}
+
+function normalizeHost(raw: string): string {
+  return raw.trim().toLowerCase().replace(/\.+$/, '');
+}
+
+/** Filename used to store a per-host uploaded asset. */
+function domainAssetName(host: string, slot: BrandingOverrideKey, ext: string): string {
+  return sanitizeFilename(`domain__${host}__${slot}${ext}`);
+}
+
+/** True if the file belongs to the given host+slot (any extension). */
+function isDomainAssetFor(filename: string, host: string, slot: BrandingOverrideKey): boolean {
+  const prefix = sanitizeFilename(`domain__${host}__${slot}.`);
+  return filename.startsWith(prefix);
+}
+
+/** Merge a per-host update into the existing domainBranding array. */
+function mergeDomainEntry(
+  current: DomainBrandingEntry[],
+  host: string,
+  patch: Partial<DomainBrandingEntry>,
+): DomainBrandingEntry[] {
+  const next = current.slice();
+  const idx = next.findIndex(e => e.host === host);
+  if (idx === -1) {
+    next.push({ host, ...patch });
+  } else {
+    next[idx] = { ...next[idx], ...patch };
+  }
+  return next;
+}
+
+/** Remove keys from a host's entry. If the entry has nothing left besides
+ *  `host`, drop it entirely. */
+function clearDomainKeys(
+  current: DomainBrandingEntry[],
+  host: string,
+  keys: BrandingOverrideKey[],
+): DomainBrandingEntry[] {
+  const idx = current.findIndex(e => e.host === host);
+  if (idx === -1) return current;
+  const entry = { ...current[idx] };
+  for (const key of keys) delete (entry as Record<string, unknown>)[key];
+  const next = current.slice();
+  if (Object.keys(entry).filter(k => k !== 'host').length === 0) {
+    next.splice(idx, 1);
+  } else {
+    next[idx] = entry;
+  }
+  return next;
+}
+
+/**
+ * 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")
+ *   - host (optional): when set, the upload is stored against the
+ *     per-domain entry for that hostname instead of the global default.
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth(request);
+    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;
+    const rawHost = (formData.get('host') as string | null) ?? '';
+
+    if (!file || !slot) {
+      return NextResponse.json({ error: 'Missing file or slot' }, { status: 400 });
+    }
+
+    if (!VALID_SLOTS.has(slot as UploadSlot)) {
+      return NextResponse.json({ error: `Invalid slot: ${slot}` }, { status: 400 });
+    }
+
+    const host = rawHost ? normalizeHost(rawHost) : '';
+    if (host && !EXACT_HOST_RE.test(host)) {
+      return NextResponse.json(
+        { error: `Invalid host: ${rawHost} (wildcards must be configured by URL, not upload)` },
+        { 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 },
+      );
+    }
+
+    const ext = EXT_BY_MIME[file.type] ?? '.png';
+    const safeName = host
+      ? domainAssetName(host, slot as BrandingOverrideKey, ext)
+      : sanitizeFilename(`${slot}${ext}`);
+    const filePath = path.join(getBrandingDir(), safeName);
+
+    if (!existsSync(getBrandingDir())) {
+      await mkdir(getBrandingDir(), { recursive: true });
+    }
+
+    // Strip any prior asset for the same slot but a different extension so
+    // the directory doesn't accumulate orphan files on re-upload.
+    const dir = getBrandingDir();
+    const allFiles = await readdir(dir).catch(() => [] as string[]);
+    for (const f of allFiles) {
+      if (f === safeName) continue;
+      const isSame = host
+        ? isDomainAssetFor(f, host, slot as BrandingOverrideKey)
+        : POSSIBLE_EXTS.some(e => f === `${slot}${e}`);
+      if (isSame) {
+        try { await unlink(path.join(dir, f)); } catch { /* ignore */ }
+      }
+    }
+
+    const buffer = Buffer.from(await file.arrayBuffer());
+    await writeFile(filePath, buffer);
+
+    const servedUrl = `/api/admin/branding/${safeName}`;
+    await configManager.ensureLoaded();
+
+    if (host) {
+      const current = parseDomainBranding(configManager.get<unknown>('domainBranding', []));
+      const next = mergeDomainEntry(current, host, { [slot]: servedUrl });
+      await configManager.setAdminConfig({ domainBranding: next });
+    } else {
+      await configManager.setAdminConfig({ [slot]: servedUrl });
+    }
+
+    await auditLog('branding_upload', {
+      slot,
+      host: host || undefined,
+      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, host?: string }
+ *
+ * When `host` is provided, only the per-domain asset for that host+slot is
+ * removed (and the override in `domainBranding[host][slot]` is cleared).
+ * Otherwise the global asset and config override are removed.
+ */
+export async function DELETE(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth(request);
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const body = await request.json().catch(() => ({})) as { slot?: string; host?: string };
+    const slot = body.slot;
+    const rawHost = body.host ?? '';
+
+    if (!slot || !VALID_SLOTS.has(slot as UploadSlot)) {
+      return NextResponse.json({ error: 'Invalid or missing slot' }, { status: 400 });
+    }
+
+    const host = rawHost ? normalizeHost(rawHost) : '';
+    if (host && !EXACT_HOST_RE.test(host)) {
+      return NextResponse.json({ error: `Invalid host: ${rawHost}` }, { status: 400 });
+    }
+
+    const dir = getBrandingDir();
+    let removed = false;
+    if (host) {
+      const allFiles = await readdir(dir).catch(() => [] as string[]);
+      for (const f of allFiles) {
+        if (isDomainAssetFor(f, host, slot as BrandingOverrideKey)) {
+          try { await unlink(path.join(dir, f)); removed = true; } catch { /* ignore */ }
+        }
+      }
+    } else {
+      for (const ext of POSSIBLE_EXTS) {
+        const filePath = path.join(dir, `${slot}${ext}`);
+        if (existsSync(filePath)) {
+          await unlink(filePath);
+          removed = true;
+        }
+      }
+    }
+
+    await configManager.ensureLoaded();
+    if (host) {
+      const current = parseDomainBranding(configManager.get<unknown>('domainBranding', []));
+      const next = clearDomainKeys(current, host, [slot as BrandingOverrideKey]);
+      await configManager.setAdminConfig({ domainBranding: next });
+    } else {
+      await configManager.removeAdminOverride(slot);
+    }
+
+    await auditLog('branding_delete', { slot, host: host || undefined, fileRemoved: removed }, ip);
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    logger.error('Branding delete error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

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

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

app/api/admin/config/route.ts

@@ -0,0 +1,155 @@
+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, SENSITIVE_CONFIG_KEYS } from '@/lib/admin/types';
+import { parseJmapServers } from '@/lib/admin/jmap-servers';
+import { parseDomainBranding } from '@/lib/admin/domain-branding';
+import { logger } from '@/lib/logger';
+
+// Strings that count as "no real secret configured" - used so the dashboard
+// can warn about a placeholder session secret without us ever returning the
+// raw value to the client.
+const SENSITIVE_PLACEHOLDERS = new Set(['your-secret-key-here']);
+
+/**
+ * GET /api/admin/config - Get full config with sources (admin-protected)
+ *
+ * Sensitive keys (sessionSecret, oauthClientSecret) are returned with
+ * `value` omitted and a `hasValue` boolean instead. An admin session is
+ * enough to read every other config knob; the secrets themselves stay on
+ * the server so that an XSS or session-theft can't lift them in one
+ * request and forge admin/user session cookies offline.
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth(request);
+    if ('error' in result) return result.error;
+
+    await configManager.ensureLoaded();
+    const config = configManager.getAllWithSources();
+
+    const safe: Record<string, { value?: unknown; source: 'admin' | 'env' | 'default'; hasValue?: boolean }> = {};
+    for (const [key, entry] of Object.entries(config)) {
+      if (SENSITIVE_CONFIG_KEYS.has(key)) {
+        const v = entry.value;
+        const hasValue =
+          typeof v === 'string' && v.length > 0 && !SENSITIVE_PLACEHOLDERS.has(v);
+        safe[key] = { source: entry.source, hasValue };
+      } else {
+        safe[key] = entry;
+      }
+    }
+
+    return NextResponse.json(safe, {
+      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(request);
+    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 });
+    }
+
+    // Normalize jmapServers: pass through the parser so invalid entries are
+    // rejected (bad ids, duplicate ids, non-HTTP URLs) before they're persisted.
+    if ('jmapServers' in updates) {
+      const incoming = updates.jmapServers;
+      if (incoming != null && !Array.isArray(incoming)) {
+        return NextResponse.json({ error: 'jmapServers must be an array' }, { status: 400 });
+      }
+      const sanitized = parseJmapServers(incoming);
+      const incomingCount = Array.isArray(incoming) ? incoming.length : 0;
+      if (sanitized.length !== incomingCount) {
+        return NextResponse.json({
+          error: 'One or more jmapServers entries are invalid (each needs a unique id, label, and HTTP(S) url).',
+        }, { status: 400 });
+      }
+      updates.jmapServers = sanitized;
+    }
+
+    // Normalize domainBranding: drop entries with an invalid/missing host or
+    // duplicate hosts before persisting. Each entry's branding field strings
+    // are passed through unchanged (URL/string content is the operator's
+    // responsibility, same as the flat branding fields).
+    if ('domainBranding' in updates) {
+      const incoming = updates.domainBranding;
+      if (incoming != null && !Array.isArray(incoming)) {
+        return NextResponse.json({ error: 'domainBranding must be an array' }, { status: 400 });
+      }
+      const sanitized = parseDomainBranding(incoming);
+      const incomingCount = Array.isArray(incoming) ? incoming.length : 0;
+      if (sanitized.length !== incomingCount) {
+        return NextResponse.json({
+          error: 'One or more domainBranding entries are invalid (each needs a unique, valid host).',
+        }, { status: 400 });
+      }
+      updates.domainBranding = sanitized;
+    }
+
+    // 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(request);
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { key } = await request.json();
+
+    if (!key || typeof key !== 'string') {
+      return NextResponse.json({ error: 'Key is required' }, { status: 400 });
+    }
+
+    if (!CONFIG_ENV_MAP[key]) {
+      return NextResponse.json({ error: `Unknown config key: ${key}` }, { status: 400 });
+    }
+
+    const oldValue = configManager.get(key);
+    await configManager.removeAdminOverride(key);
+    await auditLog('config.revert', { key, oldValue }, ip);
+
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Admin config revert error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/marketplace/[slug]/route.ts

@@ -0,0 +1,229 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAdminAuth } from '@/lib/admin/session';
+import { logger } from '@/lib/logger';
+import {
+  getPluginRegistry,
+  getThemeRegistry,
+} from '@/lib/admin/plugin-registry';
+import JSZip from 'jszip';
+import { MAX_PLUGIN_SIZE, MAX_THEME_SIZE } from '@/lib/plugin-types';
+import { configManager } from '@/lib/admin/config-manager';
+
+async function getDirectoryUrl(): Promise<string> {
+  await configManager.ensureLoaded();
+  return configManager.get<string>('extensionDirectoryUrl') || 'https://extensions.bulwarkmail.org';
+}
+
+const MAX_PREVIEW_SOURCE_LEN = 100_000;
+
+/**
+ * GET /api/admin/marketplace/[slug]
+ * Returns full preview info for an extension: directory metadata,
+ * the bundle's manifest, a (truncated) source preview, and install status.
+ * Lets admins audit what they're about to install before pressing the button.
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ slug: string }> },
+) {
+  try {
+    const result = await requireAdminAuth(request);
+    if ('error' in result) return result.error;
+
+    const { slug } = await params;
+    const directoryUrl = await getDirectoryUrl();
+
+    // 1. Extension metadata + screenshots + theme previews from the directory
+    const detailUrl = new URL(`/api/v1/extension/${encodeURIComponent(slug)}`, directoryUrl);
+    const detailRes = await fetch(detailUrl.toString(), {
+      headers: { Accept: 'application/json' },
+      signal: AbortSignal.timeout(10000),
+    });
+
+    if (!detailRes.ok) {
+      const status = detailRes.status === 404 ? 404 : 502;
+      return NextResponse.json(
+        { error: status === 404 ? 'Extension not found' : 'Directory request failed' },
+        { status },
+      );
+    }
+
+    const detailJson = await detailRes.json();
+    const extension = detailJson.data as Record<string, unknown> | undefined;
+    if (!extension) {
+      return NextResponse.json({ error: 'Extension not found' }, { status: 404 });
+    }
+
+    const type = extension.type as 'plugin' | 'theme';
+    const latestVersion = (extension.latestVersion as { version?: string } | null)?.version
+      ?? null;
+
+    // 2. Pull the bundle so we can show what's actually inside.
+    let manifest: Record<string, unknown> | null = null;
+    let sourcePreview: { name: string; content: string; truncated: boolean } | null = null;
+    let bundleError: string | null = null;
+    let bundleSize = 0;
+
+    if (latestVersion) {
+      try {
+        const bundleUrl = new URL(
+          `/api/v1/bundle/${encodeURIComponent(slug)}/${encodeURIComponent(latestVersion)}`,
+          directoryUrl,
+        );
+        const bundleRes = await fetch(bundleUrl.toString(), {
+          signal: AbortSignal.timeout(30000),
+        });
+
+        if (!bundleRes.ok) {
+          bundleError = `Bundle download failed (${bundleRes.status})`;
+        } else {
+          const buffer = await bundleRes.arrayBuffer();
+          bundleSize = buffer.byteLength;
+          const maxSize = type === 'theme' ? MAX_THEME_SIZE : MAX_PLUGIN_SIZE;
+          if (buffer.byteLength > maxSize) {
+            bundleError = `Bundle exceeds ${type === 'theme' ? '1 MB' : '5 MB'} size limit`;
+          } else {
+            const zip = await JSZip.loadAsync(buffer);
+
+            // Detect optional root directory inside the ZIP.
+            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 + '/';
+              }
+            }
+
+            const manifestFile = zip.file(root + 'manifest.json');
+            if (!manifestFile) {
+              bundleError = 'Bundle missing manifest.json';
+            } else {
+              try {
+                manifest = JSON.parse(await manifestFile.async('string'));
+              } catch {
+                bundleError = 'Invalid manifest.json in bundle';
+              }
+            }
+
+            if (manifest) {
+              if (type === 'theme') {
+                const cssFile = zip.file(root + 'theme.css');
+                if (cssFile) {
+                  const css = await cssFile.async('string');
+                  sourcePreview = {
+                    name: 'theme.css',
+                    content: css.length > MAX_PREVIEW_SOURCE_LEN
+                      ? css.slice(0, MAX_PREVIEW_SOURCE_LEN)
+                      : css,
+                    truncated: css.length > MAX_PREVIEW_SOURCE_LEN,
+                  };
+                }
+              } else {
+                const entrypoint = (manifest.entrypoint as string) || 'index.js';
+                const jsFile = zip.file(root + entrypoint);
+                if (jsFile) {
+                  const code = await jsFile.async('string');
+                  sourcePreview = {
+                    name: entrypoint,
+                    content: code.length > MAX_PREVIEW_SOURCE_LEN
+                      ? code.slice(0, MAX_PREVIEW_SOURCE_LEN)
+                      : code,
+                    truncated: code.length > MAX_PREVIEW_SOURCE_LEN,
+                  };
+                }
+              }
+            }
+          }
+        }
+      } catch (err) {
+        bundleError = err instanceof Error ? err.message : 'Failed to read bundle';
+      }
+    } else {
+      bundleError = 'Extension has no published version';
+    }
+
+    // 3. Install status (slug is used as the registry id at install time)
+    const [pluginRegistry, themeRegistry] = await Promise.all([
+      getPluginRegistry(),
+      getThemeRegistry(),
+    ]);
+    const installedEntry = type === 'theme'
+      ? themeRegistry.themes.find((t) => t.id === slug)
+      : pluginRegistry.plugins.find((p) => p.id === slug);
+    const installed = installedEntry !== undefined;
+    const installedVersion = installedEntry?.version ?? null;
+
+    // 4. Build screenshot URLs (proxy through the directory's public files endpoint).
+    const screenshots = Array.isArray(extension.screenshots)
+      ? (extension.screenshots as Array<{ path: string; altText?: string | null }>).map((s) => ({
+          url: new URL(`/api/v1/files/${s.path}`, directoryUrl).toString(),
+          altText: s.altText ?? null,
+        }))
+      : [];
+
+    // Strip the heavy `manifest` blob from versions when echoing the directory data.
+    const versions = Array.isArray(extension.versions)
+      ? (extension.versions as Array<Record<string, unknown>>).map((v) => ({
+          version: v.version,
+          changelog: v.changelog,
+          bundleSize: v.bundleSize,
+          minAppVersion: v.minAppVersion,
+          publishedAt: v.publishedAt,
+          permissions: v.permissions,
+        }))
+      : [];
+
+    const fileUrl = (path: unknown): string | null =>
+      typeof path === 'string' && path
+        ? new URL(`/api/v1/files/${path}`, directoryUrl).toString()
+        : null;
+
+    return NextResponse.json(
+      {
+        extension: {
+          slug: extension.slug,
+          name: extension.name,
+          type: extension.type,
+          pluginType: extension.pluginType ?? null,
+          description: extension.description,
+          longDescription: extension.longDescription ?? null,
+          tags: extension.tags ?? [],
+          permissions: extension.permissions ?? [],
+          totalDownloads: extension.totalDownloads ?? 0,
+          featured: extension.featured ?? false,
+          githubRepo: extension.githubRepo ?? null,
+          license: extension.license ?? null,
+          minAppVersion: extension.minAppVersion ?? null,
+          iconUrl: fileUrl(extension.iconPath),
+          bannerUrl: fileUrl(extension.bannerPath),
+          author: extension.author ?? null,
+          latestVersion,
+          versions,
+          screenshots,
+          themePreviews: extension.themePreviews ?? [],
+          createdAt: extension.createdAt ?? null,
+          updatedAt: extension.updatedAt ?? null,
+        },
+        bundle: {
+          manifest,
+          source: sourcePreview,
+          size: bundleSize,
+          error: bundleError,
+        },
+        installed,
+        installedVersion,
+      },
+      { headers: { 'Cache-Control': 'no-store' } },
+    );
+  } catch (error) {
+    logger.error('Marketplace preview error', {
+      error: error instanceof Error ? error.message : 'Unknown error',
+    });
+    return NextResponse.json(
+      { error: 'Failed to load preview' },
+      { status: 502 },
+    );
+  }
+}

app/api/admin/marketplace/route.ts

@@ -0,0 +1,393 @@
+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,
+  getPlugin,
+  getTheme,
+  getPluginRegistry,
+  getThemeRegistry,
+  type ServerPlugin,
+  type ServerTheme,
+} from '@/lib/admin/plugin-registry';
+import {
+  sanitizeFrameOrigins,
+  sanitizeHttpOrigins,
+  sanitizeApiPostPaths,
+  invalidateFrameOriginsCache,
+} from '@/lib/admin/csp-frame-origins';
+import JSZip from 'jszip';
+import { MAX_PLUGIN_SIZE, MAX_THEME_SIZE, ALL_PERMISSIONS } from '@/lib/plugin-types';
+import { sanitizeThemeCSS, validateThemeCSSSafety } from '@/lib/theme-loader';
+import { configManager } from '@/lib/admin/config-manager';
+
+async function getDirectoryUrl(): Promise<string> {
+  await configManager.ensureLoaded();
+  return configManager.get<string>('extensionDirectoryUrl') || 'https://extensions.bulwarkmail.org';
+}
+
+/**
+ * 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(request);
+    if ('error' in result) return result.error;
+
+    const directoryUrl = await getDirectoryUrl();
+    const { searchParams } = request.nextUrl;
+    const url = new URL('/api/v1/extensions', directoryUrl);
+
+    // 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 installedPluginVersions = new Map(
+      pluginRegistry.plugins.map(p => [p.id, p.version] as const),
+    );
+    const installedThemeVersions = new Map(
+      themeRegistry.themes.map(t => [t.id, t.version] as const),
+    );
+
+    const fileUrl = (path: unknown): string | null =>
+      typeof path === 'string' && path
+        ? new URL(`/api/v1/files/${path}`, directoryUrl).toString()
+        : null;
+
+    if (data.data) {
+      data.data = data.data.map((ext: Record<string, unknown>) => {
+        const slug = ext.slug as string;
+        const installedVersion = ext.type === 'theme'
+          ? installedThemeVersions.get(slug) ?? null
+          : installedPluginVersions.get(slug) ?? null;
+        return {
+          ...ext,
+          iconUrl: fileUrl(ext.iconPath),
+          bannerUrl: fileUrl(ext.bannerPath),
+          installed: installedVersion !== null,
+          installedVersion,
+        };
+      });
+    }
+
+    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(request);
+    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 directoryUrl = await getDirectoryUrl();
+    const bundleUrl = new URL(`/api/v1/bundle/${encodeURIComponent(slug)}/${encodeURIComponent(version)}`, directoryUrl);
+    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();
+
+    // Resolve and strictly validate the id used as a filename. Marketplace
+    // bundles are authored by a third-party publisher; without this an id
+    // like "../../foo" causes savePlugin/saveTheme to write outside the
+    // plugins/themes dir via path.join.
+    const resolvedId = typeof manifest.id === 'string' && manifest.id ? manifest.id : slug;
+    if (typeof resolvedId !== 'string' || !/^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(resolvedId)) {
+      return NextResponse.json(
+        { error: 'Invalid id: must be lowercase alphanumeric with hyphens, min 2 chars' },
+        { status: 400 },
+      );
+    }
+
+    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 existingTheme = await getTheme(resolvedId);
+      const isUpdate = existingTheme !== null;
+
+      const theme: ServerTheme = {
+        id: resolvedId,
+        name: (manifest.name as string) || slug,
+        // Prefer the directory-published version (what we requested) over
+        // manifest.version. Publishers sometimes forget to bump the version
+        // inside the bundle's manifest.json; trusting it would make the
+        // update never appear to "stick" — the registry would keep showing
+        // the older version even after a successful update.
+        version: version || (manifest.version as string),
+        author: (manifest.author as string) || 'Unknown',
+        description: (manifest.description as string) || '',
+        variants: (manifest.variants as string[]) || ['light', 'dark'],
+        enabled: existingTheme?.enabled ?? true,
+        ...(existingTheme?.forceEnabled !== undefined
+          ? { forceEnabled: existingTheme.forceEnabled }
+          : {}),
+        installedAt: existingTheme?.installedAt ?? now,
+        updatedAt: now,
+      };
+
+      await saveTheme(theme, css);
+      await auditLog(
+        isUpdate ? 'marketplace.update_theme' : 'marketplace.install_theme',
+        {
+          id: theme.id,
+          name: theme.name,
+          version: theme.version,
+          slug,
+          ...(isUpdate ? { previousVersion: existingTheme.version } : {}),
+        },
+        ip,
+      );
+
+      return NextResponse.json({ success: true, theme, warnings, updated: isUpdate });
+    } else {
+      // Plugin installation
+      // Read entrypoint JS
+      const entrypoint = (manifest.entrypoint as string) || 'index.js';
+      const jsFile = zip.file(root + entrypoint);
+      if (!jsFile) {
+        return NextResponse.json({ error: `Bundle missing entrypoint: ${entrypoint}` }, { status: 400 });
+      }
+
+      const code = await jsFile.async('string');
+
+      // Block plugins with dangerous JS patterns
+      const DANGEROUS_JS_PATTERNS = [
+        { pattern: /\beval\s*\(/g, label: 'eval()' },
+        { pattern: /\bnew\s+Function\s*\(/g, label: 'new Function()' },
+        { pattern: /document\.cookie/g, label: 'document.cookie' },
+        { pattern: /document\.write/g, label: 'document.write' },
+        { pattern: /innerHTML\s*=/g, label: 'innerHTML assignment' },
+      ];
+      const dangerousFindings: string[] = [];
+      for (const { pattern, label } of DANGEROUS_JS_PATTERNS) {
+        if (pattern.test(code)) dangerousFindings.push(label);
+        pattern.lastIndex = 0;
+      }
+      if (dangerousFindings.length > 0) {
+        return NextResponse.json(
+          { error: `Plugin rejected: contains ${dangerousFindings.join(', ')}. These patterns are not allowed for security reasons.` },
+          { status: 400 },
+        );
+      }
+
+      // Validate permissions
+      const permissions = Array.isArray(manifest.permissions) ? manifest.permissions as string[] : [];
+      const validPerms = new Set(ALL_PERMISSIONS as readonly string[]);
+      const unknownPerms = permissions.filter(p => !validPerms.has(p));
+
+      const warnings: string[] = [];
+      if (unknownPerms.length > 0) {
+        warnings.push(`Unknown permissions: ${unknownPerms.join(', ')}`);
+      }
+
+      // Plugins may declare iframe origins they need for embedded content.
+      // Anything that doesn't pass strict origin validation is silently
+      // dropped - the plugin still installs, but those origins are not
+      // added to the host CSP.
+      const declaredFrameOrigins = sanitizeFrameOrigins(manifest.frameOrigins);
+      const droppedFrameOrigins = Array.isArray(manifest.frameOrigins)
+        ? (manifest.frameOrigins as unknown[]).filter(
+            (v) => typeof v !== 'string' || !declaredFrameOrigins.includes(v),
+          )
+        : [];
+      if (droppedFrameOrigins.length > 0) {
+        warnings.push(
+          `Ignored invalid frameOrigins: ${droppedFrameOrigins.join(', ')}`,
+        );
+      }
+
+      const declaredHttpOrigins = sanitizeHttpOrigins(manifest.httpOrigins);
+      const droppedHttpOrigins = Array.isArray(manifest.httpOrigins)
+        ? (manifest.httpOrigins as unknown[]).filter(
+            (v) => typeof v !== 'string' || !declaredHttpOrigins.includes(v),
+          )
+        : [];
+      if (droppedHttpOrigins.length > 0) {
+        warnings.push(
+          `Ignored invalid httpOrigins: ${droppedHttpOrigins.join(', ')}`,
+        );
+      }
+
+      const declaredApiPostPaths = sanitizeApiPostPaths(manifest.apiPostPaths);
+      const droppedApiPostPaths = Array.isArray(manifest.apiPostPaths)
+        ? (manifest.apiPostPaths as unknown[]).filter(
+            (v) => typeof v !== 'string' || !declaredApiPostPaths.includes(v),
+          )
+        : [];
+      if (droppedApiPostPaths.length > 0) {
+        warnings.push(
+          `Ignored invalid apiPostPaths: ${droppedApiPostPaths.join(', ')}`,
+        );
+      }
+
+      const existingPlugin = await getPlugin(resolvedId);
+      const isUpdate = existingPlugin !== null;
+
+      const plugin: ServerPlugin = {
+        id: resolvedId,
+        name: (manifest.name as string) || slug,
+        // See theme branch: trust the directory-published version, not
+        // manifest.version, so updates actually stick in the registry.
+        version: version || (manifest.version as string),
+        author: (manifest.author as string) || 'Unknown',
+        description: (manifest.description as string) || '',
+        type: (manifest.type as string) || 'hook',
+        ...(manifest.tier === 'privileged' ? { tier: 'privileged' } : {}),
+        permissions,
+        entrypoint,
+        enabled: existingPlugin?.enabled ?? true,
+        ...(existingPlugin?.forceEnabled !== undefined
+          ? { forceEnabled: existingPlugin.forceEnabled }
+          : {}),
+        installedAt: existingPlugin?.installedAt ?? now,
+        updatedAt: now,
+        ...(manifest.configSchema && typeof manifest.configSchema === 'object'
+          ? { configSchema: manifest.configSchema as ServerPlugin['configSchema'] }
+          : {}),
+        ...(manifest.settingsSchema && typeof manifest.settingsSchema === 'object'
+          ? { settingsSchema: manifest.settingsSchema as ServerPlugin['settingsSchema'] }
+          : {}),
+        ...(declaredFrameOrigins.length > 0
+          ? { frameOrigins: declaredFrameOrigins }
+          : {}),
+        ...(declaredHttpOrigins.length > 0
+          ? { httpOrigins: declaredHttpOrigins }
+          : {}),
+        ...(declaredApiPostPaths.length > 0
+          ? { apiPostPaths: declaredApiPostPaths }
+          : {}),
+      };
+
+      await savePlugin(plugin, code);
+      invalidateFrameOriginsCache();
+      await auditLog(
+        isUpdate ? 'marketplace.update_plugin' : 'marketplace.install_plugin',
+        {
+          id: plugin.id,
+          name: plugin.name,
+          version: plugin.version,
+          slug,
+          frameOrigins: declaredFrameOrigins,
+          httpOrigins: declaredHttpOrigins,
+          apiPostPaths: declaredApiPostPaths,
+          ...(isUpdate ? { previousVersion: existingPlugin.version } : {}),
+        },
+        ip,
+      );
+
+      return NextResponse.json({ success: true, plugin, warnings, updated: isUpdate });
+    }
+  } catch (error) {
+    logger.error('Marketplace install error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Installation failed' }, { status: 500 });
+  }
+}

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

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

app/api/admin/plugin-approvals/route.ts

@@ -0,0 +1,85 @@
+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 { listApprovals, decideApproval, revokeApproval } from '@/lib/admin/plugin-approvals';
+
+/**
+ * Admin-protected CRUD for the per-(pluginId, bundleHash) approval table.
+ *
+ *   GET    /api/admin/plugin-approvals               → list all entries
+ *   POST   /api/admin/plugin-approvals               → { pluginId, bundleHash, decision: 'approved'|'denied' }
+ *   DELETE /api/admin/plugin-approvals?pluginId=…&bundleHash=…   → revoke
+ */
+
+function isValidId(s: unknown): s is string {
+  return typeof s === 'string' && /^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(s) && s.length <= 64;
+}
+function isValidHash(s: unknown): s is string {
+  return typeof s === 'string' && /^[a-f0-9]{16,128}$/i.test(s);
+}
+
+export async function GET(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth(request);
+    if ('error' in result) return result.error;
+    const entries = await listApprovals();
+    return NextResponse.json({ entries }, { headers: { 'Cache-Control': 'no-store' } });
+  } catch (err) {
+    logger.error('plugin-approvals GET', { error: err instanceof Error ? err.message : String(err) });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth(request);
+    if ('error' in result) return result.error;
+    // AdminSessionPayload carries only role/iat/exp; we use a stable label
+    // for the audit trail rather than a per-user identity.
+    const adminUser = 'admin';
+    void result;
+    const ip = getClientIP(request);
+
+    let body: unknown;
+    try { body = await request.json(); } catch { body = null; }
+    const b = (body ?? {}) as { pluginId?: unknown; bundleHash?: unknown; decision?: unknown };
+    if (!isValidId(b.pluginId) || !isValidHash(b.bundleHash)) {
+      return NextResponse.json({ error: 'invalid pluginId or bundleHash' }, { status: 400 });
+    }
+    if (b.decision !== 'approved' && b.decision !== 'denied') {
+      return NextResponse.json({ error: 'decision must be "approved" or "denied"' }, { status: 400 });
+    }
+
+    const entry = await decideApproval(b.pluginId, b.bundleHash, b.decision, adminUser);
+    await auditLog('plugin.approval', { pluginId: entry.pluginId, bundleHash: entry.bundleHash, decision: entry.status }, ip);
+    return NextResponse.json({ entry });
+  } catch (err) {
+    logger.error('plugin-approvals POST', { error: err instanceof Error ? err.message : String(err) });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+export async function DELETE(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth(request);
+    if ('error' in result) return result.error;
+    // AdminSessionPayload carries only role/iat/exp; we use a stable label
+    // for the audit trail rather than a per-user identity.
+    const adminUser = 'admin';
+    void result;
+    const ip = getClientIP(request);
+
+    const pluginId = request.nextUrl.searchParams.get('pluginId');
+    const bundleHash = request.nextUrl.searchParams.get('bundleHash');
+    if (!isValidId(pluginId) || !isValidHash(bundleHash)) {
+      return NextResponse.json({ error: 'invalid pluginId or bundleHash' }, { status: 400 });
+    }
+    await revokeApproval(pluginId, bundleHash);
+    await auditLog('plugin.approval.revoke', { pluginId, bundleHash, by: adminUser }, ip);
+    return NextResponse.json({ ok: true });
+  } catch (err) {
+    logger.error('plugin-approvals DELETE', { error: err instanceof Error ? err.message : String(err) });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

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

@@ -0,0 +1,80 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getPluginBundle, getPlugin } from '@/lib/admin/plugin-registry';
+import { getDevPlugin, readDevBundle } from '@/lib/admin/plugin-dev';
+import { signBytes } from '@/lib/admin/plugin-signing';
+
+async function safeSign(code: string): Promise<string | null> {
+  try { return await signBytes(code); } catch { return null; }
+}
+
+/**
+ * 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 });
+    }
+
+    // Dev plugins are read (and optionally bundled) straight from disk and
+    // served with no caching so every refresh picks up the latest source.
+    const devEntry = await getDevPlugin(id);
+    if (devEntry) {
+      const code = await readDevBundle(devEntry);
+      const signature = await safeSign(code);
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/javascript; charset=utf-8',
+        'Cache-Control': 'no-store',
+        'ETag': `"${devEntry.plugin.bundleHash}"`,
+        'Content-Length': String(Buffer.byteLength(code, 'utf-8')),
+      };
+      if (signature) headers['X-Bundle-Signature'] = signature;
+      return new NextResponse(code, { headers });
+    }
+
+    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 });
+    }
+
+    // Use the registry's bundleHash as the ETag so the browser can revalidate
+    // cheaply. Cache-Control: no-cache forces revalidation on every request,
+    // but a matching If-None-Match returns 304 with no body.
+    const etag = plugin.bundleHash ? `"${plugin.bundleHash}"` : undefined;
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/javascript; charset=utf-8',
+      'Cache-Control': 'private, no-cache, must-revalidate',
+    };
+    if (etag) headers['ETag'] = etag;
+
+    const signature = await safeSign(code);
+    if (signature) headers['X-Bundle-Signature'] = signature;
+
+    if (etag && request.headers.get('if-none-match') === etag) {
+      return new NextResponse(null, { status: 304, headers });
+    }
+
+    headers['Content-Length'] = String(Buffer.byteLength(code, 'utf-8'));
+    return new NextResponse(code, { headers });
+  } catch {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
+}

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

@@ -0,0 +1,167 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getPlugin } from '@/lib/admin/plugin-registry';
+import { getDevPlugin } from '@/lib/admin/plugin-dev';
+import { getPluginConfig, setPluginConfig, deletePluginConfigKey } from '@/lib/admin/plugin-config';
+import { requireAdminAuth } from '@/lib/admin/session';
+import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+
+/** Resolve a plugin from the persisted registry first, then PLUGIN_DEV_DIR. */
+async function resolvePlugin(id: string) {
+  const registered = await getPlugin(id);
+  if (registered) return registered;
+  const dev = await getDevPlugin(id);
+  return dev?.plugin ?? null;
+}
+
+/**
+ * GET /api/admin/plugins/[id]/config - Read plugin config
+ *
+ * - Admin sessions receive every field, including those declared
+ *   `type: 'secret'` in the plugin's configSchema.
+ * - Authenticated mailbox users (the plugin running in their browser)
+ *   receive only non-secret fields.
+ * - Anonymous callers are rejected so unauthenticated visitors cannot
+ *   enumerate plugin secrets.
+ */
+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 adminAuth = await requireAdminAuth(request);
+    const isAdmin = !('error' in adminAuth);
+
+    if (!isAdmin) {
+      const creds = await getStalwartCredentials(request);
+      if (!creds) {
+        return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+      }
+    }
+
+    const plugin = await resolvePlugin(id);
+    if (!plugin) {
+      return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
+    }
+
+    const config = await getPluginConfig(id);
+
+    let response: Record<string, unknown>;
+    if (isAdmin) {
+      response = config;
+    } else {
+      response = {};
+      const schema = plugin.configSchema;
+      if (schema) {
+        for (const [key, value] of Object.entries(config)) {
+          const field = schema[key];
+          if (!field || field.type === 'secret') continue;
+          response[key] = value;
+        }
+      }
+    }
+
+    return NextResponse.json(response, {
+      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(request);
+    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 resolvePlugin(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 });
+    }
+
+    if (plugin.configSchema && !plugin.configSchema[body.key]) {
+      return NextResponse.json(
+        { error: 'Key is not declared in the plugin configSchema' },
+        { 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(request);
+    if ('error' in result) return result.error;
+
+    const { id } = await params;
+
+    if (!/^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(id)) {
+      return NextResponse.json({ error: 'Invalid plugin ID' }, { status: 400 });
+    }
+
+    let body: { key?: string };
+    try {
+      body = await request.json();
+    } catch {
+      return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
+    }
+
+    if (!body.key || typeof body.key !== 'string') {
+      return NextResponse.json({ error: 'key is required' }, { status: 400 });
+    }
+
+    await deletePluginConfigKey(id, body.key);
+    return NextResponse.json({ ok: true });
+  } catch {
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/plugins/route.ts

@@ -0,0 +1,346 @@
+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';
+import { listDevPlugins } from '@/lib/admin/plugin-dev';
+import {
+  sanitizeFrameOrigins,
+  sanitizeHttpOrigins,
+  sanitizeApiPostPaths,
+  invalidateFrameOriginsCache,
+} from '@/lib/admin/csp-frame-origins';
+
+// Server-side extraction using the same validation logic
+// ZIP parsing needs to happen on the server for admin-uploaded plugins
+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(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth(request);
+    if ('error' in result) return result.error;
+
+    const [registry, devEntries] = await Promise.all([
+      getPluginRegistry(),
+      listDevPlugins(),
+    ]);
+
+    // Dev plugins win on id collision so admins see what users actually load.
+    const devIds = new Set(devEntries.map(e => e.plugin.id));
+    const merged = [
+      ...devEntries.map(e => ({ ...e.plugin, dev: true as const })),
+      ...registry.plugins
+        .filter(p => !devIds.has(p.id))
+        .map(p => ({ ...p, dev: false as const })),
+    ];
+    return NextResponse.json(merged, {
+      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(request);
+    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: scan for dangerous JS patterns across EVERY script in the
+    // bundle, not just the entrypoint - a second .js file was previously never
+    // looked at.
+    //
+    // The result is a reviewable finding rather than an unconditional reject.
+    // Minified crypto libraries (openpgp.js, pkijs) legitimately contain these
+    // patterns, so a hard block makes S/MIME and PGP plugins uninstallable.
+    // This route is already admin-authenticated, so the scan is defence in
+    // depth against an accidental or compromised upload, not a trust boundary:
+    // an admin may proceed with `overrideWarnings`, and the override is
+    // recorded in the audit log with the exact findings.
+    const findings: Array<{ file: string; patterns: string[] }> = [];
+    for (const [filePath, entry] of Object.entries(zip.files)) {
+      if (entry.dir) continue;
+      const ext = filePath.slice(filePath.lastIndexOf('.')).toLowerCase();
+      if (ext !== '.js' && ext !== '.mjs') continue;
+      const source = filePath === root + (manifest.entrypoint as string)
+        ? code
+        : await entry.async('string');
+      const hits: string[] = [];
+      for (const { pattern, label } of SUSPICIOUS_JS_PATTERNS) {
+        if (pattern.test(source)) hits.push(label);
+        pattern.lastIndex = 0;
+      }
+      if (hits.length > 0) {
+        findings.push({ file: filePath.slice(root.length), patterns: hits });
+      }
+    }
+
+    const overrideWarnings = formData.get('overrideWarnings') === 'true';
+    if (findings.length > 0 && !overrideWarnings) {
+      const summary = findings
+        .map(f => `${f.file}: ${f.patterns.join(', ')}`)
+        .join('; ');
+      return NextResponse.json(
+        {
+          error: `Plugin rejected: ${summary}. Review the bundle; if these are expected `
+            + `(e.g. a vendored crypto library), re-upload with "overrideWarnings" to proceed.`,
+          findings,
+          canOverride: true,
+        },
+        { status: 400 },
+      );
+    }
+
+    const declaredFrameOrigins = sanitizeFrameOrigins(manifest.frameOrigins);
+    const declaredHttpOrigins = sanitizeHttpOrigins(manifest.httpOrigins);
+    const declaredApiPostPaths = sanitizeApiPostPaths(manifest.apiPostPaths);
+
+    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,
+      ...(manifest.tier === 'privileged' ? { tier: 'privileged' } : {}),
+      permissions: (manifest.permissions as string[]) || [],
+      entrypoint: manifest.entrypoint as string,
+      enabled: true,
+      ...(manifest.configSchema && typeof manifest.configSchema === 'object'
+        ? { configSchema: manifest.configSchema as ServerPlugin['configSchema'] }
+        : {}),
+      ...(manifest.settingsSchema && typeof manifest.settingsSchema === 'object'
+        ? { settingsSchema: manifest.settingsSchema as ServerPlugin['settingsSchema'] }
+        : {}),
+      ...(manifest.locales && typeof manifest.locales === 'object'
+        ? { locales: manifest.locales as ServerPlugin['locales'] }
+        : {}),
+      ...(declaredFrameOrigins.length > 0
+        ? { frameOrigins: declaredFrameOrigins }
+        : {}),
+      ...(declaredHttpOrigins.length > 0
+        ? { httpOrigins: declaredHttpOrigins }
+        : {}),
+      ...(declaredApiPostPaths.length > 0
+        ? { apiPostPaths: declaredApiPostPaths }
+        : {}),
+      installedAt: now,
+      updatedAt: now,
+    };
+
+    await savePlugin(plugin, code);
+    invalidateFrameOriginsCache();
+    await auditLog('plugin.install', { id: plugin.id, name: plugin.name, version: plugin.version, frameOrigins: declaredFrameOrigins, httpOrigins: declaredHttpOrigins, apiPostPaths: declaredApiPostPaths }, ip);
+    if (findings.length > 0) {
+      // Record WHAT was waved through, not merely that an override happened -
+      // otherwise the audit trail can't answer "which patterns did we accept?".
+      await auditLog(
+        'plugin.install.scan_override',
+        { id: plugin.id, version: plugin.version, findings },
+        ip,
+      );
+      logger.warn('Plugin installed with scanner override', { id: plugin.id, findings });
+    }
+
+    // Echo accepted findings back so the admin UI can confirm exactly what was
+    // waved through, rather than reporting a bare success.
+    return NextResponse.json(findings.length > 0 ? { plugin, findings } : { plugin });
+  } catch (error) {
+    logger.error('Plugin install error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * PATCH /api/admin/plugins - Update plugin metadata (enable/disable)
+ * Body: { id: string, enabled: boolean }
+ */
+export async function PATCH(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth(request);
+    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');
+    let updated = await updatePluginMeta(id, updates);
+    if (!updated) {
+      // Dev plugins (PLUGIN_DEV_DIR) aren't in the persisted registry, but
+      // forceEnabled is canonical-stored in policy.forceEnabledPlugins on the
+      // client. Skip the registry write and return the live dev plugin so the
+      // policy save path can proceed.
+      const devEntries = await listDevPlugins();
+      const devEntry = devEntries.find(e => e.plugin.id === id);
+      if (!devEntry) {
+        return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
+      }
+      updated = { ...devEntry.plugin, ...updates };
+    }
+
+    // Enable/disable changes the set of plugins contributing frame origins.
+    if (typeof updates.enabled === 'boolean' || typeof updates.forceEnabled === 'boolean') {
+      invalidateFrameOriginsCache();
+    }
+
+    await auditLog('plugin.update', { id, ...updates }, ip);
+    return NextResponse.json({ plugin: updated });
+  } catch (error) {
+    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(request);
+    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 });
+    }
+
+    invalidateFrameOriginsCache();
+    await auditLog('plugin.delete', { id }, ip);
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    logger.error('Plugin delete error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/policy/route.ts

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

app/api/admin/telemetry/route.ts

@@ -0,0 +1,135 @@
+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 {
+  effectiveConsent,
+  loadState,
+  saveState,
+  buildPayload,
+  sendOnce,
+  reschedule,
+  DEFAULT_ENDPOINT,
+  getLoginCounts,
+  resolveEndpointAllowed,
+} from '@/lib/telemetry';
+
+/**
+ * GET /api/admin/telemetry
+ * Returns current consent + endpoint + next/last send + a live preview
+ * of exactly what the next heartbeat would contain.
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const auth = await requireAdminAuth(request);
+    if ('error' in auth) return auth.error;
+
+    const { consent, source, state } = await effectiveConsent();
+    const [payload, accountCounts] = await Promise.all([
+      buildPayload(),
+      getLoginCounts(),
+    ]);
+
+    return NextResponse.json(
+      {
+        consent,
+        consentSource: source,
+        endpoint: state.endpoint || DEFAULT_ENDPOINT,
+        consentedAt: state.consentedAt,
+        lastSentAt: state.lastSentAt,
+        nextScheduledAt: state.nextScheduledAt,
+        defaultEndpoint: DEFAULT_ENDPOINT,
+        payloadPreview: payload,
+        accountCounts,
+      },
+      { headers: { 'Cache-Control': 'no-store' } },
+    );
+  } catch (err) {
+    logger.error('telemetry GET error', {
+      error: err instanceof Error ? err.message : 'unknown',
+    });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+/**
+ * POST /api/admin/telemetry
+ * Body: { action: 'set-consent' | 'set-endpoint' | 'send-now', ... }
+ *   set-consent  : { action, consent: 'on' | 'off' }
+ *   set-endpoint : { action, endpoint: string }
+ *   send-now     : { action }
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const auth = await requireAdminAuth(request);
+    if ('error' in auth) return auth.error;
+    const ip = getClientIP(request);
+
+    const body = (await request.json().catch(() => null)) as
+      | { action?: string; consent?: string; endpoint?: string }
+      | null;
+    if (!body || typeof body.action !== 'string') {
+      return NextResponse.json({ error: 'action required' }, { status: 400 });
+    }
+
+    const { source } = await effectiveConsent();
+
+    if (body.action === 'set-consent') {
+      if (source === 'env') {
+        return NextResponse.json(
+          { error: 'consent is overridden by BULWARK_TELEMETRY env var' },
+          { status: 409 },
+        );
+      }
+      if (body.consent !== 'on' && body.consent !== 'off') {
+        return NextResponse.json({ error: 'consent must be "on" or "off"' }, { status: 400 });
+      }
+      const state = await loadState();
+      const before = state.consent;
+      state.consent = body.consent;
+      if (body.consent === 'on' && !state.consentedAt) {
+        state.consentedAt = new Date().toISOString();
+      }
+      await saveState(state);
+      await reschedule();
+      await auditLog('telemetry.set-consent', { from: before, to: body.consent }, ip);
+      return NextResponse.json({ ok: true });
+    }
+
+    if (body.action === 'set-endpoint') {
+      if (typeof body.endpoint !== 'string') {
+        return NextResponse.json({ error: 'endpoint required' }, { status: 400 });
+      }
+      const trimmed = body.endpoint.trim();
+      if (trimmed) {
+        const check = await resolveEndpointAllowed(trimmed);
+        if (!check.ok) {
+          return NextResponse.json({ error: check.reason }, { status: 400 });
+        }
+      }
+      const state = await loadState();
+      const before = state.endpoint;
+      state.endpoint = trimmed || DEFAULT_ENDPOINT;
+      await saveState(state);
+      await auditLog('telemetry.set-endpoint', { from: before, to: state.endpoint }, ip);
+      return NextResponse.json({ ok: true, endpoint: state.endpoint });
+    }
+
+    if (body.action === 'send-now') {
+      const result = await sendOnce({ reason: 'admin-manual' });
+      await auditLog(
+        'telemetry.send-now',
+        { ok: result.ok, status: result.status ?? null, error: result.error ?? null },
+        ip,
+      );
+      return NextResponse.json(result, { status: result.ok ? 200 : 502 });
+    }
+
+    return NextResponse.json({ error: 'unknown action' }, { status: 400 });
+  } catch (err) {
+    logger.error('telemetry POST error', {
+      error: err instanceof Error ? err.message : 'unknown',
+    });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

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

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

app/api/admin/themes/route.ts

@@ -0,0 +1,217 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
+import { auditLog } from '@/lib/admin/audit';
+import { logger } from '@/lib/logger';
+import {
+  getThemeRegistry,
+  saveTheme,
+  deleteTheme as removeTheme,
+  type ServerTheme,
+} from '@/lib/admin/plugin-registry';
+
+import JSZip from 'jszip';
+import { MAX_THEME_SIZE } from '@/lib/plugin-types';
+import { sanitizeThemeCSS, validateThemeCSSSafety } from '@/lib/theme-loader';
+
+/**
+ * GET /api/admin/themes - List all admin-managed themes
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const result = await requireAdminAuth(request);
+    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(request);
+    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(request);
+    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(request);
+    if ('error' in result) return result.error;
+
+    const ip = getClientIP(request);
+    const { id } = await request.json();
+
+    if (!id || typeof id !== 'string') {
+      return NextResponse.json({ error: 'Missing theme id' }, { status: 400 });
+    }
+
+    const removed = await removeTheme(id);
+    if (!removed) {
+      return NextResponse.json({ error: 'Theme not found' }, { status: 404 });
+    }
+
+    await auditLog('theme.delete', { id }, ip);
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    logger.error('Theme delete error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/admin/version/route.ts

@@ -0,0 +1,66 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAdminAuth } from '@/lib/admin/session';
+import { logger } from '@/lib/logger';
+import {
+  loadState,
+  checkOnce,
+  effectiveEndpoint,
+  disabledByEnv,
+  DEFAULT_VERSION_ENDPOINT,
+} from '@/lib/version-check';
+
+/**
+ * GET /api/admin/version
+ * Returns the cached update status, last check times, and effective config.
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const auth = await requireAdminAuth(request);
+    if ('error' in auth) return auth.error;
+
+    const state = await loadState();
+    return NextResponse.json(
+      {
+        current: process.env.NEXT_PUBLIC_APP_VERSION || '0.0.0',
+        build: process.env.NEXT_PUBLIC_GIT_COMMIT || 'unknown',
+        endpoint: effectiveEndpoint(state),
+        defaultEndpoint: DEFAULT_VERSION_ENDPOINT,
+        disabledByEnv: disabledByEnv(),
+        lastCheckedAt: state.lastCheckedAt,
+        lastSuccessAt: state.lastSuccessAt,
+        nextScheduledAt: state.nextScheduledAt,
+        status: state.status,
+      },
+      { headers: { 'Cache-Control': 'no-store' } },
+    );
+  } catch (err) {
+    logger.error('version admin GET error', {
+      error: err instanceof Error ? err.message : 'unknown',
+    });
+    return NextResponse.json({ error: 'failed' }, { status: 500 });
+  }
+}
+
+/**
+ * POST /api/admin/version
+ * { action: 'check-now' } - force a fresh upstream fetch.
+ */
+export async function POST(req: NextRequest) {
+  try {
+    const auth = await requireAdminAuth(req);
+    if ('error' in auth) return auth.error;
+
+    const body = (await req.json().catch(() => null)) as { action?: string } | null;
+    if (!body || body.action !== 'check-now') {
+      return NextResponse.json({ error: 'unknown action' }, { status: 400 });
+    }
+
+    const result = await checkOnce({ reason: 'admin-trigger' });
+    return NextResponse.json(result);
+  } catch (err) {
+    logger.error('version admin POST error', {
+      error: err instanceof Error ? err.message : 'unknown',
+    });
+    return NextResponse.json({ error: 'failed' }, { status: 500 });
+  }
+}

app/api/auth/impersonate/route.ts

@@ -0,0 +1,142 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { logger } from '@/lib/logger';
+import { encryptSession } from '@/lib/auth/crypto';
+import { sessionCookieName } from '@/lib/auth/session-cookie';
+import { getCookieOptions } from '@/lib/oauth/cookie-config';
+import { normalizeJmapServerUrl } from '@/lib/auth/verify-jmap-auth';
+import { setStalwartAuthContextInStore } from '@/lib/stalwart/auth-context';
+import { recordLogin } from '@/lib/telemetry/login-tracker';
+import {
+  ImpersonationJwtError,
+  impersonationReplayCache,
+  verifyImpersonationJwt,
+} from '@/lib/impersonation/jwt';
+import {
+  readImpersonationConfig,
+  resolveImpersonationServerUrl,
+} from '@/lib/impersonation/master-config';
+
+export const runtime = 'nodejs';
+
+const IMPERSONATION_SLOT = 0;
+
+/**
+ * Impersonation cookies deliberately omit Max-Age so the browser treats
+ * them as session cookies - the impersonated session ends when the user
+ * closes the browser, not 30 days later. Impersonation is a temporary
+ * support handoff; a normal password login is the only thing that should
+ * survive a browser restart.
+ */
+function impersonationCookieOptions() {
+  const { maxAge: _maxAge, ...rest } = getCookieOptions();
+  return rest;
+}
+
+/**
+ * GET /api/auth/impersonate?token=<jwt>
+ *
+ * Master-user impersonation via signed JWT. The token carries the target
+ * mailbox; Bulwark verifies the signature, resolves the configured Stalwart
+ * master credentials from env, then mints the same session cookies the
+ * password-login path produces. The browser is redirected to "/?impersonated=1" (see
+ * ImpersonationReconciler, GH #646) and the
+ * SPA hydrates as if the user had just logged in with master@target%master.
+ *
+ * Returns 404 when the feature is not configured so an unconfigured
+ * deployment does not advertise the endpoint.
+ */
+export async function GET(request: NextRequest) {
+  const config = readImpersonationConfig();
+  if (!config) {
+    // Not configured - behave exactly like an unknown route.
+    return new NextResponse('Not found', { status: 404 });
+  }
+
+  const token = request.nextUrl.searchParams.get('token');
+  if (!token) {
+    return NextResponse.json({ error: 'Missing token' }, { status: 400 });
+  }
+
+  let claims;
+  try {
+    claims = verifyImpersonationJwt(token, config.jwtSecret, {
+      expectedIssuer: config.expectedIssuer,
+    });
+  } catch (err) {
+    if (err instanceof ImpersonationJwtError) {
+      logger.warn('Impersonation JWT rejected', { code: err.code });
+      return NextResponse.json({ error: err.message }, { status: err.status });
+    }
+    logger.error('Impersonation JWT error', {
+      error: err instanceof Error ? err.message : 'Unknown',
+    });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+
+  if (!impersonationReplayCache.consume(claims.jti, claims.exp)) {
+    logger.warn('Impersonation JWT replay rejected', { jti: claims.jti });
+    return NextResponse.json({ error: 'Token already used' }, { status: 401 });
+  }
+
+  const serverUrl = await resolveImpersonationServerUrl();
+  if (!serverUrl) {
+    logger.error('Impersonation requested but jmapServerUrl is not configured');
+    return NextResponse.json({ error: 'JMAP server not configured' }, { status: 500 });
+  }
+
+  let normalizedServerUrl: string;
+  try {
+    normalizedServerUrl = normalizeJmapServerUrl(serverUrl);
+  } catch {
+    return NextResponse.json({ error: 'Invalid JMAP server URL' }, { status: 500 });
+  }
+
+  // Stalwart master-user impersonation: username = "<target>%<master>",
+  // password = <master_password>. Per Stalwart docs:
+  //   https://stalw.art/docs/auth/authorization/administrator/
+  const impersonatedUsername = `${claims.mailbox}%${config.masterUser}`;
+  const authHeader = `Basic ${Buffer.from(
+    `${impersonatedUsername}:${config.masterPassword}`,
+  ).toString('base64')}`;
+
+  const cookieStore = await cookies();
+  const sessionToken = encryptSession(
+    normalizedServerUrl,
+    impersonatedUsername,
+    config.masterPassword,
+  );
+  cookieStore.set(sessionCookieName(IMPERSONATION_SLOT), sessionToken, impersonationCookieOptions());
+  setStalwartAuthContextInStore(cookieStore, IMPERSONATION_SLOT, {
+    serverUrl: normalizedServerUrl,
+    username: impersonatedUsername,
+    authHeader,
+  });
+
+  // Structured audit log - operators rely on this for security review.
+  logger.info('Impersonation session granted', {
+    event: 'impersonation_granted',
+    jti: claims.jti,
+    mailbox: claims.mailbox,
+    tenant_id: claims.tenant_id,
+    actor_user_id: claims.actor_user_id,
+    iss: claims.iss,
+    ip:
+      request.headers.get('x-forwarded-for')?.split(',')[0]?.trim() ||
+      request.headers.get('x-real-ip') ||
+      null,
+    referer: request.headers.get('referer'),
+    user_agent: request.headers.get('user-agent'),
+  });
+
+  void recordLogin(impersonatedUsername, normalizedServerUrl);
+
+  // Use a relative Location header so the browser resolves it against the
+  // public request URL. NextResponse.redirect(new URL('/', request.url))
+  // would absolutise to the container's internal bind (http://0.0.0.0:3000)
+  // when running behind a reverse proxy that doesn't set X-Forwarded-Host.
+  return new NextResponse(null, {
+    status: 303,
+    headers: { Location: '/?impersonated=1' },
+  });
+}

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

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

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

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

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

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

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

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