chore: bump next to 16.2.6 for security advisories

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.

.env.example

@@ -78,12 +78,46 @@ JMAP_SERVER_URL=https://your-jmap-server.com
 # Admin Dashboard Data
 # =============================================================================
 
-# Directory for admin dashboard state: config overrides, admin password hash,
+# Admin data is split across two directories so the config volume can be
-# installed plugins/themes, and audit logs (default: ./data/admin).
+# mounted read-only after the setup wizard completes (see issue #226).
-# For Docker, the default resolves to /app/data/admin - mount a persistent
+#
-# volume there (see docker-compose.yml).
+# Config dir - operator-authored state. Holds config.json, policy.json,
+# admin.json (passwordHash only), plugin-config/, plugins/, themes/, and
+# branding uploads. Safe to mount read-only after setup.
+# Default: ./data/admin (or ADMIN_DATA_DIR if that legacy variable is set)
+# ADMIN_CONFIG_DIR=./data/admin
+#
+# State dir - runtime mutations. Holds admin-state.json (login timestamps),
+# audit.log, and the bootstrap setup token. Always read-write.
+# Default: ./data/admin-state (or ADMIN_DATA_DIR/state when ADMIN_DATA_DIR
+#          is set, for back-compat with single-volume installs)
+# ADMIN_STATE_DIR=./data/admin-state
+#
+# Set to "true" to enforce read-only mode at the application layer (cleaner
+# error than a mid-request EROFS). Pair with `:ro` on the config-volume mount.
+# ADMIN_CONFIG_READONLY=true
+#
+# Legacy: a single dir containing both config and state. Honoured if neither
+# of the split variables is set. New installs should use the split vars.
 # ADMIN_DATA_DIR=./data/admin
 
+# =============================================================================
+# Anonymous Telemetry
+# =============================================================================
+
+# Anonymous instance telemetry is enabled by default. Heartbeats contain no PII:
+# version, platform, bucketed account counts, and feature toggles only. See
+# https://bulwarkmail.org/docs/legal/privacy/telemetry for the full schema.
+#
+# Disable telemetry entirely (overrides the admin UI):
+# BULWARK_TELEMETRY=off
+
+# Directory for telemetry state: instance id, consent, login HMACs
+# (default: ./data/telemetry). For Docker, the default resolves to
+# /app/data/telemetry - mount a persistent volume there (see docker-compose.yml)
+# so the instance id and consent choice survive upgrades.
+# TELEMETRY_DATA_DIR=./data/telemetry
+
 # =============================================================================
 # Server Listen Address
 # =============================================================================
@@ -191,7 +225,8 @@ LOGIN_WEBSITE_URL=https://bulwarkmail.org
 # =============================================================================
 
 # URL of the BulwarkMail extension directory for the admin marketplace.
-# Set this to enable browsing and installing plugins/themes from the directory.
+# Defaults to https://extensions.bulwarkmail.org. Override only if you run
+# your own directory (e.g. http://localhost:3001 for local development).
 # EXTENSION_DIRECTORY_URL=https://extensions.bulwarkmail.org
 
 # =============================================================================

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

@@ -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 }}

.github/workflows/docker-publish.yml

@@ -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 }}

.gitignore

@@ -49,4 +49,4 @@ next-env.d.ts
 /local-data/
 
 # Sibling repos
-/repos/
+/repos/

CHANGELOG.md

@@ -1,11 +1,223 @@
 # Changelog
 
+## 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
+
+- **Deployment**: Subpath deployment support via `NEXT_PUBLIC_BASE_PATH` environment variable
+- **Mail**: Image attachment thumbnails and preview chips
+- **Mobile**: Reworked mobile mail viewer toolbar
+- **Mobile**: Mobile-friendly settings panel
+- **Mobile**: Mobile-friendly admin panel
+- **Mail**: Redesigned expanded details panel
+- **Mailbox**: Show full path in mailbox context menu header with intelligent path shortening
+
+### Fixes
+
+- **Viewer**: Respect per-email dark mode toggle when "always show in light mode" is on
+- **Navigation**: Scroll apps list in navigation rail to prevent overflow
+- **Context menu**: Clamp submenu inside viewport
+- **Context menu**: Prevent context menu from clipping below viewport
+- **Context menu**: Prevent jump and animation on open
+- **Mail**: Stop silently destroying emails when trash mailbox isn't found (#195)
+- **Mail**: Preserve list scroll position when tagging an email
+- **Mail**: Render below-header overflow popup outside clipped row
+- **Mail**: Collapse below-header attachments to single row with overflow pill
+- **Push**: Fix push preview JMAP query
+- **Tour**: Navigate tour to mailbox when starting from another page
+- **i18n**: Add `useTranslations` for "selected emails" and "cancel" on email list batch operations
+
+### i18n
+
+- Translate SPF/DKIM/DMARC tooltips
+- Add missing keys across 14 locales
+
+## 1.5.4 (2026-05-01)
+
+### Features
+
+- **PWA**: Web push notifications for new inbox mail (#233), with click-through to open the message
+- **Composer**: Insert and edit tables in rich-text emails (#236)
+- **Mail**: Configurable sub-addressing delimiter character (#239)
+- **i18n**: Turkish localization
+- **i18n**: Missing keys filled in across 15 locales
+
+### Fixes
+
+- **Mail**: Set In-Reply-To and References headers on replies (#234)
+- **Mail**: Persist htmlBody in drafts to preserve rich formatting (#236)
+- **Auth**: Pin JMAP auth verification to the configured server URL (#237)
+- **Auth**: Evict unrecoverable basic-auth accounts on reload
+- **Notifications**: Scope new-mail notifications to genuine inbox deliveries
+- **Notifications**: Extend PushVerification timeout and clean up leftover subscriptions
+- **Viewer**: Smooth out body load to prevent flicker on first render
+- **Viewer**: Prevent iframe flash when loading images or trusting the sender
+- **Viewer**: Pad bare HTML emails like plain-text mails for consistent layout
+- **Viewer**: Light-mode override now only affects body content
+- **Viewer**: Detect `<style>` tag when applying padding
+- **Viewer**: Drop iframe border-radius
+- **Calendar**: Localize event start date in detail popover and event modal
+- **Dev**: Include http protocol in connect-src for development mode CSP
+
+## 1.5.3 (2026-04-28)
+
+> **New:** Help shape Bulwark Webmail. Each instance now sends a lightweight daily heartbeat (version, platform, bucketed account counts, feature toggles - never message data or PII) so we can see which platforms and features actually get used and prioritize fixes where they matter most. You're in control: opt out any time from **Admin → Telemetry** or by setting `BULWARK_TELEMETRY=off`. Full schema in the [privacy notice](https://bulwarkmail.org/docs/legal/privacy/telemetry).
+
+### Features
+
+- **Telemetry**: Anonymous instance telemetry, on by default. Reports schema version, platform, bucketed account counts, and feature toggles only - disable from the admin UI, with `BULWARK_TELEMETRY=off`, or by clearing the endpoint
+- **Telemetry**: Track unique logins (HMAC'd per instance, 90-day retention) so the heartbeat can report bucketed account totals without storing usernames
+- **Plugins**: Theme API v2 with token compiler and skin slot
+- **Plugins**: Extension preview page and detailed extension info API
+- **Calendar**: Right-click context menu on empty calendar space
+- **Docker**: Persistent named volume for telemetry data so the instance id and admin's consent choice survive container upgrades
+
+### Fixes
+
+- **Security**: Block telemetry endpoint from pointing at internal/loopback hosts (validation + DNS-rebind re-check at fetch time)
+- **Security**: Harden plugin config, TOTP token exchange, and branding file serving
+- **Mail**: Batch shortcuts now act on the multi-selection when one is present (#228)
+
 ## 1.5.2 (2026-04-27)
 
 ### Features
 
-- **Plugins**: New `composer-sidebar` slot and `ui:composer-sidebar` permission — plugins can now render a panel on either side of the New Message dialog. See `repos/subway-surfers` for an example
+- **Plugins**: New `composer-sidebar` slot and `ui:composer-sidebar` permission - plugins can now render a panel on either side of the New Message dialog. See `repos/subway-surfers` for an example
-- **Plugins**: Manifests can declare `frameOrigins` — a strictly-validated list of `https://host` origins the plugin needs to embed. The proxy reads the union from enabled plugins and merges it into the host CSP `frame-src`, so the host CSP no longer needs to know about specific embed providers
+- **Plugins**: Manifests can declare `frameOrigins` - a strictly-validated list of `https://host` origins the plugin needs to embed. The proxy reads the union from enabled plugins and merges it into the host CSP `frame-src`, so the host CSP no longer needs to know about specific embed providers
 - **Calendar/Contacts**: JMAP sharing for calendars and address books
 - **i18n**: Czech language support
 

Dockerfile

@@ -4,6 +4,14 @@ COPY package.json package-lock.json ./
 RUN npm ci
 COPY . .
 ENV NEXT_TELEMETRY_DISABLED=1
+# Optional: serve under a subpath like /webmail. Baked into emitted asset URLs
+# at build time, so it cannot be changed without rebuilding.
+ARG NEXT_PUBLIC_BASE_PATH=
+ENV NEXT_PUBLIC_BASE_PATH=$NEXT_PUBLIC_BASE_PATH
+# Commit SHA shown in the About screen. .dockerignore excludes .git, so
+# `git rev-parse` inside the build can't find it - CI must pass it in.
+ARG GIT_COMMIT=unknown
+ENV GIT_COMMIT=$GIT_COMMIT
 RUN npx next build --webpack
 
 FROM node:24-alpine AS runner
@@ -26,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 && 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

FEATURES.md

@@ -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
+- Three selectable mail layouts: split (three-pane), focused list, and reading pane at bottom
-- Attachment upload, download, and inline preview; forgotten-attachment warning
+- 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
@@ -94,31 +98,38 @@
 
 ## Internationalization
 
-14 languages: English · Français · 日本語 · Español · Italiano · Deutsch · Nederlands · Português · Русский · 한국어 · Polski · Latviešu · 简体中文 · Українська
+15 languages: English · Français · 日本語 · Español · Italiano · Deutsch · Nederlands · Português · Русский · Türkçe · 한국어 · Polski · Latviešu · 简体中文 · Українська
 
 Automatic browser detection with persistent preference. Configurable locale URL prefix via `NEXT_PUBLIC_LOCALE_PREFIX`.
 
 ## Identity & Multi-Account
 
-- Up to 5 simultaneous accounts with instant switching and per-account session persistence
+- 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
+- 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
-- Plugin system – schema-driven config UI, render and intercept hooks, `onAvatarResolve` and i18n APIs, calendar event slots, and managed policy enforcement
+- 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
+- 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
+- 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

README.md

@@ -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.5.2-green.svg?logo=git&logoColor=white)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/version-1.6.4-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>
@@ -55,14 +79,14 @@ A modern, self-hosted webmail client for [Stalwart Mail Server](https://stalw.ar
 
 ## Overview
 
-Bulwark is a full webmail suite – not just an inbox. It bundles the four apps most self-hosters end up wanting on the same login:
+Bulwark is a full webmail suite, not just an inbox. It bundles the four apps most self-hosters end up wanting on the same login:
 
 - **Mail** – threading, unified inbox, full-text search, Sieve filters, S/MIME, templates
 - **Calendar** – month/week/day/agenda, recurring events, iMIP invitations, CalDAV subscriptions
 - **Contacts** – multiple address books, groups, vCard import/export
 - **Files** – Stalwart's JMAP FileNode storage with previews and folder upload
 
-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 \
+docker run -d -p 3000:3000 ghcr.io/bulwarkmail/webmail:latest
-  -e JMAP_SERVER_URL=https://mail.example.com \
-  ghcr.io/bulwarkmail/webmail:latest
 ```
 
 Or with Docker Compose:
 
 ```bash
-cp .env.example .env.local
-# Edit .env.local – set JMAP_SERVER_URL
 docker compose up -d
 ```
 
+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,39 @@ 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>
+
+To serve the webmail at a subpath (e.g. `https://example.com/webmail`):
+
+```env
+NEXT_PUBLIC_BASE_PATH=/webmail
+NEXT_PUBLIC_LOCALE_PREFIX=always     # avoids next-intl rewrite loops
+```
+
+Unlike most other variables, `NEXT_PUBLIC_BASE_PATH` is read at **build time** because Next.js bakes it into emitted asset URLs. To use it with the published Docker image, build your own image with the variable set:
+
+```bash
+docker build --build-arg NEXT_PUBLIC_BASE_PATH=/webmail -t bulwark-webmail .
+```
+
+Then point your reverse proxy at the container without stripping the prefix - the app expects to receive requests under `/webmail/...` and serves all routes (`/webmail/api/...`, `/webmail/_next/static/...`, `/webmail/sw.js`, etc.) accordingly.
+
+</details>
+
 ## Keyboard Shortcuts
 
 | Key           | Action                  |

VERSION

@@ -1 +1 @@
-1.5.2
+1.6.3

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

@@ -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 {

app/[locale]/calendar/page.tsx

@@ -31,6 +31,7 @@ import { CalendarSidebarPanel } from "@/components/calendar/calendar-sidebar-pan
 import { EventModal, type PendingEventPreview } from "@/components/calendar/event-modal";
 import { EventDetailPopover } from "@/components/calendar/event-detail-popover";
 import { EventContextMenu } from "@/components/calendar/event-context-menu";
+import { EmptySpaceContextMenu } from "@/components/calendar/empty-space-context-menu";
 import { useContextMenu } from "@/hooks/use-context-menu";
 import { useRefreshGesture } from "@/hooks/use-refresh-gesture";
 import { downloadEventICS } from "@/lib/calendar-ics-export";
@@ -104,6 +105,7 @@ export default function CalendarPage() {
   const [editEvent, setEditEvent] = useState<CalendarEvent | null>(null);
   const [defaultModalDate, setDefaultModalDate] = useState<Date | undefined>();
   const [defaultModalEndDate, setDefaultModalEndDate] = useState<Date | undefined>();
+  const [defaultModalAllDay, setDefaultModalAllDay] = useState(false);
   const [miniMonth, setMiniMonth] = useState(new Date());
   const [pendingScopeAction, setPendingScopeAction] = useState<PendingScopeAction | null>(null);
   const [detailEvent, setDetailEvent] = useState<CalendarEvent | null>(null);
@@ -326,11 +328,12 @@ export default function CalendarPage() {
     setSelectedDate(date);
   }, [setSelectedDate]);
 
-  const openCreateModal = useCallback((date?: Date, endDate?: Date) => {
+  const openCreateModal = useCallback((date?: Date, endDate?: Date, allDay?: boolean) => {
     setEditEvent(null);
     const d = date || selectedDate;
     setDefaultModalDate(d);
     setDefaultModalEndDate(endDate);
+    setDefaultModalAllDay(allDay ?? false);
     setSelectedDate(d);
     setShowEventModal(true);
   }, [selectedDate, setSelectedDate]);
@@ -395,6 +398,21 @@ export default function CalendarPage() {
     openEventContextMenu(e, event);
   }, [closeDetail, openEventContextMenu]);
 
+  const {
+    contextMenu: emptyContextMenu,
+    openContextMenu: openEmptyContextMenu,
+    closeContextMenu: closeEmptyContextMenu,
+    menuRef: emptyContextMenuRef,
+  } = useContextMenu<{ date: Date; hour?: number; allDayArea?: boolean }>();
+
+  const handleContextMenuEmpty = useCallback(
+    (e: React.MouseEvent, date: Date, hour?: number, allDayArea?: boolean) => {
+      closeDetail();
+      openEmptyContextMenu(e, { date, hour, allDayArea });
+    },
+    [closeDetail, openEmptyContextMenu],
+  );
+
   const handleHoverEvent = useCallback((event: CalendarEvent, anchorRect: DOMRect) => {
     if (isMobile) return;
     if (calendarHoverPreview === 'off') return;
@@ -961,6 +979,7 @@ export default function CalendarPage() {
               onHoverEvent={handleHoverEvent}
               onHoverLeave={handleHoverLeave}
               onContextMenuEvent={handleContextMenuEvent}
+              onContextMenuEmpty={handleContextMenuEmpty}
               onCreateAtTime={openCreateModal}
               firstDayOfWeek={firstDayOfWeek}
               isMobile={isMobile}
@@ -978,6 +997,7 @@ export default function CalendarPage() {
               onHoverEvent={handleHoverEvent}
               onHoverLeave={handleHoverLeave}
               onContextMenuEvent={handleContextMenuEvent}
+              onContextMenuEmpty={handleContextMenuEmpty}
               onCreateAtTime={openCreateModal}
               firstDayOfWeek={firstDayOfWeek}
               timeFormat={timeFormat}
@@ -997,6 +1017,7 @@ export default function CalendarPage() {
               onHoverEvent={handleHoverEvent}
               onHoverLeave={handleHoverLeave}
               onContextMenuEvent={handleContextMenuEvent}
+              onContextMenuEmpty={handleContextMenuEmpty}
               onCreateAtTime={openCreateModal}
               timeFormat={timeFormat}
               isMobile={isMobile}
@@ -1211,12 +1232,13 @@ export default function CalendarPage() {
                 calendars={calendars}
                 defaultDate={defaultModalDate}
                 defaultEndDate={defaultModalEndDate}
+                defaultAllDay={defaultModalAllDay}
                 defaultCalendarId={defaultCalendarIdForCreate}
                 onSave={handleSaveEvent}
                 onDelete={handleDeleteEvent}
                 onDuplicate={handleDuplicateEvent}
                 onRsvp={handleRsvp}
-                onClose={() => { setShowEventModal(false); setEditEvent(null); setPendingPreview(null); setDefaultCalendarIdForCreate(undefined); }}
+                onClose={() => { setShowEventModal(false); setEditEvent(null); setPendingPreview(null); setDefaultCalendarIdForCreate(undefined); setDefaultModalAllDay(false); }}
                 onPreviewChange={setPendingPreview}
                 currentUserEmails={currentUserEmails}
                 isMobile={false}
@@ -1282,6 +1304,38 @@ export default function CalendarPage() {
         />
       )}
 
+      {emptyContextMenu.data && (() => {
+        const { date, hour } = emptyContextMenu.data;
+        return (
+          <EmptySpaceContextMenu
+            position={emptyContextMenu.position}
+            isOpen={emptyContextMenu.isOpen}
+            onClose={closeEmptyContextMenu}
+            menuRef={emptyContextMenuRef}
+            onNewEvent={() => {
+              const d = new Date(date);
+              if (typeof hour === "number") {
+                d.setHours(hour, 0, 0, 0);
+              } else {
+                const now = new Date();
+                d.setHours(now.getHours() + 1, 0, 0, 0);
+              }
+              openCreateModal(d);
+            }}
+            onNewAllDayEvent={() => {
+              const d = new Date(date);
+              d.setHours(0, 0, 0, 0);
+              openCreateModal(d, undefined, true);
+            }}
+            onNewTask={enableCalendarTasks ? () => {
+              setEditTask(null);
+              setShowTaskModal(true);
+            } : undefined}
+            onGoToToday={goToToday}
+          />
+        );
+      })()}
+
       {detailEvent && detailAnchorRect && (
         <EventDetailPopover
           event={detailEvent}
@@ -1308,12 +1362,13 @@ export default function CalendarPage() {
           calendars={calendars}
           defaultDate={defaultModalDate}
           defaultEndDate={defaultModalEndDate}
+          defaultAllDay={defaultModalAllDay}
           defaultCalendarId={defaultCalendarIdForCreate}
           onSave={handleSaveEvent}
           onDelete={handleDeleteEvent}
           onDuplicate={handleDuplicateEvent}
           onRsvp={handleRsvp}
-          onClose={() => { setShowEventModal(false); setEditEvent(null); setDefaultCalendarIdForCreate(undefined); }}
+          onClose={() => { setShowEventModal(false); setEditEvent(null); setDefaultCalendarIdForCreate(undefined); setDefaultModalAllDay(false); }}
           currentUserEmails={currentUserEmails}
           isMobile={true}
         />

app/[locale]/login/page.tsx

@@ -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">
+      {trigger}
-        v{APP_VERSION}
-      </p>
       <div className="absolute top-full left-1/2 -translate-x-1/2 mt-1.5 px-3 py-2 rounded-md bg-popover text-popover-foreground text-xs shadow-md border border-border opacity-0 peer-hover:opacity-100 hover:opacity-100 transition-opacity whitespace-nowrap z-10">
         <div className="flex items-center gap-2">
           <div className="space-y-0.5">
             <p>Version: <span className="font-medium">{APP_VERSION}</span></p>
             <p>Build: <span className="font-medium">{GIT_COMMIT}</span></p>
+            {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,24 +492,45 @@ export default function LoginPage() {
   };
 
   const handleOAuthLogin = async () => {
-    if (!oauthMetadata || !oauthClientId) return;
+    if (!oauthMetadata || !effectiveOauthClientId) return;
     setOauthLoading(true);
 
     const verifier = generateCodeVerifier();
     const challenge = await generateCodeChallenge(verifier);
     const state = generateState();
-    const redirectUri = `${window.location.origin}/${params.locale}/auth/callback`;
+    const prefix = getPathPrefix(params.locale as string);
+    const redirectUri = `${window.location.origin}${prefix}/${params.locale}/auth/callback`;
+
+    // Resolve the JMAP URL to send to the callback. Server-list entries win
+    // over the custom-endpoint input, which wins over the global server URL.
+    const oauthServerUrl = selectedServer?.url
+      || (allowCustomJmapEndpoint ? jmapEndpoint : configuredServerUrl);
 
     sessionStorage.setItem("oauth_code_verifier", verifier);
     sessionStorage.setItem("oauth_state", state);
-    sessionStorage.setItem("oauth_server_url", 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);
@@ -435,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,
@@ -556,13 +667,17 @@ export default function LoginPage() {
             <div className="px-8 pb-10 pt-4">
               {error && (
                 <div className={cn(
-                  "mb-5 p-3.5 bg-red-500/10 border border-red-500/20 rounded-xl flex items-start gap-3",
+                  "mb-5 p-3 rounded-xl border border-destructive/20 bg-destructive/5 flex items-start gap-3",
                   shakeError && "animate-shake"
                 )}>
-                  <AlertCircle className="w-4.5 h-4.5 text-red-500 flex-shrink-0 mt-0.5" />
+                  <div className="w-10 h-10 rounded-full bg-destructive/15 text-destructive flex items-center justify-center flex-shrink-0 shadow-sm">
-                  <p className="text-sm text-red-600 dark:text-red-400 leading-relaxed">
+                    <AlertCircle className="w-5 h-5" />
-                    {t(`error.${error}`) || t("error.generic")}
+                  </div>
-                  </p>
+                  <div className="flex-1 min-w-0 self-center">
+                    <p className="text-sm text-destructive leading-relaxed">
+                      {t(`error.${error}`) || t("error.generic")}
+                    </p>
+                  </div>
                 </div>
               )}
 
@@ -703,37 +818,45 @@ export default function LoginPage() {
             {/* Session Expired Banner */}
             {sessionExpired && (
               <div
-                className="mb-5 p-3.5 bg-blue-500/10 border border-blue-500/20 rounded-xl flex items-start gap-3"
+                className="mb-5 p-3 rounded-xl border border-info/20 bg-info/5 flex items-start gap-3"
                 role="status"
                 aria-live="polite"
               >
-                <Info className="w-4.5 h-4.5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
+                <div className="w-10 h-10 rounded-full bg-info/15 text-info flex items-center justify-center flex-shrink-0 shadow-sm">
-                <p className="text-sm text-blue-700 dark:text-blue-300 flex-1 leading-relaxed">
+                  <Info className="w-5 h-5" />
-                  {t("session_expired")}
+                </div>
-                </p>
+                <div className="flex-1 min-w-0 self-center flex items-center gap-2">
-                <button
+                  <p className="text-sm text-info flex-1 leading-relaxed">
-                  type="button"
+                    {t("session_expired")}
-                  onClick={() => setSessionExpired(false)}
+                  </p>
-                  className="p-0.5 rounded-md hover:bg-blue-500/10 transition-colors flex-shrink-0"
+                  <button
-                  aria-label={t("dismiss")}
+                    type="button"
-                >
+                    onClick={() => setSessionExpired(false)}
-                  <X className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+                    className="p-1 rounded-md text-info hover:bg-info/10 transition-colors flex-shrink-0"
-                </button>
+                    aria-label={t("dismiss")}
+                  >
+                    <X className="w-4 h-4" />
+                  </button>
+                </div>
               </div>
             )}
 
             {/* Error Message */}
             {error && (
               <div className={cn(
-                "mb-5 p-3.5 bg-red-500/10 border border-red-500/20 rounded-xl flex items-start gap-3",
+                "mb-5 p-3 rounded-xl border border-destructive/20 bg-destructive/5 flex items-start gap-3",
                 shakeError && "animate-shake"
               )}>
-                <AlertCircle className="w-4.5 h-4.5 text-red-500 flex-shrink-0 mt-0.5" />
+                <div className="w-10 h-10 rounded-full bg-destructive/15 text-destructive flex items-center justify-center flex-shrink-0 shadow-sm">
-                <p className="text-sm text-red-600 dark:text-red-400 leading-relaxed">
+                  <AlertCircle className="w-5 h-5" />
-                  {error === 'invalid_credentials' && showTotpField && totpCode
+                </div>
-                    ? t('error.totp_invalid')
+                <div className="flex-1 min-w-0 self-center">
-                    : t(`error.${error}`) || t("error.generic")}
+                  <p className="text-sm text-destructive leading-relaxed">
-                </p>
+                    {error === 'invalid_credentials' && showTotpField && totpCode
+                      ? t('error.totp_invalid')
+                      : t(`error.${error}`) || t("error.generic")}
+                  </p>
+                </div>
               </div>
             )}
 
@@ -785,11 +908,15 @@ 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">
+                  <div className="p-3 rounded-xl border border-warning/20 bg-warning/5 flex items-start gap-3">
-                    <AlertCircle className="w-4 h-4 text-warning flex-shrink-0 mt-0.5" />
+                    <div className="w-10 h-10 rounded-full bg-warning/15 text-warning flex items-center justify-center flex-shrink-0 shadow-sm">
-                    <p className="text-sm text-warning">
+                      <AlertCircle className="w-5 h-5" />
-                      {t("error.oauth_discovery_failed")}
+                    </div>
-                    </p>
+                    <div className="flex-1 min-w-0 self-center">
+                      <p className="text-sm text-warning leading-relaxed">
+                        {t("error.oauth_discovery_failed")}
+                      </p>
+                    </div>
                   </div>
                 ) : (
                   <div className="flex justify-center py-4">
@@ -801,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) */}
+                  {/* Server picker (when admin has configured a server list) */}
-                  {allowCustomJmapEndpoint && (
+                  {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")}
@@ -1017,11 +1168,15 @@ 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">
+                  <div className="mt-2 p-3 rounded-xl border border-warning/20 bg-warning/5 flex items-start gap-3">
-                    <AlertCircle className="w-4 h-4 text-warning flex-shrink-0 mt-0.5" />
+                    <div className="w-10 h-10 rounded-full bg-warning/15 text-warning flex items-center justify-center flex-shrink-0 shadow-sm">
-                    <p className="text-sm text-warning">
+                      <AlertCircle className="w-5 h-5" />
-                      {t("error.oauth_discovery_failed")}
+                    </div>
-                    </p>
+                    <div className="flex-1 min-w-0 self-center">
+                      <p className="text-sm text-warning leading-relaxed">
+                        {t("error.oauth_discovery_failed")}
+                      </p>
+                    </div>
                   </div>
                 )}
               </form>

app/[locale]/page.tsx

@@ -1,6 +1,7 @@
 "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";
@@ -51,12 +52,16 @@ import { Input } from "@/components/ui/input";
 import { FilePreviewModal } from "@/components/files/file-preview-modal";
 import { isFilePreviewable } from "@/lib/file-preview";
 import { appendPlainTextSignature } from "@/lib/signature-utils";
+import { 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 { appLifecycleHooks, uiHooks, routerHooks, toastHooks, emailHooks } from "@/lib/plugin-hooks";
+import { emailToReadView } from "@/lib/plugin-projection";
 
 
 export default function Home() {
@@ -114,9 +119,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,
@@ -138,6 +225,7 @@ export default function Home() {
     deleteEmail,
     markAsRead,
     toggleStar,
+    setEmailKeywordsLocal,
     moveToMailbox,
     moveThreadToMailbox,
     searchEmails,
@@ -171,6 +259,11 @@ export default function Home() {
     createMailbox,
     renameMailbox,
     deleteMailbox,
+    batchDelete,
+    batchArchive,
+    batchMarkAsRead,
+    batchMarkAsSpam,
+    batchUndoSpam,
   } = useEmailStore();
 
   const enableUnifiedMailbox = useSettingsStore((s) => s.enableUnifiedMailbox);
@@ -353,27 +446,77 @@ export default function Home() {
     onToggleStar: () => {
       if (selectedEmail) handleToggleStar();
     },
-    onArchive: () => {
+    onArchive: async () => {
-      if (selectedEmail) handleArchive();
+      if (selectedEmailIds.size > 0 && client) {
+        try {
+          await batchArchive(client);
+        } catch (error) {
+          console.error("Failed to batch archive:", error);
+        }
+      } else if (selectedEmail) {
+        handleArchive();
+      }
     },
-    onDelete: () => {
+    onDelete: async () => {
-      if (selectedEmail) handleDelete();
+      if (selectedEmailIds.size > 0 && client) {
+        const currentMailbox = mailboxes.find(m => m.id === selectedMailbox);
+        const isInTrash = currentMailbox?.role === 'trash';
+        const isInJunk = currentMailbox?.role === 'junk';
+        const permanentlyDeleteJunk = useSettingsStore.getState().permanentlyDeleteJunk;
+        const permanent = isInTrash || (isInJunk && permanentlyDeleteJunk);
+        const confirmed = await confirmDialog({
+          title: permanent
+            ? t('email_list.permanent_delete_confirm_title')
+            : t('email_list.batch_actions.delete_confirm_title'),
+          message: permanent
+            ? t('email_list.permanent_delete_confirm_batch_message', { count: selectedEmailIds.size })
+            : t('email_list.batch_actions.delete_confirm_message', { count: selectedEmailIds.size }),
+          confirmText: permanent
+            ? t('email_list.permanent_delete')
+            : t('email_list.batch_actions.delete'),
+          variant: "destructive",
+        });
+        if (!confirmed) return;
+        try {
+          await batchDelete(client, permanent);
+        } catch (error) {
+          console.error("Failed to batch delete:", error);
+        }
+      } else if (selectedEmail) {
+        handleDelete();
+      }
     },
     onMarkAsUnread: async () => {
-      if (selectedEmail && client) {
+      if (!client) return;
+      if (selectedEmailIds.size > 0) {
+        await batchMarkAsRead(client, false);
+      } else if (selectedEmail) {
         await markAsRead(client, selectedEmail.id, false);
       }
     },
     onMarkAsRead: async () => {
-      if (selectedEmail && client) {
+      if (!client) return;
+      if (selectedEmailIds.size > 0) {
+        await batchMarkAsRead(client, true);
+      } else if (selectedEmail) {
         await markAsRead(client, selectedEmail.id, true);
       }
     },
-    onToggleSpam: () => {
+    onToggleSpam: async () => {
-      if (selectedEmail) {
+      const currentMailbox = mailboxes.find(m => m.id === selectedMailbox);
-        // Check if we're in junk folder
+      const isInJunk = currentMailbox?.role === 'junk';
-        const currentMailbox = mailboxes.find(m => m.id === selectedMailbox);
+      if (selectedEmailIds.size > 0 && client) {
-        const isInJunk = currentMailbox?.role === 'junk';
+        const ids = Array.from(selectedEmailIds);
+        try {
+          if (isInJunk) {
+            await batchUndoSpam(client, ids);
+          } else {
+            await batchMarkAsSpam(client, ids);
+          }
+        } catch (error) {
+          console.error("Failed to batch toggle spam:", error);
+        }
+      } else if (selectedEmail) {
         if (isInJunk) {
           handleUndoSpam();
         } else {
@@ -408,13 +551,14 @@ export default function Home() {
       clearSelection();
     },
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [emails, selectedEmail, client, selectedMailbox, isMobile, isTablet]);
+  }), [emails, selectedEmail, client, selectedMailbox, isMobile, isTablet, selectedEmailIds, mailboxes]);
 
   // Initialize keyboard shortcuts
   useKeyboardShortcuts({
     enabled: isAuthenticated && !showComposer,
     emails,
     selectedEmailId: selectedEmail?.id,
+    selectionCount: selectedEmailIds.size,
     handlers: keyboardHandlers,
   });
 
@@ -493,6 +637,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
@@ -506,7 +651,10 @@ export default function Home() {
     }
   }, [initialCheckDone, isAuthenticated, authLoading]);
 
-  // Load mailboxes and emails when authenticated (only if not already loaded)
+  // 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;
@@ -514,18 +662,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`);
@@ -533,34 +677,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);
         }
@@ -570,17 +693,33 @@ export default function Home() {
       return () => {
         cancelled = true;
         if (retryTimer) clearTimeout(retryTimer);
-        client.closePushNotifications();
       };
     }
+  }, [isAuthenticated, client, mailboxes.length, fetchMailboxes, fetchEmails, fetchQuota, fetchTagCounts]);
 
-    // Cleanup push notifications on unmount
+  // Push notifications: set up once per client and tear down when the client
-    return () => {
+  // goes away (logout or account switch). Kept separate from the fetch effect
-      if (client) {
+  // above so it still runs when data was prefetched at login time.
-        client.closePushNotifications();
+  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);
+    }
+
+    return () => {
+      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
@@ -595,11 +734,50 @@ export default function Home() {
     });
   }, [enableUnifiedMailbox, isAuthenticated, client, mailboxes, connectedAccountsSignature, buildUnifiedAccounts, populateUnifiedAccountMailboxes, refreshUnifiedCounts]);
 
+  // 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
+  // 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.
+  const notificationParamHandledRef = useRef(false);
+  useEffect(() => {
+    if (notificationParamHandledRef.current) return;
+    if (!isAuthenticated || !client) return;
+    if (mailboxes.length === 0) return;
+
+    const params = new URLSearchParams(window.location.search);
+    const emailIdParam = params.get('email');
+    const openLatestUnread = params.get('openLatestUnread') === '1';
+    if (!emailIdParam && !openLatestUnread) return;
+
+    // For the latest-unread case we need the inbox emails loaded; bail and
+    // let the effect re-run once `emails` is populated.
+    if (openLatestUnread && emails.length === 0) return;
+
+    notificationParamHandledRef.current = true;
+    window.history.replaceState({}, '', window.location.pathname);
+
+    if (emailIdParam) {
+      setLoadingEmail(true);
+      fetchEmailContent(client, emailIdParam).finally(() => setLoadingEmail(false));
+      return;
+    }
+
+    // emails are sorted receivedAt-desc, so the first unread is the newest.
+    const newestUnread = emails.find(e => !e.keywords?.$seen);
+    if (newestUnread) {
+      selectEmail(newestUnread);
+    }
+  }, [isAuthenticated, client, mailboxes.length, emails, fetchEmailContent, selectEmail, setLoadingEmail]);
+
   // Auto-fetch full email content when an email is auto-selected (e.g. after delete/archive)
   useEffect(() => {
     if (!selectedEmail || !client) return;
-    // If the email lacks bodyValues, it was auto-selected from the list and needs full content
+    // If the email lacks bodyValues, it was auto-selected from the list and needs full content.
-    if (!selectedEmail.bodyValues) {
+    // Skip when handleEmailSelect already started a fetch (it sets isLoadingEmail before
+    // calling selectEmail on the stub), to avoid a duplicate request.
+    if (!selectedEmail.bodyValues && !isLoadingEmail) {
       const perAccountClient = isUnifiedView && selectedEmail.accountId
         ? useAuthStore.getState().getClientForAccount(selectedEmail.accountId)
         : undefined;
@@ -693,7 +871,10 @@ 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[];
   }) => {
     if (!client) return;
 
@@ -701,7 +882,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);
+      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
@@ -736,7 +917,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);
@@ -795,13 +984,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');
@@ -833,13 +1038,24 @@ export default function Home() {
       }
     } else {
       // Not in trash: always move to trash
-      const trashMailbox = mailboxes.find(m => m.role === 'trash' && !m.isShared);
+      const trashMailbox =
+        mailboxes.find(m => m.role === 'trash' && !m.isShared) ??
+        mailboxes.find(m => {
+          if (m.isShared) return false;
+          const lower = m.name.toLowerCase();
+          return lower.includes('trash') || lower.includes('deleted');
+        });
       if (trashMailbox) {
         try {
           await moveToMailbox(client, emailToDelete.id, trashMailbox.id);
         } catch (error) {
           console.error("Failed to move email to trash:", error);
+          const { toast } = await import('sonner');
+          toast.error(error instanceof Error ? error.message : 'Failed to move email to trash');
         }
+      } else {
+        const { toast } = await import('sonner');
+        toast.error('Trash mailbox not found - cannot move email to trash');
       }
     }
   };
@@ -987,11 +1203,9 @@ export default function Home() {
       // Update email keywords via JMAP
       await client.updateEmailKeywords(emailId, keywords);
 
-      // Update local state
+      // Patch the email in place so the list keeps its scroll/pagination state
-      selectEmail(email.id === selectedEmail?.id ? { ...email, keywords } : selectedEmail);
+      // instead of being reset to the first page by a full refetch.
-
+      setEmailKeywordsLocal(emailId, keywords);
-      // Refresh emails list to show color in list
-      await fetchEmails(client, selectedMailbox);
 
       // Refresh tag counts
       fetchTagCounts(client);
@@ -1287,6 +1501,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 {
@@ -1387,12 +1638,37 @@ export default function Home() {
     }
 
     const primaryIdentity = identities[0];
+    const autoSelectReplyIdentity = useSettingsStore.getState().autoSelectReplyIdentity;
 
-    // Append signature from the primary identity
+    // Decide the sending identity and (for domain-catch-all) an optional
-    const finalBody = appendPlainTextSignature(body, primaryIdentity);
+    // 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);
 
     const originalEmailId = selectedEmail.id;
 
+    // RFC 5322 §3.6.4 threading - keep the conversation stitched together (#234).
+    const threading = computeReplyThreadingHeaders({
+      messageId: selectedEmail.messageId,
+      references: selectedEmail.references,
+    });
+
     // Send reply with just the body text
     await sendEmail(
       client,
@@ -1401,10 +1677,15 @@ export default function Home() {
       finalBody,
       undefined,
       undefined,
-      primaryIdentity?.id,
+      sendingIdentity?.id,
-      primaryIdentity?.email,
+      headerFromEmail,
       undefined,
-      primaryIdentity?.name || undefined
+      headerFromName,
+      undefined,
+      undefined,
+      threading?.inReplyTo,
+      threading?.references,
+      envelopeMailFrom,
     );
 
     // Mark the original email as answered
@@ -1433,9 +1714,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 }) => {
@@ -1446,7 +1729,13 @@ export default function Home() {
       setShowComposer(false);
     }
 
-    // Set loading state immediately (keep current email visible)
+    // Show the list stub immediately so subject/sender render without
+    // waiting for the body fetch - avoids the loading flicker.
+    const listEmail = emails.find(e => e.id === email.id);
+    if (listEmail) {
+      selectEmail(listEmail);
+    }
+
     setLoadingEmail(true);
 
     // On mobile, switch to viewer
@@ -1463,7 +1752,6 @@ export default function Home() {
     try {
       // In unified view each email carries its own accountId. Use that
       // account's client so we fetch from the server that actually owns it.
-      const listEmail = emails.find(e => e.id === email.id);
       const emailAccountId = isUnifiedView ? listEmail?.accountId : undefined;
       const perAccountClient = emailAccountId
         ? useAuthStore.getState().getClientForAccount(emailAccountId)
@@ -1662,6 +1950,7 @@ export default function Home() {
               onCreateFolder={handleCreateFolderFromContextMenu}
               onRenameFolder={handleRenameFolderFromContextMenu}
               onDeleteFolder={handleDeleteFolderFromContextMenu}
+              onImportEmail={handleImportEmailFromContextMenu}
               onRefreshMailboxes={handleRefreshMailboxes}
               onCompose={() => {
                 setComposerMode('compose');
@@ -1688,21 +1977,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">
+          <div className={cn("flex flex-1 min-h-0", isHorizontalMailLayout && "md:flex-col")}>
-          {/* Email List - full width on mobile, fixed width on tablet/desktop */}
+          {/* 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",
+              !isHorizontalMailLayout && (shouldHideViewerPane ? "md:flex-1 md:border-r-0" : "md:flex-shrink-0"),
-              "md:shadow-sm",
+              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
@@ -2011,7 +2309,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)}
@@ -2019,17 +2317,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 */}
@@ -2055,6 +2365,9 @@ export default function Home() {
                     htmlBody: selectedEmail.bodyValues?.[selectedEmail.htmlBody?.[0]?.partId || '']?.value || undefined,
                     receivedAt: selectedEmail.receivedAt,
                     attachments: selectedEmail.attachments,
+                    messageId: selectedEmail.messageId,
+                    inReplyTo: selectedEmail.inReplyTo,
+                    references: selectedEmail.references,
                   } : undefined)}
                   initialDraftText={composerDraftText}
                   initialData={pendingDraft}

app/[locale]/settings/page.tsx

@@ -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,
@@ -31,9 +32,11 @@ import {
   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';
@@ -62,6 +65,9 @@ import { ThemesSettings } from '@/components/settings/themes-settings';
 import { PluginsSettings } from '@/components/settings/plugins-settings';
 import { useAuthStore, redirectToLogin } from '@/stores/auth-store';
 import { useEmailStore } from '@/stores/email-store';
+import { 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';
@@ -105,7 +111,6 @@ interface TabDef {
   label: string;
   icon: LucideIcon;
   group: TabGroup;
-  experimental?: boolean;
 }
 
 const tabIcons: Record<Tab, LucideIcon> = {
@@ -137,6 +142,176 @@ 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'],
+  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',
+  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 +345,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 +464,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;
   }
@@ -255,8 +588,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('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, experimental: true }] : []),
+    ...(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 +602,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 +638,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 = () => (
@@ -321,7 +683,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" />
@@ -330,9 +692,7 @@ export default function SettingsPage() {
           </div>
 
           <div className="flex-1 overflow-y-auto p-4">
-            <div className="bg-card border border-border rounded-lg p-4">
+            {renderTabContent()}
-              {renderTabContent()}
-            </div>
           </div>
 
           <NavigationRail
@@ -365,8 +725,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">
@@ -376,23 +764,29 @@ export default function SettingsPage() {
                 </div>
                 {group.items.map((tab) => {
                   const Icon = tab.icon;
+                  const subs = subResultsForTab(tab.id);
                   return (
-                    <button
+                    <div key={tab.id}>
-                      key={tab.id}
+                      <button
-                      onClick={() => handleTabSelect(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"
+                        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">
+                        <span className="flex items-center gap-3">
-                        <Icon className="w-4 h-4 text-muted-foreground" />
+                          <Icon className="w-4 h-4 text-muted-foreground" />
-                        {tab.label}
+                          {tab.label}
-                        {tab.experimental && (
+                        </span>
-                          <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-warning/15 text-warning">
+                        <ChevronRight className="w-4 h-4 text-muted-foreground" />
-                            Experimental
+                      </button>
-                          </span>
+                      {subs.map((sub) => (
-                        )}
+                        <button
-                      </span>
+                          key={`${tab.id}:${sub.label}`}
-                      <ChevronRight className="w-4 h-4 text-muted-foreground" />
+                          onClick={() => handleSubResultSelect(tab.id, sub)}
-                    </button>
+                          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>
@@ -463,8 +857,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">
@@ -474,28 +896,34 @@ export default function SettingsPage() {
                 </div>
                 {group.items.map((tab) => {
                   const Icon = tab.icon;
+                  const subs = subResultsForTab(tab.id);
                   return (
-                    <button
+                    <div key={tab.id}>
-                      key={tab.id}
+                      <button
-                      onClick={() => setActiveTab(tab.id)}
+                        onClick={() => setActiveTab(tab.id)}
-                      className={cn(
+                        className={cn(
-                        'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
+                          'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
-                        effectiveActiveTab === tab.id
+                          effectiveActiveTab === tab.id
-                          ? 'bg-accent text-accent-foreground font-medium'
+                            ? 'bg-accent text-accent-foreground font-medium'
-                          : 'hover:bg-muted text-foreground'
+                            : 'hover:bg-muted text-foreground'
-                      )}
+                        )}
-                    >
+                      >
-                      <Icon className={cn(
+                        <Icon className={cn(
-                        'w-4 h-4 shrink-0',
+                          'w-4 h-4 shrink-0',
-                        effectiveActiveTab === tab.id ? 'text-accent-foreground' : 'text-muted-foreground'
+                          effectiveActiveTab === tab.id ? 'text-accent-foreground' : 'text-muted-foreground'
-                      )} />
+                        )} />
-                      {tab.label}
+                        {tab.label}
-                      {tab.experimental && (
+                      </button>
-                        <span className="ml-auto text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-warning/15 text-warning shrink-0">
+                      {subs.map((sub) => (
-                          Experimental
+                        <button
-                        </span>
+                          key={`${tab.id}:${sub.label}`}
-                      )}
+                          onClick={() => handleSubResultSelect(tab.id, sub)}
-                    </button>
+                          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>
@@ -515,17 +943,8 @@ export default function SettingsPage() {
       />
 
       <div className="flex-1 overflow-y-auto">
-        <div className="max-w-3xl mx-auto p-8">
+        <div className="max-w-3xl mx-auto px-6 py-6">
-          <div className="mb-6">
+          {renderTabContent()}
-            <div className="flex items-center gap-2.5 mb-2">
-              <SettingsIcon className="w-6 h-6 text-muted-foreground" />
-              <h1 className="text-2xl font-semibold text-foreground">{t('title')}</h1>
-            </div>
-          </div>
-
-          <div className="bg-card border border-border rounded-lg p-6">
-            {renderTabContent()}
-          </div>
         </div>
       </div>
       </>

app/admin/_tabs/_jmap-servers-section.tsx

@@ -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>
+  );
+}

app/admin/_tabs/auth.tsx

@@ -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>
+  );
+}

app/admin/_tabs/branding.tsx

@@ -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>
+  );
+}

app/admin/_tabs/dashboard.tsx

@@ -0,0 +1,212 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { SettingsSection, SettingItem, ToggleSwitch } from '@/components/settings/settings-section';
+import type { AuditEntry } from '@/lib/admin/types';
+import { apiFetch } from '@/lib/browser-navigation';
+
+interface AdminStatus {
+  enabled: boolean;
+  authenticated: boolean;
+  lastLogin: string | null;
+  passwordChangedAt: string | null;
+}
+
+interface ConfigData {
+  appName?: string;
+  jmapServerUrl?: string;
+  settingsSyncEnabled?: boolean;
+  stalwartFeaturesEnabled?: boolean;
+  oauthEnabled?: boolean;
+  devMode?: boolean;
+}
+
+export 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);
+}

app/admin/_tabs/logs.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { RefreshCw } from 'lucide-react';
+import type { AuditEntry } from '@/lib/admin/types';
+import { apiFetch } from '@/lib/browser-navigation';
+
+export function LogsTab() {
+  const [entries, setEntries] = useState<AuditEntry[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const [actionFilter, setActionFilter] = useState('');
+  const limit = 50;
+
+  const fetchLogs = useCallback(async () => {
+    setLoading(true);
+    const params = new URLSearchParams({ page: String(page), limit: String(limit) });
+    if (actionFilter) params.set('action', actionFilter);
+
+    const res = await apiFetch(`/api/admin/audit?${params}`);
+    if (res.ok) {
+      const data = await res.json();
+      setEntries(data.entries || []);
+      setTotal(data.total || 0);
+    }
+    setLoading(false);
+  }, [page, actionFilter]);
+
+  useEffect(() => { fetchLogs(); }, [fetchLogs]);
+
+  const totalPages = Math.max(1, Math.ceil(total / limit));
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h1 className="text-2xl font-semibold text-foreground">Audit Log</h1>
+          <p className="text-sm text-muted-foreground mt-1">{total} total entries</p>
+        </div>
+        <button
+          onClick={fetchLogs}
+          className="inline-flex items-center gap-2 h-9 px-3 rounded-md border border-input bg-background text-sm text-foreground hover:bg-accent transition-colors"
+        >
+          <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+          Refresh
+        </button>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <select
+          value={actionFilter}
+          onChange={(e) => { setActionFilter(e.target.value); setPage(1); }}
+          className="h-8 w-full sm:w-auto rounded-md border border-input bg-background px-2.5 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <option value="">All actions</option>
+          <option value="admin.login">Login</option>
+          <option value="admin.logout">Logout</option>
+          <option value="admin.login_failed">Login Failed</option>
+          <option value="admin.login_blocked">Login Blocked</option>
+          <option value="admin.change-password">Password Change</option>
+          <option value="config.update">Config Update</option>
+          <option value="config.revert">Config Revert</option>
+          <option value="policy.update">Policy Update</option>
+        </select>
+      </div>
+
+      <div className="sm:hidden space-y-2">
+        {loading && entries.length === 0 ? (
+          <div className="rounded-lg border border-border px-4 py-8 text-center text-sm text-muted-foreground">Loading...</div>
+        ) : entries.length === 0 ? (
+          <div className="rounded-lg border border-border px-4 py-8 text-center text-sm text-muted-foreground">No entries found</div>
+        ) : (
+          entries.map((entry, i) => (
+            <div key={i} className="rounded-lg border border-border p-3 space-y-1.5">
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-xs font-mono px-2 py-0.5 rounded bg-muted text-muted-foreground truncate">
+                  {entry.action}
+                </span>
+                <span className="text-[11px] text-muted-foreground whitespace-nowrap">
+                  {new Date(entry.ts).toLocaleString()}
+                </span>
+              </div>
+              <div className="text-xs text-foreground break-words">
+                {formatDetail(entry.detail)}
+              </div>
+              <div className="text-[11px] text-muted-foreground font-mono">
+                {entry.ip}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      <div className="hidden sm:block border border-border rounded-lg overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-border bg-muted/30">
+              <th className="text-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);
+}

app/admin/_tabs/marketplace.tsx

@@ -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>
+  );
+}

app/admin/_tabs/plugin-config-panel.tsx

@@ -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>
+  );
+}

app/admin/_tabs/plugins.tsx

@@ -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>
+  );
+}

app/admin/_tabs/policy.tsx

@@ -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>
+  );
+}

app/admin/_tabs/settings.tsx

@@ -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>
+  );
+}

app/admin/_tabs/telemetry.tsx

@@ -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>
+  );
+}

app/admin/_tabs/themes.tsx

@@ -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>
+  );
+}

app/admin/_tabs/version.tsx

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

app/admin/auth/page.tsx

@@ -1,383 +1,5 @@
-'use client';
+import { redirect } from 'next/navigation';
 
-import { useEffect, useState } from 'react';
+export default function Page() {
-import { Save, Loader2, RotateCcw, Sparkles } from 'lucide-react';
+  redirect('/admin?tab=auth');
-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 items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-semibold text-foreground">Authentication</h1>
-          <p className="text-sm text-muted-foreground mt-1">OAuth, SSO, and session configuration</p>
-        </div>
-        {hasEdits && (
-          <button
-            onClick={handleSave}
-            disabled={saving}
-            className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
-          >
-            {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
-            Save changes
-          </button>
-        )}
-      </div>
-
-      {message && (
-        <div className={`text-sm rounded-md px-3 py-2 ${message.type === 'success' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300' : 'bg-destructive/10 text-destructive'}`}>
-          {message.text}
-        </div>
-      )}
-
-      {/* Auto-setup */}
-      <div className="rounded-lg border border-primary/30 bg-primary/5 p-4">
-        <div className="flex items-start justify-between gap-4">
-          <div className="min-w-0">
-            <div className="flex items-center gap-2">
-              <Sparkles className="w-4 h-4 text-primary shrink-0" />
-              <h3 className="text-sm font-medium text-foreground">Auto-configure OAuth (Stalwart)</h3>
-            </div>
-            <p className="text-xs text-muted-foreground mt-1">
-              Registers an OAuth client on the connected Stalwart server, generates a client secret, and saves the settings here.
-              Requires your Stalwart account to have admin permissions.
-            </p>
-          </div>
-          <button
-            onClick={openSetupDialog}
-            disabled={setupRunning}
-            className="shrink-0 inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
-          >
-            {setupRunning ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
-            {setupRunning ? 'Configuring…' : 'Set up automagically'}
-          </button>
-        </div>
-      </div>
-
-      {/* Auto-setup dialog */}
-      {setupOpen && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="oauth-setup-title"
-          onClick={(e) => { if (e.target === e.currentTarget && !setupRunning) setSetupOpen(false); }}
-        >
-          <div className="w-full max-w-md rounded-lg border border-border bg-background shadow-xl">
-            <div className="px-5 py-4 border-b border-border">
-              <h3 id="oauth-setup-title" className="text-base font-medium text-foreground">Auto-configure OAuth</h3>
-              <p className="text-xs text-muted-foreground mt-1">
-                Verify the URLs below before continuing. The webmail and Stalwart can live on different domains.
-              </p>
-            </div>
-            <div className="px-5 py-4 space-y-4">
-              <div>
-                <label htmlFor="setup-origin" className="block text-xs font-medium text-foreground mb-1">
-                  Webmail origin
-                </label>
-                <input
-                  id="setup-origin"
-                  type="url"
-                  value={setupOrigin}
-                  onChange={(e) => setSetupOrigin(e.target.value)}
-                  disabled={setupRunning}
-                  placeholder="https://webmail.example.com"
-                  className="w-full h-9 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                />
-                <p className="text-[11px] text-muted-foreground mt-1">
-                  Used to register redirect URIs (one per locale: <code>{setupOrigin.trim().replace(/\/+$/, '') || 'https://…'}/&lt;locale&gt;/auth/callback</code>) on Stalwart.
-                </p>
-                {!setupOriginValid && setupOrigin.length > 0 && (
-                  <p className="text-[11px] text-destructive mt-1">Must be like https://host with no path.</p>
-                )}
-              </div>
-              <div>
-                <label htmlFor="setup-issuer" className="block text-xs font-medium text-foreground mb-1">
-                  Stalwart issuer URL
-                </label>
-                <input
-                  id="setup-issuer"
-                  type="url"
-                  value={setupIssuer}
-                  onChange={(e) => setSetupIssuer(e.target.value)}
-                  disabled={setupRunning}
-                  placeholder="https://mail.example.com"
-                  className="w-full h-9 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                />
-                <p className="text-[11px] text-muted-foreground mt-1">
-                  Where Stalwart serves <code>/.well-known/oauth-authorization-server</code>. Saved as <code>OAUTH_ISSUER_URL</code>. Pre-filled from your JMAP server URL.
-                </p>
-                {!setupIssuerValid && setupIssuer.length > 0 && (
-                  <p className="text-[11px] text-destructive mt-1">Must be like https://host with no path.</p>
-                )}
-              </div>
-              <label className="inline-flex items-center gap-2 text-xs text-foreground select-none cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={setupOauthOnly}
-                  onChange={(e) => setSetupOauthOnly(e.target.checked)}
-                  className="h-3.5 w-3.5 rounded border-input"
-                  disabled={setupRunning}
-                />
-                Also enable “OAuth only” (hide password login)
-              </label>
-            </div>
-            <div className="px-5 py-3 border-t border-border flex items-center justify-end gap-2 bg-muted/30 rounded-b-lg">
-              <button
-                onClick={() => setSetupOpen(false)}
-                disabled={setupRunning}
-                className="h-9 px-3 rounded-md border border-input bg-background text-sm text-foreground hover:bg-muted disabled:opacity-50 transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleAutoSetup}
-                disabled={setupRunning || !setupOriginValid || !setupIssuerValid}
-                className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
-              >
-                {setupRunning ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
-                {setupRunning ? 'Configuring…' : 'Configure'}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* OAuth */}
-      <Section title="OAuth / OpenID Connect">
-        <Toggle label="OAuth Enabled" configKey="oauthEnabled" value={currentValue('oauthEnabled') as boolean} source={config.oauthEnabled?.source} onChange={handleChange} onRevert={handleRevert} />
-        <Toggle label="OAuth Only" description="Hide password login form when enabled" configKey="oauthOnly" value={currentValue('oauthOnly') as boolean} source={config.oauthOnly?.source} onChange={handleChange} onRevert={handleRevert} />
-        <Text label="OAuth Client ID" configKey="oauthClientId" value={currentValue('oauthClientId') as string} source={config.oauthClientId?.source} onChange={handleChange} onRevert={handleRevert} />
-        <Text label="OAuth Client Secret" configKey="oauthClientSecret" value={currentValue('oauthClientSecret') as string} source={config.oauthClientSecret?.source} onChange={handleChange} onRevert={handleRevert} type="password" />
-        <Text label="OAuth Issuer URL" configKey="oauthIssuerUrl" value={currentValue('oauthIssuerUrl') as string} source={config.oauthIssuerUrl?.source} onChange={handleChange} onRevert={handleRevert} placeholder="https://auth.example.com" />
-      </Section>
-
-      {/* SSO */}
-      <Section title="Single Sign-On">
-        <Toggle label="Auto SSO" description="Automatically redirect to SSO provider on load" configKey="autoSsoEnabled" value={currentValue('autoSsoEnabled') as boolean} source={config.autoSsoEnabled?.source} onChange={handleChange} onRevert={handleRevert} />
-      </Section>
-
-      {/* Session & Security */}
-      <Section title="Session & Security">
-        <Select label="Cookie SameSite" configKey="cookieSameSite" value={currentValue('cookieSameSite') as string} source={config.cookieSameSite?.source} options={['lax', 'strict', 'none']} onChange={handleChange} onRevert={handleRevert} />
-        <Text label="Allowed Frame Ancestors" configKey="allowedFrameAncestors" value={currentValue('allowedFrameAncestors') as string} source={config.allowedFrameAncestors?.source} onChange={handleChange} onRevert={handleRevert} placeholder="'none' or https://..." />
-        <Text label="Parent Origin" description="For embedded mode communication" configKey="parentOrigin" value={currentValue('parentOrigin') as string} source={config.parentOrigin?.source} onChange={handleChange} onRevert={handleRevert} />
-      </Section>
-    </div>
-  );
-}
-
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <div className="border border-border rounded-lg">
-      <div className="px-4 py-3 border-b border-border bg-muted/30">
-        <h2 className="text-sm font-medium text-foreground">{title}</h2>
-      </div>
-      <div className="divide-y divide-border">{children}</div>
-    </div>
-  );
-}
-
-function SourceBadge({ source }: { source?: string }) {
-  if (!source || source === 'default') return null;
-  return (
-    <span className={`text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded ${source === 'admin' ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}`}>
-      {source}
-    </span>
-  );
-}
-
-function Text({ label, description, configKey, value, source, onChange, onRevert, placeholder, type = 'text' }: {
-  label: string; description?: string; configKey: string; value: string; source?: string;
-  onChange: (k: string, v: unknown) => void; onRevert: (k: string) => void; placeholder?: string; type?: string;
-}) {
-  return (
-    <div className="px-4 py-3 flex items-center justify-between gap-4">
-      <div className="min-w-0">
-        <div className="flex items-center gap-2">
-          <span className="text-sm text-foreground">{label}</span>
-          <SourceBadge source={source} />
-        </div>
-        {description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>}
-      </div>
-      <div className="flex items-center gap-2">
-        <input type={type} value={value ?? ''} onChange={(e) => onChange(configKey, e.target.value)} placeholder={placeholder}
-          className="h-8 w-64 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
-        {source === 'admin' && (
-          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert"><RotateCcw className="w-3.5 h-3.5" /></button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function Toggle({ label, description, configKey, value, source, onChange, onRevert }: {
-  label: string; description?: string; configKey: string; value: boolean; source?: string;
-  onChange: (k: string, v: unknown) => void; onRevert: (k: string) => void;
-}) {
-  return (
-    <div className="px-4 py-3 flex items-center justify-between gap-4">
-      <div className="min-w-0">
-        <div className="flex items-center gap-2">
-          <span className="text-sm text-foreground">{label}</span>
-          <SourceBadge source={source} />
-        </div>
-        {description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>}
-      </div>
-      <div className="flex items-center gap-2">
-        <button onClick={() => onChange(configKey, !value)}
-          className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${value ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
-          <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${value ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
-        </button>
-        {source === 'admin' && (
-          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert"><RotateCcw className="w-3.5 h-3.5" /></button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function Select({ label, configKey, value, source, options, onChange, onRevert }: {
-  label: string; configKey: string; value: string; source?: string; options: string[];
-  onChange: (k: string, v: unknown) => void; onRevert: (k: string) => void;
-}) {
-  return (
-    <div className="px-4 py-3 flex items-center justify-between gap-4">
-      <div className="flex items-center gap-2">
-        <span className="text-sm text-foreground">{label}</span>
-        <SourceBadge source={source} />
-      </div>
-      <div className="flex items-center gap-2">
-        <select value={value ?? ''} onChange={(e) => onChange(configKey, e.target.value)}
-          className="h-8 rounded-md border border-input bg-background px-2.5 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
-          {options.map(o => <option key={o} value={o}>{o}</option>)}
-        </select>
-        {source === 'admin' && (
-          <button onClick={() => onRevert(configKey)} className="text-muted-foreground hover:text-foreground" title="Revert"><RotateCcw className="w-3.5 h-3.5" /></button>
-        )}
-      </div>
-    </div>
-  );
 }

app/admin/branding/page.tsx

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

app/admin/layout.tsx

@@ -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,
@@ -14,49 +15,61 @@ import {
   KeyRound,
   Puzzle,
   SwatchBook,
+  Activity,
+  Package,
   Mail,
   Calendar,
   BookUser,
   HardDrive,
-  ArrowLeft,
   Store,
+  Menu,
+  X,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useConfig } from '@/hooks/use-config';
 import { useThemeStore } from '@/stores/theme-store';
 import { getActiveAccountSlotHeaders } from '@/lib/auth/active-account-slot';
 
-import { useAuthStore } from '@/stores/auth-store';
+import { useUpdateStore, selectHasUpdate } from '@/stores/update-store';
 import { apiFetch } 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 },
+      { tab: 'settings', label: 'Settings', icon: Settings },
-      { href: '/admin/branding', label: 'Branding', icon: Palette },
+      { tab: 'branding', label: 'Branding', icon: Palette },
-      { href: '/admin/auth', label: 'Authentication', icon: Shield },
+      { tab: 'auth', label: 'Authentication', icon: Shield },
-      { href: '/admin/policy', label: 'Policy', icon: Scale },
+      { tab: 'policy', label: 'Policy', icon: Scale },
     ],
   },
   {
     label: 'Extensions',
     items: [
-      { href: '/admin/plugins', label: 'Plugins', icon: Puzzle },
+      { tab: 'plugins', label: 'Plugins', icon: Puzzle },
-      { href: '/admin/themes', label: 'Themes', icon: SwatchBook },
+      { tab: 'themes', label: 'Themes', icon: SwatchBook },
-      { href: '/admin/marketplace', label: 'Marketplace', icon: Store },
+      { tab: 'marketplace', label: 'Marketplace', icon: Store },
     ],
   },
   {
     label: 'System',
     items: [
-      { 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 },
     ],
   },
 ];
@@ -64,15 +77,41 @@ 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);
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
   const { appLogoLightUrl, appLogoDarkUrl, loginLogoLightUrl, loginLogoDarkUrl } = useConfig();
   const resolvedTheme = useThemeStore((s) => s.resolvedTheme);
   const logoUrl = resolvedTheme === 'dark'
     ? (appLogoDarkUrl || appLogoLightUrl || loginLogoDarkUrl)
     : (appLogoLightUrl || appLogoDarkUrl || loginLogoLightUrl);
 
+  // Match the navigation rail: red for security/deprecated, amber for normal.
+  const hasUpdate = useUpdateStore(selectHasUpdate);
+  const updateSeverity = useUpdateStore((s) => s.status?.severity);
+  const startUpdatePolling = useUpdateStore((s) => s.startPolling);
+  useEffect(() => { startUpdatePolling(); }, [startUpdatePolling]);
+  const updateImportant = updateSeverity === 'security' || updateSeverity === 'deprecated';
+
+  useEffect(() => {
+    setMobileNavOpen(false);
+  }, [pathname]);
+
+  useEffect(() => {
+    if (!mobileNavOpen) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, [mobileNavOpen]);
+
   useEffect(() => {
     if (pathname === '/admin/login') return;
     let cancelled = false;
@@ -138,10 +177,97 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
     return <>{children}</>;
   }
 
+  const navContent = (
+    <>
+      <div className="flex-1 overflow-y-auto py-2">
+        <div className="px-2 space-y-0.5">
+          {NAV_GROUPS.map((group, groupIndex) => (
+            <div key={group.label}>
+              {groupIndex > 0 && <div className="mx-1 my-2 border-t border-border" />}
+              <div className="px-3 pt-2.5 pb-1">
+                <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                  {group.label}
+                </span>
+              </div>
+              {group.items.map(({ tab, label, icon: Icon }) => {
+                const active = activeTab === tab;
+                const showDot = tab === 'version' && hasUpdate;
+                const handleClick = () => {
+                  setActiveTab(tab);
+                  // From a dynamic route (/admin/plugins/[id], /admin/marketplace/[slug])
+                  // we still need a real navigation back to /admin so the page renders.
+                  if (pathname !== '/admin') router.push('/admin');
+                };
+                return (
+                  <button
+                    key={tab}
+                    type="button"
+                    onClick={handleClick}
+                    className={cn(
+                      'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
+                      active
+                        ? 'bg-accent text-accent-foreground font-medium'
+                        : 'hover:bg-muted text-foreground'
+                    )}
+                  >
+                    <span className="relative shrink-0">
+                      <Icon className={cn(
+                        'w-4 h-4',
+                        active ? 'text-accent-foreground' : 'text-muted-foreground'
+                      )} />
+                      {showDot && (
+                        <span
+                          className={cn(
+                            'absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full ring-2',
+                            active ? 'ring-accent' : 'ring-background',
+                            updateImportant ? 'bg-red-500' : 'bg-amber-500',
+                          )}
+                          aria-label={updateImportant ? 'Important update available' : 'Update available'}
+                        />
+                      )}
+                    </span>
+                    {label}
+                  </button>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="px-2 py-2 border-t border-border space-y-0.5 shrink-0">
+        {!isStalwartAdmin && (
+          <Link
+            href="/admin/change-password"
+            className={cn(
+              'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
+              pathname === '/admin/change-password'
+                ? 'bg-accent text-accent-foreground font-medium'
+                : 'hover:bg-muted text-foreground'
+            )}
+          >
+            <KeyRound className={cn(
+              'w-4 h-4 shrink-0',
+              pathname === '/admin/change-password' ? 'text-accent-foreground' : 'text-muted-foreground'
+            )} />
+            Change Password
+          </Link>
+        )}
+        <button
+          onClick={handleLogout}
+          className="w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5 hover:bg-muted text-foreground"
+        >
+          <LogOut className="w-4 h-4 shrink-0 text-muted-foreground" />
+          Sign out
+        </button>
+      </div>
+    </>
+  );
+
   return (
     <div className="min-h-screen flex bg-background">
-      {/* Slim webmail nav rail */}
+      {/* Slim webmail nav rail (desktop only) */}
-      <nav className="w-14 bg-secondary flex flex-col items-center py-3 gap-2 border-r border-border sticky top-0 h-screen shrink-0">
+      <nav className="hidden md:flex w-14 bg-secondary flex-col items-center py-3 gap-2 border-r border-border sticky top-0 h-screen shrink-0">
         {logoUrl ? (
           <img src={logoUrl} alt="" className="w-7 h-7 object-contain mb-2" />
         ) : (
@@ -189,8 +315,8 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
         </div>
       </nav>
 
-      {/* Admin Sidebar */}
+      {/* Admin Sidebar (desktop only) */}
-      <aside className="w-60 border-r border-border bg-secondary flex flex-col sticky top-0 h-screen">
+      <aside className="hidden md:flex w-60 border-r border-border bg-secondary flex-col sticky top-0 h-screen">
         <div className="h-14 flex items-center px-4 border-b border-border shrink-0">
           {logoUrl ? (
             <img src={logoUrl} alt="" className="w-5 h-5 object-contain mr-2" />
@@ -199,74 +325,71 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
           )}
           <span className="font-semibold text-sm text-foreground">Admin Panel</span>
         </div>
+        {navContent}
+      </aside>
 
-        <div className="flex-1 overflow-y-auto py-2">
+      {/* Mobile drawer overlay */}
-          <div className="px-2 space-y-0.5">
+      {mobileNavOpen && (
-            {NAV_GROUPS.map((group, groupIndex) => (
+        <div
-              <div key={group.label}>
+          className="md:hidden fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"
-                {groupIndex > 0 && <div className="mx-1 my-2 border-t border-border" />}
+          onClick={() => setMobileNavOpen(false)}
-                <div className="px-3 pt-2.5 pb-1">
+          aria-hidden="true"
-                  <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+        />
-                    {group.label}
+      )}
-                  </span>
+
-                </div>
+      {/* Mobile drawer */}
-                {group.items.map(({ href, label, icon: Icon }) => {
+      <aside
-                  const active = href === '/admin' ? pathname === '/admin' : pathname.startsWith(href);
+        className={cn(
-                  return (
+          'md:hidden fixed inset-y-0 left-0 z-50 w-72 max-w-[85vw] border-r border-border bg-secondary flex flex-col transition-transform duration-200 ease-out',
-                    <Link
+          mobileNavOpen ? 'translate-x-0' : '-translate-x-full'
-                      key={href}
+        )}
-                      href={href}
+        aria-label="Admin navigation"
-                      className={cn(
+        aria-hidden={!mobileNavOpen}
-                        'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
+      >
-                        active
+        <div className="h-14 flex items-center justify-between px-3 border-b border-border shrink-0">
-                          ? 'bg-accent text-accent-foreground font-medium'
+          <div className="flex items-center min-w-0">
-                          : 'hover:bg-muted text-foreground'
+            {logoUrl ? (
-                      )}
+              <img src={logoUrl} alt="" className="w-5 h-5 object-contain mr-2" />
-                    >
+            ) : (
-                      <Icon className={cn(
+              <Shield className="w-5 h-5 text-primary mr-2" />
-                        'w-4 h-4 shrink-0',
+            )}
-                        active ? 'text-accent-foreground' : 'text-muted-foreground'
+            <span className="font-semibold text-sm text-foreground truncate">Admin Panel</span>
-                      )} />
-                      {label}
-                    </Link>
-                  );
-                })}
-              </div>
-            ))}
           </div>
-        </div>
-
-        <div className="px-2 py-2 border-t border-border space-y-0.5 shrink-0">
-          {!isStalwartAdmin && (
-            <Link
-              href="/admin/change-password"
-              className={cn(
-                'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
-                pathname === '/admin/change-password'
-                  ? 'bg-accent text-accent-foreground font-medium'
-                  : 'hover:bg-muted text-foreground'
-              )}
-            >
-              <KeyRound className={cn(
-                'w-4 h-4 shrink-0',
-              pathname === '/admin/change-password' ? 'text-accent-foreground' : 'text-muted-foreground'
-            )} />
-            Change Password
-          </Link>
-          )}
           <button
-            onClick={handleLogout}
+            type="button"
-            className="w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5 hover:bg-muted text-foreground"
+            onClick={() => setMobileNavOpen(false)}
+            className="flex items-center justify-center w-9 h-9 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+            aria-label="Close navigation"
           >
-            <LogOut className="w-4 h-4 shrink-0 text-muted-foreground" />
+            <X className="w-5 h-5" />
-            Sign out
           </button>
         </div>
+        {navContent}
       </aside>
 
       {/* Main content */}
-      <main className="flex-1 overflow-auto">
+      <main className="flex-1 min-w-0 overflow-x-hidden">
-        <div className="max-w-4xl mx-auto p-6">
+        {/* Mobile header */}
+        <div className="md:hidden sticky top-0 z-30 h-14 flex items-center gap-2 px-3 border-b border-border bg-background">
+          <button
+            type="button"
+            onClick={() => setMobileNavOpen(true)}
+            className="flex items-center justify-center w-9 h-9 rounded-md text-foreground hover:bg-muted transition-colors"
+            aria-label="Open navigation"
+          >
+            <Menu className="w-5 h-5" />
+          </button>
+          <div className="flex items-center min-w-0">
+            {logoUrl ? (
+              <img src={logoUrl} alt="" className="w-5 h-5 object-contain mr-2" />
+            ) : (
+              <Shield className="w-5 h-5 text-primary mr-2" />
+            )}
+            <span className="font-semibold text-sm text-foreground truncate">Admin Panel</span>
+          </div>
+        </div>
+
+        <div className="max-w-4xl mx-auto p-4 md:p-6 pb-[calc(4rem+env(safe-area-inset-bottom))] md:pb-6">
           {authError ? (
             <div className="rounded-lg border border-destructive/40 bg-destructive/10 p-4 text-sm text-destructive">
               <p className="font-medium">Admin authentication failed</p>
@@ -281,6 +404,64 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
           ) : null}
         </div>
       </main>
+
+      {/* Mobile bottom nav (main webmail nav) */}
+      <nav
+        className="md:hidden fixed inset-x-0 bottom-0 z-30 flex items-center bg-background border-t border-border pb-[env(safe-area-inset-bottom)]"
+        aria-label="Main navigation"
+      >
+        <a
+          href="/"
+          className="flex flex-col items-center justify-center gap-1 py-2 px-1 min-h-[44px] grow shrink-0 basis-[64px] transition-colors duration-150 text-muted-foreground hover:text-foreground"
+          title="Mail"
+        >
+          <Mail className="w-5 h-5" />
+          <span className="text-[10px] font-medium leading-tight truncate max-w-full">Mail</span>
+        </a>
+        <a
+          href="/calendar"
+          className="flex flex-col items-center justify-center gap-1 py-2 px-1 min-h-[44px] grow shrink-0 basis-[64px] transition-colors duration-150 text-muted-foreground hover:text-foreground"
+          title="Calendar"
+        >
+          <Calendar className="w-5 h-5" />
+          <span className="text-[10px] font-medium leading-tight truncate max-w-full">Calendar</span>
+        </a>
+        <a
+          href="/contacts"
+          className="flex flex-col items-center justify-center gap-1 py-2 px-1 min-h-[44px] grow shrink-0 basis-[64px] transition-colors duration-150 text-muted-foreground hover:text-foreground"
+          title="Contacts"
+        >
+          <BookUser className="w-5 h-5" />
+          <span className="text-[10px] font-medium leading-tight truncate max-w-full">Contacts</span>
+        </a>
+        <a
+          href="/files"
+          className="flex flex-col items-center justify-center gap-1 py-2 px-1 min-h-[44px] grow shrink-0 basis-[64px] transition-colors duration-150 text-muted-foreground hover:text-foreground"
+          title="Files"
+        >
+          <HardDrive className="w-5 h-5" />
+          <span className="text-[10px] font-medium leading-tight truncate max-w-full">Files</span>
+        </a>
+        <div
+          className="flex flex-col items-center justify-center gap-1 py-2 px-1 min-h-[44px] grow shrink-0 basis-[64px] text-primary"
+          title="Admin"
+          aria-current="page"
+        >
+          <div className="relative">
+            <Shield className="w-5 h-5" />
+            <span className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-4 h-0.5 rounded-full bg-primary" />
+          </div>
+          <span className="text-[10px] font-medium leading-tight truncate max-w-full">Admin</span>
+        </div>
+        <a
+          href="/settings"
+          className="flex flex-col items-center justify-center gap-1 py-2 px-1 min-h-[44px] grow shrink-0 basis-[64px] transition-colors duration-150 text-muted-foreground hover:text-foreground"
+          title="Settings"
+        >
+          <Settings className="w-5 h-5" />
+          <span className="text-[10px] font-medium leading-tight truncate max-w-full">Settings</span>
+        </a>
+      </nav>
     </div>
   );
 }

app/admin/login/page.tsx

@@ -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 ? (
-            {logoUrl ? (
+            <img src={logoUrl} alt="" className="h-12 object-contain mb-4" />
-              <img src={logoUrl} alt="" className="w-8 h-8 object-contain" />
+          ) : (
-            ) : (
+            <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>
-          </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>

app/admin/logs/page.tsx

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

app/admin/marketplace/[slug]/page.tsx

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

app/admin/marketplace/page.tsx

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

app/admin/page.tsx

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

app/admin/plugins/[id]/page.tsx

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

app/admin/plugins/page.tsx

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

app/admin/policy/page.tsx

@@ -1,219 +1,5 @@
-'use client';
+import { redirect } from 'next/navigation';
 
-import { useEffect, useState } from 'react';
+export default function Page() {
-import { Save, Loader2, Lock } from 'lucide-react';
+  redirect('/admin?tab=policy');
-import type { SettingsPolicy, FeatureGates } from '@/lib/admin/types';
-import { DEFAULT_FEATURE_GATES, DEFAULT_POLICY } from '@/lib/admin/types';
-import { apiFetch } from '@/lib/browser-navigation';
-
-// Feature gates managed on their own admin pages (excluded from this list)
-const EXCLUDED_FEATURE_GATES: (keyof FeatureGates)[] = ['pluginsEnabled', 'pluginsUploadEnabled', 'themesEnabled', 'userThemesEnabled'];
-
-const FEATURE_GATE_LABELS: Partial<Record<keyof FeatureGates, { label: string; description: string }>> = {
-  sidebarAppsEnabled: { label: 'Sidebar Apps', description: 'Allow custom web apps in navigation rail' },
-  settingsExportEnabled: { label: 'Settings Export/Import', description: 'Allow users to export and import settings JSON' },
-  customKeywordsEnabled: { label: 'Custom Keywords', description: 'Allow user-created labels and tags' },
-  templatesEnabled: { label: 'Email Templates', description: 'Allow email template creation and library' },
-  calendarTasksEnabled: { label: 'Calendar Tasks', description: 'Show task panel in calendar view' },
-  smimeEnabled: { label: 'S/MIME', description: 'Enable certificate management and email signing' },
-  externalContentEnabled: { label: 'External Content', description: 'Allow users to choose external content loading policy' },
-  debugModeEnabled: { label: 'Debug Mode', description: 'Allow users to enable debug/diagnostic mode' },
-  folderIconsEnabled: { label: 'Folder Icons', description: 'Allow custom folder icon picker' },
-  hoverActionsConfigEnabled: { label: 'Hover Actions Config', description: 'Allow users to customize email hover actions' },
-  filesEnabled: { label: 'Files (WebDAV)', description: 'Enable file storage via WebDAV. WARNING: Large uploads can cause Stalwart/RocksDB instability. Not recommended for production.' },
-};
-
-const RESTRICTABLE_SETTINGS = [
-  { key: 'fontSize', label: 'Font Size', category: 'Appearance', type: 'enum', allowedValues: ['small', 'medium', 'large'] },
-  { key: 'density', label: 'Density', category: 'Appearance', type: 'enum', allowedValues: ['compact', 'regular', 'spacious'] },
-  { key: 'animationsEnabled', label: 'Animations', category: 'Appearance', type: 'boolean' },
-  { key: 'markAsReadDelay', label: 'Mark as Read Delay', category: 'Email', type: 'number' },
-  { key: 'deleteAction', label: 'Delete Action', category: 'Email', type: 'enum', allowedValues: ['trash', 'permanent'] },
-  { key: 'showPreview', label: 'Show Preview', category: 'Email', type: 'boolean' },
-  { key: 'mailLayout', label: 'Mail Layout', category: 'Email', type: 'enum', allowedValues: ['split', 'focus'] },
-  { key: 'emailsPerPage', label: 'Emails Per Page', category: 'Email', type: 'number' },
-  { key: 'externalContentPolicy', label: 'External Content Policy', category: 'Email', type: 'enum', allowedValues: ['allow', 'block', 'ask'] },
-  { key: 'sendConfirmation', label: 'Send Confirmation', category: 'Composer', type: 'boolean' },
-  { key: 'defaultReplyMode', label: 'Default Reply Mode', category: 'Composer', type: 'enum', allowedValues: ['reply', 'reply-all'] },
-  { key: 'autoSelectReplyIdentity', label: 'Auto-select Reply Identity', category: 'Composer', type: 'boolean' },
-  { key: 'plainTextMode', label: 'Plain Text Only', category: 'Composer', type: 'boolean' },
-  { key: 'sessionTimeout', label: 'Session Timeout', category: 'Privacy', type: 'number' },
-  { key: 'emailNotificationsEnabled', label: 'Email Notifications', category: 'Notifications', type: 'boolean' },
-  { key: 'calendarNotificationsEnabled', label: 'Calendar Notifications', category: 'Notifications', type: 'boolean' },
-  { key: 'debugMode', label: 'Debug Mode', category: 'Advanced', type: 'boolean' },
-];
-
-export default function AdminPolicyPage() {
-  const [policy, setPolicy] = useState<SettingsPolicy>({ ...DEFAULT_POLICY });
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
-  const [dirty, setDirty] = useState(false);
-
-  useEffect(() => { fetchPolicy(); }, []);
-
-  async function fetchPolicy() {
-    setLoading(true);
-    try {
-      const res = await apiFetch('/api/admin/policy');
-      if (res.ok) {
-        const data = await res.json();
-        setPolicy(data);
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  function toggleFeature(key: keyof FeatureGates) {
-    setPolicy(prev => ({
-      ...prev,
-      features: { ...prev.features, [key]: !prev.features[key] },
-    }));
-    setDirty(true);
-    setMessage(null);
-  }
-
-  function toggleLocked(settingKey: string) {
-    setPolicy(prev => {
-      const existing = prev.restrictions[settingKey] || {};
-      const newRestrictions = { ...prev.restrictions };
-      if (existing.locked) {
-        delete newRestrictions[settingKey];
-      } else {
-        newRestrictions[settingKey] = { ...existing, locked: true };
-      }
-      return { ...prev, restrictions: newRestrictions };
-    });
-    setDirty(true);
-    setMessage(null);
-  }
-
-  function toggleHidden(settingKey: string) {
-    setPolicy(prev => {
-      const existing = prev.restrictions[settingKey] || {};
-      const newRestrictions = { ...prev.restrictions };
-      newRestrictions[settingKey] = { ...existing, hidden: !existing.hidden };
-      if (!newRestrictions[settingKey].hidden && !newRestrictions[settingKey].locked) {
-        delete newRestrictions[settingKey];
-      }
-      return { ...prev, restrictions: newRestrictions };
-    });
-    setDirty(true);
-    setMessage(null);
-  }
-
-  async function handleSave() {
-    setSaving(true);
-    setMessage(null);
-
-    const res = await apiFetch('/api/admin/policy', {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(policy),
-    });
-
-    if (res.ok) {
-      setMessage({ type: 'success', text: 'Policy saved. Users will see changes on next login.' });
-      setDirty(false);
-    } else {
-      const data = await res.json();
-      setMessage({ type: 'error', text: data.error || 'Failed to save' });
-    }
-    setSaving(false);
-  }
-
-  if (loading) {
-    return <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">Loading...</div>;
-  }
-
-  const categories = [...new Set(RESTRICTABLE_SETTINGS.map(s => s.category))];
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-semibold text-foreground">User Policy</h1>
-          <p className="text-sm text-muted-foreground mt-1">Control which features and settings users can access</p>
-        </div>
-        {dirty && (
-          <button
-            onClick={handleSave}
-            disabled={saving}
-            className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
-          >
-            {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
-            Save policy
-          </button>
-        )}
-      </div>
-
-      {message && (
-        <div className={`text-sm rounded-md px-3 py-2 ${message.type === 'success' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300' : 'bg-destructive/10 text-destructive'}`}>
-          {message.text}
-        </div>
-      )}
-
-      {/* Feature Gates */}
-      <div className="border border-border rounded-lg">
-        <div className="px-4 py-3 border-b border-border bg-muted/30">
-          <h2 className="text-sm font-medium text-foreground">Feature Gates</h2>
-          <p className="text-xs text-muted-foreground mt-0.5">Toggle entire features on or off for all users. Plugin and theme gates are on their respective admin pages.</p>
-        </div>
-        <div className="divide-y divide-border">
-          {(Object.keys(DEFAULT_FEATURE_GATES) as (keyof FeatureGates)[])
-            .filter(key => !EXCLUDED_FEATURE_GATES.includes(key))
-            .map(key => {
-            const meta = FEATURE_GATE_LABELS[key];
-            if (!meta) return null;
-            const { label, description } = meta;
-            const enabled = policy.features[key];
-            return (
-              <div key={key} className="px-4 py-3 flex items-center justify-between gap-4">
-                <div>
-                  <span className="text-sm text-foreground">{label}</span>
-                  <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
-                </div>
-                <button onClick={() => toggleFeature(key)}
-                  className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${enabled ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
-                  <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${enabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
-                </button>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Setting Restrictions */}
-      {categories.map(category => (
-        <div key={category} className="border border-border rounded-lg">
-          <div className="px-4 py-3 border-b border-border bg-muted/30">
-            <h2 className="text-sm font-medium text-foreground">{category}</h2>
-          </div>
-          <div className="divide-y divide-border">
-            {RESTRICTABLE_SETTINGS.filter(s => s.category === category).map(setting => {
-              const restriction = policy.restrictions[setting.key] || {};
-              return (
-                <div key={setting.key} className="px-4 py-3 flex items-center justify-between gap-4">
-                  <span className="text-sm text-foreground">{setting.label}</span>
-                  <div className="flex items-center gap-3">
-                    <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer">
-                      <input type="checkbox" checked={!!restriction.locked} onChange={() => toggleLocked(setting.key)}
-                        className="rounded border-input" />
-                      <Lock className="w-3 h-3" /> Lock
-                    </label>
-                    <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer">
-                      <input type="checkbox" checked={!!restriction.hidden} onChange={() => toggleHidden(setting.key)}
-                        className="rounded border-input" />
-                      Hide
-                    </label>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
 }

app/admin/settings/page.tsx

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

app/admin/telemetry/page.tsx

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

app/admin/themes/page.tsx

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

app/admin/version/page.tsx

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

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

@@ -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 });
     }
 
@@ -53,11 +56,19 @@ export async function GET(
 
     const buffer = await readFile(resolved);
 
+    // SVG can carry inline <script> and event handlers that execute when the
+    // file is fetched as a top-level document. Defense in depth on top of
+    // admin-only upload: nosniff blocks MIME confusion, the CSP forces a
+    // sandboxed unique origin so any script in an SVG is inert and cannot
+    // touch app cookies or storage.
     return new NextResponse(buffer, {
       headers: {
         'Content-Type': contentType,
         'Cache-Control': 'public, max-age=3600, must-revalidate',
         'Content-Length': String(buffer.length),
+        'X-Content-Type-Options': 'nosniff',
+        'Content-Security-Policy':
+          "default-src 'none'; img-src 'self' data:; style-src 'unsafe-inline'; sandbox",
       },
     });
   } catch {

app/api/admin/branding/route.ts

@@ -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)) {
+    if (!existsSync(getBrandingDir())) {
-      await mkdir(BRANDING_DIR, { recursive: true });
+      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;

app/api/admin/config/route.ts

@@ -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)) {

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

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

app/api/admin/marketplace/route.ts

@@ -12,13 +12,14 @@ import {
 } from '@/lib/admin/plugin-registry';
 import {
   sanitizeFrameOrigins,
+  sanitizeHttpOrigins,
   invalidateFrameOriginsCache,
 } from '@/lib/admin/csp-frame-origins';
 import JSZip from 'jszip';
 import { MAX_PLUGIN_SIZE, MAX_THEME_SIZE, ALL_PERMISSIONS, ALLOWED_PLUGIN_FILES } from '@/lib/plugin-types';
 import { sanitizeThemeCSS, validateThemeCSSSafety } from '@/lib/theme-loader';
 
-const DIRECTORY_URL = process.env.EXTENSION_DIRECTORY_URL || 'http://localhost:3001';
+const DIRECTORY_URL = process.env.EXTENSION_DIRECTORY_URL || 'https://extensions.bulwarkmail.org';
 
 /**
  * GET /api/admin/marketplace - Search/browse the extension directory
@@ -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),
@@ -232,7 +240,7 @@ export async function POST(request: NextRequest) {
 
       // Plugins may declare iframe origins they need for embedded content.
       // Anything that doesn't pass strict origin validation is silently
-      // dropped — the plugin still installs, but those origins are not
+      // dropped - the plugin still installs, but those origins are not
       // added to the host CSP.
       const declaredFrameOrigins = sanitizeFrameOrigins(manifest.frameOrigins);
       const droppedFrameOrigins = Array.isArray(manifest.frameOrigins)
@@ -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 });
     }

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

@@ -139,7 +139,7 @@ export async function POST(request: NextRequest) {
     const queryEntry = queryRes.methodResponses?.[0];
     if (!queryEntry || queryEntry[0] === 'error') {
       return NextResponse.json({
-        error: 'Stalwart denied OAuthClient/query — your Stalwart account likely lacks admin permissions.',
+        error: 'Stalwart denied OAuthClient/query - your Stalwart account likely lacks admin permissions.',
         detail: queryEntry?.[1],
       }, { status: 403 });
     }
@@ -187,7 +187,7 @@ export async function POST(request: NextRequest) {
     const setEntry = setRes.methodResponses?.[0];
     if (!setEntry || setEntry[0] === 'error') {
       return NextResponse.json({
-        error: 'Stalwart denied OAuthClient/set — admin permissions required.',
+        error: 'Stalwart denied OAuthClient/set - admin permissions required.',
         detail: setEntry?.[1],
       }, { status: 403 });
     }

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

@@ -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, {
+    // Use the registry's bundleHash as the ETag so the browser can revalidate
-      headers: {
+    // cheaply. Cache-Control: no-cache forces revalidation on every request,
-        'Content-Type': 'application/javascript; charset=utf-8',
+    // but a matching If-None-Match returns 304 with no body.
-        'Cache-Control': 'public, max-age=3600, must-revalidate',
+    const etag = plugin.bundleHash ? `"${plugin.bundleHash}"` : undefined;
-        'Content-Length': String(Buffer.byteLength(code, 'utf-8')),
+    const headers: Record<string, string> = {
-      },
+      'Content-Type': 'application/javascript; charset=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 });
   }

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

@@ -1,16 +1,30 @@
 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 all config for a plugin
+ * GET /api/admin/plugins/[id]/config - Read plugin config
  *
- * Returns the full config object for admin-configured plugin settings.
+ * - Admin sessions receive every field, including those declared
- * This endpoint is accessible from the client-side plugin API.
+ *   `type: 'secret'` in the plugin's configSchema.
+ * - Authenticated mailbox users (the plugin running in their browser)
+ *   receive only non-secret fields.
+ * - Anonymous callers are rejected so unauthenticated visitors cannot
+ *   enumerate plugin secrets.
  */
 export async function GET(
-  _request: NextRequest,
+  request: NextRequest,
   { params }: { params: Promise<{ id: string }> },
 ) {
   try {
@@ -20,13 +34,34 @@ export async function GET(
       return NextResponse.json({ error: 'Invalid plugin ID' }, { status: 400 });
     }
 
-    const plugin = await getPlugin(id);
+    const adminAuth = await requireAdminAuth();
+    const isAdmin = !('error' in adminAuth);
+
+    if (!isAdmin) {
+      const creds = await getStalwartCredentials(request);
+      if (!creds) {
+        return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+      }
+    }
+
+    const plugin = await resolvePlugin(id);
     if (!plugin) {
       return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
     }
 
     const config = await getPluginConfig(id);
-    return NextResponse.json(config, {
+
+    let response: Record<string, unknown> = config;
+    if (!isAdmin && plugin.configSchema) {
+      response = {};
+      for (const [key, value] of Object.entries(config)) {
+        const field = plugin.configSchema[key];
+        if (field?.type === 'secret') continue;
+        response[key] = value;
+      }
+    }
+
+    return NextResponse.json(response, {
       headers: { 'Cache-Control': 'no-store' },
     });
   } catch {
@@ -54,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 });
     }

app/api/admin/plugins/route.ts

@@ -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();
+    const [registry, devEntries] = await Promise.all([
-    return NextResponse.json(registry.plugins, {
+      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) {

app/api/admin/telemetry/route.ts

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

app/api/admin/version/route.ts

@@ -0,0 +1,66 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAdminAuth } from '@/lib/admin/session';
+import { logger } from '@/lib/logger';
+import {
+  loadState,
+  checkOnce,
+  effectiveEndpoint,
+  disabledByEnv,
+  DEFAULT_VERSION_ENDPOINT,
+} from '@/lib/version-check';
+
+/**
+ * GET /api/admin/version
+ * Returns the cached update status, last check times, and effective config.
+ */
+export async function GET() {
+  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 });
+  }
+}

app/api/auth/session/route.ts

@@ -4,12 +4,21 @@ 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,
 } 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';
 
 const COOKIE_OPTIONS = {
   ...getCookieOptions(),
@@ -20,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;
 }
 
@@ -37,10 +46,46 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
     }
 
-    const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot <= 4 ? bodySlot : getSlot(request);
+    // 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', '') ||
+      process.env.JMAP_SERVER_URL ||
+      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 (trustedUrl) {
+      upstreamUrl = trustedUrl;
+      upstreamTrusted = true;
+    } else if (allowCustomEndpoint) {
+      if (!(await isPublicHttpUrl(serverUrl))) {
+        return NextResponse.json({ error: 'Server URL is not allowed' }, { status: 400 });
+      }
+      upstreamUrl = serverUrl;
+      upstreamTrusted = false;
+    } else {
+      return NextResponse.json({ error: 'JMAP server not configured' }, { status: 500 });
+    }
+
+    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(serverUrl, authHeader);
+    // 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);
@@ -50,6 +95,8 @@ export async function POST(request: NextRequest) {
       authHeader,
     });
 
+    void recordLogin(username, normalizedServerUrl);
+
     return NextResponse.json({ ok: true });
   } catch (error) {
     if (error instanceof JmapAuthVerificationError) {
@@ -150,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)
+      // Delete all session cookies across every slot.
-      for (let i = 0; i <= 4; i++) {
+      for (let i = 0; i < MAX_ACCOUNT_SLOTS; i++) {
         cookieStore.delete(sessionCookieName(i));
         clearStalwartAuthContextInStore(cookieStore, i);
       }

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

@@ -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);

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

@@ -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);

app/api/auth/stalwart-context/route.ts

@@ -1,10 +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;
   }
 
@@ -12,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) {
@@ -23,8 +28,44 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
     }
 
+    // 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', '') ||
+      process.env.JMAP_SERVER_URL ||
+      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 (trustedUrl) {
+      upstreamUrl = trustedUrl;
+      upstreamTrusted = true;
+    } else if (allowCustomEndpoint) {
+      if (!(await isPublicHttpUrl(serverUrl))) {
+        return NextResponse.json({ error: 'Server URL is not allowed' }, { status: 400 });
+      }
+      upstreamUrl = serverUrl;
+      upstreamTrusted = false;
+    } else {
+      return NextResponse.json({ error: 'JMAP server not configured' }, { status: 500 });
+    }
+
     const slot = getSlot(request, bodySlot);
-    const normalizedServerUrl = await verifyJmapAuth(serverUrl, authHeader);
+    // 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,
@@ -32,6 +73,8 @@ export async function POST(request: NextRequest) {
       authHeader,
     });
 
+    void recordLogin(username, normalizedServerUrl);
+
     return NextResponse.json({ ok: true });
   } catch (error) {
     if (error instanceof JmapAuthVerificationError) {

app/api/auth/token/route.ts

@@ -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) {

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

@@ -2,10 +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.
@@ -76,30 +80,56 @@ 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;
 
-    // Use the server-side JMAP_SERVER_URL if set (may differ from the
+    // Pin the upstream URL to a configured JMAP server. The list of allowed
-    // public URL the browser uses, e.g. inside Docker).
+    // servers is `jmapServerUrl` plus any entry from `jmapServers`. Only when
-    const internalServerUrl = process.env.JMAP_SERVER_URL || process.env.NEXT_PUBLIC_JMAP_SERVER_URL || serverUrl;
+    // 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 =
+      configManager.get<string>('jmapServerUrl', '') ||
+      process.env.JMAP_SERVER_URL ||
+      process.env.NEXT_PUBLIC_JMAP_SERVER_URL ||
+      '';
+    const allowCustomEndpoint = configManager.get<boolean>('allowCustomJmapEndpoint', false);
+    const serverList = parseJmapServers(configManager.get<unknown>('jmapServers', []));
 
-    const tokenEndpoint = await findTokenEndpoint(internalServerUrl);
+    let upstreamUrl: string;
-    if (!tokenEndpoint) {
+    let resolvedServerId: string | null = null;
-      // Also try with the client-provided URL in case the internal one differs
+    const requestedEntry = findServerById(serverList, requestedServerId);
-      const clientEndpoint = internalServerUrl !== serverUrl ? await findTokenEndpoint(serverUrl) : null;
+    const matchedEntry = requestedEntry || findServerByUrl(serverList, serverUrl);
-      if (!clientEndpoint) {
+
-        logger.warn('TOTP token exchange: no token endpoint found', { serverUrl, internalServerUrl });
+    if (matchedEntry) {
-        return NextResponse.json({ error: 'no_token_endpoint', detail: 'Could not discover OAuth token endpoint on the mail server' }, { status: 404 });
+      upstreamUrl = matchedEntry.url;
+      resolvedServerId = matchedEntry.id;
+    } else if (configuredServerUrl) {
+      upstreamUrl = configuredServerUrl;
+    } else if (allowCustomEndpoint) {
+      if (!(await isPublicHttpUrl(serverUrl))) {
+        logger.warn('TOTP token exchange: rejected non-public server URL');
+        return NextResponse.json({ error: 'invalid_server_url' }, { status: 400 });
       }
-      return await attemptAllStrategies(clientEndpoint, username, password, slot);
+      upstreamUrl = serverUrl;
+    } else {
+      return NextResponse.json({ error: 'jmap_server_not_configured' }, { status: 500 });
     }
 
-    return await attemptAllStrategies(tokenEndpoint, username, password, slot);
+    const tokenEndpoint = await findTokenEndpoint(upstreamUrl);
+    if (!tokenEndpoint) {
+      logger.warn('TOTP token exchange: no token endpoint found');
+      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, 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 });
@@ -108,14 +138,25 @@ export async function POST(request: NextRequest) {
 
 async function attemptAllStrategies(
   tokenEndpoint: string,
+  serverUrl: string,
   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;
+  // Per-server OAuth credentials override the global ones when the requested
-  const clientSecret = configManager.get<string>('oauthClientSecret', '') || process.env.OAUTH_CLIENT_SECRET || readFileEnv(process.env.OAUTH_CLIENT_SECRET_FILE);
+  // 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 }> = [];
 
@@ -126,7 +167,8 @@ async function attemptAllStrategies(
     const result = await tryTokenRequest(tokenEndpoint, params);
     if (result.ok) {
       logger.info('TOTP token exchange succeeded (ROPC with client_id)');
-      return await storeAndRespond(result.tokens, slot);
+      void recordLogin(username, serverUrl);
+      return await storeAndRespond(result.tokens, slot, serverId);
     }
     attempts.push({ strategy: 'ROPC with client_id', error: result.error });
   }
@@ -137,7 +179,8 @@ async function attemptAllStrategies(
     const result = await tryTokenRequest(tokenEndpoint, params);
     if (result.ok) {
       logger.info('TOTP token exchange succeeded (ROPC without client_id)');
-      return await storeAndRespond(result.tokens, slot);
+      void recordLogin(username, serverUrl);
+      return await storeAndRespond(result.tokens, slot, serverId);
     }
     attempts.push({ strategy: 'ROPC without client_id', error: result.error });
   }
@@ -148,7 +191,8 @@ async function attemptAllStrategies(
     const result = await tryTokenRequest(tokenEndpoint, params, { 'Authorization': basicAuth });
     if (result.ok) {
       logger.info('TOTP token exchange succeeded (Basic Auth header)');
-      return await storeAndRespond(result.tokens, slot);
+      void recordLogin(username, serverUrl);
+      return await storeAndRespond(result.tokens, slot, serverId);
     }
     attempts.push({ strategy: 'Basic Auth header', error: result.error });
   }
@@ -159,7 +203,8 @@ async function attemptAllStrategies(
     const result = await tryTokenRequest(tokenEndpoint, params, { 'Authorization': basicAuth });
     if (result.ok) {
       logger.info('TOTP token exchange succeeded (client_credentials + Basic Auth)');
-      return await storeAndRespond(result.tokens, slot);
+      void recordLogin(username, serverUrl);
+      return await storeAndRespond(result.tokens, slot, serverId);
     }
     attempts.push({ strategy: 'client_credentials + Basic Auth', error: result.error });
   }
@@ -175,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,

app/api/config/route.ts

@@ -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),
+    rememberMeEnabled: hasSessionSecret(),
-    settingsSyncEnabled: configManager.get<boolean>('settingsSyncEnabled', false) && (!!process.env.SESSION_SECRET || !!readFileEnv(process.env.SESSION_SECRET_FILE)),
+    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', ''),

app/api/plugins/route.ts

@@ -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,26 +11,42 @@ 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
+    // Dev plugins win on id collision so a developer can shadow an installed
-    const plugins = pluginRegistry.plugins
+    // plugin without uninstalling it first.
-      .filter(p => p.enabled)
+    const devIds = new Set(devEntries.map(e => e.plugin.id));
-      .map(p => ({
+    const installedEnabled = pluginRegistry.plugins.filter(p => p.enabled && !devIds.has(p.id));
-        id: p.id,
+
-        name: p.name,
+    const plugins = [
-        version: p.version,
+      ...devEntries.map(e => ({ ...e.plugin, dev: true })),
-        author: p.author,
+      ...installedEnabled.map(p => ({ ...p, dev: false })),
-        description: p.description,
+    ].map(p => ({
-        type: p.type,
+      id: p.id,
-        permissions: p.permissions,
+      name: p.name,
-        entrypoint: p.entrypoint,
+      version: p.version,
-        forceEnabled: p.forceEnabled || false,
+      author: p.author,
-        settingsSchema: undefined, // Will be read from the bundle's manifest
+      description: p.description,
-      }));
+      type: p.type,
+      permissions: p.permissions,
+      entrypoint: p.entrypoint,
+      forceEnabled: p.forceEnabled || false,
+      // 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
     const themes = themeRegistry.themes

app/api/push/preview/route.ts

@@ -0,0 +1,176 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { logger } from '@/lib/logger';
+import { getStalwartCredentials } from '@/lib/stalwart/credentials';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+/**
+ * GET /api/push/preview
+ *
+ * Called from the service worker when a Web Push wake-up arrives. Fetches the
+ * latest unread email so the SW can build an enriched system notification
+ * (sender, subject, avatar) without ever exposing JMAP credentials to the
+ * SW context.
+ *
+ * The relay's push payload is intentionally minimal (just a state-change
+ * ping), so this is what makes "From: Alice / Subject: …" appear instead of
+ * a generic "New mail" string.
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const creds = await getStalwartCredentials(request);
+    if (!creds) {
+      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    const sessionRes = await fetch(`${creds.serverUrl}/.well-known/jmap`, {
+      headers: { Authorization: creds.authHeader },
+    });
+    if (!sessionRes.ok) {
+      return NextResponse.json({ error: 'JMAP session failed' }, { status: 502 });
+    }
+    const session = (await sessionRes.json()) as {
+      apiUrl?: string;
+      primaryAccounts?: Record<string, string>;
+    };
+    const apiUrl = session.apiUrl;
+    const accountId = session.primaryAccounts?.['urn:ietf:params:jmap:mail'];
+    if (!apiUrl || !accountId) {
+      return NextResponse.json({ error: 'Incomplete JMAP session' }, { status: 502 });
+    }
+
+    const inboxRes = await fetch(apiUrl, {
+      method: 'POST',
+      headers: {
+        Authorization: creds.authHeader,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        using: ['urn:ietf:params:jmap:core', 'urn:ietf:params:jmap:mail'],
+        methodCalls: [
+          [
+            'Mailbox/query',
+            { accountId, filter: { role: 'inbox' }, limit: 1 },
+            'mb',
+          ],
+        ],
+      }),
+    });
+
+    if (!inboxRes.ok) {
+      return NextResponse.json({ error: 'JMAP mailbox query failed' }, { status: 502 });
+    }
+
+    const inboxData = (await inboxRes.json()) as {
+      methodResponses: [string, Record<string, unknown>, string][];
+    };
+
+    const inboxBody = inboxData.methodResponses.find(
+      ([method]) => method === 'Mailbox/query',
+    )?.[1] as { ids?: string[] } | undefined;
+
+    const inboxId = inboxBody?.ids?.[0];
+
+    if (!inboxId) {
+      return NextResponse.json({
+        email: null,
+        unreadTotal: 0,
+      }, {
+        headers: {
+          'Cache-Control': 'no-store',
+        },
+      });
+    }
+
+    // Pull the most recent unread message from the resolved Inbox mailbox.
+    const requestBody = {
+      using: ['urn:ietf:params:jmap:core', 'urn:ietf:params:jmap:mail'],
+      methodCalls: [
+        [
+          'Email/query',
+          {
+            accountId,
+            filter: {
+              operator: 'AND',
+              conditions: [
+                { inMailbox: inboxId },
+                { notKeyword: '$seen' },
+              ],
+            },
+            sort: [{ property: 'receivedAt', isAscending: false }],
+            limit: 1,
+            calculateTotal: true,
+          },
+          'eq',
+        ],
+        [
+          'Email/get',
+          {
+            accountId,
+            '#ids': { resultOf: 'eq', name: 'Email/query', path: '/ids' },
+            properties: ['id', 'threadId', 'from', 'subject', 'preview', 'receivedAt'],
+          },
+          'eg',
+        ],
+      ],
+    };
+
+    const jmapRes = await fetch(apiUrl, {
+      method: 'POST',
+      headers: {
+        Authorization: creds.authHeader,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(requestBody),
+    });
+    if (!jmapRes.ok) {
+      return NextResponse.json({ error: 'JMAP request failed' }, { status: 502 });
+    }
+    const data = (await jmapRes.json()) as {
+      methodResponses: [string, Record<string, unknown>, string][];
+    };
+
+    type EmailLite = {
+      id: string;
+      threadId: string;
+      from?: { name?: string | null; email?: string }[] | null;
+      subject?: string | null;
+      preview?: string | null;
+      receivedAt?: string | null;
+    };
+
+    let email: EmailLite | null = null;
+    let unreadTotal = 0;
+    for (const [method, body] of data.methodResponses) {
+      if (method === 'Email/query') {
+        unreadTotal = ((body as { total?: number }).total) ?? 0;
+      }
+      if (method === 'Email/get') {
+        const list = (body as { list?: EmailLite[] }).list ?? [];
+        email = list[0] ?? null;
+      }
+    }
+
+    return NextResponse.json({
+      email,
+      unreadTotal,
+    }, {
+      headers: {
+        // SW already gates on its own logic - don't let push events get
+        // cached and served stale.
+        'Cache-Control': 'no-store',
+      },
+    });
+  } catch (error) {
+    // `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', {
+      error: err?.message ?? 'Unknown error',
+      causeCode: err?.cause?.code,
+      causeMessage: err?.cause?.message,
+    });
+    return NextResponse.json({ error: 'Internal error' }, { status: 500 });
+  }
+}

app/api/settings/route.ts

@@ -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) {

app/api/setup/branding/route.ts

@@ -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 });
+  }
+}

app/api/setup/finish/route.ts

@@ -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 },
+    );
+  }
+}

app/api/setup/status/route.ts

@@ -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' } },
+  );
+}

app/api/setup/step/route.ts

@@ -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 });
+  }
+}

app/api/setup/test-jmap/route.ts

@@ -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);
+}

app/api/setup/token/route.ts

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

app/api/system/update-status/route.ts

@@ -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',
+      },
+    },
+  );
+}

app/globals.css

@@ -204,6 +204,31 @@ body {
   min-width: 100%;
 }
 
+/* Forces light-theme CSS variables inside the email content area, so when
+   "Always Show Emails in Light Mode" is enabled in dark theme the surrounding
+   sender info / attachments / plain-text body don't end up with light text
+   on a white background. */
+.email-content-light {
+  --color-background: #ffffff;
+  --color-foreground: #0f172a;
+  --color-muted: #f1f5f9;
+  --color-muted-foreground: #64748b;
+  --color-border: #e2e8f0;
+  --color-card: #ffffff;
+  --color-card-foreground: #0f172a;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #0f172a;
+  --color-secondary: #f8fafc;
+  --color-secondary-foreground: #0f172a;
+  --color-accent: #dbeafe;
+  --color-accent-foreground: #1e40af;
+  --color-input: #e2e8f0;
+}
+
+.email-content-light .email-content-text a {
+  color: #2563eb;
+}
+
 .email-content-text {
   padding: 1rem 1.25rem;
 }
@@ -497,6 +522,15 @@ body {
   }
 }
 
+.scroll-hidden::-webkit-scrollbar {
+  display: none;
+}
+
+.scroll-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
 /* Mobile backdrop blur support */
 @supports (backdrop-filter: blur(8px)) {
   .mobile-backdrop {
@@ -680,3 +714,83 @@ body {
 .tiptap .ProseMirror-selectednode img {
   outline: none;
 }
+
+.tiptap table {
+  border-collapse: collapse;
+  margin: 0.5rem 0;
+  table-layout: fixed;
+  width: 100%;
+  overflow: hidden;
+}
+
+.tiptap table td,
+.tiptap table th {
+  border: 1px solid var(--color-border);
+  padding: 0.375rem 0.5rem;
+  vertical-align: top;
+  position: relative;
+  min-width: 1em;
+}
+
+.tiptap table th {
+  background-color: var(--color-muted) !important;
+  color: var(--color-foreground) !important;
+  font-weight: 600;
+  text-align: left;
+}
+
+.tiptap table p {
+  margin: 0;
+}
+
+.tiptap table .selectedCell::after {
+  background: rgba(99, 102, 241, 0.15);
+  content: "";
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.tiptap table .column-resize-handle {
+  background-color: var(--color-primary);
+  bottom: -2px;
+  pointer-events: none;
+  position: absolute;
+  right: -2px;
+  top: 0;
+  width: 4px;
+}
+
+.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;
+}

app/manifest.ts

@@ -2,6 +2,12 @@ import type { MetadataRoute } from "next";
 
 export const dynamic = "force-dynamic";
 
+// 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 {
   const appName =
     process.env.APP_NAME ||
@@ -21,26 +27,26 @@ export default function manifest(): MetadataRoute.Manifest {
 
   const icons: MetadataRoute.Manifest["icons"] = hasCustomIcon
     ? [
-        { src: "/api/pwa-icon/192", sizes: "192x192", type: "image/png", purpose: "any" },
+        { src: withBase("/api/pwa-icon/192"), sizes: "192x192", type: "image/png", purpose: "any" },
-        { src: "/api/pwa-icon/512", sizes: "512x512", type: "image/png", purpose: "any" },
+        { src: withBase("/api/pwa-icon/512"), sizes: "512x512", type: "image/png", purpose: "any" },
-        { src: "/api/pwa-icon/192", sizes: "192x192", type: "image/png", purpose: "maskable" },
+        { src: withBase("/api/pwa-icon/192"), sizes: "192x192", type: "image/png", purpose: "maskable" },
-        { src: "/api/pwa-icon/512", sizes: "512x512", type: "image/png", purpose: "maskable" },
+        { src: withBase("/api/pwa-icon/512"), sizes: "512x512", type: "image/png", purpose: "maskable" },
       ]
     : [
-        { src: "/icon-192x192.png", sizes: "192x192", type: "image/png", purpose: "any" },
+        { src: withBase("/icon-192x192.png"), sizes: "192x192", type: "image/png", purpose: "any" },
-        { src: "/icon-512x512.png", sizes: "512x512", type: "image/png", purpose: "any" },
+        { src: withBase("/icon-512x512.png"), sizes: "512x512", type: "image/png", purpose: "any" },
-        { src: "/icon-maskable-light-192x192.png", sizes: "192x192", type: "image/png", purpose: "maskable" },
+        { src: withBase("/icon-maskable-light-192x192.png"), sizes: "192x192", type: "image/png", purpose: "maskable" },
-        { src: "/icon-maskable-light-512x512.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
+        { src: withBase("/icon-maskable-light-512x512.png"), sizes: "512x512", type: "image/png", purpose: "maskable" },
-        { src: "/icon-maskable-dark-192x192.png", sizes: "192x192", type: "image/png", purpose: "maskable" },
+        { src: withBase("/icon-maskable-dark-192x192.png"), sizes: "192x192", type: "image/png", purpose: "maskable" },
-        { src: "/icon-maskable-dark-512x512.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
+        { src: withBase("/icon-maskable-dark-512x512.png"), sizes: "512x512", type: "image/png", purpose: "maskable" },
       ];
 
   return {
     name: appName,
     short_name: shortName,
     description,
-    start_url: "/",
+    start_url: withBase("/"),
-    scope: "/",
+    scope: withBase("/"),
     display: "standalone",
     orientation: "portrait-primary",
     theme_color: themeColor,
@@ -48,8 +54,8 @@ export default function manifest(): MetadataRoute.Manifest {
     icons,
     categories: ["productivity"],
     screenshots: [
-      { src: "/screenshot-540x720.png", sizes: "540x720", type: "image/png" },
+      { src: withBase("/screenshot-540x720.png"), sizes: "540x720", type: "image/png" },
-      { src: "/screenshot-1280x720.png", sizes: "1280x720", type: "image/png" },
+      { src: withBase("/screenshot-1280x720.png"), sizes: "1280x720", type: "image/png" },
     ],
   };
 }

app/not-found.tsx

@@ -2,34 +2,43 @@
 
 import { useEffect } from "react";
 import { useAuthStore } from "@/stores/auth-store";
+import { getPathPrefix } from "@/lib/browser-navigation";
 
 export default function NotFound() {
   const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
 
   useEffect(() => {
     if (!isAuthenticated) {
-      // Don't redirect admin routes to the webmail login page
+      const prefix = getPathPrefix();
-      const isAdminRoute = window.location.pathname === '/admin' || window.location.pathname.startsWith('/admin/');
+      // Don't redirect admin routes to the webmail login page. Admin paths
+      // are mounted relative to the deployment prefix, so account for it.
+      const adminBase = `${prefix}/admin`;
+      const isAdminRoute = window.location.pathname === adminBase || window.location.pathname.startsWith(`${adminBase}/`);
       if (!isAdminRoute) {
-        window.location.href = "/login";
+        window.location.href = `${prefix}/login`;
       }
     }
   }, [isAuthenticated]);
 
   if (!isAuthenticated) {
-    // Allow admin routes to render the 404 without redirecting
+    let isAdmin = false;
-    const isAdmin = typeof window !== 'undefined' &&
+    if (typeof window !== 'undefined') {
-      (window.location.pathname === '/admin' || window.location.pathname.startsWith('/admin/'));
+      const prefix = getPathPrefix();
+      const adminBase = `${prefix}/admin`;
+      isAdmin = window.location.pathname === adminBase || window.location.pathname.startsWith(`${adminBase}/`);
+    }
     if (!isAdmin) return null;
   }
 
+  const prefix = typeof window !== 'undefined' ? getPathPrefix() : '';
+
   return (
     <div className="min-h-screen flex items-center justify-center bg-background">
       <div className="text-center max-w-md px-4">
         <h1 className="text-4xl font-bold text-foreground mb-2">404</h1>
         <p className="text-muted-foreground mb-6">This page could not be found.</p>
         <a
-          href="/"
+          href={`${prefix}/`}
           className="inline-flex items-center px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity"
         >
           Go home

app/setup/layout.tsx

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

components/calendar/calendar-day-view.tsx

@@ -20,6 +20,7 @@ interface CalendarDayViewProps {
   onHoverEvent?: (event: CalendarEvent, anchorRect: DOMRect) => void;
   onHoverLeave?: () => void;
   onContextMenuEvent?: (e: React.MouseEvent, event: CalendarEvent) => void;
+  onContextMenuEmpty?: (e: React.MouseEvent, date: Date, hour?: number, allDayArea?: boolean) => void;
   onCreateAtTime: (date: Date, endDate?: Date) => void;
   timeFormat?: "12h" | "24h";
   isMobile?: boolean;
@@ -39,6 +40,7 @@ export function CalendarDayView({
   onHoverEvent,
   onHoverLeave,
   onContextMenuEvent,
+  onContextMenuEmpty,
   onCreateAtTime,
   timeFormat = "24h",
   isMobile,
@@ -144,7 +146,13 @@ export function CalendarDayView({
       </div>
 
       {(allDayEvents.length > 0 || dayTasks.length > 0) && (
-        <div className="px-4 py-2 border-b border-border">
+        <div
+          className="px-4 py-2 border-b border-border"
+          onContextMenu={onContextMenuEmpty ? (e) => {
+            if ((e.target as HTMLElement).closest("[data-calendar-event],button")) return;
+            onContextMenuEmpty(e, selectedDate, undefined, true);
+          } : undefined}
+        >
           {allDayEvents.length > 0 && (
             <>
               <div className="text-[10px] text-muted-foreground mb-1">{t("events.all_day")}</div>
@@ -240,6 +248,7 @@ export function CalendarDayView({
                 aria-label={formatHour(h)}
                 onClick={() => handleSlotClick(selectedDate, h)}
                 onDoubleClick={() => handleSlotDoubleClick(selectedDate, h)}
+                onContextMenu={onContextMenuEmpty ? (e) => onContextMenuEmpty(e, selectedDate, h, false) : undefined}
                 className="border-b border-border/50 hover:bg-muted/30 cursor-pointer transition-colors"
                 style={{ height: HOUR_HEIGHT }}
               />

components/calendar/calendar-month-view.tsx

@@ -24,6 +24,7 @@ interface CalendarMonthViewProps {
   onHoverEvent?: (event: CalendarEvent, anchorRect: DOMRect) => void;
   onHoverLeave?: () => void;
   onContextMenuEvent?: (e: React.MouseEvent, event: CalendarEvent) => void;
+  onContextMenuEmpty?: (e: React.MouseEvent, date: Date, hour?: number, allDayArea?: boolean) => void;
   onCreateAtTime?: (date: Date) => void;
   firstDayOfWeek?: number;
   isMobile?: boolean;
@@ -39,6 +40,7 @@ export function CalendarMonthView({
   onHoverEvent,
   onHoverLeave,
   onContextMenuEvent,
+  onContextMenuEmpty,
   onCreateAtTime,
   firstDayOfWeek = 1,
   isMobile,
@@ -174,6 +176,7 @@ export function CalendarMonthView({
                   aria-label={fullDateLabel}
                   onClick={() => onSelectDate(day)}
                   onDoubleClick={() => onCreateAtTime?.(day)}
+                  onContextMenu={onContextMenuEmpty ? (e) => onContextMenuEmpty(e, day, undefined, true) : undefined}
                   onDragOver={(e) => handleCellDragOver(e, key)}
                   onDragLeave={handleCellDragLeave}
                   onDrop={(e) => handleCellDrop(e, day)}

components/calendar/calendar-sidebar-panel.tsx

@@ -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>
     );

components/calendar/calendar-week-view.tsx

@@ -23,6 +23,7 @@ interface CalendarWeekViewProps {
   onHoverEvent?: (event: CalendarEvent, anchorRect: DOMRect) => void;
   onHoverLeave?: () => void;
   onContextMenuEvent?: (e: React.MouseEvent, event: CalendarEvent) => void;
+  onContextMenuEmpty?: (e: React.MouseEvent, date: Date, hour?: number, allDayArea?: boolean) => void;
   onCreateAtTime: (date: Date, endDate?: Date) => void;
   firstDayOfWeek?: number;
   timeFormat?: "12h" | "24h";
@@ -44,6 +45,7 @@ export function CalendarWeekView({
   onHoverEvent,
   onHoverLeave,
   onContextMenuEvent,
+  onContextMenuEmpty,
   onCreateAtTime,
   firstDayOfWeek = 1,
   timeFormat = "24h",
@@ -219,7 +221,11 @@ export function CalendarWeekView({
             style={{ minHeight: Math.max(28, (allDayRowCount + taskRowCount) * 24 + 4) }}
           >
             {weekDays.map((day) => (
-              <div key={format(day, "yyyy-MM-dd")} className="bg-background min-h-[28px]" />
+              <div
+                key={format(day, "yyyy-MM-dd")}
+                className="bg-background min-h-[28px]"
+                onContextMenu={onContextMenuEmpty ? (e) => onContextMenuEmpty(e, day, undefined, true) : undefined}
+              />
             ))}
 
             <div className="absolute inset-0 pointer-events-none">
@@ -378,6 +384,7 @@ export function CalendarWeekView({
                       aria-label={`${intlFormatter.dateTime(day, { weekday: "short" })} ${formatHour(h)}`}
                       onClick={() => handleSlotClick(day, h)}
                       onDoubleClick={() => handleSlotDoubleClick(day, h)}
+                      onContextMenu={onContextMenuEmpty ? (e) => onContextMenuEmpty(e, day, h, false) : undefined}
                       className="border-b border-border/50 hover:bg-muted/30 cursor-pointer transition-colors"
                       style={{ height: HOUR_HEIGHT }}
                     />

components/calendar/empty-space-context-menu.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import {
+  ContextMenu,
+  ContextMenuItem,
+  ContextMenuSeparator,
+} from "@/components/ui/context-menu";
+import { Plus, CalendarDays, CheckSquare, Clock } from "lucide-react";
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+interface EmptySpaceContextMenuProps {
+  position: Position;
+  isOpen: boolean;
+  onClose: () => void;
+  menuRef: React.RefObject<HTMLDivElement | null>;
+  onNewEvent: () => void;
+  onNewAllDayEvent: () => void;
+  onNewTask?: () => void;
+  onGoToToday: () => void;
+  showAllDayOption?: boolean;
+}
+
+export function EmptySpaceContextMenu({
+  position,
+  isOpen,
+  onClose,
+  menuRef,
+  onNewEvent,
+  onNewAllDayEvent,
+  onNewTask,
+  onGoToToday,
+  showAllDayOption = true,
+}: EmptySpaceContextMenuProps) {
+  const t = useTranslations("calendar");
+
+  const handle = (fn: () => void) => () => {
+    fn();
+    onClose();
+  };
+
+  return (
+    <ContextMenu ref={menuRef} isOpen={isOpen} position={position} onClose={onClose}>
+      <ContextMenuItem icon={Plus} label={t("events.new_event")} onClick={handle(onNewEvent)} />
+      {showAllDayOption && (
+        <ContextMenuItem
+          icon={CalendarDays}
+          label={t("events.new_all_day_event")}
+          onClick={handle(onNewAllDayEvent)}
+        />
+      )}
+      {onNewTask && (
+        <ContextMenuItem
+          icon={CheckSquare}
+          label={t("events.new_task")}
+          onClick={handle(onNewTask)}
+        />
+      )}
+      <ContextMenuSeparator />
+      <ContextMenuItem icon={Clock} label={t("events.go_to_today")} onClick={handle(onGoToToday)} />
+    </ContextMenu>
+  );
+}

components/calendar/event-card.tsx

@@ -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",

components/calendar/event-detail-popover.tsx

@@ -19,6 +19,7 @@ import {
   getUserStatus,
   getParticipantList,
 } from "@/lib/calendar-participants";
+import { useFormatEventDate } from "@/hooks/use-format-event-date";
 
 interface EventDetailPopoverProps {
   event: CalendarEvent;
@@ -253,6 +254,8 @@ export function EventDetailPopover({
 
   const hasParticipants = participants.length > 0;
 
+  const formatEventDate = useFormatEventDate();
+
   const popover = (
     <div
       ref={popoverRef}
@@ -329,7 +332,7 @@ export function EventDetailPopover({
           <Clock className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
           <div className="text-sm">
             <span className="font-medium text-foreground">
-              {format(startDate, "EEE, MMM d, yyyy")}
+              {formatEventDate(startDate)}
             </span>
             {event.showWithoutTime ? (
               <span className="text-muted-foreground ml-1.5">{t("events.all_day")}</span>

components/calendar/event-modal.tsx

@@ -21,6 +21,9 @@ import {
 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;
@@ -35,6 +38,7 @@ interface EventModalProps {
   calendars: Calendar[];
   defaultDate?: Date;
   defaultEndDate?: Date;
+  defaultAllDay?: boolean;
   defaultCalendarId?: string;
   onSave: (data: Partial<CalendarEvent>, sendSchedulingMessages?: boolean) => void | Promise<void>;
   onDelete?: (id: string, sendSchedulingMessages?: boolean) => void;
@@ -114,6 +118,7 @@ export function EventModal({
   calendars,
   defaultDate,
   defaultEndDate,
+  defaultAllDay,
   defaultCalendarId,
   onSave,
   onDelete,
@@ -128,6 +133,7 @@ export function EventModal({
   const timeFormat = useSettingsStore((s) => s.timeFormat);
   const timeDisplayFmt = timeFormat === "12h" ? "h:mm a" : "HH:mm";
   const isEdit = !!event;
+  const formatEventDate = useFormatEventDate();
   const [mode, setMode] = useState<"view" | "edit">(isEdit ? "view" : "edit");
 
   const userIsOrganizer = useMemo(() => {
@@ -199,7 +205,7 @@ export function EventModal({
   const [startTime, setStartTime] = useState(formatTimeInput(getInitialStart()));
   const [endDate, setEndDate] = useState(formatDateInput(getInitialEnd()));
   const [endTime, setEndTime] = useState(formatTimeInput(getInitialEnd()));
-  const [allDay, setAllDay] = useState(event?.showWithoutTime || false);
+  const [allDay, setAllDay] = useState(event?.showWithoutTime || defaultAllDay || false);
   const [calendarId, setCalendarId] = useState<string>(() => {
     if (event?.calendarIds) return getPrimaryCalendarId(event) || calendars[0]?.id || "";
     if (defaultCalendarId && calendars.some(c => c.id === defaultCalendarId)) return defaultCalendarId;
@@ -238,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;
@@ -493,14 +524,14 @@ export function EventModal({
 
     return (
       <div ref={modalRef} role="dialog" aria-modal={isMobile || undefined} aria-label={event.title || t("events.no_title")} className={isMobile ? "fixed inset-0 z-50 flex flex-col bg-background" : "flex flex-col h-full bg-background"}>
-          <div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
-            <h2 className="text-lg font-semibold truncate">{event.title || t("events.no_title")}</h2>
+          <h2 className="text-lg font-semibold truncate">{event.title || t("events.no_title")}</h2>
-            <button onClick={onClose} className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground" aria-label={t("form.cancel")}>
+          <button onClick={onClose} className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground" aria-label={t("form.cancel")}>
-              <X className="w-5 h-5" />
+            <X className="w-5 h-5" />
-            </button>
+          </button>
-          </div>
+        </div>
 
-          <div className="flex-1 overflow-y-auto">
+        <div className="flex-1 overflow-y-auto">
           <div className="px-6 py-4 space-y-3">
             <div className="flex items-start gap-3 rounded-lg border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-950/50 px-4 py-3">
               <CalendarDays className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
@@ -515,7 +546,7 @@ export function EventModal({
             </div>
 
             <div className="text-sm">
-              <span className="font-medium">{format(startD, "EEE, MMM d, yyyy")}</span>
+              <span className="font-medium">{formatEventDate(startD)}</span>
               {!event.showWithoutTime && (
                 <span className="text-muted-foreground ml-2">
                   {format(startD, timeDisplayFmt)} – {format(endD, timeDisplayFmt)}
@@ -548,48 +579,48 @@ export function EventModal({
               </div>
             )}
           </div>
-          </div>
+        </div>
 
-          <div className="px-6 py-4 border-t border-border flex-shrink-0">
+        <div className="px-6 py-4 border-t border-border flex-shrink-0">
-            <div className="flex items-center justify-between">
+          <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">{t("participants.rsvp_label")}</span>
+            <span className="text-sm font-medium">{t("participants.rsvp_label")}</span>
-              <div className="flex gap-2">
+            <div className="flex gap-2">
-                <Button
+              <Button
-                  size="sm"
+                size="sm"
-                  variant={userCurrentStatus === "accepted" ? "default" : "outline"}
+                variant={userCurrentStatus === "accepted" ? "default" : "outline"}
-                  onClick={() => handleRsvp("accepted")}
+                onClick={() => handleRsvp("accepted")}
-                  className={userCurrentStatus === "accepted"
+                className={userCurrentStatus === "accepted"
-                    ? "bg-success hover:bg-success/80 text-success-foreground"
+                  ? "bg-success hover:bg-success/80 text-success-foreground"
-                    : "text-success border-success/30 hover:bg-success/10"}
+                  : "text-success border-success/30 hover:bg-success/10"}
-                >
+              >
-                  {userCurrentStatus === "accepted" && <Check className="w-4 h-4 mr-1" />}
+                {userCurrentStatus === "accepted" && <Check className="w-4 h-4 mr-1" />}
-                  {t("participants.accepted")}
+                {t("participants.accepted")}
-                </Button>
+              </Button>
-                <Button
+              <Button
-                  size="sm"
+                size="sm"
-                  variant={userCurrentStatus === "tentative" ? "default" : "outline"}
+                variant={userCurrentStatus === "tentative" ? "default" : "outline"}
-                  onClick={() => handleRsvp("tentative")}
+                onClick={() => handleRsvp("tentative")}
-                  className={userCurrentStatus === "tentative"
+                className={userCurrentStatus === "tentative"
-                    ? "bg-warning hover:bg-warning/80 text-warning-foreground"
+                  ? "bg-warning hover:bg-warning/80 text-warning-foreground"
-                    : "border border-warning/30 text-warning hover:bg-warning/10"}
+                  : "border border-warning/30 text-warning hover:bg-warning/10"}
-                >
+              >
-                  {userCurrentStatus === "tentative" && <Check className="w-4 h-4 mr-1" />}
+                {userCurrentStatus === "tentative" && <Check className="w-4 h-4 mr-1" />}
-                  {t("participants.tentative")}
+                {t("participants.tentative")}
-                </Button>
+              </Button>
-                <Button
+              <Button
-                  size="sm"
+                size="sm"
-                  variant={userCurrentStatus === "declined" ? "default" : "ghost"}
+                variant={userCurrentStatus === "declined" ? "default" : "ghost"}
-                  onClick={() => handleRsvp("declined")}
+                onClick={() => handleRsvp("declined")}
-                  className={userCurrentStatus === "declined"
+                className={userCurrentStatus === "declined"
-                    ? "bg-destructive hover:bg-destructive/80 text-destructive-foreground"
+                  ? "bg-destructive hover:bg-destructive/80 text-destructive-foreground"
-                    : "text-destructive hover:bg-destructive/10"}
+                  : "text-destructive hover:bg-destructive/10"}
-                >
+              >
-                  {userCurrentStatus === "declined" && <Check className="w-4 h-4 mr-1" />}
+                {userCurrentStatus === "declined" && <Check className="w-4 h-4 mr-1" />}
-                  {t("participants.declined")}
+                {t("participants.declined")}
-                </Button>
+              </Button>
-              </div>
             </div>
           </div>
+        </div>
       </div>
     );
   }
@@ -636,7 +667,7 @@ export function EventModal({
               <Clock className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
               <div className="text-sm">
                 <span className="font-medium text-foreground">
-                  {format(startD, "EEE, MMM d, yyyy")}
+                  {formatEventDate(startD)}
                 </span>
                 {event.showWithoutTime ? (
                   <span className="text-muted-foreground ml-1.5">{t("events.all_day")}</span>
@@ -765,16 +796,16 @@ export function EventModal({
 
   return (
     <div ref={modalRef} role="dialog" aria-modal={isMobile || undefined} aria-label={isEdit ? t("events.edit") : t("events.create")} data-tour="event-modal" className={isMobile ? "fixed inset-0 z-50 flex flex-col bg-background" : "flex flex-col h-full bg-background"}>
-        <div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
+      <div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
-          <h2 className="text-lg font-semibold">
+        <h2 className="text-lg font-semibold">
-            {isEdit ? t("events.edit") : t("events.create")}
+          {isEdit ? t("events.edit") : t("events.create")}
-          </h2>
+        </h2>
-          <button onClick={onClose} className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground" aria-label={t("form.cancel")}>
+        <button onClick={onClose} className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground" aria-label={t("form.cancel")}>
-            <X className="w-5 h-5" />
+          <X className="w-5 h-5" />
-          </button>
+        </button>
-        </div>
+      </div>
 
-        <div className="flex-1 overflow-y-auto">
+      <div className="flex-1 overflow-y-auto">
         <div className="px-6 py-4 space-y-4">
           <div>
             <label className="text-sm font-medium mb-1 block">{t("form.title")}</label>
@@ -919,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>
@@ -984,69 +1035,69 @@ export function EventModal({
             </div>
           )}
         </div>
-        </div>
+      </div>
 
-        <div className="flex items-center justify-between px-6 py-4 border-t border-border flex-shrink-0">
+      <div className="flex items-center justify-between px-6 py-4 border-t border-border flex-shrink-0">
-          <div className="flex items-center gap-1">
+        <div className="flex items-center gap-1">
-            {isEdit && onDelete && (
+          {isEdit && onDelete && (
-              showDeleteConfirm ? (
+            showDeleteConfirm ? (
-                <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2">
-                  <div>
+                <div>
-                    <span className="text-sm text-red-600 dark:text-red-400">
+                  <span className="text-sm text-red-600 dark:text-red-400">
-                      {t("form.delete_confirm")}
+                    {t("form.delete_confirm")}
-                    </span>
+                  </span>
-                    {hasParticipants && (
+                  {hasParticipants && (
-                      <p className="text-xs text-muted-foreground mt-0.5">
+                    <p className="text-xs text-muted-foreground mt-0.5">
-                        {t("participants.cancel_notification")}
+                      {t("participants.cancel_notification")}
-                      </p>
+                    </p>
-                    )}
+                  )}
-                  </div>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => { onDelete(event!.id, hasParticipants || undefined); onClose(); }}
-                    className="text-red-600 dark:text-red-400 border-red-300 dark:border-red-700"
-                  >
-                    {t("events.delete")}
-                  </Button>
-                  <Button variant="ghost" size="sm" onClick={() => setShowDeleteConfirm(false)}>
-                    {t("form.cancel")}
-                  </Button>
                 </div>
-              ) : (
                 <Button
-                  variant="ghost"
+                  variant="outline"
                   size="sm"
-                  onClick={() => setShowDeleteConfirm(true)}
+                  onClick={() => { onDelete(event!.id, hasParticipants || undefined); onClose(); }}
-                  className="text-red-600 dark:text-red-400"
+                  className="text-red-600 dark:text-red-400 border-red-300 dark:border-red-700"
                 >
-                  <Trash2 className="w-4 h-4 mr-1" />
                   {t("events.delete")}
                 </Button>
-              )
+                <Button variant="ghost" size="sm" onClick={() => setShowDeleteConfirm(false)}>
-            )}
+                  {t("form.cancel")}
-            {isEdit && onDuplicate && !showDeleteConfirm && (
+                </Button>
+              </div>
+            ) : (
               <Button
                 variant="ghost"
                 size="sm"
-                onClick={handleDuplicate}
+                onClick={() => setShowDeleteConfirm(true)}
-                aria-label={t("events.duplicate")}
+                className="text-red-600 dark:text-red-400"
               >
-                <Copy className="w-4 h-4 mr-1" />
+                <Trash2 className="w-4 h-4 mr-1" />
-                {t("events.duplicate")}
+                {t("events.delete")}
               </Button>
-            )}
+            )
-          </div>
+          )}
-
+          {isEdit && onDuplicate && !showDeleteConfirm && (
-          <div className="flex gap-2">
+            <Button
-            <Button variant="outline" onClick={isEdit ? () => setMode("view") : onClose}>
+              variant="ghost"
-              {t("form.cancel")}
+              size="sm"
+              onClick={handleDuplicate}
+              aria-label={t("events.duplicate")}
+            >
+              <Copy className="w-4 h-4 mr-1" />
+              {t("events.duplicate")}
             </Button>
-            <Button onClick={handleSave} disabled={!title.trim() || isSaving}>
+          )}
-              {t("form.save")}
-            </Button>
-          </div>
         </div>
+
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={isEdit ? () => setMode("view") : onClose}>
+            {t("form.cancel")}
+          </Button>
+          <Button onClick={handleSave} disabled={!title.trim() || isSaving}>
+            {t("form.save")}
+          </Button>
+        </div>
+      </div>
     </div>
   );
 }

components/contacts/contacts-sidebar.tsx

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

components/email/calendar-invitation-banner.tsx

@@ -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';
+      return 'bg-destructive/15 text-destructive';
-    case 'request':
-    case 'add':
-      return 'border-l-blue-500 dark:border-l-blue-400';
     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 'accepted': return 'bg-success/15 text-success';
-        case 'tentative': return 'border-l-amber-500 dark:border-l-amber-400';
+        case 'tentative': return 'bg-warning/15 text-warning';
-        case 'declined': return 'border-l-red-500 dark:border-l-red-400';
+        case 'declined': return 'bg-destructive/15 text-destructive';
-        default: return 'border-l-blue-500 dark:border-l-blue-400';
+        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 = !isCollapsed;
-  const showDetails = !canCollapse || !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">
+      <div className="flex items-center gap-3">
-        <Calendar className="w-4 h-4 text-primary flex-shrink-0" />
+        <div className="w-10 h-10 rounded-full bg-muted text-muted-foreground flex items-center justify-center flex-shrink-0 shadow-sm">
-        <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
+          <Calendar className="w-5 h-5" />
-        <span className="text-sm text-muted-foreground">{t('loading')}</span>
+        </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">
+      <div className="flex items-center gap-3">
-        <AlertCircle className="w-4 h-4 text-destructive flex-shrink-0" />
+        <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)}>
+    <div
-      {/* Header */}
+      className={cn(
-      <div className="flex items-center justify-between px-4 py-2.5 bg-muted/30 border-b border-border">
+        "flex items-start gap-3 rounded-md transition-colors",
-        <div className="flex items-center gap-2 min-w-0">
+        isCollapsed && "cursor-pointer hover:bg-muted/50",
-          {isCancellation ? (
+      )}
-            <CalendarX className="w-4 h-4 text-destructive flex-shrink-0" />
+      onClick={isCollapsed ? () => setIsCollapsed(false) : undefined}
-          ) : (
+      onKeyDown={isCollapsed ? (e) => {
-            <Calendar className="w-4 h-4 text-primary flex-shrink-0" />
+        if (e.key === 'Enter' || e.key === ' ') {
-          )}
+          e.preventDefault();
-          <span className="text-sm font-medium text-foreground truncate">{bannerTitle}</span>
+          setIsCollapsed(false);
-        </div>
+        }
-        {canCollapse && (
+      } : undefined}
-          <button
+      role={isCollapsed ? 'button' : undefined}
-            type="button"
+      tabIndex={isCollapsed ? 0 : undefined}
-            onClick={() => setIsCollapsed((prev) => !prev)}
+      aria-expanded={isCollapsed ? false : undefined}
-            aria-expanded={!isCollapsed}
+    >
-            aria-label={isCollapsed ? t('expand') : t('collapse')}
+      {/* Avatar-style icon */}
-            title={isCollapsed ? t('expand') : t('collapse')}
+      <div className={cn(
-            className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors flex-shrink-0"
+        "w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 shadow-sm",
-          >
+        iconTone,
-            {isCollapsed ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />}
+      )}>
-          </button>
+        {isCancellation ? (
+          <CalendarX className="w-5 h-5" />
+        ) : (
+          <Calendar className="w-5 h-5" />
         )}
       </div>
 
-      {/* Content */}
+      {/* Content column */}
-      {showDetails && (
+      <div className="flex-1 min-w-0 space-y-2">
-      <div className="px-4 py-3 space-y-2.5">
+        {/* Eyebrow + title + collapse */}
-        <div className="lg:flex lg:gap-6">
+        <div className="flex items-start justify-between gap-2">
-          {/* Left: Event info */}
+          <div className="min-w-0 flex-1">
-          <div className="lg:flex-1 space-y-2.5 min-w-0">
+            <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-            {/* Event title */}
+              {bannerTitle}
-            {summary?.title && (
-              <div className="flex items-start justify-between gap-2">
-                <h3 className={cn(
-                  "text-base font-semibold leading-snug",
-                  isCancellation ? "line-through text-muted-foreground" : "text-foreground"
-                )}>
-                  {summary.title}
-                </h3>
-                {parsedEvent?.sequence != null && parsedEvent.sequence > 0 && (
-                  <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground flex-shrink-0 whitespace-nowrap">
-                    {t('event_updated', { sequence: parsedEvent.sequence })}
-                  </span>
-                )}
-              </div>
-            )}
-
-            {/* Event details */}
-            <div className="lg:flex lg:items-center lg:gap-4 lg:flex-wrap space-y-1 lg:space-y-0">
-              {summary?.start && (
-                <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
-                  <Clock className="w-3.5 h-3.5 flex-shrink-0" />
-                  <span>
-                    {formatDateTime(summary.start)}
-                    {summary.end && ` – ${formatDateTime(summary.end)}`}
-                  </span>
-                </div>
-              )}
-              {summary?.location && (
-                <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
-                  <MapPin className="w-3.5 h-3.5 flex-shrink-0" />
-                  <span>{summary.location}</span>
-                </div>
-              )}
-              {summary?.organizer && (
-                <span className="flex items-center gap-1.5 text-sm text-muted-foreground">
-                  <Users className="w-3.5 h-3.5 flex-shrink-0" />
-                  {t('organizer', { name: summary.organizer })}
-                </span>
-              )}
-              {summary && summary.attendeeCount > 0 && (
-                <span className="text-sm text-muted-foreground">{t('attendees', { count: summary.attendeeCount })}</span>
-              )}
             </div>
+            {summary?.title && (
+              <h3 className={cn(
+                "text-sm font-semibold leading-snug break-words",
+                isCancellation ? "line-through text-muted-foreground" : "text-foreground",
+              )}>
+                {summary.title}
+              </h3>
+            )}
           </div>
 
-          {/* Right: Info & actor messages on large screens */}
+          <div className="flex items-center gap-1.5 flex-shrink-0">
-          <div className="lg:flex-shrink-0 lg:text-right lg:max-w-xs mt-2.5 lg:mt-0 space-y-1">
+            {parsedEvent?.sequence != null && parsedEvent.sequence > 0 && (
-            {bannerInfo && (
+              <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground whitespace-nowrap">
-              <p className="text-xs text-muted-foreground leading-relaxed">{bannerInfo}</p>
+                {t('event_updated', { sequence: parsedEvent.sequence })}
-            )}
+              </span>
-            {actorMessage && (
-              <p className="text-xs text-muted-foreground">{actorMessage}</p>
-            )}
-            {actorSummary?.participationComment && (
-              <p className="text-xs text-muted-foreground italic">
-                {t('actor_note', { comment: actorSummary.participationComment })}
-              </p>
             )}
+            <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>
 
-        {/* Status badges */}
+        {/* Meta rows */}
-        {(existingEvent || userIsOrganizer || (participationLabel && myParticipant) || actionFeedback || (parsedEvent?.status && parsedEvent.status !== 'confirmed')) && (
+        {showDetails && summary && (summary.start || summary.location || summary.attendeeCount > 0) && (
-          <div className="flex items-center gap-1.5 flex-wrap">
+          <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 className="truncate">
+                  {formatDateTime(summary.start)}
+                  {summary.end && ` – ${formatDateTime(summary.end)}`}
+                </span>
+              </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>
+        )}
+
+        {/* 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>
+        )}
+
+        {/* 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,156 +965,154 @@ 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 && (
+        {showDetails && 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">
+          <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-3.5 h-3.5 mt-0.5 flex-shrink-0" />
+            <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
-            <span>{actionError}</span>
+            <span className="flex-1">{actionError}</span>
           </div>
         )}
-      </div>
-      )}
 
-      {/* Actions */}
+        {/* Actions */}
-      {showDetails && (
+        {showActionsRow && (
-      <div className="px-4 py-2.5 border-t border-border bg-muted/20 flex items-center gap-2 flex-wrap">
+          <div className="flex flex-wrap items-center gap-1.5 pt-0.5">
-        {canRespond && (
+          {canRespond && (
-          <>
+            <>
-            <button
+              <button
-              onClick={() => handleRsvp('accepted')}
+                onClick={() => handleRsvp('accepted')}
-              disabled={isProcessing}
+                disabled={isProcessing}
-              aria-pressed={currentRsvp === 'accepted'}
+                aria-pressed={currentRsvp === 'accepted'}
-              className={cn(
+                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",
+                  "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'
+                  currentRsvp === 'accepted'
-                  ? "bg-success/15 text-success border-success/20"
+                    ? "bg-success/15 text-success border-success/30"
-                  : "text-muted-foreground hover:text-success border-border hover:border-success/30 hover:bg-success/10"
+                    : "text-muted-foreground hover:text-success border-border hover:border-success/30 hover:bg-success/10",
-              )}
+                )}
-            >
+              >
-              <Check className="w-3.5 h-3.5" />
+                <Check className="w-3.5 h-3.5" />
-              {t('accept')}
+                {t('accept')}
-            </button>
+              </button>
-            <button
+              <button
-              onClick={() => handleRsvp('tentative')}
+                onClick={() => handleRsvp('tentative')}
-              disabled={isProcessing}
+                disabled={isProcessing}
-              aria-pressed={currentRsvp === 'tentative'}
+                aria-pressed={currentRsvp === 'tentative'}
-              className={cn(
+                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",
+                  "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'
+                  currentRsvp === 'tentative'
-                  ? "bg-warning/15 text-warning border-warning/20"
+                    ? "bg-warning/15 text-warning border-warning/30"
-                  : "text-muted-foreground hover:text-warning border-border hover:border-warning/30 hover:bg-warning/10"
+                    : "text-muted-foreground hover:text-warning border-border hover:border-warning/30 hover:bg-warning/10",
-              )}
+                )}
-            >
+              >
-              <HelpCircle className="w-3.5 h-3.5" />
+                <HelpCircle className="w-3.5 h-3.5" />
-              {t('maybe')}
+                {t('maybe')}
-            </button>
+              </button>
-            <button
+              <button
-              onClick={() => handleRsvp('declined')}
+                onClick={() => handleRsvp('declined')}
-              disabled={isProcessing}
+                disabled={isProcessing}
-              aria-pressed={currentRsvp === 'declined'}
+                aria-pressed={currentRsvp === 'declined'}
-              className={cn(
+                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",
+                  "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'
+                  currentRsvp === 'declined'
-                  ? "bg-destructive/15 text-destructive border-destructive/20"
+                    ? "bg-destructive/15 text-destructive border-destructive/30"
-                  : "text-muted-foreground hover:text-destructive border-border hover:border-destructive/30 hover:bg-destructive/10"
+                    : "text-muted-foreground hover:text-destructive border-border hover:border-destructive/30 hover:bg-destructive/10",
-              )}
+                )}
-            >
+              >
-              <X className="w-3.5 h-3.5" />
+                <X className="w-3.5 h-3.5" />
-              {t('decline')}
+                {t('decline')}
-            </button>
+              </button>
+              <div className="w-px h-5 bg-border mx-1" />
+            </>
+          )}
 
-            <div className="w-px h-5 bg-border" />
+          {supportsCalendar && !existingEvent && allowsImport && !isResponseOnly && !isCancellation && (
-          </>
+            <>
-        )}
+              <button
+                ref={pickerTriggerRef}
+                onClick={() => {
+                  if (calendars.length <= 1) {
+                    handleImport();
+                    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"
+              >
+                <CalendarCheck className="w-3.5 h-3.5" />
+                {t('add_to_calendar')}
+                {calendars.length > 1 && <ChevronDown className="w-3 h-3" />}
+              </button>
 
-        {supportsCalendar && !existingEvent && allowsImport && !isResponseOnly && !isCancellation && (
+              {showCalendarPicker && calendars.length > 1 && pickerPosition && typeof document !== 'undefined' && createPortal(
-          <div className="relative">
+                <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>
+                  {calendars.map((cal) => (
+                    <button
+                      key={cal.id}
+                      onClick={() => {
+                        setShowCalendarPicker(false);
+                        handleImport(cal.id);
+                      }}
+                      className="w-full px-3 py-1.5 text-sm text-left hover:bg-muted flex items-center gap-2"
+                    >
+                      <span
+                        className="w-3 h-3 rounded-full flex-shrink-0"
+                        style={{ backgroundColor: sanitizeColor(cal.color) }}
+                      />
+                      <span className="truncate text-foreground">{cal.name}</span>
+                    </button>
+                  ))}
+                </div>,
+                document.body,
+              )}
+            </>
+          )}
+
+          {canApplyProposal && (
             <button
-              onClick={() => {
+              onClick={handleApplyProposal}
-                if (calendars.length <= 1) {
-                  handleImport();
-                } else {
-                  setShowCalendarPicker(!showCalendarPicker);
-                }
-              }}
               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"
             >
               <CalendarCheck className="w-3.5 h-3.5" />
-              {t('add_to_calendar')}
+              {t('apply_proposal')}
-              {calendars.length > 1 && <ChevronDown className="w-3 h-3" />}
             </button>
+          )}
 
-            {showCalendarPicker && calendars.length > 1 && (
+          {supportsCalendar && (existingEvent || parsedEvent) && (
-              <div className="absolute left-0 top-full mt-1 w-52 bg-background rounded-lg shadow-lg border border-border z-10 py-1">
+            <button
-                <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground">
+              onClick={handleViewInCalendar}
-                  {t('select_calendar')}
+              className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-muted transition-colors min-h-[36px]"
-                </div>
+            >
-                {calendars.map((cal) => (
+              <Calendar className="w-3.5 h-3.5" />
-                  <button
+              {viewActionLabel}
-                    key={cal.id}
+              <ArrowRight className="w-3 h-3" />
-                    onClick={() => {
+            </button>
-                      setShowCalendarPicker(false);
+          )}
-                      handleImport(cal.id);
-                    }}
-                    className="w-full px-3 py-1.5 text-sm text-left hover:bg-muted flex items-center gap-2"
-                  >
-                    <span
-                      className="w-3 h-3 rounded-full flex-shrink-0"
-                      style={{ backgroundColor: sanitizeColor(cal.color) }}
-                    />
-                    <span className="truncate text-foreground">{cal.name}</span>
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
 
-        {canApplyProposal && (
+          {!supportsCalendar && (
-          <button
+            <span className="text-xs text-muted-foreground italic">{t('no_calendar')}</span>
-            onClick={handleApplyProposal}
+          )}
-            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"
-          >
-            <CalendarCheck className="w-3.5 h-3.5" />
-            {t('apply_proposal')}
-          </button>
-        )}
 
-        {supportsCalendar && (existingEvent || parsedEvent) && (
+          {isProcessing && (
-          <button
+            <Loader2 className="w-4 h-4 animate-spin text-muted-foreground ml-auto" />
-            onClick={handleViewInCalendar}
+          )}
-            className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-muted transition-colors min-h-[36px]"
+        </div>
-          >
-            <Calendar className="w-3.5 h-3.5" />
-            {viewActionLabel}
-            <ArrowRight className="w-3 h-3" />
-          </button>
-        )}
-
-        {!supportsCalendar && (
-          <span className="text-xs text-muted-foreground italic">{t('no_calendar')}</span>
-        )}
-
-        {isProcessing && (
-          <Loader2 className="w-4 h-4 animate-spin text-muted-foreground ml-auto" />
         )}
       </div>
-      )}
     </div>
   );
 }

components/email/email-composer.tsx

@@ -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,7 +32,8 @@ 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";
 
 /** Strip HTML tags and decode entities to get a plain-text version */
@@ -52,6 +55,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 {
@@ -66,7 +73,10 @@ 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[];
   }) => void | Promise<void>;
   onClose?: () => void;
   onDiscardDraft?: (draftId: string) => void;
@@ -87,6 +97,11 @@ interface EmailComposerProps {
     receivedAt?: string;
     accountId?: string;
     attachments?: Array<{ blobId: string; name?: string; type: string; size: number; cid?: string; disposition?: string }>;
+    // Threading: parent's Message-ID and References, used to set RFC 5322
+    // In-Reply-To and References on outgoing replies. See #234.
+    messageId?: string;
+    inReplyTo?: string[];
+    references?: string[];
   };
 }
 
@@ -116,9 +131,28 @@ export function EmailComposer({
   const tCommon = useTranslations('common');
   const timeFormat = useSettingsStore((state) => state.timeFormat);
   const plainTextMode = useSettingsStore((state) => state.plainTextMode);
+  const subAddressDelimiter = useSettingsStore((state) => state.subAddressDelimiter);
   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 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 = () => {
@@ -168,10 +202,18 @@ 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 signatureBlock = shouldEmbedSignatureAboveQuote
+        ? `\n\n-- \n${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;
     }
@@ -183,20 +225,36 @@ export function EmailComposer({
     const from = replyTo.from?.[0];
     const fromStr = from ? `${from.name || from.email}` : tCommon('unknown');
 
+    // 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 buildEmbeddedSignatureHtml = (): string => {
+      if (!shouldEmbedSignatureAboveQuote) return '';
+      if (initialSignatureIdentity?.htmlSignature) {
+        return `<br><br>-- <br>${sanitizeEmailHtml(initialSignatureIdentity.htmlSignature)}`;
+      }
+      if (initialSignatureIdentity?.textSignature) {
+        return `<br><br>-- <br>${initialSignatureIdentity.textSignature.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}`;
+      }
+      return '';
+    };
+    const signatureBlock = buildEmbeddedSignatureHtml();
+
     // 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;
@@ -234,6 +292,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);
@@ -265,24 +326,33 @@ 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;
   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) {
+    if (resolved) {
-      setSelectedIdentityId(matchedIdentityId);
+      setSelectedIdentityId(resolved.identityId);
+      if (resolved.overrideEmail && !fromOverrideEnabled) {
+        setFromOverrideEnabled(true);
+        setFromOverrideEmail(resolved.overrideEmail);
+        if (resolved.overrideName) setFromOverrideName(resolved.overrideName);
+      }
       return;
     }
 
@@ -301,6 +371,7 @@ export function EmailComposer({
     }
   }, [
     autoSelectReplyIdentity,
+    fromOverrideEnabled,
     identities,
     initialData?.selectedIdentityId,
     mode,
@@ -311,12 +382,15 @@ export function EmailComposer({
     selectedIdentityId,
   ]);
 
-  const composerSignatureHtml = currentIdentity?.htmlSignature
+  const composerSignatureHtml = signatureIdentity?.htmlSignature
-    ? `<div>${sanitizeEmailHtml(currentIdentity.htmlSignature)}</div>`
+    ? `<div>${sanitizeEmailHtml(signatureIdentity.htmlSignature)}</div>`
-    : currentIdentity?.textSignature
+    : signatureIdentity?.textSignature
-      ? `<div>${getPlainTextSignature(currentIdentity).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</div>`
+      ? `<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();
@@ -347,8 +421,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 });
+  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 };
+  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 });
@@ -437,10 +511,13 @@ export function EmailComposer({
       return;
     }
 
-    autocompleteTimeoutRef.current = setTimeout(() => {
+    autocompleteTimeoutRef.current = setTimeout(async () => {
-      const results = getAutocomplete(lastPart);
+      const localResults = getAutocomplete(lastPart);
-      setAutocompleteResults(results);
+      // Let plugins contribute extra suggestions (Slack handles, GitHub, CRM, …).
-      setActiveAutoField(results.length > 0 ? field : null);
+      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]);
@@ -550,6 +627,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 {
@@ -578,6 +668,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);
@@ -719,11 +815,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)
+        ? 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(
@@ -736,7 +838,8 @@ export function EmailComposer({
         fromEmail,
         draftId || undefined,
         uploadedAttachments,
-        currentIdentity?.name || undefined
+        fromName,
+        plainTextMode ? undefined : body
       );
 
       setDraftId(savedDraftId);
@@ -772,6 +875,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);
 
@@ -812,19 +928,27 @@ export function EmailComposer({
     attachments: Array<{ blobId: string; name: string; type: string; size: number; disposition: 'inline'; cid: string }>;
   } => {
     const known = inlineImagesRef.current;
-    if (known.length === 0) return { html, attachments: [] };
-
     const doc = new DOMParser().parseFromString(`<body>${html}</body>`, 'text/html');
     const used = new Map<string, typeof known[number]>();
 
-    doc.querySelectorAll('img[data-cid]').forEach((img) => {
+    if (known.length > 0) {
-      const cid = img.getAttribute('data-cid');
+      doc.querySelectorAll('img[data-cid]').forEach((img) => {
-      if (!cid) return;
+        const cid = img.getAttribute('data-cid');
-      const entry = known.find((e) => e.cid === cid);
+        if (!cid) return;
-      if (!entry) return;
+        const entry = known.find((e) => e.cid === cid);
-      img.setAttribute('src', `cid:${cid}`);
+        if (!entry) return;
-      img.removeAttribute('data-cid');
+        img.setAttribute('src', `cid:${cid}`);
-      used.set(cid, entry);
+        img.removeAttribute('data-cid');
+        used.set(cid, entry);
+      });
+    }
+
+    // Recipient mail clients apply default <p> margins inside table cells,
+    // inflating row height. Tiptap wraps cell text in <p>, so force margin:0
+    // to match the composer's tight rows.
+    doc.querySelectorAll('td > p, th > p').forEach((p) => {
+      const existing = p.getAttribute('style') || '';
+      p.setAttribute('style', `margin:0;${existing}`);
     });
 
     return {
@@ -887,28 +1011,51 @@ export function EmailComposer({
       }
     }
 
-    const fromEmail = currentIdentity?.email
+    const identityFromEmail = currentIdentity?.email
       ? subAddressTag
-        ? generateSubAddress(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) {
+      if (signatureAlreadyInBody) return '';
-        return `<br><br>-- <br>${sanitizeEmailHtml(currentIdentity.htmlSignature)}`;
+      if (signatureIdentity?.htmlSignature) {
+        return `<br><br>-- <br>${sanitizeEmailHtml(signatureIdentity.htmlSignature)}`;
       }
-      if (currentIdentity?.textSignature) {
+      if (signatureIdentity?.textSignature) {
-        return `<br><br>-- <br>${currentIdentity.textSignature.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}`;
+        return `<br><br>-- <br>${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.
+    const threadingHeaders = (mode === 'reply' || mode === 'replyAll')
+      ? computeReplyThreadingHeaders(replyTo)
+      : null;
+
     // In plain text mode, send text/plain only (no HTML body)
     const finalBody = plainTextMode
-      ? appendPlainTextSignature(body, currentIdentity)
+      ? (signatureAlreadyInBody ? body : appendPlainTextSignature(body, signatureIdentity))
-      : appendPlainTextSignature(htmlToPlainText(body), currentIdentity);
+      : (signatureAlreadyInBody ? htmlToPlainText(body) : appendPlainTextSignature(htmlToPlainText(body), signatureIdentity));
 
     const rewritten = plainTextMode ? null : rewriteInlineImages(body);
     const finalHtmlBody = plainTextMode
@@ -917,12 +1064,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)) {
@@ -968,12 +1141,22 @@ export function EmailComposer({
         }
 
         // 4. Build canonical MIME
+        // mime-builder takes inReplyTo as a single ref-form msg-id (with brackets);
+        // references stays an array. threadingHeaders contains bare msg-ids.
+        const mimeInReplyTo = threadingHeaders?.inReplyTo[0]
+          ? `<${threadingHeaders.inReplyTo[0]}>`
+          : undefined;
+        const mimeReferences = threadingHeaders?.references.length
+          ? threadingHeaders.references.map(id => `<${id}>`)
+          : undefined;
         const mimeBytes = buildMimeMessage({
           from: { name: currentIdentity.name || undefined, email: fromEmail || currentIdentity.email },
           to: toAddresses.map(e => ({ email: e })),
           cc: ccAddresses.length > 0 ? ccAddresses.map(e => ({ email: e })) : undefined,
           bcc: bccAddresses.length > 0 ? bccAddresses.map(e => ({ email: e })) : undefined,
           subject,
+          inReplyTo: mimeInReplyTo,
+          references: mimeReferences,
           textBody: finalBody,
           htmlBody: finalHtmlBody,
           attachments: mimeAttachments.length > 0 ? mimeAttachments : undefined,
@@ -986,6 +1169,8 @@ export function EmailComposer({
           to: toAddresses.map(e => ({ email: e })),
           cc: ccAddresses.length > 0 ? ccAddresses.map(e => ({ email: e })) : undefined,
           subject,
+          inReplyTo: mimeInReplyTo,
+          references: mimeReferences,
         };
 
         // 5. Sign if enabled
@@ -1030,19 +1215,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,
+          fromName,
-          identityId: currentIdentity?.id,
+          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("");
@@ -1054,7 +1270,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'));
@@ -1065,7 +1281,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?.();
   };
 
@@ -1075,7 +1291,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?.();
   };
 
@@ -1087,7 +1303,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?.();
   };
 
@@ -1171,7 +1387,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)}
@@ -1179,7 +1413,7 @@ export function EmailComposer({
                 >
                   {identities.map((identity) => {
                     const displayEmail = subAddressTag
-                      ? generateSubAddress(identity.email, subAddressTag)
+                      ? generateSubAddress(identity.email, subAddressTag, subAddressDelimiter)
                       : identity.email;
                     return (
                       <option key={identity.id} value={identity.id}>
@@ -1192,7 +1426,7 @@ export function EmailComposer({
                 <span className="text-sm text-foreground flex-1 truncate">
                   {subAddressTag ? (
                     <span className="font-mono">
-                      {generateSubAddress(primaryIdentity?.email || '', subAddressTag)}
+                      {generateSubAddress(primaryIdentity?.email || '', subAddressTag, subAddressDelimiter)}
                     </span>
                   ) : (
                     <>
@@ -1203,16 +1437,18 @@ export function EmailComposer({
                   )}
                 </span>
               )}
-              <SubAddressHelper
+              {!fromOverrideEnabled && (
-                baseEmail={
+                <SubAddressHelper
-                  (selectedIdentityId
+                  baseEmail={
-                    ? identities.find(id => id.id === selectedIdentityId)?.email
+                    (selectedIdentityId
-                    : primaryIdentity?.email) || ''
+                      ? identities.find(id => id.id === selectedIdentityId)?.email
-                }
+                      : primaryIdentity?.email) || ''
-                recipientEmails={to.split(',').map(e => e.trim()).filter(Boolean)}
+                  }
-                onSelectTag={setSubAddressTag}
+                  recipientEmails={to.split(',').map(e => e.trim()).filter(Boolean)}
-              />
+                  onSelectTag={setSubAddressTag}
-              {subAddressTag && (
+                />
+              )}
+              {!fromOverrideEnabled && subAddressTag && (
                 <Button
                   type="button"
                   variant="ghost"
@@ -1224,6 +1460,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>
 
@@ -1374,10 +1632,13 @@ export function EmailComposer({
           </div>
         )}
 
-        {plainTextMode ? (
+        {/* Hide the visual signature preview when the signature has already been
-          getPlainTextSignature(currentIdentity) ? (
+            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)}
+              {'-- \n'}{getPlainTextSignature(signatureIdentity)}
             </div>
           ) : null
         ) : composerSignatureHtml ? (

components/email/email-hover-actions.tsx

@@ -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) => {

components/email/email-identity-badge.tsx

@@ -5,6 +5,7 @@ import { Mail, Tag } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { Email, Identity } from '@/lib/jmap/types';
 import { parseSubAddress } from '@/lib/sub-addressing';
+import { useSettingsStore } from '@/stores/settings-store';
 
 interface EmailIdentityBadgeProps {
   email: Email;
@@ -20,12 +21,13 @@ export function EmailIdentityBadge({
   className,
 }: EmailIdentityBadgeProps) {
   const t = useTranslations('identities.badge');
+  const subAddressDelimiter = useSettingsStore((state) => state.subAddressDelimiter);
 
   const fromAddress = email.from?.[0]?.email;
   if (!fromAddress) return null;
 
   // Parse the from address to check for sub-addressing
-  const parsedFrom = parseSubAddress(fromAddress);
+  const parsedFrom = parseSubAddress(fromAddress, subAddressDelimiter);
 
   // Find matching identity (email sent BY the user)
   const matchingIdentity = identities.find(
@@ -37,7 +39,7 @@ export function EmailIdentityBadge({
   if (!matchingIdentity) {
     // Check all TO addresses for sub-address tags matching user's identities
     for (const recipient of email.to || []) {
-      const parsedTo = parseSubAddress(recipient.email);
+      const parsedTo = parseSubAddress(recipient.email, subAddressDelimiter);
       if (parsedTo.tag) {
         // Check if this base email matches any of the user's identities
         const matchingToIdentity = identities.find(
@@ -70,7 +72,7 @@ export function EmailIdentityBadge({
           title={t('sub_address_tag', { tag: displayTag })}
         >
           <Tag className="w-3 h-3" />
-          <span className="font-mono">+{displayTag}</span>
+          <span className="font-mono">{subAddressDelimiter}{displayTag}</span>
         </div>
       );
     }
@@ -114,7 +116,7 @@ export function EmailIdentityBadge({
           aria-label={t('sub_address_tag', { tag: displayTag })}
         >
           <Tag className="w-3 h-3" />
-          <span className="font-mono">{t('subaddress_tag', { tag: displayTag })}</span>
+          <span className="font-mono">{subAddressDelimiter}{displayTag}</span>
         </div>
       )}
 

components/email/email-list-item.tsx

@@ -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')}
+        className={cn('px-4', isFocusedMailLayout ? 'flex items-center' : 'flex items-start')}
-        style={isFocusedMailLayout ? { gap: '12px' } : { gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
+        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>
               )}
             </>

components/email/email-list.tsx

@@ -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;
@@ -178,6 +178,14 @@ export function EmailList({
     setIsProcessing(true);
     try {
       await batchDelete(client, isInTrash);
+      const storeError = useEmailStore.getState().error;
+      if (storeError) {
+        const { toast } = await import('sonner');
+        toast.error(storeError);
+      }
+    } catch (err) {
+      const { toast } = await import('sonner');
+      toast.error(err instanceof Error ? err.message : 'Failed to delete emails');
     } finally {
       setTimeout(() => setIsProcessing(false), 500);
     }
@@ -275,7 +283,7 @@ export function EmailList({
         <div className="px-4 py-2 border-b bg-accent/30 border-border flex items-center justify-between">
           <div className="flex items-center gap-2 animate-in fade-in slide-in-from-left-3 duration-300">
             <span className="text-sm font-medium text-foreground">
-              {selectedEmailIds.size} {selectedEmailIds.size === 1 ? 'email' : 'emails'} selected
+              {t('batch_actions.selected_messages', { count: selectedEmailIds.size })}
             </span>
           </div>
           <div className="flex items-center gap-1 animate-in fade-in slide-in-from-right-3 duration-300">
@@ -330,7 +338,7 @@ export function EmailList({
               disabled={isProcessing}
               className="text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
             >
-              Cancel
+              {t('batch_actions.clear_selection')}
             </Button>
           </div>
         </div>

components/email/rich-text-editor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useCallback } from "react";
+import React, { useEffect, useCallback, useState, useRef } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Underline from "@tiptap/extension-underline";
@@ -10,6 +10,10 @@ import { TextStyle } from "@tiptap/extension-text-style";
 import Color from "@tiptap/extension-color";
 import { ResizableImage } from "@/components/email/resizable-image";
 import Placeholder from "@tiptap/extension-placeholder";
+import { Table } from "@tiptap/extension-table";
+import { TableRow } from "@tiptap/extension-table-row";
+import { TableHeader } from "@tiptap/extension-table-header";
+import { TableCell } from "@tiptap/extension-table-cell";
 import { cn } from "@/lib/utils";
 import {
   Bold,
@@ -29,6 +33,10 @@ import {
   RemoveFormatting,
   Heading1,
   Heading2,
+  Table as TableIcon,
+  Trash2,
+  Rows3,
+  Columns3,
 } from "lucide-react";
 
 export interface InlineImageUpload {
@@ -79,6 +87,43 @@ function ToolbarSeparator() {
   return <div className="w-px h-5 bg-border mx-0.5" />;
 }
 
+const TABLE_PICKER_ROWS = 6;
+const TABLE_PICKER_COLS = 8;
+
+function TableSizePicker({ onPick }: { onPick: (rows: number, cols: number) => void }) {
+  const [hover, setHover] = useState<{ r: number; c: number } | null>(null);
+  return (
+    <div>
+      <div
+        className="grid gap-0.5"
+        style={{ gridTemplateColumns: `repeat(${TABLE_PICKER_COLS}, 1fr)` }}
+        onMouseLeave={() => setHover(null)}
+      >
+        {Array.from({ length: TABLE_PICKER_ROWS * TABLE_PICKER_COLS }).map((_, i) => {
+          const r = Math.floor(i / TABLE_PICKER_COLS);
+          const c = i % TABLE_PICKER_COLS;
+          const active = hover && r <= hover.r && c <= hover.c;
+          return (
+            <button
+              key={i}
+              type="button"
+              onMouseEnter={() => setHover({ r, c })}
+              onClick={() => onPick(r + 1, c + 1)}
+              className={cn(
+                "w-4 h-4 border border-border/60 rounded-[2px] transition-colors",
+                active ? "bg-primary border-primary" : "bg-background hover:bg-accent"
+              )}
+            />
+          );
+        })}
+      </div>
+      <div className="text-xs text-muted-foreground mt-1.5 text-center">
+        {hover ? `${hover.r + 1} × ${hover.c + 1}` : "Pick size"}
+      </div>
+    </div>
+  );
+}
+
 export function RichTextEditor({
   content,
   onChange,
@@ -94,6 +139,8 @@ export function RichTextEditor({
     extensions: [
       StarterKit.configure({
         heading: { levels: [1, 2] },
+        link: false,
+        underline: false,
       }),
       Underline,
       Link.configure({
@@ -109,6 +156,27 @@ export function RichTextEditor({
       Placeholder.configure({
         placeholder,
       }),
+      Table.configure({
+        resizable: true,
+        HTMLAttributes: {
+          border: "1",
+          cellpadding: "6",
+          cellspacing: "0",
+          width: "100%",
+          style: "width:100%;border-collapse:collapse;",
+        },
+      }),
+      TableRow,
+      TableHeader.configure({
+        HTMLAttributes: {
+          style: "padding:6px 8px;border:1px solid #ccc;background-color:#f5f5f5;color:#1f2937;text-align:left;",
+        },
+      }),
+      TableCell.configure({
+        HTMLAttributes: {
+          style: "padding:6px 8px;border:1px solid #ccc;vertical-align:top;",
+        },
+      }),
     ],
     content,
     editorProps: {
@@ -188,6 +256,20 @@ export function RichTextEditor({
       .run();
   }, [editor]);
 
+  const [tableMenuOpen, setTableMenuOpen] = useState(false);
+  const tableWrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!tableMenuOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (tableWrapperRef.current && !tableWrapperRef.current.contains(e.target as Node)) {
+        setTableMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [tableMenuOpen]);
+
   if (!editor) {
     return (
       <div className={cn("min-h-[100px]", className)} />
@@ -309,6 +391,89 @@ export function RichTextEditor({
           <LinkIcon className="w-4 h-4" />
         </ToolbarButton>
 
+        <div ref={tableWrapperRef} className="relative">
+          <ToolbarButton
+            active={editor.isActive("table")}
+            onClick={() => setTableMenuOpen((v) => !v)}
+            title="Table"
+          >
+            <TableIcon className="w-4 h-4" />
+          </ToolbarButton>
+          {tableMenuOpen && (
+            <div className="absolute z-50 top-full left-0 mt-1 bg-popover border border-border rounded-md shadow-md p-2 min-w-[200px]">
+              {editor.isActive("table") ? (
+                <div className="flex flex-col gap-0.5">
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left"
+                    onClick={() => { editor.chain().focus().addRowBefore().run(); setTableMenuOpen(false); }}
+                  >
+                    <Rows3 className="w-4 h-4" /> Add row above
+                  </button>
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left"
+                    onClick={() => { editor.chain().focus().addRowAfter().run(); setTableMenuOpen(false); }}
+                  >
+                    <Rows3 className="w-4 h-4" /> Add row below
+                  </button>
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left"
+                    onClick={() => { editor.chain().focus().addColumnBefore().run(); setTableMenuOpen(false); }}
+                  >
+                    <Columns3 className="w-4 h-4" /> Add column before
+                  </button>
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left"
+                    onClick={() => { editor.chain().focus().addColumnAfter().run(); setTableMenuOpen(false); }}
+                  >
+                    <Columns3 className="w-4 h-4" /> Add column after
+                  </button>
+                  <div className="h-px bg-border my-1" />
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left"
+                    onClick={() => { editor.chain().focus().deleteRow().run(); setTableMenuOpen(false); }}
+                  >
+                    <Trash2 className="w-4 h-4" /> Delete row
+                  </button>
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left"
+                    onClick={() => { editor.chain().focus().deleteColumn().run(); setTableMenuOpen(false); }}
+                  >
+                    <Trash2 className="w-4 h-4" /> Delete column
+                  </button>
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left"
+                    onClick={() => { editor.chain().focus().toggleHeaderRow().run(); setTableMenuOpen(false); }}
+                  >
+                    <Rows3 className="w-4 h-4" /> Toggle header row
+                  </button>
+                  <div className="h-px bg-border my-1" />
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left text-red-600 dark:text-red-400"
+                    onClick={() => { editor.chain().focus().deleteTable().run(); setTableMenuOpen(false); }}
+                  >
+                    <Trash2 className="w-4 h-4" /> Delete table
+                  </button>
+                </div>
+              ) : (
+                <TableSizePicker
+                  onPick={(rows, cols) => {
+                    editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
+                    setTableMenuOpen(false);
+                  }}
+                />
+              )}
+            </div>
+          )}
+        </div>
+
         <ToolbarSeparator />
 
         <ToolbarButton

components/email/smime-status-banner.tsx

@@ -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,33 +103,34 @@ 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
+        <div key={i} className="flex items-start gap-3">
-          key={i}
+          <div className={cn(
-          className={cn(
+            "w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 shadow-sm",
-            "flex items-center gap-2 px-3 py-1.5 rounded-md text-sm border",
+            variantTone[item.variant],
-            variantStyles[item.variant],
+          )}>
-          )}
+            {item.icon}
-        >
+          </div>
-          {item.icon}
+          <div className="flex-1 min-w-0 flex items-center justify-between gap-2">
-          <span className="flex-1">{item.text}</span>
+            <div className="min-w-0 flex-1">
-          {item.variant === 'warning' && status.decryptionError === 'locked' && onUnlockKey && (
+              <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-            <button
+                S/MIME
-              onClick={onUnlockKey}
+              </div>
-              className="text-xs font-medium underline hover:no-underline"
+              <div className="text-sm font-medium text-foreground break-words">
-            >
+                {item.text}
-              {t('unlock_key')}
+              </div>
-            </button>
+            </div>
-          )}
+            {item.variant === 'warning' && status.decryptionError === 'locked' && onUnlockKey && (
+              <button
+                onClick={onUnlockKey}
+                className="text-xs font-medium underline hover:no-underline flex-shrink-0"
+              >
+                {t('unlock_key')}
+              </button>
+            )}
+          </div>
         </div>
       ))}
     </div>

components/email/thread-conversation-view.tsx

@@ -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];
+        // Per RFC 8621, an HTML-only email exposes the same partId in both htmlBody and textBody -
-        if (hasTextBody && htmlContent) {
+        // 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;

components/email/thread-list-item.tsx

@@ -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')}
+          className={cn('px-3', isFocusedMailLayout ? 'flex items-center' : 'flex items-start')}
-          style={isFocusedMailLayout ? { gap: '12px' } : { gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
+          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')}
+            className={cn('px-3', isFocusedMailLayout ? 'flex items-center' : 'flex items-start')}
-            style={isFocusedMailLayout ? { gap: '12px' } : { gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
+            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>
                   )}
                 </>

components/files/file-preview-modal.tsx

@@ -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);
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
-    return () => window.removeEventListener("keydown", handleKeyDown);
+    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
+          <object
-            src={objectUrl}
+            data={objectUrl}
-            sandbox="allow-scripts"
+            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 && (

components/identity/sub-address-helper.tsx

@@ -7,6 +7,7 @@ import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { useIdentityStore } from '@/stores/identity-store';
+import { useSettingsStore } from '@/stores/settings-store';
 import {
   generateSubAddress,
   extractDomain,
@@ -35,6 +36,7 @@ export function SubAddressHelper({
   const popoverRef = useRef<HTMLDivElement>(null);
 
   const { subAddress, addRecentTag, addTagSuggestion } = useIdentityStore();
+  const subAddressDelimiter = useSettingsStore((state) => state.subAddressDelimiter);
 
   // Get suggestions based on recipient (memoized for performance)
   const suggestions = useMemo(() => {
@@ -47,7 +49,7 @@ export function SubAddressHelper({
   }, [recipientEmails]);
 
   // Generate preview
-  const preview = tag ? generateSubAddress(baseEmail, tag) : baseEmail;
+  const preview = tag ? generateSubAddress(baseEmail, tag, subAddressDelimiter) : baseEmail;
 
   // Close popover when clicking outside
   useEffect(() => {
@@ -226,7 +228,7 @@ export function SubAddressHelper({
 
           {/* Help Text */}
           <div className="mb-3 text-xs text-muted-foreground">
-            {t('help_text')}
+            {t('help_text', { delimiter: subAddressDelimiter })}
           </div>
 
           {/* Use Address Button */}

components/layout/account-switcher.tsx

@@ -6,7 +6,7 @@ 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 { getInitials, getMaxAccounts } from "@/lib/account-utils";
 import { cn } from "@/lib/utils";
 import { useRouter } from "@/i18n/navigation";
 
@@ -40,13 +40,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 +114,11 @@ export function AccountSwitcher({ variant = "rail", className }: AccountSwitcher
     setDefaultAccount(accountId);
   };
 
-  // Display name for the active account
+  // Show the account's own identity, not the preferred sending identity -
-  const displayName = primaryIdentity?.name || activeAccount?.displayName || activeAccount?.label || "";
+  // primaryIdentity can be an alias (e.g. info@korazo.net) that differs from
-  const displayEmail = primaryIdentity?.email || activeAccount?.email || activeAccount?.username || "";
+  // the actually logged-in account (info@linusrath.de).
+  const displayName = activeAccount?.displayName || activeAccount?.label || "";
+  const displayEmail = activeAccount?.email || activeAccount?.username || "";
 
   return (
     <>
@@ -217,7 +221,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}

components/layout/mailbox-context-menu.tsx

@@ -2,6 +2,7 @@
 
 import { useTranslations } from "next-intl";
 import { Mailbox } from "@/lib/jmap/types";
+import { getMailboxPath } from "@/lib/utils";
 import {
   ContextMenu,
   ContextMenuItem,
@@ -10,13 +11,16 @@ import {
 } from "@/components/ui/context-menu";
 import {
   CheckCheck,
+  ChevronRight,
   MailOpen,
   Mails,
+  MoreHorizontal,
   Trash2,
   FolderPlus,
   Pencil,
   FolderX,
   RefreshCw,
+  Upload,
 } from "lucide-react";
 
 interface Position {
@@ -28,12 +32,51 @@ export type MailboxContextTarget =
   | { kind: "mailbox"; mailbox: Mailbox; hasChildren: boolean }
   | { kind: "folders-section" };
 
+const PATH_SEPARATOR = " › ";
+const MAX_PATH_LENGTH = 40;
+const MAX_SEGMENT_LENGTH = 16;
+
+function truncateSegment(name: string): string {
+  return name.length > MAX_SEGMENT_LENGTH
+    ? `${name.slice(0, MAX_SEGMENT_LENGTH - 1)}…`
+    : name;
+}
+
+function renderPathSegments(segments: string[]): React.ReactNode {
+  return (
+    <span className="inline-flex items-center gap-1 align-middle">
+      {segments.map((seg, i) => (
+        <span key={i} className="inline-flex items-center gap-1">
+          {i > 0 && <ChevronRight className="w-3.5 h-3.5 opacity-60" />}
+          {seg === "…" ? <MoreHorizontal className="w-3.5 h-3.5" /> : <span>{seg}</span>}
+        </span>
+      ))}
+    </span>
+  );
+}
+
+function renderShortenedPath(fullPath: string): React.ReactNode {
+  const segments = fullPath.split(PATH_SEPARATOR);
+  if (fullPath.length <= MAX_PATH_LENGTH) {
+    return renderPathSegments(segments);
+  }
+  if (segments.length <= 2) {
+    return renderPathSegments(segments.map(truncateSegment));
+  }
+  return renderPathSegments([
+    truncateSegment(segments[0]),
+    "…",
+    truncateSegment(segments[segments.length - 1]),
+  ]);
+}
+
 interface MailboxContextMenuProps {
   target: MailboxContextTarget | null;
   position: Position;
   isOpen: boolean;
   onClose: () => void;
   menuRef: React.RefObject<HTMLDivElement | null>;
+  mailboxes: Mailbox[];
   onMarkFolderRead?: (mailboxId: string) => void;
   onMarkFolderTreeRead?: (mailboxId: string) => void;
   onMarkAllFoldersRead?: () => void;
@@ -42,6 +85,7 @@ interface MailboxContextMenuProps {
   onCreateFolder?: () => void;
   onRenameFolder?: (mailboxId: string) => void;
   onDeleteFolder?: (mailboxId: string) => void;
+  onImportEmail?: (mailboxId: string) => void;
   onRefresh?: () => void;
 }
 
@@ -51,6 +95,7 @@ export function MailboxContextMenu({
   isOpen,
   onClose,
   menuRef,
+  mailboxes,
   onMarkFolderRead,
   onMarkFolderTreeRead,
   onMarkAllFoldersRead,
@@ -59,6 +104,7 @@ export function MailboxContextMenu({
   onCreateFolder,
   onRenameFolder,
   onDeleteFolder,
+  onImportEmail,
   onRefresh,
 }: MailboxContextMenuProps) {
   const t = useTranslations("mailbox_context_menu");
@@ -106,10 +152,15 @@ 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);
 
   return (
     <ContextMenu ref={menuRef} isOpen={isOpen} position={position} onClose={onClose}>
-      <ContextMenuHeader>{mailbox.name}</ContextMenuHeader>
+      <ContextMenuHeader>
+        <span title={fullPath}>{renderShortenedPath(fullPath)}</span>
+      </ContextMenuHeader>
 
       <ContextMenuItem
         icon={MailOpen}
@@ -143,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")}

components/layout/navigation-rail.tsx

@@ -11,13 +11,13 @@ 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 { getInitials, 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";
@@ -167,7 +167,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 +177,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 +253,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: "contacts", icon: BookUser, labelKey: "contacts", href: "/contacts", hidden: !supportsContacts },
-    { id: "files", icon: HardDrive, labelKey: "files", href: "/files", hidden: supportsWebDAV === false || !filesEnabled },
+    { id: "files", icon: HardDrive, labelKey: "files", href: "/files", hidden: !supportsFiles || !filesEnabled },
   ];
 
   const isSettingsActive = !activeAppId && pathname.startsWith("/settings");
@@ -335,7 +344,7 @@ export function NavigationRail({
           );
         })}
 
-        {/* Admin (Stalwart admins) — hard nav because /admin lives outside the [locale] tree */}
+        {/* Admin (Stalwart admins) - hard nav because /admin lives outside the [locale] tree */}
         {isStalwartAdmin && (
           <a
             href="/admin"
@@ -345,7 +354,18 @@ export function NavigationRail({
               "text-muted-foreground hover:text-foreground"
             )}
           >
-            <Shield className="w-5 h-5" />
+            <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>
         )}
@@ -400,7 +420,7 @@ export function NavigationRail({
 
       <nav
         className={cn(
-          "flex flex-col",
+          "flex flex-col flex-1 min-h-0 overflow-y-auto scroll-hidden",
           collapsed ? "items-center gap-1 py-3 px-1" : "gap-0.5 py-2 px-2",
         )}
         role="navigation"
@@ -515,10 +535,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>
         )}
 
@@ -606,7 +635,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"