fix: broaden body font for non Latin script rendering #265

chore: update version to 1.6.5
fix: support HTTP basic auth in iCal subscription URLs #275
2026-05-13 14:43:07 +02:00 · 2026-05-13 14:38:00 +02:00 · 2026-05-13 14:27:54 +02:00 · 2026-05-13 00:50:46 +02:00 · 2026-05-13 00:34:35 +02:00 · 2026-05-13 00:33:23 +02:00
202 changed files with 16641 additions and 5852 deletions
@@ -78,10 +78,27 @@ JMAP_SERVER_URL=https://your-jmap-server.com
 # Admin Dashboard Data
 # =============================================================================

-# Directory for admin dashboard state: config overrides, admin password hash,
-# installed plugins/themes, and audit logs (default: ./data/admin).
-# For Docker, the default resolves to /app/data/admin - mount a persistent
-# volume there (see docker-compose.yml).
+# Admin data 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

 # =============================================================================
@@ -50,6 +50,8 @@ jobs:
          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 }}
@@ -78,6 +78,8 @@ jobs:
          context: .
          platforms: ${{ matrix.platform }}
          labels: ${{ steps.meta.outputs.labels }}
+          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 }}
@@ -1,5 +1,156 @@
 # Changelog

+## 1.6.5 (2026-05-13)
+
+### Features
+
+- **Protocol**: Register as the system handler for `mailto:` and `webcal:` links from a new protocol handler settings page
+- **Protocol**: Account picker for protocol links when multiple accounts are connected
+- **Protocol**: Import-or-subscribe choice for detected webcal calendars
+- **Protocol**: Reuse the open PWA/session for `mailto:` links instead of always opening a new tab
+- **UI**: Route account avatars through the shared `Avatar` component for consistent fallbacks (#278)
+
+### Fixes
+
+- **Calendar**: Support HTTP basic auth in iCal subscription URLs (#275)
+- **Admin**: Honor admin-uploaded favicon in root metadata (#274)
+- **Admin**: Honor `NEXT_PUBLIC_BASE_PATH` in admin sidebar nav links (#271)
+- **UI**: Broaden body font stack so Thai (and other non-Latin scripts) render correctly in subjects, sender names, and other chrome (#265)
+
+## 1.6.4 (2026-05-11)
+
+### Web Setup Wizard
+
+First-launch web setup wizard. New installs no longer need to hand-edit `.env.local` - point a browser at the container and the wizard probes the JMAP server(s), configures OAuth/OIDC, generates the session secret, accepts branding uploads, and provisions the initial admin password. Admin storage is now split into `ADMIN_CONFIG_DIR` (operator-authored, mountable read-only after setup) and `ADMIN_STATE_DIR` (runtime audit log and login timestamps); the legacy `ADMIN_DATA_DIR` keeps working for existing installs.
+
+### Features
+
+- **Setup**: Web setup wizard with multi-step flow: Server, Auth, Security, Logging, Branding, Review, Admin
+- **Setup**: Admin config/state directory split with optional `ADMIN_CONFIG_READONLY` for immutable deployments (#226)
+- **Setup**: File uploads on the wizard branding step
+- **Setup**: Redesigned review step with grouped summary and an advanced toggle for the full config
+- **Setup**: Require explicit confirmation when JMAP probe finds no session
+- **Mail**: Drag attachments out of the viewer to the local file system (#267)
+- **Mail**: Reading Pane at Bottom mail layout (#262)
+- **Mail**: Configurable signature position - above or below quoted text (#266)
+- **Mail**: Signature position is now searchable from the email behavior settings
+- **Mail**: Show avatar in Focused list for compact density and above
+- **Mail**: Align Focused list preview with other layout previews
+- **Compose**: From-header override in the composer with catch-all auto-reply, replies to an alias on a domain you own pre-fill the alias as the sender even when it isn't a configured identity (#246)
+
+### Performance
+
+- **Mail**: Prefetch initial email data on login
+- **Auth**: Parallelize login round-trips and drop redundant JMAP re-verify
+
+### Fixes
+
+- **Auth**: Skip upstream JMAP reverify for trusted URLs (#237)
+- **Auth**: Show account identity in the switcher header instead of the sending alias
+- **Compose**: Fall back to the primary identity signature on reply
+- **Setup**: Drop redundant first-login banner about removing `ADMIN_PASSWORD` (#222)
+- **UI**: Consistent notice cards for server probe results
+
+### i18n
+
+- Add missing translation keys across 15 locales
+
+## 1.6.3 (2026-05-08)
+
+### Features
+
+- **Mail**: Lift 5-account cap on HTTP/2
+- **Mail**: Import `.eml` files via folder right-click menu
+
+### Fixes
+
+- **Mail**: Trim leading whitespace from email list preview
+- **Mail**: Fall back when only the truncation indicator remains in email preview
+- **Mail**: Hide files/contacts nav items when JMAP server lacks support
+- **Viewer**: Preserve emoji colors in dark mode
+- **Viewer**: Prevent white-on-white in dark mode for nested `bgcolor` containers
+- **Viewer**: Render plain-text-only emails as text, not HTML
+- **Viewer**: Render HTML-only emails and redesign external content prompt
+- **Viewer**: Pad Word/Outlook HTML email rendering
+- **Compose**: Redesign quick reply to match sender/banner layout
+- **Compose**: Disable StarterKit's bundled link/underline to avoid duplicate extensions
+- **Sharing**: Request `shareWith` explicitly so calendar/address book shares survive a re-login (#257)
+- **UI**: Strip leading punctuation when computing avatar initials
+- **Mobile**: Hide email hover actions
+
+### i18n
+
+- Add missing translation keys across 15 locales
+
+## 1.6.2 (2026-05-06)
+
+### Features
+
+- **Plugins**: Hot-reload and dev-folder loading for live plugin development
+- **Plugins**: On-demand `src/` bundling via esbuild
+- **Plugins**: New `http:fetch` permission and `httpOrigins` manifest field
+- **Plugins**: `onBeforeEmailSend` hook with `fromEmail` exposed on `OutgoingEmail`
+- **Plugins**: Project `EmailReadView` for the email-banner slot and expose auth results
+- **Plugins**: Ingest icon, banner, and screenshots from the source repo
+- **Plugins**: Restrict plugin and theme install/uninstall to the admin dashboard
+- **Mail**: Multi-server JMAP support
+- **Settings**: Fulltext search across the settings sidebar
+- **Settings**: Sub-result rows with highlight in settings search
+- **Settings**: Surface plugin settings as search sub-results
+- **Settings**: Remove experimental tags from themes, plugins, and sender favicons
+- **Viewer**: Redesigned external-mail banner above attachments
+- **Calendar**: Calendar invitation banner expands on row click
+- **Calendar**: Calendar invitation banner is now collapsible
+
+### Fixes
+
+- **Admin**: Collapse admin panel into a single tabbed page
+- **Plugins**: Inline plugin configure panel to avoid dev-mode hang
+- **Plugins**: Resolve `PLUGIN_DEV_DIR` plugins in admin config route
+- **Plugins**: Add missing body type assertion in `createPluginAPI` fetch options
+- **Plugins**: Propagate `settingsSchema`
+- **Settings**: Highlight plugin and theme cards in search results
+- **Settings**: Open plugin card on first click of a setting sub-result
+- **Settings**: Drop ghost sub-results from account and language search
+- **Settings**: Improve search highlight styling
+- **Viewer**: Show notification banners above attachments
+- **Viewer**: Rework S/MIME banner to match calendar invitation
+- **Viewer**: Close PDF preview on Escape before email viewer
+- **Viewer**: Render PDF previews via `<object>` with `blob:` in object-src CSP (#253)
+- **Calendar**: Align invitation icon with sender avatar column
+- **Calendar**: Fix invitation picker clipping (#250)
+- **Auth**: Read `activeAccountId` from authStore in account selectors
+- **UI**: Adjust toast item border radius and progress bar styles
+- **UI**: Remove fly-in animation from context menu submenus
+- **i18n**: Add missing Czech flag icon
+
+### i18n
+
+- Add missing translation keys across 15 locales
+
+## 1.6.1 (2026-05-04)
+
+### Features
+
+- **Updates**: Update-available detection with non-dismissible notice and dev-reload refresh
+- **Plugins**: New plugin hooks for compose, attachments, search, lifecycle, and routing
+- **Sharing**: Share indicators for calendars and contacts, updated JMAP capabilities (#244)
+- **Mail**: Auto-add recipients to trusted senders when replying
+- **Identity**: Sanitize identity display name to prevent invalid `From` headers
+
+### Fixes
+
+- **Mobile**: Synchronize mobile submenu view with browser history for better navigation
+- **Viewer**: Update email viewer styles to improve overflow handling
+- **Auth**: Ensure `cookieSlot` consistency during account updates in auth store
+- **Auth**: Thread per-account cookie slot through OAuth flows
+- **Calendar**: Square the colored left marker on calendar events
+- **About**: Show git commit in About instead of "unknown"
+
+### i18n
+
+- Update mailbox context menu translations across 12 locales
+
 ## 1.6.0 (2026-05-01)

 ### Features
@@ -10,14 +10,17 @@

 # 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. Modern protocol, modern tooling, modern UI. Not a SaaS. Not a startup. Not for sale.

-## Join our Community
-**New to the project or looking for a place to start?** You don't need to be an expert to contribute! Whether you need help setting up your environment, want to report a bug, or are interested in helping with translations, our Discord is the best place to connect.
+If that resonates with you, we'd love your help. This guide covers how to get the project running, the conventions we follow, and how to land your first change.

-* **Get Support:** Get real-time help with development hurdles.
-* **Contribute:** Share ideas, suggest features, or help us improve documentation.
-* **Collaborate:** Meet the team and other contributors working to make Bulwark better.
+## Join the Community
+
+You don't need to be an expert to contribute. Whether you're setting up your dev environment for the first time, filing a bug, or translating a string, the Discord is the fastest way to get unstuck and 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)

@@ -94,37 +97,31 @@ 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 15 additional locales (cs, de, es, fr, it, ja, ko, lv, nl, pl, pt, ru, tr, uk, zh).

-### Key Rules
+### Rules

-1. **Never hardcode user-facing text** - Always use translations:
+1. **Never hardcode user-facing text** — always use translations:

   ```tsx
   const t = useTranslations("namespace");
   return <div>{t("key")}</div>;
   ```

-2. **Translation file locations**:
-   - English: `/locales/en/common.json`
-   - French: `/locales/fr/common.json`
+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.

 3. **Namespace organization**:
-   - `login.*` - Login page strings
-   - `sidebar.*` - Sidebar navigation
-   - `email_list.*` - Email list component
-   - `email_viewer.*` - Email viewer component
-   - `email_composer.*` - Email composer
-   - `common.*` - Shared strings
-   - `notifications.*` - Toast/alert messages
-   - `settings.*` - Settings page
+   - `login.*` — login page
+   - `sidebar.*` — sidebar navigation
+   - `email_list.*` — email list
+   - `email_viewer.*` — email viewer
+   - `email_composer.*` — composer
+   - `settings.*` — settings page
+   - `notifications.*` — toasts and alerts
+   - `common.*` — shared strings

-4. **Adding new strings**:
-   - Add to **both** English and French translation files
-   - Use descriptive, hierarchical keys
-   - Keep translations consistent in tone
+4. **Locale-aware navigation**:

-5. **Locale-aware navigation**:
   ```tsx
   router.push(`/${params.locale}/settings`);
   ```
@@ -203,16 +200,11 @@ webmail/

 ## 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
- Report security vulnerabilities privately (e.g. bulwark@rbm.systems)
+- **Block external content** by default — privacy is the point
+- **Report vulnerabilities privately** to bulwark@rbm.systems, not via public issues

 ## Questions?

-If you have questions about contributing, feel free to:
-
- Open an issue for discussion
- Check existing issues and pull requests
-
-Thank you for helping improve Bulwark Webmail!
+Open an issue, search existing ones, or ask in Discord. Thanks for helping build the webmail we all wished existed.
@@ -8,6 +8,10 @@ ENV NEXT_TELEMETRY_DISABLED=1
 # at build time, so it cannot be changed without rebuilding.
 ARG NEXT_PUBLIC_BASE_PATH=
 ENV NEXT_PUBLIC_BASE_PATH=$NEXT_PUBLIC_BASE_PATH
+# 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
@@ -30,7 +34,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/telemetry && chown -R nextjs:nodejs /app/data
+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
@@ -2,19 +2,23 @@

 ## Mail

- Read, compose, reply, reply-all, and forward with a Tiptap rich text editor (inline images, drag-and-drop embedding)
+- Read, compose, reply, reply-all, and forward with a Tiptap rich text editor (inline images, drag-and-drop embedding, tables)
 - Gmail-style threading with inline expansion and an optional conversation toggle
 - Unified mailbox view across all connected accounts
- Draft auto-save with identity preservation
- Attachment upload, download, and inline preview; forgotten-attachment warning
+- Three selectable mail layouts: split (three-pane), focused list, and reading pane at bottom
+- Draft auto-save with identity preservation, persisted HTML body, and proper `In-Reply-To` / `References` headers on replies
+- Attachment upload, download, drag-out to local file system, and inline preview; image thumbnails and forgotten-attachment warning
 - Full-text search with JMAP filter panel, search chips, wildcards, OR conditions, and cross-mailbox queries
 - Batch operations – multi-select, archive, delete, move, tag
 - Archive modes – direct, by year, or by month
 - Multi-tag support with color labels, reordering, and drag-and-drop assignment
 - Star/unstar with configurable mark-as-read delay
- Virtual scrolling for large mailboxes
+- Virtual scrolling for large mailboxes plus prefetching of initial email data on login
 - Quick reply, hover actions, sender avatars (favicon-based), and recipient popovers
 - Plain-text composer mode and Reply-To support
+- Configurable signature position (above or below quoted text) per identity
+- From-header override in the composer with optional catch-all auto-reply: replies to an alias on a domain you own auto-fill the alias as the sender even when it isn't a configured identity
+- `.eml` file import via folder right-click menu
 - TNEF (`winmail.dat`) extraction and `message/rfc822` unwrapping
 - Folder management with icon picker, subfolders, and sidebar counts
 - Print directly from the viewer
@@ -79,7 +83,7 @@

 ## Interface

- Three-pane layout with resizable columns
+- Selectable mail layouts (split three-pane, focused list, reading pane at bottom) with resizable columns
 - Dark and light themes with intelligent email color transformation
 - Responsive desktop, tablet, and mobile layouts
 - Full keyboard navigation
@@ -100,25 +104,32 @@ Automatic browser detection with persistent preference. Configurable locale URL

 ## Identity & Multi-Account

- Up to 5 simultaneous accounts with instant switching and per-account session persistence
+- Multiple simultaneous accounts with instant switching and per-account session persistence; the 5-account cap is lifted on HTTP/2 servers (limited by browser connection pooling on HTTP/1.1)
 - Account switcher with connection status and default account selection
 - Multiple sender identities with per-identity signatures, automatic sync, and badges in viewer/list
- Sub-addressing (`user+tag@domain.com`) with contextual tag suggestions
+- Configurable signature position (above or below quoted text)
+- Sub-addressing (`user+tag@domain.com`) with configurable delimiter and contextual tag suggestions
 - Shared folders across accounts
+- Multiple JMAP servers per deployment with optional auto-pick by email domain
 - Optional custom JMAP endpoints on the login form (`ALLOW_CUSTOM_JMAP_ENDPOINT`)

 ## Admin & Extensibility

- Stalwart admin dashboard with dedicated policy sections
- Plugin system – schema-driven config UI, render and intercept hooks, `onAvatarResolve` and i18n APIs, calendar event slots, and managed policy enforcement
+- Web setup wizard for first launch – guides through JMAP server(s), OAuth/OIDC, session secret, logging, branding (with file upload), and admin password; persists to the admin config dir, no `.env.local` editing required
+- Stalwart admin dashboard with dedicated policy sections, collapsed into a single tabbed page
+- Split admin storage: `ADMIN_CONFIG_DIR` (operator-authored, mountable read-only after setup) and `ADMIN_STATE_DIR` (runtime audit log and login timestamps)
+- Plugin system – schema-driven config UI, render and intercept hooks, `onAvatarResolve`, `onBeforeEmailSend`, composer-sidebar and email-banner slots, calendar event slots, i18n APIs, and managed policy enforcement
+- Plugin hot-reload and dev-folder loading, on-demand `src/` bundling via esbuild, and `http:fetch` permission with `httpOrigins`
 - Themes – upload, enforce, and manage admin-controlled themes as ZIP bundles
- Extension marketplace – browse and install plugins and themes from a configurable directory (`EXTENSION_DIRECTORY_URL`)
+- Extension marketplace – browse and install plugins and themes from a configurable directory (`EXTENSION_DIRECTORY_URL`); install/uninstall restricted to the admin dashboard
 - Bundled plugins including Jitsi Meet calendar integration

 ## Operations

- Progressive Web App with service worker, install prompt, and dynamic manifest
- Automatic update check with server-side logging of new releases
+- Progressive Web App with service worker, install prompt, web push notifications for inbox mail, and dynamic manifest
+- Automatic update check with server-side logging of new releases and a non-dismissible update notice
 - Structured logging (`text` or `json`) with category-based levels
+- Anonymous instance telemetry (opt-out via admin UI or `BULWARK_TELEMETRY=off`) – version, platform, bucketed account counts, feature toggles only
 - Release (`main`) and development (`dev`) Docker images on GHCR
+- Subpath deployment via `NEXT_PUBLIC_BASE_PATH` for mounting behind a reverse proxy
 - Demo mode with fixture data – no mail server required
@@ -12,13 +12,37 @@ A modern, self-hosted webmail client for [Stalwart Mail Server](https://stalw.ar

 [![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.6.0-green.svg?logo=git&logoColor=white)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/version-1.6.5-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)
+[![Grafana](https://img.shields.io/badge/grafana-dashboard-orange?logo=grafana&logoColor=white)](https://grafana.external.bulwarkmail.org/)

 </div>

 ---

+## Installer
+
+New in **1.6.4**: a web-based setup wizard runs on first launch – no `.env.local` editing, no shelling into the container.
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="screenshots/installer-dark.png" />
+  <img src="screenshots/installer.png" alt="Setup wizard" width="100%" />
+</picture>
+
+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>
@@ -62,7 +86,7 @@ Bulwark is a full webmail suite, not just an inbox. It bundles the four apps mos
 - **Contacts** – multiple address books, groups, vCard import/export
 - **Files** – Stalwart's JMAP FileNode storage with previews and folder upload

-Plus the infrastructure around them: OAuth2 / OIDC SSO, TOTP 2FA, multi-account (up to 5 at once), 15 languages, PWA install, dark/light themes, a plugin system with an extension marketplace, and a admin dashboard.
+Plus the infrastructure around them: a web setup wizard, OAuth2 / OIDC SSO, TOTP 2FA, multi-account with HTTP/2 connection pooling, 15 languages, PWA install, dark/light themes, a plugin system with an extension marketplace, and an admin dashboard.

 Full feature list: **[FEATURES.md](FEATURES.md)**.

@@ -73,28 +97,25 @@ Full feature list: **[FEATURES.md](FEATURES.md)**.
 ### Docker

 ```bash
-docker run -d -p 3000:3000 \
-  -e JMAP_SERVER_URL=https://mail.example.com \
-  ghcr.io/bulwarkmail/webmail:latest
+docker run -d -p 3000:3000 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
 ```

+On first launch, open `http://localhost:3000` – the **web setup wizard** walks you through JMAP server, OAuth, branding, and the admin password. No `.env.local` editing required. Existing installs that already define `JMAP_SERVER_URL` in their environment skip the wizard and keep the env-managed flow described 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
@@ -107,13 +128,13 @@ npm run lint

 ## Configuration

+Most deployments are configured through the **setup wizard** (on first launch) and the **admin dashboard** thereafter; values are written to the admin config directory rather than `.env.local`. Environment variables remain supported for operators who prefer file-driven configuration or read-only / immutable infrastructure. When an environment variable is set, it takes precedence over the corresponding admin-managed value, so setting `JMAP_SERVER_URL` will hide that field from the wizard and lock it in the admin UI.
+
 All variables are evaluated at runtime, so Docker deployments can be reconfigured without rebuilding. Edit `.env.local`:

 ```env
-# Required
+# Optional – overrides whatever the wizard writes
 JMAP_SERVER_URL=https://mail.example.com
-
-# Optional
 APP_NAME=My Webmail
 ```

@@ -217,6 +238,19 @@ 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>Subpath / reverse proxy mount</summary>

@@ -1 +1 @@
-1.6.0
+1.6.5
@@ -43,6 +43,7 @@ function OAuthCallbackInner() {

      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");
@@ -52,12 +53,13 @@ function OAuthCallbackInner() {
      const prefix = getPathPrefix(params.locale as string);
      const redirectUri = `${window.location.origin}${prefix}/${params.locale}/auth/callback`;

-      loginWithOAuth(serverUrl, code, codeVerifier, redirectUri)
+      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 {
@@ -15,6 +15,7 @@ import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
 import { useEmailStore } from "@/stores/email-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useIdentityStore } from "@/stores/identity-store";
+import { useAccountStore } from "@/stores/account-store";
 import { toast } from "@/stores/toast-store";
 import { useIsMobile } from "@/hooks/use-media-query";
 import { Button } from "@/components/ui/button";
@@ -37,6 +38,7 @@ import { useRefreshGesture } from "@/hooks/use-refresh-gesture";
 import { downloadEventICS } from "@/lib/calendar-ics-export";
 import { ICalImportModal } from "@/components/calendar/ical-import-modal";
 import { ICalSubscriptionModal } from "@/components/calendar/ical-subscription-modal";
+import { ProtocolAccountPicker } from "@/components/protocol/protocol-account-picker";
 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";
@@ -56,6 +58,8 @@ import { CreateCalendarModal } from "@/components/calendar/create-calendar-modal
 import { getUserParticipantId } from "@/lib/calendar-participants";
 import { generateBirthdayEvents, createBirthdayCalendar, BIRTHDAY_CALENDAR_ID } from "@/lib/birthday-calendar";
 import { debug } from "@/lib/debug";
+import { consumePendingWebcal, hasPendingWebcal, subscribeToPendingWebcal } from "@/lib/protocol-handlers/session";
+import type { ParsedWebcal } from "@/lib/protocol-handlers/webcal";

 type PendingScopeAction =
  | { type: "edit"; event: CalendarEvent; updates: Partial<CalendarEvent>; sendScheduling?: boolean }
@@ -68,9 +72,10 @@ function isRecurringEvent(event: CalendarEvent): boolean {
 export default function CalendarPage() {
  const router = useRouter();
  const t = useTranslations("calendar");
+  const tWebcalAction = useTranslations("calendar.webcal_action");
  const isMobile = useIsMobile();
  const { showAppsModal, inlineApp, loadedApps, handleManageApps, handleInlineApp, closeInlineApp, closeAppsModal } = useSidebarApps();
-  const { client, isAuthenticated, logout, checkAuth, isLoading: authLoading } = useAuthStore();
+  const { client, isAuthenticated, logout, checkAuth, switchAccount, activeAccountId, isLoading: authLoading } = useAuthStore();
  const [initialCheckDone, setInitialCheckDone] = useState(() => useAuthStore.getState().isAuthenticated && !!useAuthStore.getState().client);
  const { quota, isPushConnected } = useEmailStore();
  const {
@@ -96,6 +101,10 @@ export default function CalendarPage() {
  const [showEventModal, setShowEventModal] = useState(false);
  const [showImportModal, setShowImportModal] = useState(false);
  const [showSubscriptionModal, setShowSubscriptionModal] = useState(false);
+  const [pendingSubscription, setPendingSubscription] = useState<{ url: string; name: string } | null>(null);
+  const [showWebcalActionChoice, setShowWebcalActionChoice] = useState(false);
+  const [pendingWebcalAccountChoice, setPendingWebcalAccountChoice] = useState<ParsedWebcal | null>(null);
+  const [isProtocolAccountSwitching, setIsProtocolAccountSwitching] = useState(false);
  const [editingSubscription, setEditingSubscription] = useState<string | null>(null);
  const [sharingCalendarId, setSharingCalendarId] = useState<string | null>(null);
  const [defaultCalendarIdForCreate, setDefaultCalendarIdForCreate] = useState<string | undefined>(undefined);
@@ -156,10 +165,10 @@ export default function CalendarPage() {
    if (initialCheckDone && !isAuthenticated && !authLoading) {
      try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
      redirectToLogin();
-    } else if (client && !supportsCalendar) {
+    } else if (client && !supportsCalendar && !pendingWebcalAccountChoice && !isProtocolAccountSwitching && !pendingSubscription && !showWebcalActionChoice && !hasPendingWebcal()) {
      router.push("/");
    }
-  }, [initialCheckDone, isAuthenticated, authLoading, client, supportsCalendar, router]);
+  }, [initialCheckDone, isAuthenticated, authLoading, client, supportsCalendar, pendingWebcalAccountChoice, isProtocolAccountSwitching, pendingSubscription, showWebcalActionChoice, router]);

  useEffect(() => {
    if (error) {
@@ -167,6 +176,84 @@ export default function CalendarPage() {
    }
  }, [error]);

+  const getWebcalProtocolAccounts = useCallback(() => {
+    const connectedClients = useAuthStore.getState().getAllConnectedClients();
+    return useAccountStore.getState().accounts.filter((account) => {
+      if (!account.isConnected) return false;
+      return connectedClients.get(account.id)?.supportsCalendars() === true;
+    });
+  }, []);
+
+  const openWebcalForAccount = useCallback(async (pending: ParsedWebcal, accountId: string) => {
+    setIsProtocolAccountSwitching(true);
+    try {
+      if (useAuthStore.getState().activeAccountId !== accountId) {
+        await switchAccount(accountId);
+      }
+      setPendingWebcalAccountChoice(null);
+      setPendingSubscription({
+        url: pending.subscriptionUrl,
+        name: pending.suggestedName,
+      });
+      setShowWebcalActionChoice(true);
+    } finally {
+      setIsProtocolAccountSwitching(false);
+    }
+  }, [switchAccount]);
+
+  const handleWebcalProtocolRequest = useCallback((pending: ParsedWebcal) => {
+    const protocolAccounts = getWebcalProtocolAccounts();
+    if (protocolAccounts.length > 1) {
+      setPendingWebcalAccountChoice(pending);
+      return;
+    }
+
+    if (protocolAccounts.length === 0 && !supportsCalendar) {
+      return;
+    }
+
+    const accountId = protocolAccounts[0]?.id ?? activeAccountId;
+    if (accountId) {
+      void openWebcalForAccount(pending, accountId);
+      return;
+    }
+
+    setPendingSubscription({
+      url: pending.subscriptionUrl,
+      name: pending.suggestedName,
+    });
+    setShowWebcalActionChoice(true);
+  }, [activeAccountId, getWebcalProtocolAccounts, openWebcalForAccount, supportsCalendar]);
+
+  const closeWebcalActionChoice = useCallback(() => {
+    setShowWebcalActionChoice(false);
+    setPendingSubscription(null);
+  }, []);
+
+  const handleImportWebcal = useCallback(() => {
+    setShowWebcalActionChoice(false);
+    setShowImportModal(true);
+  }, []);
+
+  const handleSubscribeWebcal = useCallback(() => {
+    setShowWebcalActionChoice(false);
+    setShowSubscriptionModal(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isAuthenticated || !client) return;
+
+    const openPendingWebcal = () => {
+      const pending = consumePendingWebcal();
+      if (!pending) return;
+
+      handleWebcalProtocolRequest(pending);
+    };
+
+    openPendingWebcal();
+    return subscribeToPendingWebcal(openPendingWebcal);
+  }, [isAuthenticated, client, handleWebcalProtocolRequest]);
+
  useEffect(() => {
    if (client && !hasFetched.current) {
      hasFetched.current = true;
@@ -955,7 +1042,54 @@ export default function CalendarPage() {
    });
  }, [events, selectedCalendarIds, visibleEvents]);

-  if (!isAuthenticated || !supportsCalendar) return null;
+  const renderWebcalAccountPicker = () => pendingWebcalAccountChoice ? (
+    <ProtocolAccountPicker
+      kind="webcal"
+      operation={pendingWebcalAccountChoice}
+      accounts={getWebcalProtocolAccounts()}
+      activeAccountId={activeAccountId}
+      isSwitching={isProtocolAccountSwitching}
+      onSelect={(accountId) => void openWebcalForAccount(pendingWebcalAccountChoice, accountId)}
+      onCancel={() => setPendingWebcalAccountChoice(null)}
+    />
+  ) : null;
+
+  const renderWebcalActionChoice = () => showWebcalActionChoice && pendingSubscription ? (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-[1px]" onClick={closeWebcalActionChoice} aria-hidden="true" />
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={tWebcalAction("title")}
+        className="relative bg-background border border-border rounded-lg shadow-xl w-full max-w-md mx-4 animate-in zoom-in-95 duration-200"
+      >
+        <div className="px-6 py-4 border-b border-border">
+          <h2 className="text-lg font-semibold">{tWebcalAction("title")}</h2>
+          <p className="text-sm text-muted-foreground mt-1">{tWebcalAction("description", { name: pendingSubscription.name })}</p>
+        </div>
+        <div className="px-6 py-4 space-y-3">
+          <Button variant="outline" className="w-full justify-start h-auto py-3" onClick={handleImportWebcal}>
+            <span className="text-left">
+              <span className="block font-medium">{tWebcalAction("import_title")}</span>
+              <span className="block text-xs text-muted-foreground mt-0.5">{tWebcalAction("import_description")}</span>
+            </span>
+          </Button>
+          <Button variant="outline" className="w-full justify-start h-auto py-3" onClick={handleSubscribeWebcal}>
+            <span className="text-left">
+              <span className="block font-medium">{tWebcalAction("subscribe_title")}</span>
+              <span className="block text-xs text-muted-foreground mt-0.5">{tWebcalAction("subscribe_description")}</span>
+            </span>
+          </Button>
+        </div>
+        <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-border">
+          <Button variant="ghost" onClick={closeWebcalActionChoice}>{tWebcalAction("cancel")}</Button>
+        </div>
+      </div>
+    </div>
+  ) : null;
+
+  if (!isAuthenticated) return null;
+  if (!supportsCalendar) return renderWebcalAccountPicker();

  const renderView = () => {
    if (isLoading && calendars.length === 0) {
@@ -1378,14 +1512,23 @@ export default function CalendarPage() {
        <ICalImportModal
          calendars={calendars}
          client={client}
-          onClose={() => setShowImportModal(false)}
+          initialUrl={pendingSubscription?.url}
+          onClose={() => {
+            setShowImportModal(false);
+            setPendingSubscription(null);
+          }}
        />
      )}

      {showSubscriptionModal && client && (
        <ICalSubscriptionModal
          client={client}
-          onClose={() => setShowSubscriptionModal(false)}
+          initialUrl={pendingSubscription?.url}
+          initialName={pendingSubscription?.name}
+          onClose={() => {
+            setShowSubscriptionModal(false);
+            setPendingSubscription(null);
+          }}
        />
      )}

@@ -1402,6 +1545,8 @@ export default function CalendarPage() {
      })()}

      <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
+      {renderWebcalAccountPicker()}
+      {renderWebcalActionChoice()}
      <RecurrenceScopeDialog
        isOpen={!!pendingScopeAction}
        actionType={pendingScopeAction?.type || "edit"}
@@ -5,6 +5,7 @@ import { CalendarAlertProvider } from "@/components/providers/calendar-alert-pro
 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 { locales } from "@/i18n/routing";

 export default async function LocaleLayout({
@@ -32,7 +33,9 @@ export default async function LocaleLayout({
          <RateLimitToastProvider>
            <EmbeddedBridgeProvider>
              <TourProvider>
+                <ProtocolLaunchHandlerProvider>
                  {children}
+                </ProtocolLaunchHandlerProvider>
              </TourProvider>
            </EmbeddedBridgeProvider>
          </RateLimitToastProvider>
@@ -7,6 +7,7 @@ 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 { useShallow } from "zustand/react/shallow";
 import { useConfig } from "@/hooks/use-config";
@@ -16,6 +17,15 @@ import { AlertCircle, Loader2, X, Info, Eye, EyeOff, LogIn, Sun, Moon, Monitor,
 import { discoverOAuth, 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";
+
+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";
@@ -28,7 +38,12 @@ const THEME_OPTIONS = [

 function VersionBadge() {
  const [copied, setCopied] = useState(false);
-  const versionInfo = `Version: ${APP_VERSION}\nBuild: ${GIT_COMMIT}`;
+  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(() => {
@@ -37,16 +52,49 @@ function VersionBadge() {
    });
  };

+  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">
-      <p className="peer text-center text-xs text-muted-foreground/40 cursor-default">
-        v{APP_VERSION}
-      </p>
+      {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}
@@ -69,7 +117,7 @@ export default function LoginPage() {
  const isAddAccountMode = searchParams.get("mode") === "add-account";
  const { login, loginDemo, isLoading, error, clearError, isAuthenticated } = useAuthStore();
  const { theme, setTheme, initializeTheme } = useThemeStore(useShallow((s) => ({ theme: s.theme, setTheme: s.setTheme, initializeTheme: s.initializeTheme })));
-  const { appName, jmapServerUrl: serverUrl, oauthEnabled, oauthOnly, oauthClientId, oauthIssuerUrl, rememberMeEnabled, devMode, demoMode, loginLogoLightUrl, loginLogoDarkUrl, loginCompanyName, loginImprintUrl, loginPrivacyPolicyUrl, loginWebsiteUrl, isLoading: configLoading, error: configError, autoSsoEnabled, embeddedMode: _embeddedMode, allowCustomJmapEndpoint } = useConfig();
+  const { appName, jmapServerUrl: configuredServerUrl, oauthEnabled, oauthOnly, oauthClientId: globalOauthClientId, oauthIssuerUrl: globalOauthIssuerUrl, rememberMeEnabled, devMode, demoMode, loginLogoLightUrl, loginLogoDarkUrl, loginCompanyName, loginImprintUrl, loginPrivacyPolicyUrl, loginWebsiteUrl, isLoading: configLoading, error: configError, autoSsoEnabled, embeddedMode: _embeddedMode, allowCustomJmapEndpoint, jmapServers, jmapServerAutoPickByDomain } = useConfig();
  const resolvedTheme = useThemeStore((s) => s.resolvedTheme);

  const [formData, setFormData] = useState({
@@ -77,6 +125,18 @@ export default function LoginPage() {
    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);
@@ -117,6 +177,27 @@ export default function LoginPage() {
    }
  }, [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') {
@@ -214,7 +295,9 @@ export default function LoginPage() {

  useEffect(() => {
    if (!oauthEnabled || !serverUrl) return;
-    discoverOAuth(oauthIssuerUrl || serverUrl)
+    setOauthDiscoveryDone(false);
+    setOauthMetadata(null);
+    discoverOAuth(effectiveOauthIssuerUrl || serverUrl)
      .then((metadata) => {
        setOauthMetadata(metadata);
        setOauthDiscoveryDone(true);
@@ -223,7 +306,7 @@ export default function LoginPage() {
        setOauthMetadata(null);
        setOauthDiscoveryDone(true);
      });
-  }, [oauthEnabled, serverUrl, oauthIssuerUrl]);
+  }, [oauthEnabled, serverUrl, effectiveOauthIssuerUrl]);

  // Auto-SSO: when enabled with OAUTH_ONLY, skip the login page entirely
  const ssoError = searchParams.get("sso_error");
@@ -238,7 +321,11 @@ export default function LoginPage() {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
-        body: JSON.stringify({ redirect_uri: redirectUri, locale: params.locale }),
+        body: JSON.stringify({
+          redirect_uri: redirectUri,
+          locale: params.locale,
+          server_id: selectedServer?.id,
+        }),
      });

      if (!res.ok) {
@@ -264,7 +351,7 @@ export default function LoginPage() {
    } catch {
      setOauthLoading(false);
    }
-  }, [params.locale]);
+  }, [params.locale, selectedServer?.id]);

  useEffect(() => {
    if (!autoSsoEnabled || !oauthOnly || !oauthDiscoveryDone || !oauthMetadata) return;
@@ -405,7 +492,7 @@ export default function LoginPage() {
  };

  const handleOAuthLogin = async () => {
-    if (!oauthMetadata || !oauthClientId) return;
+    if (!oauthMetadata || !effectiveOauthClientId) return;
    setOauthLoading(true);

    const verifier = generateCodeVerifier();
@@ -414,16 +501,36 @@ export default function LoginPage() {
    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", allowCustomJmapEndpoint ? jmapEndpoint : 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("state", state);
@@ -436,7 +543,10 @@ export default function LoginPage() {
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

-    const effectiveServerUrl = allowCustomJmapEndpoint ? jmapEndpoint : serverUrl;
+    // 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);
    const success = await login(
      effectiveServerUrl,
      formData.username,
@@ -557,14 +667,18 @@ 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" />
-                  <p className="text-sm text-red-600 dark:text-red-400 leading-relaxed">
+                  <div className="w-10 h-10 rounded-full bg-destructive/15 text-destructive flex items-center justify-center flex-shrink-0 shadow-sm">
+                    <AlertCircle className="w-5 h-5" />
+                  </div>
+                  <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>
              )}

              <Button
@@ -704,38 +818,46 @@ 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" />
-                <p className="text-sm text-blue-700 dark:text-blue-300 flex-1 leading-relaxed">
+                <div className="w-10 h-10 rounded-full bg-info/15 text-info flex items-center justify-center flex-shrink-0 shadow-sm">
+                  <Info className="w-5 h-5" />
+                </div>
+                <div className="flex-1 min-w-0 self-center flex items-center gap-2">
+                  <p className="text-sm text-info flex-1 leading-relaxed">
                    {t("session_expired")}
                  </p>
                  <button
                    type="button"
                    onClick={() => setSessionExpired(false)}
-                  className="p-0.5 rounded-md hover:bg-blue-500/10 transition-colors flex-shrink-0"
+                    className="p-1 rounded-md text-info hover:bg-info/10 transition-colors flex-shrink-0"
                    aria-label={t("dismiss")}
                  >
-                  <X className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+                    <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" />
-                <p className="text-sm text-red-600 dark:text-red-400 leading-relaxed">
+                <div className="w-10 h-10 rounded-full bg-destructive/15 text-destructive flex items-center justify-center flex-shrink-0 shadow-sm">
+                  <AlertCircle className="w-5 h-5" />
+                </div>
+                <div className="flex-1 min-w-0 self-center">
+                  <p className="text-sm text-destructive leading-relaxed">
                    {error === 'invalid_credentials' && showTotpField && totpCode
                      ? t('error.totp_invalid')
                      : t(`error.${error}`) || t("error.generic")}
                  </p>
                </div>
+              </div>
            )}

            {/* Dev Mode: One-click login */}
@@ -786,12 +908,16 @@ export default function LoginPage() {
                    )}
                  </Button>
                ) : oauthDiscoveryDone ? (
-                  <div className="p-3.5 bg-warning/10 border border-warning/20 rounded-xl flex items-start gap-2">
-                    <AlertCircle className="w-4 h-4 text-warning flex-shrink-0 mt-0.5" />
-                    <p className="text-sm text-warning">
+                  <div className="p-3 rounded-xl border border-warning/20 bg-warning/5 flex items-start gap-3">
+                    <div className="w-10 h-10 rounded-full bg-warning/15 text-warning flex items-center justify-center flex-shrink-0 shadow-sm">
+                      <AlertCircle className="w-5 h-5" />
+                    </div>
+                    <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">
                    <Loader2 className="w-6 h-6 animate-spin text-primary" />
@@ -802,8 +928,32 @@ export default function LoginPage() {
              /* Login Form */
              <form onSubmit={handleSubmit} className="space-y-5">
                <fieldset disabled={isLoading} className="space-y-4">
-                  {/* JMAP Endpoint field (when custom endpoints are allowed) */}
-                  {allowCustomJmapEndpoint && (
+                  {/* 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")}
@@ -1018,12 +1168,16 @@ export default function LoginPage() {
                )}

                {oauthEnabled && oauthDiscoveryDone && !oauthMetadata && (
-                  <div className="mt-2 p-3 bg-warning/10 border border-warning/20 rounded-xl flex items-start gap-2">
-                    <AlertCircle className="w-4 h-4 text-warning flex-shrink-0 mt-0.5" />
-                    <p className="text-sm text-warning">
+                  <div className="mt-2 p-3 rounded-xl border border-warning/20 bg-warning/5 flex items-start gap-3">
+                    <div className="w-10 h-10 rounded-full bg-warning/15 text-warning flex items-center justify-center flex-shrink-0 shadow-sm">
+                      <AlertCircle className="w-5 h-5" />
+                    </div>
+                    <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>
            )}
@@ -1,12 +1,14 @@
 "use client";

 import { useEffect, useState, useRef, useMemo, useCallback } from "react";
+import { usePathname } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { Sidebar } from "@/components/layout/sidebar";
 import { EmailList } from "@/components/email/email-list";
 import { EmailViewer } from "@/components/email/email-viewer";
 import { EmailComposer } from "@/components/email/email-composer";
 import type { ComposerDraftData } from "@/components/email/email-composer";
+import { ProtocolAccountPicker } from "@/components/protocol/protocol-account-picker";
 import { ThreadConversationView } from "@/components/email/thread-conversation-view";
 import { MobileHeader } from "@/components/layout/mobile-header";
 import { ThreadGroup, Email, isUnifiedMailboxId, UNIFIED_ROLE_BY_ID } from "@/lib/jmap/types";
@@ -52,12 +54,18 @@ import { FilePreviewModal } from "@/components/files/file-preview-modal";
 import { isFilePreviewable } from "@/lib/file-preview";
 import { appendPlainTextSignature } from "@/lib/signature-utils";
 import { computeReplyThreadingHeaders } from "@/lib/email-threading";
+import { resolveReplyFrom } from "@/lib/reply-identity";
 import { Search, Filter, ChevronDown, X, Paperclip, Star, Mail, MailOpen, RotateCcw, PenSquare, PenLine, CheckSquare, Square, AlertTriangle } from "lucide-react";
 import { ResizeHandle } from "@/components/layout/resize-handle";
 import { Button } from "@/components/ui/button";
 import { useConfig } from "@/hooks/use-config";
 import { usePluginStore } from "@/stores/plugin-store";
 import { useThemeStore } from "@/stores/theme-store";
+import { consumePendingMailto, subscribeToPendingMailto } from "@/lib/protocol-handlers/session";
+import type { ParsedMailto } from "@/lib/protocol-handlers/mailto";
+import { plainTextToComposerBody } from "@/lib/email-composer-utils";
+import { appLifecycleHooks, uiHooks, routerHooks, toastHooks, emailHooks } from "@/lib/plugin-hooks";
+import { emailToReadView } from "@/lib/plugin-projection";


 export default function Home() {
@@ -70,6 +78,7 @@ export default function Home() {
  const [composerDraftText, setComposerDraftText] = useState("");
  const [pendingDraft, setPendingDraft] = useState<ComposerDraftData | null>(null);
  const [composerSessionId, setComposerSessionId] = useState(0);
+  const suppressComposerStateSaveSessionRef = useRef<number | null>(null);
  const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
  const { dialogProps: promptDialogProps, prompt: promptDialog } = usePromptDialog();
  const { showAppsModal, inlineApp, loadedApps, handleManageApps, handleInlineApp, closeInlineApp, closeAppsModal } = useSidebarApps();
@@ -85,8 +94,10 @@ export default function Home() {
  const [isLoadingConversation, setIsLoadingConversation] = useState(false);
  const [rateLimitSecondsLeft, setRateLimitSecondsLeft] = useState<number | null>(null);
  const [previewAttachment, setPreviewAttachment] = useState<{ blobId: string; name: string; type?: string } | null>(null);
+  const [pendingMailtoAccountChoice, setPendingMailtoAccountChoice] = useState<ParsedMailto | null>(null);
+  const [isProtocolAccountSwitching, setIsProtocolAccountSwitching] = useState(false);
  const markAsReadTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const { isAuthenticated, client, logout, checkAuth, isLoading: authLoading, connectionLost, isRateLimited, rateLimitUntil } = useAuthStore();
+  const { isAuthenticated, client, logout, checkAuth, switchAccount, activeAccountId, isLoading: authLoading, connectionLost, isRateLimited, rateLimitUntil } = useAuthStore();
  const { identities } = useIdentityStore();
  useIdentitySync();
  const trustedSendersAddressBook = useSettingsStore((state) => state.trustedSendersAddressBook);
@@ -115,9 +126,91 @@ export default function Home() {
    return () => clearInterval(timer);
  }, [isRateLimited, rateLimitUntil]);

+  // Plugin hooks: window-level lifecycle + selection + service-worker messages.
+  // One effect because the listeners share a registration / cleanup window.
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const onFocus = () => { appLifecycleHooks.onWindowFocus.emit(); };
+    const onBlur = () => { appLifecycleHooks.onWindowBlur.emit(); };
+    const onOnline = () => { appLifecycleHooks.onOnline.emit(); };
+    const onOffline = () => { appLifecycleHooks.onOffline.emit(); };
+
+    let selectionTimer: ReturnType<typeof setTimeout> | null = null;
+    const onSelectionChange = () => {
+      if (selectionTimer) clearTimeout(selectionTimer);
+      selectionTimer = setTimeout(() => {
+        const sel = document.getSelection();
+        const text = sel?.toString() ?? '';
+        if (!text) return;
+        const anchorNode = sel?.anchorNode as Node | null;
+        const anchorEl = (anchorNode?.nodeType === Node.ELEMENT_NODE
+          ? anchorNode as Element
+          : anchorNode?.parentElement) ?? null;
+        let source: 'email-body' | 'composer' | 'task-detail' | 'event-detail' | 'other' = 'other';
+        let emailId: string | undefined;
+        if (anchorEl) {
+          if (anchorEl.closest('[data-plugin-source="email-body"], iframe.email-body, .email-viewer-body')) {
+            source = 'email-body';
+            const idEl = anchorEl.closest('[data-email-id]') as HTMLElement | null;
+            emailId = idEl?.dataset.emailId;
+          } else if (anchorEl.closest('[data-plugin-source="composer"], .email-composer')) {
+            source = 'composer';
+          } else if (anchorEl.closest('[data-plugin-source="task-detail"]')) {
+            source = 'task-detail';
+          } else if (anchorEl.closest('[data-plugin-source="event-detail"]')) {
+            source = 'event-detail';
+          }
+        }
+        uiHooks.onTextSelectionChange.emit({ text, source, emailId });
+      }, 150);
+    };
+
+    const onSwMessage = (e: MessageEvent) => {
+      const msg = e.data as { kind?: string; tag?: string; data?: unknown } | null;
+      if (msg && msg.kind === 'notificationclick' && typeof msg.tag === 'string') {
+        toastHooks.onNotificationClick.emit({ tag: msg.tag, data: msg.data });
+      }
+    };
+
+    window.addEventListener('focus', onFocus);
+    window.addEventListener('blur', onBlur);
+    window.addEventListener('online', onOnline);
+    window.addEventListener('offline', onOffline);
+    document.addEventListener('selectionchange', onSelectionChange);
+    if (typeof navigator !== 'undefined' && navigator.serviceWorker) {
+      navigator.serviceWorker.addEventListener('message', onSwMessage);
+    }
+    return () => {
+      window.removeEventListener('focus', onFocus);
+      window.removeEventListener('blur', onBlur);
+      window.removeEventListener('online', onOnline);
+      window.removeEventListener('offline', onOffline);
+      document.removeEventListener('selectionchange', onSelectionChange);
+      if (selectionTimer) clearTimeout(selectionTimer);
+      if (typeof navigator !== 'undefined' && navigator.serviceWorker) {
+        navigator.serviceWorker.removeEventListener('message', onSwMessage);
+      }
+    };
+  }, []);
+
+  // Plugin hooks: route navigation. Tracks Next.js pathname transitions.
+  const pathname = usePathname();
+  const prevPathnameRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!pathname) return;
+    const from = prevPathnameRef.current;
+    if (from === pathname) return;
+    if (from !== null) {
+      routerHooks.onRouteLeave.emit({ path: from });
+      routerHooks.onNavigate.emit({ path: pathname, from });
+    }
+    routerHooks.onRouteEnter.emit({ path: pathname });
+    prevPathnameRef.current = pathname;
+  }, [pathname]);
+
  // Mobile/tablet responsive hooks
  const { isMobile, isTablet } = useDeviceDetection();
-  const { activeView, sidebarOpen, setSidebarOpen, setActiveView, tabletListVisible, setTabletListVisible, sidebarWidth, emailListWidth, setSidebarWidth, setEmailListWidth, persistColumnWidths, sidebarCollapsed, resetSidebarWidth, resetEmailListWidth } = useUIStore();
+  const { activeView, sidebarOpen, setSidebarOpen, setActiveView, tabletListVisible, setTabletListVisible, sidebarWidth, emailListWidth, emailListHeight, setSidebarWidth, setEmailListWidth, setEmailListHeight, persistColumnWidths, sidebarCollapsed, resetSidebarWidth, resetEmailListWidth, resetEmailListHeight } = useUIStore();
  const {
    emails,
    mailboxes,
@@ -222,6 +315,13 @@ export default function Home() {
    [],
  );

+  const getMailtoProtocolAccounts = useCallback(() => {
+    const connectedClients = useAuthStore.getState().getAllConnectedClients();
+    return useAccountStore.getState().accounts.filter((account) =>
+      account.isConnected && connectedClients.has(account.id)
+    );
+  }, []);
+
  // Browser back / forward integration. The restore handler reads the
  // latest values from a ref so we don't have to recreate the callback on
  // every render (and so the popstate listener is never stale).
@@ -551,6 +651,7 @@ export default function Home() {
        const parsed = JSON.parse(stored);
        if (parsed.sidebarWidth) setSidebarWidth(parsed.sidebarWidth);
        if (parsed.emailListWidth) setEmailListWidth(parsed.emailListWidth);
+        if (parsed.emailListHeight) setEmailListHeight(parsed.emailListHeight);
      }
    } catch { /* ignore parse errors */ }
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -564,7 +665,78 @@ export default function Home() {
    }
  }, [initialCheckDone, isAuthenticated, authLoading]);

-  // Load mailboxes and emails when authenticated (only if not already loaded)
+  const openMailtoDraft = useCallback((pending: ParsedMailto) => {
+    const body = useSettingsStore.getState().plainTextMode
+      ? pending.body
+      : plainTextToComposerBody(pending.body);
+
+    if (showComposer) {
+      suppressComposerStateSaveSessionRef.current = composerSessionId;
+    }
+    setComposerSessionId((id) => id + 1);
+    setPendingDraft({
+      to: pending.to.join(", "),
+      cc: pending.cc.join(", "),
+      bcc: pending.bcc.join(", "),
+      subject: pending.subject,
+      body,
+      showCc: pending.cc.length > 0,
+      showBcc: pending.bcc.length > 0,
+      selectedIdentityId: null,
+      subAddressTag: "",
+      mode: "compose",
+      draftId: null,
+    });
+    setComposerMode("compose");
+    setShowComposer(true);
+    if (isMobile) setActiveView("viewer");
+  }, [composerSessionId, isMobile, setActiveView, showComposer]);
+
+  const openMailtoForAccount = useCallback(async (pending: ParsedMailto, accountId: string) => {
+    setIsProtocolAccountSwitching(true);
+    try {
+      if (useAuthStore.getState().activeAccountId !== accountId) {
+        await switchAccount(accountId);
+      }
+      setPendingMailtoAccountChoice(null);
+      openMailtoDraft(pending);
+    } finally {
+      setIsProtocolAccountSwitching(false);
+    }
+  }, [openMailtoDraft, switchAccount]);
+
+  const handleMailtoProtocolRequest = useCallback((pending: ParsedMailto) => {
+    const protocolAccounts = getMailtoProtocolAccounts();
+    if (protocolAccounts.length > 1) {
+      setPendingMailtoAccountChoice(pending);
+      return;
+    }
+
+    const accountId = protocolAccounts[0]?.id ?? activeAccountId;
+    if (accountId) {
+      void openMailtoForAccount(pending, accountId);
+      return;
+    }
+
+    openMailtoDraft(pending);
+  }, [activeAccountId, getMailtoProtocolAccounts, openMailtoDraft, openMailtoForAccount]);
+
+  useEffect(() => {
+    if (!isAuthenticated || !client) return;
+
+    const openPendingMailto = () => {
+      const pending = consumePendingMailto();
+      if (pending) handleMailtoProtocolRequest(pending);
+    };
+
+    openPendingMailto();
+    return subscribeToPendingMailto(openPendingMailto);
+  }, [isAuthenticated, client, handleMailtoProtocolRequest]);
+
+  // Fallback fetch for paths that didn't go through login()'s prefetch
+  // (notably checkAuth on page refresh). The prefetch in auth-store/login()
+  // populates mailboxes before this effect first runs, so on the post-login
+  // path this block is a no-op.
  useEffect(() => {
    if (isAuthenticated && client && mailboxes.length === 0) {
      let retryTimer: ReturnType<typeof setTimeout> | null = null;
@@ -572,18 +744,14 @@ export default function Home() {

      const loadData = async (attempt = 1) => {
        try {
-          // First fetch mailboxes and quota (inbox will be auto-selected in fetchMailboxes)
          await Promise.all([
            fetchMailboxes(client),
            fetchQuota(client)
          ]);

-          // Get the selected mailbox (should be inbox by default)
          const state = useEmailStore.getState();
          const selectedMailboxId = state.selectedMailbox;

-          // On first login the server may still be provisioning mailboxes.
-          // Retry a few times with back-off before giving up.
          if (state.mailboxes.length === 0 && attempt <= 5 && !cancelled) {
            const delay = Math.min(1000 * attempt, 5000);
            debug.log('jmap', `[Mailbox] No mailboxes returned (attempt ${attempt}), retrying in ${delay}ms`);
@@ -591,34 +759,13 @@ export default function Home() {
            return;
          }

-          // Fetch emails for the selected mailbox
          if (selectedMailboxId) {
            await fetchEmails(client, selectedMailboxId);
          } else {
            await fetchEmails(client);
          }

-          // Fetch tag counts
          fetchTagCounts(client);
-
-          // Setup push notifications after successful data load
-          try {
-            // Register state change callback
-            client.onStateChange((change) => handleStateChange(change, client));
-
-            // Start receiving push notifications
-            const pushEnabled = client.setupPushNotifications();
-
-            if (pushEnabled) {
-              setPushConnected(true);
-              debug.log('push', '[Push] Push notifications successfully enabled');
-            } else {
-              debug.log('push', '[Push] Push notifications not available on this server');
-            }
-          } catch (error) {
-            // Push notifications are optional - don't break the app if they fail
-            debug.log('push', '[Push] Failed to setup push notifications:', error);
-          }
        } catch (error) {
          console.error('Error loading email data:', error);
        }
@@ -628,17 +775,33 @@ export default function Home() {
      return () => {
        cancelled = true;
        if (retryTimer) clearTimeout(retryTimer);
-        client.closePushNotifications();
      };
    }
+  }, [isAuthenticated, client, mailboxes.length, fetchMailboxes, fetchEmails, fetchQuota, fetchTagCounts]);
+
+  // Push notifications: set up once per client and tear down when the client
+  // goes away (logout or account switch). Kept separate from the fetch effect
+  // above so it still runs when data was prefetched at login time.
+  useEffect(() => {
+    if (!isAuthenticated || !client) return;
+
+    try {
+      client.onStateChange((change) => handleStateChange(change, client));
+      const pushEnabled = client.setupPushNotifications();
+      if (pushEnabled) {
+        setPushConnected(true);
+        debug.log('push', '[Push] Push notifications successfully enabled');
+      } else {
+        debug.log('push', '[Push] Push notifications not available on this server');
+      }
+    } catch (error) {
+      debug.log('push', '[Push] Failed to setup push notifications:', error);
+    }

-    // Cleanup push notifications on unmount
    return () => {
-      if (client) {
      client.closePushNotifications();
-      }
    };
-  }, [isAuthenticated, client, mailboxes.length, fetchMailboxes, fetchEmails, fetchQuota, fetchTagCounts, handleStateChange, setPushConnected]);
+  }, [isAuthenticated, client, handleStateChange, setPushConnected]);

  // Keep unified mailbox counts in sync when the feature is enabled and more
  // than one account is connected. Runs whenever the set of connected accounts
@@ -655,7 +818,7 @@ export default function Home() {

  // System-notification click handler. The push SW navigates the user back
  // here with `?email=<id>` (specific email it built the toast from) or
-  // `?openLatestUnread=1` (generic "New mail" toast — happens when the
+  // `?openLatestUnread=1` (generic "New mail" toast - happens when the
  // preview API failed). We resolve those params once after the inbox has
  // finished loading and open the right message, then strip the params so a
  // refresh doesn't re-open it.
@@ -790,6 +953,7 @@ export default function Home() {
    fromEmail?: string;
    fromName?: string;
    identityId?: string;
+    envelopeMailFrom?: string;
    attachments?: Array<{ blobId: string; name: string; type: string; size: number; disposition?: 'attachment' | 'inline'; cid?: string }>;
    inReplyTo?: string[];
    references?: string[];
@@ -800,7 +964,7 @@ export default function Home() {
      const effectiveMode = pendingDraft?.mode ?? composerMode;
      const originalEmailId = selectedEmail?.id;

-      await sendEmail(client, data.to, data.subject, data.body, data.cc, data.bcc, data.identityId, data.fromEmail, data.draftId, data.fromName, data.htmlBody, data.attachments, data.inReplyTo, data.references);
+      await sendEmail(client, data.to, data.subject, data.body, data.cc, data.bcc, data.identityId, data.fromEmail, data.draftId, data.fromName, data.htmlBody, data.attachments, data.inReplyTo, data.references, data.envelopeMailFrom);
      setShowComposer(false);

      // Mark the original email with $answered or $forwarded keyword
@@ -835,7 +999,15 @@ export default function Home() {
    }
  };

-  const handleReply = (draftText?: string) => {
+  const handleReply = async (draftText?: string) => {
+    if (selectedEmail) {
+      const ok = await emailHooks.onBeforeReply.intercept({
+        originalEmailId: selectedEmail.id,
+        originalEmail: emailToReadView(selectedEmail),
+        mode: 'reply' as const,
+      });
+      if (!ok) return;
+    }
    setComposerDraftText(draftText || "");
    setComposerMode('reply');
    setShowComposer(true);
@@ -894,13 +1066,29 @@ export default function Home() {
    if (isMobile) setActiveView('viewer');
  };

-  const handleReplyAll = () => {
+  const handleReplyAll = async () => {
+    if (selectedEmail) {
+      const ok = await emailHooks.onBeforeReplyAll.intercept({
+        originalEmailId: selectedEmail.id,
+        originalEmail: emailToReadView(selectedEmail),
+        mode: 'reply-all' as const,
+      });
+      if (!ok) return;
+    }
    setComposerMode('replyAll');
    setShowComposer(true);
    if (isMobile) setActiveView('viewer');
  };

-  const handleForward = () => {
+  const handleForward = async () => {
+    if (selectedEmail) {
+      const ok = await emailHooks.onBeforeForward.intercept({
+        originalEmailId: selectedEmail.id,
+        originalEmail: emailToReadView(selectedEmail),
+        mode: 'forward' as const,
+      });
+      if (!ok) return;
+    }
    setComposerMode('forward');
    setShowComposer(true);
    if (isMobile) setActiveView('viewer');
@@ -1395,6 +1583,43 @@ export default function Home() {
    }
  };

+  const handleImportEmailFromContextMenu = (mailboxId: string) => {
+    if (!client) return;
+    const mailbox = mailboxes.find(mb => mb.id === mailboxId);
+    if (!mailbox) return;
+    const targetMailboxId = mailbox.originalId || mailbox.id;
+
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.eml,message/rfc822';
+    input.multiple = true;
+    input.onchange = async (e) => {
+      const files = Array.from((e.target as HTMLInputElement).files ?? []);
+      if (files.length === 0) return;
+
+      let imported = 0;
+      let failed = 0;
+      for (const file of files) {
+        try {
+          const blob = new Blob([await file.arrayBuffer()], { type: 'message/rfc822' });
+          await client.importRawEmail(blob, { [targetMailboxId]: true }, { '$seen': true });
+          imported++;
+        } catch {
+          failed++;
+        }
+      }
+
+      if (imported > 0) {
+        toast.success(t('notifications.import_email_success'));
+        if (selectedMailbox) await fetchEmails(client, selectedMailbox);
+      }
+      if (failed > 0) {
+        toast.error(t('notifications.import_email_error'));
+      }
+    };
+    input.click();
+  };
+
  const handleRefreshMailboxes = async () => {
    if (!client) return;
    try {
@@ -1495,13 +1720,34 @@ export default function Home() {
    }

    const primaryIdentity = identities[0];
+    const autoSelectReplyIdentity = useSettingsStore.getState().autoSelectReplyIdentity;

-    // Append signature from the primary identity
-    const finalBody = appendPlainTextSignature(body, primaryIdentity);
+    // Decide the sending identity and (for domain-catch-all) an optional
+    // header From override that matches the address the message was sent to.
+    // When the setting is off, fall through to primary-identity behavior.
+    const resolved = autoSelectReplyIdentity
+      ? resolveReplyFrom(identities, {
+          to: selectedEmail.to,
+          cc: selectedEmail.cc,
+          bcc: selectedEmail.bcc,
+        })
+      : null;
+    const sendingIdentity = resolved
+      ? (identities.find((i) => i.id === resolved.identityId) || primaryIdentity)
+      : primaryIdentity;
+    const headerFromEmail = resolved?.overrideEmail || sendingIdentity?.email;
+    const headerFromName = resolved?.overrideName || sendingIdentity?.name || undefined;
+    const envelopeMailFrom = resolved?.overrideEmail ? sendingIdentity?.email : undefined;
+
+    // Append signature from the sending identity (fall back to primary
+    // when the reply-from lives on the same identity but a different alias).
+    const finalBody = appendPlainTextSignature(body, sendingIdentity, {
+      separator: useSettingsStore.getState().signatureSeparatorEnabled,
+    });

    const originalEmailId = selectedEmail.id;

-    // RFC 5322 §3.6.4 threading — keep the conversation stitched together (#234).
+    // RFC 5322 §3.6.4 threading - keep the conversation stitched together (#234).
    const threading = computeReplyThreadingHeaders({
      messageId: selectedEmail.messageId,
      references: selectedEmail.references,
@@ -1515,14 +1761,15 @@ export default function Home() {
      finalBody,
      undefined,
      undefined,
-      primaryIdentity?.id,
-      primaryIdentity?.email,
+      sendingIdentity?.id,
+      headerFromEmail,
      undefined,
-      primaryIdentity?.name || undefined,
+      headerFromName,
      undefined,
      undefined,
      threading?.inReplyTo,
      threading?.references,
+      envelopeMailFrom,
    );

    // Mark the original email as answered
@@ -1551,9 +1798,11 @@ export default function Home() {
  // Get current mailbox name for mobile header
  const currentMailboxName = mailboxes.find(m => m.id === selectedMailbox)?.name || "Inbox";
  const isFocusedMailLayout = mailLayout === 'focus';
+  const isHorizontalMailLayout = mailLayout === 'horizontal' && !isMobile && !isTablet;
  const hasViewerContent = showComposer || Boolean(conversationThread) || Boolean(selectedEmail);
  const shouldCollapseListPane = (isTablet && !tabletListVisible) || (!isMobile && isFocusedMailLayout && hasViewerContent);
  const shouldHideViewerPane = !isMobile && isFocusedMailLayout && !hasViewerContent;
+  const shouldHideHorizontalViewerPane = isHorizontalMailLayout && !hasViewerContent;

  // Handle email selection with mobile view switching
  const handleEmailSelect = async (email: { id: string }) => {
@@ -1565,7 +1814,7 @@ export default function Home() {
    }

    // Show the list stub immediately so subject/sender render without
-    // waiting for the body fetch — avoids the loading flicker.
+    // waiting for the body fetch - avoids the loading flicker.
    const listEmail = emails.find(e => e.id === email.id);
    if (listEmail) {
      selectEmail(listEmail);
@@ -1785,6 +2034,7 @@ export default function Home() {
              onCreateFolder={handleCreateFolderFromContextMenu}
              onRenameFolder={handleRenameFolderFromContextMenu}
              onDeleteFolder={handleDeleteFolderFromContextMenu}
+              onImportEmail={handleImportEmailFromContextMenu}
              onRefreshMailboxes={handleRefreshMailboxes}
              onCompose={() => {
                setComposerMode('compose');
@@ -1811,21 +2061,30 @@ export default function Home() {

        {/* Main Content Area */}
        <div className={cn("flex flex-col flex-1 min-w-0 h-full", inlineApp && "hidden")}>
-          <div className="flex flex-1 min-h-0">
-          {/* Email List - full width on mobile, fixed width on tablet/desktop */}
+          <div className={cn("flex flex-1 min-h-0", isHorizontalMailLayout && "md:flex-col")}>
+          {/* Email List - full width on mobile, fixed width/height on tablet/desktop */}
          <div
            className={cn(
-              "relative flex flex-col h-full bg-background border-r border-border",
+              "relative flex flex-col bg-background",
+              isHorizontalMailLayout ? "md:w-full md:h-auto" : "h-full border-r border-border",
              // Mobile: full width, hidden when viewing email
-              "max-md:flex-1 max-md:border-r-0",
+              "max-md:flex-1 max-md:border-r-0 max-md:border-b-0",
              isMobile && activeView !== "list" && "max-md:hidden",
              // Tablet/Desktop: fixed width with collapse animation
-              shouldHideViewerPane ? "md:flex-1 md:border-r-0" : "md:flex-shrink-0",
-              "md:shadow-sm",
+              !isHorizontalMailLayout && (shouldHideViewerPane ? "md:flex-1 md:border-r-0" : "md:flex-shrink-0"),
+              isHorizontalMailLayout && (shouldHideHorizontalViewerPane ? "md:flex-1" : "md:flex-shrink-0"),
+              isHorizontalMailLayout && !shouldHideHorizontalViewerPane && "md:shadow-[0_8px_12px_-6px_rgba(0,0,0,0.18)] dark:md:shadow-[0_8px_14px_-6px_rgba(0,0,0,0.55)]",
+              !isHorizontalMailLayout && "md:shadow-sm",
              !isResizing && "transition-all duration-200 ease-out",
              shouldCollapseListPane && "md:w-0 md:opacity-0 md:overflow-hidden md:border-r-0"
            )}
-            style={!isMobile && !shouldCollapseListPane && !shouldHideViewerPane ? { width: emailListWidth } : undefined}
+            style={
+              isMobile
+                ? undefined
+                : isHorizontalMailLayout
+                  ? (!shouldHideHorizontalViewerPane ? { height: emailListHeight } : undefined)
+                  : (!shouldCollapseListPane && !shouldHideViewerPane ? { width: emailListWidth } : undefined)
+            }
          >
            {/* Mobile Header for List View */}
            <MobileHeader
@@ -2134,7 +2393,7 @@ export default function Home() {
          </div>

          {/* Email list resize handle (desktop only) */}
-          {!isMobile && !isTablet && !isFocusedMailLayout && (
+          {!isMobile && !isTablet && !isFocusedMailLayout && !isHorizontalMailLayout && (
            <ResizeHandle
              onResizeStart={() => { dragStartWidth.current = emailListWidth; setIsResizing(true); }}
              onResize={(delta) => setEmailListWidth(dragStartWidth.current + delta)}
@@ -2142,17 +2401,29 @@ export default function Home() {
              onDoubleClick={resetEmailListWidth}
            />
          )}
+          {!isMobile && !isTablet && isHorizontalMailLayout && !shouldHideHorizontalViewerPane && (
+            <ResizeHandle
+              orientation="horizontal"
+              onResizeStart={() => { dragStartWidth.current = emailListHeight; setIsResizing(true); }}
+              onResize={(delta) => setEmailListHeight(dragStartWidth.current + delta)}
+              onResizeEnd={() => { setIsResizing(false); persistColumnWidths(); }}
+              onDoubleClick={resetEmailListHeight}
+            />
+          )}

          {/* Email Viewer / Composer - full screen on mobile, flex on tablet/desktop */}
          <div
            className={cn(
-              "flex flex-col h-full bg-background flex-1 min-w-0",
+              "flex flex-col bg-background flex-1 min-w-0",
+              isHorizontalMailLayout ? "min-h-0" : "h-full",
              // Mobile: full screen overlay when active
              "max-md:fixed max-md:inset-0 max-md:z-30",
+              "max-md:h-full",
              isMobile && activeView !== "viewer" && "max-md:hidden",
              // Tablet/Desktop: relative
              "md:relative",
-              shouldHideViewerPane && "md:hidden"
+              shouldHideViewerPane && "md:hidden",
+              shouldHideHorizontalViewerPane && "md:hidden"
            )}
          >
            {/* Inline Composer - shown in viewer pane */}
@@ -2184,7 +2455,13 @@ export default function Home() {
                  } : undefined)}
                  initialDraftText={composerDraftText}
                  initialData={pendingDraft}
-                  onSaveState={(data) => setPendingDraft(data)}
+                  onSaveState={(data) => {
+                    if (suppressComposerStateSaveSessionRef.current === composerSessionId) {
+                      suppressComposerStateSaveSessionRef.current = null;
+                      return;
+                    }
+                    setPendingDraft(data);
+                  }}
                  onSend={async (data) => {
                    await handleEmailSend(data);
                    setPendingDraft(null);
@@ -2339,6 +2616,17 @@ export default function Home() {
        <div className="sr-only" aria-live="polite" aria-atomic="true" id="sr-status" />

        <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
+        {pendingMailtoAccountChoice && (
+          <ProtocolAccountPicker
+            kind="mailto"
+            operation={pendingMailtoAccountChoice}
+            accounts={getMailtoProtocolAccounts()}
+            activeAccountId={activeAccountId}
+            isSwitching={isProtocolAccountSwitching}
+            onSelect={(accountId) => void openMailtoForAccount(pendingMailtoAccountChoice, accountId)}
+            onCancel={() => setPendingMailtoAccountChoice(null)}
+          />
+        )}
        <ConfirmDialog {...confirmDialogProps} />
        <PromptDialog {...promptDialogProps} />
        <TotpReauthDialog />
@@ -1,14 +1,15 @@
 "use client";

-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import { useRouter } from '@/i18n/navigation';
-import { useTranslations } from 'next-intl';
+import { useTranslations, useMessages } from 'next-intl';
 import {
  ArrowLeft,
  ChevronRight,
  LogOut,
  Settings as SettingsIcon,
  Palette,
+  Search,
  User,
  Shield,
  UserPen,
@@ -25,15 +26,18 @@ import {
  Bell,
  Puzzle,
  LayoutGrid,
+  Link as LinkIcon,
  BookOpen,
  PenLine,
  EyeOff,
  Languages,
  Info,
  Bug,
+  X,
  type LucideIcon,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { AppearanceSettings } from '@/components/settings/appearance-settings';
 import { LayoutSettings } from '@/components/settings/layout-settings';
 import { LanguageSettings } from '@/components/settings/language-settings';
@@ -60,8 +64,12 @@ import { SidebarAppsSettings } from '@/components/settings/sidebar-apps-settings
 import { NotificationSettings } from '@/components/settings/notification-settings';
 import { ThemesSettings } from '@/components/settings/themes-settings';
 import { PluginsSettings } from '@/components/settings/plugins-settings';
+import { ProtocolHandlerSettings } from '@/components/settings/protocol-handler-settings';
 import { useAuthStore, redirectToLogin } from '@/stores/auth-store';
 import { useEmailStore } from '@/stores/email-store';
+import { usePluginStore } from '@/stores/plugin-store';
+import { useThemeStore } from '@/stores/theme-store';
+import { useSettingsStore } from '@/stores/settings-store';
 import { useIsDesktop } from '@/hooks/use-media-query';
 import { NavigationRail } from '@/components/layout/navigation-rail';
 import { SidebarAppsModal } from '@/components/layout/sidebar-apps-modal';
@@ -92,6 +100,7 @@ type Tab =
  | 'calendar'
  | 'contacts'
  | 'files'
+  | 'protocol_handlers'
  | 'sidebar_apps'
  | 'about_data'
  | 'themes'
@@ -105,7 +114,6 @@ interface TabDef {
  label: string;
  icon: LucideIcon;
  group: TabGroup;
-  experimental?: boolean;
 }

 const tabIcons: Record<Tab, LucideIcon> = {
@@ -128,6 +136,7 @@ const tabIcons: Record<Tab, LucideIcon> = {
  calendar: Calendar,
  contacts: BookUser,
  files: HardDrive,
+  protocol_handlers: LinkIcon,
  sidebar_apps: PanelLeftClose,
  about_data: Info,
  themes: Palette,
@@ -137,6 +146,178 @@ const tabIcons: Record<Tab, LucideIcon> = {

 const tabGroupOrder: TabGroup[] = ['general', 'appearance', 'mail', 'privacy', 'apps', 'advanced'];

+// Translation paths per tab. Tabs that share a namespace (email_behavior,
+// appearance) explicitly list the subkeys they actually render so sub-results
+// are attributed to the correct tab. Tabs with their own namespace just point
+// at the namespace root.
+const tabSearchPaths: Record<Tab, string[]> = {
+  account: [
+    'settings.account.name_label',
+    'settings.account.username_label',
+    'settings.account.account_type_label',
+    'settings.account.auth_method_label',
+    'settings.account.email',
+    'settings.account.server',
+    'settings.account.storage',
+  ],
+  language: ['settings.appearance.language'],
+  notifications: ['settings.notifications'],
+  appearance: [
+    'settings.appearance.theme',
+    'settings.appearance.font_size',
+    'settings.appearance.list_density',
+    'settings.appearance.animations',
+  ],
+  layout: [
+    'settings.appearance.toolbar_position',
+    'settings.appearance.toolbar_labels',
+    'settings.appearance.hide_account_switcher',
+    'settings.appearance.show_rail_account_list',
+    'settings.appearance.unified_mailbox',
+    'settings.appearance.colorful_sidebar_icons',
+    'settings.email_behavior.mail_layout',
+  ],
+  reading: [
+    'settings.email_behavior.mark_read',
+    'settings.email_behavior.archive_mode',
+    'settings.email_behavior.delete_action',
+    'settings.email_behavior.attachment_click_action',
+    'settings.email_behavior.attachment_image_previews',
+    'settings.email_behavior.attachment_position',
+    'settings.email_behavior.disable_threading',
+    'settings.email_behavior.emails_per_page',
+    'settings.email_behavior.hide_inline_image_attachments',
+    'settings.email_behavior.hover_actions',
+    'settings.email_behavior.permanently_delete_junk',
+    'settings.email_behavior.show_preview',
+    'settings.email_behavior.plain_text_mode',
+  ],
+  composing: [
+    'settings.email_behavior.attachment_reminder',
+    'settings.email_behavior.auto_select_reply_identity',
+    'settings.email_behavior.default_mail_program',
+    'settings.email_behavior.signature_position',
+    'settings.email_behavior.sub_address_delimiter',
+  ],
+  identities: ['settings.identities'],
+  vacation: ['settings.vacation'],
+  filters: ['settings.filters'],
+  templates: ['settings.templates'],
+  folders: ['settings.folders'],
+  keywords: ['settings.keywords'],
+  security: ['settings.security'],
+  encryption: ['smime'],
+  content_senders: [
+    'settings.email_behavior.always_light_mode',
+    'settings.email_behavior.external_content',
+    'settings.email_behavior.trusted_senders',
+  ],
+  calendar: ['calendar.settings', 'calendar.management'],
+  contacts: ['settings.contacts', 'contacts'],
+  files: ['settings.files'],
+  protocol_handlers: ['protocol_handlers'],
+  sidebar_apps: ['settings.sidebar_apps', 'sidebar_apps'],
+  about_data: ['settings.advanced'],
+  themes: [],
+  plugins: [],
+  debug: ['settings.advanced'],
+};
+
+// Extra English keywords per tab so common search terms hit even when the
+// translation doesn't contain the literal word.
+const tabKeywords: Record<Tab, string> = {
+  account: 'profile email password user signin signout',
+  language: 'locale region timezone date time format',
+  notifications: 'sound alert push badge',
+  appearance: 'theme dark light font size accent color animation density',
+  layout: 'toolbar sidebar account switcher unified mailbox icons rail',
+  reading: 'mark read preview thread conversation archive delete attachment open',
+  composing: 'editor signature plain text reply forward draft compose',
+  identities: 'from address signature email',
+  vacation: 'auto reply away out of office holiday responder',
+  filters: 'sieve rules block junk forward',
+  templates: 'snippet quick reply',
+  folders: 'mailbox subscribe',
+  keywords: 'tags labels colors',
+  security: 'password 2fa two-factor passkey app password mfa',
+  encryption: 's/mime smime certificate pgp gpg',
+  content_senders: 'block sender remote images privacy tracking',
+  calendar: 'event schedule appointment meeting timezone',
+  contacts: 'address book contact',
+  files: 'attachments cloud drive storage upload',
+  protocol_handlers: 'mailto webcal links default app protocol handler',
+  sidebar_apps: 'apps webview iframe',
+  about_data: 'export import storage quota privacy backup',
+  themes: 'custom theme css skin appearance',
+  plugins: 'extensions addons',
+  debug: 'logs developer console diagnostic',
+};
+
+function flattenStrings(node: unknown, sink: string[]): void {
+  if (typeof node === 'string') {
+    sink.push(node);
+    return;
+  }
+  if (Array.isArray(node)) {
+    for (const item of node) flattenStrings(item, sink);
+    return;
+  }
+  if (node && typeof node === 'object') {
+    for (const value of Object.values(node)) flattenStrings(value, sink);
+  }
+}
+
+interface SubResult {
+  label: string;
+  description?: string;
+  // For plugin setting fields: the id of the plugin whose card needs to be
+  // expanded before the field becomes visible in the DOM.
+  pluginId?: string;
+}
+
+// Walk a translation subtree and emit sub-results for renderable settings.
+// Picks up:
+//   - bare string leaves (when a tab path points directly at a flat label)
+//   - objects with a `label` or `title` field (the standard pattern)
+//   - flat `*_label` string keys at any object level (e.g. `name_label`)
+function collectSubResults(node: unknown, sink: SubResult[]): void {
+  if (typeof node === 'string') {
+    sink.push({ label: node });
+    return;
+  }
+  if (!node || typeof node !== 'object' || Array.isArray(node)) return;
+  const obj = node as Record<string, unknown>;
+  const label = typeof obj.label === 'string' ? obj.label : (typeof obj.title === 'string' ? obj.title : undefined);
+  if (label) {
+    sink.push({
+      label,
+      description: typeof obj.description === 'string' ? obj.description : undefined,
+    });
+  }
+  for (const [key, value] of Object.entries(obj)) {
+    if (typeof value === 'string' && key !== 'label' && key !== 'title' && key.endsWith('_label')) {
+      sink.push({ label: value });
+    }
+  }
+  for (const value of Object.values(obj)) {
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      collectSubResults(value, sink);
+    }
+  }
+}
+
+function getByPath(obj: unknown, path: string): unknown {
+  let cur: unknown = obj;
+  for (const key of path.split('.')) {
+    if (cur && typeof cur === 'object' && key in (cur as Record<string, unknown>)) {
+      cur = (cur as Record<string, unknown>)[key];
+    } else {
+      return undefined;
+    }
+  }
+  return cur;
+}
+
 // Map legacy tab IDs to current ones; runs once on read of localStorage.
 const LEGACY_TAB_MAP: Record<string, Tab> = {
  email: 'reading',
@@ -170,8 +351,84 @@ export default function SettingsPage() {
  const { isFeatureEnabled } = usePolicyStore();
  const [activeTab, setActiveTab] = useState<Tab>(readPersistedTab);
  const [mobileShowContent, setMobileShowContent] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [pendingHighlight, setPendingHighlight] = useState<{ tab: Tab; label: string; pluginId?: string } | null>(null);
  const isDesktop = useIsDesktop();

+  const messages = useMessages() as Record<string, unknown>;
+  const installedPlugins = usePluginStore((s) => s.plugins);
+  const installedThemes = useThemeStore((s) => s.installedThemes);
+  const sidebarAppsList = useSettingsStore((s) => s.sidebarApps);
+
+  // Build a per-tab haystack for fulltext search and a list of sub-results
+  // (individual settings) per tab. Sub-results come from translation entries
+  // that have a `label`/`title` field, plus dynamic content (installed
+  // plugins/themes/sidebar apps).
+  const { tabSearchHaystacks, tabSubResults } = useMemo(() => {
+    const haystacks: Partial<Record<Tab, string>> = {};
+    const subs: Partial<Record<Tab, SubResult[]>> = {};
+    const tabIds = Object.keys(tabSearchPaths) as Tab[];
+    for (const tabId of tabIds) {
+      const strings: string[] = [tabId.replace(/_/g, ' '), tabKeywords[tabId] ?? ''];
+      const list: SubResult[] = [];
+      for (const path of tabSearchPaths[tabId]) {
+        const node = getByPath(messages, path);
+        flattenStrings(node, strings);
+        collectSubResults(node, list);
+      }
+      // Dedupe sub-results by label
+      const seen = new Set<string>();
+      subs[tabId] = list.filter((r) => {
+        if (seen.has(r.label)) return false;
+        seen.add(r.label);
+        return true;
+      });
+      haystacks[tabId] = strings.join(' ').toLowerCase();
+    }
+    if (installedPlugins.length) {
+      const haystackText = installedPlugins.map((p) => {
+        const fieldText = p.settingsSchema
+          ? Object.values(p.settingsSchema)
+              .map((s) => `${s.label} ${s.description ?? ''}`)
+              .join(' ')
+          : '';
+        return `${p.name} ${p.description} ${p.author} ${fieldText}`;
+      }).join(' ');
+      haystacks.plugins = `${haystacks.plugins ?? ''} ${haystackText}`.toLowerCase();
+      const pluginSubs: SubResult[] = installedPlugins.flatMap((p) => {
+        const items: SubResult[] = [{ label: p.name, description: p.description }];
+        if (p.settingsSchema) {
+          for (const schema of Object.values(p.settingsSchema)) {
+            items.push({
+              label: schema.label,
+              description: schema.description,
+              pluginId: p.id,
+            });
+          }
+        }
+        return items;
+      });
+      subs.plugins = [...(subs.plugins ?? []), ...pluginSubs];
+    }
+    if (installedThemes.length) {
+      const text = installedThemes.map((th) => `${th.name} ${th.description} ${th.author}`).join(' ');
+      haystacks.themes = `${haystacks.themes ?? ''} ${text}`.toLowerCase();
+      subs.themes = [
+        ...(subs.themes ?? []),
+        ...installedThemes.map((th) => ({ label: th.name, description: th.description })),
+      ];
+    }
+    if (sidebarAppsList.length) {
+      const text = sidebarAppsList.map((a) => `${a.name} ${a.url}`).join(' ');
+      haystacks.sidebar_apps = `${haystacks.sidebar_apps ?? ''} ${text}`.toLowerCase();
+      subs.sidebar_apps = [
+        ...(subs.sidebar_apps ?? []),
+        ...sidebarAppsList.map((a) => ({ label: a.name, description: a.url })),
+      ];
+    }
+    return { tabSearchHaystacks: haystacks, tabSubResults: subs };
+  }, [messages, installedPlugins, installedThemes, sidebarAppsList]);
+
  // Sidebar resize state
  const [settingsSidebarWidth, setSettingsSidebarWidth] = useState(() => {
    try { const v = localStorage.getItem('settings-sidebar-width'); return v ? Number(v) : 256; } catch { return 256; }
@@ -213,6 +470,88 @@ export default function SettingsPage() {
    }
  }, [initialCheckDone, isAuthenticated, authLoading]);

+  // Sync the mobile submenu view with browser history so the system back
+  // button (or gesture) returns to the settings list before exiting /settings.
+  useEffect(() => {
+    if (isDesktop) return;
+    if (typeof window === 'undefined') return;
+    if (!mobileShowContent) return;
+
+    window.history.pushState({ __settingsSubmenu: true }, '');
+
+    const handlePop = () => {
+      setMobileShowContent(false);
+    };
+    window.addEventListener('popstate', handlePop);
+    return () => window.removeEventListener('popstate', handlePop);
+  }, [isDesktop, mobileShowContent]);
+
+  // After clicking a search sub-result, scroll the matching setting into view
+  // and add a temporary highlight class. Some tabs fetch data and render
+  // their SettingItems only after a loading state, so retry until the element
+  // shows up (or we give up after ~2s).
+  useEffect(() => {
+    if (!pendingHighlight) return;
+    if (pendingHighlight.tab !== activeTab) return;
+    if (typeof window === 'undefined') return;
+
+    // For plugin-setting sub-results, ask the plugins tab to expand the
+    // matching card so the field becomes part of the DOM. Dispatched here
+    // (not in the click handler) because PluginsSettings only mounts after
+    // the tab switches, and its listener registers in its own useEffect -
+    // child effects run before parent effects, so by the time we get here
+    // the listener is guaranteed to be in place.
+    if (pendingHighlight.pluginId) {
+      window.dispatchEvent(
+        new CustomEvent('settings-plugin-expand', { detail: { pluginId: pendingHighlight.pluginId } })
+      );
+    }
+
+    let cancelled = false;
+    let retryTimer: ReturnType<typeof setTimeout> | undefined;
+    let cleanupTimer: ReturnType<typeof setTimeout> | undefined;
+    let highlightedEl: HTMLElement | null = null;
+
+    const escaped = pendingHighlight.label.replace(/"/g, '\\"');
+    const selector = `[data-search-label="${escaped}"]`;
+    const deadline = Date.now() + 2000;
+
+    const tryHighlight = () => {
+      if (cancelled) return;
+      const el = document.querySelector<HTMLElement>(selector);
+      if (!el) {
+        if (Date.now() < deadline) {
+          retryTimer = setTimeout(tryHighlight, 80);
+        }
+        return;
+      }
+      el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      // Remove + reflow + add restarts the CSS animation if the class was
+      // already present (re-clicking the same sub-result).
+      el.classList.remove('settings-search-highlight');
+      void el.offsetWidth;
+      el.classList.add('settings-search-highlight');
+      highlightedEl = el;
+      cleanupTimer = setTimeout(() => {
+        el.classList.remove('settings-search-highlight');
+        highlightedEl = null;
+      }, 1800);
+    };
+
+    // First attempt next frame so the freshly-mounted tab content is in DOM.
+    const raf = window.requestAnimationFrame(tryHighlight);
+
+    // Do NOT reset pendingHighlight here - that would retrigger this effect
+    // and the cleanup below would strip the class right after we added it.
+    return () => {
+      cancelled = true;
+      window.cancelAnimationFrame(raf);
+      if (retryTimer) clearTimeout(retryTimer);
+      if (cleanupTimer) clearTimeout(cleanupTimer);
+      if (highlightedEl) highlightedEl.classList.remove('settings-search-highlight');
+    };
+  }, [pendingHighlight, activeTab]);
+
  if (!isAuthenticated) {
    return null;
  }
@@ -227,6 +566,7 @@ export default function SettingsPage() {
    { id: 'account', label: t('tabs.account'), icon: tabIcons.account, group: 'general' },
    { id: 'language', label: t('tabs.language'), icon: tabIcons.language, group: 'general' },
    { id: 'notifications', label: t('tabs.notifications'), icon: tabIcons.notifications, group: 'general' },
+    { id: 'protocol_handlers', label: t('tabs.protocol_handlers'), icon: tabIcons.protocol_handlers, group: 'general' },

    // Appearance
    { id: 'appearance', label: t('tabs.appearance'), icon: tabIcons.appearance, group: 'appearance' },
@@ -255,8 +595,8 @@ export default function SettingsPage() {

    // Advanced
    { id: 'about_data', label: t('tabs.about_data'), icon: tabIcons.about_data, group: 'advanced' },
-    ...(isFeatureEnabled('themesEnabled') ? [{ id: 'themes' as Tab, label: 'Themes', icon: tabIcons.themes, group: 'advanced' as TabGroup, experimental: true }] : []),
-    ...(isFeatureEnabled('pluginsEnabled') ? [{ id: 'plugins' as Tab, label: 'Plugins', icon: tabIcons.plugins, group: 'advanced' as TabGroup, experimental: true }] : []),
+    ...(isFeatureEnabled('themesEnabled') ? [{ id: 'themes' as Tab, label: 'Themes', icon: tabIcons.themes, group: 'advanced' as TabGroup }] : []),
+    ...(isFeatureEnabled('pluginsEnabled') ? [{ id: 'plugins' as Tab, label: 'Plugins', icon: tabIcons.plugins, group: 'advanced' as TabGroup }] : []),
    ...(isFeatureEnabled('debugModeEnabled') ? [{ id: 'debug' as Tab, label: t('tabs.debug'), icon: tabIcons.debug, group: 'advanced' as TabGroup }] : []),
  ];

@@ -269,6 +609,30 @@ export default function SettingsPage() {
    }))
    .filter((g) => g.items.length > 0);

+  const trimmedQuery = searchQuery.trim().toLowerCase();
+  const matchesQuery = (tab: TabDef) => {
+    if (!trimmedQuery) return true;
+    if (tab.label.toLowerCase().includes(trimmedQuery)) return true;
+    return tabSearchHaystacks[tab.id]?.includes(trimmedQuery) ?? false;
+  };
+
+  const subResultsForTab = (tabId: Tab): SubResult[] => {
+    if (!trimmedQuery) return [];
+    const list = tabSubResults[tabId] ?? [];
+    return list
+      .filter((r) =>
+        r.label.toLowerCase().includes(trimmedQuery) ||
+        (r.description?.toLowerCase().includes(trimmedQuery) ?? false)
+      )
+      .slice(0, 6);
+  };
+
+  const filteredGroupedTabs = trimmedQuery
+    ? groupedTabs
+        .map((g) => ({ ...g, items: g.items.filter(matchesQuery) }))
+        .filter((g) => g.items.length > 0)
+    : groupedTabs;
+
  // If active tab is not in the visible list (e.g., feature disabled), fall back.
  const isActiveVisible = tabs.some((tab) => tab.id === activeTab);
  const effectiveActiveTab: Tab = isActiveVisible ? activeTab : 'appearance';
@@ -281,6 +645,11 @@ export default function SettingsPage() {
    }
  };

+  const handleSubResultSelect = (tabId: Tab, sub: SubResult) => {
+    handleTabSelect(tabId);
+    setPendingHighlight({ tab: tabId, label: sub.label, pluginId: sub.pluginId });
+  };
+
  const activeTabLabel = tabs.find((tab) => tab.id === effectiveActiveTab)?.label ?? '';

  const renderTabContent = () => (
@@ -304,6 +673,7 @@ export default function SettingsPage() {
      {effectiveActiveTab === 'calendar' && <><CalendarSettings /><div className="mt-8"><CalendarManagementSettings /></div></>}
      {effectiveActiveTab === 'contacts' && <><ContactsSettings /><div className="mt-8"><AddressBookManagementSettings /></div></>}
      {effectiveActiveTab === 'files' && <FilesSettingsComponent />}
+      {effectiveActiveTab === 'protocol_handlers' && <ProtocolHandlerSettings supportsCalendar={supportsCalendar} />}
      {effectiveActiveTab === 'sidebar_apps' && <SidebarAppsSettings />}
      {effectiveActiveTab === 'about_data' && <AboutDataSettings />}
      {effectiveActiveTab === 'themes' && <ThemesSettings />}
@@ -321,7 +691,7 @@ export default function SettingsPage() {
            <Button
              variant="ghost"
              size="icon"
-              onClick={() => setMobileShowContent(false)}
+              onClick={() => window.history.back()}
              className="h-10 w-10"
            >
              <ArrowLeft className="w-5 h-5" />
@@ -363,8 +733,36 @@ export default function SettingsPage() {
        </div>

        <div className="flex-1 overflow-y-auto">
+          <div className="px-4 pt-3 pb-1">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+              <Input
+                type="search"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder={t('search_placeholder')}
+                className="pl-9 pr-9 h-10"
+                aria-label={t('search_placeholder')}
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => setSearchQuery('')}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-md text-muted-foreground hover:bg-muted"
+                  aria-label={t('search_clear')}
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+          </div>
          <div className="py-2">
-            {groupedTabs.map((group, groupIndex) => (
+            {filteredGroupedTabs.length === 0 && (
+              <div className="px-5 py-6 text-sm text-muted-foreground text-center">
+                {t('search_no_results')}
+              </div>
+            )}
+            {filteredGroupedTabs.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">
@@ -374,23 +772,29 @@ export default function SettingsPage() {
                </div>
                {group.items.map((tab) => {
                  const Icon = tab.icon;
+                  const subs = subResultsForTab(tab.id);
                  return (
+                    <div key={tab.id}>
                      <button
-                      key={tab.id}
                        onClick={() => handleTabSelect(tab.id)}
                        className="w-full flex items-center justify-between px-5 py-3.5 text-sm text-foreground hover:bg-muted transition-colors duration-150"
                      >
                        <span className="flex items-center gap-3">
                          <Icon className="w-4 h-4 text-muted-foreground" />
                          {tab.label}
-                        {tab.experimental && (
-                          <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-warning/15 text-warning">
-                            Experimental
-                          </span>
-                        )}
                        </span>
                        <ChevronRight className="w-4 h-4 text-muted-foreground" />
                      </button>
+                      {subs.map((sub) => (
+                        <button
+                          key={`${tab.id}:${sub.label}`}
+                          onClick={() => handleSubResultSelect(tab.id, sub)}
+                          className="w-full flex items-center pl-12 pr-5 py-2 text-xs text-muted-foreground hover:bg-muted hover:text-foreground transition-colors duration-150 text-left"
+                        >
+                          <span className="truncate">{sub.label}</span>
+                        </button>
+                      ))}
+                    </div>
                  );
                })}
              </div>
@@ -461,8 +865,36 @@ export default function SettingsPage() {
        </div>

        <div className="flex-1 overflow-y-auto py-2" data-tour="settings-tabs">
+          <div className="px-3 pt-1 pb-1">
+            <div className="relative">
+              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" />
+              <Input
+                type="search"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder={t('search_placeholder')}
+                className="pl-8 pr-8 h-9 text-sm"
+                aria-label={t('search_placeholder')}
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => setSearchQuery('')}
+                  className="absolute right-1.5 top-1/2 -translate-y-1/2 p-0.5 rounded-md text-muted-foreground hover:bg-muted"
+                  aria-label={t('search_clear')}
+                >
+                  <X className="w-3.5 h-3.5" />
+                </button>
+              )}
+            </div>
+          </div>
          <div className="px-2 space-y-0.5">
-            {groupedTabs.map((group, groupIndex) => (
+            {filteredGroupedTabs.length === 0 && (
+              <div className="px-3 py-6 text-sm text-muted-foreground text-center">
+                {t('search_no_results')}
+              </div>
+            )}
+            {filteredGroupedTabs.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">
@@ -472,9 +904,10 @@ export default function SettingsPage() {
                </div>
                {group.items.map((tab) => {
                  const Icon = tab.icon;
+                  const subs = subResultsForTab(tab.id);
                  return (
+                    <div key={tab.id}>
                      <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',
@@ -488,12 +921,17 @@ export default function SettingsPage() {
                          effectiveActiveTab === tab.id ? 'text-accent-foreground' : 'text-muted-foreground'
                        )} />
                        {tab.label}
-                      {tab.experimental && (
-                        <span className="ml-auto text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-warning/15 text-warning shrink-0">
-                          Experimental
-                        </span>
-                      )}
                      </button>
+                      {subs.map((sub) => (
+                        <button
+                          key={`${tab.id}:${sub.label}`}
+                          onClick={() => handleSubResultSelect(tab.id, sub)}
+                          className="w-full text-left pl-9 pr-3 py-1.5 rounded-md text-xs text-muted-foreground hover:bg-muted hover:text-foreground transition-colors duration-150"
+                        >
+                          <span className="truncate block">{sub.label}</span>
+                        </button>
+                      ))}
+                    </div>
                  );
                })}
              </div>
@@ -0,0 +1,272 @@
+'use client';
+
+import { useEffect, 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));
+
+  useEffect(() => {
+    // Re-sync from props when the underlying config value changes (e.g. revert,
+    // initial load). Skip when drafts already represent the same array to avoid
+    // clobbering in-progress edits.
+    setDrafts((prev) => {
+      if (prev.length === value.length) {
+        const same = prev.every((d, i) => {
+          const e = value[i];
+          return d.id === e.id && d.url === e.url && d.label === e.label;
+        });
+        if (same) return prev;
+      }
+      return value.map(entryToDraft);
+    });
+  }, [value]);
+
+  function commit(next: RowDraft[]) {
+    setDrafts(next);
+    const entries: JmapServerEntry[] = [];
+    for (const d of next) {
+      const e = draftToEntry(d);
+      if (e) entries.push(e);
+    }
+    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 pl-4 border-l 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>
+  );
+}
@@ -0,0 +1,378 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Save, Loader2, RotateCcw, Sparkles } from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
+
+interface ConfigEntry {
+  value: unknown;
+  source: 'admin' | 'env' | 'default';
+}
+
+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" />
+        <Text label="OAuth Issuer URL" configKey="oauthIssuerUrl" value={currentValue('oauthIssuerUrl') as string} source={config.oauthIssuerUrl?.source} onChange={handleChange} onRevert={handleRevert} placeholder="https://auth.example.com" />
+      </Section>
+
+      <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>
+  );
+}
@@ -0,0 +1,297 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { Save, Loader2, RotateCcw, ImageIcon, Upload, Trash2 } from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
+
+interface ConfigEntry {
+  value: unknown;
+  source: 'admin' | 'env' | 'default';
+}
+
+const IMAGE_FIELDS = [
+  { key: 'faviconUrl', label: 'Favicon', accept: '.svg,.png,.ico,.webp' },
+  { key: 'appLogoLightUrl', label: 'App Logo (Light Mode)', accept: '.svg,.png,.jpg,.webp' },
+  { key: 'appLogoDarkUrl', label: 'App Logo (Dark Mode)', accept: '.svg,.png,.jpg,.webp' },
+  { key: 'loginLogoLightUrl', label: 'Login Logo (Light Mode)', accept: '.svg,.png,.jpg,.webp' },
+  { key: 'loginLogoDarkUrl', label: 'Login Logo (Dark Mode)', accept: '.svg,.png,.jpg,.webp' },
+];
+
+const TEXT_FIELDS = [
+  { key: 'loginCompanyName', label: 'Company Name' },
+  { key: 'loginImprintUrl', label: 'Imprint URL' },
+  { key: 'loginPrivacyPolicyUrl', label: 'Privacy Policy URL' },
+  { key: 'loginWebsiteUrl', label: 'Company Website URL' },
+];
+
+export function BrandingTab() {
+  const [config, setConfig] = useState<Record<string, ConfigEntry>>({});
+  const [edits, setEdits] = useState<Record<string, unknown>>({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [uploading, setUploading] = useState<string | null>(null);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({});
+
+  useEffect(() => {
+    fetchConfig();
+  }, []);
+
+  async function fetchConfig() {
+    setLoading(true);
+    const res = await apiFetch('/api/admin/config');
+    if (res.ok) setConfig(await res.json());
+    setLoading(false);
+  }
+
+  function handleChange(key: string, value: string) {
+    setEdits(prev => ({ ...prev, [key]: value }));
+    setMessage(null);
+  }
+
+  function currentValue(key: string): string {
+    if (key in edits) return edits[key] as string;
+    return (config[key]?.value as string) ?? '';
+  }
+
+  async function handleSave() {
+    if (Object.keys(edits).length === 0) return;
+    setSaving(true);
+    setMessage(null);
+
+    const res = await apiFetch('/api/admin/config', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(edits),
+    });
+
+    if (res.ok) {
+      setMessage({ type: 'success', text: 'Branding updated. Changes visible on next page load.' });
+      setEdits({});
+      await fetchConfig();
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Failed to save' });
+    }
+    setSaving(false);
+  }
+
+  async function handleUpload(slot: string, file: File) {
+    setUploading(slot);
+    setMessage(null);
+
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('slot', slot);
+
+    const res = await apiFetch('/api/admin/branding', {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (res.ok) {
+      const data = await res.json();
+      setMessage({ type: 'success', text: `Uploaded ${file.name} successfully.` });
+      setEdits(prev => {
+        const next = { ...prev };
+        delete next[slot];
+        return next;
+      });
+      setConfig(prev => ({
+        ...prev,
+        [slot]: { value: data.url, source: 'admin' },
+      }));
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Upload failed' });
+    }
+    setUploading(null);
+  }
+
+  async function handleDeleteUpload(slot: string) {
+    setMessage(null);
+
+    const res = await apiFetch('/api/admin/branding', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ slot }),
+    });
+
+    if (res.ok) {
+      setMessage({ type: 'success', text: 'Uploaded file removed. Reverted to default.' });
+      setEdits(prev => {
+        const next = { ...prev };
+        delete next[slot];
+        return next;
+      });
+      await fetchConfig();
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Failed to remove' });
+    }
+  }
+
+  async function handleRevert(key: string) {
+    const res = await apiFetch('/api/admin/config', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key }),
+    });
+    if (res.ok) {
+      setEdits(prev => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+      await fetchConfig();
+    }
+  }
+
+  const isUploadedFile = (key: string): boolean => {
+    const val = currentValue(key);
+    return val.startsWith('/api/admin/branding/');
+  };
+
+  const hasEdits = Object.keys(edits).length > 0;
+
+  if (loading) {
+    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex 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>
+
+      {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>
+                  {config[field.key]?.source === 'admin' && (
+                    <span className="text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded bg-primary/10 text-primary">
+                      {isUploadedFile(field.key) ? 'uploaded' : 'admin'}
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-2 w-full sm:w-auto">
+                  <input
+                    type="text"
+                    value={currentValue(field.key)}
+                    onChange={(e) => handleChange(field.key, e.target.value)}
+                    placeholder="Enter URL or upload a file"
+                    className="h-8 w-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}
+                    className="inline-flex items-center gap-1.5 h-8 px-2.5 rounded-md border border-input bg-background text-sm text-foreground hover:bg-muted disabled:opacity-50 transition-colors"
+                    title="Upload file"
+                  >
+                    {uploading === field.key ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Upload className="w-3.5 h-3.5" />}
+                  </button>
+                  {isUploadedFile(field.key) && (
+                    <button
+                      onClick={() => handleDeleteUpload(field.key)}
+                      className="text-muted-foreground hover:text-destructive transition-colors"
+                      title="Remove uploaded file"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                  )}
+                  {config[field.key]?.source === 'admin' && !isUploadedFile(field.key) && (
+                    <button onClick={() => handleRevert(field.key)} className="text-muted-foreground hover:text-foreground" title="Revert to default">
+                      <RotateCcw className="w-3.5 h-3.5" />
+                    </button>
+                  )}
+                </div>
+              </div>
+              {currentValue(field.key) && (
+                <div className="mt-2 flex items-center gap-2">
+                  <ImageIcon className="w-3.5 h-3.5 text-muted-foreground" />
+                  <div className="h-8 w-auto bg-muted rounded flex items-center justify-center px-2">
+                    <img
+                      src={currentValue(field.key)}
+                      alt={field.label}
+                      className="max-h-6 max-w-[200px] object-contain"
+                      onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="border border-border rounded-lg">
+        <div className="px-4 py-3 border-b border-border bg-muted/30">
+          <h2 className="text-sm font-medium text-foreground">Company Information</h2>
+        </div>
+        <div className="divide-y divide-border">
+          {TEXT_FIELDS.map(field => (
+            <div key={field.key} className="px-4 py-3 flex 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>
+                {config[field.key]?.source === 'admin' && (
+                  <span className="text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded bg-primary/10 text-primary">admin</span>
+                )}
+              </div>
+              <div className="flex items-center gap-2 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"
+                />
+                {config[field.key]?.source === 'admin' && (
+                  <button onClick={() => handleRevert(field.key)} className="text-muted-foreground hover:text-foreground" title="Revert to default">
+                    <RotateCcw className="w-3.5 h-3.5" />
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,212 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { SettingsSection, SettingItem, ToggleSwitch } from '@/components/settings/settings-section';
+import type { AuditEntry } from '@/lib/admin/types';
+import { apiFetch } from '@/lib/browser-navigation';
+
+interface AdminStatus {
+  enabled: boolean;
+  authenticated: boolean;
+  lastLogin: string | null;
+  passwordChangedAt: string | null;
+}
+
+interface ConfigData {
+  appName?: string;
+  jmapServerUrl?: string;
+  settingsSyncEnabled?: boolean;
+  stalwartFeaturesEnabled?: boolean;
+  oauthEnabled?: boolean;
+  devMode?: boolean;
+}
+
+export 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 }> | 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);
+  const [jmapHealth, setJmapHealth] = useState<'unknown' | 'ok' | 'error'>('unknown');
+
+  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);
+      }
+    }
+
+    if (configData?.jmapServerUrl) {
+      try {
+        const jmapRes = await apiFetch('/api/config');
+        setJmapHealth(jmapRes.ok ? 'ok' : 'error');
+      } catch {
+        setJmapHealth('error');
+      }
+    }
+
+    const w: string[] = [];
+    if (adminConfigRes.ok) {
+      const sources = await adminConfigRes.json();
+      setConfigSources(sources);
+      const sessionSecret = sources?.sessionSecret;
+      if (!sessionSecret?.value || sessionSecret.value === 'your-secret-key-here') {
+        w.push('SESSION_SECRET is not set or using a default value. Sessions are insecure.');
+      }
+      const adminPassword = sources?.adminPassword;
+      if (adminPassword?.value && adminPassword.source === 'env') {
+        w.push('ADMIN_PASSWORD is still set in environment variables. Remove it now that the hash is stored securely.');
+      }
+    }
+    setWarnings(w);
+  }
+
+  const jmapUrl = config?.jmapServerUrl || '-';
+  const jmapHostname = jmapUrl !== '-' ? (() => { try { return new URL(jmapUrl).hostname; } catch { return jmapUrl; } })() : '-';
+
+  return (
+    <div className="max-w-3xl space-y-8">
+      {warnings.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="JMAP Connection">
+          <span className={`inline-flex items-center gap-1.5 text-sm font-medium ${
+            jmapHealth === 'ok' ? 'text-green-600 dark:text-green-400' : jmapHealth === 'error' ? 'text-red-600 dark:text-red-400' : 'text-muted-foreground'
+          }`}>
+            <span className={`w-2 h-2 rounded-full ${
+              jmapHealth === 'ok' ? 'bg-green-500' : jmapHealth === 'error' ? 'bg-red-500' : 'bg-muted-foreground/40'
+            }`} />
+            {jmapHealth === 'ok' ? 'Connected' : jmapHealth === 'error' ? 'Error' : 'Unknown'}
+          </span>
+        </SettingItem>
+        <SettingItem label="Last Login">
+          <span className="text-sm text-foreground">
+            {status?.lastLogin ? new Date(status.lastLogin).toLocaleString() : 'Never'}
+          </span>
+        </SettingItem>
+      </SettingsSection>
+
+      <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);
+}
@@ -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-left px-4 py-2 font-medium text-muted-foreground whitespace-nowrap">Time</th>
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground whitespace-nowrap">Action</th>
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Details</th>
+              <th className="text-left px-4 py-2 font-medium text-muted-foreground 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);
+}
@@ -0,0 +1,372 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import Link from 'next/link';
+import { Search, Download, Check, Loader2, Store, Puzzle, SwatchBook, Star, Eye } from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
+
+interface Extension {
+  slug: string;
+  name: string;
+  type: 'plugin' | 'theme';
+  pluginType: string | null;
+  description: string;
+  permissions: string[];
+  tags: string[];
+  totalDownloads: number;
+  featured: boolean;
+  minAppVersion: string | null;
+  latestVersion: string | null;
+  installed: boolean;
+  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) {
+    setInstalling(ext.slug);
+    setMessage(null);
+
+    try {
+      const res = await apiFetch('/api/admin/marketplace', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          slug: ext.slug,
+          version: ext.latestVersion || '1.0.0',
+          type: ext.type,
+        }),
+      });
+
+      const data = await res.json();
+
+      if (res.ok) {
+        const warnings = data.warnings?.length ? ` (${data.warnings.length} warning(s))` : '';
+        setMessage({ type: 'success', text: `"${ext.name}" installed successfully${warnings}` });
+        setExtensions(prev => prev.map(e => e.slug === ext.slug ? { ...e, installed: true } : e));
+      } else {
+        setMessage({ type: 'error', text: data.error || 'Installation failed' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Installation failed - network error' });
+    } finally {
+      setInstalling(null);
+    }
+  }
+
+  const totalPages = Math.ceil(total / perPage);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold text-foreground">Marketplace</h1>
+        <p className="text-sm text-muted-foreground mt-1">
+          Browse and install plugins and themes from the BulwarkMail extension directory
+        </p>
+      </div>
+
+      {message && (
+        <div className={`text-sm rounded-md px-3 py-2 ${message.type === 'success' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300' : 'bg-destructive/10 text-destructive'}`}>
+          {message.text}
+        </div>
+      )}
+
+      <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 pl-9 pr-3 rounded-md border border-input bg-background text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 focus:border-ring"
+          />
+        </div>
+        <div className="flex items-center gap-1 rounded-md border border-input bg-background p-0.5 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="ml-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)}`;
+
+  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">
+        {extension.installed ? (
+          <span className="inline-flex items-center gap-1 h-7 px-2.5 rounded-md bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400 text-xs font-medium">
+            <Check className="w-3 h-3" />
+            Installed
+          </span>
+        ) : (
+          <button
+            onClick={(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>
+  );
+}
@@ -0,0 +1,291 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Puzzle, ArrowLeft, Loader2, Eye, EyeOff } from 'lucide-react';
+import { apiFetch } from '@/lib/browser-navigation';
+
+interface ConfigField {
+  type: 'string' | 'secret' | 'boolean' | 'number' | 'select';
+  label: string;
+  description?: string;
+  required?: boolean;
+  default?: unknown;
+  placeholder?: string;
+  options?: { label: string; value: string }[];
+}
+
+interface PluginConfig {
+  [key: string]: unknown;
+}
+
+interface PluginInfo {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  author: string;
+  type: string;
+  permissions: string[];
+  enabled: boolean;
+  configSchema?: Record<string, ConfigField>;
+}
+
+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 mr-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 ml-0.5">*</span>}
+                </label>
+                {field.description && (
+                  <p className="text-xs text-muted-foreground mb-1.5">{field.description}</p>
+                )}
+
+                {field.type === 'boolean' ? (
+                  <select
+                    value={formValues[key] ?? String(field.default ?? 'false')}
+                    onChange={(e) => setFormValues(prev => ({ ...prev, [key]: e.target.value }))}
+                    className="w-full h-9 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                  >
+                    <option value="true">Enabled</option>
+                    <option value="false">Disabled</option>
+                  </select>
+                ) : field.type === 'select' && field.options ? (
+                  <select
+                    value={formValues[key] ?? ''}
+                    onChange={(e) => setFormValues(prev => ({ ...prev, [key]: e.target.value }))}
+                    className="w-full h-9 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                  >
+                    <option value="">- Select -</option>
+                    {field.options.map(opt => (
+                      <option key={opt.value} value={opt.value}>{opt.label}</option>
+                    ))}
+                  </select>
+                ) : field.type === 'secret' ? (
+                  <div className="relative">
+                    <input
+                      type={revealSecrets[key] ? 'text' : 'password'}
+                      value={formValues[key] ?? ''}
+                      onChange={(e) => setFormValues(prev => ({ ...prev, [key]: e.target.value }))}
+                      placeholder={config[key] ? '••••••••  (unchanged)' : (field.placeholder || '')}
+                      className="w-full h-9 px-3 pr-10 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring font-mono"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setRevealSecrets(prev => ({ ...prev, [key]: !prev[key] }))}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground"
+                      aria-label={revealSecrets[key] ? 'Hide' : 'Show'}
+                    >
+                      {revealSecrets[key] ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                  </div>
+                ) : (
+                  <input
+                    type={field.type === 'number' ? 'number' : 'text'}
+                    value={formValues[key] ?? ''}
+                    onChange={(e) => setFormValues(prev => ({ ...prev, [key]: e.target.value }))}
+                    placeholder={field.placeholder || ''}
+                    className="w-full h-9 px-3 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                  />
+                )}
+              </div>
+            ))}
+
+            <button
+              onClick={handleSaveAll}
+              disabled={saving}
+              className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
+            >
+              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
+              Save Configuration
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="border border-border rounded-lg p-8 text-center">
+          <p className="text-sm text-muted-foreground">This plugin does not declare any configuration settings.</p>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,459 @@
+'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);
+  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);
+    }
+  }
+
+  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setUploading(true);
+    setMessage(null);
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const res = await apiFetch('/api/admin/plugins', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const data = await res.json();
+      if (res.ok) {
+        const warnings = data.warnings?.length ? ` (${data.warnings.length} warning(s))` : '';
+        setMessage({ type: 'success', text: `Plugin "${data.plugin.name}" installed${warnings}` });
+        await fetchPlugins();
+      } else {
+        setMessage({ type: 'error', text: data.error || 'Upload failed' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Upload failed' });
+    } finally {
+      setUploading(false);
+      if (fileInputRef.current) fileInputRef.current.value = '';
+    }
+  }
+
+  async function togglePlugin(id: string, enabled: boolean) {
+    setMessage(null);
+    const res = await apiFetch('/api/admin/plugins', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, enabled }),
+    });
+
+    if (res.ok) {
+      setPlugins(prev => prev.map(p => p.id === id ? { ...p, enabled } : p));
+    } else {
+      const data = await res.json();
+      setMessage({ type: 'error', text: data.error || 'Update failed' });
+    }
+  }
+
+  async function toggleForceEnabled(id: string, forceEnabled: boolean) {
+    setMessage(null);
+    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>
+      )}
+
+      <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>
+  );
+}
@@ -0,0 +1,217 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Save, Loader2, Lock } from 'lucide-react';
+import type { SettingsPolicy, FeatureGates } from '@/lib/admin/types';
+import { DEFAULT_FEATURE_GATES, DEFAULT_POLICY } from '@/lib/admin/types';
+import { apiFetch } from '@/lib/browser-navigation';
+
+const EXCLUDED_FEATURE_GATES: (keyof FeatureGates)[] = ['pluginsEnabled', 'pluginsUploadEnabled', 'themesEnabled', 'userThemesEnabled'];
+
+const FEATURE_GATE_LABELS: Partial<Record<keyof FeatureGates, { label: string; description: string }>> = {
+  sidebarAppsEnabled: { label: 'Sidebar Apps', description: 'Allow custom web apps in navigation rail' },
+  settingsExportEnabled: { label: 'Settings Export/Import', description: 'Allow users to export and import settings JSON' },
+  customKeywordsEnabled: { label: 'Custom Keywords', description: 'Allow user-created labels and tags' },
+  templatesEnabled: { label: 'Email Templates', description: 'Allow email template creation and library' },
+  calendarTasksEnabled: { label: 'Calendar Tasks', description: 'Show task panel in calendar view' },
+  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.' },
+};
+
+const RESTRICTABLE_SETTINGS = [
+  { key: 'fontSize', label: 'Font Size', category: 'Appearance', type: 'enum', allowedValues: ['small', 'medium', 'large'] },
+  { key: 'density', label: 'Density', category: 'Appearance', type: 'enum', allowedValues: ['compact', 'regular', 'spacious'] },
+  { key: 'animationsEnabled', label: 'Animations', category: 'Appearance', type: 'boolean' },
+  { key: 'markAsReadDelay', label: 'Mark as Read Delay', category: 'Email', type: 'number' },
+  { key: 'deleteAction', label: 'Delete Action', category: 'Email', type: 'enum', allowedValues: ['trash', 'permanent'] },
+  { key: 'showPreview', label: 'Show Preview', category: 'Email', type: 'boolean' },
+  { key: 'mailLayout', label: 'Mail Layout', category: 'Email', type: 'enum', allowedValues: ['split', 'focus', '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 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>
+
+      {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>
+  );
+}
@@ -0,0 +1,272 @@
+'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';
+}
+
+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-l-2 border-amber-400 dark:border-amber-600">
+            <p className="text-xs text-amber-800 dark:text-amber-300 leading-relaxed">
+              <strong>CORS warning:</strong> External JMAP servers must include this domain in their CORS <code className="text-[11px] bg-amber-100 dark:bg-amber-900/50 px-1 py-0.5 rounded">Access-Control-Allow-Origin</code> header, or requests from the browser will be blocked.
+            </p>
+          </div>
+        )}
+        <ToggleSetting label="Stalwart Features" description="Enable Stalwart Mail Server-specific features" configKey="stalwartFeaturesEnabled" value={currentValue('stalwartFeaturesEnabled') as boolean} source={config.stalwartFeaturesEnabled?.source} onChange={handleChange} onRevert={handleRevert} />
+        <ToggleSetting label="Demo Mode" description="Enable demo mode with sample data" configKey="demoMode" value={currentValue('demoMode') as boolean} source={config.demoMode?.source} onChange={handleChange} onRevert={handleRevert} />
+      </SettingsSection>
+
+      <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-l-2 border-amber-400 dark:border-amber-600">
+            <p className="text-xs text-amber-800 dark:text-amber-300 leading-relaxed">
+              <strong>CORS warning:</strong> 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>
+  );
+}
@@ -0,0 +1,250 @@
+'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 sends one anonymous heartbeat per day so we can see how many instances are
+          running, on what platforms, and which features they use. <strong>Enabled by default</strong>;
+          one click below disables it. 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 (default).'}
+              {status.consent === 'off' && 'Heartbeats are off.'}
+              {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>
+  );
+}
@@ -0,0 +1,545 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { Upload, Trash2, Power, PowerOff, Loader2, Palette, Save, Shield, Lock, LockOpen } from 'lucide-react';
+import type { SettingsPolicy } from '@/lib/admin/types';
+import { DEFAULT_POLICY, DEFAULT_THEME_POLICY } from '@/lib/admin/types';
+import { apiFetch } from '@/lib/browser-navigation';
+
+const BUILTIN_THEME_OPTIONS = [
+  { id: 'builtin-nord', name: 'Nord' },
+  { id: 'builtin-catppuccin', name: 'Catppuccin' },
+  { id: 'builtin-solarized', name: 'Solarized' },
+];
+
+interface ThemeEntry {
+  id: string;
+  name: string;
+  version: string;
+  author: string;
+  description: string;
+  variants: string[];
+  enabled: boolean;
+  forceEnabled?: boolean;
+  installedAt: string;
+  updatedAt: string;
+}
+
+export 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>
+  );
+}
@@ -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>
+  );
+}
@@ -1,383 +1,5 @@
-'use client';
+import { redirect } from 'next/navigation';

-import { useEffect, useState } from 'react';
-import { Save, Loader2, RotateCcw, Sparkles } from 'lucide-react';
-import { apiFetch } from '@/lib/browser-navigation';
-
-interface ConfigEntry {
-  value: unknown;
-  source: 'admin' | 'env' | 'default';
-}
-
-export default function AdminAuthPage() {
-  const [config, setConfig] = useState<Record<string, ConfigEntry>>({});
-  const [edits, setEdits] = useState<Record<string, unknown>>({});
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
-
-  useEffect(() => { fetchConfig(); }, []);
-
-  async function fetchConfig() {
-    setLoading(true);
-    const res = await apiFetch('/api/admin/config');
-    if (res.ok) setConfig(await res.json());
-    setLoading(false);
-  }
-
-  function handleChange(key: string, value: unknown) {
-    setEdits(prev => ({ ...prev, [key]: value }));
-    setMessage(null);
-  }
-
-  function currentValue(key: string): unknown {
-    if (key in edits) return edits[key];
-    return config[key]?.value;
-  }
-
-  async function handleSave() {
-    if (Object.keys(edits).length === 0) return;
-    setSaving(true);
-    setMessage(null);
-
-    const res = await apiFetch('/api/admin/config', {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(edits),
-    });
-
-    if (res.ok) {
-      setMessage({ type: 'success', text: 'Authentication settings saved.' });
-      setEdits({});
-      await fetchConfig();
-    } else {
-      const data = await res.json();
-      setMessage({ type: 'error', text: data.error || 'Failed to save' });
-    }
-    setSaving(false);
-  }
-
-  async function handleRevert(key: string) {
-    const res = await apiFetch('/api/admin/config', {
-      method: 'DELETE',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ key }),
-    });
-    if (res.ok) {
-      setEdits(prev => { const next = { ...prev }; delete next[key]; return next; });
-      await fetchConfig();
-    }
-  }
-
-  const [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>
-      )}
-
-      {/* Auto-setup */}
-      <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>
-
-      {/* Auto-setup dialog */}
-      {setupOpen && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="oauth-setup-title"
-          onClick={(e) => { if (e.target === e.currentTarget && !setupRunning) setSetupOpen(false); }}
-        >
-          <div className="w-full max-w-md rounded-lg border border-border bg-background shadow-xl">
-            <div className="px-5 py-4 border-b border-border">
-              <h3 id="oauth-setup-title" className="text-base font-medium text-foreground">Auto-configure OAuth</h3>
-              <p className="text-xs text-muted-foreground mt-1">
-                Verify the URLs below before continuing. The webmail and Stalwart can live on different domains.
-              </p>
-            </div>
-            <div className="px-5 py-4 space-y-4">
-              <div>
-                <label htmlFor="setup-origin" className="block text-xs font-medium text-foreground mb-1">
-                  Webmail origin
-                </label>
-                <input
-                  id="setup-origin"
-                  type="url"
-                  value={setupOrigin}
-                  onChange={(e) => setSetupOrigin(e.target.value)}
-                  disabled={setupRunning}
-                  placeholder="https://webmail.example.com"
-                  className="w-full h-9 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                />
-                <p className="text-[11px] text-muted-foreground mt-1">
-                  Used to register redirect URIs (one per locale: <code>{setupOrigin.trim().replace(/\/+$/, '') || 'https://…'}/&lt;locale&gt;/auth/callback</code>) on Stalwart.
-                </p>
-                {!setupOriginValid && setupOrigin.length > 0 && (
-                  <p className="text-[11px] text-destructive mt-1">Must be like https://host with no path.</p>
-                )}
-              </div>
-              <div>
-                <label htmlFor="setup-issuer" className="block text-xs font-medium text-foreground mb-1">
-                  Stalwart issuer URL
-                </label>
-                <input
-                  id="setup-issuer"
-                  type="url"
-                  value={setupIssuer}
-                  onChange={(e) => setSetupIssuer(e.target.value)}
-                  disabled={setupRunning}
-                  placeholder="https://mail.example.com"
-                  className="w-full h-9 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                />
-                <p className="text-[11px] text-muted-foreground mt-1">
-                  Where Stalwart serves <code>/.well-known/oauth-authorization-server</code>. Saved as <code>OAUTH_ISSUER_URL</code>. Pre-filled from your JMAP server URL.
-                </p>
-                {!setupIssuerValid && setupIssuer.length > 0 && (
-                  <p className="text-[11px] text-destructive mt-1">Must be like https://host with no path.</p>
-                )}
-              </div>
-              <label className="inline-flex items-center gap-2 text-xs text-foreground select-none cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={setupOauthOnly}
-                  onChange={(e) => setSetupOauthOnly(e.target.checked)}
-                  className="h-3.5 w-3.5 rounded border-input"
-                  disabled={setupRunning}
-                />
-                Also enable “OAuth only” (hide password login)
-              </label>
-            </div>
-            <div className="px-5 py-3 border-t border-border flex items-center justify-end gap-2 bg-muted/30 rounded-b-lg">
-              <button
-                onClick={() => setSetupOpen(false)}
-                disabled={setupRunning}
-                className="h-9 px-3 rounded-md border border-input bg-background text-sm text-foreground hover:bg-muted disabled:opacity-50 transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleAutoSetup}
-                disabled={setupRunning || !setupOriginValid || !setupIssuerValid}
-                className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
-              >
-                {setupRunning ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
-                {setupRunning ? 'Configuring…' : 'Configure'}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* OAuth */}
-      <Section title="OAuth / OpenID Connect">
-        <Toggle label="OAuth Enabled" configKey="oauthEnabled" value={currentValue('oauthEnabled') as boolean} source={config.oauthEnabled?.source} onChange={handleChange} onRevert={handleRevert} />
-        <Toggle label="OAuth Only" description="Hide password login form when enabled" configKey="oauthOnly" value={currentValue('oauthOnly') as boolean} source={config.oauthOnly?.source} onChange={handleChange} onRevert={handleRevert} />
-        <Text label="OAuth Client ID" configKey="oauthClientId" value={currentValue('oauthClientId') as string} source={config.oauthClientId?.source} onChange={handleChange} onRevert={handleRevert} />
-        <Text label="OAuth Client Secret" configKey="oauthClientSecret" value={currentValue('oauthClientSecret') as string} source={config.oauthClientSecret?.source} onChange={handleChange} onRevert={handleRevert} type="password" />
-        <Text label="OAuth Issuer URL" configKey="oauthIssuerUrl" value={currentValue('oauthIssuerUrl') as string} source={config.oauthIssuerUrl?.source} onChange={handleChange} onRevert={handleRevert} placeholder="https://auth.example.com" />
-      </Section>
-
-      {/* SSO */}
-      <Section title="Single Sign-On">
-        <Toggle label="Auto SSO" description="Automatically redirect to SSO provider on load" configKey="autoSsoEnabled" value={currentValue('autoSsoEnabled') as boolean} source={config.autoSsoEnabled?.source} onChange={handleChange} onRevert={handleRevert} />
-      </Section>
-
-      {/* Session & Security */}
-      <Section title="Session & Security">
-        <Select label="Cookie SameSite" configKey="cookieSameSite" value={currentValue('cookieSameSite') as string} source={config.cookieSameSite?.source} options={['lax', 'strict', 'none']} onChange={handleChange} onRevert={handleRevert} />
-        <Text label="Allowed Frame Ancestors" configKey="allowedFrameAncestors" value={currentValue('allowedFrameAncestors') as string} source={config.allowedFrameAncestors?.source} onChange={handleChange} onRevert={handleRevert} placeholder="'none' or https://..." />
-        <Text label="Parent Origin" description="For embedded mode communication" configKey="parentOrigin" value={currentValue('parentOrigin') as string} source={config.parentOrigin?.source} onChange={handleChange} onRevert={handleRevert} />
-      </Section>
-    </div>
-  );
-}
-
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <div className="border border-border rounded-lg">
-      <div className="px-4 py-3 border-b border-border bg-muted/30">
-        <h2 className="text-sm font-medium text-foreground">{title}</h2>
-      </div>
-      <div className="divide-y divide-border">{children}</div>
-    </div>
-  );
-}
-
-function SourceBadge({ source }: { source?: string }) {
-  if (!source || source === 'default') return null;
-  return (
-    <span className={`text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded ${source === 'admin' ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}`}>
-      {source}
-    </span>
-  );
-}
-
-function Text({ label, description, configKey, value, source, onChange, onRevert, placeholder, type = 'text' }: {
-  label: string; description?: string; configKey: string; value: string; source?: string;
-  onChange: (k: string, v: unknown) => void; onRevert: (k: string) => void; placeholder?: string; type?: string;
-}) {
-  return (
-    <div className="px-4 py-3 flex 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>
-  );
+export default function Page() {
+  redirect('/admin?tab=auth');
 }
@@ -1,300 +1,5 @@
-'use client';
+import { redirect } from 'next/navigation';

-import { useEffect, useRef, useState } from 'react';
-import { Save, Loader2, RotateCcw, ImageIcon, Upload, Trash2 } from 'lucide-react';
-import { apiFetch } from '@/lib/browser-navigation';
-
-interface ConfigEntry {
-  value: unknown;
-  source: 'admin' | 'env' | 'default';
-}
-
-const IMAGE_FIELDS = [
-  { key: 'faviconUrl', label: 'Favicon', accept: '.svg,.png,.ico,.webp' },
-  { key: 'appLogoLightUrl', label: 'App Logo (Light Mode)', accept: '.svg,.png,.jpg,.webp' },
-  { key: 'appLogoDarkUrl', label: 'App Logo (Dark Mode)', accept: '.svg,.png,.jpg,.webp' },
-  { key: 'loginLogoLightUrl', label: 'Login Logo (Light Mode)', accept: '.svg,.png,.jpg,.webp' },
-  { key: 'loginLogoDarkUrl', label: 'Login Logo (Dark Mode)', accept: '.svg,.png,.jpg,.webp' },
-];
-
-const TEXT_FIELDS = [
-  { key: 'loginCompanyName', label: 'Company Name' },
-  { key: 'loginImprintUrl', label: 'Imprint URL' },
-  { key: 'loginPrivacyPolicyUrl', label: 'Privacy Policy URL' },
-  { key: 'loginWebsiteUrl', label: 'Company Website URL' },
-];
-
-export default function AdminBrandingPage() {
-  const [config, setConfig] = useState<Record<string, ConfigEntry>>({});
-  const [edits, setEdits] = useState<Record<string, unknown>>({});
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [uploading, setUploading] = useState<string | null>(null);
-  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
-  const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({});
-
-  useEffect(() => {
-    fetchConfig();
-  }, []);
-
-  async function fetchConfig() {
-    setLoading(true);
-    const res = await apiFetch('/api/admin/config');
-    if (res.ok) setConfig(await res.json());
-    setLoading(false);
-  }
-
-  function handleChange(key: string, value: string) {
-    setEdits(prev => ({ ...prev, [key]: value }));
-    setMessage(null);
-  }
-
-  function currentValue(key: string): string {
-    if (key in edits) return edits[key] as string;
-    return (config[key]?.value as string) ?? '';
-  }
-
-  async function handleSave() {
-    if (Object.keys(edits).length === 0) return;
-    setSaving(true);
-    setMessage(null);
-
-    const res = await apiFetch('/api/admin/config', {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(edits),
-    });
-
-    if (res.ok) {
-      setMessage({ type: 'success', text: 'Branding updated. Changes visible on next page load.' });
-      setEdits({});
-      await fetchConfig();
-    } else {
-      const data = await res.json();
-      setMessage({ type: 'error', text: data.error || 'Failed to save' });
-    }
-    setSaving(false);
-  }
-
-  async function handleUpload(slot: string, file: File) {
-    setUploading(slot);
-    setMessage(null);
-
-    const formData = new FormData();
-    formData.append('file', file);
-    formData.append('slot', slot);
-
-    const res = await apiFetch('/api/admin/branding', {
-      method: 'POST',
-      body: formData,
-    });
-
-    if (res.ok) {
-      const data = await res.json();
-      setMessage({ type: 'success', text: `Uploaded ${file.name} successfully.` });
-      // Remove any pending URL edit for this slot since upload sets it
-      setEdits(prev => {
-        const next = { ...prev };
-        delete next[slot];
-        return next;
-      });
-      // Update config to reflect the uploaded URL
-      setConfig(prev => ({
-        ...prev,
-        [slot]: { value: data.url, source: 'admin' },
-      }));
-    } else {
-      const data = await res.json();
-      setMessage({ type: 'error', text: data.error || 'Upload failed' });
-    }
-    setUploading(null);
-  }
-
-  async function handleDeleteUpload(slot: string) {
-    setMessage(null);
-
-    const res = await apiFetch('/api/admin/branding', {
-      method: 'DELETE',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ slot }),
-    });
-
-    if (res.ok) {
-      setMessage({ type: 'success', text: 'Uploaded file removed. Reverted to default.' });
-      setEdits(prev => {
-        const next = { ...prev };
-        delete next[slot];
-        return next;
-      });
-      await fetchConfig();
-    } else {
-      const data = await res.json();
-      setMessage({ type: 'error', text: data.error || 'Failed to remove' });
-    }
-  }
-
-  async function handleRevert(key: string) {
-    const res = await apiFetch('/api/admin/config', {
-      method: 'DELETE',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ key }),
-    });
-    if (res.ok) {
-      setEdits(prev => {
-        const next = { ...prev };
-        delete next[key];
-        return next;
-      });
-      await fetchConfig();
-    }
-  }
-
-  const isUploadedFile = (key: string): boolean => {
-    const val = currentValue(key);
-    return val.startsWith('/api/admin/branding/');
-  };
-
-  const hasEdits = Object.keys(edits).length > 0;
-
-  if (loading) {
-    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="flex 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>
-
-      {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>
-                  {config[field.key]?.source === 'admin' && (
-                    <span className="text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded bg-primary/10 text-primary">
-                      {isUploadedFile(field.key) ? 'uploaded' : 'admin'}
-                    </span>
-                  )}
-                </div>
-                <div className="flex items-center gap-2 w-full sm:w-auto">
-                  <input
-                    type="text"
-                    value={currentValue(field.key)}
-                    onChange={(e) => handleChange(field.key, e.target.value)}
-                    placeholder="Enter URL or upload a file"
-                    className="h-8 w-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}
-                    className="inline-flex items-center gap-1.5 h-8 px-2.5 rounded-md border border-input bg-background text-sm text-foreground hover:bg-muted disabled:opacity-50 transition-colors"
-                    title="Upload file"
-                  >
-                    {uploading === field.key ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Upload className="w-3.5 h-3.5" />}
-                  </button>
-                  {isUploadedFile(field.key) && (
-                    <button
-                      onClick={() => handleDeleteUpload(field.key)}
-                      className="text-muted-foreground hover:text-destructive transition-colors"
-                      title="Remove uploaded file"
-                    >
-                      <Trash2 className="w-3.5 h-3.5" />
-                    </button>
-                  )}
-                  {config[field.key]?.source === 'admin' && !isUploadedFile(field.key) && (
-                    <button onClick={() => handleRevert(field.key)} className="text-muted-foreground hover:text-foreground" title="Revert to default">
-                      <RotateCcw className="w-3.5 h-3.5" />
-                    </button>
-                  )}
-                </div>
-              </div>
-              {/* Preview */}
-              {currentValue(field.key) && (
-                <div className="mt-2 flex items-center gap-2">
-                  <ImageIcon className="w-3.5 h-3.5 text-muted-foreground" />
-                  <div className="h-8 w-auto bg-muted rounded flex items-center justify-center px-2">
-                    <img
-                      src={currentValue(field.key)}
-                      alt={field.label}
-                      className="max-h-6 max-w-[200px] object-contain"
-                      onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
-                    />
-                  </div>
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="border border-border rounded-lg">
-        <div className="px-4 py-3 border-b border-border bg-muted/30">
-          <h2 className="text-sm font-medium text-foreground">Company Information</h2>
-        </div>
-        <div className="divide-y divide-border">
-          {TEXT_FIELDS.map(field => (
-            <div key={field.key} className="px-4 py-3 flex 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>
-                {config[field.key]?.source === 'admin' && (
-                  <span className="text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded bg-primary/10 text-primary">admin</span>
-                )}
-              </div>
-              <div className="flex items-center gap-2 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"
-                />
-                {config[field.key]?.source === 'admin' && (
-                  <button onClick={() => handleRevert(field.key)} className="text-muted-foreground hover:text-foreground" title="Revert to default">
-                    <RotateCcw className="w-3.5 h-3.5" />
-                  </button>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
+export default function Page() {
+  redirect('/admin?tab=branding');
 }
@@ -3,6 +3,7 @@
 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,
@@ -15,11 +16,11 @@ import {
  Puzzle,
  SwatchBook,
  Activity,
+  Package,
  Mail,
  Calendar,
  BookUser,
  HardDrive,
-  ArrowLeft,
  Store,
  Menu,
  X,
@@ -29,38 +30,46 @@ import { useConfig } from '@/hooks/use-config';
 import { useThemeStore } from '@/stores/theme-store';
 import { getActiveAccountSlotHeaders } from '@/lib/auth/active-account-slot';

-import { useAuthStore } from '@/stores/auth-store';
-import { apiFetch } from '@/lib/browser-navigation';
+import { useUpdateStore, selectHasUpdate } from '@/stores/update-store';
+import { apiFetch, getPathPrefix } from '@/lib/browser-navigation';

-const NAV_GROUPS = [
+// 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: [
-      { href: '/admin', label: 'Dashboard', icon: LayoutDashboard },
+      { tab: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
    ],
  },
  {
    label: 'Configuration',
    items: [
-      { href: '/admin/settings', label: 'Settings', icon: Settings },
-      { href: '/admin/branding', label: 'Branding', icon: Palette },
-      { href: '/admin/auth', label: 'Authentication', icon: Shield },
-      { href: '/admin/policy', label: 'Policy', icon: Scale },
+      { 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: [
-      { href: '/admin/plugins', label: 'Plugins', icon: Puzzle },
-      { href: '/admin/themes', label: 'Themes', icon: SwatchBook },
-      { href: '/admin/marketplace', label: 'Marketplace', icon: Store },
+      { tab: 'plugins', label: 'Plugins', icon: Puzzle },
+      { tab: 'themes', label: 'Themes', icon: SwatchBook },
+      { tab: 'marketplace', label: 'Marketplace', icon: Store },
    ],
  },
  {
    label: 'System',
    items: [
-      { href: '/admin/telemetry', label: 'Telemetry', icon: Activity },
-      { href: '/admin/logs', label: 'Audit Log', icon: ScrollText },
+      { tab: 'version', label: 'Version', icon: Package },
+      { tab: 'telemetry', label: 'Telemetry', icon: Activity },
+      { tab: 'logs', label: 'Audit Log', icon: ScrollText },
    ],
  },
 ];
@@ -68,6 +77,11 @@ const NAV_GROUPS = [
 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);
@@ -78,6 +92,13 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
    ? (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]);
@@ -156,6 +177,12 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
    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">
@@ -168,12 +195,20 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
                  {group.label}
                </span>
              </div>
-              {group.items.map(({ href, label, icon: Icon }) => {
-                const active = href === '/admin' ? pathname === '/admin' : pathname.startsWith(href);
+              {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 (
-                  <Link
-                    key={href}
-                    href={href}
+                  <button
+                    key={tab}
+                    type="button"
+                    onClick={handleClick}
                    className={cn(
                      'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
                      active
@@ -181,12 +216,24 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
                        : 'hover:bg-muted text-foreground'
                    )}
                  >
+                    <span className="relative shrink-0">
                      <Icon className={cn(
-                      'w-4 h-4 shrink-0',
+                        '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}
-                  </Link>
+                  </button>
                );
              })}
            </div>
@@ -233,28 +280,28 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
          <div className="w-7 h-7 mb-2" />
        )}
        <a
-          href="/"
+          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="/calendar"
+          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="/contacts"
+          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>
        <a
-          href="/files"
+          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"
        >
@@ -265,7 +312,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
            <Shield className="w-[18px] h-[18px]" />
          </div>
          <a
-            href="/settings"
+            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"
          >
@@ -370,7 +417,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
        aria-label="Main navigation"
      >
        <a
-          href="/"
+          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"
        >
@@ -378,7 +425,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
          <span className="text-[10px] font-medium leading-tight truncate max-w-full">Mail</span>
        </a>
        <a
-          href="/calendar"
+          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"
        >
@@ -386,7 +433,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
          <span className="text-[10px] font-medium leading-tight truncate max-w-full">Calendar</span>
        </a>
        <a
-          href="/contacts"
+          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"
        >
@@ -394,7 +441,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
          <span className="text-[10px] font-medium leading-tight truncate max-w-full">Contacts</span>
        </a>
        <a
-          href="/files"
+          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"
        >
@@ -413,7 +460,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
          <span className="text-[10px] font-medium leading-tight truncate max-w-full">Admin</span>
        </div>
        <a
-          href="/settings"
+          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"
        >
@@ -47,13 +47,13 @@ export default function AdminLoginPage() {
    <div className="min-h-screen flex items-center justify-center bg-background px-4">
      <div className="w-full max-w-sm">
        <div className="flex flex-col items-center mb-8">
-          <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-4">
          {logoUrl ? (
-              <img src={logoUrl} alt="" className="w-8 h-8 object-contain" />
+            <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>
@@ -1,178 +1,5 @@
-'use client';
+import { redirect } from 'next/navigation';

-import { useEffect, useState, useCallback } from 'react';
-import { RefreshCw } from 'lucide-react';
-import type { AuditEntry } from '@/lib/admin/types';
-import { apiFetch } from '@/lib/browser-navigation';
-
-export default function AdminLogsPage() {
-  const [entries, setEntries] = useState<AuditEntry[]>([]);
-  const [total, setTotal] = useState(0);
-  const [page, setPage] = useState(1);
-  const [loading, setLoading] = useState(true);
-  const [actionFilter, setActionFilter] = useState('');
-  const limit = 50;
-
-  const fetchLogs = useCallback(async () => {
-    setLoading(true);
-    const params = new URLSearchParams({ page: String(page), limit: String(limit) });
-    if (actionFilter) params.set('action', actionFilter);
-
-    const res = await apiFetch(`/api/admin/audit?${params}`);
-    if (res.ok) {
-      const data = await res.json();
-      setEntries(data.entries || []);
-      setTotal(data.total || 0);
-    }
-    setLoading(false);
-  }, [page, actionFilter]);
-
-  useEffect(() => { fetchLogs(); }, [fetchLogs]);
-
-  const totalPages = Math.max(1, Math.ceil(total / limit));
-
-  return (
-    <div className="space-y-6">
-      <div className="flex 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>
-
-      {/* Filter */}
-      <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>
-
-      {/* Mobile cards */}
-      <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>
-
-      {/* Desktop table */}
-      <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-left px-4 py-2 font-medium text-muted-foreground whitespace-nowrap">Time</th>
-              <th className="text-left px-4 py-2 font-medium text-muted-foreground whitespace-nowrap">Action</th>
-              <th className="text-left px-4 py-2 font-medium text-muted-foreground">Details</th>
-              <th className="text-left px-4 py-2 font-medium text-muted-foreground 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>
-
-      {/* Pagination */}
-      {totalPages > 1 && (
-        <div className="flex items-center justify-between">
-          <p className="text-xs text-muted-foreground">
-            Page {page} of {totalPages}
-          </p>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={() => setPage(p => Math.max(1, p - 1))}
-              disabled={page === 1}
-              className="h-8 px-3 rounded-md border border-input bg-background text-sm disabled:opacity-50 hover:bg-accent transition-colors"
-            >
-              Previous
-            </button>
-            <button
-              onClick={() => setPage(p => Math.min(totalPages, p + 1))}
-              disabled={page === totalPages}
-              className="h-8 px-3 rounded-md border border-input bg-background text-sm disabled:opacity-50 hover:bg-accent transition-colors"
-            >
-              Next
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function formatDetail(detail: Record<string, unknown>): string {
-  if (!detail || Object.keys(detail).length === 0) return '-';
-  if (detail.reason) return String(detail.reason);
-  if (detail.key) return `${detail.key}: ${JSON.stringify(detail.old)} → ${JSON.stringify(detail.new)}`;
-  if (detail.changes && Array.isArray(detail.changes)) {
-    return detail.changes.map((c: Record<string, unknown>) => `${c.key}`).join(', ');
-  }
-  if (detail.restrictionCount !== undefined) return `${detail.restrictionCount} restriction(s)`;
-  return JSON.stringify(detail).slice(0, 100);
+export default function Page() {
+  redirect('/admin?tab=logs');
 }
@@ -37,6 +37,8 @@ interface PreviewData {
    githubRepo: string | null;
    license: string | null;
    minAppVersion: string | null;
+    iconUrl: string | null;
+    bannerUrl: string | null;
    author: {
      displayName: string;
      githubLogin: string;
@@ -209,11 +211,30 @@ export default function MarketplacePreviewPage() {
        <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">
-            {isPlugin ? (
+          <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" />
@@ -1,366 +1,5 @@
-'use client';
+import { redirect } from 'next/navigation';

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

-interface AdminStatus {
-  enabled: boolean;
-  authenticated: boolean;
-  lastLogin: string | null;
-  passwordChangedAt: string | null;
-}
-
-interface ConfigData {
-  appName?: string;
-  jmapServerUrl?: string;
-  settingsSyncEnabled?: boolean;
-  stalwartFeaturesEnabled?: boolean;
-  oauthEnabled?: boolean;
-  devMode?: boolean;
-}
-
-export default function AdminDashboardPage() {
-  const [status, setStatus] = useState<AdminStatus | null>(null);
-  const [recentActivity, setRecentActivity] = useState<AuditEntry[]>([]);
-  const [config, setConfig] = useState<ConfigData | null>(null);
-  const [, setConfigSources] = useState<Record<string, { value: unknown; source: string }> | null>(null);
-  const [warnings, setWarnings] = useState<string[]>([]);
-  const [pluginCount, setPluginCount] = useState(0);
-  const [themeCount, setThemeCount] = useState(0);
-  const [policyRuleCount, setPolicyRuleCount] = useState(0);
-  const [accountCounts, setAccountCounts] = useState<{ total: number; active7d: number } | null>(null);
-  const [jmapHealth, setJmapHealth] = useState<'unknown' | 'ok' | 'error'>('unknown');
+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(() => {
-    fetchDashboardData();
-  }, []);
+    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]);

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

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

-import { useEffect, useState, useRef } from 'react';
-import Link from 'next/link';
-import { Upload, Trash2, Power, PowerOff, AlertTriangle, Loader2, Package, Save, Shield, Lock, LockOpen, Settings } from 'lucide-react';
-import type { SettingsPolicy } from '@/lib/admin/types';
-import { DEFAULT_POLICY } from '@/lib/admin/types';
-import { apiFetch } from '@/lib/browser-navigation';
-
-interface PluginEntry {
-  id: string;
-  name: string;
-  version: string;
-  author: string;
-  description: string;
-  type: string;
-  enabled: boolean;
-  forceEnabled?: boolean;
-  permissions: string[];
-  installedAt: string;
-  updatedAt: string;
-}
-
-export default function AdminPluginsPage() {
-  const [plugins, setPlugins] = useState<PluginEntry[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [uploading, setUploading] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [policy, setPolicy] = useState<SettingsPolicy>({ ...DEFAULT_POLICY });
-  const [policyDirty, setPolicyDirty] = useState(false);
-  const [savingPolicy, setSavingPolicy] = useState(false);
-
-  useEffect(() => { fetchPlugins(); fetchPolicy(); }, []);
-
-  async function fetchPolicy() {
-    try {
-      const res = await apiFetch('/api/admin/policy');
-      if (res.ok) {
-        const data = await res.json();
-        setPolicy(data);
-      }
-    } catch { /* ignore */ }
-  }
-
-  function togglePluginsEnabled() {
-    setPolicy(prev => ({
-      ...prev,
-      features: { ...prev.features, pluginsEnabled: !prev.features.pluginsEnabled },
-    }));
-    setPolicyDirty(true);
-    setMessage(null);
-  }
-
-  function togglePluginsUploadEnabled() {
-    setPolicy(prev => ({
-      ...prev,
-      features: { ...prev.features, pluginsUploadEnabled: !prev.features.pluginsUploadEnabled },
-    }));
-    setPolicyDirty(true);
-    setMessage(null);
-  }
-
-  function toggleRequirePluginApproval() {
-    setPolicy(prev => ({
-      ...prev,
-      features: { ...prev.features, requirePluginApproval: !prev.features.requirePluginApproval },
-    }));
-    setPolicyDirty(true);
-    setMessage(null);
-  }
-
-  async function handleSavePolicy() {
-    setSavingPolicy(true);
-    setMessage(null);
-    try {
-      const res = await apiFetch('/api/admin/policy', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(policy),
-      });
-      if (res.ok) {
-        setMessage({ type: 'success', text: 'Plugin policy saved. Users will see changes on next login.' });
-        setPolicyDirty(false);
-      } else {
-        const data = await res.json();
-        setMessage({ type: 'error', text: data.error || 'Failed to save policy' });
-      }
-    } catch {
-      setMessage({ type: 'error', text: 'Failed to save policy' });
-    } finally {
-      setSavingPolicy(false);
-    }
-  }
-
-  async function fetchPlugins() {
-    setLoading(true);
-    try {
-      const res = await apiFetch('/api/admin/plugins');
-      if (res.ok) setPlugins(await res.json());
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    setUploading(true);
-    setMessage(null);
-
-    const formData = new FormData();
-    formData.append('file', file);
-
-    try {
-      const res = await apiFetch('/api/admin/plugins', {
-        method: 'POST',
-        body: formData,
-      });
-
-      const data = await res.json();
-      if (res.ok) {
-        const warnings = data.warnings?.length ? ` (${data.warnings.length} warning(s))` : '';
-        setMessage({ type: 'success', text: `Plugin "${data.plugin.name}" installed${warnings}` });
-        await fetchPlugins();
-      } else {
-        setMessage({ type: 'error', text: data.error || 'Upload failed' });
-      }
-    } catch {
-      setMessage({ type: 'error', text: 'Upload failed' });
-    } finally {
-      setUploading(false);
-      if (fileInputRef.current) fileInputRef.current.value = '';
-    }
-  }
-
-  async function togglePlugin(id: string, enabled: boolean) {
-    setMessage(null);
-    const res = await apiFetch('/api/admin/plugins', {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ id, enabled }),
-    });
-
-    if (res.ok) {
-      setPlugins(prev => prev.map(p => p.id === id ? { ...p, enabled } : p));
-    } else {
-      const data = await res.json();
-      setMessage({ type: 'error', text: data.error || 'Update failed' });
-    }
-  }
-
-  async function toggleForceEnabled(id: string, forceEnabled: boolean) {
-    setMessage(null);
-    // If force-enabling, also ensure the plugin is enabled
-    const body: Record<string, unknown> = { id, forceEnabled };
-    if (forceEnabled) body.enabled = true;
-
-    const res = await apiFetch('/api/admin/plugins', {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(body),
-    });
-
-    if (res.ok) {
-      setPlugins(prev => prev.map(p => p.id === id ? { ...p, forceEnabled, ...(forceEnabled ? { enabled: true } : {}) } : p));
-      // Also update policy
-      setPolicy(prev => {
-        const current = prev.forceEnabledPlugins || [];
-        return {
-          ...prev,
-          forceEnabledPlugins: forceEnabled
-            ? [...current.filter(pid => pid !== id), id]
-            : current.filter(pid => pid !== id),
-        };
-      });
-      setPolicyDirty(true);
-    } else {
-      const data = await res.json();
-      setMessage({ type: 'error', text: data.error || 'Update failed' });
-    }
-  }
-
-  async function forceEnableAll() {
-    setMessage(null);
-    const disabled = plugins.filter(p => !p.enabled);
-    if (disabled.length === 0) {
-      setMessage({ type: 'success', text: 'All plugins are already enabled' });
-      return;
-    }
-    let failed = 0;
-    for (const p of disabled) {
-      const res = await apiFetch('/api/admin/plugins', {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ id: p.id, enabled: true }),
-      });
-      if (!res.ok) failed++;
-    }
-    setPlugins(prev => prev.map(p => failed === 0 ? { ...p, enabled: true } : p));
-    if (failed === 0) {
-      await fetchPlugins();
-      setMessage({ type: 'success', text: `All ${disabled.length} plugin(s) enabled` });
-    } else {
-      await fetchPlugins();
-      setMessage({ type: 'error', text: `${failed} plugin(s) failed to enable` });
-    }
-  }
-
-  async function forceDisableAll() {
-    setMessage(null);
-    const enabled = plugins.filter(p => p.enabled);
-    if (enabled.length === 0) {
-      setMessage({ type: 'success', text: 'All plugins are already disabled' });
-      return;
-    }
-    let failed = 0;
-    for (const p of enabled) {
-      const res = await apiFetch('/api/admin/plugins', {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ id: p.id, enabled: false }),
-      });
-      if (!res.ok) failed++;
-    }
-    if (failed === 0) {
-      await fetchPlugins();
-      setMessage({ type: 'success', text: `All ${enabled.length} plugin(s) disabled` });
-    } else {
-      await fetchPlugins();
-      setMessage({ type: 'error', text: `${failed} plugin(s) failed to disable` });
-    }
-  }
-
-  async function deletePlugin(id: string, name: string) {
-    if (!confirm(`Remove plugin "${name}"? This cannot be undone.`)) return;
-
-    setMessage(null);
-    const res = await apiFetch('/api/admin/plugins', {
-      method: 'DELETE',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ id }),
-    });
-
-    if (res.ok) {
-      setPlugins(prev => prev.filter(p => p.id !== id));
-      setMessage({ type: 'success', text: `Plugin "${name}" removed` });
-    } else {
-      const data = await res.json();
-      setMessage({ type: 'error', text: data.error || 'Delete failed' });
-    }
-  }
-
-  if (loading) {
-    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
-  }
-
-  const pluginsEnabled = policy.features.pluginsEnabled ?? true;
-  const pluginsUploadEnabled = policy.features.pluginsUploadEnabled ?? true;
-  const requirePluginApproval = policy.features.requirePluginApproval ?? true;
-
-  return (
-    <div className="space-y-6">
-      <div className="flex 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>
-      )}
-
-      {/* Plugin Policy */}
-      <div className="border border-border rounded-lg">
-        <div className="px-4 py-3 border-b border-border bg-muted/30">
-          <div className="flex items-center gap-2">
-            <Shield className="w-4 h-4 text-muted-foreground" />
-            <h2 className="text-sm font-medium text-foreground">Plugin Policy</h2>
-          </div>
-          <p className="text-xs text-muted-foreground mt-0.5">Control plugin availability for users</p>
-        </div>
-        <div className="divide-y divide-border">
-          <div className="px-4 py-3 flex 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>
-
-          {/* Force enable / disable all */}
-          {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>
-
-      {/* Deployed Plugins */}
-      <div className="border border-border rounded-lg">
-        <div className="px-4 py-3 border-b border-border bg-muted/30">
-          <div className="flex items-center gap-2">
-            <Package className="w-4 h-4 text-muted-foreground" />
-            <h2 className="text-sm font-medium text-foreground">Deployed Plugins</h2>
-          </div>
-          <p className="text-xs text-muted-foreground mt-0.5">Admin-uploaded plugins for all users</p>
-        </div>
-        {plugins.length === 0 ? (
-          <div className="p-12 text-center">
-            <Package className="w-10 h-10 text-muted-foreground/40 mx-auto mb-3" />
-            <p className="text-sm text-muted-foreground">No plugins installed</p>
-            <p className="text-xs text-muted-foreground mt-1">Upload a plugin ZIP file to get started</p>
-          </div>
-        ) : (
-          <div className="divide-y divide-border">
-            {plugins.map(plugin => (
-              <div key={plugin.id} className="px-4 py-4 flex 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">
-                <Link
-                  href={`/admin/plugins/${plugin.id}`}
-                  title="Configure"
-                  className="p-2 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
-                >
-                  <Settings className="w-4 h-4" />
-                </Link>
-                <button
-                  onClick={() => toggleForceEnabled(plugin.id, !plugin.forceEnabled)}
-                  title={plugin.forceEnabled ? 'Remove force-enable (users can disable)' : 'Force enable (users cannot disable)'}
-                  className={`p-2 rounded-md transition-colors ${plugin.forceEnabled ? 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-950/30 dark:text-amber-400 dark:hover:bg-amber-950/50' : 'hover:bg-accent text-muted-foreground hover:text-foreground'}`}
-                >
-                  {plugin.forceEnabled ? <Lock className="w-4 h-4" /> : <LockOpen className="w-4 h-4" />}
-                </button>
-                <button
-                  onClick={() => togglePlugin(plugin.id, !plugin.enabled)}
-                  title={plugin.enabled ? 'Disable' : 'Enable'}
-                  className="p-2 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
-                >
-                  <Power className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => deletePlugin(plugin.id, plugin.name)}
-                  title="Remove"
-                  className="p-2 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors"
-                >
-                  <Trash2 className="w-4 h-4" />
-                </button>
-              </div>
-            </div>
-          ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
+export default function Page() {
+  redirect('/admin?tab=plugins');
 }
@@ -1,220 +1,5 @@
-'use client';
+import { redirect } from 'next/navigation';

-import { useEffect, useState } from 'react';
-import { Save, Loader2, Lock } from 'lucide-react';
-import type { SettingsPolicy, FeatureGates } from '@/lib/admin/types';
-import { DEFAULT_FEATURE_GATES, DEFAULT_POLICY } from '@/lib/admin/types';
-import { apiFetch } from '@/lib/browser-navigation';
-
-// Feature gates managed on their own admin pages (excluded from this list)
-const EXCLUDED_FEATURE_GATES: (keyof FeatureGates)[] = ['pluginsEnabled', 'pluginsUploadEnabled', 'themesEnabled', 'userThemesEnabled'];
-
-const FEATURE_GATE_LABELS: Partial<Record<keyof FeatureGates, { label: string; description: string }>> = {
-  sidebarAppsEnabled: { label: 'Sidebar Apps', description: 'Allow custom web apps in navigation rail' },
-  settingsExportEnabled: { label: 'Settings Export/Import', description: 'Allow users to export and import settings JSON' },
-  customKeywordsEnabled: { label: 'Custom Keywords', description: 'Allow user-created labels and tags' },
-  templatesEnabled: { label: 'Email Templates', description: 'Allow email template creation and library' },
-  calendarTasksEnabled: { label: 'Calendar Tasks', description: 'Show task panel in calendar view' },
-  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.' },
-};
-
-const RESTRICTABLE_SETTINGS = [
-  { key: 'fontSize', label: 'Font Size', category: 'Appearance', type: 'enum', allowedValues: ['small', 'medium', 'large'] },
-  { key: 'density', label: 'Density', category: 'Appearance', type: 'enum', allowedValues: ['compact', 'regular', 'spacious'] },
-  { key: 'animationsEnabled', label: 'Animations', category: 'Appearance', type: 'boolean' },
-  { key: 'markAsReadDelay', label: 'Mark as Read Delay', category: 'Email', type: 'number' },
-  { key: 'deleteAction', label: 'Delete Action', category: 'Email', type: 'enum', allowedValues: ['trash', 'permanent'] },
-  { key: 'showPreview', label: 'Show Preview', category: 'Email', type: 'boolean' },
-  { key: 'mailLayout', label: 'Mail Layout', category: 'Email', type: 'enum', allowedValues: ['split', 'focus'] },
-  { key: 'emailsPerPage', label: 'Emails Per Page', category: 'Email', type: 'number' },
-  { key: 'externalContentPolicy', label: 'External Content Policy', category: 'Email', type: 'enum', allowedValues: ['allow', 'block', 'ask'] },
-  { key: 'sendConfirmation', label: 'Send Confirmation', category: 'Composer', type: 'boolean' },
-  { key: 'defaultReplyMode', label: 'Default Reply Mode', category: 'Composer', type: 'enum', allowedValues: ['reply', 'reply-all'] },
-  { key: 'autoSelectReplyIdentity', label: 'Auto-select Reply Identity', category: 'Composer', type: 'boolean' },
-  { key: 'plainTextMode', label: 'Plain Text Only', category: 'Composer', type: 'boolean' },
-  { key: 'sessionTimeout', label: 'Session Timeout', category: 'Privacy', type: 'number' },
-  { key: 'emailNotificationsEnabled', label: 'Email Notifications', category: 'Notifications', type: 'boolean' },
-  { key: 'calendarNotificationsEnabled', label: 'Calendar Notifications', category: 'Notifications', type: 'boolean' },
-  { key: 'debugMode', label: 'Debug Mode', category: 'Advanced', type: 'boolean' },
-];
-
-export default function AdminPolicyPage() {
-  const [policy, setPolicy] = useState<SettingsPolicy>({ ...DEFAULT_POLICY });
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
-  const [dirty, setDirty] = useState(false);
-
-  useEffect(() => { fetchPolicy(); }, []);
-
-  async function fetchPolicy() {
-    setLoading(true);
-    try {
-      const res = await apiFetch('/api/admin/policy');
-      if (res.ok) {
-        const data = await res.json();
-        setPolicy(data);
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  function toggleFeature(key: keyof FeatureGates) {
-    setPolicy(prev => ({
-      ...prev,
-      features: { ...prev.features, [key]: !prev.features[key] },
-    }));
-    setDirty(true);
-    setMessage(null);
-  }
-
-  function toggleLocked(settingKey: string) {
-    setPolicy(prev => {
-      const existing = prev.restrictions[settingKey] || {};
-      const newRestrictions = { ...prev.restrictions };
-      if (existing.locked) {
-        delete newRestrictions[settingKey];
-      } else {
-        newRestrictions[settingKey] = { ...existing, locked: true };
-      }
-      return { ...prev, restrictions: newRestrictions };
-    });
-    setDirty(true);
-    setMessage(null);
-  }
-
-  function toggleHidden(settingKey: string) {
-    setPolicy(prev => {
-      const existing = prev.restrictions[settingKey] || {};
-      const newRestrictions = { ...prev.restrictions };
-      newRestrictions[settingKey] = { ...existing, hidden: !existing.hidden };
-      if (!newRestrictions[settingKey].hidden && !newRestrictions[settingKey].locked) {
-        delete newRestrictions[settingKey];
-      }
-      return { ...prev, restrictions: newRestrictions };
-    });
-    setDirty(true);
-    setMessage(null);
-  }
-
-  async function handleSave() {
-    setSaving(true);
-    setMessage(null);
-
-    const res = await apiFetch('/api/admin/policy', {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(policy),
-    });
-
-    if (res.ok) {
-      setMessage({ type: 'success', text: 'Policy saved. Users will see changes on next login.' });
-      setDirty(false);
-    } else {
-      const data = await res.json();
-      setMessage({ type: 'error', text: data.error || 'Failed to save' });
-    }
-    setSaving(false);
-  }
-
-  if (loading) {
-    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
-  }
-
-  const categories = [...new Set(RESTRICTABLE_SETTINGS.map(s => s.category))];
-
-  return (
-    <div className="space-y-6">
-      <div className="flex 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>
-      )}
-
-      {/* Feature Gates */}
-      <div className="border border-border rounded-lg">
-        <div className="px-4 py-3 border-b border-border bg-muted/30">
-          <h2 className="text-sm font-medium text-foreground">Feature Gates</h2>
-          <p className="text-xs text-muted-foreground mt-0.5">Toggle entire features on or off for all users. Plugin and theme gates are on their respective admin pages.</p>
-        </div>
-        <div className="divide-y divide-border">
-          {(Object.keys(DEFAULT_FEATURE_GATES) as (keyof FeatureGates)[])
-            .filter(key => !EXCLUDED_FEATURE_GATES.includes(key))
-            .map(key => {
-            const meta = FEATURE_GATE_LABELS[key];
-            if (!meta) return null;
-            const { label, description } = meta;
-            const enabled = policy.features[key];
-            return (
-              <div key={key} className="px-4 py-3 flex 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>
-
-      {/* Setting Restrictions */}
-      {categories.map(category => (
-        <div key={category} className="border border-border rounded-lg">
-          <div className="px-4 py-3 border-b border-border bg-muted/30">
-            <h2 className="text-sm font-medium text-foreground">{category}</h2>
-          </div>
-          <div className="divide-y divide-border">
-            {RESTRICTABLE_SETTINGS.filter(s => s.category === category).map(setting => {
-              const restriction = policy.restrictions[setting.key] || {};
-              return (
-                <div key={setting.key} className="px-4 py-3 flex 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>
-  );
+export default function Page() {
+  redirect('/admin?tab=policy');
 }
@@ -1,248 +1,5 @@
-'use client';
+import { redirect } from 'next/navigation';

-import { useEffect, useState } from 'react';
-import { Save, RotateCcw, Loader2 } from 'lucide-react';
-import { apiFetch } from '@/lib/browser-navigation';
-
-interface ConfigEntry {
-  value: unknown;
-  source: 'admin' | 'env' | 'default';
-}
-
-export default function AdminSettingsPage() {
-  const [config, setConfig] = useState<Record<string, ConfigEntry>>({});
-  const [edits, setEdits] = useState<Record<string, unknown>>({});
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
-
-  useEffect(() => {
-    fetchConfig();
-  }, []);
-
-  async function fetchConfig() {
-    setLoading(true);
-    const res = await apiFetch('/api/admin/config');
-    if (res.ok) {
-      setConfig(await res.json());
-    }
-    setLoading(false);
-  }
-
-  function handleChange(key: string, value: unknown) {
-    setEdits(prev => ({ ...prev, [key]: value }));
-    setMessage(null);
-  }
-
-  function currentValue(key: string): unknown {
-    if (key in edits) return edits[key];
-    return config[key]?.value;
-  }
-
-  async function handleSave() {
-    if (Object.keys(edits).length === 0) return;
-    setSaving(true);
-    setMessage(null);
-
-    const res = await apiFetch('/api/admin/config', {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(edits),
-    });
-
-    if (res.ok) {
-      setMessage({ type: 'success', text: 'Settings saved. Changes take effect on next page load.' });
-      setEdits({});
-      await fetchConfig();
-    } else {
-      const data = await res.json();
-      setMessage({ type: 'error', text: data.error || 'Failed to save' });
-    }
-    setSaving(false);
-  }
-
-  async function handleRevert(key: string) {
-    const res = await apiFetch('/api/admin/config', {
-      method: 'DELETE',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ key }),
-    });
-    if (res.ok) {
-      setEdits(prev => {
-        const next = { ...prev };
-        delete next[key];
-        return next;
-      });
-      await fetchConfig();
-      setMessage({ type: 'success', text: `${key} reverted to default` });
-    }
-  }
-
-  const hasEdits = Object.keys(edits).length > 0;
-
-  if (loading) {
-    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="flex 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>
-      )}
-
-      {/* General */}
-      <SettingsSection title="General">
-        <TextSetting label="Application Name" configKey="appName" value={currentValue('appName') as string} source={config.appName?.source} onChange={handleChange} onRevert={handleRevert} />
-        <TextSetting label="JMAP Server URL" configKey="jmapServerUrl" value={currentValue('jmapServerUrl') as string} source={config.jmapServerUrl?.source} onChange={handleChange} onRevert={handleRevert} placeholder="https://mail.example.com" />
-        <ToggleSetting label="Allow Custom JMAP Endpoint" description="Show a JMAP server URL field on the login form, allowing users to connect to any JMAP server" configKey="allowCustomJmapEndpoint" value={currentValue('allowCustomJmapEndpoint') as boolean} source={config.allowCustomJmapEndpoint?.source} onChange={handleChange} onRevert={handleRevert} />
-        {!!currentValue('allowCustomJmapEndpoint') && (
-          <div className="px-4 py-2.5 bg-amber-50 dark:bg-amber-950/30 border-l-2 border-amber-400 dark:border-amber-600">
-            <p className="text-xs text-amber-800 dark:text-amber-300 leading-relaxed">
-              <strong>CORS warning:</strong> External JMAP servers must include this domain in their CORS <code className="text-[11px] bg-amber-100 dark:bg-amber-900/50 px-1 py-0.5 rounded">Access-Control-Allow-Origin</code> header, or requests from the browser will be blocked.
-            </p>
-          </div>
-        )}
-        <ToggleSetting label="Stalwart Features" description="Enable Stalwart Mail Server-specific features" configKey="stalwartFeaturesEnabled" value={currentValue('stalwartFeaturesEnabled') as boolean} source={config.stalwartFeaturesEnabled?.source} onChange={handleChange} onRevert={handleRevert} />
-        <ToggleSetting label="Demo Mode" description="Enable demo mode with sample data" configKey="demoMode" value={currentValue('demoMode') as boolean} source={config.demoMode?.source} onChange={handleChange} onRevert={handleRevert} />
-      </SettingsSection>
-
-      {/* Logging */}
-      <SettingsSection title="Logging">
-        <SelectSetting label="Log Format" configKey="logFormat" value={currentValue('logFormat') as string} source={config.logFormat?.source} options={['text', 'json']} onChange={handleChange} onRevert={handleRevert} />
-        <SelectSetting label="Log Level" configKey="logLevel" value={currentValue('logLevel') as string} source={config.logLevel?.source} options={['error', 'warn', 'info', 'debug']} onChange={handleChange} onRevert={handleRevert} />
-      </SettingsSection>
-
-      {/* Settings Sync */}
-      <SettingsSection title="Settings Sync">
-        <ToggleSetting label="Settings Sync Enabled" description="Requires SESSION_SECRET to be set" configKey="settingsSyncEnabled" value={currentValue('settingsSyncEnabled') as boolean} source={config.settingsSyncEnabled?.source} onChange={handleChange} onRevert={handleRevert} />
-      </SettingsSection>
-    </div>
-  );
-}
-
-function SettingsSection({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <div className="border border-border rounded-lg">
-      <div className="px-4 py-3 border-b border-border bg-muted/30">
-        <h2 className="text-sm font-medium text-foreground">{title}</h2>
-      </div>
-      <div className="divide-y divide-border">
-        {children}
-      </div>
-    </div>
-  );
-}
-
-function SourceBadge({ source }: { source?: string }) {
-  if (!source || source === 'default') return null;
-  return (
-    <span className={`text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded ${source === 'admin' ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}`}>
-      {source}
-    </span>
-  );
-}
-
-function TextSetting({ label, configKey, value, source, onChange, onRevert, placeholder }: {
-  label: string; configKey: string; value: string; source?: string;
-  onChange: (key: string, value: unknown) => void; onRevert: (key: string) => void; placeholder?: string;
-}) {
-  return (
-    <div className="px-4 py-3 flex 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>
-  );
+export default function Page() {
+  redirect('/admin?tab=settings');
 }
@@ -1,250 +1,5 @@
-'use client';
+import { redirect } from 'next/navigation';

-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 default function AdminTelemetryPage() {
-  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 sends one anonymous heartbeat per day so we can see how many instances are
-          running, on what platforms, and which features they use. <strong>Enabled by default</strong>;
-          one click below disables it. 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 (default).'}
-              {status.consent === 'off' && 'Heartbeats are off.'}
-              {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'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>
-  );
+export default function Page() {
+  redirect('/admin?tab=telemetry');
 }
@@ -1,553 +1,5 @@
-'use client';
+import { redirect } from 'next/navigation';

-import { useEffect, useState, useRef } from 'react';
-import { Upload, Trash2, Power, PowerOff, Loader2, Palette, Save, Shield, Lock, LockOpen } from 'lucide-react';
-import type { SettingsPolicy } from '@/lib/admin/types';
-import { DEFAULT_POLICY, DEFAULT_THEME_POLICY } from '@/lib/admin/types';
-import { apiFetch } from '@/lib/browser-navigation';
-
-const BUILTIN_THEME_OPTIONS = [
-  { id: 'builtin-nord', name: 'Nord' },
-  { id: 'builtin-catppuccin', name: 'Catppuccin' },
-  { id: 'builtin-solarized', name: 'Solarized' },
-];
-
-interface ThemeEntry {
-  id: string;
-  name: string;
-  version: string;
-  author: string;
-  description: string;
-  variants: string[];
-  enabled: boolean;
-  forceEnabled?: boolean;
-  installedAt: string;
-  updatedAt: string;
-}
-
-export default function AdminThemesPage() {
-  const [themes, setThemes] = useState<ThemeEntry[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [uploading, setUploading] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [policy, setPolicy] = useState<SettingsPolicy>({ ...DEFAULT_POLICY });
-  const [policyDirty, setPolicyDirty] = useState(false);
-  const [savingPolicy, setSavingPolicy] = useState(false);
-
-  useEffect(() => { fetchThemes(); fetchPolicy(); }, []);
-
-  async function fetchPolicy() {
-    try {
-      const res = await apiFetch('/api/admin/policy');
-      if (res.ok) {
-        const data = await res.json();
-        setPolicy({
-          ...data,
-          themePolicy: { ...DEFAULT_THEME_POLICY, ...(data.themePolicy || {}) },
-        });
-      }
-    } catch { /* ignore */ }
-  }
-
-  function toggleThemesEnabled() {
-    setPolicy(prev => ({
-      ...prev,
-      features: { ...prev.features, themesEnabled: !prev.features.themesEnabled },
-    }));
-    setPolicyDirty(true);
-    setMessage(null);
-  }
-
-  function toggleUserThemeUploads() {
-    setPolicy(prev => ({
-      ...prev,
-      features: { ...prev.features, userThemesEnabled: !prev.features.userThemesEnabled },
-    }));
-    setPolicyDirty(true);
-    setMessage(null);
-  }
-
-  function toggleBuiltinTheme(themeId: string) {
-    setPolicy(prev => {
-      const disabled = prev.themePolicy?.disabledBuiltinThemes || [];
-      const isDisabled = disabled.includes(themeId);
-      return {
-        ...prev,
-        themePolicy: {
-          ...DEFAULT_THEME_POLICY,
-          ...prev.themePolicy,
-          disabledBuiltinThemes: isDisabled
-            ? disabled.filter((id: string) => id !== themeId)
-            : [...disabled, themeId],
-        },
-      };
-    });
-    setPolicyDirty(true);
-    setMessage(null);
-  }
-
-  function toggleAdminTheme(themeId: string) {
-    setPolicy(prev => {
-      const disabled = prev.themePolicy?.disabledThemes || [];
-      const isDisabled = disabled.includes(themeId);
-      return {
-        ...prev,
-        themePolicy: {
-          ...DEFAULT_THEME_POLICY,
-          ...prev.themePolicy,
-          disabledThemes: isDisabled
-            ? disabled.filter((id: string) => id !== themeId)
-            : [...disabled, themeId],
-        },
-      };
-    });
-    setPolicyDirty(true);
-    setMessage(null);
-  }
-
-  function setDefaultTheme(themeId: string | null) {
-    setPolicy(prev => ({
-      ...prev,
-      themePolicy: {
-        ...DEFAULT_THEME_POLICY,
-        ...prev.themePolicy,
-        defaultThemeId: themeId,
-      },
-    }));
-    setPolicyDirty(true);
-    setMessage(null);
-  }
-
-  async function handleSavePolicy() {
-    setSavingPolicy(true);
-    setMessage(null);
-    try {
-      const res = await apiFetch('/api/admin/policy', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(policy),
-      });
-      if (res.ok) {
-        setMessage({ type: 'success', text: 'Theme policy saved. Users will see changes on next login.' });
-        setPolicyDirty(false);
-      } else {
-        const data = await res.json();
-        setMessage({ type: 'error', text: data.error || 'Failed to save policy' });
-      }
-    } catch {
-      setMessage({ type: 'error', text: 'Failed to save policy' });
-    } finally {
-      setSavingPolicy(false);
-    }
-  }
-
-  async function fetchThemes() {
-    setLoading(true);
-    try {
-      const res = await apiFetch('/api/admin/themes');
-      if (res.ok) setThemes(await res.json());
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    setUploading(true);
-    setMessage(null);
-
-    const formData = new FormData();
-    formData.append('file', file);
-
-    try {
-      const res = await apiFetch('/api/admin/themes', {
-        method: 'POST',
-        body: formData,
-      });
-
-      const data = await res.json();
-      if (res.ok) {
-        const warnings = data.warnings?.length ? ` (${data.warnings.length} warning(s))` : '';
-        setMessage({ type: 'success', text: `Theme "${data.theme.name}" installed${warnings}` });
-        await fetchThemes();
-      } else {
-        setMessage({ type: 'error', text: data.error || 'Upload failed' });
-      }
-    } catch {
-      setMessage({ type: 'error', text: 'Upload failed' });
-    } finally {
-      setUploading(false);
-      if (fileInputRef.current) fileInputRef.current.value = '';
-    }
-  }
-
-  async function toggleTheme(id: string, enabled: boolean) {
-    setMessage(null);
-    const res = await apiFetch('/api/admin/themes', {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ id, enabled }),
-    });
-
-    if (res.ok) {
-      setThemes(prev => prev.map(t => t.id === id ? { ...t, enabled } : t));
-    } else {
-      const data = await res.json();
-      setMessage({ type: 'error', text: data.error || 'Update failed' });
-    }
-  }
-
-  async function toggleForceEnabled(id: string, forceEnabled: boolean) {
-    setMessage(null);
-    const body: Record<string, unknown> = { id, forceEnabled };
-    if (forceEnabled) body.enabled = true;
-
-    const res = await apiFetch('/api/admin/themes', {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(body),
-    });
-
-    if (res.ok) {
-      setThemes(prev => prev.map(t => t.id === id ? { ...t, forceEnabled, ...(forceEnabled ? { enabled: true } : {}) } : t));
-      setPolicy(prev => {
-        const current = prev.forceEnabledThemes || [];
-        return {
-          ...prev,
-          forceEnabledThemes: forceEnabled
-            ? [...current.filter(tid => tid !== id), id]
-            : current.filter(tid => tid !== id),
-        };
-      });
-      setPolicyDirty(true);
-    } else {
-      const data = await res.json();
-      setMessage({ type: 'error', text: data.error || 'Update failed' });
-    }
-  }
-
-  async function forceEnableAll() {
-    setMessage(null);
-    const disabled = themes.filter(t => !t.enabled);
-    if (disabled.length === 0) {
-      setMessage({ type: 'success', text: 'All themes are already enabled' });
-      return;
-    }
-    let failed = 0;
-    for (const t of disabled) {
-      const res = await apiFetch('/api/admin/themes', {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ id: t.id, enabled: true }),
-      });
-      if (!res.ok) failed++;
-    }
-    if (failed === 0) {
-      await fetchThemes();
-      setMessage({ type: 'success', text: `All ${disabled.length} theme(s) enabled` });
-    } else {
-      await fetchThemes();
-      setMessage({ type: 'error', text: `${failed} theme(s) failed to enable` });
-    }
-  }
-
-  async function forceDisableAll() {
-    setMessage(null);
-    const enabled = themes.filter(t => t.enabled);
-    if (enabled.length === 0) {
-      setMessage({ type: 'success', text: 'All themes are already disabled' });
-      return;
-    }
-    let failed = 0;
-    for (const t of enabled) {
-      const res = await apiFetch('/api/admin/themes', {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ id: t.id, enabled: false }),
-      });
-      if (!res.ok) failed++;
-    }
-    if (failed === 0) {
-      await fetchThemes();
-      setMessage({ type: 'success', text: `All ${enabled.length} theme(s) disabled` });
-    } else {
-      await fetchThemes();
-      setMessage({ type: 'error', text: `${failed} theme(s) failed to disable` });
-    }
-  }
-
-  async function deleteTheme(id: string, name: string) {
-    if (!confirm(`Remove theme "${name}"? This cannot be undone.`)) return;
-
-    setMessage(null);
-    const res = await apiFetch('/api/admin/themes', {
-      method: 'DELETE',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ id }),
-    });
-
-    if (res.ok) {
-      setThemes(prev => prev.filter(t => t.id !== id));
-      setMessage({ type: 'success', text: `Theme "${name}" removed` });
-    } else {
-      const data = await res.json();
-      setMessage({ type: 'error', text: data.error || 'Delete failed' });
-    }
-  }
-
-  if (loading) {
-    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
-  }
-
-  const themesEnabled = policy.features.themesEnabled ?? true;
-  const userThemesEnabled = policy.features.userThemesEnabled ?? true;
-
-  return (
-    <div className="space-y-6">
-      <div className="flex 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>
-      )}
-
-      {/* Theme Policy */}
-      <div className="border border-border rounded-lg">
-        <div className="px-4 py-3 border-b border-border bg-muted/30">
-          <div className="flex items-center gap-2">
-            <Shield className="w-4 h-4 text-muted-foreground" />
-            <h2 className="text-sm font-medium text-foreground">Theme Policy</h2>
-          </div>
-          <p className="text-xs text-muted-foreground mt-0.5">Control theme availability and defaults for users</p>
-        </div>
-
-        <div className="divide-y divide-border">
-          {/* Master toggle */}
-          <div className="px-4 py-3 flex 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>
-
-          {/* User uploads toggle */}
-          <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>
-
-          {/* Force enable / disable all */}
-          {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>
-          )}
-
-          {/* Default Theme */}
-          <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>
-
-          {/* Built-in themes */}
-          <div className="px-4 py-3">
-            <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Built-in Themes</span>
-            <div className="mt-2 space-y-2">
-              {BUILTIN_THEME_OPTIONS.map(theme => {
-                const disabled = (policy.themePolicy?.disabledBuiltinThemes || []).includes(theme.id);
-                return (
-                  <div key={theme.id} className="flex items-center justify-between gap-4">
-                    <span className="text-sm text-foreground">{theme.name}</span>
-                    <button onClick={() => toggleBuiltinTheme(theme.id)}
-                      className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${!disabled ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
-                      <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${!disabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
-                    </button>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-
-          {/* Admin-deployed themes */}
-          {themes.length > 0 && (
-            <div className="px-4 py-3">
-              <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Admin-deployed Themes</span>
-              <div className="mt-2 space-y-2">
-                {themes.map(theme => {
-                  const disabled = (policy.themePolicy?.disabledThemes || []).includes(theme.id);
-                  return (
-                    <div key={theme.id} className="flex items-center justify-between gap-4">
-                      <span className="text-sm text-foreground">{theme.name}</span>
-                      <button onClick={() => toggleAdminTheme(theme.id)}
-                        className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${!disabled ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
-                        <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${!disabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
-                      </button>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Deployed Themes */}
-      <div className="border border-border rounded-lg">
-        <div className="px-4 py-3 border-b border-border bg-muted/30">
-          <div className="flex items-center gap-2">
-            <Palette className="w-4 h-4 text-muted-foreground" />
-            <h2 className="text-sm font-medium text-foreground">Deployed Themes</h2>
-          </div>
-          <p className="text-xs text-muted-foreground mt-0.5">Admin-uploaded themes available to all users</p>
-        </div>
-        {themes.length === 0 ? (
-          <div className="p-12 text-center">
-            <Palette className="w-10 h-10 text-muted-foreground/40 mx-auto mb-3" />
-            <p className="text-sm text-muted-foreground">No themes installed</p>
-            <p className="text-xs text-muted-foreground mt-1">Upload a theme ZIP file to get started</p>
-          </div>
-        ) : (
-          <div className="divide-y divide-border">
-            {themes.map(theme => (
-              <div key={theme.id} className="px-4 py-4 flex 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>
-  );
+export default function Page() {
+  redirect('/admin?tab=themes');
 }
@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function Page() {
+  redirect('/admin?tab=version');
+}
@@ -1,8 +1,11 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { readFile, stat } from 'node:fs/promises';
 import path from 'node:path';
+import { getConfigDir } from '@/lib/admin/paths';

-const BRANDING_DIR = path.join(process.cwd(), 'data', 'admin', 'branding');
+function getBrandingDir(): string {
+  return path.join(getConfigDir(), 'branding');
+}

 const MIME_TYPES: Record<string, string> = {
  '.svg': 'image/svg+xml',
@@ -38,11 +41,11 @@ export async function GET(
      return NextResponse.json({ error: 'Unsupported file type' }, { status: 400 });
    }

-    const filePath = path.join(BRANDING_DIR, safe);
+    const filePath = path.join(getBrandingDir(), safe);

-    // Ensure resolved path is still within BRANDING_DIR
+    // Ensure resolved path is still within getBrandingDir()
    const resolved = path.resolve(filePath);
-    if (!resolved.startsWith(path.resolve(BRANDING_DIR))) {
+    if (!resolved.startsWith(path.resolve(getBrandingDir()))) {
      return NextResponse.json({ error: 'Invalid filename' }, { status: 400 });
    }

@@ -2,12 +2,15 @@ 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 { logger } from '@/lib/logger';
 import { writeFile, unlink, mkdir } from 'node:fs/promises';
 import { existsSync } from 'node:fs';
 import path from 'node:path';

-const BRANDING_DIR = path.join(process.cwd(), 'data', 'admin', 'branding');
+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',
@@ -79,11 +82,11 @@ export async function POST(request: NextRequest) {
    };
    const ext = extMap[file.type] || '.png';
    const safeName = sanitizeFilename(`${slot}${ext}`);
-    const filePath = path.join(BRANDING_DIR, safeName);
+    const filePath = path.join(getBrandingDir(), safeName);

    // Ensure branding directory exists
-    if (!existsSync(BRANDING_DIR)) {
-      await mkdir(BRANDING_DIR, { recursive: true });
+    if (!existsSync(getBrandingDir())) {
+      await mkdir(getBrandingDir(), { recursive: true });
    }

    // Write file to disk
@@ -125,7 +128,7 @@ export async function DELETE(request: NextRequest) {
    const possibleExts = ['.svg', '.png', '.jpg', '.webp', '.ico'];
    let removed = false;
    for (const ext of possibleExts) {
-      const filePath = path.join(BRANDING_DIR, `${slot}${ext}`);
+      const filePath = path.join(getBrandingDir(), `${slot}${ext}`);
      if (existsSync(filePath)) {
        await unlink(filePath);
        removed = true;
@@ -3,6 +3,7 @@ import { configManager } from '@/lib/admin/config-manager';
 import { requireAdminAuth, getClientIP } from '@/lib/admin/session';
 import { auditLog } from '@/lib/admin/audit';
 import { CONFIG_ENV_MAP } from '@/lib/admin/types';
+import { parseJmapServers } from '@/lib/admin/jmap-servers';
 import { logger } from '@/lib/logger';

 /**
@@ -47,6 +48,23 @@ export async function PATCH(request: NextRequest) {
      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;
+    }
+
    // Get old values for audit
    const oldValues: Record<string, unknown> = {};
    for (const key of Object.keys(updates)) {
@@ -168,6 +168,11 @@ export async function GET(
        }))
      : [];

+    const fileUrl = (path: unknown): string | null =>
+      typeof path === 'string' && path
+        ? new URL(`/api/v1/files/${path}`, DIRECTORY_URL).toString()
+        : null;
+
    return NextResponse.json(
      {
        extension: {
@@ -184,6 +189,8 @@ export async function GET(
          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,
@@ -12,6 +12,7 @@ import {
 } from '@/lib/admin/plugin-registry';
 import {
  sanitizeFrameOrigins,
+  sanitizeHttpOrigins,
  invalidateFrameOriginsCache,
 } from '@/lib/admin/csp-frame-origins';
 import JSZip from 'jszip';
@@ -60,9 +61,16 @@ export async function GET(request: NextRequest) {
    const installedPlugins = new Set(pluginRegistry.plugins.map(p => p.id));
    const installedThemes = new Set(themeRegistry.themes.map(t => t.id));

+    const fileUrl = (path: unknown): string | null =>
+      typeof path === 'string' && path
+        ? new URL(`/api/v1/files/${path}`, DIRECTORY_URL).toString()
+        : null;
+
    if (data.data) {
      data.data = data.data.map((ext: Record<string, unknown>) => ({
        ...ext,
+        iconUrl: fileUrl(ext.iconPath),
+        bannerUrl: fileUrl(ext.bannerPath),
        installed: ext.type === 'theme'
          ? installedThemes.has(ext.slug as string)
          : installedPlugins.has(ext.slug as string),
@@ -246,6 +254,18 @@ export async function POST(request: NextRequest) {
        );
      }

+      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 plugin: ServerPlugin = {
        id: (manifest.id as string) || slug,
        name: (manifest.name as string) || slug,
@@ -261,11 +281,14 @@ export async function POST(request: NextRequest) {
        ...(declaredFrameOrigins.length > 0
          ? { frameOrigins: declaredFrameOrigins }
          : {}),
+        ...(declaredHttpOrigins.length > 0
+          ? { httpOrigins: declaredHttpOrigins }
+          : {}),
      };

      await savePlugin(plugin, code);
      invalidateFrameOriginsCache();
-      await auditLog('marketplace.install_plugin', { id: plugin.id, name: plugin.name, version: plugin.version, slug, frameOrigins: declaredFrameOrigins }, ip);
+      await auditLog('marketplace.install_plugin', { id: plugin.id, name: plugin.name, version: plugin.version, slug, frameOrigins: declaredFrameOrigins, httpOrigins: declaredHttpOrigins }, ip);

      return NextResponse.json({ success: true, plugin, warnings });
    }
@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { getPluginBundle, getPlugin } from '@/lib/admin/plugin-registry';
+import { getDevPlugin, readDevBundle } from '@/lib/admin/plugin-dev';

 /**
 * GET /api/admin/plugins/[id]/bundle - Serve plugin JS bundle
@@ -8,7 +9,7 @@ import { getPluginBundle, getPlugin } from '@/lib/admin/plugin-registry';
 * Only serves plugins that exist in the registry and are enabled.
 */
 export async function GET(
-  _request: NextRequest,
+  request: NextRequest,
  { params }: { params: Promise<{ id: string }> },
 ) {
  try {
@@ -19,6 +20,21 @@ export async function GET(
      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);
+      return new NextResponse(code, {
+        headers: {
+          'Content-Type': 'application/javascript; charset=utf-8',
+          'Cache-Control': 'no-store',
+          'ETag': `"${devEntry.plugin.bundleHash}"`,
+          'Content-Length': String(Buffer.byteLength(code, 'utf-8')),
+        },
+      });
+    }
+
    const plugin = await getPlugin(id);
    if (!plugin) {
      return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
@@ -33,13 +49,22 @@ export async function GET(
      return NextResponse.json({ error: 'Bundle not found' }, { status: 404 });
    }

-    return new NextResponse(code, {
-      headers: {
+    // 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': 'public, max-age=3600, must-revalidate',
-        'Content-Length': String(Buffer.byteLength(code, 'utf-8')),
-      },
-    });
+      'Cache-Control': 'private, no-cache, must-revalidate',
+    };
+    if (etag) headers['ETag'] = etag;
+
+    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 });
  }
@@ -1,9 +1,18 @@
 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
 *
@@ -35,7 +44,7 @@ export async function GET(
      }
    }

-    const plugin = await getPlugin(id);
+    const plugin = await resolvePlugin(id);
    if (!plugin) {
      return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
    }
@@ -80,7 +89,7 @@ export async function PUT(
      return NextResponse.json({ error: 'Invalid plugin ID' }, { status: 400 });
    }

-    const plugin = await getPlugin(id);
+    const plugin = await resolvePlugin(id);
    if (!plugin) {
      return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
    }
@@ -8,8 +8,10 @@ import {
  deletePlugin as removePlugin,
  type ServerPlugin,
 } from '@/lib/admin/plugin-registry';
+import { listDevPlugins } from '@/lib/admin/plugin-dev';
 import {
  sanitizeFrameOrigins,
+  sanitizeHttpOrigins,
  invalidateFrameOriginsCache,
 } from '@/lib/admin/csp-frame-origins';

@@ -34,8 +36,20 @@ export async function GET() {
    const result = await requireAdminAuth();
    if ('error' in result) return result.error;

-    const registry = await getPluginRegistry();
-    return NextResponse.json(registry.plugins, {
+    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) {
@@ -157,6 +171,7 @@ export async function POST(request: NextRequest) {
    }

    const declaredFrameOrigins = sanitizeFrameOrigins(manifest.frameOrigins);
+    const declaredHttpOrigins = sanitizeHttpOrigins(manifest.httpOrigins);

    const now = new Date().toISOString();
    const plugin: ServerPlugin = {
@@ -172,16 +187,22 @@ export async function POST(request: NextRequest) {
      ...(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 }
+        : {}),
      installedAt: now,
      updatedAt: now,
    };

    await savePlugin(plugin, code);
    invalidateFrameOriginsCache();
-    await auditLog('plugin.install', { id: plugin.id, name: plugin.name, version: plugin.version, frameOrigins: declaredFrameOrigins }, ip);
+    await auditLog('plugin.install', { id: plugin.id, name: plugin.name, version: plugin.version, frameOrigins: declaredFrameOrigins, httpOrigins: declaredHttpOrigins }, ip);

    return NextResponse.json({ plugin });
  } catch (error) {
@@ -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() {
+  try {
+    const auth = await requireAdminAuth();
+    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();
+    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 });
+  }
+}
@@ -4,7 +4,12 @@ import { logger } from '@/lib/logger';
 import { encryptSession, decryptSession } from '@/lib/auth/crypto';
 import { SESSION_COOKIE_MAX_AGE, sessionCookieName } from '@/lib/auth/session-cookie';
 import { getCookieOptions } from '@/lib/oauth/cookie-config';
-import { JmapAuthVerificationError, verifyJmapAuth } from '@/lib/auth/verify-jmap-auth';
+import {
+  JmapAuthVerificationError,
+  normalizeJmapServerUrl,
+  validateProxyAuthHeader,
+  verifyJmapAuth,
+} from '@/lib/auth/verify-jmap-auth';
 import {
  clearStalwartAuthContextInStore,
  setStalwartAuthContextInStore,
@@ -12,6 +17,8 @@ import {
 import { configManager } from '@/lib/admin/config-manager';
 import { isPublicHttpUrl } from '@/lib/security/url-guard';
 import { recordLogin } from '@/lib/telemetry/login-tracker';
+import { parseJmapServers, resolveTrustedJmapUrl } from '@/lib/admin/jmap-servers';
+import { MAX_ACCOUNT_SLOTS } from '@/lib/account-utils';

 const COOKIE_OPTIONS = {
  ...getCookieOptions(),
@@ -22,7 +29,7 @@ function getSlot(request: NextRequest): number {
  const raw = request.nextUrl.searchParams.get('slot');
  if (raw === null) return 0;
  const slot = parseInt(raw, 10);
-  if (isNaN(slot) || slot < 0 || slot > 4) return 0;
+  if (isNaN(slot) || slot < 0 || slot >= MAX_ACCOUNT_SLOTS) return 0;
  return slot;
 }

@@ -39,10 +46,11 @@ export async function POST(request: NextRequest) {
      return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
    }

-    // Pin the upstream URL to the configured JMAP server so an unauthenticated
-    // caller cannot point this route at internal hosts. Only when no server URL
-    // is configured AND the deployment explicitly allows custom JMAP endpoints
-    // do we honor the body URL — and even then it must be a public URL.
+    // Pin the upstream URL to a configured JMAP server so an unauthenticated
+    // caller cannot point this route at internal hosts. We accept the global
+    // `jmapServerUrl` and any entry from `jmapServers`. When neither matches,
+    // we fall back to the request URL only if `allowCustomJmapEndpoint` is on
+    // - and even then the URL must resolve to a public address.
    await configManager.ensureLoaded();
    const configuredServerUrl =
      configManager.get<string>('jmapServerUrl', '') ||
@@ -50,11 +58,13 @@ export async function POST(request: NextRequest) {
      process.env.NEXT_PUBLIC_JMAP_SERVER_URL ||
      '';
    const allowCustomEndpoint = configManager.get<boolean>('allowCustomJmapEndpoint', false);
+    const serverList = parseJmapServers(configManager.get<unknown>('jmapServers', []));
+    const trustedUrl = resolveTrustedJmapUrl(serverUrl, configuredServerUrl, serverList);

    let upstreamUrl: string;
    let upstreamTrusted: boolean;
-    if (configuredServerUrl) {
-      upstreamUrl = configuredServerUrl;
+    if (trustedUrl) {
+      upstreamUrl = trustedUrl;
      upstreamTrusted = true;
    } else if (allowCustomEndpoint) {
      if (!(await isPublicHttpUrl(serverUrl))) {
@@ -66,10 +76,16 @@ export async function POST(request: NextRequest) {
      return NextResponse.json({ error: 'JMAP server not configured' }, { status: 500 });
    }

-    const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot <= 4 ? bodySlot : getSlot(request);
+    const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot < MAX_ACCOUNT_SLOTS ? bodySlot : getSlot(request);
    const cookieName = sessionCookieName(slot);
    const authHeader = `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`;
-    const normalizedServerUrl = await verifyJmapAuth(upstreamUrl, authHeader, { trusted: upstreamTrusted });
+    // Trusted (admin-configured) URLs skip the upstream re-fetch: the cookie
+    // we write here is only ever consumed for requests on behalf of this same
+    // user, so bogus credentials would just yield 401s downstream rather than
+    // privilege escalation. Untrusted custom endpoints still verify upstream.
+    const normalizedServerUrl = upstreamTrusted
+      ? (validateProxyAuthHeader(authHeader), normalizeJmapServerUrl(upstreamUrl))
+      : await verifyJmapAuth(upstreamUrl, authHeader, { trusted: false });
    const token = encryptSession(normalizedServerUrl, username, password);
    const cookieStore = await cookies();
    cookieStore.set(cookieName, token, COOKIE_OPTIONS);
@@ -181,8 +197,8 @@ export async function DELETE(request: NextRequest) {
    const all = request.nextUrl.searchParams.get('all') === 'true';

    if (all) {
-      // Delete all session cookies (slots 0-4)
-      for (let i = 0; i <= 4; i++) {
+      // Delete all session cookies across every slot.
+      for (let i = 0; i < MAX_ACCOUNT_SLOTS; i++) {
        cookieStore.delete(sessionCookieName(i));
        clearStalwartAuthContextInStore(cookieStore, i);
      }
@@ -3,7 +3,7 @@ import { cookies } from 'next/headers';
 import { logger } from '@/lib/logger';
 import { decryptPayload } from '@/lib/auth/crypto';
 import { exchangeCodeForTokens } from '@/lib/oauth/token-exchange';
-import { refreshTokenCookieName } from '@/lib/oauth/tokens';
+import { refreshTokenCookieName, refreshTokenServerCookieName } from '@/lib/oauth/tokens';
 import { getCookieOptions } from '@/lib/oauth/cookie-config';

 const SSO_PENDING_COOKIE = 'sso_pending';
@@ -13,12 +13,18 @@ export async function POST(request: NextRequest) {
  const cookieStore = await cookies();

  try {
-    const { code, state } = await request.json();
+    const { code, state, slot: bodySlot } = await request.json();

    if (!code || !state) {
      return NextResponse.json({ error: 'Missing code or state' }, { status: 400 });
    }

+    // Per-account refresh-token cookie slot. Without this the route hardcoded
+    // slot 0, so the "+ Add Account" flow overwrote the first account's
+    // refresh-token cookie. Default to 0 for back-compat with any caller that
+    // omits slot. Mirrors the validation in /api/auth/token POST.
+    const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot <= 4 ? bodySlot : 0;
+
    // Read and decrypt the pending SSO cookie
    const pendingCookie = cookieStore.get(SSO_PENDING_COOKIE)?.value;
    if (!pendingCookie) {
@@ -49,6 +55,7 @@ export async function POST(request: NextRequest) {

    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) {
      cookieStore.delete(SSO_PENDING_COOKIE);
@@ -56,13 +63,19 @@ export async function POST(request: NextRequest) {
    }

    // Exchange code for tokens
-    const tokens = await exchangeCodeForTokens(code, codeVerifier, redirectUri);
+    const tokens = await exchangeCodeForTokens(code, codeVerifier, redirectUri, pendingServerId);

-    // Store refresh token
+    // Store refresh token in the per-account cookie slot.
    if (tokens.refresh_token) {
-      const cookieName = refreshTokenCookieName(0);
+      const cookieName = refreshTokenCookieName(slot);
      cookieStore.set(cookieName, tokens.refresh_token, getCookieOptions());
    }
+    const serverCookieName = refreshTokenServerCookieName(slot);
+    if (pendingServerId) {
+      cookieStore.set(serverCookieName, pendingServerId, getCookieOptions());
+    } else {
+      cookieStore.delete(serverCookieName);
+    }

    // Delete pending cookie
    cookieStore.delete(SSO_PENDING_COOKIE);
@@ -7,23 +7,25 @@ import { getRequiredConfig } from '@/lib/oauth/token-exchange';
 import { discoverOAuth } from '@/lib/oauth/discovery';
 import { OAUTH_SCOPES } from '@/lib/oauth/tokens';
 import { getCookieOptions } from '@/lib/oauth/cookie-config';
-import { readFileEnv } from '@/lib/read-file-env';
+import { hasSessionSecret } from '@/lib/auth/session-secret';

 const SSO_PENDING_COOKIE = 'sso_pending';
 const SSO_PENDING_MAX_AGE = 300; // 5 minutes

 export async function POST(request: NextRequest) {
  try {
-    if (!process.env.SESSION_SECRET && !readFileEnv(process.env.SESSION_SECRET_FILE)) {
+    if (!hasSessionSecret()) {
      return NextResponse.json({ error: 'SESSION_SECRET is required for SSO' }, { status: 500 });
    }

-    const { redirect_uri, locale } = await request.json();
+    const { redirect_uri, locale, server_id: bodyServerId } = await request.json();

    if (!redirect_uri || typeof redirect_uri !== 'string') {
      return NextResponse.json({ error: 'Missing redirect_uri' }, { status: 400 });
    }

+    const serverId = typeof bodyServerId === 'string' && bodyServerId ? bodyServerId : null;
+
    // Validate redirect_uri origin matches the request origin to prevent open redirects
    const requestOrigin = request.headers.get('origin') || request.nextUrl.origin;
    try {
@@ -36,7 +38,7 @@ export async function POST(request: NextRequest) {
      return NextResponse.json({ error: 'Invalid redirect_uri' }, { status: 400 });
    }

-    const { clientId, discoveryUrl } = getRequiredConfig();
+    const { clientId, discoveryUrl } = getRequiredConfig(serverId);
    const metadata = await discoverOAuth(discoveryUrl);

    if (!metadata?.authorization_endpoint) {
@@ -48,12 +50,14 @@ export async function POST(request: NextRequest) {
    const codeChallenge = generateCodeChallengeServer(codeVerifier);
    const state = generateStateServer();

-    // Encrypt and store in httpOnly cookie
+    // Encrypt and store in httpOnly cookie. server_id is captured here so the
+    // /complete handler reaches the same OAuth endpoint we used to authorize.
    const pendingData = {
      state,
      code_verifier: codeVerifier,
      redirect_uri,
      created_at: Date.now(),
+      ...(serverId ? { server_id: serverId } : {}),
    };

    const encrypted = encryptPayload(pendingData);
@@ -1,13 +1,15 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { logger } from '@/lib/logger';
-import { JmapAuthVerificationError, verifyJmapAuth } from '@/lib/auth/verify-jmap-auth';
+import { JmapAuthVerificationError, normalizeJmapServerUrl, validateProxyAuthHeader, verifyJmapAuth } from '@/lib/auth/verify-jmap-auth';
 import { setStalwartAuthContext } from '@/lib/stalwart/auth-context';
 import { configManager } from '@/lib/admin/config-manager';
 import { isPublicHttpUrl } from '@/lib/security/url-guard';
 import { recordLogin } from '@/lib/telemetry/login-tracker';
+import { parseJmapServers, resolveTrustedJmapUrl } from '@/lib/admin/jmap-servers';
+import { MAX_ACCOUNT_SLOTS } from '@/lib/account-utils';

 function getSlot(request: NextRequest, bodySlot: unknown): number {
-  if (typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot <= 4) {
+  if (typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot < MAX_ACCOUNT_SLOTS) {
    return bodySlot;
  }

@@ -15,7 +17,7 @@ function getSlot(request: NextRequest, bodySlot: unknown): number {
  if (raw === null) return 0;

  const slot = parseInt(raw, 10);
-  return Number.isNaN(slot) || slot < 0 || slot > 4 ? 0 : slot;
+  return Number.isNaN(slot) || slot < 0 || slot >= MAX_ACCOUNT_SLOTS ? 0 : slot;
 }

 export async function POST(request: NextRequest) {
@@ -26,10 +28,9 @@ export async function POST(request: NextRequest) {
      return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
    }

-    // Pin the upstream URL to the configured JMAP server so an unauthenticated
-    // caller cannot point this route at internal hosts. Only when no server URL
-    // is configured AND the deployment explicitly allows custom JMAP endpoints
-    // do we honor the body URL — and even then it must be a public URL.
+    // Pin the upstream URL to a configured JMAP server (single `jmapServerUrl`
+    // or any entry in `jmapServers`). Falls back to the request URL only when
+    // `allowCustomJmapEndpoint` is enabled, and even then it must be public.
    await configManager.ensureLoaded();
    const configuredServerUrl =
      configManager.get<string>('jmapServerUrl', '') ||
@@ -37,11 +38,13 @@ export async function POST(request: NextRequest) {
      process.env.NEXT_PUBLIC_JMAP_SERVER_URL ||
      '';
    const allowCustomEndpoint = configManager.get<boolean>('allowCustomJmapEndpoint', false);
+    const serverList = parseJmapServers(configManager.get<unknown>('jmapServers', []));
+    const trustedUrl = resolveTrustedJmapUrl(serverUrl, configuredServerUrl, serverList);

    let upstreamUrl: string;
    let upstreamTrusted: boolean;
-    if (configuredServerUrl) {
-      upstreamUrl = configuredServerUrl;
+    if (trustedUrl) {
+      upstreamUrl = trustedUrl;
      upstreamTrusted = true;
    } else if (allowCustomEndpoint) {
      if (!(await isPublicHttpUrl(serverUrl))) {
@@ -54,7 +57,15 @@ export async function POST(request: NextRequest) {
    }

    const slot = getSlot(request, bodySlot);
-    const normalizedServerUrl = await verifyJmapAuth(upstreamUrl, authHeader, { trusted: upstreamTrusted });
+    // Trusted (admin-configured) URLs skip the upstream re-fetch: the caller
+    // just authenticated to JMAP with these credentials, and the cookie we
+    // write here is only ever consumed for requests on behalf of this same
+    // user — a bogus auth header would just yield 401s downstream, not
+    // privilege escalation. For untrusted custom endpoints we still verify
+    // upstream as before.
+    const normalizedServerUrl = upstreamTrusted
+      ? (validateProxyAuthHeader(authHeader), normalizeJmapServerUrl(upstreamUrl))
+      : await verifyJmapAuth(upstreamUrl, authHeader, { trusted: false });

    await setStalwartAuthContext(slot, {
      serverUrl: normalizedServerUrl,
@@ -1,40 +1,51 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { cookies } from 'next/headers';
 import { logger } from '@/lib/logger';
-import { refreshTokenCookieName } from '@/lib/oauth/tokens';
+import { refreshTokenCookieName, refreshTokenServerCookieName } from '@/lib/oauth/tokens';
 import { exchangeCodeForTokens, buildOAuthParams, getMetadata, getTokenEndpoint } from '@/lib/oauth/token-exchange';
 import { getCookieOptions } from '@/lib/oauth/cookie-config';
+import { MAX_ACCOUNT_SLOTS } from '@/lib/account-utils';

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

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

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

-    const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot <= 4 ? bodySlot : getSlot(request);
+    const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot < MAX_ACCOUNT_SLOTS ? bodySlot : getSlot(request);
+    const serverId = typeof bodyServerId === 'string' && bodyServerId ? bodyServerId : null;

-    const tokens = await exchangeCodeForTokens(code, code_verifier, redirect_uri);
+    const tokens = await exchangeCodeForTokens(code, code_verifier, redirect_uri, serverId);

    const response = NextResponse.json({
      access_token: tokens.access_token,
      expires_in: tokens.expires_in,
    });

+    const cookieStore = await cookies();
    if (tokens.refresh_token) {
      const cookieName = refreshTokenCookieName(slot);
-      const cookieStore = await cookies();
      cookieStore.set(cookieName, tokens.refresh_token, getCookieOptions());
    }
+    // Persist which server entry minted this refresh token so the PUT/DELETE
+    // handlers can route the refresh/revocation calls to the right token
+    // endpoint without the client having to track it across page loads.
+    const serverCookieName = refreshTokenServerCookieName(slot);
+    if (serverId) {
+      cookieStore.set(serverCookieName, serverId, getCookieOptions());
+    } else {
+      cookieStore.delete(serverCookieName);
+    }

    return response;
  } catch (error) {
@@ -49,17 +60,18 @@ export async function PUT(request: NextRequest) {
    const cookieName = refreshTokenCookieName(slot);
    const cookieStore = await cookies();
    const refreshToken = cookieStore.get(cookieName)?.value;
+    const serverId = cookieStore.get(refreshTokenServerCookieName(slot))?.value || null;

    if (!refreshToken) {
      return NextResponse.json({ error: 'No refresh token' }, { status: 401 });
    }

-    const tokenEndpoint = await getTokenEndpoint();
+    const tokenEndpoint = await getTokenEndpoint(serverId);

    const params = buildOAuthParams({
      grant_type: 'refresh_token',
      refresh_token: refreshToken,
-    });
+    }, serverId);

    const tokenResponse = await fetch(tokenEndpoint, {
      method: 'POST',
@@ -71,6 +83,7 @@ export async function PUT(request: NextRequest) {
      const errorText = await tokenResponse.text();
      logger.error('Token refresh failed', { status: tokenResponse.status, error: errorText });
      cookieStore.delete(cookieName);
+      cookieStore.delete(refreshTokenServerCookieName(slot));
      return NextResponse.json({ error: 'Refresh failed' }, { status: 401 });
    }

@@ -100,17 +113,19 @@ export async function DELETE(request: NextRequest) {
    const all = request.nextUrl.searchParams.get('all') === 'true';

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

        try {
          const revocationResponse = await fetch(metadata.revocation_endpoint, {
@@ -158,6 +175,7 @@ export async function DELETE(request: NextRequest) {

      cookieStore.delete(cookieName);
    }
+    cookieStore.delete(refreshTokenServerCookieName(slot));

    let end_session_url: string | undefined;
    if (metadata?.end_session_endpoint) {
@@ -2,12 +2,14 @@ import { NextRequest, NextResponse } from 'next/server';
 import { cookies } from 'next/headers';
 import { logger } from '@/lib/logger';
 import { discoverOAuth } from '@/lib/oauth/discovery';
-import { refreshTokenCookieName } from '@/lib/oauth/tokens';
+import { refreshTokenCookieName, refreshTokenServerCookieName } from '@/lib/oauth/tokens';
 import { getCookieOptions } from '@/lib/oauth/cookie-config';
 import { readFileEnv } from '@/lib/read-file-env';
 import { configManager } from '@/lib/admin/config-manager';
 import { isPublicHttpUrl } from '@/lib/security/url-guard';
 import { recordLogin } from '@/lib/telemetry/login-tracker';
+import { parseJmapServers, findServerByUrl, findServerById } from '@/lib/admin/jmap-servers';
+import { MAX_ACCOUNT_SLOTS } from '@/lib/account-utils';

 /**
 * Exchange basic auth credentials (with TOTP appended) for OAuth tokens.
@@ -78,18 +80,19 @@ async function findTokenEndpoint(serverUrl: string): Promise<string | null> {

 export async function POST(request: NextRequest) {
  try {
-    const { serverUrl, username, password, slot: bodySlot } = await request.json();
+    const { serverUrl, username, password, slot: bodySlot, server_id: bodyServerId } = await request.json();

    if (!serverUrl || !username || !password) {
      return NextResponse.json({ error: 'Missing required parameters' }, { status: 400 });
    }

-    const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot <= 4 ? bodySlot : 0;
+    const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot < MAX_ACCOUNT_SLOTS ? bodySlot : 0;
+    const requestedServerId = typeof bodyServerId === 'string' && bodyServerId ? bodyServerId : null;

-    // Pin the upstream URL to the configured JMAP server so an unauthenticated
-    // caller cannot point this route at internal hosts. Only when no server
-    // URL is configured (and the deployment explicitly allows custom JMAP
-    // endpoints) do we fall back to the user-supplied URL - and even then
+    // Pin the upstream URL to a configured JMAP server. The list of allowed
+    // servers is `jmapServerUrl` plus any entry from `jmapServers`. Only when
+    // no server is configured (and the deployment explicitly allows custom
+    // JMAP endpoints) do we fall back to the user-supplied URL - and even then
    // it must resolve to a public address.
    await configManager.ensureLoaded();
    const configuredServerUrl =
@@ -98,9 +101,17 @@ export async function POST(request: NextRequest) {
      process.env.NEXT_PUBLIC_JMAP_SERVER_URL ||
      '';
    const allowCustomEndpoint = configManager.get<boolean>('allowCustomJmapEndpoint', false);
+    const serverList = parseJmapServers(configManager.get<unknown>('jmapServers', []));

    let upstreamUrl: string;
-    if (configuredServerUrl) {
+    let resolvedServerId: string | null = null;
+    const requestedEntry = findServerById(serverList, requestedServerId);
+    const matchedEntry = requestedEntry || findServerByUrl(serverList, serverUrl);
+
+    if (matchedEntry) {
+      upstreamUrl = matchedEntry.url;
+      resolvedServerId = matchedEntry.id;
+    } else if (configuredServerUrl) {
      upstreamUrl = configuredServerUrl;
    } else if (allowCustomEndpoint) {
      if (!(await isPublicHttpUrl(serverUrl))) {
@@ -118,7 +129,7 @@ export async function POST(request: NextRequest) {
      return NextResponse.json({ error: 'no_token_endpoint', detail: 'Could not discover OAuth token endpoint on the mail server' }, { status: 404 });
    }

-    return await attemptAllStrategies(tokenEndpoint, upstreamUrl, username, password, slot);
+    return await attemptAllStrategies(tokenEndpoint, upstreamUrl, username, password, slot, resolvedServerId);
  } catch (error) {
    logger.error('TOTP token exchange error', { error: error instanceof Error ? error.message : 'Unknown error' });
    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
@@ -131,11 +142,21 @@ async function attemptAllStrategies(
  username: string,
  password: string,
  slot: number,
+  serverId: string | null,
 ): Promise<NextResponse> {
  logger.info('TOTP token exchange: found token endpoint', { tokenEndpoint });

-  const clientId = configManager.get<string>('oauthClientId', '') || process.env.OAUTH_CLIENT_ID;
-  const clientSecret = configManager.get<string>('oauthClientSecret', '') || process.env.OAUTH_CLIENT_SECRET || readFileEnv(process.env.OAUTH_CLIENT_SECRET_FILE);
+  // Per-server OAuth credentials override the global ones when the requested
+  // server entry has its own oauth block configured.
+  const serverList = parseJmapServers(configManager.get<unknown>('jmapServers', []));
+  const entry = findServerById(serverList, serverId);
+  const clientId = entry?.oauth?.clientId
+    || configManager.get<string>('oauthClientId', '')
+    || process.env.OAUTH_CLIENT_ID;
+  const clientSecret = entry?.oauth?.clientSecret
+    || configManager.get<string>('oauthClientSecret', '')
+    || process.env.OAUTH_CLIENT_SECRET
+    || readFileEnv(process.env.OAUTH_CLIENT_SECRET_FILE);
  const basicAuth = `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`;
  const attempts: Array<{ strategy: string; error: string }> = [];

@@ -147,7 +168,7 @@ async function attemptAllStrategies(
    if (result.ok) {
      logger.info('TOTP token exchange succeeded (ROPC with client_id)');
      void recordLogin(username, serverUrl);
-      return await storeAndRespond(result.tokens, slot);
+      return await storeAndRespond(result.tokens, slot, serverId);
    }
    attempts.push({ strategy: 'ROPC with client_id', error: result.error });
  }
@@ -159,7 +180,7 @@ async function attemptAllStrategies(
    if (result.ok) {
      logger.info('TOTP token exchange succeeded (ROPC without client_id)');
      void recordLogin(username, serverUrl);
-      return await storeAndRespond(result.tokens, slot);
+      return await storeAndRespond(result.tokens, slot, serverId);
    }
    attempts.push({ strategy: 'ROPC without client_id', error: result.error });
  }
@@ -171,7 +192,7 @@ async function attemptAllStrategies(
    if (result.ok) {
      logger.info('TOTP token exchange succeeded (Basic Auth header)');
      void recordLogin(username, serverUrl);
-      return await storeAndRespond(result.tokens, slot);
+      return await storeAndRespond(result.tokens, slot, serverId);
    }
    attempts.push({ strategy: 'Basic Auth header', error: result.error });
  }
@@ -183,7 +204,7 @@ async function attemptAllStrategies(
    if (result.ok) {
      logger.info('TOTP token exchange succeeded (client_credentials + Basic Auth)');
      void recordLogin(username, serverUrl);
-      return await storeAndRespond(result.tokens, slot);
+      return await storeAndRespond(result.tokens, slot, serverId);
    }
    attempts.push({ strategy: 'client_credentials + Basic Auth', error: result.error });
  }
@@ -199,12 +220,19 @@ async function attemptAllStrategies(
 async function storeAndRespond(
  tokens: { access_token: string; expires_in?: number; refresh_token?: string },
  slot: number,
+  serverId: string | null,
 ): Promise<NextResponse> {
+  const cookieStore = await cookies();
  if (tokens.refresh_token) {
    const cookieName = refreshTokenCookieName(slot);
-    const cookieStore = await cookies();
    cookieStore.set(cookieName, tokens.refresh_token, getCookieOptions());
  }
+  const serverCookieName = refreshTokenServerCookieName(slot);
+  if (serverId) {
+    cookieStore.set(serverCookieName, serverId, getCookieOptions());
+  } else {
+    cookieStore.delete(serverCookieName);
+  }

  return NextResponse.json({
    access_token: tokens.access_token,
@@ -1,7 +1,8 @@
 import { NextResponse } from 'next/server';
 import { logger } from '@/lib/logger';
 import { configManager } from '@/lib/admin/config-manager';
-import { readFileEnv } from '@/lib/read-file-env';
+import { parseJmapServers, redactJmapServers } from '@/lib/admin/jmap-servers';
+import { hasSessionSecret } from '@/lib/auth/session-secret';

 /**
 * Runtime configuration endpoint
@@ -34,8 +35,8 @@ export async function GET() {
    oauthOnly,
    oauthClientId: configManager.get<string>('oauthClientId', ''),
    oauthIssuerUrl: configManager.get<string>('oauthIssuerUrl', ''),
-    rememberMeEnabled: !!process.env.SESSION_SECRET || !!readFileEnv(process.env.SESSION_SECRET_FILE),
-    settingsSyncEnabled: configManager.get<boolean>('settingsSyncEnabled', false) && (!!process.env.SESSION_SECRET || !!readFileEnv(process.env.SESSION_SECRET_FILE)),
+    rememberMeEnabled: hasSessionSecret(),
+    settingsSyncEnabled: configManager.get<boolean>('settingsSyncEnabled', false) && hasSessionSecret(),
    stalwartFeaturesEnabled,
    devMode: configManager.get<boolean>('devMode', false),
    faviconUrl: configManager.get<string>('faviconUrl', '/branding/Bulwark_Favicon.svg'),
@@ -49,6 +50,8 @@ export async function GET() {
    loginWebsiteUrl: configManager.get<string>('loginWebsiteUrl', ''),
    demoMode: configManager.get<boolean>('demoMode', false),
    allowCustomJmapEndpoint: configManager.get<boolean>('allowCustomJmapEndpoint', false),
+    jmapServers: redactJmapServers(parseJmapServers(configManager.get<unknown>('jmapServers', []))),
+    jmapServerAutoPickByDomain: configManager.get<boolean>('jmapServerAutoPickByDomain', false),
    autoSsoEnabled: configManager.get<boolean>('autoSsoEnabled', false),
    embeddedMode: !!allowedFrameAncestors && allowedFrameAncestors !== "'none'",
    parentOrigin: configManager.get<string>('parentOrigin', ''),
@@ -4,6 +4,26 @@ import { isPublicHttpUrl } from '@/lib/security/url-guard';
 const MAX_RESPONSE_SIZE = 10 * 1024 * 1024; // 10MB
 const FETCH_TIMEOUT_MS = 15000;

+function extractBasicAuth(rawUrl: string): { cleanUrl: string; authHeader: string | null } | null {
+  let parsed: URL;
+  try {
+    parsed = new URL(rawUrl);
+  } catch {
+    return null;
+  }
+
+  let authHeader: string | null = null;
+  if (parsed.username || parsed.password) {
+    const username = decodeURIComponent(parsed.username);
+    const password = decodeURIComponent(parsed.password);
+    authHeader = `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`;
+    parsed.username = '';
+    parsed.password = '';
+  }
+
+  return { cleanUrl: parsed.toString(), authHeader };
+}
+
 export async function POST(request: NextRequest) {
  let body: { url?: string };
  try {
@@ -18,7 +38,14 @@ export async function POST(request: NextRequest) {
    return NextResponse.json({ error: 'URL is required' }, { status: 400 });
  }

-  if (!(await isPublicHttpUrl(url))) {
+  const extracted = extractBasicAuth(url);
+  if (!extracted) {
+    return NextResponse.json({ error: 'Invalid or disallowed URL' }, { status: 400 });
+  }
+
+  const { cleanUrl, authHeader } = extracted;
+
+  if (!(await isPublicHttpUrl(cleanUrl))) {
    return NextResponse.json({ error: 'Invalid or disallowed URL' }, { status: 400 });
  }

@@ -27,7 +54,8 @@ export async function POST(request: NextRequest) {
    const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);

    const MAX_REDIRECTS = 5;
-    let currentUrl = url;
+    let currentUrl = cleanUrl;
+    const originalOrigin = new URL(cleanUrl).origin;
    let response: Response | undefined;

    for (let i = 0; i <= MAX_REDIRECTS; i++) {
@@ -36,12 +64,17 @@ export async function POST(request: NextRequest) {
        return NextResponse.json({ error: 'Redirect to disallowed URL' }, { status: 400 });
      }

-      response = await fetch(currentUrl, {
-        signal: controller.signal,
-        headers: {
+      const headers: Record<string, string> = {
        'Accept': 'text/calendar, application/ics, text/plain, */*',
        'User-Agent': 'JMAP-Webmail/1.0 Calendar-Fetcher',
-        },
+      };
+      if (authHeader && new URL(currentUrl).origin === originalOrigin) {
+        headers['Authorization'] = authHeader;
+      }
+
+      response = await fetch(currentUrl, {
+        signal: controller.signal,
+        headers,
        redirect: 'manual',
      });

@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
 import { getPluginRegistry, getThemeRegistry } from '@/lib/admin/plugin-registry';
+import { listDevPlugins } from '@/lib/admin/plugin-dev';
 import { logger } from '@/lib/logger';

 /**
@@ -10,15 +11,21 @@ import { logger } from '@/lib/logger';
 */
 export async function GET() {
  try {
-    const [pluginRegistry, themeRegistry] = await Promise.all([
+    const [pluginRegistry, themeRegistry, devEntries] = await Promise.all([
      getPluginRegistry(),
      getThemeRegistry(),
+      listDevPlugins(),
    ]);

-    // Only serve enabled plugins
-    const plugins = pluginRegistry.plugins
-      .filter(p => p.enabled)
-      .map(p => ({
+    // Dev plugins win on id collision so a developer can shadow an installed
+    // plugin without uninstalling it first.
+    const devIds = new Set(devEntries.map(e => e.plugin.id));
+    const installedEnabled = pluginRegistry.plugins.filter(p => p.enabled && !devIds.has(p.id));
+
+    const plugins = [
+      ...devEntries.map(e => ({ ...e.plugin, dev: true })),
+      ...installedEnabled.map(p => ({ ...p, dev: false })),
+    ].map(p => ({
      id: p.id,
      name: p.name,
      version: p.version,
@@ -28,7 +35,17 @@ export async function GET() {
      permissions: p.permissions,
      entrypoint: p.entrypoint,
      forceEnabled: p.forceEnabled || false,
-        settingsSchema: undefined, // Will be read from the bundle's manifest
+      // Content hash + updatedAt let clients detect re-uploads even when
+      // the manifest version is unchanged.
+      bundleHash: p.bundleHash,
+      updatedAt: p.updatedAt,
+      // Marks plugins loaded from PLUGIN_DEV_DIR. Surface in UI as a badge.
+      dev: p.dev,
+      // Surface so clients can enforce api.http.fetch origin allowlists.
+      httpOrigins: p.httpOrigins,
+      // Per-user settings schema, captured from the manifest at upload/load
+      // time so the client can render the settings UI without re-parsing.
+      settingsSchema: p.settingsSchema,
    }));

    // Only serve enabled themes
@@ -163,7 +163,7 @@ export async function GET(request: NextRequest) {
      },
    });
  } catch (error) {
-    // `fetch failed` from undici is too generic to debug — the real reason
+    // `fetch failed` from undici is too generic to debug - the real reason
    // (ENOTFOUND, ECONNREFUSED, TLS error, …) is on `error.cause`.
    const err = error as Error & { cause?: { code?: string; message?: string } };
    logger.error('push preview failed', {
@@ -6,7 +6,8 @@ import { sessionCookieName } from '@/lib/auth/session-cookie';
 import { readStalwartAuthContextFromStore } from '@/lib/stalwart/auth-context';
 import { saveUserSettings, loadUserSettings, deleteUserSettings } from '@/lib/settings-sync';
 import { configManager } from '@/lib/admin/config-manager';
-import { readFileEnv } from '@/lib/read-file-env';
+import { hasSessionSecret } from '@/lib/auth/session-secret';
+import { MAX_ACCOUNT_SLOTS } from '@/lib/account-utils';

 function classifyError(error: unknown): { message: string; status: number } {
  const code = (error as NodeJS.ErrnoException).code;
@@ -49,7 +50,10 @@ function classifyError(error: unknown): { message: string; status: number } {
 }

 function isEnabled(): boolean {
-  return process.env.SETTINGS_SYNC_ENABLED === 'true' && (!!process.env.SESSION_SECRET || !!readFileEnv(process.env.SESSION_SECRET_FILE));
+  const flagOn =
+    process.env.SETTINGS_SYNC_ENABLED === 'true' ||
+    configManager.get<boolean>('settingsSyncEnabled', false);
+  return flagOn && hasSessionSecret();
 }

 /** Strip trailing slashes so differently-formatted URLs still match. */
@@ -59,7 +63,7 @@ function normalizeUrl(url: string): string {

 /**
 * Verify identity against session cookies across all account slots.
- * With multi-account, the requesting account may be on any slot (0-4).
+ * With multi-account, the requesting account may be on any slot.
 * Checks both basic-auth session cookies and stalwart auth context cookies
 * (used by OAuth/SSO and TOTP-upgraded sessions).
 * Returns true only if a matching cookie is found.
@@ -68,7 +72,7 @@ async function verifyIdentity(username: string, serverUrl: string): Promise<bool
  const cookieStore = await cookies();
  const normalizedServerUrl = normalizeUrl(serverUrl);

-  for (let slot = 0; slot <= 4; slot++) {
+  for (let slot = 0; slot < MAX_ACCOUNT_SLOTS; slot++) {
    // Check basic-auth session cookie
    const token = cookieStore.get(sessionCookieName(slot))?.value;
    if (token) {
@@ -0,0 +1,167 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { writeFile, unlink, mkdir } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import path from 'node:path';
+import { detectSetupState } from '@/lib/setup/state';
+import { authenticateWizardRequest } from '@/lib/setup/session';
+import { configManager } from '@/lib/admin/config-manager';
+import { getConfigDir, assertWritable } from '@/lib/admin/paths';
+import { logger } from '@/lib/logger';
+
+export const dynamic = 'force-dynamic';
+
+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',
+]);
+
+const VALID_SLOTS = new Set([
+  'faviconUrl',
+  'appLogoLightUrl',
+  'appLogoDarkUrl',
+  'loginLogoLightUrl',
+  'loginLogoDarkUrl',
+]);
+
+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',
+};
+
+function getBrandingDir(): string {
+  return path.join(getConfigDir(), 'branding');
+}
+
+function sanitizeFilename(name: string): string {
+  return path.basename(name).replace(/[^a-zA-Z0-9._-]/g, '_');
+}
+
+/**
+ * POST /api/setup/branding — wizard branding upload.
+ *
+ * Multipart form fields:
+ *   file — the image (SVG/PNG/JPEG/WebP/ICO, max 2 MB)
+ *   slot — which branding key (faviconUrl, loginLogoLightUrl, etc.)
+ *
+ * Mirrors /api/admin/branding but authenticates via the wizard cookie
+ * instead of admin session — admin auth doesn't exist yet during bootstrap.
+ * Files land in the same directory; the public read endpoint at
+ * /api/admin/branding/<filename> serves both wizard- and admin-uploaded
+ * assets after setup.
+ */
+export async function POST(request: NextRequest) {
+  if (detectSetupState() !== 'bootstrap') {
+    return NextResponse.json({ error: 'Setup is not active' }, { status: 404 });
+  }
+  if (!(await authenticateWizardRequest())) {
+    return NextResponse.json({ error: 'Wizard session required' }, { status: 401 });
+  }
+
+  try {
+    assertWritable('upload branding asset');
+
+    const formData = await request.formData();
+    const file = formData.get('file');
+    const slot = formData.get('slot');
+
+    if (!(file instanceof File) || typeof slot !== 'string') {
+      return NextResponse.json({ error: 'Missing file or slot' }, { status: 400 });
+    }
+    if (!VALID_SLOTS.has(slot)) {
+      return NextResponse.json({ error: `Invalid slot: ${slot}` }, { status: 400 });
+    }
+    if (file.size > MAX_FILE_SIZE) {
+      return NextResponse.json({ error: 'File too large (max 2 MB)' }, { status: 400 });
+    }
+    if (!ALLOWED_MIME_TYPES.has(file.type)) {
+      return NextResponse.json(
+        { error: `Unsupported file type: ${file.type}. Allowed: SVG, PNG, JPEG, WebP, ICO` },
+        { status: 400 },
+      );
+    }
+
+    const ext = EXT_BY_MIME[file.type] ?? '.png';
+    const safeName = sanitizeFilename(`${slot}${ext}`);
+
+    const dir = getBrandingDir();
+    if (!existsSync(dir)) {
+      await mkdir(dir, { recursive: true });
+    }
+
+    // Remove any existing file for this slot with a different extension so
+    // the wizard doesn't leave orphan files behind on re-upload.
+    for (const otherExt of Object.values(EXT_BY_MIME)) {
+      if (otherExt === ext) continue;
+      const oldPath = path.join(dir, `${slot}${otherExt}`);
+      if (existsSync(oldPath)) {
+        try { await unlink(oldPath); } catch { /* ignore */ }
+      }
+    }
+
+    const buffer = Buffer.from(await file.arrayBuffer());
+    const filePath = path.join(dir, safeName);
+    await writeFile(filePath, buffer);
+
+    const servedUrl = `/api/admin/branding/${safeName}`;
+    await configManager.ensureLoaded();
+    await configManager.setAdminConfig({ [slot]: servedUrl });
+
+    return NextResponse.json({ url: servedUrl, filename: safeName });
+  } catch (error) {
+    logger.error('Wizard branding upload failed', {
+      error: error instanceof Error ? error.message : 'Unknown error',
+    });
+    return NextResponse.json({ error: 'Upload failed' }, { status: 500 });
+  }
+}
+
+/**
+ * DELETE /api/setup/branding — remove an uploaded asset and clear the
+ * config override so the slot falls back to the system default.
+ *
+ * Body: { slot: string }
+ */
+export async function DELETE(request: NextRequest) {
+  if (detectSetupState() !== 'bootstrap') {
+    return NextResponse.json({ error: 'Setup is not active' }, { status: 404 });
+  }
+  if (!(await authenticateWizardRequest())) {
+    return NextResponse.json({ error: 'Wizard session required' }, { status: 401 });
+  }
+
+  try {
+    assertWritable('remove branding asset');
+    const { slot } = (await request.json()) as { slot?: string };
+    if (!slot || !VALID_SLOTS.has(slot)) {
+      return NextResponse.json({ error: 'Invalid or missing slot' }, { status: 400 });
+    }
+
+    const dir = getBrandingDir();
+    for (const ext of Object.values(EXT_BY_MIME)) {
+      const filePath = path.join(dir, `${slot}${ext}`);
+      if (existsSync(filePath)) {
+        try { await unlink(filePath); } catch { /* ignore */ }
+      }
+    }
+
+    await configManager.ensureLoaded();
+    await configManager.removeAdminOverride(slot);
+
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Wizard branding delete failed', {
+      error: error instanceof Error ? error.message : 'Unknown error',
+    });
+    return NextResponse.json({ error: 'Delete failed' }, { status: 500 });
+  }
+}
@@ -0,0 +1,107 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { writeFile } from 'node:fs/promises';
+import { detectSetupState } from '@/lib/setup/state';
+import { authenticateWizardRequest, SETUP_COOKIE } from '@/lib/setup/session';
+import { configManager } from '@/lib/admin/config-manager';
+import { setInitialAdminPassword } from '@/lib/admin/password';
+import { clearSetupToken } from '@/lib/setup/token';
+import { ensureConfigDir, getConfigPath } from '@/lib/admin/paths';
+import { auditLog } from '@/lib/admin/audit';
+import { logger } from '@/lib/logger';
+
+export const dynamic = 'force-dynamic';
+
+/**
+ * POST /api/setup/finish
+ *
+ * Final wizard step. Validates that required config is in place, hashes the
+ * admin password, marks setup complete, deletes the setup token (which
+ * invalidates the wizard cookie), and optionally drops a `.config-locked`
+ * marker so the operator remembers they intended to mount :ro.
+ *
+ * Body: { adminPassword: string, lockConfig?: boolean }
+ */
+export async function POST(request: NextRequest) {
+  if (detectSetupState() !== 'bootstrap') {
+    return NextResponse.json({ error: 'Setup is not active' }, { status: 404 });
+  }
+  if (!(await authenticateWizardRequest())) {
+    return NextResponse.json({ error: 'Wizard session required' }, { status: 401 });
+  }
+
+  let body: { adminPassword?: unknown; lockConfig?: unknown };
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
+  }
+
+  const adminPassword =
+    typeof body?.adminPassword === 'string' ? body.adminPassword : '';
+  if (adminPassword.length < 8) {
+    return NextResponse.json(
+      { error: 'Admin password must be at least 8 characters' },
+      { status: 400 },
+    );
+  }
+
+  const lockConfig = body?.lockConfig === true;
+
+  // Validate required config is present.
+  await configManager.ensureLoaded();
+  const jmapUrl = configManager.get<string>('jmapServerUrl', '');
+  if (!jmapUrl || typeof jmapUrl !== 'string') {
+    return NextResponse.json(
+      { error: 'JMAP server URL is required (run the Server step first)' },
+      { status: 400 },
+    );
+  }
+
+  try {
+    // 1. Provision the admin account. Aborts cleanly if one already exists
+    //    (defence in depth - should be impossible in bootstrap state).
+    const created = await setInitialAdminPassword(adminPassword);
+    if (!created) {
+      return NextResponse.json(
+        { error: 'Admin account already exists; cannot finish setup again' },
+        { status: 409 },
+      );
+    }
+
+    // 2. Persist setupComplete flag. After this, detectSetupState() flips
+    //    to 'configured' and middleware starts 404'ing /setup paths.
+    await configManager.markSetupComplete();
+
+    // 3. Optional advisory lock marker.
+    if (lockConfig) {
+      await ensureConfigDir();
+      await writeFile(
+        getConfigPath('.config-locked'),
+        new Date().toISOString(),
+        'utf-8',
+      );
+    }
+
+    // 4. Destroy the setup token. Any other browser holding the cookie is
+    //    now unauthenticated.
+    await clearSetupToken();
+
+    await auditLog(
+      'setup.finish',
+      { lockConfig, jmapServerUrl: jmapUrl },
+      request.headers.get('x-forwarded-for') ?? 'unknown',
+    );
+
+    const response = NextResponse.json({ ok: true, lockConfig });
+    response.cookies.delete(SETUP_COOKIE);
+    return response;
+  } catch (error) {
+    logger.error('Wizard finish failed', {
+      error: error instanceof Error ? error.message : 'Unknown error',
+    });
+    return NextResponse.json(
+      { error: 'Failed to finish setup', detail: error instanceof Error ? error.message : 'Unknown' },
+      { status: 500 },
+    );
+  }
+}
@@ -0,0 +1,52 @@
+import { NextResponse } from 'next/server';
+import { detectSetupState } from '@/lib/setup/state';
+import { authenticateWizardRequest } from '@/lib/setup/session';
+import { configManager } from '@/lib/admin/config-manager';
+import { isConfigReadOnly } from '@/lib/admin/paths';
+import { SENSITIVE_CONFIG_KEYS } from '@/lib/admin/types';
+
+export const dynamic = 'force-dynamic';
+
+/**
+ * GET /api/setup/status - public endpoint that returns the wizard state
+ * and (if authenticated) the partial config saved by previous steps. The
+ * wizard polls this on load so a refresh resumes with prior values.
+ *
+ * Sensitive values (OAuth client secret, session secret) are NEVER sent
+ * back to the client - only a `<key>HasValue` boolean. Re-entering them
+ * after refresh is the price of not exposing them.
+ */
+export async function GET() {
+  await configManager.ensureLoaded();
+  const state = detectSetupState();
+  const authenticated = state === 'bootstrap' ? await authenticateWizardRequest() : false;
+
+  let partialConfig: Record<string, unknown> | null = null;
+  if (state === 'bootstrap' && authenticated) {
+    // Only echo back values the operator has actually saved during the
+    // wizard (admin overrides). System defaults must not flow back here,
+    // because the wizard has its own opinionated defaults (e.g. settings
+    // sync on by default) that we'd otherwise stomp.
+    const sources = configManager.getAllWithSources();
+    const safe: Record<string, unknown> = {};
+    for (const [key, info] of Object.entries(sources)) {
+      if (info.source !== 'admin') continue;
+      if (SENSITIVE_CONFIG_KEYS.has(key)) {
+        safe[`${key}HasValue`] = typeof info.value === 'string' && info.value.length > 0;
+      } else {
+        safe[key] = info.value;
+      }
+    }
+    partialConfig = safe;
+  }
+
+  return NextResponse.json(
+    {
+      state,
+      authenticated,
+      readOnly: isConfigReadOnly(),
+      partialConfig,
+    },
+    { headers: { 'Cache-Control': 'no-store' } },
+  );
+}
@@ -0,0 +1,118 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { detectSetupState } from '@/lib/setup/state';
+import { authenticateWizardRequest } from '@/lib/setup/session';
+import { configManager } from '@/lib/admin/config-manager';
+import { CONFIG_ENV_MAP } from '@/lib/admin/types';
+import { parseJmapServers } from '@/lib/admin/jmap-servers';
+import { logger } from '@/lib/logger';
+
+export const dynamic = 'force-dynamic';
+
+/**
+ * Mapping of wizard-friendly step keys to the config keys they update. Each
+ * step's PATCH validates against this allowlist so a compromised wizard
+ * client can't slip in arbitrary config keys.
+ */
+const STEP_KEYS: Record<string, string[]> = {
+  server: [
+    'appName',
+    'jmapServerUrl',
+    'stalwartFeaturesEnabled',
+    'jmapServers',
+    'jmapServerAutoPickByDomain',
+  ],
+  auth: [
+    'oauthEnabled',
+    'oauthOnly',
+    'oauthClientId',
+    'oauthClientSecret',
+    'oauthIssuerUrl',
+  ],
+  security: ['sessionSecret', 'settingsSyncEnabled'],
+  logging: ['logFormat', 'logLevel'],
+  branding: [
+    'faviconUrl',
+    'appLogoLightUrl',
+    'appLogoDarkUrl',
+    'loginLogoLightUrl',
+    'loginLogoDarkUrl',
+    'loginCompanyName',
+    'loginImprintUrl',
+    'loginPrivacyPolicyUrl',
+    'loginWebsiteUrl',
+  ],
+};
+
+/**
+ * POST /api/setup/step
+ * Body: { step: 'server' | 'auth' | ..., values: Record<string, unknown> }
+ *
+ * Persists partial config under the admin override (config.json). Each
+ * step's allowed keys are restricted by STEP_KEYS so the client can only
+ * touch what the corresponding screen owns.
+ */
+export async function POST(request: NextRequest) {
+  if (detectSetupState() !== 'bootstrap') {
+    return NextResponse.json({ error: 'Setup is not active' }, { status: 404 });
+  }
+  if (!(await authenticateWizardRequest())) {
+    return NextResponse.json({ error: 'Wizard session required' }, { status: 401 });
+  }
+
+  let body: { step?: unknown; values?: unknown };
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
+  }
+
+  const step = typeof body?.step === 'string' ? body.step : '';
+  const values = body?.values;
+  const allowedKeys = STEP_KEYS[step];
+  if (!allowedKeys) {
+    return NextResponse.json({ error: `Unknown step: ${step}` }, { status: 400 });
+  }
+  if (!values || typeof values !== 'object' || Array.isArray(values)) {
+    return NextResponse.json({ error: 'values must be an object' }, { status: 400 });
+  }
+
+  const updates: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(values as Record<string, unknown>)) {
+    if (!allowedKeys.includes(key)) {
+      return NextResponse.json({ error: `Key not allowed in step ${step}: ${key}` }, { status: 400 });
+    }
+    if (!(key in CONFIG_ENV_MAP)) {
+      return NextResponse.json({ error: `Unknown config key: ${key}` }, { status: 400 });
+    }
+    if (key === 'jmapServers') {
+      // Sanitize: drop entries with bad ids, dup ids, or non-HTTP URLs
+      // before they're persisted. Mirrors the admin config PATCH route.
+      if (value != null && !Array.isArray(value)) {
+        return NextResponse.json({ error: 'jmapServers must be an array' }, { status: 400 });
+      }
+      const sanitized = parseJmapServers(value);
+      const incomingCount = Array.isArray(value) ? value.length : 0;
+      if (sanitized.length !== incomingCount) {
+        return NextResponse.json(
+          { error: `One or more jmapServers entries were invalid (kept ${sanitized.length}/${incomingCount})` },
+          { status: 400 },
+        );
+      }
+      updates[key] = sanitized;
+      continue;
+    }
+    updates[key] = value;
+  }
+
+  try {
+    await configManager.ensureLoaded();
+    await configManager.setAdminConfig(updates);
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    logger.error('Wizard step save failed', {
+      step,
+      error: error instanceof Error ? error.message : 'Unknown error',
+    });
+    return NextResponse.json({ error: 'Failed to save step' }, { status: 500 });
+  }
+}
@@ -0,0 +1,104 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { detectSetupState } from '@/lib/setup/state';
+import { authenticateWizardRequest } from '@/lib/setup/session';
+
+export const dynamic = 'force-dynamic';
+
+const JMAP_ENDPOINTS = ['/.well-known/jmap', '/jmap/session', '/jmap'];
+const FETCH_TIMEOUT_MS = 5000;
+
+/**
+ * POST /api/setup/test-jmap - server-side probe of a JMAP server. Mirrors
+ * the check_jmap_server() helper in setup.sh: we hit a few common session
+ * endpoints and look for capability strings to confirm the URL is actually
+ * a JMAP server (vs. a generic HTTP 200 page).
+ *
+ * Body: { url: string }
+ */
+export async function POST(request: NextRequest) {
+  if (detectSetupState() !== 'bootstrap') {
+    return NextResponse.json({ error: 'Setup is not active' }, { status: 404 });
+  }
+  if (!(await authenticateWizardRequest())) {
+    return NextResponse.json({ error: 'Wizard session required' }, { status: 401 });
+  }
+
+  let body: { url?: unknown };
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
+  }
+
+  const raw = typeof body?.url === 'string' ? body.url.trim() : '';
+  if (!raw) {
+    return NextResponse.json({ error: 'url required' }, { status: 400 });
+  }
+
+  let parsed: URL;
+  try {
+    parsed = new URL(raw);
+  } catch {
+    return NextResponse.json({ status: 'invalid_url', message: 'URL is not well-formed' });
+  }
+  if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+    return NextResponse.json({ status: 'invalid_url', message: 'URL must use http or https' });
+  }
+
+  const base = raw.replace(/\/+$/, '');
+
+  for (const endpoint of JMAP_ENDPOINTS) {
+    const target = base + endpoint;
+    try {
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+      const res = await fetch(target, {
+        method: 'GET',
+        redirect: 'follow',
+        signal: controller.signal,
+      });
+      clearTimeout(timer);
+
+      if (!res.ok) continue;
+      const text = await res.text();
+      if (looksLikeJmapSession(text)) {
+        return NextResponse.json({
+          status: 'jmap_detected',
+          endpoint,
+          httpStatus: res.status,
+        });
+      }
+    } catch {
+      // Try the next endpoint; we'll fall through to a final reachability
+      // check below if none match.
+    }
+  }
+
+  // No JMAP session found. Was the server even reachable?
+  try {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+    const res = await fetch(base, {
+      method: 'HEAD',
+      redirect: 'follow',
+      signal: controller.signal,
+    });
+    clearTimeout(timer);
+    return NextResponse.json({
+      status: 'reachable_no_jmap',
+      httpStatus: res.status,
+      message:
+        'Server responded but no JMAP session was found at standard paths. ' +
+        'This is OK if a reverse proxy routes JMAP separately.',
+    });
+  } catch (error) {
+    return NextResponse.json({
+      status: 'unreachable',
+      message: error instanceof Error ? error.message : 'Connection failed',
+    });
+  }
+}
+
+function looksLikeJmapSession(body: string): boolean {
+  return /"capabilities"|"apiUrl"|"downloadUrl"|"urn:ietf:params:jmap/i.test(body);
+}
@@ -0,0 +1,49 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { detectSetupState } from '@/lib/setup/state';
+import { verifySetupToken } from '@/lib/setup/token';
+import { buildSessionCookieAttributes } from '@/lib/setup/session';
+
+export const dynamic = 'force-dynamic';
+
+/**
+ * POST /api/setup/token - exchange the bootstrap token (printed to logs at
+ * startup) for a wizard session cookie. After this, subsequent step calls
+ * authenticate via the cookie instead of pasting the token every time.
+ *
+ * Body: { token: string }
+ */
+export async function POST(request: NextRequest) {
+  if (detectSetupState() !== 'bootstrap') {
+    return NextResponse.json({ error: 'Setup is not active' }, { status: 404 });
+  }
+
+  let body: { token?: unknown };
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
+  }
+
+  const submitted = typeof body?.token === 'string' ? body.token.trim() : '';
+  if (!submitted) {
+    return NextResponse.json({ error: 'Token required' }, { status: 400 });
+  }
+
+  const ok = await verifySetupToken(submitted);
+  if (!ok) {
+    // Don't differentiate between "wrong token" and "no token issued" - the
+    // operator either has it from the logs or they don't.
+    return NextResponse.json({ error: 'Invalid or expired token' }, { status: 401 });
+  }
+
+  const response = NextResponse.json({ ok: true });
+  const attrs = buildSessionCookieAttributes();
+  response.cookies.set(attrs.name, submitted, {
+    httpOnly: attrs.httpOnly,
+    sameSite: attrs.sameSite,
+    secure: attrs.secure,
+    path: attrs.path,
+    maxAge: attrs.maxAge,
+  });
+  return response;
+}
@@ -0,0 +1,31 @@
+import { NextResponse } from 'next/server';
+import { checkOnce, loadState } from '@/lib/version-check';
+
+// Public endpoint that returns the latest cached update status. Fed by the
+// background scheduler started in instrumentation.node.ts; in production we
+// never trigger a fresh upstream fetch from this route so an unauthenticated
+// client can't use it to amplify traffic to the version server.
+//
+// In development we force a fresh fetch on every hit so changes to the
+// version server's overrides take effect on the next page reload instead of
+// requiring a dev-server restart. The 5s upstream timeout in fetchStatus
+// caps the worst-case latency added to a dev reload.
+export async function GET() {
+  if (process.env.NODE_ENV === 'development') {
+    await checkOnce({ reason: 'dev-reload' });
+  }
+
+  const state = await loadState();
+  return NextResponse.json(
+    {
+      status: state.status,
+      lastCheckedAt: state.lastCheckedAt,
+      lastSuccessAt: state.lastSuccessAt,
+    },
+    {
+      headers: {
+        'Cache-Control': 'no-store',
+      },
+    },
+  );
+}
@@ -171,8 +171,15 @@ body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family:
-    system-ui,
    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans Thai",
+    "Leelawadee UI",
+    Tahoma,
    sans-serif;
  font-feature-settings:
    "rlig" 1,
@@ -765,3 +772,32 @@ body {
 .tiptap.resize-cursor {
  cursor: col-resize;
 }
+
+/* Smooth halo applied to a setting row when the user clicks a sub-result in
+   the settings search. The element bg + a 10px box-shadow fill the row plus
+   a 10px ring of the same tint, then a 2px outline sits exactly at the outer
+   edge. Uses the primary theme color so it adapts to light/dark. */
+@keyframes settings-search-pulse {
+  0% {
+    background-color: color-mix(in srgb, var(--color-primary) 0%, transparent);
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent);
+    outline-color: color-mix(in srgb, var(--color-primary) 0%, transparent);
+  }
+  30% {
+    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-primary) 12%, transparent);
+    outline-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
+  }
+  100% {
+    background-color: color-mix(in srgb, var(--color-primary) 0%, transparent);
+    box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-primary) 0%, transparent);
+    outline-color: color-mix(in srgb, var(--color-primary) 0%, transparent);
+  }
+}
+
+.settings-search-highlight {
+  outline: 2px solid transparent;
+  outline-offset: 10px;
+  border-radius: 8px;
+  animation: settings-search-pulse 1.6s ease-in-out forwards;
+}
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 1000 1000">
-  <defs>
-    <clipPath id="_clipPath_ONeeZd4dujNSzmUupv5CE8R64LUE9BqV"><rect width="1000" height="1000"/></clipPath>
-    <style>
-      .icon-bg { fill: #ffffff; }
-      .icon-mark { fill: rgb(219,45,84); }
-      @media (prefers-color-scheme: dark) {
-        .icon-bg { fill: #18181b; }
-      }
-    </style>
-  </defs>
-  <g clip-path="url(#_clipPath_ONeeZd4dujNSzmUupv5CE8R64LUE9BqV)">
-    <rect width="1000" height="1000" class="icon-bg"/>
-    <path d=" M 489.315 575.068 L 225.342 338.071 C 222.394 335.424 220 330.058 220 326.095 L 220 297.377 C 220 293.415 223.135 289.474 226.996 288.583 L 320.697 266.96 C 324.558 266.069 327.692 268.563 327.692 272.525 L 327.692 331.61 L 406.851 313.338 C 410.712 312.446 413.846 308.506 413.846 304.543 L 413.846 252.643 C 413.846 248.681 416.981 244.741 420.842 243.85 L 493.004 227.197 C 496.865 226.306 503.135 226.306 506.996 227.197 L 579.158 243.85 C 583.019 244.741 586.154 248.681 586.154 252.643 L 586.154 304.543 C 586.154 308.506 589.288 312.446 593.149 313.338 L 672.308 331.61 L 672.308 272.525 C 672.308 268.563 675.442 266.069 679.303 266.96 L 773.004 288.583 C 776.865 289.474 780 293.415 780 297.377 L 780 326.095 C 780 330.058 777.606 335.424 774.658 338.071 L 510.685 575.068 C 504.788 580.362 495.212 580.362 489.315 575.068 Z " class="icon-mark"/>
-    <path d=" M 780 429.762 L 780 470.138 C 780 474.101 777.725 479.593 774.923 482.394 L 742 515.318 C 739.198 518.12 736.923 523.612 736.923 527.574 L 736.923 649.625 C 736.922 672.529 730.827 692.394 719.048 710.431 L 599.991 591.373 L 780 429.762 Z " class="icon-mark"/>
-    <path d=" M 220 429.762 L 220 462.959 C 220 470.884 224.55 481.867 230.153 487.471 L 252.924 510.241 C 258.527 515.845 263.077 526.829 263.077 534.754 L 263.077 649.625 C 263.078 672.529 269.173 692.394 280.952 710.431 L 400.009 591.373 L 220 429.762 Z " class="icon-mark"/>
-    <path d=" M 667.232 760.147 C 627.163 787.649 570.672 813.211 500 843.472 Q 500 843.472 500 843.472 C 429.328 813.211 372.837 787.649 332.768 760.147 L 454.622 638.293 C 459.461 641.204 464.582 643.644 469.918 645.569 C 479.567 649.058 489.741 650.839 500 650.832 C 510.259 650.839 520.433 649.058 530.082 645.569 C 535.418 643.644 540.539 641.204 545.378 638.293 L 667.232 760.147 Z " class="icon-mark"/>
-  </g>
-</svg>
@@ -4,6 +4,7 @@ import { headers } from "next/headers";
 import { getLocale } from "next-intl/server";
 import { PWAInstallPrompt } from "@/components/pwa-install-prompt";
 import { ServiceWorkerRegistration } from "@/components/service-worker-registration";
+import { configManager } from "@/lib/admin/config-manager";
 import "./globals.css";

 const geistSans = Geist({
@@ -17,7 +18,8 @@ const geistMono = Geist_Mono({
 });

 export async function generateMetadata(): Promise<Metadata> {
-  const faviconUrl = process.env.FAVICON_URL;
+  await configManager.ensureLoaded();
+  const faviconUrl = configManager.get<string>("faviconUrl", "/branding/Bulwark_Favicon.svg");

  return {
    title: process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || "Webmail",
@@ -30,7 +32,7 @@ export async function generateMetadata(): Promise<Metadata> {
    formatDetection: {
      telephone: false,
    },
-    ...(faviconUrl ? { icons: { icon: faviconUrl } } : {}),
+    icons: { icon: faviconUrl },
  };
 }

@@ -2,13 +2,26 @@ import type { MetadataRoute } from "next";

 export const dynamic = "force-dynamic";

+type WebAppProtocolHandler = {
+  protocol: string;
+  url: string;
+};
+
+type ExtendedManifest = MetadataRoute.Manifest & {
+  protocol_handlers?: WebAppProtocolHandler[];
+  launch_handler?: {
+    client_mode?: "navigate-existing" | "auto" | "focus-existing" | "navigate-new"
+      | Array<"navigate-existing" | "auto" | "focus-existing" | "navigate-new">;
+  };
+};
+
 // Manifest paths must include the deployment subpath - browsers resolve them
 // against the document origin, not the manifest's location, and Next.js does
 // not auto-prefix string literals inside MetadataRoute payloads.
 const BASE_PATH = (process.env.NEXT_PUBLIC_BASE_PATH ?? "").replace(/\/+$/, "");
 const withBase = (p: string) => `${BASE_PATH}${p}`;

-export default function manifest(): MetadataRoute.Manifest {
+export default function manifest(): ExtendedManifest {
  const appName =
    process.env.APP_NAME ||
    process.env.NEXT_PUBLIC_APP_NAME ||
@@ -57,5 +70,12 @@ export default function manifest(): MetadataRoute.Manifest {
      { src: withBase("/screenshot-540x720.png"), sizes: "540x720", type: "image/png" },
      { src: withBase("/screenshot-1280x720.png"), sizes: "1280x720", type: "image/png" },
    ],
+    protocol_handlers: [
+      { protocol: "mailto", url: withBase("/protocol/mailto?url=%s") },
+      { protocol: "webcal", url: withBase("/protocol/webcal?url=%s") },
+    ],
+    launch_handler: {
+      client_mode: ["focus-existing", "navigate-new"],
+    },
  };
 }
@@ -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")} />;
+}
@@ -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")} />;
+}
@@ -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>;
+}
@@ -144,6 +144,12 @@ export function CalendarSidebarPanel({
          {cal.id === BIRTHDAY_CALENDAR_ID && (
            <Cake className="w-3 h-3 text-muted-foreground flex-shrink-0" />
          )}
+          {!cal.isShared && Object.keys(cal.shareWith || {}).length > 0 && (
+            <Users
+              className="w-3 h-3 text-muted-foreground flex-shrink-0"
+              aria-label={tMgmt('share')}
+            />
+          )}
        </button>
      </div>
    );
@@ -150,9 +150,8 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
        aria-label={ariaLabel}
        {...dragProps}
        className={cn(
-          "w-full h-full text-left rounded px-1.5 py-0.5 text-xs overflow-hidden",
+          "w-full h-full text-left rounded-r px-1.5 py-0.5 text-xs overflow-hidden",
          "hover:opacity-90 transition-opacity cursor-pointer",
-          continuesBefore && "rounded-l-sm",
          continuesAfter && "rounded-r-sm",
          continuesBefore && "-ml-0.5",
          continuesAfter && "pr-2",
@@ -182,7 +181,7 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
      {...dragProps}
      data-calendar-event
      className={cn(
-        "w-full h-full text-left rounded px-1.5 py-0.5 text-xs overflow-hidden",
+        "w-full h-full text-left rounded-r px-1.5 py-0.5 text-xs overflow-hidden",
        "hover:opacity-90 transition-opacity cursor-pointer",
        isSelected && "ring-2 ring-primary",
        isBeingDragged && "opacity-50",
@@ -22,6 +22,8 @@ import { PluginSlot } from "@/components/plugins/plugin-slot";
 import { useSettingsStore } from "@/stores/settings-store";
 import { generateUUID } from "@/lib/utils";
 import { useFormatEventDate } from "@/hooks/use-format-event-date";
+import { calendarHooks } from "@/lib/plugin-hooks";
+import type { ConflictWarning } from "@/lib/plugin-types";

 export interface PendingEventPreview {
  start: Date;
@@ -242,6 +244,31 @@ export function EventModal({
  const [sendInvitations, setSendInvitations] = useState(true);
  const participantInputRef = useRef<ParticipantInputHandle>(null);

+  // Plugin transform: collect conflict warnings for the current event form.
+  // Re-runs (debounced) whenever fields that affect scheduling change.
+  const [pluginConflictWarnings, setPluginConflictWarnings] = useState<ConflictWarning[]>([]);
+  useEffect(() => {
+    let cancelled = false;
+    const t = setTimeout(async () => {
+      const startStr = allDay ? `${startDate}T00:00:00` : `${startDate}T${startTime}:00`;
+      const endStr = allDay ? `${endDate}T23:59:59` : `${endDate}T${endTime}:00`;
+      const warnings = await calendarHooks.onCheckEventConflicts.transform([] as ConflictWarning[], {
+        event: {
+          title,
+          description,
+          start: startStr,
+          end: endStr,
+          isAllDay: allDay,
+          location,
+          virtualLocation,
+          calendarId,
+        },
+      });
+      if (!cancelled) setPluginConflictWarnings(warnings);
+    }, 250);
+    return () => { cancelled = true; clearTimeout(t); };
+  }, [title, description, startDate, startTime, endDate, endTime, allDay, location, virtualLocation, calendarId]);
+
  // Report live preview to parent for grid outline
  useEffect(() => {
    if (!onPreviewChange || isEdit) return;
@@ -923,6 +950,26 @@ export function EventModal({
            )}
          </div>

+          {pluginConflictWarnings.length > 0 && (
+            <div className="space-y-1.5">
+              {pluginConflictWarnings.map(w => (
+                <div
+                  key={w.key}
+                  className={
+                    w.severity === 'error'
+                      ? 'text-sm rounded-md border border-destructive/50 bg-destructive/10 text-destructive px-3 py-2'
+                      : w.severity === 'info'
+                        ? 'text-sm rounded-md border border-border bg-muted/40 text-muted-foreground px-3 py-2'
+                        : 'text-sm rounded-md border border-yellow-500/50 bg-yellow-500/10 text-yellow-700 dark:text-yellow-300 px-3 py-2'
+                  }
+                  title={w.message}
+                >
+                  {w.message}
+                </div>
+              ))}
+            </div>
+          )}
+
          {calendars.length > 1 && (
            <div>
              <label className="text-sm font-medium mb-1 block">{t("form.calendar_select")}</label>
@@ -17,6 +17,7 @@ interface ICalImportModalProps {
  calendars: Calendar[];
  client: IJMAPClient;
  onClose: () => void;
+  initialUrl?: string;
 }

 const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
@@ -25,7 +26,7 @@ const ACCEPTED_EXTENSIONS = [".ics", ".ical"];
 type ImportStep = "select" | "preview" | "importing";
 type ImportMode = "file" | "url";

-export function ICalImportModal({ calendars, client, onClose }: ICalImportModalProps) {
+export function ICalImportModal({ calendars, client, onClose, initialUrl }: ICalImportModalProps) {
  const t = useTranslations("calendar.import");
  const tCal = useTranslations("calendar");
  const tCommon = useTranslations("common");
@@ -43,8 +44,8 @@ export function ICalImportModal({ calendars, client, onClose }: ICalImportModalP
  const [isParsing, setIsParsing] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const [error, setError] = useState<string | null>(null);
-  const [importMode, setImportMode] = useState<ImportMode>("file");
-  const [urlInput, setUrlInput] = useState("");
+  const [importMode, setImportMode] = useState<ImportMode>(initialUrl ? "url" : "file");
+  const [urlInput, setUrlInput] = useState(initialUrl || "");
  const [isFetchingUrl, setIsFetchingUrl] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const modalRef = useRef<HTMLDivElement>(null);
@@ -13,9 +13,11 @@ interface ICalSubscriptionModalProps {
  client: IJMAPClient;
  onClose: () => void;
  editSubscription?: ICalSubscription;
+  initialUrl?: string;
+  initialName?: string;
 }

-export function ICalSubscriptionModal({ client, onClose, editSubscription }: ICalSubscriptionModalProps) {
+export function ICalSubscriptionModal({ client, onClose, editSubscription, initialUrl, initialName }: ICalSubscriptionModalProps) {
  const t = useTranslations("calendar.subscription");
  const tCommon = useTranslations("common");
  const addICalSubscription = useCalendarStore((s) => s.addICalSubscription);
@@ -23,8 +25,8 @@ export function ICalSubscriptionModal({ client, onClose, editSubscription }: ICa

  const isEdit = !!editSubscription;

-  const [url, setUrl] = useState(editSubscription?.url || "");
-  const [name, setName] = useState(editSubscription?.name || "");
+  const [url, setUrl] = useState(editSubscription?.url || initialUrl || "");
+  const [name, setName] = useState(editSubscription?.name || initialName || "");
  const [color, setColor] = useState(editSubscription?.color || "#3b82f6");
  const [refreshInterval, setRefreshInterval] = useState(editSubscription?.refreshInterval || 60);
  const [isSubmitting, setIsSubmitting] = useState(false);
@@ -685,7 +685,13 @@ function AddressBookItem({
    >
      <Book className="w-4 h-4 flex-shrink-0" />
      <span className="truncate">{book.name}</span>
-      <span className="ml-auto text-xs text-muted-foreground tabular-nums">
+      {!book.isShared && Object.keys(book.shareWith || {}).length > 0 && (
+        <Users className="w-3 h-3 text-muted-foreground flex-shrink-0 ml-auto" />
+      )}
+      <span className={cn(
+        "text-xs text-muted-foreground tabular-nums",
+        !(!book.isShared && Object.keys(book.shareWith || {}).length > 0) && "ml-auto"
+      )}>
        {contactCount}
      </span>
    </button>
@@ -1,6 +1,7 @@
 'use client';

-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import {
  ArrowRight,
  Calendar,
@@ -36,6 +37,7 @@ import {
 } from '@/lib/calendar-invitation';
 import { cn } from '@/lib/utils';
 import { sanitizeColor } from '@/components/calendar/event-card';
+import { RecipientPopover } from './recipient-popover';

 interface InvitationChangeItem {
  label: string;
@@ -326,25 +328,26 @@ function buildParticipantsForRsvp(
  );
 }

-function getMethodAccentClass(method: InvitationMethod, actorStatus?: string | null): string {
+function getMethodIconTone(method: InvitationMethod, actorStatus?: string | null): string {
  switch (method) {
    case 'cancel':
    case 'declinecounter':
-      return 'border-l-red-500 dark:border-l-red-400';
-    case 'request':
-    case 'add':
-      return 'border-l-blue-500 dark:border-l-blue-400';
+      return 'bg-destructive/15 text-destructive';
    case 'counter':
-      return 'border-l-amber-500 dark:border-l-amber-400';
+      return 'bg-warning/15 text-warning';
    case 'reply':
      switch (actorStatus) {
-        case 'accepted': return 'border-l-green-500 dark:border-l-green-400';
-        case 'tentative': return 'border-l-amber-500 dark:border-l-amber-400';
-        case 'declined': return 'border-l-red-500 dark:border-l-red-400';
-        default: return 'border-l-blue-500 dark:border-l-blue-400';
+        case 'accepted': return 'bg-success/15 text-success';
+        case 'tentative': return 'bg-warning/15 text-warning';
+        case 'declined': return 'bg-destructive/15 text-destructive';
+        default: return 'bg-primary/15 text-primary';
      }
+    case 'request':
+    case 'add':
+    case 'publish':
+      return 'bg-primary/15 text-primary';
    default:
-      return 'border-l-slate-400 dark:border-l-slate-500';
+      return 'bg-muted text-muted-foreground';
  }
 }

@@ -371,9 +374,11 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
  const [actionError, setActionError] = useState<string | null>(null);
  const [isProcessing, setIsProcessing] = useState(false);
  const [showCalendarPicker, setShowCalendarPicker] = useState(false);
+  const [pickerPosition, setPickerPosition] = useState<{ top: number; left: number } | null>(null);
+  const pickerTriggerRef = useRef<HTMLButtonElement>(null);
  const [selectedCalendarId, setSelectedCalendarId] = useState<string>('');
  const [rawIcsMethod, setRawIcsMethod] = useState<InvitationMethod>('unknown');
-  const [isCollapsed, setIsCollapsed] = useState(true);
+  const [isCollapsed, setIsCollapsed] = useState(false);

  const attachment = findCalendarAttachment(email);

@@ -437,6 +442,17 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
    }
  }, [calendars, selectedCalendarId]);

+  useEffect(() => {
+    if (!showCalendarPicker) return;
+    const close = () => setShowCalendarPicker(false);
+    window.addEventListener('scroll', close, true);
+    window.addEventListener('resize', close);
+    return () => {
+      window.removeEventListener('scroll', close, true);
+      window.removeEventListener('resize', close);
+    };
+  }, [showCalendarPicker]);
+
  if (!attachment || !calendarInvitationParsingEnabled) return null;

  const detectedMethod = parsedEvent ? getInvitationMethod(parsedEvent, { email, attachment }) : 'unknown';
@@ -444,8 +460,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
  const summary = parsedEvent ? formatEventSummary(parsedEvent) : null;
  const isCancellation = method === 'cancel';
  const isResponseOnly = method === 'reply' || method === 'refresh' || method === 'counter' || method === 'declinecounter';
-  const canCollapse = method === 'reply';
-  const showDetails = !canCollapse || !isCollapsed;
+  const showDetails = !isCollapsed;
  const allowsRsvp = method === 'request';
  const allowsImport = method === 'request' || method === 'publish' || method === 'add' || method === 'unknown';

@@ -486,7 +501,6 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
  const actorName = actorSummary?.name || actorSummary?.email || t('actor_unknown');
  const actorStatus = getParticipationLabel(t, actorSummary?.participationStatus ?? null);
  const actorMessage = actorSummary ? getActorMessage(t, method, actorName, actorStatus) : null;
-  const actionFeedback = actionNotice;
  // For REQUEST method, allow RSVP even if we can't find the user in participants:
  // the email was sent TO the user, so they are an attendee. handleRsvp handles
  // the import-then-find-participant flow for this case.
@@ -721,130 +735,167 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
    }
  };

-  const accentClass = getMethodAccentClass(method, actorSummary?.participationStatus);
-
  if (state === 'loading') {
    return (
-      <div className="rounded-lg border border-border bg-muted/20 px-4 py-3 flex items-center gap-2.5">
-        <Calendar className="w-4 h-4 text-primary flex-shrink-0" />
-        <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
-        <span className="text-sm text-muted-foreground">{t('loading')}</span>
+      <div className="flex items-center gap-3">
+        <div className="w-10 h-10 rounded-full bg-muted text-muted-foreground flex items-center justify-center flex-shrink-0 shadow-sm">
+          <Calendar className="w-5 h-5" />
+        </div>
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Loader2 className="w-3.5 h-3.5 animate-spin" />
+          <span>{t('loading')}</span>
+        </div>
      </div>
    );
  }

  if (state === 'error') {
    return (
-      <div className="rounded-lg border border-destructive/20 bg-destructive/10 px-4 py-3 flex items-center gap-2.5">
-        <AlertCircle className="w-4 h-4 text-destructive flex-shrink-0" />
+      <div className="flex items-center gap-3">
+        <div className="w-10 h-10 rounded-full bg-destructive/15 text-destructive flex items-center justify-center flex-shrink-0 shadow-sm">
+          <AlertCircle className="w-5 h-5" />
+        </div>
        <span className="text-sm text-destructive">{t('parse_error')}</span>
      </div>
    );
  }

+  const iconTone = getMethodIconTone(method, actorSummary?.participationStatus);
+
+  const hasStatusPills = Boolean(
+    existingEvent
+    || userIsOrganizer
+    || (participationLabel && myParticipant)
+    || actionNotice
+    || (parsedEvent?.status && parsedEvent.status !== 'confirmed')
+  );
+
+  const showActionsRow = showDetails && (
+    canRespond
+    || (supportsCalendar && !existingEvent && allowsImport && !isResponseOnly && !isCancellation)
+    || canApplyProposal
+    || (supportsCalendar && (existingEvent || parsedEvent))
+    || !supportsCalendar
+  );
+
  return (
-    <div className={cn("rounded-lg border border-border overflow-hidden border-l-4", accentClass)}>
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-2.5 bg-muted/30 border-b border-border">
-        <div className="flex items-center gap-2 min-w-0">
-          {isCancellation ? (
-            <CalendarX className="w-4 h-4 text-destructive flex-shrink-0" />
-          ) : (
-            <Calendar className="w-4 h-4 text-primary flex-shrink-0" />
+    <div
+      className={cn(
+        "flex items-start gap-3 rounded-md transition-colors",
+        isCollapsed && "cursor-pointer hover:bg-muted/50",
      )}
-          <span className="text-sm font-medium text-foreground truncate">{bannerTitle}</span>
-        </div>
-        {canCollapse && (
-          <button
-            type="button"
-            onClick={() => setIsCollapsed((prev) => !prev)}
-            aria-expanded={!isCollapsed}
-            aria-label={isCollapsed ? t('expand') : t('collapse')}
-            title={isCollapsed ? t('expand') : t('collapse')}
-            className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors flex-shrink-0"
+      onClick={isCollapsed ? () => setIsCollapsed(false) : undefined}
+      onKeyDown={isCollapsed ? (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          setIsCollapsed(false);
+        }
+      } : undefined}
+      role={isCollapsed ? 'button' : undefined}
+      tabIndex={isCollapsed ? 0 : undefined}
+      aria-expanded={isCollapsed ? false : undefined}
    >
-            {isCollapsed ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />}
-          </button>
+      {/* Avatar-style icon */}
+      <div className={cn(
+        "w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 shadow-sm",
+        iconTone,
+      )}>
+        {isCancellation ? (
+          <CalendarX className="w-5 h-5" />
+        ) : (
+          <Calendar className="w-5 h-5" />
        )}
      </div>

-      {/* Content */}
-      {showDetails && (
-      <div className="px-4 py-3 space-y-2.5">
-        <div className="lg:flex lg:gap-6">
-          {/* Left: Event info */}
-          <div className="lg:flex-1 space-y-2.5 min-w-0">
-            {/* Event title */}
-            {summary?.title && (
+      {/* Content column */}
+      <div className="flex-1 min-w-0 space-y-2">
+        {/* Eyebrow + title + collapse */}
        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0 flex-1">
+            <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+              {bannerTitle}
+            </div>
+            {summary?.title && (
              <h3 className={cn(
-                  "text-base font-semibold leading-snug",
-                  isCancellation ? "line-through text-muted-foreground" : "text-foreground"
+                "text-sm font-semibold leading-snug break-words",
+                isCancellation ? "line-through text-muted-foreground" : "text-foreground",
              )}>
                {summary.title}
              </h3>
+            )}
+          </div>
+
+          <div className="flex items-center gap-1.5 flex-shrink-0">
            {parsedEvent?.sequence != null && parsedEvent.sequence > 0 && (
-                  <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground flex-shrink-0 whitespace-nowrap">
+              <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground whitespace-nowrap">
                {t('event_updated', { sequence: parsedEvent.sequence })}
              </span>
            )}
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsCollapsed((prev) => !prev);
+              }}
+              aria-expanded={!isCollapsed}
+              className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-0.5 transition-colors"
+            >
+              {isCollapsed ? <ChevronDown className="w-3 h-3" /> : <ChevronUp className="w-3 h-3" />}
+              {isCollapsed ? t('expand') : t('collapse')}
+            </button>
+          </div>
        </div>
-            )}

-            {/* Event details */}
-            <div className="lg:flex lg:items-center lg:gap-4 lg:flex-wrap space-y-1 lg:space-y-0">
-              {summary?.start && (
-                <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+        {/* Meta rows */}
+        {showDetails && summary && (summary.start || summary.location || summary.attendeeCount > 0) && (
+          <div className="flex flex-col gap-1 text-sm text-muted-foreground sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-4 sm:gap-y-1">
+            {summary.start && (
+              <span className="flex items-center gap-1.5 min-w-0">
                <Clock className="w-3.5 h-3.5 flex-shrink-0" />
-                  <span>
+                <span className="truncate">
                  {formatDateTime(summary.start)}
                  {summary.end && ` – ${formatDateTime(summary.end)}`}
                </span>
-                </div>
-              )}
-              {summary?.location && (
-                <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
-                  <MapPin className="w-3.5 h-3.5 flex-shrink-0" />
-                  <span>{summary.location}</span>
-                </div>
-              )}
-              {summary?.organizer && (
-                <span className="flex items-center gap-1.5 text-sm text-muted-foreground">
-                  <Users className="w-3.5 h-3.5 flex-shrink-0" />
-                  {t('organizer', { name: summary.organizer })}
              </span>
            )}
-              {summary && summary.attendeeCount > 0 && (
-                <span className="text-sm text-muted-foreground">{t('attendees', { count: summary.attendeeCount })}</span>
+            {summary.location && (
+              <span className="flex items-center gap-1.5 min-w-0">
+                <MapPin className="w-3.5 h-3.5 flex-shrink-0" />
+                <span className="truncate">{summary.location}</span>
+              </span>
+            )}
+            {summary.attendeeCount > 0 && (
+              <span className="text-muted-foreground/80">{t('attendees', { count: summary.attendeeCount })}</span>
            )}
          </div>
-          </div>
+        )}

-          {/* Right: Info & actor messages on large screens */}
-          <div className="lg:flex-shrink-0 lg:text-right lg:max-w-xs mt-2.5 lg:mt-0 space-y-1">
-            {bannerInfo && (
-              <p className="text-xs text-muted-foreground leading-relaxed">{bannerInfo}</p>
-            )}
-            {actorMessage && (
-              <p className="text-xs text-muted-foreground">{actorMessage}</p>
-            )}
-            {actorSummary?.participationComment && (
-              <p className="text-xs text-muted-foreground italic">
-                {t('actor_note', { comment: actorSummary.participationComment })}
-              </p>
+        {/* Organizer row (clickable, left-aligned) */}
+        {showDetails && summary?.organizer && (
+          <div className="flex items-center gap-1.5 text-sm text-muted-foreground min-w-0">
+            <Users className="w-3.5 h-3.5 flex-shrink-0" />
+            <span className="flex-shrink-0">{t('organizer_label')}</span>
+            {summary.organizerEmail ? (
+              <RecipientPopover
+                name={summary.organizer}
+                email={summary.organizerEmail}
+                className="text-sm truncate"
+              />
+            ) : (
+              <span className="truncate text-foreground">{summary.organizer}</span>
            )}
          </div>
-        </div>
+        )}

-        {/* Status badges */}
-        {(existingEvent || userIsOrganizer || (participationLabel && myParticipant) || actionFeedback || (parsedEvent?.status && parsedEvent.status !== 'confirmed')) && (
-          <div className="flex items-center gap-1.5 flex-wrap">
+        {/* Status pills */}
+        {showDetails && hasStatusPills && (
+          <div className="flex flex-wrap items-center gap-1.5">
            {parsedEvent?.status && parsedEvent.status !== 'confirmed' && (
              <span className={cn(
                "rounded-full px-2 py-0.5 text-[11px] font-medium",
                parsedEvent.status === 'cancelled'
                  ? "bg-destructive/15 text-destructive"
-                  : "bg-warning/15 text-warning"
+                  : "bg-warning/15 text-warning",
              )}>
                {t(`event_status_${parsedEvent.status}`)}
              </span>
@@ -862,21 +913,45 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
            {participationLabel && myParticipant && (
              <span className={cn(
                'rounded-full px-2 py-0.5 text-[11px] font-medium',
-                getParticipationTone(currentRsvp)
+                getParticipationTone(currentRsvp),
              )}>
                {t('your_response', { status: participationLabel })}
              </span>
            )}
-            {actionFeedback && (
+            {actionNotice && (
              <span className="rounded-full bg-success/15 px-2 py-0.5 text-[11px] font-medium text-success">
-                {actionFeedback}
+                {actionNotice}
              </span>
            )}
          </div>
        )}

+        {/* Info / actor messages */}
+        {showDetails && (bannerInfo || actorMessage || actorSummary?.participationComment) && (
+          <div className="space-y-0.5 text-xs text-muted-foreground">
+            {bannerInfo && <p className="leading-relaxed">{bannerInfo}</p>}
+            {actorMessage && <p>{actorMessage}</p>}
+            {actorSummary?.participationComment && (
+              <p className="italic">{t('actor_note', { comment: actorSummary.participationComment })}</p>
+            )}
+          </div>
+        )}
+
+        {/* Trust warning */}
+        {showDetails && trustMessage && trustAssessment && (
+          <div className={cn(
+            'flex items-start gap-2 text-sm rounded-md px-3 py-2 border',
+            trustAssessment.level === 'warning'
+              ? 'bg-destructive/10 text-destructive border-destructive/30'
+              : 'bg-warning/10 text-warning border-warning/30',
+          )}>
+            <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+            <span className="flex-1">{trustMessage}</span>
+          </div>
+        )}
+
        {/* Proposed changes */}
-        {proposedChanges.length > 0 && (
+        {showDetails && proposedChanges.length > 0 && (
          <div className="rounded-md border border-border bg-muted/30 px-3 py-2.5 text-xs">
            <div className="font-medium text-foreground mb-1.5">{t('proposed_changes')}</div>
            <div className="space-y-1.5">
@@ -890,32 +965,17 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
          </div>
        )}

-        {/* Trust warning */}
-        {trustMessage && trustAssessment && (
-          <div className={cn(
-            'flex items-start gap-1.5 text-xs rounded-md px-3 py-2',
-            trustAssessment.level === 'warning'
-              ? 'bg-destructive/10 text-destructive border border-destructive/20'
-              : 'bg-warning/10 text-warning border border-warning/20'
-          )}>
-            <AlertCircle className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
-            <span>{trustMessage}</span>
-          </div>
-        )}
-
        {/* Action error */}
-        {actionError && (
-          <div className="flex items-start gap-1.5 text-xs text-destructive rounded-md px-3 py-2 bg-destructive/10 border border-destructive/20">
-            <AlertCircle className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
-            <span>{actionError}</span>
-          </div>
-        )}
+        {showDetails && actionError && (
+          <div className="flex items-start gap-2 text-sm rounded-md px-3 py-2 bg-destructive/10 text-destructive border border-destructive/30">
+            <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+            <span className="flex-1">{actionError}</span>
          </div>
        )}

        {/* Actions */}
-      {showDetails && (
-      <div className="px-4 py-2.5 border-t border-border bg-muted/20 flex items-center gap-2 flex-wrap">
+        {showActionsRow && (
+          <div className="flex flex-wrap items-center gap-1.5 pt-0.5">
          {canRespond && (
            <>
              <button
@@ -925,8 +985,8 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
                className={cn(
                  "inline-flex items-center gap-1.5 text-sm font-medium px-3 py-1.5 rounded-md transition-colors min-h-[36px] disabled:opacity-50 border",
                  currentRsvp === 'accepted'
-                  ? "bg-success/15 text-success border-success/20"
-                  : "text-muted-foreground hover:text-success border-border hover:border-success/30 hover:bg-success/10"
+                    ? "bg-success/15 text-success border-success/30"
+                    : "text-muted-foreground hover:text-success border-border hover:border-success/30 hover:bg-success/10",
                )}
              >
                <Check className="w-3.5 h-3.5" />
@@ -939,8 +999,8 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
                className={cn(
                  "inline-flex items-center gap-1.5 text-sm font-medium px-3 py-1.5 rounded-md transition-colors min-h-[36px] disabled:opacity-50 border",
                  currentRsvp === 'tentative'
-                  ? "bg-warning/15 text-warning border-warning/20"
-                  : "text-muted-foreground hover:text-warning border-border hover:border-warning/30 hover:bg-warning/10"
+                    ? "bg-warning/15 text-warning border-warning/30"
+                    : "text-muted-foreground hover:text-warning border-border hover:border-warning/30 hover:bg-warning/10",
                )}
              >
                <HelpCircle className="w-3.5 h-3.5" />
@@ -953,27 +1013,35 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
                className={cn(
                  "inline-flex items-center gap-1.5 text-sm font-medium px-3 py-1.5 rounded-md transition-colors min-h-[36px] disabled:opacity-50 border",
                  currentRsvp === 'declined'
-                  ? "bg-destructive/15 text-destructive border-destructive/20"
-                  : "text-muted-foreground hover:text-destructive border-border hover:border-destructive/30 hover:bg-destructive/10"
+                    ? "bg-destructive/15 text-destructive border-destructive/30"
+                    : "text-muted-foreground hover:text-destructive border-border hover:border-destructive/30 hover:bg-destructive/10",
                )}
              >
                <X className="w-3.5 h-3.5" />
                {t('decline')}
              </button>
-
-            <div className="w-px h-5 bg-border" />
+              <div className="w-px h-5 bg-border mx-1" />
            </>
          )}

          {supportsCalendar && !existingEvent && allowsImport && !isResponseOnly && !isCancellation && (
-          <div className="relative">
+            <>
              <button
+                ref={pickerTriggerRef}
                onClick={() => {
                  if (calendars.length <= 1) {
                    handleImport();
-                } else {
-                  setShowCalendarPicker(!showCalendarPicker);
+                    return;
                  }
+                  if (showCalendarPicker) {
+                    setShowCalendarPicker(false);
+                    return;
+                  }
+                  if (pickerTriggerRef.current) {
+                    const rect = pickerTriggerRef.current.getBoundingClientRect();
+                    setPickerPosition({ top: rect.bottom + 4, left: rect.left });
+                  }
+                  setShowCalendarPicker(true);
                }}
                disabled={isProcessing}
                className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md border border-border hover:bg-muted transition-colors min-h-[36px] disabled:opacity-50"
@@ -983,8 +1051,11 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
                {calendars.length > 1 && <ChevronDown className="w-3 h-3" />}
              </button>

-            {showCalendarPicker && calendars.length > 1 && (
-              <div className="absolute left-0 top-full mt-1 w-52 bg-background rounded-lg shadow-lg border border-border z-10 py-1">
+              {showCalendarPicker && calendars.length > 1 && pickerPosition && typeof document !== 'undefined' && createPortal(
+                <div
+                  className="fixed w-52 bg-background rounded-lg shadow-lg border border-border z-50 py-1"
+                  style={{ top: pickerPosition.top, left: pickerPosition.left }}
+                >
                  <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground">
                    {t('select_calendar')}
                  </div>
@@ -1004,9 +1075,10 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
                      <span className="truncate text-foreground">{cal.name}</span>
                    </button>
                  ))}
-              </div>
+                </div>,
+                document.body,
              )}
-          </div>
+            </>
          )}

          {canApplyProposal && (
@@ -1041,5 +1113,6 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
        </div>
        )}
      </div>
+    </div>
  );
 }
@@ -10,6 +10,8 @@ import { cn, formatFileSize, formatDateTime, generateUUID } from "@/lib/utils";
 import { debug } from "@/lib/debug";
 import { toast } from "@/stores/toast-store";
 import { sanitizeEmailHtml } from "@/lib/email-sanitization";
+import { emailHooks, contactHooks } from "@/lib/plugin-hooks";
+import type { OutgoingEmail, RecipientSuggestion } from "@/lib/plugin-types";
 import { useAuthStore } from "@/stores/auth-store";
 import { useIdentityStore } from "@/stores/identity-store";
 import { useAccountStore } from "@/stores/account-store";
@@ -30,9 +32,10 @@ import { TemplatePicker } from "@/components/templates/template-picker";
 import { TemplateForm } from "@/components/templates/template-form";
 import type { EmailTemplate } from "@/lib/template-types";
 import { appendPlainTextSignature, getPlainTextSignature } from "@/lib/signature-utils";
-import { findReplyIdentityId } from "@/lib/reply-identity";
+import { resolveReplyFrom } from "@/lib/reply-identity";
 import { computeReplyThreadingHeaders } from "@/lib/email-threading";
 import { RichTextEditor } from "@/components/email/rich-text-editor";
+import type { Editor } from "@tiptap/react";

 /** Strip HTML tags and decode entities to get a plain-text version */
 function htmlToPlainText(html: string): string {
@@ -53,6 +56,10 @@ export interface ComposerDraftData {
  mode: 'compose' | 'reply' | 'replyAll' | 'forward';
  replyTo?: EmailComposerProps['replyTo'];
  draftId: string | null;
+  /** When set, overrides the header From: — sent through the selected identity's envelope. */
+  fromOverrideEmail?: string;
+  fromOverrideName?: string;
+  fromOverrideEnabled?: boolean;
 }

 interface EmailComposerProps {
@@ -67,6 +74,7 @@ interface EmailComposerProps {
    fromEmail?: string;
    fromName?: string;
    identityId?: string;
+    envelopeMailFrom?: string;
    attachments?: Array<{ blobId: string; name: string; type: string; size: number; disposition?: 'attachment' | 'inline'; cid?: string }>;
    inReplyTo?: string[];
    references?: string[];
@@ -109,6 +117,39 @@ type ComposerAttachment = {
  abortController?: AbortController;
 };

+type SignatureIdentityLike = {
+  htmlSignature?: string;
+  textSignature?: string;
+} | null | undefined;
+
+// Render the embedded signature for "above quote" mode. Bracketed with
+// `data-signature-block` marker paragraphs so we can swap the inner content
+// when the user switches identity without losing the surrounding draft or
+// quoted message. The markers are preserved through TipTap by the
+// StyledParagraph extension.
+function buildEmbeddedSignatureHtml(
+  identity: SignatureIdentityLike,
+  options: { embed: boolean; separator: boolean }
+): string {
+  if (!options.embed) return '';
+  const startMarker = options.separator
+    ? `<p data-signature-block="separator">-- </p>`
+    : `<p data-signature-block="start"></p>`;
+  const endMarker = `<p data-signature-block="end"></p>`;
+  if (identity?.htmlSignature) {
+    return `${startMarker}${sanitizeEmailHtml(identity.htmlSignature)}${endMarker}`;
+  }
+  if (identity?.textSignature) {
+    const escaped = identity.textSignature
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/\n/g, '<br>');
+    return `${startMarker}<p>${escaped}</p>${endMarker}`;
+  }
+  return '';
+}
+
 export function EmailComposer({
  onSend,
  onClose,
@@ -128,6 +169,25 @@ export function EmailComposer({
  const autoSelectReplyIdentity = useSettingsStore((state) => state.autoSelectReplyIdentity);
  const attachmentReminderEnabled = useSettingsStore((state) => state.attachmentReminderEnabled);
  const attachmentReminderKeywords = useSettingsStore((state) => state.attachmentReminderKeywords);
+  const signaturePosition = useSettingsStore((state) => state.signaturePosition);
+  const signatureSeparatorEnabled = useSettingsStore((state) => state.signatureSeparatorEnabled);
+  const identities = useIdentityStore((s) => s.identities);
+  const primaryIdentity = identities[0] ?? null;
+
+  // The signature identity used when embedding the signature into the initial
+  // body for "above quote" mode. Mirrors the signatureIdentity derivation
+  // below, but uses initialData (or primary) since selectedIdentityId state
+  // does not exist yet at this point.
+  const initialCurrentIdentityForSig = initialData?.selectedIdentityId
+    ? identities.find((i) => i.id === initialData.selectedIdentityId) || primaryIdentity
+    : primaryIdentity;
+  const initialSignatureIdentity = (initialCurrentIdentityForSig?.htmlSignature || initialCurrentIdentityForSig?.textSignature)
+    ? initialCurrentIdentityForSig
+    : primaryIdentity;
+  const shouldEmbedSignatureAboveQuote =
+    (mode === 'reply' || mode === 'replyAll' || mode === 'forward') &&
+    signaturePosition === 'above_quote' &&
+    !!(initialSignatureIdentity?.htmlSignature || initialSignatureIdentity?.textSignature);

  // Initialize with reply/forward data if provided
  const getInitialTo = () => {
@@ -177,10 +237,19 @@ export function EmailComposer({
      const originalText = replyTo.body || (replyTo.htmlBody ? htmlToPlainText(replyTo.htmlBody) : '');
      const quotedText = originalText.split('\n').map(line => `> ${line}`).join('\n');

+      // When "above quote" is configured, splice signature between the user's
+      // drafting area and the quoted content so it reads naturally as a
+      // closing for the reply body. Send-time append is skipped — see
+      // shouldEmbedSignatureAboveQuote.
+      const plainSep = signatureSeparatorEnabled ? '\n\n-- \n' : '\n\n';
+      const signatureBlock = shouldEmbedSignatureAboveQuote
+        ? `${plainSep}${getPlainTextSignature(initialSignatureIdentity)}`
+        : '';
+
      if (mode === 'forward') {
-        return `${prefix}\n\n---------- Forwarded message ----------\nFrom: ${fromStr}\nDate: ${date}\nSubject: ${replyTo.subject || ''}\n\n${originalText}`;
+        return `${prefix}${signatureBlock}\n\n---------- Forwarded message ----------\nFrom: ${fromStr}\nDate: ${date}\nSubject: ${replyTo.subject || ''}\n\n${originalText}`;
      } else if (mode === 'reply' || mode === 'replyAll') {
-        return `${prefix}\n\nOn ${date}, ${fromStr} wrote:\n${quotedText}`;
+        return `${prefix}${signatureBlock}\n\nOn ${date}, ${fromStr} wrote:\n${quotedText}`;
      }
      return prefix;
    }
@@ -192,20 +261,25 @@ export function EmailComposer({
    const from = replyTo.from?.[0];
    const fromStr = from ? `${from.name || from.email}` : tCommon('unknown');

+    const signatureBlock = buildEmbeddedSignatureHtml(initialSignatureIdentity, {
+      embed: shouldEmbedSignatureAboveQuote,
+      separator: signatureSeparatorEnabled,
+    });
+
    // Build quoted content as HTML
    if (replyTo.htmlBody && (mode === 'reply' || mode === 'replyAll' || mode === 'forward')) {
      const quoteHeader = mode === 'forward'
        ? `---------- Forwarded message ----------<br>From: ${fromStr}<br>Date: ${date}<br>Subject: ${replyTo.subject || ''}<br><br>`
        : `On ${date}, ${fromStr} wrote:<br>`;
-      return `${prefix}<br><div>${quoteHeader}</div><blockquote style="margin:0 0 0 0.8ex;border-left:2px solid #ccc;padding-left:1ex">${replyTo.htmlBody}</blockquote>`;
+      return `${prefix}${signatureBlock}<br><div>${quoteHeader}</div><blockquote style="margin:0 0 0 0.8ex;border-left:2px solid #ccc;padding-left:1ex">${replyTo.htmlBody}</blockquote>`;
    }

    if (replyTo.body) {
      const escapedOriginal = replyTo.body.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
      if (mode === 'forward') {
-        return `${prefix}<br><br>---------- Forwarded message ----------<br>From: ${fromStr}<br>Date: ${date}<br>Subject: ${replyTo.subject || ''}<br><br>${escapedOriginal}`;
+        return `${prefix}${signatureBlock}<br><br>---------- Forwarded message ----------<br>From: ${fromStr}<br>Date: ${date}<br>Subject: ${replyTo.subject || ''}<br><br>${escapedOriginal}`;
      } else if (mode === 'reply' || mode === 'replyAll') {
-        return `${prefix}<br><br>On ${date}, ${fromStr} wrote:<br><blockquote style="margin:0 0 0 0.8ex;border-left:2px solid #ccc;padding-left:1ex">${escapedOriginal}</blockquote>`;
+        return `${prefix}${signatureBlock}<br><br>On ${date}, ${fromStr} wrote:<br><blockquote style="margin:0 0 0 0.8ex;border-left:2px solid #ccc;padding-left:1ex">${escapedOriginal}</blockquote>`;
      }
    }
    return prefix;
@@ -243,6 +317,9 @@ export function EmailComposer({
  const [shakeField, setShakeField] = useState<string | null>(null);
  const [selectedIdentityId, setSelectedIdentityId] = useState<string | null>(initialData?.selectedIdentityId ?? null);
  const [subAddressTag, setSubAddressTag] = useState<string>(initialData?.subAddressTag ?? '');
+  const [fromOverrideEnabled, setFromOverrideEnabled] = useState<boolean>(initialData?.fromOverrideEnabled ?? false);
+  const [fromOverrideEmail, setFromOverrideEmail] = useState<string>(initialData?.fromOverrideEmail ?? '');
+  const [fromOverrideName, setFromOverrideName] = useState<string>(initialData?.fromOverrideName ?? '');
  const [showTemplatePicker, setShowTemplatePicker] = useState(false);
  const [showSaveAsTemplate, setShowSaveAsTemplate] = useState(false);
  const [showCloseDialog, setShowCloseDialog] = useState(false);
@@ -274,24 +351,96 @@ export function EmailComposer({
  });

  const { client } = useAuthStore();
-  const identities = useIdentityStore((s) => s.identities);
-  const primaryIdentity = identities[0] ?? null;
  const currentIdentity = selectedIdentityId
    ? identities.find((identity) => identity.id === selectedIdentityId) || primaryIdentity
    : primaryIdentity;
+  // Alias identities often lack a configured signature - fall back to the primary
+  // identity's signature so replies (which auto-select a matching alias) still
+  // populate the user's signature.
+  const signatureIdentity = (currentIdentity?.htmlSignature || currentIdentity?.textSignature)
+    ? currentIdentity
+    : primaryIdentity;
+
+  // Hold the TipTap editor instance so we can swap the embedded signature
+  // when the user switches identity in "above quote" mode without rebuilding
+  // the whole body (which would lose user edits to the surrounding draft).
+  const editorRef = useRef<Editor | null>(null);
+  const prevSignatureIdentityIdRef = useRef<string | null | undefined>(signatureIdentity?.id);
+  const prevSignatureSeparatorRef = useRef<boolean>(signatureSeparatorEnabled);
+
+  useEffect(() => {
+    const editor = editorRef.current;
+    const identityChanged = prevSignatureIdentityIdRef.current !== signatureIdentity?.id;
+    const separatorChanged = prevSignatureSeparatorRef.current !== signatureSeparatorEnabled;
+    prevSignatureIdentityIdRef.current = signatureIdentity?.id;
+    prevSignatureSeparatorRef.current = signatureSeparatorEnabled;
+    if (!editor) return;
+    if (!identityChanged && !separatorChanged) return;
+    if (plainTextMode) return;
+    if (mode !== 'reply' && mode !== 'replyAll' && mode !== 'forward') return;
+    if (signaturePosition !== 'above_quote') return;
+
+    const currentHtml = editor.getHTML();
+    const doc = new DOMParser().parseFromString(currentHtml, 'text/html');
+    const startEl = doc.querySelector('[data-signature-block="separator"], [data-signature-block="start"]');
+    if (!startEl) return;
+    const endEl = doc.querySelector('[data-signature-block="end"]');
+
+    const newSignature = buildEmbeddedSignatureHtml(signatureIdentity, {
+      embed: true,
+      separator: signatureSeparatorEnabled,
+    });
+    if (!newSignature) return;
+
+    // Build a temporary container holding the replacement nodes so we can
+    // splice them in without re-serializing/parsing twice.
+    const replacementHost = doc.createElement('div');
+    replacementHost.innerHTML = newSignature;
+    const replacementNodes = Array.from(replacementHost.childNodes);
+
+    const parent = startEl.parentNode;
+    if (!parent) return;
+
+    // Remove the existing signature range [startEl … endEl] inclusive, or
+    // from startEl to the next blockquote if no end marker is present.
+    const removeUntil = endEl && endEl.parentNode === parent ? endEl : null;
+    const toRemove: Node[] = [];
+    let cursor: Node | null = startEl;
+    while (cursor) {
+      toRemove.push(cursor);
+      if (cursor === removeUntil) break;
+      const next: Node | null = cursor.nextSibling;
+      if (!removeUntil && next && (next as Element).tagName === 'BLOCKQUOTE') break;
+      cursor = next;
+    }
+    const insertBefore = toRemove[toRemove.length - 1]?.nextSibling ?? null;
+    toRemove.forEach((node) => parent.removeChild(node));
+    replacementNodes.forEach((node) => parent.insertBefore(node, insertBefore));
+
+    const nextHtml = doc.body.innerHTML;
+    if (nextHtml !== currentHtml) {
+      editor.commands.setContent(nextHtml, { emitUpdate: true });
+    }
+  }, [signatureIdentity?.id, signatureIdentity?.htmlSignature, signatureIdentity?.textSignature, signatureSeparatorEnabled, signaturePosition, mode, plainTextMode]);
+
  useEffect(() => {
    if (!autoSelectReplyIdentity) return;
    if (selectedIdentityId || initialData?.selectedIdentityId) return;
    if (mode !== 'reply' && mode !== 'replyAll') return;

-    const matchedIdentityId = findReplyIdentityId(identities, {
+    const resolved = resolveReplyFrom(identities, {
      to: replyTo?.to,
      cc: replyTo?.cc,
      bcc: replyTo?.bcc,
    });

-    if (matchedIdentityId) {
-      setSelectedIdentityId(matchedIdentityId);
+    if (resolved) {
+      setSelectedIdentityId(resolved.identityId);
+      if (resolved.overrideEmail && !fromOverrideEnabled) {
+        setFromOverrideEnabled(true);
+        setFromOverrideEmail(resolved.overrideEmail);
+        if (resolved.overrideName) setFromOverrideName(resolved.overrideName);
+      }
      return;
    }

@@ -310,6 +459,7 @@ export function EmailComposer({
    }
  }, [
    autoSelectReplyIdentity,
+    fromOverrideEnabled,
    identities,
    initialData?.selectedIdentityId,
    mode,
@@ -320,12 +470,15 @@ export function EmailComposer({
    selectedIdentityId,
  ]);

-  const composerSignatureHtml = currentIdentity?.htmlSignature
-    ? `<div>${sanitizeEmailHtml(currentIdentity.htmlSignature)}</div>`
-    : currentIdentity?.textSignature
-      ? `<div>${getPlainTextSignature(currentIdentity).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</div>`
+  const composerSignatureHtml = signatureIdentity?.htmlSignature
+    ? `<div>${sanitizeEmailHtml(signatureIdentity.htmlSignature)}</div>`
+    : signatureIdentity?.textSignature
+      ? `<div>${getPlainTextSignature(signatureIdentity).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</div>`
      : '';
  const getAutocomplete = useContactStore((s) => s.getAutocomplete);
+  const addToTrustedSendersBook = useContactStore((s) => s.addToTrustedSendersBook);
+  const addTrustedSender = useSettingsStore((s) => s.addTrustedSender);
+  const trustedSendersAddressBook = useSettingsStore((s) => s.trustedSendersAddressBook);
  const addTemplate = useTemplateStore((s) => s.addTemplate);
  const sendRawEmail = useEmailStore((s) => s.sendRawEmail);
  const smimeStore = useSmimeStore();
@@ -356,8 +509,8 @@ export function EmailComposer({
  }, [currentSmimeIdentityId]);

  // Keep a ref to current state for the unmount save
-  const stateRef = useRef({ to, cc, bcc, subject, body, showCc, showBcc, selectedIdentityId, subAddressTag, draftId });
-  stateRef.current = { to, cc, bcc, subject, body, showCc, showBcc, selectedIdentityId, subAddressTag, draftId };
+  const stateRef = useRef({ to, cc, bcc, subject, body, showCc, showBcc, selectedIdentityId, subAddressTag, draftId, fromOverrideEnabled, fromOverrideEmail, fromOverrideName });
+  stateRef.current = { to, cc, bcc, subject, body, showCc, showBcc, selectedIdentityId, subAddressTag, draftId, fromOverrideEnabled, fromOverrideEmail, fromOverrideName };

  // Track initial values for dirty detection (captured once on first render)
  const initialValuesRef = useRef({ to, cc, bcc, subject, body, attachmentCount: attachments.length });
@@ -446,10 +599,13 @@ export function EmailComposer({
      return;
    }

-    autocompleteTimeoutRef.current = setTimeout(() => {
-      const results = getAutocomplete(lastPart);
-      setAutocompleteResults(results);
-      setActiveAutoField(results.length > 0 ? field : null);
+    autocompleteTimeoutRef.current = setTimeout(async () => {
+      const localResults = getAutocomplete(lastPart);
+      // Let plugins contribute extra suggestions (Slack handles, GitHub, CRM, …).
+      const initial: RecipientSuggestion[] = localResults.map(r => ({ name: r.name, email: r.email }));
+      const merged = await contactHooks.onProvideRecipientSuggestions.transform(initial, { query: lastPart });
+      setAutocompleteResults(merged.map(s => ({ name: s.name, email: s.email })));
+      setActiveAutoField(merged.length > 0 ? field : null);
      setAutoSelectedIndex(-1);
    }, 200);
  }, [getAutocomplete]);
@@ -559,6 +715,19 @@ export function EmailComposer({
  const addFiles = useCallback(async (files: File[]) => {
    if (!client || files.length === 0) return;

+    // Let plugins veto each upload before it's queued.
+    const allowedFiles: File[] = [];
+    for (const file of files) {
+      const ok = await emailHooks.onBeforeAttachmentUpload.intercept({
+        name: file.name,
+        type: file.type || 'application/octet-stream',
+        size: file.size,
+      });
+      if (ok) allowedFiles.push(file);
+    }
+    if (allowedFiles.length === 0) return;
+    files = allowedFiles;
+
    const newAttachments: ComposerAttachment[] = files.map(file => {
      const controller = new AbortController();
      return {
@@ -587,6 +756,12 @@ export function EmailComposer({
              : att
          )
        );
+        emailHooks.onAfterAttachmentUpload.emit({
+          name: file.name,
+          type: file.type || 'application/octet-stream',
+          size: file.size,
+          blobId,
+        });
      } catch (error) {
        if (controller?.signal.aborted) continue;
        debug.error(`Failed to upload ${file.name}:`, error);
@@ -728,11 +903,17 @@ export function EmailComposer({

    // Get the selected identity or primary identity
    // Generate sub-addressed email if tag is set
-    const fromEmail = currentIdentity?.email
+    const identityFromEmail = currentIdentity?.email
      ? subAddressTag
        ? generateSubAddress(currentIdentity.email, subAddressTag, subAddressDelimiter)
        : currentIdentity.email
      : undefined;
+    const fromEmail = (fromOverrideEnabled && fromOverrideEmail.trim())
+      ? fromOverrideEmail.trim()
+      : identityFromEmail;
+    const fromName = (fromOverrideEnabled && fromOverrideEmail.trim())
+      ? (fromOverrideName.trim() || undefined)
+      : (currentIdentity?.name || undefined);

    try {
      const savedDraftId = await client.createDraft(
@@ -745,7 +926,7 @@ export function EmailComposer({
        fromEmail,
        draftId || undefined,
        uploadedAttachments,
-        currentIdentity?.name || undefined,
+        fromName,
        plainTextMode ? undefined : body
      );

@@ -782,6 +963,19 @@ export function EmailComposer({

    // Set new timeout for auto-save (2 seconds after last change)
    saveTimeoutRef.current = setTimeout(() => {
+      // Plugin observers (AI assist, grammar, …) get a debounced snapshot here.
+      emailHooks.onDraftChange.emit({
+        to: to.split(',').map(s => s.trim()).filter(Boolean),
+        cc: cc.split(',').map(s => s.trim()).filter(Boolean),
+        bcc: bcc.split(',').map(s => s.trim()).filter(Boolean),
+        subject,
+        htmlBody: plainTextMode ? '' : body,
+        textBody: plainTextMode ? body : htmlToPlainText(body),
+        identityId: selectedIdentityId || '',
+        attachments: attachments
+          .filter(a => a.blobId && !a.uploading && !a.error)
+          .map(a => ({ name: a.name, type: a.type || 'application/octet-stream', size: a.size })),
+      });
      saveDraft();
    }, 2000);

@@ -905,33 +1099,53 @@ export function EmailComposer({
      }
    }

-    const fromEmail = currentIdentity?.email
+    const identityFromEmail = currentIdentity?.email
      ? subAddressTag
        ? generateSubAddress(currentIdentity.email, subAddressTag, subAddressDelimiter)
        : currentIdentity.email
      : undefined;
+    // When the user has typed a From override, that becomes the header From
+    // (and MIME-builder From in the S/MIME path). The identity still drives
+    // the SMTP envelope MAIL FROM — set explicitly so it doesn't mistakenly
+    // default to the override address.
+    const overrideActive = fromOverrideEnabled && fromOverrideEmail.trim().length > 0;
+    const fromEmail = overrideActive ? fromOverrideEmail.trim() : identityFromEmail;
+    const fromName = overrideActive
+      ? (fromOverrideName.trim() || undefined)
+      : (currentIdentity?.name || undefined);
+    const envelopeMailFrom = overrideActive ? identityFromEmail : undefined;

    // Body is already HTML from the rich text editor (or plain text in plain text mode).
+    // When "above quote" mode is configured for replies/forwards, the signature
+    // was embedded into the body during init (see getInitialBody) so the
+    // trailing append must be skipped to avoid duplicating it.
+    const signatureAlreadyInBody =
+      (mode === 'reply' || mode === 'replyAll' || mode === 'forward') &&
+      signaturePosition === 'above_quote';
+
    // Build HTML signature block (used only in rich text mode)
    const buildSignatureHtml = (): string => {
-      if (currentIdentity?.htmlSignature) {
-        return `<br><br>-- <br>${sanitizeEmailHtml(currentIdentity.htmlSignature)}`;
+      if (signatureAlreadyInBody) return '';
+      const sep = signatureSeparatorEnabled ? `<br><br>-- <br>` : `<br><br>`;
+      if (signatureIdentity?.htmlSignature) {
+        return `${sep}${sanitizeEmailHtml(signatureIdentity.htmlSignature)}`;
      }
-      if (currentIdentity?.textSignature) {
-        return `<br><br>-- <br>${currentIdentity.textSignature.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}`;
+      if (signatureIdentity?.textSignature) {
+        return `${sep}${signatureIdentity.textSignature.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}`;
      }
      return '';
    };

-    // RFC 5322 §3.6.4 threading — only continues the chain on a reply, not a forward.
+    // RFC 5322 §3.6.4 threading - only continues the chain on a reply, not a forward.
    const threadingHeaders = (mode === 'reply' || mode === 'replyAll')
      ? computeReplyThreadingHeaders(replyTo)
      : null;

    // In plain text mode, send text/plain only (no HTML body)
+    const signatureOpts = { separator: signatureSeparatorEnabled };
    const finalBody = plainTextMode
-      ? appendPlainTextSignature(body, currentIdentity)
-      : appendPlainTextSignature(htmlToPlainText(body), currentIdentity);
+      ? (signatureAlreadyInBody ? body : appendPlainTextSignature(body, signatureIdentity, signatureOpts))
+      : (signatureAlreadyInBody ? htmlToPlainText(body) : appendPlainTextSignature(htmlToPlainText(body), signatureIdentity, signatureOpts));

    const rewritten = plainTextMode ? null : rewriteInlineImages(body);
    const finalHtmlBody = plainTextMode
@@ -940,12 +1154,38 @@ export function EmailComposer({
    const inlineAttachments = rewritten?.attachments ?? [];

    try {
+      // Let plugins veto the send (external-mail warning, mistyped-domain
+      // guards, etc.). Returning false from any handler aborts before either
+      // the S/MIME or standard JMAP path runs.
+      const sendablePreview: OutgoingEmail = {
+        to: toAddresses,
+        cc: ccAddresses,
+        bcc: bccAddresses,
+        subject,
+        htmlBody: finalHtmlBody || '',
+        textBody: finalBody,
+        identityId: currentIdentity?.id || '',
+        fromEmail,
+        attachments: attachments
+          .filter(att => att.blobId && !att.uploading && !att.error)
+          .map(a => ({ name: a.name, type: a.type || 'application/octet-stream', size: a.size })),
+        inReplyTo: threadingHeaders?.inReplyTo?.[0],
+      };
+      const sendAllowed = await emailHooks.onBeforeEmailSend.intercept(sendablePreview);
+      if (!sendAllowed) return;
+
      // S/MIME send pipeline: build raw MIME → sign → encrypt → sendRawEmail
      if ((smimeSign_ || smimeEncrypt_) && client && currentIdentity?.id) {
        // 1. Resolve S/MIME key
        if (smimeSign_ && !smimeKeyRecord) {
          throw new Error('No S/MIME key bound to this identity');
        }
+        // S/MIME binds to the identity's key; sending from an override address
+        // would produce a signature whose Subject differs from the visible
+        // From, which most clients reject or flag. Refuse up front.
+        if (overrideActive) {
+          throw new Error('Cannot use From override with S/MIME — disable one to send.');
+        }

        // 2. Ensure key is unlocked for signing
        if (smimeSign_ && smimeKeyRecord && !smimeStore.isKeyUnlocked(smimeKeyRecord.id)) {
@@ -1065,21 +1305,50 @@ export function EmailComposer({
          .map(att => ({ blobId: att.blobId!, name: att.name, type: att.type || 'application/octet-stream', size: att.size }));
        uploadedAttachments.push(...inlineAttachments);

-        await onSend?.({
+        // Let plugins (signatures, link-rewriting, encryption, AI rewrite, …)
+        // transform the outgoing message immediately before submission.
+        const transformInput: OutgoingEmail = {
          to: toAddresses,
          cc: ccAddresses,
          bcc: bccAddresses,
          subject,
-          body: finalBody,
-          htmlBody: finalHtmlBody,
+          htmlBody: finalHtmlBody || '',
+          textBody: finalBody,
+          identityId: currentIdentity?.id || '',
+          fromEmail,
+          attachments: uploadedAttachments.map(a => ({ name: a.name, type: a.type, size: a.size })),
+          inReplyTo: threadingHeaders?.inReplyTo?.[0],
+        };
+        const outgoing = await emailHooks.onTransformOutgoingEmail.transform(transformInput);
+
+        await onSend?.({
+          to: outgoing.to,
+          cc: outgoing.cc,
+          bcc: outgoing.bcc,
+          subject: outgoing.subject,
+          body: outgoing.textBody,
+          htmlBody: outgoing.htmlBody || undefined,
          draftId: finalDraftId || undefined,
          fromEmail,
-          fromName: currentIdentity?.name || undefined,
-          identityId: currentIdentity?.id,
+          fromName,
+          identityId: outgoing.identityId || currentIdentity?.id,
+          envelopeMailFrom,
          attachments: uploadedAttachments.length > 0 ? uploadedAttachments : undefined,
          inReplyTo: threadingHeaders?.inReplyTo,
          references: threadingHeaders?.references,
        });
+
+        if (mode === 'reply' || mode === 'replyAll') {
+          for (const recipient of [...outgoing.to, ...outgoing.cc].filter(Boolean)) {
+            if (trustedSendersAddressBook && client) {
+              addToTrustedSendersBook(client, recipient).catch(err => {
+                debug.error('Failed to add trusted sender to address book:', err);
+              });
+            } else {
+              addTrustedSender(recipient);
+            }
+          }
+        }
      }

      setTo("");
@@ -1091,7 +1360,7 @@ export function EmailComposer({
      setSubAddressTag("");
      setValidationErrors({});
      // Clear ref so unmount effect doesn't re-save
-      stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null };
+      stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null, fromOverrideEnabled: false, fromOverrideEmail: '', fromOverrideName: '' };
    } catch (err) {
      debug.error('Failed to send email:', err);
      toast.error(t('send_failed'));
@@ -1102,7 +1371,7 @@ export function EmailComposer({
    if (saveTimeoutRef.current) {
      clearTimeout(saveTimeoutRef.current);
    }
-    stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null };
+    stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null, fromOverrideEnabled: false, fromOverrideEmail: '', fromOverrideName: '' };
    onClose?.();
  };

@@ -1112,7 +1381,7 @@ export function EmailComposer({
      clearTimeout(saveTimeoutRef.current);
    }
    await saveDraft();
-    stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null };
+    stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null, fromOverrideEnabled: false, fromOverrideEmail: '', fromOverrideName: '' };
    onClose?.();
  };

@@ -1124,7 +1393,7 @@ export function EmailComposer({
    if (draftId && onDiscardDraft) {
      onDiscardDraft(draftId);
    }
-    stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null };
+    stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null, fromOverrideEnabled: false, fromOverrideEmail: '', fromOverrideName: '' };
    onClose?.();
  };

@@ -1208,7 +1477,25 @@ export function EmailComposer({
          <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border/50">
            <span className="text-sm text-muted-foreground w-12 md:w-16 shrink-0">{t('from')}:</span>
            <div className="flex-1 flex items-center gap-1 min-w-0">
-              {identities.length > 1 ? (
+              {fromOverrideEnabled ? (
+                <div className="flex-1 flex items-center gap-1 min-w-0">
+                  <Input
+                    value={fromOverrideName}
+                    onChange={(e) => setFromOverrideName(e.target.value)}
+                    placeholder={t('from_override.name_placeholder')}
+                    className="h-7 text-sm w-32 md:w-40 shrink-0"
+                    aria-label={t('from_override.name_label')}
+                  />
+                  <Input
+                    value={fromOverrideEmail}
+                    onChange={(e) => setFromOverrideEmail(e.target.value)}
+                    placeholder={t('from_override.email_placeholder')}
+                    type="email"
+                    className="h-7 text-sm flex-1 min-w-0 font-mono"
+                    aria-label={t('from_override.email_label')}
+                  />
+                </div>
+              ) : identities.length > 1 ? (
                <select
                  value={selectedIdentityId || primaryIdentity?.id || ''}
                  onChange={(e) => setSelectedIdentityId(e.target.value)}
@@ -1240,6 +1527,7 @@ export function EmailComposer({
                  )}
                </span>
              )}
+              {!fromOverrideEnabled && (
                <SubAddressHelper
                  baseEmail={
                    (selectedIdentityId
@@ -1249,7 +1537,8 @@ export function EmailComposer({
                  recipientEmails={to.split(',').map(e => e.trim()).filter(Boolean)}
                  onSelectTag={setSubAddressTag}
                />
-              {subAddressTag && (
+              )}
+              {!fromOverrideEnabled && subAddressTag && (
                <Button
                  type="button"
                  variant="ghost"
@@ -1261,6 +1550,28 @@ export function EmailComposer({
                  <X className="w-3 h-3" />
                </Button>
              )}
+              <Button
+                type="button"
+                variant={fromOverrideEnabled ? 'outline' : 'ghost'}
+                size="sm"
+                onClick={() => {
+                  if (fromOverrideEnabled) {
+                    setFromOverrideEnabled(false);
+                  } else {
+                    setFromOverrideEnabled(true);
+                    if (!fromOverrideEmail && currentIdentity?.email) {
+                      setFromOverrideEmail(currentIdentity.email);
+                    }
+                    if (!fromOverrideName && currentIdentity?.name) {
+                      setFromOverrideName(currentIdentity.name);
+                    }
+                  }
+                }}
+                className="h-6 px-2 text-xs shrink-0"
+                title={t('from_override.toggle_tooltip')}
+              >
+                {fromOverrideEnabled ? t('from_override.toggle_on') : t('from_override.toggle_off')}
+              </Button>
            </div>
          </div>

@@ -1407,20 +1718,24 @@ export function EmailComposer({
              onImageUpload={handleImageUpload}
              placeholder={t('body_placeholder')}
              hasError={validationErrors.body}
+              onEditorReady={(ed) => { editorRef.current = ed; }}
            />
          </div>
        )}

-        {plainTextMode ? (
-          getPlainTextSignature(currentIdentity) ? (
+        {/* Hide the visual signature preview when the signature has already been
+            embedded into the body above the quote (otherwise it would appear twice). */}
+        {((mode === 'reply' || mode === 'replyAll' || mode === 'forward') && signaturePosition === 'above_quote') ? null
+          : plainTextMode ? (
+          getPlainTextSignature(signatureIdentity) ? (
            <div className="px-4 pb-3 text-sm leading-6 text-muted-foreground break-words whitespace-pre-wrap font-mono">
-              {'-- \n'}{getPlainTextSignature(currentIdentity)}
+              {signatureSeparatorEnabled ? '-- \n' : ''}{getPlainTextSignature(signatureIdentity)}
            </div>
          ) : null
        ) : composerSignatureHtml ? (
          <div
            className="px-4 pb-3 text-sm leading-6 text-foreground break-words [&_a]:text-primary [&_a]:underline-offset-2 [&_a:hover]:underline"
-            dangerouslySetInnerHTML={{ __html: `<div>-- </div>${composerSignatureHtml}` }}
+            dangerouslySetInnerHTML={{ __html: `${signatureSeparatorEnabled ? '<div>-- </div>' : ''}${composerSignatureHtml}` }}
          />
        ) : null}
      </div>
@@ -6,6 +6,7 @@ import type { HoverAction } from "@/stores/settings-store";
 import { cn } from "@/lib/utils";
 import { Trash2, Star, Mail, MailOpen, Archive, Tag, ShieldAlert } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { useIsMobile } from "@/hooks/use-media-query";

 interface EmailHoverActionsProps {
  email: Email;
@@ -76,11 +77,13 @@ export function EmailHoverActions({
  const hoverActionsMode = useSettingsStore((state) => state.hoverActionsMode);
  const hoverActionsCorner = useSettingsStore((state) => state.hoverActionsCorner);
  const t = useTranslations("settings.email_behavior.hover_actions");
+  const isMobile = useIsMobile();

  const isUnread = !email.keywords?.$seen;
  const isStarred = email.keywords?.$flagged;
  const hoverBackgroundClassName = backgroundClassName;

+  if (isMobile) return null;
  if (hoverActions.length === 0) return null;

  const handleAction = (e: React.MouseEvent, action: HoverAction) => {
@@ -2,7 +2,7 @@

 import { useTranslations } from "next-intl";
 import { useCallback } from "react";
-import { formatDate } from "@/lib/utils";
+import { formatDate, stripInvisibleLeading } from "@/lib/utils";
 import { Email } from "@/lib/jmap/types";
 import { cn } from "@/lib/utils";
 import { Avatar } from "@/components/ui/avatar";
@@ -51,7 +51,8 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
  const sender = showRecipient ? (email.to?.[0] ?? email.from?.[0]) : email.from?.[0];
  const isFocusedMailLayout = mailLayout === 'focus';
  const hideJunkAvatarImages = currentMailboxRole === 'junk' && !showAvatarsInJunk;
-  const inlinePreview = showPreview && email.preview ? ` ${email.preview}` : '';
+  const trimmedPreview = stripInvisibleLeading(email.preview ?? '');
+  const inlinePreview = showPreview && trimmedPreview ? ` ${trimmedPreview}` : '';

  // Resolve color tags using keyword definitions from settings; unknown tags fall back to gray
  const colorTagIds = getEmailColorTags(email.keywords);
@@ -128,8 +129,8 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
      style={{ minHeight: isFocusedMailLayout ? undefined : 'var(--list-item-height)' }}
    >
      <div
-        className={cn('px-4', isFocusedMailLayout ? 'flex items-center py-2.5' : 'flex items-start')}
-        style={isFocusedMailLayout ? { gap: '12px' } : { gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
+        className={cn('px-4', isFocusedMailLayout ? 'flex items-center' : 'flex items-start')}
+        style={{ gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
      >
        {/* Checkbox - only visible when in selection mode */}
        {selectedEmailIds.size > 0 && (
@@ -160,11 +161,11 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
        )}

        {/* Avatar */}
-        {!isFocusedMailLayout && density !== 'extra-compact' && (
+        {density !== 'extra-compact' && (
          <Avatar
            name={sender?.name}
            email={sender?.email}
-            size="md"
+            size={isFocusedMailLayout ? "sm" : "md"}
            className="flex-shrink-0 shadow-sm"
            disableImages={hideJunkAvatarImages}
          />
@@ -295,7 +296,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
                    ? "text-muted-foreground"
                    : "text-muted-foreground/80"
                )}>
-                  {email.preview || "No preview available"}
+                  {trimmedPreview || "No preview available"}
                </p>
              )}
            </>
@@ -109,7 +109,7 @@ export function EmailList({

  const estimateSize = useCallback(() => {
    if (isFocusedMailLayout) {
-      return { 'extra-compact': 32, compact: 40, regular: 46, comfortable: 54 }[density];
+      return { 'extra-compact': 28, compact: 40, regular: 56, comfortable: 64 }[density];
    }
    const base = { 'extra-compact': 32, compact: 60, regular: 84, comfortable: 104 }[density];
    return (showPreview && density !== 'extra-compact') ? base + 36 : base;
@@ -1,8 +1,10 @@
 "use client";

 import React, { useEffect, useCallback, useState, useRef } from "react";
-import { useEditor, EditorContent } from "@tiptap/react";
+import { useEditor, EditorContent, type Editor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
+import Paragraph from "@tiptap/extension-paragraph";
+import Heading from "@tiptap/extension-heading";
 import Underline from "@tiptap/extension-underline";
 import Link from "@tiptap/extension-link";
 import TextAlign from "@tiptap/extension-text-align";
@@ -44,6 +46,51 @@ export interface InlineImageUpload {
  cid?: string;
 }

+// Pasted email content (signatures, replies, quoted text) commonly carries
+// inline styles on block elements. StarterKit's default Paragraph/Heading
+// drop unknown attributes; extend them to round-trip `style` and `class` so
+// signature formatting survives the editor.
+const styledBlockAttributes = {
+  style: {
+    default: null as string | null,
+    parseHTML: (el: HTMLElement) => el.getAttribute("style"),
+    renderHTML: (attrs: Record<string, string | null>) =>
+      attrs.style ? { style: attrs.style } : {},
+  },
+  class: {
+    default: null as string | null,
+    parseHTML: (el: HTMLElement) => el.getAttribute("class"),
+    renderHTML: (attrs: Record<string, string | null>) =>
+      attrs.class ? { class: attrs.class } : {},
+  },
+  "data-signature-block": {
+    default: null as string | null,
+    parseHTML: (el: HTMLElement) => el.getAttribute("data-signature-block"),
+    renderHTML: (attrs: Record<string, string | null>) =>
+      attrs["data-signature-block"]
+        ? { "data-signature-block": attrs["data-signature-block"] }
+        : {},
+  },
+};
+
+const StyledParagraph = Paragraph.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      ...styledBlockAttributes,
+    };
+  },
+});
+
+const StyledHeading = Heading.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      ...styledBlockAttributes,
+    };
+  },
+});
+
 interface RichTextEditorProps {
  content: string;
  onChange: (html: string) => void;
@@ -51,6 +98,7 @@ interface RichTextEditorProps {
  placeholder?: string;
  className?: string;
  hasError?: boolean;
+  onEditorReady?: (editor: Editor) => void;
 }

 function ToolbarButton({
@@ -131,15 +179,23 @@ export function RichTextEditor({
  placeholder,
  className,
  hasError,
+  onEditorReady,
 }: RichTextEditorProps) {
  const onImageUploadRef = React.useRef(onImageUpload);
  onImageUploadRef.current = onImageUpload;
+  const onEditorReadyRef = React.useRef(onEditorReady);
+  onEditorReadyRef.current = onEditorReady;

  const editor = useEditor({
    extensions: [
      StarterKit.configure({
-        heading: { levels: [1, 2] },
+        heading: false,
+        paragraph: false,
+        link: false,
+        underline: false,
      }),
+      StyledParagraph,
+      StyledHeading.configure({ levels: [1, 2] }),
      Underline,
      Link.configure({
        openOnClick: false,
@@ -237,6 +293,12 @@ export function RichTextEditor({
    }
  }, [content, editor]);

+  // Expose the editor instance once it's ready so parents can target
+  // specific nodes (e.g. swap the embedded signature on identity change).
+  useEffect(() => {
+    if (editor) onEditorReadyRef.current?.(editor);
+  }, [editor]);
+
  const addLink = useCallback(() => {
    if (!editor) return;
    const previousUrl = editor.getAttributes("link").href;
@@ -12,13 +12,22 @@ interface SmimeStatusBannerProps {
  className?: string;
 }

+type SmimeVariant = 'success' | 'warning' | 'error' | 'info';
+
+const variantTone: Record<SmimeVariant, string> = {
+  success: 'bg-success/15 text-success',
+  warning: 'bg-warning/15 text-warning',
+  error: 'bg-destructive/15 text-destructive',
+  info: 'bg-info/15 text-info',
+};
+
 export function SmimeStatusBanner({ status, onUnlockKey, className }: SmimeStatusBannerProps) {
  const t = useTranslations('smime');

  const items: Array<{
    icon: React.ReactNode;
    text: string;
-    variant: 'success' | 'warning' | 'error' | 'info';
+    variant: SmimeVariant;
  }> = [];

  // Encryption status
@@ -26,26 +35,26 @@ export function SmimeStatusBanner({ status, onUnlockKey, className }: SmimeStatu
    if (status.decryptionError) {
      if (status.decryptionError === 'locked') {
        items.push({
-          icon: <Lock className="w-4 h-4" />,
+          icon: <Lock className="w-5 h-5" />,
          text: t('unlock_key_desc'),
          variant: 'warning',
        });
      } else if (status.decryptionError === 'no-key') {
        items.push({
-          icon: <Lock className="w-4 h-4" />,
+          icon: <Lock className="w-5 h-5" />,
          text: t('status_encrypted_no_key'),
          variant: 'warning',
        });
      } else {
        items.push({
-          icon: <ShieldX className="w-4 h-4" />,
+          icon: <ShieldX className="w-5 h-5" />,
          text: t('status_encrypted_failed'),
          variant: 'error',
        });
      }
    } else {
      items.push({
-        icon: <LockOpen className="w-4 h-4" />,
+        icon: <LockOpen className="w-5 h-5" />,
        text: t('status_encrypted_ok'),
        variant: 'success',
      });
@@ -57,26 +66,26 @@ export function SmimeStatusBanner({ status, onUnlockKey, className }: SmimeStatu
    if (status.signatureValid === true) {
      if (status.selfSigned) {
        items.push({
-          icon: <AlertTriangle className="w-4 h-4" />,
+          icon: <AlertTriangle className="w-5 h-5" />,
          text: t('status_signed_self_signed'),
          variant: 'warning',
        });
      } else if (status.signerEmailMatch === false) {
        items.push({
-          icon: <AlertTriangle className="w-4 h-4" />,
+          icon: <AlertTriangle className="w-5 h-5" />,
          text: t('status_signed_mismatch'),
          variant: 'warning',
        });
      } else {
        items.push({
-          icon: <ShieldCheck className="w-4 h-4" />,
+          icon: <ShieldCheck className="w-5 h-5" />,
          text: t('status_signed_valid'),
          variant: 'success',
        });
      }
    } else if (status.signatureValid === false) {
      items.push({
-        icon: <ShieldAlert className="w-4 h-4" />,
+        icon: <ShieldAlert className="w-5 h-5" />,
        text: status.signatureError || t('status_signed_invalid'),
        variant: 'error',
      });
@@ -86,7 +95,7 @@ export function SmimeStatusBanner({ status, onUnlockKey, className }: SmimeStatu
  // Unsupported S/MIME
  if (status.unsupportedReason) {
    items.push({
-      icon: <Info className="w-4 h-4" />,
+      icon: <Info className="w-5 h-5" />,
      text: t('status_unsupported'),
      variant: 'info',
    });
@@ -94,34 +103,35 @@ export function SmimeStatusBanner({ status, onUnlockKey, className }: SmimeStatu

  if (items.length === 0) return null;

-  const variantStyles = {
-    success: 'bg-success/10 text-success border-success/30',
-    warning: 'bg-warning/10 text-warning border-warning/30',
-    error: 'bg-destructive/10 text-destructive border-destructive/30',
-    info: 'bg-info/10 text-info border-info/30',
-  };
-
  return (
-    <div className={cn("flex flex-col gap-1.5 py-1", className)}>
+    <div className={cn("flex flex-col gap-3 py-1", className)}>
      {items.map((item, i) => (
-        <div
-          key={i}
-          className={cn(
-            "flex items-center gap-2 px-3 py-1.5 rounded-md text-sm border",
-            variantStyles[item.variant],
-          )}
-        >
+        <div key={i} className="flex items-start gap-3">
+          <div className={cn(
+            "w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 shadow-sm",
+            variantTone[item.variant],
+          )}>
            {item.icon}
-          <span className="flex-1">{item.text}</span>
+          </div>
+          <div className="flex-1 min-w-0 flex items-center justify-between gap-2">
+            <div className="min-w-0 flex-1">
+              <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+                S/MIME
+              </div>
+              <div className="text-sm font-medium text-foreground break-words">
+                {item.text}
+              </div>
+            </div>
            {item.variant === 'warning' && status.decryptionError === 'locked' && onUnlockKey && (
              <button
                onClick={onUnlockKey}
-              className="text-xs font-medium underline hover:no-underline"
+                className="text-xs font-medium underline hover:no-underline flex-shrink-0"
              >
                {t('unlock_key')}
              </button>
            )}
          </div>
+        </div>
      ))}
    </div>
  );
@@ -331,8 +331,12 @@ function EmailCard({
        htmlContent = email.bodyValues[email.htmlBody[0].partId].value;
        // Prefer textBody when HTML is auto-generated minimal wrapper (no rich formatting).
        // Server-generated HTML from text/plain emails often lacks <br> tags, collapsing newlines.
-        const hasTextBody = email.textBody?.[0]?.partId && email.bodyValues[email.textBody[0].partId];
-        if (hasTextBody && htmlContent) {
+        // Per RFC 8621, an HTML-only email exposes the same partId in both htmlBody and textBody -
+        // in that case there is no real plain-text alternative, so always render the HTML.
+        const textPartId = email.textBody?.[0]?.partId;
+        const htmlPartId = email.htmlBody[0].partId;
+        const hasDistinctTextBody = !!textPartId && textPartId !== htmlPartId && !!email.bodyValues[textPartId];
+        if (hasDistinctTextBody && htmlContent) {
          useHtmlVersion = hasMeaningfulHtmlBody(htmlContent);
        } else {
          useHtmlVersion = !!htmlContent;
@@ -1,7 +1,7 @@
 "use client";

 import React, { useCallback } from "react";
-import { formatDate } from "@/lib/utils";
+import { formatDate, stripInvisibleLeading } from "@/lib/utils";
 import { Email, ThreadGroup } from "@/lib/jmap/types";
 import { cn } from "@/lib/utils";
 import { Avatar } from "@/components/ui/avatar";
@@ -71,7 +71,8 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
    const accountColor = email.accountId ? getAccountById(email.accountId)?.avatarColor : undefined;
    const isChecked = selectedEmailIds.has(email.id);
    const isFocusedMailLayout = mailLayout === 'focus';
-    const inlinePreview = showPreview && email.preview ? ` ${email.preview}` : '';
+    const trimmedPreview = stripInvisibleLeading(email.preview ?? '');
+    const inlinePreview = showPreview && trimmedPreview ? ` ${trimmedPreview}` : '';

    // Resolve color tags using keyword definitions; unknown tags fall back to gray
    const tagIds = getEmailColorTags(email.keywords);
@@ -148,8 +149,8 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
        style={{ minHeight: isFocusedMailLayout ? undefined : 'var(--list-item-height)' }}
      >
        <div
-          className={cn('px-3', isFocusedMailLayout ? 'flex items-center py-2.5' : 'flex items-start')}
-          style={isFocusedMailLayout ? { gap: '12px' } : { gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
+          className={cn('px-3', isFocusedMailLayout ? 'flex items-center' : 'flex items-start')}
+          style={{ gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
        >
          {/* Checkbox - only visible when in selection mode */}
          {selectedEmailIds.size > 0 && (
@@ -178,11 +179,11 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
            </div>
          )}

-          {!isFocusedMailLayout && density !== 'extra-compact' && (
+          {density !== 'extra-compact' && (
            <Avatar
              name={sender?.name}
              email={sender?.email}
-              size="md"
+              size={isFocusedMailLayout ? "sm" : "md"}
              className="flex-shrink-0 shadow-sm"
              disableImages={hideJunkAvatarImages}
            />
@@ -316,7 +317,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
                      ? "text-muted-foreground"
                      : "text-muted-foreground/80"
                  )}>
-                    {email.preview || "No preview available"}
+                    {trimmedPreview || "No preview available"}
                  </p>
                )}
              </>
@@ -366,7 +367,8 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
    const isMobile = useUIStore((state) => state.isMobile);
    const { latestEmail, participantNames, hasUnread, hasStarred, hasAttachment, hasAnswered, hasForwarded, emailCount } = thread;
    const isFocusedMailLayout = mailLayout === 'focus';
-    const inlinePreview = showPreview && latestEmail.preview ? ` ${latestEmail.preview}` : '';
+    const trimmedPreview = stripInvisibleLeading(latestEmail.preview ?? '');
+    const inlinePreview = showPreview && trimmedPreview ? ` ${trimmedPreview}` : '';

    const { selectedMailbox, mailboxes, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection, isUnifiedView } = useEmailStore();
    const getAccountById = useAccountStore((state) => state.getAccountById);
@@ -506,8 +508,8 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
          style={{ minHeight: isFocusedMailLayout ? undefined : 'var(--list-item-height)' }}
        >
          <div
-            className={cn('px-3', isFocusedMailLayout ? 'flex items-center py-2.5' : 'flex items-start')}
-            style={isFocusedMailLayout ? { gap: '12px' } : { gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
+            className={cn('px-3', isFocusedMailLayout ? 'flex items-center' : 'flex items-start')}
+            style={{ gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
          >
            {/* Checkbox for thread selection - only visible when in selection mode */}
            {selectedEmailIds.size > 0 && (
@@ -562,11 +564,11 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
              </div>
            )}

-            {!isFocusedMailLayout && density !== 'extra-compact' && (
+            {density !== 'extra-compact' && (
              <Avatar
                name={avatarPerson?.name}
                email={avatarPerson?.email}
-                size="md"
+                size={isFocusedMailLayout ? "sm" : "md"}
                className="flex-shrink-0 shadow-sm"
                disableImages={hideJunkAvatarImages}
              />
@@ -722,7 +724,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                        ? "text-muted-foreground"
                        : "text-muted-foreground/80"
                    )}>
-                      {latestEmail.preview || "No preview available"}
+                      {trimmedPreview || "No preview available"}
                    </p>
                  )}
                </>
@@ -159,10 +159,13 @@ export function FilePreviewModal({ name, onClose, onDownload, getFileContent }:

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+      }
    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => window.removeEventListener("keydown", handleKeyDown, { capture: true });
  }, [onClose]);

  return (
@@ -221,12 +224,17 @@ export function FilePreviewModal({ name, onClose, onDownload, getFileContent }:
        )}

        {!loading && !error && fileType === "pdf" && objectUrl && (
-          <iframe
-            src={objectUrl}
-            sandbox="allow-scripts"
+          <object
+            data={objectUrl}
+            type="application/pdf"
            className="w-full max-w-5xl h-full rounded-lg bg-white"
-            title={name}
-          />
+            aria-label={name}
+          >
+            <Button onClick={() => void onDownload()}>
+              <Download className="w-4 h-4 mr-2" />
+              {t("download")}
+            </Button>
+          </object>
        )}

        {!loading && !error && fileType === "audio" && objectUrl && (
@@ -6,9 +6,10 @@ import { Check, Plus, LogOut, Star, ChevronDown, AlertCircle } from "lucide-reac
 import { useTranslations } from "next-intl";
 import { useAccountStore, type AccountEntry } from "@/stores/account-store";
 import { useAuthStore } from "@/stores/auth-store";
-import { getInitials, MAX_ACCOUNTS } from "@/lib/account-utils";
+import { getMaxAccounts } from "@/lib/account-utils";
 import { cn } from "@/lib/utils";
 import { useRouter } from "@/i18n/navigation";
+import { Avatar } from "@/components/ui/avatar";

 interface AccountSwitcherProps {
  /** "rail" = small avatar only (NavigationRail), "expanded" = avatar + name + email (Sidebar) */
@@ -17,17 +18,15 @@ interface AccountSwitcherProps {
 }

 function AccountAvatar({ account, size = "sm" }: { account: AccountEntry; size?: "sm" | "md" }) {
-  const initials = getInitials(account.displayName || account.label, account.email || account.username);
-  const sizeClasses = size === "sm" ? "w-8 h-8 text-xs" : "w-9 h-9 text-sm";
-
  return (
-    <div
-      className={cn("rounded-full flex items-center justify-center text-white font-medium flex-shrink-0", sizeClasses)}
-      style={{ backgroundColor: account.avatarColor }}
-      title={account.label}
-    >
-      {initials}
-    </div>
+    <Avatar
+      name={account.displayName || account.label}
+      email={account.email || account.username}
+      size="sm"
+      className={cn("flex-shrink-0", size === "md" && "w-9 h-9 text-sm")}
+      disableFavicon
+      fallbackColor={account.avatarColor}
+    />
  );
 }

@@ -40,13 +39,15 @@ export function AccountSwitcher({ variant = "rail", className }: AccountSwitcher
  const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});

  const accounts = useAccountStore((s) => s.accounts);
-  const activeAccountId = useAccountStore((s) => s.activeAccountId);
  const setDefaultAccount = useAccountStore((s) => s.setDefaultAccount);
+  // Read activeAccountId from authStore so the selector matches the actually-loaded
+  // session (primaryIdentity, JMAP client). accountStore.activeAccountId is a separate
+  // persisted copy that can drift out of sync across hydration / partial persist writes.
+  const activeAccountId = useAuthStore((s) => s.activeAccountId);
  const activeAccount = accounts.find((a) => a.id === activeAccountId);
  const switchAccount = useAuthStore((s) => s.switchAccount);
  const logout = useAuthStore((s) => s.logout);
  const logoutAll = useAuthStore((s) => s.logoutAll);
-  const primaryIdentity = useAuthStore((s) => s.primaryIdentity);

  const updatePosition = useCallback(() => {
    if (!buttonRef.current) return;
@@ -112,9 +113,11 @@ export function AccountSwitcher({ variant = "rail", className }: AccountSwitcher
    setDefaultAccount(accountId);
  };

-  // Display name for the active account
-  const displayName = primaryIdentity?.name || activeAccount?.displayName || activeAccount?.label || "";
-  const displayEmail = primaryIdentity?.email || activeAccount?.email || activeAccount?.username || "";
+  // Show the account's own identity, not the preferred sending identity -
+  // primaryIdentity can be an alias (e.g. info@korazo.net) that differs from
+  // the actually logged-in account (info@linusrath.de).
+  const displayName = activeAccount?.displayName || activeAccount?.label || "";
+  const displayEmail = activeAccount?.email || activeAccount?.username || "";

  return (
    <>
@@ -217,7 +220,7 @@ export function AccountSwitcher({ variant = "rail", className }: AccountSwitcher
          </div>

          {/* Separator + Add Account */}
-          {accounts.length < MAX_ACCOUNTS && (
+          {accounts.length < getMaxAccounts() && (
            <div className="border-t border-border">
              <button
                onClick={handleAddAccount}
@@ -20,6 +20,7 @@ import {
  Pencil,
  FolderX,
  RefreshCw,
+  Upload,
 } from "lucide-react";

 interface Position {
@@ -84,6 +85,7 @@ interface MailboxContextMenuProps {
  onCreateFolder?: () => void;
  onRenameFolder?: (mailboxId: string) => void;
  onDeleteFolder?: (mailboxId: string) => void;
+  onImportEmail?: (mailboxId: string) => void;
  onRefresh?: () => void;
 }

@@ -102,6 +104,7 @@ export function MailboxContextMenu({
  onCreateFolder,
  onRenameFolder,
  onDeleteFolder,
+  onImportEmail,
  onRefresh,
 }: MailboxContextMenuProps) {
  const t = useTranslations("mailbox_context_menu");
@@ -149,6 +152,7 @@ export function MailboxContextMenu({
  const canCreateChild = mailbox.myRights?.mayCreateChild !== false;
  const canSetSeen = mailbox.myRights?.maySetSeen !== false;
  const canRemoveItems = mailbox.myRights?.mayRemoveItems !== false;
+  const canAddItems = mailbox.myRights?.mayAddItems !== false;

  const fullPath = getMailboxPath(mailbox, mailboxes);

@@ -190,6 +194,15 @@ export function MailboxContextMenu({

      <ContextMenuSeparator />

+      <ContextMenuItem
+        icon={Upload}
+        label={t("import_email")}
+        onClick={() => handleAction(() => onImportEmail?.(mailbox.id))}
+        disabled={!onImportEmail || !canAddItems}
+      />
+
+      <ContextMenuSeparator />
+
      <ContextMenuItem
        icon={FolderX}
        label={isTrashOrJunk ? t("empty_folder") : t("empty_folder_generic")}
@@ -11,17 +11,18 @@ import { usePathname, Link, useRouter } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
 import { useCalendarStore } from "@/stores/calendar-store";
 import { useEmailStore } from "@/stores/email-store";
-import { useWebDAVStore } from "@/stores/webdav-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { usePolicyStore } from "@/stores/policy-store";
 import { useAuthStore } from "@/stores/auth-store";
 import { useAccountStore } from "@/stores/account-store";
+import { useUpdateStore, selectHasUpdate } from "@/stores/update-store";
 import { getActiveAccountSlotHeaders } from "@/lib/auth/active-account-slot";
-import { getInitials, MAX_ACCOUNTS } from "@/lib/account-utils";
+import { getMaxAccounts } from "@/lib/account-utils";
 import { cn, formatFileSize } from "@/lib/utils";
 import { PluginSlot } from "@/components/plugins/plugin-slot";
 import { KeyboardShortcutsModal } from "@/components/keyboard-shortcuts-modal";
 import { apiFetch } from "@/lib/browser-navigation";
+import { Avatar } from "@/components/ui/avatar";

 interface NavItem {
  id: string;
@@ -167,7 +168,9 @@ export function NavigationRail({
  const resolvedTheme = useThemeStore((s) => s.resolvedTheme);
  const { supportsCalendar } = useCalendarStore();
  const { mailboxes } = useEmailStore();
-  const { supportsWebDAV } = useWebDAVStore();
+  const client = useAuthStore((s) => s.client);
+  const supportsFiles = client?.supportsFiles() ?? false;
+  const supportsContacts = client?.supportsContacts() ?? false;
  const sidebarApps = useSettingsStore((s) => s.sidebarApps);
  const showRailAccountList = useSettingsStore((s) => s.showRailAccountList);
  const sidebarAppsEnabled = usePolicyStore((s) => s.isFeatureEnabled('sidebarAppsEnabled'));
@@ -175,10 +178,17 @@ export function NavigationRail({
  const visibleSidebarApps = sidebarAppsEnabled ? sidebarApps : [];
  const inboxUnread = mailboxes.find(m => m.role === "inbox")?.unreadEmails || 0;
  const [isStalwartAdmin, setIsStalwartAdmin] = useState(false);
+  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';

  // Account list for rail
  const accounts = useAccountStore((s) => s.accounts);
-  const activeAccountId = useAccountStore((s) => s.activeAccountId);
+  // Read activeAccountId from authStore so the rail's account row matches the actually-loaded
+  // session - accountStore has its own persisted copy that can drift out of sync.
+  const activeAccountId = useAuthStore((s) => s.activeAccountId);
  const switchAccount = useAuthStore((s) => s.switchAccount);
  const logout = useAuthStore((s) => s.logout);
  const logoutAll = useAuthStore((s) => s.logoutAll);
@@ -244,8 +254,8 @@ export function NavigationRail({
  const navItems: NavItem[] = [
    { id: "mail", icon: Mail, labelKey: "mail", href: "/", badge: inboxUnread },
    { id: "calendar", icon: Calendar, labelKey: "calendar", href: "/calendar", hidden: !supportsCalendar },
-    { id: "contacts", icon: BookUser, labelKey: "contacts", href: "/contacts" },
-    { id: "files", icon: HardDrive, labelKey: "files", href: "/files", hidden: supportsWebDAV === false || !filesEnabled },
+    { id: "contacts", icon: BookUser, labelKey: "contacts", href: "/contacts", hidden: !supportsContacts },
+    { id: "files", icon: HardDrive, labelKey: "files", href: "/files", hidden: !supportsFiles || !filesEnabled },
  ];

  const isSettingsActive = !activeAppId && pathname.startsWith("/settings");
@@ -345,7 +355,18 @@ export function NavigationRail({
              "text-muted-foreground hover:text-foreground"
            )}
          >
+            <span className="relative">
              <Shield className="w-5 h-5" />
+              {hasUpdate && (
+                <span
+                  className={cn(
+                    "absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full ring-2 ring-background",
+                    updateImportant ? "bg-red-500" : "bg-amber-500",
+                  )}
+                  aria-label={updateImportant ? "Important update available" : "Update available"}
+                />
+              )}
+            </span>
            <span className="text-[10px] font-medium leading-tight truncate max-w-full">{t("admin") || "Admin"}</span>
          </a>
        )}
@@ -515,10 +536,19 @@ export function NavigationRail({
        {isStalwartAdmin && (
          <a
            href="/admin"
-            className="flex items-center justify-center w-10 h-10 rounded-md transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+            className="flex items-center justify-center w-10 h-10 rounded-md transition-colors text-muted-foreground hover:text-foreground hover:bg-muted relative"
            title={t("admin") || "Admin"}
          >
            <Shield className="w-[18px] h-[18px]" />
+            {hasUpdate && (
+              <span
+                className={cn(
+                  "absolute top-2 right-2 w-2 h-2 rounded-full ring-2 ring-background",
+                  updateImportant ? "bg-red-500" : "bg-amber-500",
+                )}
+                aria-label={updateImportant ? "Important update available" : "Update available"}
+              />
+            )}
          </a>
        )}

@@ -581,7 +611,6 @@ export function NavigationRail({
            <div className="flex flex-col items-center gap-3">
            {accounts.map((account) => {
              const isActive = account.id === activeAccountId;
-              const initials = getInitials(account.displayName || account.label, account.email || account.username);
              return (
                <button
                  key={account.id}
@@ -589,15 +618,20 @@ export function NavigationRail({
                    if (!isActive) switchAccount(account.id);
                  }}
                  className={cn(
-                    "relative flex items-center justify-center w-8 h-8 rounded-full text-white text-[11px] font-medium transition-all flex-shrink-0",
+                    "relative w-8 h-8 rounded-full transition-all flex-shrink-0",
                    isActive
                      ? "ring-2 ring-primary ring-offset-2 ring-offset-background"
                      : "opacity-70 hover:opacity-100"
                  )}
-                  style={{ backgroundColor: account.avatarColor }}
                  title={`${account.displayName || account.label} (${account.email || account.username})`}
                >
-                  {initials}
+                  <Avatar
+                    name={account.displayName || account.label}
+                    email={account.email || account.username}
+                    size="sm"
+                    disableFavicon
+                    fallbackColor={account.avatarColor}
+                  />
                  {isActive && (
                    <span className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-primary flex items-center justify-center">
                      <Check className="w-2 h-2 text-primary-foreground" />
@@ -606,7 +640,7 @@ export function NavigationRail({
                </button>
              );
            })}
-            {accounts.length < MAX_ACCOUNTS && (
+            {accounts.length < getMaxAccounts() && (
              <button
                onClick={() => router.push(`/login?mode=add-account` as never)}
                className="flex items-center justify-center w-8 h-8 rounded-full border border-dashed border-muted-foreground/50 text-muted-foreground hover:border-foreground hover:text-foreground hover:bg-muted transition-colors flex-shrink-0"
@@ -8,38 +8,46 @@ interface ResizeHandleProps {
  onResize: (delta: number) => void;
  onResizeEnd?: () => void;
  onDoubleClick?: () => void;
+  orientation?: "vertical" | "horizontal";
  className?: string;
 }

 const KEYBOARD_STEP = 10;

-export function ResizeHandle({ onResizeStart, onResize, onResizeEnd, onDoubleClick, className }: ResizeHandleProps) {
+export function ResizeHandle({ onResizeStart, onResize, onResizeEnd, onDoubleClick, orientation = "vertical", className }: ResizeHandleProps) {
  const isDragging = useRef(false);
-  const startX = useRef(0);
+  const startPos = useRef(0);
+  const isHorizontal = orientation === "horizontal";

  const handleMouseDown = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
    isDragging.current = true;
-    startX.current = e.clientX;
-    document.body.style.cursor = "col-resize";
+    startPos.current = isHorizontal ? e.clientY : e.clientX;
+    document.body.style.cursor = isHorizontal ? "row-resize" : "col-resize";
    document.body.style.userSelect = "none";
    onResizeStart?.();
-  }, [onResizeStart]);
+  }, [onResizeStart, isHorizontal]);

  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
    let delta = 0;
+    if (isHorizontal) {
+      if (e.key === "ArrowUp") delta = -KEYBOARD_STEP;
+      else if (e.key === "ArrowDown") delta = KEYBOARD_STEP;
+      else return;
+    } else {
      if (e.key === "ArrowLeft") delta = -KEYBOARD_STEP;
      else if (e.key === "ArrowRight") delta = KEYBOARD_STEP;
      else return;
+    }
    e.preventDefault();
    onResize(delta);
    onResizeEnd?.();
-  }, [onResize, onResizeEnd]);
+  }, [onResize, onResizeEnd, isHorizontal]);

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!isDragging.current) return;
-      const delta = e.clientX - startX.current;
+      const delta = (isHorizontal ? e.clientY : e.clientX) - startPos.current;
      onResize(delta);
    };

@@ -57,24 +65,25 @@ export function ResizeHandle({ onResizeStart, onResize, onResizeEnd, onDoubleCli
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };
-  }, [onResize, onResizeEnd]);
+  }, [onResize, onResizeEnd, isHorizontal]);

  return (
    <div
      role="separator"
-      aria-orientation="vertical"
+      aria-orientation={isHorizontal ? "horizontal" : "vertical"}
      aria-label="Resize"
      tabIndex={0}
      onMouseDown={handleMouseDown}
      onKeyDown={handleKeyDown}
      onDoubleClick={onDoubleClick}
      className={cn(
-        "w-1 flex-shrink-0 cursor-col-resize hover:bg-primary/30 active:bg-primary/50 transition-colors relative group",
+        "flex-shrink-0 hover:bg-primary/30 active:bg-primary/50 transition-colors relative group",
        "focus-visible:outline-none focus-visible:bg-primary/40 focus-visible:ring-2 focus-visible:ring-primary/50",
+        isHorizontal ? "h-1 cursor-row-resize bg-border" : "w-1 cursor-col-resize",
        className
      )}
    >
-      <div className="absolute inset-y-0 -left-1 -right-1" />
+      <div className={cn("absolute", isHorizontal ? "inset-x-0 -top-1 -bottom-1" : "inset-y-0 -left-1 -right-1")} />
    </div>
  );
 }
@@ -66,6 +66,7 @@ interface SidebarProps {
  onCreateFolder?: () => void;
  onRenameFolder?: (mailboxId: string) => void;
  onDeleteFolder?: (mailboxId: string) => void;
+  onImportEmail?: (mailboxId: string) => void;
  onRefreshMailboxes?: () => void;
  className?: string;
 }
@@ -636,6 +637,7 @@ export function Sidebar({
  onCreateFolder,
  onRenameFolder,
  onDeleteFolder,
+  onImportEmail,
  onRefreshMailboxes,
  className,
 }: SidebarProps) {
@@ -1037,6 +1039,7 @@ export function Sidebar({
        onCreateFolder={onCreateFolder}
        onRenameFolder={onRenameFolder}
        onDeleteFolder={onDeleteFolder}
+        onImportEmail={onImportEmail}
        onRefresh={onRefreshMailboxes}
      />
    </div>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Linus Rath	dfe886636b	fix: broaden body font for non Latin script rendering #265	2026-05-13 14:43:07 +02:00
Linus Rath	f499e87d2a	chore: update version to 1.6.5	2026-05-13 14:38:00 +02:00
Linus Rath	32fe871b70	fix: support HTTP basic auth in iCal subscription URLs #275	2026-05-13 14:27:54 +02:00
Linus Rath	aab19379e2	feat: route account avatars through shared Avatar component #278	2026-05-13 00:50:46 +02:00
Linus Rath	b46a1a69e8	chore: unblock pre-commit lint hook	2026-05-13 00:34:35 +02:00
Linus Rath	ea424cad7e	fix: honor admin-uploaded favicon in root metadata #274	2026-05-13 00:33:23 +02:00
Lucas GaitzschandLinus Rath	3f444a8912	Feature/protocol handlers * Added account selection for protocol links when multiple connected accounts are available, including mailto: links * Added support for handling mailto: links in an already-open PWA/session instead of always opening a new tab * Added webcal: protocol handling for calendar links * Added account selection for webcal: links when multiple calendar-capable accounts are connected * Added an import-or-subscribe choice for detected webcal calendars * Added protocol handler settings for registering mail and calendar handlers and choosing the open mode * Added service worker/session coordination for passing protocol requests between browser/PWA contexts * Added tests and translations for the new protocol handler flows	2026-05-12 20:49:05 +02:00
Linus Rath	8b0e2052cf	fix: honor NEXT_PUBLIC_BASE_PATH in admin sidebar nav links #271	2026-05-12 16:10:29 +02:00
Linus Rath	c99934a92c	fix: update version to 1.6.4	2026-05-12 16:06:14 +02:00
Linus Rath	ce2731cd9d	fix: update types for cursor and toRemove	2026-05-12 16:04:46 +02:00
Linus Rath	f9f8af2f11	fix: preserve signature styling and reactivity in above-quote mode #272	2026-05-12 16:03:10 +02:00
Linus Rath	d8e2a10806	docs: update CONTRIBUTING.md	2026-05-11 20:41:04 +02:00
Linus Rath	869ee07ebc	chore: bump next to 16.2.6 for security advisories	2026-05-11 20:11:05 +02:00
Linus Rath	2ad2bb1e09	chore: update version to 1.6.4	2026-05-11 20:00:55 +02:00
Linus Rath	23bc31c661	i18n: add missing translation keys across 15 locales	2026-05-11 19:30:52 +02:00
Linus Rath	a2f76037a1	feat: update README and FEATURES.md	2026-05-11 19:24:32 +02:00
Linus Rath	9571f2e185	fix: skip upstream JMAP reverify for trusted URLs #237	2026-05-11 19:22:37 +02:00
Linus Rath	887b9c728c	feat: drag attachments out to local file system #267	2026-05-11 17:34:24 +02:00
Linus Rath	8c21f462c2	feat: add signature position to email behavior settings search	2026-05-11 17:07:24 +02:00
Linus Rath	5f3d2d3e4a	feat: signature above quoted text option #266	2026-05-11 17:05:59 +02:00
Linus Rath	4bce80b8ba	feat: show avatar in Focused list for compact density and above	2026-05-11 16:23:15 +02:00
Linus Rath	1d09f5a623	feat: align Focused list preview with other layout previews	2026-05-11 15:41:25 +02:00
Linus Rath	2c513129f2	feat: add Reading Pane at Bottom mail layout #262	2026-05-11 15:35:43 +02:00
Linus Rath	b3dc2e32b8	feat: implement prefetching of initial email data	2026-05-11 15:17:30 +02:00
Augustin MarcinandLinus Rath	b0640c9ecc	feat(compose): From override + catch-all auto-reply (fixes #246 ) Adds an Override toggle in the composer's From row. When enabled, name and address become free-text inputs. Mail is still submitted through the selected identity, but the outgoing message's From: header — and the SMTP envelope MAIL FROM when different — is set from the override. The existing "Auto-select Reply Address" setting is extended: if the incoming message was addressed to an alias on a domain that matches one of your identities but isn't itself an identity (classic domain catch- all), it now auto-enables Override and pre-fills the alias. Quick reply honors the same resolution. The setting is relabeled to reflect the broader behavior. JMAP: client.sendEmail gains an optional envelopeMailFrom; when set, the EmailSubmission includes an explicit envelope with that mailFrom and the to/cc/bcc as rcptTo so header-From and envelope can diverge (JMAP §7.3). S/MIME: override is incompatible with sign/encrypt and is refused with a clear error — signing a different visible From from the identity's certificate Subject would produce messages clients reject. Tests: resolveReplyFrom covers exact match, sub-address stripping, catch-all detection, identity preference, and foreign-domain null.	2026-05-11 12:13:47 +02:00
Linus Rath	2d7e24b513	perf: parallelize login round-trips and drop redundant JMAP re-verify	2026-05-11 11:04:13 +02:00
Linus Rath	5b30bacf10	feat: redesign review step with grouped summary and advanced toggle	2026-05-10 01:09:00 +02:00
Linus Rath	fe937403f3	style: consistent notice cards for server probe results	2026-05-09 21:43:04 +02:00
Linus Rath	876ea370e4	feat: allow file uploads on the wizard branding step	2026-05-09 21:40:39 +02:00
Linus Rath	1dcdeeae86	style: consistent notice cards for server probe results	2026-05-09 18:12:43 +02:00
Linus Rath	01302a775c	feat: require explicit confirmation when JMAP probe finds no session	2026-05-09 17:52:44 +02:00
Linus Rath	76d78ae756	fix: drop redundant first-login banner about removing ADMIN_PASSWORD #222	2026-05-09 17:40:53 +02:00
Linus Rath	51745ea03d	feat: web setup wizard + admin config/state dir split (#226 )	2026-05-09 17:37:41 +02:00
ChanceandLinus Rath	c44a9ce6e0	fix: fall back to primary identity signature on reply When auto-select picks an alias identity matching the original recipient, the alias often has no signature configured. The composer was using the alias's empty signature for both the visual preview and the appended signature on send, so neither showed up. New mail worked because no auto-select runs. Add a signatureIdentity that falls back to the primary when the current identity has no signature. From address, identity ID, S/MIME, and draft saves still use currentIdentity so mail goes out from the right address.	2026-05-09 14:21:05 +02:00
Linus Rath	7fa65796f0	fix: show account identity in switcher header instead of sending alias	2026-05-09 13:21:13 +02:00
Linus Rath	d09df7e8a3	fix: remove benchmark directory from .gitignore	2026-05-09 13:13:08 +02:00
Linus Rath	090399a308	chore: update version to 1.6.3	2026-05-08 21:10:21 +02:00
Linus Rath	c31a58af1a	i18n: add missing translation keys across 15 locales	2026-05-08 21:07:14 +02:00
Linus Rath	65aabb943c	fix: fall back when only truncation indicator remains in email preview	2026-05-08 20:29:16 +02:00
Linus Rath	9c8739c4bb	fix: preserve emoji colors in dark mode email viewer	2026-05-08 20:27:03 +02:00
Linus Rath	48f72be209	fix: preserve emoji colors in dark mode email viewer	2026-05-08 20:26:17 +02:00
Linus Rath	92fb0c63e9	fix: trim leading whitespace from email list preview	2026-05-08 20:19:25 +02:00
Linus Rath	55596556ef	feat: import .eml files via folder right-click menu	2026-05-08 20:12:33 +02:00
Linus Rath	abd63d124f	fix: add benchmark directory to ESLint ignore list	2026-05-08 19:56:21 +02:00
Linus Rath	562080b7a3	fix: request shareWith explicitly so calendar/address book shares survive a re-login #257	2026-05-08 19:53:32 +02:00
Linus Rath	41c9f4926c	fix: prevent white-on-white in dark mode for nested bgcolor containers	2026-05-08 02:49:58 +02:00
Linus Rath	e7e78072d4	fix: render plain-text-only emails as text, not HTML	2026-05-07 17:49:39 +02:00
Linus Rath	cd363b4840	fix: strip leading punctuation when computing avatar initials	2026-05-07 17:43:02 +02:00
Linus Rath	3a350c14a6	fix: hide files/contacts nav items when JMAP server lacks support	2026-05-07 17:21:47 +02:00
Linus Rath	b0765bf085	style: redesign quick reply to match sender/banner layout	2026-05-07 17:02:06 +02:00
Linus Rath	9225ba0790	fix: render HTML-only emails and redesign external content prompt	2026-05-07 16:10:26 +02:00
Linus Rath	3b36738192	fix: pad Word/Outlook HTML email rendering	2026-05-07 15:42:47 +02:00
Linus Rath	3edd35ab57	fix: hide email hover actions on mobile	2026-05-07 15:23:05 +02:00
Linus Rath	a86a96e390	fix: disable StarterKit's bundled link/underline to avoid duplicate extensions	2026-05-07 12:33:51 +02:00
Linus Rath	5f464d4ee2	feat: lift 5-account cap on HTTP/2	2026-05-07 12:28:33 +02:00
Linus Rath	bd72dec98f	chore: update version to 1.6.2	2026-05-06 20:11:10 +02:00
Linus Rath	1331a3767c	Revert "chore: update version to 1.6.1" This reverts commit `cb200330e7`.	2026-05-06 20:10:08 +02:00
Linus Rath	cb200330e7	chore: update version to 1.6.1	2026-05-06 20:09:08 +02:00
Linus Rath	178922323d	chore: update version to 1.6.2	2026-05-06 20:07:36 +02:00
Linus Rath	91cf125a5d	chore: remove experimental tags from themes, plugins, and sender favicons settings	2026-05-06 20:03:19 +02:00
Linus Rath	f4b7ef8117	i18n: add missing translation keys across 15 locales	2026-05-06 19:59:14 +02:00
Linus Rath	d175fc2983	feat: restrict plugin and theme install/uninstall to admin dashboard	2026-05-06 19:34:21 +02:00
Linus Rath	2f8bbdc636	fix: open plugin card on first click of a setting sub-result	2026-05-06 19:18:07 +02:00
Linus Rath	b1573aada1	feat: surface plugin settings as search sub-results	2026-05-06 19:14:47 +02:00
Linus Rath	1cd6cde77c	fix: highlight plugin and theme cards in settings search	2026-05-06 19:10:12 +02:00
Linus Rath	802a30508a	fix: drop ghost sub-results from account and language search	2026-05-06 19:06:59 +02:00
Linus Rath	70c1ddd48c	fix: improve settings search highlight	2026-05-06 18:58:06 +02:00
Linus Rath	2dc8537780	feat: add sub-result rows and highlight to settings search	2026-05-06 18:36:00 +02:00
Linus Rath	128d7d0401	feat: add fulltext search to settings sidebar	2026-05-06 18:29:02 +02:00
Linus Rath	d3d79be64c	feat: multi-server JMAP support	2026-05-06 17:33:55 +02:00
Linus Rath	43475945bf	fix: update comment for external-mail warning	2026-05-06 01:54:28 +02:00
Linus Rath	09302684da	fix: propagate settingsSchema	2026-05-06 01:48:49 +02:00
Linus Rath	e68fcb4aec	feat: redesign external banner above attachments	2026-05-06 01:37:29 +02:00
Linus Rath	ded13f02cc	fix: show notification banners above attachments	2026-05-06 01:14:01 +02:00
Linus Rath	cfdee5e5c1	refactor: rework S/MIME banner to match calendar invitation	2026-05-06 01:05:40 +02:00
Linus Rath	e7648eb1ac	fix: close PDF preview on Escape before email viewer	2026-05-06 00:58:43 +02:00
Linus Rath	e7be3d1e0c	fix: render PDF previews via <object> with blob: in object-src CSP #253	2026-05-06 00:54:46 +02:00
Linus Rath	9639a6bb75	feat: expand calendar invitation banner on row click	2026-05-06 00:51:16 +02:00
Linus Rath	904a62ce79	feat: make calendar invitation banner collapsible	2026-05-06 00:49:09 +02:00
Linus Rath	2903e56cf6	fix: align calendar invitation icon with sender avatar column	2026-05-06 00:45:37 +02:00
Linus Rath	b5e0189938	fix: adjust toast item border radius and progress bar styles	2026-05-05 21:57:56 +02:00
Linus Rath	a44bd7c3e6	fix: add missing body type assertion in createPluginAPI fetch options	2026-05-05 21:52:58 +02:00
Linus Rath	0885d3c13e	feat: http:fetch permission + httpOrigins manifest field	2026-05-05 21:50:04 +02:00
Linus Rath	ef8eb1d73b	fix: read activeAccountId from authStore in account selectors	2026-05-05 21:20:45 +02:00
Linus Rath	9f67bc078a	feat: ingest icon/banner/screenshots from source repo	2026-05-05 21:12:23 +02:00
Linus Rath	da411af6d3	feat: project EmailReadView for email-banner slot, expose auth results	2026-05-05 20:31:11 +02:00
Linus Rath	265908b05b	fix: resolve PLUGIN_DEV_DIR plugins in admin config route	2026-05-05 20:17:45 +02:00
Linus Rath	2a769c2b0a	feat: run onBeforeEmailSend hook before send, expose fromEmail on OutgoingEmail	2026-05-05 20:04:00 +02:00
Linus Rath	28054c81ea	fix: inline plugin configure panel to avoid dev-mode hang	2026-05-05 19:04:29 +02:00
Linus Rath	e7264f521c	fix: collapse admin panel into single tabbed page	2026-05-05 18:50:57 +02:00
Linus Rath	1b0ca8967e	feat: bundle plugin src/ on demand via esbuild	2026-05-05 18:35:22 +02:00
Linus Rath	3e336d459c	feat: plugin hot-reload + dev-folder loading	2026-05-05 18:05:17 +02:00
Linus Rath	94f55afd1f	fix: remove fly-in animation from context menu submenus	2026-05-05 17:21:46 +02:00
Linus Rath	7b058ed0ac	fix: calendar invitation picker clipping #250	2026-05-05 17:17:01 +02:00
Luis Felipe MarzagaoandLinus Rath	853b0eb855	fix: add missing Czech flag icon	2026-05-05 08:59:28 +02:00
Linus Rath	41a458d872	fix: add Grafana badge to README for dashboard access	2026-05-04 23:56:55 +02:00
Linus Rath	d1c5dba7d7	chore: update version to 1.6.1	2026-05-04 12:34:53 +02:00
Linus Rath	8c50abe221	fix: synchronize mobile submenu view with browser history for better navigation	2026-05-04 12:31:51 +02:00
Linus Rath	07367a8a5d	fix: update email viewer styles to improve overflow handling	2026-05-04 12:27:44 +02:00
Linus Rath	1a50788c91	fix: ensure cookieSlot consistency during account updates in auth store	2026-05-04 12:09:58 +02:00
Linus Rath	0e06bfe273	Merge branch 'main' of https://github.com/bulwarkmail/webmail	2026-05-04 11:25:49 +02:00
Linus Rath	f68e41d81a	fix: enhance sharing functionality by renaming state	2026-05-04 11:24:05 +02:00
MaxwellandLinus Rath	8b164c556e	fix: thread per-account cookie slot through OAuth flows The multi-account refresh-token cookie slot wiring was half-implemented: every account's refresh token ended up on slot 0, so "+ Add Account" silently clobbered the previous account's `jmap_rt` cookie. On page refresh, only the most-recently-added account had a working refresh token; the others bounced to login. Three coordinated changes: 1. `app/[locale]/login/page.tsx` (handleOAuthLogin): write the next-free cookie slot to `sessionStorage['oauth_cookie_slot']` before redirecting to the IdP. `loginWithOAuth` already reads this key but it was never written, so it always defaulted to 0. 2. `stores/auth-store.ts` (loginWithOAuth): distinguish "no value set" (`rawSlot === null`) from "value is 0". Previously `parseInt(getItem(...) \|\| '0')` collapsed both cases, making the `getNextCookieSlot()` fallback unreachable. 3. `stores/auth-store.ts` (loginWithServerSso) + `app/api/auth/sso/complete/route.ts`: pass the slot through the body of the POST and use it for `refreshTokenCookieName(slot)`. Same pattern as the existing `/api/auth/token POST` that already accepts a slot. The server defaults to 0 for back-compat with any caller that omits it. After the fix, signing in with multiple accounts produces distinct `jmap_rt`, `jmap_rt_1`, `jmap_rt_2`, ... cookies (matching the cookieSlot field in account-store) and all accounts survive a page refresh. Repro before the fix: - Sign in with one account, refresh — works. - Click "+ Add Account", sign in with a second account, refresh — second account vanishes from the dropdown; switching to the first account in the dropdown still shows the second account's identity in the From box.	2026-05-04 11:22:45 +02:00
Linus Rath	2e1f53c899	Merge branch 'main' of https://github.com/bulwarkmail/webmail	2026-05-03 20:07:20 +02:00
Linus Rath	a6d2efaf74	feat: sanitize identity display name to prevent invalid From headers	2026-05-03 20:06:41 +02:00
Luis Felipe MarzagaoandLinus Rath	01cd9644ed	i18n: update mailbox context menu across 12 locales	2026-05-03 11:01:39 +02:00
Linus Rath	1521826d37	feat: add functionality to automatically add recipients to trusted senders when replying	2026-05-02 23:50:50 +02:00
Linus Rath	0d218d0d2a	fix: square the colored left marker on calendar events	2026-05-02 23:41:08 +02:00
Linus Rath	9777dd655c	feat: add share indicators for calendars and contacts, update JMAP capabilities #244	2026-05-02 23:29:21 +02:00
Linus Rath	f970fd1822	feat: add plugin hooks for compose, attachments, search, lifecycle, and routing	2026-05-02 21:27:56 +02:00
Linus Rath	5e096240b3	feat: refresh update status on every dev reload	2026-05-02 13:23:58 +02:00
Linus Rath	bc97a1ac10	feat: make update notice non-dismissible	2026-05-02 13:07:34 +02:00
Linus Rath	4594fb2572	revert: restore VERSION to correct value	2026-05-02 01:59:27 +02:00
Linus Rath	5319562c94	feat: add update-available detection	2026-05-02 01:58:30 +02:00
Linus Rath	599fa66822	fix: show git commit in About instead of "unknown"	2026-05-02 00:28:08 +02:00
@@ -1 +1 @@
 .6.0
 .6.5